viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 0065443861a856169118b8291432c0e2a7c496e0

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

implement task

Showing 31 changed files with 5639 additions and 173 deletions   Show diff stats
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 3
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> --> 7 <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->
8 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet"> 8 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet">
9 <title>School Management</title> 9 <title>School Management</title>
10 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon"> 10 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
11 <meta name="description" content="School Management"> 11 <meta name="description" content="School Management">
12 <link href="./static/css/custom.css" rel="stylesheet" /> 12 <link href="./static/css/custom.css" rel="stylesheet" />
13 <style> 13 <style>
14 [v-cloak] { 14 [v-cloak] {
15 display: none; 15 display: none;
16 } 16 }
17 </style> 17 </style>
18 </head> 18 </head>
19 19
20 <body> 20 <body>
21 21
22 <div id="app"></div> 22 <div id="app"></div>
23 <!-- built files will be auto injected --> 23 <!-- built files will be auto injected -->
24 <!-- Global site tag (gtag.js) - Google Analytics --> 24 <!-- Global site tag (gtag.js) - Google Analytics -->
25 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> --> 25 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> -->
26 <script> 26 <!-- <script>
27 window.dataLayer = window.dataLayer || []; 27 window.dataLayer = window.dataLayer || [];
28 28
29 function gtag() { 29 function gtag() {
30 dataLayer.push(arguments); 30 dataLayer.push(arguments);
31 } 31 }
32 gtag('js', new Date()); 32 gtag('js', new Date());
33 gtag('config', 'UA-3881136-11'); 33 gtag('config', 'UA-3881136-11');
34 </script> 34 </script> -->
35 </body> 35 </body>
36 36
37 </html> 37 </html>
1 <template> 1 <template>
2 <div id="appRoot"> 2 <div id="appRoot">
3 <template v-if="!$route.meta.public"> 3 <template v-if="!$route.meta.public">
4 <!-- Go to top --> 4 <!-- Go to top -->
5 <v-app id="inspire" class="app"> 5 <v-app id="inspire" class="app">
6 <app-drawer class="app--drawer"></app-drawer> 6 <app-drawer class="app--drawer"></app-drawer>
7 <v-content> 7 <v-content>
8 <div class="page-wrapper"> 8 <div class="page-wrapper">
9 <!-- Header toolbar with Seacrh --> 9 <!-- Header toolbar with Seacrh -->
10 <app-toolbar class="app--toolbar"></app-toolbar> 10 <app-toolbar class="app--toolbar"></app-toolbar>
11 <router-view></router-view> 11 <router-view></router-view>
12 </div> 12 </div>
13 <!-- App Footer --> 13 <!-- App Footer -->
14 <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer> 14 <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer>
15 </v-content> 15 </v-content>
16 <!-- theme setting -->
17 <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
18 <v-icon>settings</v-icon>
19 </v-btn>
20 <v-navigation-drawer
21 class="setting-drawer"
22 temporary
23 right
24 v-model="rightDrawer"
25 hide-overlay
26 fixed
27 >
28 <theme-settings></theme-settings>
29 </v-navigation-drawer> -->
16 </v-app> 30 </v-app>
17 </template> 31 </template>
18 <template v-else> 32 <template v-else>
19 <transition> 33 <transition>
20 <keep-alive> 34 <keep-alive>
21 <router-view></router-view> 35 <router-view></router-view>
22 </keep-alive> 36 </keep-alive>
23 </transition> 37 </transition>
24 </template> 38 </template>
25 <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show"> 39 <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
26 {{ snackbar.text }} 40 {{ snackbar.text }}
27 <v-btn dark flat @click.native="snackbar.show = false" icon> 41 <v-btn dark flat @click.native="snackbar.show = false" icon>
28 <v-icon>close</v-icon> 42 <v-icon>close</v-icon>
29 </v-btn> 43 </v-btn>
30 </v-snackbar> 44 </v-snackbar>
31 </div> 45 </div>
32 </template> 46 </template>
33 <script> 47 <script>
34 import AppDrawer from "@/components/pageHeader/AppDrawer"; 48 import AppDrawer from "@/components/pageHeader/AppDrawer";
35 import AppToolbar from "@/components/pageHeader/AppToolbar"; 49 import AppToolbar from "@/components/pageHeader/AppToolbar";
36 import menu from "@/api/menu"; 50 import menu from "@/api/menu";
37 import AppEvents from "./event"; 51 import AppEvents from "./event";
52 import ThemeSettings from "@/components/ThemeSettings"
38 53
39 export default { 54 export default {
40 components: { 55 components: {
41 AppDrawer, 56 AppDrawer,
42 AppToolbar 57 AppToolbar,
58 ThemeSettings
43 }, 59 },
44 data: () => ({ 60 data: () => ({
45 expanded: true, 61 expanded: true,
46 rightDrawer: false, 62 rightDrawer: false,
47 snackbar: { 63 snackbar: {
48 show: false, 64 show: false,
49 text: "", 65 text: "",
50 color: "" 66 color: ""
51 } 67 }
52 }), 68 }),
53 69
54 computed: {}, 70 computed: {},
55 71
56 created() { 72 created() {
57 AppEvents.forEach(item => { 73 AppEvents.forEach(item => {
58 this.$on(item.name, item.callback); 74 this.$on(item.name, item.callback);
59 }); 75 });
60 window.getApp = this; 76 window.getApp = this;
61 } 77 },
78 methods: {
79 openThemeSettings () {
80 this.$vuetify.goTo(0);
81 this.rightDrawer = (!this.rightDrawer);
82 }
83 },
62 }; 84 };
63 </script> 85 </script>
64 86
65 87
66 <style lang="stylus" scoped> 88 <style lang="stylus" scoped>
67 .setting-fab { 89 .setting-fab {
68 top: 50% !important; 90 top: 50% !important;
69 right: 0; 91 right: 0;
70 border-radius: 0; 92 border-radius: 0;
71 } 93 }
72 94
73 .page-wrapper { 95 .page-wrapper {
74 min-height: calc(1200px - 64px - 50px - 81px); 96 min-height: calc(1200px - 64px - 50px - 81px);
75 } 97 }
76 </style> 98 </style>
77 <style> 99 <style>
78 .application { 100 .application {
79 background-color: white !important; 101 background-color: white !important;
80 font-family: "Poppins", sans-serif; 102 font-family: "Poppins", sans-serif;
81 -webkit-font-smoothing: antialiased; 103 -webkit-font-smoothing: antialiased;
82 -moz-osx-font-smoothing: grayscale; 104 -moz-osx-font-smoothing: grayscale;
83 scroll-behavior: smooth; 105 scroll-behavior: smooth;
84 } 106 }
85 </style> 107 </style>
86 108
src/Services/http.js
Diff comments   View file @0065443
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 3
4 export default () => { 4 export default () => {
5 return axios.create({ 5 return axios.create({
6 // baseURL: 'http://192.168.2.221:3002/v1', 6 // baseURL: 'http://192.168.4.220:3002/v1',
7 baseURL: 'http://13.234.251.173:8001/v1', 7 baseURL: 'http://13.234.251.173:8001/v1',
8 headers: { 8 headers: {
9 Authorization: `Bearer ${store.state.token}` 9 Authorization: `Bearer ${store.state.token}`
10 } 10 }
11 }) 11 })
12 } 12 }
1 const Menu = [ 1 const Menu = [
2 // { header: 'Apps' }, 2 // { header: 'Apps' },
3 { 3 {
4 title: 'Dashboard', 4 title: 'Dashboard',
5 // group: 'apps', 5 // group: 'apps',
6 path: '/dashboard', 6 path: '/dashboard',
7 icon: '/static/schoolIcons/Dashboard.png', 7 icon: '/static/schoolIcons/Dashboard.png',
8 }, 8 },
9 { 9 {
10 title: 'Class', 10 title: 'Class',
11 // group: 'apps', 11 // group: 'apps',
12 path: '/addclass', 12 path: '/addclass',
13 icon: '/static/schoolIcons/Class.png', 13 icon: '/static/schoolIcons/Class.png',
14 }, 14 },
15 { 15 {
16 title: 'Section', 16 title: 'Section',
17 // group: 'apps', 17 // group: 'apps',
18 path: '/section', 18 path: '/section',
19 icon: '/static/schoolIcons/Section.png', 19 icon: '/static/schoolIcons/Section.png',
20 }, 20 },
21 { 21 {
22 title: 'Subjects', 22 title: 'Subjects',
23 path: '/subject', 23 path: '/subject',
24 icon: '/static/schoolIcons/Subjects.png', 24 icon: '/static/schoolIcons/Subjects.png',
25 }, 25 },
26 { 26 {
27 title: 'Parents', 27 title: 'Parents',
28 // group: 'apps', 28 // group: 'apps',
29 path: '/parents', 29 path: '/parents',
30 icon: '/static/schoolIcons/Parents.png', 30 icon: '/static/schoolIcons/Parents.png',
31 }, 31 },
32 { 32 {
33 title: 'Teachers', 33 title: 'Teachers',
34 // group: '', 34 // group: '',
35 path: 'teachers', 35 path: 'teachers',
36 icon: '/static/schoolIcons/Teachers.png', 36 icon: '/static/schoolIcons/Teachers.png',
37 }, 37 },
38 { 38 {
39 title: 'Students', 39 title: 'Students',
40 // group: 'apps', 40 // group: 'apps',
41 path: '/Students', 41 path: '/Students',
42 icon: '/static/schoolIcons/Students.png', 42 icon: '/static/schoolIcons/Students.png',
43 }, 43 },
44 { 44 {
45 title: 'User', 45 title: 'User',
46 path: '/User', 46 path: '/User',
47 icon: '/static/schoolIcons/User.png', 47 icon: '/static/schoolIcons/User.png',
48 }, 48 },
49 { 49 {
50 title: 'Attendance', 50 title: 'Attendance',
51 group: 'Attendance', 51 group: 'Attendance',
52 component: 'Attendance', 52 component: 'Attendance',
53 icon: '/static/schoolIcons/Attendance.png', 53 icon: '/static/schoolIcons/Attendance.png',
54 items: [ 54 items: [
55 { name: 'studentAttendence', title: 'Student Attendance', component: 'studentAttendence', action: '', }, 55 { name: 'studentAttendence', title: 'Student Attendance', component: 'studentAttendence', action: '', },
56 // { name: 'teacherAttendence', title: 'Teacher Attendance', component: 'teacherAttendence', action: '', }, 56 // { name: 'teacherAttendence', title: 'Teacher Attendance', component: 'teacherAttendence', action: '', },
57 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, 57 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
58 ] 58 ]
59 }, 59 },
60 { 60 {
61 title: 'Exam', 61 title: 'Exam',
62 group: 'Exam', 62 group: 'Exam',
63 component: 'Exam', 63 component: 'Exam',
64 icon: '/static/schoolIcons/exam.png', 64 icon: '/static/schoolIcons/exam.png',
65 items: [ 65 items: [
66 { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, 66 { name: 'Exam', title: 'Exam', component: 'Exam', action: '', },
67 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'ExamSchedule', action: '', }, 67 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'ExamSchedule', action: '', },
68 { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, 68 { name: 'Grade', title: 'Grade', component: 'Grade', action: '', },
69 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, 69 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
70 ] 70 ]
71 }, 71 },
72 { 72 {
73 title: 'Mark',
74 group: 'Mark',
75 component: 'Mark',
76 icon: '/static/schoolIcons/marks.png',
77 items: [
78 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', },
79 { name: 'markDistribution', title: 'Mark Distribution', component: 'markDistribution', action: '', },
80 { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },
81 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
82 ]
83 },
84 {
85 title: 'Administrator',
86 group: 'Administrator',
87 component: 'Administrator',
88 icon: '/static/schoolIcons/administrator.png',
89 items: [
90 { name: 'academicYear', title: 'Academic Year', component: 'academicYear', action: '', },
91 { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },
92 { name: 'resetPassword', title: 'Reset Password', component: 'resetPassword', action: '', },
93 { name: 'Role', title: 'Role', component: 'Role', action: '', },
94 ]
95 },
96 {
73 title: 'Notice Board', 97 title: 'Notice Board',
74 path: '/NoticeBoard', 98 path: '/NoticeBoard',
75 icon: '/static/schoolIcons/Notice_board.png', 99 icon: '/static/schoolIcons/Notice_board.png',
76 }, 100 },
77 { 101 {
78 title: 'News', 102 title: 'News',
79 path: '/news', 103 path: '/news',
80 icon: '/static/schoolIcons/News.png', 104 icon: '/static/schoolIcons/News.png',
81 }, 105 },
82 // { 106 // {
83 // title: 'Reminder', 107 // title: 'Reminder',
84 // name: 'reminder', 108 // name: 'reminder',
85 // icon: 'alarm_add', 109 // icon: 'alarm_add',
86 // }, 110 // },
87 { 111 {
88 title: 'Time Table', 112 title: 'Time Table',
89 path: '/timeTable', 113 path: '/timeTable',
90 icon: '/static/schoolIcons/Time_table.png', 114 icon: '/static/schoolIcons/Time_table.png',
91 }, 115 },
92 { 116 {
93 title: 'Library', 117 title: 'Library',
94 group: 'Library', 118 group: 'Library',
95 component: 'Library', 119 component: 'Library',
96 icon: '/static/schoolIcons/Library.png', 120 icon: '/static/schoolIcons/Library.png',
97 items: [ 121 items: [
98 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', }, 122 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
99 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 123 { name: 'Books', title: 'Books', component: 'Books', action: '', },
100 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, 124 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
101 { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', } 125 { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
102 126
103 ] 127 ]
104 }, 128 },
105 { 129 {
130 title: 'Report',
131 group: 'Report',
132 component: 'Report',
133 icon: '/static/schoolIcons/reports.png',
134 items: [
135 { name: 'studentReport', title: 'Student Report', component: 'studentReport', action: '', },
136 { name: 'markSheetReport', title: 'Mark Sheet Report', component: 'markSheetReport', action: '', }
137 ]
138 },
139 {
106 title: 'Notification', 140 title: 'Notification',
107 path: '/notification', 141 path: '/notification',
108 icon: '/static/schoolIcons/Notification.png', 142 icon: '/static/schoolIcons/Notification.png',
109 }, 143 },
110 { 144 {
111 title: 'Social Media', 145 title: 'Social Media',
112 path: '/SocialMedia', 146 path: '/SocialMedia',
113 icon: '/static/schoolIcons/Social_Media.png', 147 icon: '/static/schoolIcons/Social_Media.png',
114 }, 148 },
115 { 149 {
116 title: 'Gallery', 150 title: 'Gallery',
117 path: '/Gallery', 151 path: '/Gallery',
118 icon: '/static/schoolIcons/Gallery.png', 152 icon: '/static/schoolIcons/Gallery.png',
119 }, 153 },
120 { 154 {
121 title: 'Event', 155 title: 'Event',
122 path: '/Event', 156 path: '/Event',
123 icon: '/static/schoolIcons/Events.png', 157 icon: '/static/schoolIcons/Events.png',
124 }, 158 },
125 { 159 {
126 title: 'Holiday', 160 title: 'Holiday',
127 path: '/Holiday', 161 path: '/Holiday',
128 icon: '/static/schoolIcons/Holidays.png', 162 icon: '/static/schoolIcons/Holidays.png',
129 }, 163 },
130 { 164 {
131 title: 'Account', 165 title: 'Account',
132 group: 'Account', 166 group: 'Account',
133 component: 'Account', 167 component: 'Account',
134 icon: '/static/schoolIcons/Account.png', 168 icon: '/static/schoolIcons/Account.png',
135 items: [ 169 items: [
136 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', }, 170 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', },
137 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 171 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
138 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', }, 172 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', },
139 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, 173 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
140 { name: 'Income', title: 'Income', component: 'Income', action: '', }, 174 { name: 'Income', title: 'Income', component: 'Income', action: '', },
141 ] 175 ]
142 } 176 }
143 ]; 177 ];
144 178
145 179
146 // reorder menu 180 // reorder menu
147 Menu.forEach((item) => { 181 Menu.forEach((item) => {
148 // if (item.items) { 182 // if (item.items) {
149 // item.items.sort((x, y) => { 183 // item.items.sort((x, y) => {
150 // let textA = x.title.toUpperCase(); 184 // let textA = x.title.toUpperCase();
151 // let textB = y.title.toUpperCase(); 185 // let textB = y.title.toUpperCase();
152 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 186 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
153 // }); 187 // });
154 // } 188 // }
155 }); 189 });
156 190
157 export default Menu; 191 export default Menu;
src/components/ThemeSettings.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <div id="themeSetting">
3 <v-toolbar color="blue" dark>
4 <v-toolbar-title>Theme Settings</v-toolbar-title>
5 </v-toolbar>
6 <v-container>
7 <v-layout column>
8 <v-flex>
9 <v-subheader class="px-1 my-2">Color Option</v-subheader>
10 <div class="color-option">
11 <v-layout wrap>
12 <label
13 class="color-option--label flex xs6 pa-1"
14 v-for="(option,index) in themeColorOptions"
15 :key="index"
16 >
17 <input type="radio" name="color" v-bind:value="option.key" v-model="themeColor" />
18 <span class="color-option--item bg">
19 <span class="overlay">
20 <span class="material-icons">check</span>
21 </span>
22 <span class="color-option--item--header sideNav" :class="option.value.sideNav"></span>
23 <span class="color-option--item--header mainNav" :class="option.value.mainNav"></span>
24 <span class="sideMenu" :class="option.value.sideManu"></span>
25 </span>
26 </label>
27 </v-layout>
28 </div>
29 <div class="theme-options">
30 <v-subheader class="px-1 my-2">Sidebar Option</v-subheader>
31 <v-divider></v-divider>
32 <div class="my-3">
33 <v-btn-toggle v-model="sideBarOption">
34 <v-btn flat value="dark">Dark</v-btn>
35 <v-btn flat value="light">Light</v-btn>
36 </v-btn-toggle>
37 </div>
38 </div>
39 </v-flex>
40 </v-layout>
41 </v-container>
42 </div>
43 </template>
44
45 <script>
46 import colors from "vuetify/es5/util/colors";
47 export default {
48 data() {
49 return {
50 themeColor: "indigo",
51 sideBarOption: "light",
52 colors: colors
53 };
54 },
55 computed: {
56 themeColorOptions() {
57 return [
58 {
59 key: "blue",
60 value: {
61 sideNav: "blue",
62 mainNav: "blue",
63 sideManu: "white"
64 }
65 },
66 {
67 key: "lightBlue",
68 value: {
69 sideNav: "blue",
70 mainNav: "white",
71 sideManu: "blue lighten-1"
72 }
73 },
74 {
75 key: "teal",
76 value: {
77 sideNav: "teal",
78 mainNav: "teal",
79 sideManu: "white"
80 }
81 },
82 {
83 key: "red",
84 value: {
85 sideNav: "red",
86 mainNav: "red",
87 sideManu: "white"
88 }
89 },
90 {
91 key: "orange",
92 value: {
93 sideNav: "orange",
94 mainNav: "orange",
95 sideManu: "white"
96 }
97 },
98 {
99 key: "purple",
100 value: {
101 sideNav: "purple",
102 mainNav: "purple",
103 sideManu: "white"
104 }
105 },
106 {
107 key: "indigo",
108 value: {
109 sideNav: "indigo",
110 mainNav: "indigo",
111 sideManu: "white"
112 }
113 },
114 {
115 key: "cyan",
116 value: {
117 sideNav: "cyan",
118 mainNav: "cyan",
119 sideManu: "white"
120 }
121 },
122 {
123 key: "pink",
124 value: {
125 sideNav: "pink",
126 mainNav: "pink",
127 sideManu: "white"
128 }
129 },
130 {
131 key: "green",
132 value: {
133 sideNav: "green",
134 mainNav: "green",
135 sideManu: "white"
136 }
137 }
138 ];
139 }
140 },
141 watch: {
142 themeColor: {
143 handler(val) {
144 console.log(val);
145 this.$vuetify.theme.primary = this.colors[val].base;
146 },
147 immediate: true
148 },
149 sideBarOption: {
150 handler(val) {
151 this.$vuetify.dark = val === "dark";
152 },
153 immediate: true
154 }
155 }
156 };
157 </script>
158 <style lang="stylus" scoped>
159 .color-option {
160 &--label {
161 position: relative;
162 display: block;
163 cursor: pointer;
164
165 & input[type='radio'] {
166 display: none;
167
168 &+span {
169 position: relative;
170
171 &>.overlay {
172 display: none;
173 position: absolute;
174 top: 0;
175 bottom: 0;
176 right: 0;
177 left: 0;
178 width: 100%;
179 height: 100%;
180 background-color: rgba(0, 0, 0, 0.3);
181 text-align: center;
182 line-height: 30px;
183 color: #fff;
184 }
185 }
186
187 &:checked+span>.overlay {
188 display: block;
189 }
190 }
191
192 & .bg {
193 background-color: #f1f1f1;
194 }
195 }
196
197 &--item {
198 overflow: hidden;
199 display: block;
200 box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
201 margin-bottom: 15px;
202
203 &--header {
204 height: 10px;
205 }
206
207 &>span {
208 display: block;
209 float: left;
210 width: 50%;
211 height: 20px;
212 }
213 }
214 }
215 </style>
216
217 <style>
218 .indigo {
219 background-color: #444b54 !important;
220 border-color: #444b54 !important;
221 }
222 </style>
223
1 // The Vue build version to load with the `import` command 1 // The Vue build version to load with the `import` command
2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 import Vue from 'vue'; 3 import Vue from 'vue';
4 import App from './App'; 4 import App from './App';
5 import Vuetify from 'vuetify'; 5 import Vuetify from 'vuetify';
6 import router from './router'; 6 import router from './router';
7 import 'font-awesome/css/font-awesome.css'; 7 import 'font-awesome/css/font-awesome.css';
8 import './theme/default.styl'; 8 import './theme/default.styl';
9 import VeeValidate from 'vee-validate'; 9 import VeeValidate from 'vee-validate';
10 import colors from 'vuetify/es5/util/colors'; 10 import colors from 'vuetify/es5/util/colors';
11 import Truncate from 'lodash.truncate'; 11 import Truncate from 'lodash.truncate';
12 import store from '@/store/store' 12 import store from '@/store/store'
13 import FullCalendar from 'vue-full-calendar'; 13 import FullCalendar from 'vue-full-calendar';
14 import JsonCSV from 'vue-json-csv' 14 import JsonCSV from 'vue-json-csv'
15 import VueHtml2Canvas from 'vue-html2canvas'; 15 import VueHtml2Canvas from 'vue-html2canvas';
16 import 'babel-polyfill'; 16 import 'babel-polyfill';
17 17
18 Vue.use(VueHtml2Canvas); 18 Vue.use(VueHtml2Canvas);
19 19
20 Vue.component('downloadCsv', JsonCSV) 20 Vue.component('downloadCsv', JsonCSV)
21 21
22 Vue.config.productionTip = false; 22 Vue.config.productionTip = false;
23 Vue.use(FullCalendar); 23 Vue.use(FullCalendar);
24 24
25 // Helpers 25 // Helpers
26 // Global filters 26 // Global filters
27 // Vue.use(VueAxios, axios); 27 // Vue.use(VueAxios, axios);
28 Vue.filter('truncate', Truncate); 28 Vue.filter('truncate', Truncate);
29 Vue.use(VeeValidate, { fieldsBagName: 'formFields' }); 29 Vue.use(VeeValidate, { fieldsBagName: 'formFields' });
30 Vue.use(Vuetify, { 30 Vue.use(Vuetify, {
31 // theme: { 31 // theme: {
32 // primary: colors.indigo.base, // #E53935 32 // primary: "f1f1f1", // #E53935
33 // secondary: colors.indigo.lighten4, // #FFCDD2 33 // // secondary: colors.indigo.lighten4, // #FFCDD2
34 // accent: colors.indigo.base // #3F51B5 34 // // accent: colors.indigo.base // #3F51B5
35 // }, 35 // },
36 options: { 36 options: {
37 themeVariations: ['primary', 'secondary', 'accent'], 37 themeVariations: ['primary', 'secondary', 'accent'],
38 extra: { 38 extra: {
39 mainToolbar: { 39 mainToolbar: {
40 color: 'primary', 40 color: 'primary',
41 }, 41 },
42 sideToolbar: {}, 42 sideToolbar: {},
43 sideNav: 'primary', 43 sideNav: 'primary',
44 mainNav: 'primary lighten-1', 44 mainNav: 'primary lighten-1',
45 bodyBg: '', 45 bodyBg: '',
46 } 46 }
47 } 47 }
48 }); 48 });
49 // Bootstrap application components 49 // Bootstrap application components
50 50
51 51
52 52
53 /* eslint-disable no-new */ 53 /* eslint-disable no-new */
54 new Vue({ 54 new Vue({
55 el: '#app', 55 el: '#app',
56 router, 56 router,
57 store, 57 store,
58 components: { App }, 58 components: { App },
59 template: '<App/>' 59 template: '<App/>'
60 }); 60 });
src/pages/Account/editInvoice.vue
Diff comments   View file @0065443
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 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
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> 14 <v-container fluid>
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="fixcolors" flat> 18 <v-toolbar dark class="fixcolors" 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="invoiceData.classId" 35 v-model="invoiceData.classId"
36 item-text="classNum" 36 item-text="classNum"
37 item-value="_id" 37 item-value="_id"
38 @change="getAllStudents()" 38 @change="getAllStudents()"
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 label="Select Incharge" 50 label="Select Incharge"
51 v-model="invoiceData.studentId" 51 v-model="invoiceData.studentId"
52 item-text="name" 52 item-text="name"
53 item-value="_id" 53 item-value="_id"
54 ></v-select> 54 ></v-select>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
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 xs6 class="ml-3"> 61 <v-flex xs6 class="ml-3">
62 <v-menu 62 <v-menu
63 ref="menu1" 63 ref="menu1"
64 :close-on-content-click="false" 64 :close-on-content-click="false"
65 v-model="menu1" 65 v-model="menu1"
66 :nudge-right="40" 66 :nudge-right="40"
67 lazy 67 lazy
68 :return-value.sync="invoiceData.date" 68 :return-value.sync="invoiceData.date"
69 transition="scale-transition" 69 transition="scale-transition"
70 offset-y 70 offset-y
71 full-width 71 full-width
72 min-width="290px" 72 min-width="290px"
73 > 73 >
74 <v-text-field 74 <v-text-field
75 slot="activator" 75 slot="activator"
76 v-model="invoiceData.date" 76 v-model="invoiceData.date"
77 placeholder="Select date" 77 placeholder="Select date"
78 ></v-text-field> 78 ></v-text-field>
79 <v-date-picker 79 <v-date-picker
80 v-model="invoiceData.date" 80 v-model="invoiceData.date"
81 @input="$refs.menu1.save(invoiceData.date)" 81 @input="$refs.menu1.save(invoiceData.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-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">Payment Status:</label> 88 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs6 class="ml-3"> 91 <v-flex xs6 class="ml-3">
92 <v-select 92 <v-select
93 :items="paymentStatus" 93 :items="paymentStatus"
94 v-model="invoiceData.paymentStatus" 94 v-model="invoiceData.paymentStatus"
95 item-text="name" 95 item-text="name"
96 item-value="value" 96 item-value="value"
97 label="Select Payment Status" 97 label="Select Payment Status"
98 @change="getPayMethodList" 98 @change="getPayMethodList"
99 ></v-select> 99 ></v-select>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 <v-layout v-show="showPayMethods"> 102 <v-layout v-show="showPayMethods">
103 <v-flex xs4 class="pt-4 subheading"> 103 <v-flex xs4 class="pt-4 subheading">
104 <label class="right">Payment Method:</label> 104 <label class="right">Payment Method:</label>
105 </v-flex> 105 </v-flex>
106 <v-flex xs6 class="ml-3"> 106 <v-flex xs6 class="ml-3">
107 <v-select 107 <v-select
108 :items="paymentMethods" 108 :items="paymentMethods"
109 v-model="invoiceData.paymentMethod" 109 v-model="invoiceData.paymentMethod"
110 label="Select Payment Method" 110 label="Select Payment Method"
111 ></v-select> 111 ></v-select>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm10 offset-sm1> 115 <v-flex xs12 sm10 offset-sm1>
116 <v-card-actions> 116 <v-card-actions>
117 <v-btn @click="clear" round dark>clear</v-btn> 117 <v-btn @click="clear" round dark>clear</v-btn>
118 <v-spacer></v-spacer> 118 <v-spacer></v-spacer>
119 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 119 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
120 </v-card-actions> 120 </v-card-actions>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 </v-form> 123 </v-form>
124 </v-card> 124 </v-card>
125 </v-flex> 125 </v-flex>
126 <v-flex xs12 sm12 md7 class="mt-4"> 126 <v-flex xs12 sm12 md7 class="mt-4">
127 <v-card> 127 <v-card>
128 <v-toolbar dark class="fixcolors" flat> 128 <v-toolbar dark class="fixcolors" flat>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-toolbar-title> 130 <v-toolbar-title>
131 <h3>Fee Type List</h3> 131 <h3>Fee Type List</h3>
132 </v-toolbar-title> 132 </v-toolbar-title>
133 <v-spacer></v-spacer> 133 <v-spacer></v-spacer>
134 </v-toolbar> 134 </v-toolbar>
135 <v-layout> 135 <v-layout>
136 <v-flex xs4 sm2 class="mt-4"> 136 <v-flex xs4 sm2 class="mt-4">
137 <label class="right title">Fee Type:</label> 137 <label class="right title">Fee Type:</label>
138 </v-flex> 138 </v-flex>
139 <v-flex xs4 sm4> 139 <v-flex xs4 sm4>
140 <v-select 140 <v-select
141 :items="feeTypes" 141 :items="feeTypes"
142 v-model="feeType.feeTypeName" 142 v-model="feeType.feeTypeName"
143 item-text="feeType" 143 item-text="feeType"
144 item-value="feeType" 144 item-value="feeType"
145 label="Select Fee Type" 145 label="Select Fee Type"
146 ></v-select> 146 ></v-select>
147 </v-flex> 147 </v-flex>
148 <v-flex xs4 sm6> 148 <v-flex xs4 sm6>
149 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn> 149 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 <table class="feeTypeTable tableRsponsive"> 152 <table class="feeTypeTable tableRsponsive">
153 <tr class="info white--text"> 153 <tr class="info white--text">
154 <th>#</th> 154 <th>#</th>
155 <th>Fee Type</th> 155 <th>Fee Type</th>
156 <th>Amount</th> 156 <th>Amount</th>
157 <th>Discount(%)</th> 157 <th>Discount(%)</th>
158 <th>Subtotal</th> 158 <th>Subtotal</th>
159 <th>Paid Amount</th> 159 <th>Paid Amount</th>
160 <th>Action</th> 160 <th>Action</th>
161 </tr> 161 </tr>
162 <tr 162 <tr
163 v-for="(feeType, index) in feeTypeData" 163 v-for="(feeType, index) in feeTypeData"
164 :key="index" 164 :key="index"
165 v-on:keyup="getAmmountDetails(feeType)" 165 v-on:keyup="getAmmountDetails(feeType)"
166 > 166 >
167 <td style="width:40px">{{ index + 1 }}</td> 167 <td style="width:40px">{{ index + 1 }}</td>
168 <td style="width:120px">{{ feeType.feeTypeName }}</td> 168 <td style="width:120px">{{ feeType.feeTypeName }}</td>
169 <td> 169 <td>
170 <v-text-field 170 <v-text-field
171 placeholder="fill your Amount" 171 placeholder="fill your Amount"
172 v-model="feeType.amount" 172 v-model="feeType.amount"
173 type="number" 173 type="number"
174 ></v-text-field> 174 ></v-text-field>
175 </td> 175 </td>
176 <td> 176 <td>
177 <v-text-field 177 <v-text-field
178 placeholder="fill your Discount" 178 placeholder="fill your Discount"
179 v-model="feeType.discount" 179 v-model="feeType.discount"
180 type="number" 180 type="number"
181 ></v-text-field> 181 ></v-text-field>
182 </td> 182 </td>
183 <td>{{ feeType.subTotal }}</td> 183 <td>{{ feeType.subTotal }}</td>
184 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 184 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
185 <v-text-field 185 <v-text-field
186 placeholder="fill your Paid Amount" 186 placeholder="fill your Paid Amount"
187 v-model="feeType.paidAmount" 187 v-model="feeType.paidAmount"
188 type="number" 188 type="number"
189 :disabled="disabled" 189 :disabled="disabled"
190 ></v-text-field> 190 ></v-text-field>
191 </td> 191 </td>
192 <td v-if="invoiceData.paymentStatus != 'NOT_PAID'"> 192 <td v-if="invoiceData.paymentStatus != 'NOT_PAID'">
193 <v-text-field 193 <v-text-field
194 placeholder="fill your Paid Amount" 194 placeholder="fill your Paid Amount"
195 v-model="feeType.paidAmount" 195 v-model="feeType.paidAmount"
196 type="number" 196 type="number"
197 ></v-text-field> 197 ></v-text-field>
198 </td> 198 </td>
199 <td> 199 <td>
200 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 200 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
201 </td> 201 </td>
202 </tr> 202 </tr>
203 <tfoot> 203 <tfoot>
204 <tr> 204 <tr>
205 <td colspan="2">Total:</td> 205 <td colspan="2">Total:</td>
206 <td>{{ feeType.amount }}</td> 206 <td>{{ feeType.amount }}</td>
207 <td>{{ feeType.discount }}</td> 207 <td>{{ feeType.discount }}</td>
208 <td>{{ feeType.subTotal }}</td> 208 <td>{{ feeType.subTotal }}</td>
209 <td>{{ feeType.paidAmount }}</td> 209 <td>{{ feeType.paidAmount }}</td>
210 </tr> 210 </tr>
211 </tfoot> 211 </tfoot>
212 </table> 212 </table>
213 </v-card> 213 </v-card>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-container> 216 </v-container>
217 </v-flex> 217 </v-flex>
218 </v-container> 218 </v-container>
219 <div class="loader" v-if="showLoader"> 219 <div class="loader" v-if="showLoader">
220 <v-progress-circular indeterminate color="white"></v-progress-circular> 220 <v-progress-circular indeterminate color="white"></v-progress-circular>
221 </div> 221 </div>
222 </v-app> 222 </v-app>
223 </template> 223 </template>
224 224
225 <script> 225 <script>
226 import http from "@/Services/http.js"; 226 import http from "@/Services/http.js";
227 import Util from "@/util";
228 import moment from "moment"; 227 import moment from "moment";
229 228
230 export default { 229 export default {
231 data: () => ({ 230 data: () => ({
232 snackbar: false, 231 snackbar: false,
233 showPayMethods: false, 232 showPayMethods: false,
234 y: "top", 233 y: "top",
235 x: "right", 234 x: "right",
236 mode: "", 235 mode: "",
237 timeout: 3000, 236 timeout: 3000,
238 text: "", 237 text: "",
239 showLoader: false, 238 showLoader: false,
240 loading: false, 239 loading: false,
241 date: null, 240 date: null,
242 search: "", 241 search: "",
243 // dialog: false, 242 // dialog: false,
244 // dialog1: false, 243 // dialog1: false,
245 valid: true, 244 valid: true,
246 validEdit: true, 245 validEdit: true,
247 // isActive: true, 246 // isActive: true,
248 // newActive: false, 247 // newActive: false,
249 showFeeType: false, 248 showFeeType: false,
250 disabled: true, 249 disabled: true,
251 details: [], 250 details: [],
252 feeTypes: [], 251 feeTypes: [],
253 menu1: false, 252 menu1: false,
254 invoiceData: {}, 253 invoiceData: {},
255 paymentMethods: ["Cash", "Cheque"], 254 paymentMethods: ["Cash", "Cheque"],
256 feeType: { 255 feeType: {
257 amount: "0.00", 256 amount: "0.00",
258 discount: "0.00", 257 discount: "0.00",
259 paidAmount: "0.00", 258 paidAmount: "0.00",
260 subTotal: "0.00", 259 subTotal: "0.00",
261 feeTypeName: "" 260 feeTypeName: ""
262 }, 261 },
263 feeTypeData: [], 262 feeTypeData: [],
264 pagination: { 263 pagination: {
265 rowsPerPage: 15 264 rowsPerPage: 15
266 }, 265 },
267 token: "", 266 token: "",
268 editedItem: {}, 267 editedItem: {},
269 invoiceParticularData: {}, 268 invoiceParticularData: {},
270 addclass: [], 269 addclass: [],
271 studentList: [], 270 studentList: [],
272 paymentStatus: [ 271 paymentStatus: [
273 { 272 {
274 name: "Not Paid", 273 name: "Not Paid",
275 value: "NOT_PAID" 274 value: "NOT_PAID"
276 }, 275 },
277 { 276 {
278 name: "Partially Paid", 277 name: "Partially Paid",
279 value: "PARTIALLY_PAID" 278 value: "PARTIALLY_PAID"
280 }, 279 },
281 { 280 {
282 name: "Fully Paid", 281 name: "Fully Paid",
283 value: "FULLY_PAID" 282 value: "FULLY_PAID"
284 } 283 }
285 ] 284 ]
286 }), 285 }),
287 // watch: { 286 // watch: {
288 // menu1(val) { 287 // menu1(val) {
289 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 288 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
290 // } 289 // }
291 // }, 290 // },
292 methods: { 291 methods: {
293 save(date) { 292 save(date) {
294 this.$refs.menu1.save(date); 293 this.$refs.menu1.save(date);
295 }, 294 },
296 dates: function(date) { 295 dates: function(date) {
297 return moment(date).format("MMMM DD, YYYY"); 296 return moment(date).format("MMMM DD, YYYY");
298 }, 297 },
299 deleteItem(item) { 298 deleteItem(item) {
300 let deleteInvoice = { 299 let deleteInvoice = {
301 invoiceId: item._id 300 invoiceId: item._id
302 }; 301 };
303 http() 302 http()
304 .delete( 303 .delete(
305 "/deleteInvoice", 304 "/deleteInvoice",
306 confirm("Are you sure you want to delete this?") && { 305 confirm("Are you sure you want to delete this?") && {
307 params: deleteInvoice 306 params: deleteInvoice
308 } 307 }
309 ) 308 )
310 .then(response => { 309 .then(response => {
311 if ((this.snackbar = true)) { 310 if ((this.snackbar = true)) {
312 this.text = "Successfully delete Existing Invoice"; 311 this.text = "Successfully delete Existing Invoice";
313 } 312 }
314 this.getInvoiceList(); 313 this.getInvoiceList();
315 }) 314 })
316 .catch(error => { 315 .catch(error => {
317 // console.log(error); 316 // console.log(error);
318 }); 317 });
319 }, 318 },
320 submit() { 319 submit() {
321 // console.log("this.feeType", this.feeType); 320 // console.log("this.feeType", this.feeType);
322 let feeTypeId = ""; 321 let feeTypeId = "";
323 for (let i = 0; i < this.feeTypes.length; i++) { 322 for (let i = 0; i < this.feeTypes.length; i++) {
324 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 323 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
325 feeTypeId = this.feeTypes[i]._id; 324 feeTypeId = this.feeTypes[i]._id;
326 } 325 }
327 } 326 }
328 if (this.$refs.form.validate()) { 327 if (this.$refs.form.validate()) {
329 let invoiceData = { 328 let invoiceData = {
330 invoiceId: this.invoiceData._id, 329 invoiceId: this.invoiceData._id,
331 classId: this.invoiceData.classNum, 330 classId: this.invoiceData.classNum,
332 studentId: this.invoiceData.sectionId, 331 studentId: this.invoiceData.sectionId,
333 date: this.invoiceData.date, 332 date: this.invoiceData.date,
334 paymentStatus: this.invoiceData.paymentStatus, 333 paymentStatus: this.invoiceData.paymentStatus,
335 paymentMethod: this.invoiceData.paymentMethod, 334 paymentMethod: this.invoiceData.paymentMethod,
336 feeType: this.feeTypeData, 335 feeType: this.feeTypeData,
337 totalAmount: this.feeType.amount, 336 totalAmount: this.feeType.amount,
338 totalDiscount: this.feeType.discount, 337 totalDiscount: this.feeType.discount,
339 totalSubTotal: this.feeType.subTotal, 338 totalSubTotal: this.feeType.subTotal,
340 totalPaidAmount: this.feeType.paidAmount 339 totalPaidAmount: this.feeType.paidAmount
341 }; 340 };
342 if (invoiceData.paymentStatus == "NOT_PAID") { 341 if (invoiceData.paymentStatus == "NOT_PAID") {
343 delete invoiceData.totalPaidAmount; 342 delete invoiceData.totalPaidAmount;
344 } 343 }
345 if (feeTypeId == "") { 344 if (feeTypeId == "") {
346 delete invoiceData.feeType[0].feeTypeId; 345 delete invoiceData.feeType[0].feeTypeId;
347 } 346 }
348 if (this.invoiceData.paymentStatus == "NOT_PAID") { 347 if (this.invoiceData.paymentStatus == "NOT_PAID") {
349 delete invoiceData.paymentMethod; 348 delete invoiceData.paymentMethod;
350 } 349 }
351 http() 350 http()
352 .put("/updateInvoice", invoiceData) 351 .put("/updateInvoice", invoiceData)
353 .then(response => { 352 .then(response => {
354 this.getInvoiceList(); 353 this.getInvoiceList();
355 this.snackbar = true; 354 this.snackbar = true;
356 this.text = "New Invoice added successfully"; 355 this.text = "New Invoice added successfully";
357 this.loading = false; 356 this.loading = false;
358 }) 357 })
359 .catch(error => { 358 .catch(error => {
360 console.log(error); 359 console.log(error);
361 if ((this.snackbar = true)) { 360 if ((this.snackbar = true)) {
362 this.text = error.response.data.message; 361 this.text = error.response.data.message;
363 } 362 }
364 this.loading = false; 363 this.loading = false;
365 }); 364 });
366 } 365 }
367 }, 366 },
368 clear() { 367 clear() {
369 this.$refs.form.reset(); 368 this.$refs.form.reset();
370 }, 369 },
371 getInvoiceList() { 370 getInvoiceList() {
372 http() 371 http()
373 .get("/getParticularInvoice", { 372 .get("/getParticularInvoice", {
374 params: { invoiceId: this.$route.params.invoiceid }, 373 params: { invoiceId: this.$route.params.invoiceid },
375 headers: { Authorization: "Bearer " + this.token } 374 headers: { Authorization: "Bearer " + this.token }
376 }) 375 })
377 .then(response => { 376 .then(response => {
378 this.invoiceParticularData = response.data.data; 377 this.invoiceParticularData = response.data.data;
379 this.invoiceData = this.invoiceParticularData; 378 this.invoiceData = this.invoiceParticularData;
380 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 379 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
381 this.feeTypeData = this.invoiceParticularData.feeType; 380 this.feeTypeData = this.invoiceParticularData.feeType;
382 (this.feeType.amount = response.data.data.totalAmount), 381 (this.feeType.amount = response.data.data.totalAmount),
383 (this.feeType.discount = response.data.data.totalDiscount), 382 (this.feeType.discount = response.data.data.totalDiscount),
384 (this.feeType.subTotal = response.data.data.totalSubTotal), 383 (this.feeType.subTotal = response.data.data.totalSubTotal),
385 (this.showLoader = false); 384 (this.showLoader = false);
386 }) 385 })
387 .catch(err => { 386 .catch(err => {
388 this.showLoader = false; 387 this.showLoader = false;
389 }); 388 });
390 }, 389 },
391 selectFeeType() { 390 selectFeeType() {
392 this.showFeeType = true; 391 this.showFeeType = true;
393 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 392 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
394 }, 393 },
395 deleteSelectFee: function(index) { 394 deleteSelectFee: function(index) {
396 this.feeTypeData.splice(index, 1); 395 this.feeTypeData.splice(index, 1);
397 for (let i = 0; i < this.feeTypeData.length; i++) { 396 for (let i = 0; i < this.feeTypeData.length; i++) {
398 this.feeType = this.feeTypeData[i]; 397 this.feeType = this.feeTypeData[i];
399 } 398 }
400 if (this.feeTypeData.length == 0) { 399 if (this.feeTypeData.length == 0) {
401 this.feeType = { 400 this.feeType = {
402 amount: "0.00", 401 amount: "0.00",
403 discount: "0.00", 402 discount: "0.00",
404 paidAmount: "0.00", 403 paidAmount: "0.00",
405 subTotal: "0.00", 404 subTotal: "0.00",
406 feeTypeList: "" 405 feeTypeList: ""
407 }; 406 };
408 } 407 }
409 }, 408 },
410 getAllClasses() { 409 getAllClasses() {
411 http() 410 http()
412 .get("/getClassesList", { 411 .get("/getClassesList", {
413 headers: { Authorization: "Bearer " + this.token } 412 headers: { Authorization: "Bearer " + this.token }
414 }) 413 })
415 .then(response => { 414 .then(response => {
416 this.addclass = response.data.data; 415 this.addclass = response.data.data;
417 }) 416 })
418 .catch(err => { 417 .catch(err => {
419 // console.log("err====>", err); 418 // console.log("err====>", err);
420 }); 419 });
421 }, 420 },
422 getAllStudents() { 421 getAllStudents() {
423 http() 422 http()
424 .get("/getStudentsList", { 423 .get("/getStudentsList", {
425 params: { classId: this.invoiceData.classNum }, 424 params: { classId: this.invoiceData.classNum },
426 headers: { Authorization: "Bearer " + this.token } 425 headers: { Authorization: "Bearer " + this.token }
427 }) 426 })
428 .then(response => { 427 .then(response => {
429 this.studentList = response.data.data; 428 this.studentList = response.data.data;
430 }) 429 })
431 .catch(err => { 430 .catch(err => {
432 // console.log("err====>", err); 431 // console.log("err====>", err);
433 }); 432 });
434 }, 433 },
435 getfeeType() { 434 getfeeType() {
436 http() 435 http()
437 .get("/getFeesList", { 436 .get("/getFeesList", {
438 headers: { Authorization: "Bearer " + this.token } 437 headers: { Authorization: "Bearer " + this.token }
439 }) 438 })
440 .then(response => { 439 .then(response => {
441 this.feeTypes = response.data.data; 440 this.feeTypes = response.data.data;
442 }) 441 })
443 .catch(err => { 442 .catch(err => {
444 // console.log("err====>", err); 443 // console.log("err====>", err);
445 }); 444 });
446 }, 445 },
447 getAmmountDetails(feeTyp) { 446 getAmmountDetails(feeTyp) {
448 let feeType = { 447 let feeType = {
449 amount: "", 448 amount: "",
450 discount: "", 449 discount: "",
451 subTotal: "", 450 subTotal: "",
452 subParticularTotal: "", 451 subParticularTotal: "",
453 paidAmount: "" 452 paidAmount: ""
454 }; 453 };
455 for (let i = 0; i < this.feeTypeData.length; i++) { 454 for (let i = 0; i < this.feeTypeData.length; i++) {
456 // *********** AMOUNT *********** 455 // *********** AMOUNT ***********
457 feeType.amount = 456 feeType.amount =
458 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 457 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
459 console.log("feeType.amount ", feeType.amount); 458 console.log("feeType.amount ", feeType.amount);
460 this.feeType.amount = feeType.amount; 459 this.feeType.amount = feeType.amount;
461 this.feeType.subTotal = feeType.amount; 460 this.feeType.subTotal = feeType.amount;
462 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 461 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
463 // *********** DISCOUNT *********** 462 // *********** DISCOUNT ***********
464 if (this.feeTypeData[i].discount) { 463 if (this.feeTypeData[i].discount) {
465 feeType.discount = 464 feeType.discount =
466 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 465 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
467 console.log("feeType.discount", feeType.discount); 466 console.log("feeType.discount", feeType.discount);
468 this.feeType.discount = feeType.discount; 467 this.feeType.discount = feeType.discount;
469 feeType.subParticularTotal = 468 feeType.subParticularTotal =
470 this.feeTypeData[i].amount - 469 this.feeTypeData[i].amount -
471 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 470 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
472 console.log("feeType.subTotal", feeType.subTotal); 471 console.log("feeType.subTotal", feeType.subTotal);
473 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 472 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
474 } 473 }
475 // *********** SUBTOTAL *********** 474 // *********** SUBTOTAL ***********
476 feeType.subTotal = 475 feeType.subTotal =
477 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 476 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
478 this.feeType.subTotal = feeType.subTotal.toFixed(2); 477 this.feeType.subTotal = feeType.subTotal.toFixed(2);
479 // *********** PAID-AMOUNT *********** 478 // *********** PAID-AMOUNT ***********
480 feeType.paidAmount = 479 feeType.paidAmount =
481 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 480 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
482 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 481 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
483 } 482 }
484 }, 483 },
485 getPayMethodList() { 484 getPayMethodList() {
486 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 485 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
487 this.showPayMethods = true; 486 this.showPayMethods = true;
488 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 487 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
489 this.showPayMethods = true; 488 this.showPayMethods = true;
490 } else { 489 } else {
491 this.showPayMethods = false; 490 this.showPayMethods = false;
492 } 491 }
493 } 492 }
494 }, 493 },
495 mounted() { 494 mounted() {
496 this.token = this.$store.state.token; 495 this.token = this.$store.state.token;
497 this.getInvoiceList(); 496 this.getInvoiceList();
498 this.getAllClasses(); 497 this.getAllClasses();
499 this.getfeeType(); 498 this.getfeeType();
500 }, 499 },
501 created() { 500 created() {
502 this.$root.$on("app:search", search => { 501 this.$root.$on("app:search", search => {
503 this.search = search; 502 this.search = search;
504 }); 503 });
505 }, 504 },
506 beforeDestroy() { 505 beforeDestroy() {
507 // dont forget to remove the listener 506 // dont forget to remove the listener
508 this.$root.$off("app:search"); 507 this.$root.$off("app:search");
509 } 508 }
510 }; 509 };
511 </script> 510 </script>
512 511
513 512
514 <style scoped> 513 <style scoped>
515 .active { 514 .active {
516 background-color: gray; 515 background-color: gray;
517 color: white !important; 516 color: white !important;
518 } 517 }
519 .activebtn { 518 .activebtn {
520 color: black !important; 519 color: black !important;
521 } 520 }
522 table { 521 table {
523 border-collapse: collapse; 522 border-collapse: collapse;
524 border: 1px solid #e2e7eb; 523 border: 1px solid #e2e7eb;
525 } 524 }
526 525
527 th, 526 th,
528 td { 527 td {
529 border: 1px solid #e2e7eb; 528 border: 1px solid #e2e7eb;
530 padding: 10px; 529 padding: 10px;
531 text-align: center; 530 text-align: center;
532 } 531 }
533 table.feeTypeTable { 532 table.feeTypeTable {
534 table-layout: auto !important; 533 table-layout: auto !important;
535 width: 100% !important; 534 width: 100% !important;
536 } 535 }
537 @media screen and (max-width: 380px) { 536 @media screen and (max-width: 380px) {
538 .tableRsponsive { 537 .tableRsponsive {
539 display: block; 538 display: block;
540 position: relative; 539 position: relative;
541 overflow: scroll; 540 overflow: scroll;
542 } 541 }
543 } 542 }
544 </style> 543 </style>
src/pages/Account/expense.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Expense</v-tab> 10 >Existing Expense</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Expense</v-tab> 18 >Add New Expense</v-tab>
19 <!-- ****** EDIT EXPENSE DETAILS ****** --> 19 <!-- ****** EDIT EXPENSE DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="600px" scrollable> 29 <v-dialog v-model="dialog" max-width="600px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit Expense Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Expense Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 600px;"> 36 <v-card-text style="height: 600px;">
37 <v-layout> 37 <v-layout>
38 <v-flex 38 <v-flex
39 xs12 39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
41 > 41 >
42 <v-avatar size="160px"> 42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> 43 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
44 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> 44 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
45 <img 45 <img
46 v-if="imageUrl" 46 v-if="imageUrl"
47 :src="imageUrl" 47 :src="imageUrl"
48 height="150" 48 height="150"
49 style="border-radius:50%; width:200px" 49 style="border-radius:50%; width:200px"
50 /> 50 />
51 </v-avatar> 51 </v-avatar>
52 <input 52 <input
53 type="file" 53 type="file"
54 style="display:none" 54 style="display:none"
55 ref="image" 55 ref="image"
56 accept="image/*" 56 accept="image/*"
57 @change="onFilePicked" 57 @change="onFilePicked"
58 /> 58 />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <v-layout wrap> 61 <v-layout wrap>
62 <v-flex xs12 sm12> 62 <v-flex xs12 sm12>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading"> 64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right">Name:</label> 65 <label class="right">Name:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs6 class="ml-3"> 67 <v-flex xs6 class="ml-3">
68 <v-text-field 68 <v-text-field
69 v-model="editedItem.name" 69 v-model="editedItem.name"
70 placeholder="fill your full Name" 70 placeholder="fill your full Name"
71 name="name" 71 name="name"
72 type="text" 72 type="text"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-layout wrap> 79 <v-layout wrap>
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-layout> 81 <v-layout>
82 <v-flex xs4 class="pt-4 subheading"> 82 <v-flex xs4 class="pt-4 subheading">
83 <label class="right">Date:</label> 83 <label class="right">Date:</label>
84 </v-flex> 84 </v-flex>
85 <v-flex xs6 class="ml-3"> 85 <v-flex xs6 class="ml-3">
86 <v-menu 86 <v-menu
87 ref="menu" 87 ref="menu"
88 :close-on-content-click="false" 88 :close-on-content-click="false"
89 v-model="menu3" 89 v-model="menu3"
90 :nudge-right="40" 90 :nudge-right="40"
91 lazy 91 lazy
92 transition="scale-transition" 92 transition="scale-transition"
93 offset-y 93 offset-y
94 full-width 94 full-width
95 min-width="290px" 95 min-width="290px"
96 > 96 >
97 <v-text-field 97 <v-text-field
98 slot="activator" 98 slot="activator"
99 v-model="editedItem.date" 99 v-model="editedItem.date"
100 placeholder="Select date" 100 placeholder="Select date"
101 ></v-text-field> 101 ></v-text-field>
102 <v-date-picker 102 <v-date-picker
103 ref="picker" 103 ref="picker"
104 v-model="editedItem.date" 104 v-model="editedItem.date"
105 @input="$refs.menu.save(editedItem.date)" 105 @input="$refs.menu.save(editedItem.date)"
106 ></v-date-picker> 106 ></v-date-picker>
107 </v-menu> 107 </v-menu>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 </v-flex> 110 </v-flex>
111 <v-layout wrap> 111 <v-layout wrap>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Amount:</label> 115 <label class="right">Amount:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs6 class="ml-3"> 117 <v-flex xs6 class="ml-3">
118 <v-text-field v-model="editedItem.amount" required></v-text-field> 118 <v-text-field v-model="editedItem.amount" required></v-text-field>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 <v-flex xs12> 123 <v-flex xs12>
124 <v-layout wrap> 124 <v-layout wrap>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs6 class="ml-3"> 129 <v-flex xs6 class="ml-3">
130 <v-text-field 130 <v-text-field
131 label="Select Image" 131 label="Select Image"
132 @click="pickFile" 132 @click="pickFile"
133 v-model="imageName" 133 v-model="imageName"
134 append-icon="attach_file" 134 append-icon="attach_file"
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 <v-flex xs12> 139 <v-flex xs12>
140 <v-layout> 140 <v-layout>
141 <v-flex xs4 class="pt-4 subheading"> 141 <v-flex xs4 class="pt-4 subheading">
142 <label class="right">Note:</label> 142 <label class="right">Note:</label>
143 </v-flex> 143 </v-flex>
144 <v-flex xs6 class="ml-3"> 144 <v-flex xs6 class="ml-3">
145 <v-textarea 145 <v-textarea
146 name="input-7-1" 146 name="input-7-1"
147 v-model="editedItem.note" 147 v-model="editedItem.note"
148 placeholder="fill your Note" 148 placeholder="fill your Note"
149 type="text" 149 type="text"
150 :rules="noteRules" 150 :rules="noteRules"
151 multi-line 151 multi-line
152 required 152 required
153 ></v-textarea> 153 ></v-textarea>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 <v-layout> 158 <v-layout>
159 <v-flex xs12 sm12> 159 <v-flex xs12 sm12>
160 <v-card-actions> 160 <v-card-actions>
161 <v-btn round dark @click.native="close">Cancel</v-btn> 161 <v-btn round dark @click.native="close">Cancel</v-btn>
162 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
163 <v-btn round dark :loading="loading" @click="save">Save</v-btn> 163 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
164 </v-card-actions> 164 </v-card-actions>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 170
171 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 171 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** -->
172 172
173 <v-dialog v-model="dialog1" max-width="600px" scrollable> 173 <v-dialog v-model="dialog1" max-width="600px" scrollable>
174 <v-card> 174 <v-card>
175 <v-toolbar color="grey lighten-2" flat> 175 <v-toolbar color="grey lighten-2" flat>
176 <v-spacer></v-spacer> 176 <v-spacer></v-spacer>
177 <v-toolbar-title> 177 <v-toolbar-title>
178 <h3>Expense Profile</h3> 178 <h3>Expense Profile</h3>
179 </v-toolbar-title> 179 </v-toolbar-title>
180 <v-spacer></v-spacer> 180 <v-spacer></v-spacer>
181 <v-icon @click="close1">close</v-icon> 181 <v-icon @click="close1">close</v-icon>
182 </v-toolbar> 182 </v-toolbar>
183 <v-card-text style="height: 460px;"> 183 <v-card-text style="height: 460px;">
184 <v-container grid-list-md> 184 <v-container grid-list-md>
185 <v-layout wrap> 185 <v-layout wrap>
186 <v-flex> 186 <v-flex>
187 <v-flex align-center justify-center layout text-xs-center> 187 <v-flex align-center justify-center layout text-xs-center>
188 <v-avatar size="160px"> 188 <v-avatar size="160px">
189 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> 189 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
190 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> 190 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
191 </v-avatar> 191 </v-avatar>
192 </v-flex> 192 </v-flex>
193 <v-layout> 193 <v-layout>
194 <v-flex xs5 sm6> 194 <v-flex xs5 sm6>
195 <h5 class="right my-1"> 195 <h5 class="right my-1">
196 <b>Name:</b> 196 <b>Name:</b>
197 </h5> 197 </h5>
198 </v-flex> 198 </v-flex>
199 <v-flex sm6 xs8> 199 <v-flex sm6 xs8>
200 <h5 class="my-1">{{ editedItem.name }}</h5> 200 <h5 class="my-1">{{ editedItem.name }}</h5>
201 </v-flex> 201 </v-flex>
202 </v-layout> 202 </v-layout>
203 <v-layout> 203 <v-layout>
204 <v-flex xs5 sm6> 204 <v-flex xs5 sm6>
205 <h5 class="right my-1"> 205 <h5 class="right my-1">
206 <b>Amount:</b> 206 <b>Amount:</b>
207 </h5> 207 </h5>
208 </v-flex> 208 </v-flex>
209 <v-flex sm6 xs8> 209 <v-flex sm6 xs8>
210 <h5 class="my-1">{{ editedItem.amount }}</h5> 210 <h5 class="my-1">{{ editedItem.amount }}</h5>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 <v-layout> 213 <v-layout>
214 <v-flex xs5 sm6> 214 <v-flex xs5 sm6>
215 <h5 class="right my-1"> 215 <h5 class="right my-1">
216 <b>Date:</b> 216 <b>Date:</b>
217 </h5> 217 </h5>
218 </v-flex> 218 </v-flex>
219 <v-flex sm6 xs8> 219 <v-flex sm6 xs8>
220 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 220 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 <v-layout> 223 <v-layout>
224 <v-flex xs5 sm6> 224 <v-flex xs5 sm6>
225 <h5 class="right my-1"> 225 <h5 class="right my-1">
226 <b>Note:</b> 226 <b>Note:</b>
227 </h5> 227 </h5>
228 </v-flex> 228 </v-flex>
229 <v-flex sm6 xs8> 229 <v-flex sm6 xs8>
230 <h5 class="my-1">{{ editedItem.note }}</h5> 230 <h5 class="my-1">{{ editedItem.note }}</h5>
231 </v-flex> 231 </v-flex>
232 </v-layout> 232 </v-layout>
233 </v-flex> 233 </v-flex>
234 </v-layout> 234 </v-layout>
235 </v-container> 235 </v-container>
236 </v-card-text> 236 </v-card-text>
237 </v-card> 237 </v-card>
238 </v-dialog> 238 </v-dialog>
239 <v-snackbar 239 <v-snackbar
240 :timeout="timeout" 240 :timeout="timeout"
241 :top="y === 'top'" 241 :top="y === 'top'"
242 :right="x === 'right'" 242 :right="x === 'right'"
243 :vertical="mode === 'vertical'" 243 :vertical="mode === 'vertical'"
244 v-model="snackbar" 244 v-model="snackbar"
245 color="success" 245 color="success"
246 >{{ text }}</v-snackbar> 246 >{{ text }}</v-snackbar>
247 247
248 <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> 248 <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
249 249
250 <v-data-table 250 <v-data-table
251 :headers="headers" 251 :headers="headers"
252 :items="expenseList" 252 :items="expenseList"
253 :pagination.sync="pagination" 253 :pagination.sync="pagination"
254 :search="search" 254 :search="search"
255 > 255 >
256 <template slot="items" slot-scope="props"> 256 <template slot="items" slot-scope="props">
257 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 257 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
258 <td id="td" class="text-xs-center"> 258 <td id="td" class="text-xs-center">
259 <v-avatar> 259 <v-avatar>
260 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 260 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
261 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 261 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
262 </v-avatar> 262 </v-avatar>
263 </td> 263 </td>
264 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 264 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
265 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 265 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
266 <td id="td" class="text-xs-center">{{ props.item.user }}</td> 266 <td id="td" class="text-xs-center">{{ props.item.user }}</td>
267 <td id="td" class="text-xs-center">{{ props.item.amount }}</td> 267 <td id="td" class="text-xs-center">{{ props.item.amount }}</td>
268 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 268 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
269 <td class="text-xs-center"> 269 <td class="text-xs-center">
270 <span> 270 <span>
271 <img 271 <img
272 style="cursor:pointer; width:25px; height:18px; " 272 style="cursor:pointer; width:25px; height:18px; "
273 class="mr-5" 273 class="mr-5"
274 @click="profile(props.item)" 274 @click="profile(props.item)"
275 src="/static/icon/eye1.png" 275 src="/static/icon/eye1.png"
276 /> 276 />
277 <img 277 <img
278 style="cursor:pointer; width:20px; height:18px; " 278 style="cursor:pointer; width:20px; height:18px; "
279 class="mr-5" 279 class="mr-5"
280 @click="editItem(props.item)" 280 @click="editItem(props.item)"
281 src="/static/icon/edit1.png" 281 src="/static/icon/edit1.png"
282 /> 282 />
283 <img 283 <img
284 style="cursor:pointer;width:20px; height:20px; " 284 style="cursor:pointer;width:20px; height:20px; "
285 class="mr-5" 285 class="mr-5"
286 @click="deleteItem(props.item)" 286 @click="deleteItem(props.item)"
287 src="/static/icon/delete1.png" 287 src="/static/icon/delete1.png"
288 /> 288 />
289 </span> 289 </span>
290 </td> 290 </td>
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 </v-tab-item> 299 </v-tab-item>
300 300
301 <!-- ****** Add Expense Data****** --> 301 <!-- ****** Add Expense Data ****** -->
302 <v-tab-item> 302 <v-tab-item>
303 <v-container> 303 <v-container>
304 <v-snackbar 304 <v-snackbar
305 :timeout="timeout" 305 :timeout="timeout"
306 :top="y === 'top'" 306 :top="y === 'top'"
307 :right="x === 'right'" 307 :right="x === 'right'"
308 :vertical="mode === 'vertical'" 308 :vertical="mode === 'vertical'"
309 v-model="snackbar" 309 v-model="snackbar"
310 color="success" 310 color="success"
311 >{{ text }}</v-snackbar> 311 >{{ text }}</v-snackbar>
312 <v-flex xs12 sm12 class="my-4"> 312 <v-flex xs12 sm12 class="my-4">
313 <v-card flat> 313 <v-card flat>
314 <v-form ref="form" v-model="valid" lazy-validation> 314 <v-form ref="form" v-model="valid" lazy-validation>
315 <v-container fluid> 315 <v-container fluid>
316 <v-layout> 316 <v-layout>
317 <v-flex 317 <v-flex
318 xs12 318 xs12
319 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 319 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
320 > 320 >
321 <v-avatar size="100px"> 321 <v-avatar size="100px">
322 <img src="/static/icon/user.png" v-if="!imageUrl" /> 322 <img src="/static/icon/user.png" v-if="!imageUrl" />
323 </v-avatar> 323 </v-avatar>
324 <img 324 <img
325 :src="imageUrl" 325 :src="imageUrl"
326 height="150" 326 height="150"
327 v-if="imageUrl" 327 v-if="imageUrl"
328 style="border-radius:50%; width:200px" 328 style="border-radius:50%; width:200px"
329 /> 329 />
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
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 xs4 class="pt-4 subheading"> 335 <v-flex xs4 class="pt-4 subheading">
336 <label class="right">Name:</label> 336 <label class="right">Name:</label>
337 </v-flex> 337 </v-flex>
338 <v-flex xs8 sm4 class="ml-3"> 338 <v-flex xs8 sm4 class="ml-3">
339 <v-text-field 339 <v-text-field
340 v-model="addExpense.name" 340 v-model="addExpense.name"
341 placeholder="fill your full Name" 341 placeholder="fill your full Name"
342 name="name" 342 name="name"
343 type="text" 343 type="text"
344 :rules="nameRules" 344 :rules="nameRules"
345 required 345 required
346 ></v-text-field> 346 ></v-text-field>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 </v-flex> 349 </v-flex>
350 </v-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">Amount:</label> 355 <label class="right">Amount:</label>
356 </v-flex> 356 </v-flex>
357 <v-flex xs8 sm4 class="ml-3"> 357 <v-flex xs8 sm4 class="ml-3">
358 <v-text-field 358 <v-text-field
359 v-model="addExpense.amount" 359 v-model="addExpense.amount"
360 placeholder="fill your Amount" 360 placeholder="fill your Amount"
361 name="name" 361 name="name"
362 type="text" 362 type="text"
363 :rules="amountRules" 363 :rules="amountRules"
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">Date</label> 374 <label class="right">Date</label>
375 </v-flex> 375 </v-flex>
376 <v-flex xs8 sm4 class="ml-3"> 376 <v-flex xs8 sm4 class="ml-3">
377 <v-menu 377 <v-menu
378 ref="menu1" 378 ref="menu1"
379 :close-on-content-click="false" 379 :close-on-content-click="false"
380 v-model="menu1" 380 v-model="menu1"
381 :nudge-right="40" 381 :nudge-right="40"
382 lazy 382 lazy
383 transition="scale-transition" 383 transition="scale-transition"
384 offset-y 384 offset-y
385 full-width 385 full-width
386 min-width="290px" 386 min-width="290px"
387 > 387 >
388 <v-text-field 388 <v-text-field
389 slot="activator" 389 slot="activator"
390 :rules="joinDateRules" 390 :rules="joinDateRules"
391 v-model="addExpense.date" 391 v-model="addExpense.date"
392 placeholder="Select date" 392 placeholder="Select date"
393 ></v-text-field> 393 ></v-text-field>
394 <v-date-picker 394 <v-date-picker
395 ref="picker" 395 ref="picker"
396 v-model="addExpense.date" 396 v-model="addExpense.date"
397 @input="$refs.menu1.save(addExpense.date)" 397 @input="$refs.menu1.save(addExpense.date)"
398 ></v-date-picker> 398 ></v-date-picker>
399 </v-menu> 399 </v-menu>
400 </v-flex> 400 </v-flex>
401 </v-layout> 401 </v-layout>
402 </v-flex> 402 </v-flex>
403 <v-flex xs12 sm12> 403 <v-flex xs12 sm12>
404 <v-layout> 404 <v-layout>
405 <v-flex xs4 class="pt-4 subheading"> 405 <v-flex xs4 class="pt-4 subheading">
406 <label class="right">File:</label> 406 <label class="right">File:</label>
407 </v-flex> 407 </v-flex>
408 <v-flex xs8 sm4 class="ml-3"> 408 <v-flex xs8 sm4 class="ml-3">
409 <v-text-field 409 <v-text-field
410 label="Select file" 410 label="Select file"
411 @click="pickFile" 411 @click="pickFile"
412 v-model="imageName" 412 v-model="imageName"
413 append-icon="attach_file" 413 append-icon="attach_file"
414 ></v-text-field> 414 ></v-text-field>
415 <input 415 <input
416 type="file" 416 type="file"
417 style="display:none" 417 style="display:none"
418 ref="image" 418 ref="image"
419 accept="image/*" 419 accept="image/*"
420 @change="onFilePicked" 420 @change="onFilePicked"
421 /> 421 />
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 </v-flex> 424 </v-flex>
425 <v-layout> 425 <v-layout>
426 <v-flex xs12 sm12> 426 <v-flex xs12 sm12>
427 <v-layout> 427 <v-layout>
428 <v-flex xs4 class="pt-4 subheading"> 428 <v-flex xs4 class="pt-4 subheading">
429 <label class="right">Note:</label> 429 <label class="right">Note:</label>
430 </v-flex> 430 </v-flex>
431 <v-flex xs8 sm4 class="ml-3"> 431 <v-flex xs8 sm4 class="ml-3">
432 <v-textarea 432 <v-textarea
433 name="input-7-1" 433 name="input-7-1"
434 v-model="addExpense.note" 434 v-model="addExpense.note"
435 placeholder="fill your Note" 435 placeholder="fill your Note"
436 type="text" 436 type="text"
437 :rules="noteRules" 437 :rules="noteRules"
438 multi-line 438 multi-line
439 required 439 required
440 ></v-textarea> 440 ></v-textarea>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 </v-flex> 443 </v-flex>
444 </v-layout> 444 </v-layout>
445 </v-layout> 445 </v-layout>
446 <v-layout> 446 <v-layout>
447 <v-flex xs12 sm6 offset-sm3> 447 <v-flex xs12 sm6 offset-sm3>
448 <v-layout> 448 <v-layout>
449 <v-flex xs6> 449 <v-flex xs6>
450 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 450 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
451 </v-flex> 451 </v-flex>
452 <v-flex xs6> 452 <v-flex xs6>
453 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 453 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
454 </v-flex> 454 </v-flex>
455 </v-layout> 455 </v-layout>
456 </v-flex> 456 </v-flex>
457 </v-layout> 457 </v-layout>
458 </v-container> 458 </v-container>
459 </v-form> 459 </v-form>
460 </v-card> 460 </v-card>
461 </v-flex> 461 </v-flex>
462 </v-container> 462 </v-container>
463 </v-tab-item> 463 </v-tab-item>
464 </v-tabs> 464 </v-tabs>
465 <div class="loader" v-if="showLoader"> 465 <div class="loader" v-if="showLoader">
466 <v-progress-circular indeterminate color="white"></v-progress-circular> 466 <v-progress-circular indeterminate color="white"></v-progress-circular>
467 </div> 467 </div>
468 </v-app> 468 </v-app>
469 </template> 469 </template>
470 470
471 <script> 471 <script>
472 import http from "@/Services/http.js"; 472 import http from "@/Services/http.js";
473 import Util from "@/util"; 473 import Util from "@/util";
474 import moment from "moment"; 474 import moment from "moment";
475 475
476 export default { 476 export default {
477 data: () => ({ 477 data: () => ({
478 component: "report-generate", 478 component: "report-generate",
479 snackbar: false, 479 snackbar: false,
480 y: "top", 480 y: "top",
481 x: "right", 481 x: "right",
482 mode: "", 482 mode: "",
483 timeout: 3000, 483 timeout: 3000,
484 text: "", 484 text: "",
485 showLoader: false, 485 showLoader: false,
486 loading: false, 486 loading: false,
487 date: null, 487 date: null,
488 search: "", 488 search: "",
489 menu: false, 489 menu: false,
490 menu1: false, 490 menu1: false,
491 menu2: false, 491 menu2: false,
492 menu3: false, 492 menu3: false,
493 dialog: false, 493 dialog: false,
494 dialog1: false, 494 dialog1: false,
495 valid: true, 495 valid: true,
496 isActive: true, 496 isActive: true,
497 newActive: false, 497 newActive: false,
498 pagination: { 498 pagination: {
499 rowsPerPage: 15 499 rowsPerPage: 15
500 }, 500 },
501 imageData: {}, 501 imageData: {},
502 imageName: "", 502 imageName: "",
503 imageUrl: "", 503 imageUrl: "",
504 imageFile: "", 504 imageFile: "",
505 nameRules: [v => !!v || " Full Name is required"], 505 nameRules: [v => !!v || " Full Name is required"],
506 amountRules: [v => !!v || "Amount is required"], 506 amountRules: [v => !!v || "Amount is required"],
507 noteRules: [v => !!v || "Note Name is required"], 507 noteRules: [v => !!v || "Note Name is required"],
508 joinDateRules: [v => !!v || "Date is required"], 508 joinDateRules: [v => !!v || "Date is required"],
509 errorMessages: "", 509 errorMessages: "",
510 headers: [ 510 headers: [
511 { 511 {
512 text: "No", 512 text: "No",
513 align: "center", 513 align: "center",
514 sortable: false, 514 sortable: false,
515 value: "No" 515 value: "No"
516 }, 516 },
517 { 517 {
518 text: "Profile Pic", 518 text: "Profile Pic",
519 value: "profilePicUrl", 519 value: "profilePicUrl",
520 sortable: false, 520 sortable: false,
521 align: "center" 521 align: "center"
522 }, 522 },
523 { text: "Name", value: "name", sortable: false, align: "center" }, 523 { text: "Name", value: "name", sortable: false, align: "center" },
524 { text: "Date", value: "date", sortable: false, align: "center" }, 524 { text: "Date", value: "date", sortable: false, align: "center" },
525 { text: "User", value: "user", sortable: false, align: "center" }, 525 { text: "User", value: "user", sortable: false, align: "center" },
526 { text: "Amount", value: "amount", sortable: false, align: "center" }, 526 { text: "Amount", value: "amount", sortable: false, align: "center" },
527 { text: "Note", value: "note", sortable: false, align: "center" }, 527 { text: "Note", value: "note", sortable: false, align: "center" },
528 { text: "Action", value: "", sortable: false, align: "center" } 528 { text: "Action", value: "", sortable: false, align: "center" }
529 ], 529 ],
530 expenseList: [], 530 expenseList: [],
531 editedIndex: -1, 531 editedIndex: -1,
532 upload: "", 532 upload: "",
533 editedItem: { 533 editedItem: {
534 role: "TEACHER", 534 role: "TEACHER",
535 name: "", 535 name: "",
536 email: "", 536 email: "",
537 date: null, 537 date: null,
538 city: "", 538 city: "",
539 pincode: "", 539 pincode: "",
540 country: "", 540 country: "",
541 permanentAddress: "", 541 permanentAddress: "",
542 presentAddress: "", 542 presentAddress: "",
543 mobileNo: "", 543 mobileNo: "",
544 state: "", 544 state: "",
545 joinDate: null 545 joinDate: null
546 }, 546 },
547 addExpense: {}, 547 addExpense: {},
548 defaultItem: { 548 defaultItem: {
549 role: "TEACHER", 549 role: "TEACHER",
550 name: "", 550 name: "",
551 email: "" 551 email: ""
552 } 552 }
553 }), 553 }),
554 watch: { 554 watch: {
555 menu(val) { 555 menu(val) {
556 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 556 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
557 }, 557 },
558 menu1(val) { 558 menu1(val) {
559 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 559 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
560 } 560 }
561 }, 561 },
562 methods: { 562 methods: {
563 save(date) { 563 save(date) {
564 this.$refs.menu.save(date); 564 this.$refs.menu.save(date);
565 }, 565 },
566 save(date) { 566 save(date) {
567 this.$refs.menu1.save(date); 567 this.$refs.menu1.save(date);
568 }, 568 },
569 pickFile() { 569 pickFile() {
570 this.$refs.image.click(); 570 this.$refs.image.click();
571 }, 571 },
572 onFilePicked(e) { 572 onFilePicked(e) {
573 // console.log(e) 573 // console.log(e)
574 const files = e.target.files; 574 const files = e.target.files;
575 this.upload = e.target.files[0]; 575 this.upload = e.target.files[0];
576 console.log("imageData-upload========>", this.upload); 576 console.log("imageData-upload========>", this.upload);
577 if (files[0] !== undefined) { 577 if (files[0] !== undefined) {
578 this.imageName = files[0].name; 578 this.imageName = files[0].name;
579 if (this.imageName.lastIndexOf(".") <= 0) { 579 if (this.imageName.lastIndexOf(".") <= 0) {
580 return; 580 return;
581 } 581 }
582 const fr = new FileReader(); 582 const fr = new FileReader();
583 fr.readAsDataURL(files[0]); 583 fr.readAsDataURL(files[0]);
584 fr.addEventListener("load", () => { 584 fr.addEventListener("load", () => {
585 this.imageUrl = fr.result; 585 this.imageUrl = fr.result;
586 this.imageFile = files[0]; // this is an image file that can be sent to server... 586 this.imageFile = files[0]; // this is an image file that can be sent to server...
587 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 587 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
588 // console.log("upload=======>", this.imageData.imageUrl); 588 // console.log("upload=======>", this.imageData.imageUrl);
589 console.log("imageFile", this.imageUrl); 589 console.log("imageFile", this.imageUrl);
590 }); 590 });
591 } else { 591 } else {
592 this.imageName = ""; 592 this.imageName = "";
593 this.imageFile = ""; 593 this.imageFile = "";
594 this.imageUrl = ""; 594 this.imageUrl = "";
595 } 595 }
596 }, 596 },
597 dates: function(date) { 597 dates: function(date) {
598 return moment(date).format("MMMM DD, YYYY"); 598 return moment(date).format("MMMM DD, YYYY");
599 }, 599 },
600 getExpenseList() { 600 getExpenseList() {
601 this.showLoader = true; 601 this.showLoader = true;
602 var token = this.$store.state.token; 602 var token = this.$store.state.token;
603 http() 603 http()
604 .get("/getExpensesList", { 604 .get("/getExpensesList", {
605 headers: { Authorization: "Bearer " + token } 605 headers: { Authorization: "Bearer " + token }
606 }) 606 })
607 .then(response => { 607 .then(response => {
608 this.expenseList = response.data.data; 608 this.expenseList = response.data.data;
609 this.showLoader = false; 609 this.showLoader = false;
610 // console.log("getTeacherList=====>",this.expenseList) 610 // console.log("getTeacherList=====>",this.expenseList)
611 }) 611 })
612 .catch(error => { 612 .catch(error => {
613 this.showLoader = false; 613 this.showLoader = false;
614 if (error.response.status === 401) { 614 if (error.response.status === 401) {
615 this.$router.replace({ path: "/" }); 615 this.$router.replace({ path: "/" });
616 this.$store.dispatch("setToken", null); 616 this.$store.dispatch("setToken", null);
617 this.$store.dispatch("Id", null); 617 this.$store.dispatch("Id", null);
618 } 618 }
619 }); 619 });
620 }, 620 },
621 editItem(item) { 621 editItem(item) {
622 this.editedIndex = this.expenseList.indexOf(item); 622 this.editedIndex = this.expenseList.indexOf(item);
623 this.editedItem = Object.assign({}, item); 623 this.editedItem = Object.assign({}, item);
624 // this.editedItem.dob = 624 // this.editedItem.dob =
625 // this.editedItem.dob != undefined 625 // this.editedItem.dob != undefined
626 // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 626 // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
627 // : (this.editedItem.dob = ""); 627 // : (this.editedItem.dob = "");
628 this.editedItem.date = 628 this.editedItem.date =
629 this.editedItem.date != undefined 629 this.editedItem.date != undefined
630 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 630 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
631 : (this.editedItem.date = ""); 631 : (this.editedItem.date = "");
632 632
633 this.dialog = true; 633 this.dialog = true;
634 }, 634 },
635 profile(item) { 635 profile(item) {
636 this.editedIndex = this.expenseList.indexOf(item); 636 this.editedIndex = this.expenseList.indexOf(item);
637 this.editedItem = Object.assign({}, item); 637 this.editedItem = Object.assign({}, item);
638 this.dialog1 = true; 638 this.dialog1 = true;
639 }, 639 },
640 deleteItem(item) { 640 deleteItem(item) {
641 let deleteExpense = { 641 let deleteExpense = {
642 expenseId: item._id 642 expenseId: item._id
643 }; 643 };
644 // console.log("deleteUers",deleteTeachers) 644 // console.log("deleteUers",deleteTeachers)
645 http() 645 http()
646 .delete( 646 .delete(
647 "/deleteExpense", 647 "/deleteExpense",
648 confirm("Are you sure you want to delete this?") && { 648 confirm("Are you sure you want to delete this?") && {
649 params: deleteExpense 649 params: deleteExpense
650 } 650 }
651 ) 651 )
652 .then(response => { 652 .then(response => {
653 // console.log("deleteUers",deleteTeachers) 653 // console.log("deleteUers",deleteTeachers)
654 if ((this.snackbar = true)) { 654 if ((this.snackbar = true)) {
655 this.text = "Successfully delete Existing Expense"; 655 this.text = "Successfully delete Existing Expense";
656 } 656 }
657 this.getExpenseList(); 657 this.getExpenseList();
658 }) 658 })
659 .catch(error => { 659 .catch(error => {
660 console.log(error); 660 console.log(error);
661 }); 661 });
662 }, 662 },
663 activeTab(type) { 663 activeTab(type) {
664 switch (type) { 664 switch (type) {
665 case "existing": 665 case "existing":
666 this.newActive = false; 666 this.newActive = false;
667 this.isActive = true; 667 this.isActive = true;
668 break; 668 break;
669 669
670 default: 670 default:
671 this.newActive = true; 671 this.newActive = true;
672 this.isActive = false; 672 this.isActive = false;
673 break; 673 break;
674 } 674 }
675 }, 675 },
676 close() { 676 close() {
677 this.dialog = false; 677 this.dialog = false;
678 setTimeout(() => { 678 setTimeout(() => {
679 this.editedItem = Object.assign({}, this.defaultItem); 679 this.editedItem = Object.assign({}, this.defaultItem);
680 this.editedIndex = -1; 680 this.editedIndex = -1;
681 }, 300); 681 }, 300);
682 }, 682 },
683 close1() { 683 close1() {
684 this.dialog1 = false; 684 this.dialog1 = false;
685 }, 685 },
686 submit() { 686 submit() {
687 if (this.$refs.form.validate()) { 687 if (this.$refs.form.validate()) {
688 if (this.imageUrl) { 688 if (this.imageUrl) {
689 var str = this.imageUrl; 689 var str = this.imageUrl;
690 const [baseUrl, imageUrl] = str.split(/,/); 690 const [baseUrl, imageUrl] = str.split(/,/);
691 this.addExpense.upload = imageUrl; 691 this.addExpense.upload = imageUrl;
692 } 692 }
693 this.loading = true; 693 this.loading = true;
694 http() 694 http()
695 .post("/createExpense", this.addExpense) 695 .post("/createExpense", this.addExpense)
696 .then(response => { 696 .then(response => {
697 this.getExpenseList(); 697 this.getExpenseList();
698 if ((this.snackbar = true)) { 698 if ((this.snackbar = true)) {
699 this.text = "New Expense added successfully"; 699 this.text = "New Expense added successfully";
700 } 700 }
701 701
702 this.clear(); 702 this.clear();
703 this.loading = false; 703 this.loading = false;
704 }) 704 })
705 .catch(error => { 705 .catch(error => {
706 // console.log(error); 706 // console.log(error);
707 if ((this.snackbar = true)) { 707 if ((this.snackbar = true)) {
708 this.text = error.response.data.message; 708 this.text = error.response.data.message;
709 } 709 }
710 this.loading = false; 710 this.loading = false;
711 }); 711 });
712 } 712 }
713 }, 713 },
714 clear() { 714 clear() {
715 this.$refs.form.reset(); 715 this.$refs.form.reset();
716 }, 716 },
717 save() { 717 save() {
718 this.loading = true; 718 this.loading = true;
719 this.editedItem.expenseId = this.editedItem._id; 719 this.editedItem.expenseId = this.editedItem._id;
720 if (this.imageUrl) { 720 if (this.imageUrl) {
721 var str = this.imageUrl; 721 var str = this.imageUrl;
722 const [baseUrl, imageUrl] = str.split(/,/); 722 const [baseUrl, imageUrl] = str.split(/,/);
723 this.editedItem.upload = imageUrl; 723 this.editedItem.upload = imageUrl;
724 } 724 }
725 http() 725 http()
726 .put("/updateExpense", this.editedItem) 726 .put("/updateExpense", this.editedItem)
727 .then(response => { 727 .then(response => {
728 if ((this.snackbar = true)) { 728 if ((this.snackbar = true)) {
729 this.text = "Successfully Edit Expense"; 729 this.text = "Successfully Edit Expense";
730 } 730 }
731 this.loading = false; 731 this.loading = false;
732 this.getExpenseList(); 732 this.getExpenseList();
733 this.close(); 733 this.close();
734 }) 734 })
735 .catch(error => { 735 .catch(error => {
736 console.log(error); 736 console.log(error);
737 this.loading = false; 737 this.loading = false;
738 }); 738 });
739 } 739 }
740 }, 740 },
741 mounted() { 741 mounted() {
742 this.getExpenseList(); 742 this.getExpenseList();
743 }, 743 },
744 created() { 744 created() {
745 this.$root.$on("app:search", search => { 745 this.$root.$on("app:search", search => {
746 this.search = search; 746 this.search = search;
747 }); 747 });
748 }, 748 },
749 beforeDestroy() { 749 beforeDestroy() {
750 // dont forget to remove the listener 750 // dont forget to remove the listener
751 this.$root.$off("app:search"); 751 this.$root.$off("app:search");
752 } 752 }
753 }; 753 };
754 </script> 754 </script>
755 <style scoped> 755 <style scoped>
756 .active { 756 .active {
757 background-color: gray; 757 background-color: gray;
758 color: white !important; 758 color: white !important;
759 } 759 }
760 .activebtn { 760 .activebtn {
761 color: black !important; 761 color: black !important;
762 } 762 }
763 </style> 763 </style>
src/pages/Account/feeTypes.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Fee Type</v-tab> 10 >Existing Fee Type</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Fee Type</v-tab> 18 >Add New Fee Type</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Fee Type</h3> 34 <h3>Edit Fee Type</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-container fluid> 39 <v-container fluid>
40 <v-layout wrap justify-center> 40 <v-layout wrap justify-center>
41 <v-flex xs12 sm9> 41 <v-flex xs12 sm9>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right pr-3">Fee Type:</label> 44 <label class="right pr-3">Fee Type:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8> 46 <v-flex xs8>
47 <v-text-field 47 <v-text-field
48 v-model="editedItem.feeType" 48 v-model="editedItem.feeType"
49 placeholder="fill your Fee Type" 49 placeholder="fill your Fee Type"
50 :rules="feetTypeRules" 50 :rules="feetTypeRules"
51 required 51 required
52 ></v-text-field> 52 ></v-text-field>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right pr-3">Note:</label> 57 <label class="right pr-3">Note:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8> 59 <v-flex xs8>
60 <v-textarea 60 <v-textarea
61 name="input-7-1" 61 name="input-7-1"
62 v-model="editedItem.note" 62 v-model="editedItem.note"
63 placeholder="fill your Note" 63 placeholder="fill your Note"
64 :rules="noteRules" 64 :rules="noteRules"
65 multi-line 65 multi-line
66 required 66 required
67 ></v-textarea> 67 ></v-textarea>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 <v-card-actions> 70 <v-card-actions>
71 <v-btn round dark @click.native="close">Cancel</v-btn> 71 <v-btn round dark @click.native="close">Cancel</v-btn>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 <v-btn round dark @click="save">Save</v-btn> 73 <v-btn round dark @click="save">Save</v-btn>
74 </v-card-actions> 74 </v-card-actions>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-container> 77 </v-container>
78 </v-card> 78 </v-card>
79 </v-dialog> 79 </v-dialog>
80 80
81 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 81 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
82 82
83 <v-dialog v-model="dialog1" max-width="600px"> 83 <v-dialog v-model="dialog1" max-width="600px">
84 <v-toolbar color="grey lighten-2"> 84 <v-toolbar color="grey lighten-2">
85 <v-spacer></v-spacer> 85 <v-spacer></v-spacer>
86 <v-toolbar-title> 86 <v-toolbar-title>
87 <h3>Fee Type</h3> 87 <h3>Fee Type</h3>
88 </v-toolbar-title> 88 </v-toolbar-title>
89 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
90 <v-icon @click="close1">close</v-icon> 90 <v-icon @click="close1">close</v-icon>
91 </v-toolbar> 91 </v-toolbar>
92 <v-card> 92 <v-card>
93 <v-card-text> 93 <v-card-text>
94 <v-container grid-list-md> 94 <v-container grid-list-md>
95 <v-layout wrap> 95 <v-layout wrap>
96 <v-flex> 96 <v-flex>
97 <v-layout> 97 <v-layout>
98 <v-flex xs5 sm6> 98 <v-flex xs5 sm6>
99 <h5 class="right my-1"> 99 <h5 class="right my-1">
100 <b>Fee Type:</b> 100 <b>Fee Type:</b>
101 </h5> 101 </h5>
102 </v-flex> 102 </v-flex>
103 <v-flex sm6 xs8> 103 <v-flex sm6 xs8>
104 <h5 class="my-1">{{ editedItem.feeType }}</h5> 104 <h5 class="my-1">{{ editedItem.feeType }}</h5>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs5 sm6> 108 <v-flex xs5 sm6>
109 <h5 class="right my-1"> 109 <h5 class="right my-1">
110 <b>Note:</b> 110 <b>Note:</b>
111 </h5> 111 </h5>
112 </v-flex> 112 </v-flex>
113 <v-flex sm6 xs8> 113 <v-flex sm6 xs8>
114 <h5 class="my-1">{{ editedItem.note }}</h5> 114 <h5 class="my-1">{{ editedItem.note }}</h5>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 </v-container> 119 </v-container>
120 </v-card-text> 120 </v-card-text>
121 </v-card> 121 </v-card>
122 </v-dialog> 122 </v-dialog>
123 123
124 <v-snackbar 124 <v-snackbar
125 :timeout="timeout" 125 :timeout="timeout"
126 :top="y === 'top'" 126 :top="y === 'top'"
127 :right="x === 'right'" 127 :right="x === 'right'"
128 :vertical="mode === 'vertical'" 128 :vertical="mode === 'vertical'"
129 v-model="snackbar" 129 v-model="snackbar"
130 color="success" 130 color="success"
131 >{{ text }}</v-snackbar> 131 >{{ text }}</v-snackbar>
132 132
133 <!-- ****** EXISTING-FEETYPE TABLE ****** --> 133 <!-- ****** EXISTING-FEETYPE TABLE ****** -->
134 134
135 <v-data-table 135 <v-data-table
136 :headers="headers" 136 :headers="headers"
137 :items="feeTypeList" 137 :items="feeTypeList"
138 :pagination.sync="pagination" 138 :pagination.sync="pagination"
139 :search="search" 139 :search="search"
140 > 140 >
141 <template slot="items" slot-scope="props"> 141 <template slot="items" slot-scope="props">
142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td> 143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
144 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 144 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> 145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
146 146
147 <td class="text-xs-center"> 147 <td class="text-xs-center">
148 <!-- <span> --> 148 <!-- <span> -->
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer; width:25px; height:18px; " 152 style="cursor:pointer; width:25px; height:18px; "
153 class="mr-5" 153 class="mr-5"
154 @click="profile(props.item)" 154 @click="profile(props.item)"
155 src="/static/icon/eye1.png" 155 src="/static/icon/eye1.png"
156 /> 156 />
157 <span>View</span> 157 <span>View</span>
158 </v-tooltip> 158 </v-tooltip>
159 <v-tooltip top> 159 <v-tooltip top>
160 <img 160 <img
161 slot="activator" 161 slot="activator"
162 style="cursor:pointer; width:20px; height:18px; " 162 style="cursor:pointer; width:20px; height:18px; "
163 class="mr-5" 163 class="mr-5"
164 @click="editItem(props.item)" 164 @click="editItem(props.item)"
165 src="/static/icon/edit1.png" 165 src="/static/icon/edit1.png"
166 /> 166 />
167 <span>Edit</span> 167 <span>Edit</span>
168 </v-tooltip> 168 </v-tooltip>
169 <v-tooltip top> 169 <v-tooltip top>
170 <img 170 <img
171 slot="activator" 171 slot="activator"
172 style="cursor:pointer; width:20px; height:20px; " 172 style="cursor:pointer; width:20px; height:20px; "
173 class="mr-5" 173 class="mr-5"
174 @click="deleteItem(props.item)" 174 @click="deleteItem(props.item)"
175 src="/static/icon/delete1.png" 175 src="/static/icon/delete1.png"
176 /> 176 />
177 <span>Delete</span> 177 <span>Delete</span>
178 </v-tooltip> 178 </v-tooltip>
179 <!-- </span> --> 179 <!-- </span> -->
180 </td> 180 </td>
181 </template> 181 </template>
182 <v-alert 182 <v-alert
183 slot="no-results" 183 slot="no-results"
184 :value="true" 184 :value="true"
185 color="error" 185 color="error"
186 icon="warning" 186 icon="warning"
187 >Your search for "{{ search }}" found no results.</v-alert> 187 >Your search for "{{ search }}" found no results.</v-alert>
188 </v-data-table> 188 </v-data-table>
189 </v-tab-item> 189 </v-tab-item>
190 190
191 <!-- ****** ADD multiple Students ****** --> 191 <!-- ****** ADD Fee Type ****** -->
192 192
193 <v-tab-item> 193 <v-tab-item>
194 <v-container> 194 <v-container>
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 <v-flex xs12 sm8 offset-sm2 class="top"> 203 <v-flex xs12 sm8 offset-sm2 class="top">
204 <v-card flat> 204 <v-card flat>
205 <v-container fluid fill-height> 205 <v-container fluid fill-height>
206 <v-layout align-center> 206 <v-layout align-center>
207 <v-flex xs12 class="mt-4"> 207 <v-flex xs12 class="mt-4">
208 <v-form ref="form" v-model="valid" lazy-validation> 208 <v-form ref="form" v-model="valid" lazy-validation>
209 <v-layout> 209 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 210 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">Fee Type:</label> 211 <label class="right">Fee Type:</label>
212 </v-flex> 212 </v-flex>
213 <v-flex xs6 class="ml-3"> 213 <v-flex xs6 class="ml-3">
214 <v-text-field 214 <v-text-field
215 v-model="feeTypeData.feeType" 215 v-model="feeTypeData.feeType"
216 placeholder="fill your Fee Type" 216 placeholder="fill your Fee Type"
217 type="text" 217 type="text"
218 :rules="feetTypeRules" 218 :rules="feetTypeRules"
219 required 219 required
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 <v-layout> 223 <v-layout>
224 <v-flex xs4 class="pt-4 subheading"> 224 <v-flex xs4 class="pt-4 subheading">
225 <label class="right">Note:</label> 225 <label class="right">Note:</label>
226 </v-flex> 226 </v-flex>
227 <v-flex xs6 class="ml-3"> 227 <v-flex xs6 class="ml-3">
228 <v-textarea 228 <v-textarea
229 name="input-7-1" 229 name="input-7-1"
230 v-model="feeTypeData.note" 230 v-model="feeTypeData.note"
231 placeholder="fill your Note" 231 placeholder="fill your Note"
232 type="text" 232 type="text"
233 :rules="noteRules" 233 :rules="noteRules"
234 multi-line 234 multi-line
235 required 235 required
236 ></v-textarea> 236 ></v-textarea>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 <!-- <v-layout> 239 <!-- <v-layout>
240 <v-flex xs4 class="pt-4 subheading"> 240 <v-flex xs4 class="pt-4 subheading">
241 <label class="right">Monthly:</label> 241 <label class="right">Monthly:</label>
242 </v-flex> 242 </v-flex>
243 <v-flex xs6 class="ml-3"> 243 <v-flex xs6 class="ml-3">
244 <v-checkbox 244 <v-checkbox
245 v-model="feeTypeData.monthly" 245 v-model="feeTypeData.monthly"
246 :rules="monthlyRules" 246 :rules="monthlyRules"
247 multi-line 247 multi-line
248 required 248 required
249 ></v-checkbox> 249 ></v-checkbox>
250 </v-flex> 250 </v-flex>
251 </v-layout>--> 251 </v-layout>-->
252 <v-layout> 252 <v-layout>
253 <v-flex xs12 sm9 offset-sm2> 253 <v-flex xs12 sm9 offset-sm2>
254 <v-card-actions> 254 <v-card-actions>
255 <v-btn @click="clear" round dark>clear</v-btn> 255 <v-btn @click="clear" round dark>clear</v-btn>
256 <v-spacer></v-spacer> 256 <v-spacer></v-spacer>
257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
258 </v-card-actions> 258 </v-card-actions>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 </v-form> 261 </v-form>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-container> 264 </v-container>
265 </v-card> 265 </v-card>
266 </v-flex> 266 </v-flex>
267 </v-container> 267 </v-container>
268 </v-tab-item> 268 </v-tab-item>
269 </v-tabs> 269 </v-tabs>
270 <div class="loader" v-if="showLoader"> 270 <div class="loader" v-if="showLoader">
271 <v-progress-circular indeterminate color="white"></v-progress-circular> 271 <v-progress-circular indeterminate color="white"></v-progress-circular>
272 </div> 272 </div>
273 </v-app> 273 </v-app>
274 </template> 274 </template>
275 275
276 <script> 276 <script>
277 import http from "@/Services/http.js"; 277 import http from "@/Services/http.js";
278 import Util from "@/util"; 278 import Util from "@/util";
279 279
280 export default { 280 export default {
281 data: () => ({ 281 data: () => ({
282 snackbar: false, 282 snackbar: false,
283 y: "top", 283 y: "top",
284 x: "right", 284 x: "right",
285 mode: "", 285 mode: "",
286 timeout: 3000, 286 timeout: 3000,
287 text: "", 287 text: "",
288 showLoader: false, 288 showLoader: false,
289 loading: false, 289 loading: false,
290 date: null, 290 date: null,
291 search: "", 291 search: "",
292 dialog: false, 292 dialog: false,
293 dialog1: false, 293 dialog1: false,
294 valid: true, 294 valid: true,
295 validEdit: true, 295 validEdit: true,
296 isActive: true, 296 isActive: true,
297 newActive: false, 297 newActive: false,
298 AddUsercredentials: {}, 298 AddUsercredentials: {},
299 pagination: { 299 pagination: {
300 rowsPerPage: 15 300 rowsPerPage: 15
301 }, 301 },
302 feetTypeRules: [v => !!v || " Fee Type Name is required"], 302 feetTypeRules: [v => !!v || " Fee Type Name is required"],
303 monthlyRules: [v => !!v || " Select Monthly"], 303 monthlyRules: [v => !!v || " Select Monthly"],
304 noteRules: [v => !!v || " Note is required"], 304 noteRules: [v => !!v || " Note is required"],
305 headers: [ 305 headers: [
306 { 306 {
307 text: "No", 307 text: "No",
308 align: "center", 308 align: "center",
309 sortable: false, 309 sortable: false,
310 value: "No" 310 value: "No"
311 }, 311 },
312 { 312 {
313 text: "fee Type", 313 text: "fee Type",
314 value: "feeType", 314 value: "feeType",
315 sortable: false, 315 sortable: false,
316 align: "center" 316 align: "center"
317 }, 317 },
318 { text: "Note", value: "note", sortable: false, align: "center" }, 318 { text: "Note", value: "note", sortable: false, align: "center" },
319 // { text: "Session", value: "session", sortable: false, align: "center" }, 319 // { text: "Session", value: "session", sortable: false, align: "center" },
320 { text: "Action", value: "", sortable: false, align: "center" } 320 { text: "Action", value: "", sortable: false, align: "center" }
321 ], 321 ],
322 feeTypeList: [], 322 feeTypeList: [],
323 select: "", 323 select: "",
324 token: "", 324 token: "",
325 editedItem: {}, 325 editedItem: {},
326 feeTypeData: {} 326 feeTypeData: {}
327 }), 327 }),
328 methods: { 328 methods: {
329 getFeeTypeList() { 329 getFeeTypeList() {
330 this.showLoader = true; 330 this.showLoader = true;
331 http() 331 http()
332 .get("/getFeesList", { 332 .get("/getFeesList", {
333 headers: { Authorization: "Bearer " + this.token } 333 headers: { Authorization: "Bearer " + this.token }
334 }) 334 })
335 .then(response => { 335 .then(response => {
336 this.feeTypeList = response.data.data; 336 this.feeTypeList = response.data.data;
337 this.showLoader = false; 337 this.showLoader = false;
338 // console.log("getAllfeetypes=====>",response.data.data) 338 // console.log("getAllfeetypes=====>",response.data.data)
339 }) 339 })
340 .catch(err => { 340 .catch(err => {
341 // console.log("err====>", err); 341 // console.log("err====>", err);
342 this.showLoader = false; 342 this.showLoader = false;
343 if (error.response.status === 401) { 343 if (error.response.status === 401) {
344 this.$router.replace({ path: "/" }); 344 this.$router.replace({ path: "/" });
345 this.$store.dispatch("setToken", null); 345 this.$store.dispatch("setToken", null);
346 this.$store.dispatch("Id", null); 346 this.$store.dispatch("Id", null);
347 } 347 }
348 }); 348 });
349 }, 349 },
350 editItem(item) { 350 editItem(item) {
351 this.editedIndex = this.feeTypeList.indexOf(item); 351 this.editedIndex = this.feeTypeList.indexOf(item);
352 this.editedItem = Object.assign({}, item); 352 this.editedItem = Object.assign({}, item);
353 console.log(this.editedItem); 353 console.log(this.editedItem);
354 this.dialog = true; 354 this.dialog = true;
355 }, 355 },
356 profile(item) { 356 profile(item) {
357 this.editedIndex = this.feeTypeList.indexOf(item); 357 this.editedIndex = this.feeTypeList.indexOf(item);
358 this.editedItem = Object.assign({}, item); 358 this.editedItem = Object.assign({}, item);
359 this.dialog1 = true; 359 this.dialog1 = true;
360 }, 360 },
361 deleteItem(item) { 361 deleteItem(item) {
362 let deleteStudent = { 362 let deleteFeeType = {
363 feeId: item._id 363 feeId: item._id
364 }; 364 };
365 http() 365 http()
366 .delete( 366 .delete(
367 "/deleteFee", 367 "/deleteFee",
368 confirm("Are you sure you want to delete this?") && { 368 confirm("Are you sure you want to delete this?") && {
369 params: deleteStudent 369 params: deleteFeeType
370 } 370 }
371 ) 371 )
372 .then(response => { 372 .then(response => {
373 if ((this.snackbar = true)) { 373 if ((this.snackbar = true)) {
374 this.text = "Successfully delete Existing feetype"; 374 this.text = "Successfully delete Existing feetype";
375 } 375 }
376 this.getFeeTypeList(); 376 this.getFeeTypeList();
377 }) 377 })
378 .catch(error => { 378 .catch(error => {
379 // console.log(error); 379 // console.log(error);
380 }); 380 });
381 }, 381 },
382 activeTab(type) { 382 activeTab(type) {
383 switch (type) { 383 switch (type) {
384 case "existing": 384 case "existing":
385 this.newActive = false; 385 this.newActive = false;
386 this.isActive = true; 386 this.isActive = true;
387 break; 387 break;
388 388
389 default: 389 default:
390 this.newActive = true; 390 this.newActive = true;
391 this.isActive = false; 391 this.isActive = false;
392 break; 392 break;
393 } 393 }
394 }, 394 },
395 close() { 395 close() {
396 this.dialog = false; 396 this.dialog = false;
397 setTimeout(() => { 397 setTimeout(() => {
398 this.editedItem = Object.assign({}, this.defaultItem); 398 this.editedItem = Object.assign({}, this.defaultItem);
399 this.editedIndex = -1; 399 this.editedIndex = -1;
400 }, 300); 400 }, 300);
401 }, 401 },
402 close1() { 402 close1() {
403 this.dialog1 = false; 403 this.dialog1 = false;
404 }, 404 },
405 close2() { 405 close2() {
406 this.dialog2 = false; 406 this.dialog2 = false;
407 }, 407 },
408 submit() { 408 submit() {
409 if (this.$refs.form.validate()) { 409 if (this.$refs.form.validate()) {
410 this.loading = true; 410 this.loading = true;
411 http() 411 http()
412 .post("/createFee", this.feeTypeData) 412 .post("/createFee", this.feeTypeData)
413 .then(response => { 413 .then(response => {
414 console.log(response); 414 console.log(response);
415 this.getFeeTypeList(); 415 this.getFeeTypeList();
416 if ((this.snackbar = true)) { 416 if ((this.snackbar = true)) {
417 this.text = "New feetype added successfully"; 417 this.text = "New feetype added successfully";
418 } 418 }
419 419
420 this.clear(); 420 this.clear();
421 this.loading = false; 421 this.loading = false;
422 }) 422 })
423 .catch(error => { 423 .catch(error => {
424 // console.log(error); 424 // console.log(error);
425 if ((this.snackbar = true)) { 425 if ((this.snackbar = true)) {
426 this.text = error.response.data.message; 426 this.text = error.response.data.message;
427 } 427 }
428 this.loading = false; 428 this.loading = false;
429 }); 429 });
430 } 430 }
431 }, 431 },
432 clear() { 432 clear() {
433 this.$refs.form.reset(); 433 this.$refs.form.reset();
434 }, 434 },
435 save() { 435 save() {
436 this.editedItem.feeId = this.editedItem._id; 436 this.editedItem.feeId = this.editedItem._id;
437 http() 437 http()
438 .put("/updateFee", this.editedItem) 438 .put("/updateFee", this.editedItem)
439 .then(response => { 439 .then(response => {
440 if ((this.snackbar = true)) { 440 if ((this.snackbar = true)) {
441 this.text = "Successfully Edit Existing Fee Type"; 441 this.text = "Successfully Edit Existing Fee Type";
442 } 442 }
443 this.getFeeTypeList(); 443 this.getFeeTypeList();
444 this.close(); 444 this.close();
445 }) 445 })
446 .catch(error => { 446 .catch(error => {
447 this.text = error.response.data.message; 447 this.text = error.response.data.message;
448 // console.log(error); 448 // console.log(error);
449 }); 449 });
450 } 450 }
451 }, 451 },
452 mounted() { 452 mounted() {
453 this.token = this.$store.state.token; 453 this.token = this.$store.state.token;
454 this.getFeeTypeList(); 454 this.getFeeTypeList();
455 }, 455 },
456 created() { 456 created() {
457 this.$root.$on("app:search", search => { 457 this.$root.$on("app:search", search => {
458 this.search = search; 458 this.search = search;
459 }); 459 });
460 }, 460 },
461 beforeDestroy() { 461 beforeDestroy() {
462 // dont forget to remove the listener 462 // dont forget to remove the listener
463 this.$root.$off("app:search"); 463 this.$root.$off("app:search");
464 } 464 }
465 }; 465 };
466 </script> 466 </script>
467 467
468 <style scoped> 468 <style scoped>
469 .active { 469 .active {
470 background-color: gray; 470 background-color: gray;
471 color: white !important; 471 color: white !important;
472 } 472 }
473 .activebtn { 473 .activebtn {
474 color: black !important; 474 color: black !important;
475 } 475 }
476 </style> 476 </style>
src/pages/Account/invoice.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Invoice</v-tab> 10 >Existing Invoice</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Invoice</v-tab> 18 >Add New Invoice</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 22 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
23 <v-dialog v-model="dialog1" max-width="600px"> 23 <v-dialog v-model="dialog1" max-width="600px">
24 <v-toolbar color="grey lighten-2"> 24 <v-toolbar color="grey lighten-2">
25 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
26 <v-toolbar-title> 26 <v-toolbar-title>
27 <h3>Invoice</h3> 27 <h3>Invoice</h3>
28 </v-toolbar-title> 28 </v-toolbar-title>
29 <v-spacer></v-spacer> 29 <v-spacer></v-spacer>
30 <v-icon @click="close1">close</v-icon> 30 <v-icon @click="close1">close</v-icon>
31 </v-toolbar> 31 </v-toolbar>
32 <v-card> 32 <v-card>
33 <v-flex align-center justify-center layout text-xs-center> 33 <v-flex align-center justify-center layout text-xs-center>
34 <v-avatar size="50px" style="position:absolute; top:20px;"> 34 <v-avatar size="50px" style="position:absolute; top:20px;">
35 <img src="/static/icon/user.png" /> 35 <img src="/static/icon/user.png" />
36 </v-avatar> 36 </v-avatar>
37 </v-flex> 37 </v-flex>
38 <v-card-text> 38 <v-card-text>
39 <v-container grid-list-md> 39 <v-container grid-list-md>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex> 41 <v-flex>
42 <br /> 42 <br />
43 <br /> 43 <br />
44 <v-layout> 44 <v-layout>
45 <v-flex xs5 sm6> 45 <v-flex xs5 sm6>
46 <h5 class="right my-1"> 46 <h5 class="right my-1">
47 <b>Class Name:</b> 47 <b>Class Name:</b>
48 </h5> 48 </h5>
49 </v-flex> 49 </v-flex>
50 <v-flex sm6 xs8> 50 <v-flex sm6 xs8>
51 <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> --> 51 <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> -->
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 <v-layout> 54 <v-layout>
55 <v-flex xs5 sm6> 55 <v-flex xs5 sm6>
56 <h5 class="right my-1"> 56 <h5 class="right my-1">
57 <b>Name:</b> 57 <b>Name:</b>
58 </h5> 58 </h5>
59 </v-flex> 59 </v-flex>
60 <v-flex sm6 xs8> 60 <v-flex sm6 xs8>
61 <h5 class="my-1">{{ editedItem.name }}</h5> 61 <h5 class="my-1">{{ editedItem.name }}</h5>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout> 64 <v-layout>
65 <v-flex xs5 sm6> 65 <v-flex xs5 sm6>
66 <h5 class="right my-1"> 66 <h5 class="right my-1">
67 <b>Class Incharge:</b> 67 <b>Class Incharge:</b>
68 </h5> 68 </h5>
69 </v-flex> 69 </v-flex>
70 <v-flex sm6 xs8> 70 <v-flex sm6 xs8>
71 <h5 class="my-1">{{ editedItem.name }}</h5> 71 <h5 class="my-1">{{ editedItem.name }}</h5>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 <v-layout> 74 <v-layout>
75 <v-flex xs5 sm6> 75 <v-flex xs5 sm6>
76 <h5 class="right my-1"> 76 <h5 class="right my-1">
77 <b>Session:</b> 77 <b>Session:</b>
78 </h5> 78 </h5>
79 </v-flex> 79 </v-flex>
80 <v-flex sm6 xs8> 80 <v-flex sm6 xs8>
81 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5> 81 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-container> 86 </v-container>
87 </v-card-text> 87 </v-card-text>
88 </v-card> 88 </v-card>
89 </v-dialog> 89 </v-dialog>
90 <!-- ****** EXISTING-USERS StudentS Table ****** --> 90 <!-- ****** EXISTING-USERS StudentS Table ****** -->
91 <v-data-table 91 <v-data-table
92 :headers="headers" 92 :headers="headers"
93 :items="invoiceList" 93 :items="invoiceList"
94 :pagination.sync="pagination" 94 :pagination.sync="pagination"
95 :search="search" 95 :search="search"
96 > 96 >
97 <template slot="items" slot-scope="props"> 97 <template slot="items" slot-scope="props">
98 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 98 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
99 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td> 99 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
100 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 100 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
101 <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td> 101 <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td>
102 <td 102 <td
103 id="td" 103 id="td"
104 class="text-xs-center" 104 class="text-xs-center"
105 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td> 105 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td>
106 <td 106 <td
107 id="td" 107 id="td"
108 class="text-xs-center" 108 class="text-xs-center"
109 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 109 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
110 <td 110 <td
111 id="td" 111 id="td"
112 class="text-xs-center" 112 class="text-xs-center"
113 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 113 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
114 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'"> 114 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'">
115 <span 115 <span
116 class="red lighten-1 pa-2 white--text paymentStatus" 116 class="red lighten-1 pa-2 white--text paymentStatus"
117 >{{ props.item.paymentStatus }}</span> 117 >{{ props.item.paymentStatus }}</span>
118 </td> 118 </td>
119 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus != 'NOT_PAID'"> 119 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus != 'NOT_PAID'">
120 <span 120 <span
121 class="green lighten-1 pa-2 white--text paymentStatus" 121 class="green lighten-1 pa-2 white--text paymentStatus"
122 >{{ props.item.paymentStatus }}</span> 122 >{{ props.item.paymentStatus }}</span>
123 </td> 123 </td>
124 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 124 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
125 <td> 125 <td>
126 <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }"> 126 <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }">
127 <v-tooltip top> 127 <v-tooltip top>
128 <img 128 <img
129 slot="activator" 129 slot="activator"
130 style="cursor:pointer; width:25px; height:18px; " 130 style="cursor:pointer; width:25px; height:18px; "
131 class="mr-5" 131 class="mr-5"
132 src="/static/icon/eye1.png" 132 src="/static/icon/eye1.png"
133 /> 133 />
134 <span>View</span> 134 <span>View</span>
135 </v-tooltip> 135 </v-tooltip>
136 </router-link> 136 </router-link>
137 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 137 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
138 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact> 138 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
139 <v-tooltip top> 139 <v-tooltip top>
140 <img 140 <img
141 slot="activator" 141 slot="activator"
142 style="cursor:pointer; width:20px; height:18px; " 142 style="cursor:pointer; width:20px; height:18px; "
143 class="mr-5" 143 class="mr-5"
144 src="/static/icon/edit1.png" 144 src="/static/icon/edit1.png"
145 /> 145 />
146 <span>Edit</span> 146 <span>Edit</span>
147 </v-tooltip> 147 </v-tooltip>
148 </router-link> 148 </router-link>
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer;width:20px; height:20px; " 152 style="cursor:pointer;width:20px; height:20px; "
153 class="mr-5" 153 class="mr-5"
154 @click="deleteItem(props.item)" 154 @click="deleteItem(props.item)"
155 src="/static/icon/delete1.png" 155 src="/static/icon/delete1.png"
156 /> 156 />
157 <span>Delete</span> 157 <span>Delete</span>
158 </v-tooltip> 158 </v-tooltip>
159 </span> 159 </span>
160 </td> 160 </td>
161 </template> 161 </template>
162 <v-alert 162 <v-alert
163 slot="no-results" 163 slot="no-results"
164 :value="true" 164 :value="true"
165 color="error" 165 color="error"
166 icon="warning" 166 icon="warning"
167 >Your search for "{{ search }}" found no results.</v-alert> 167 >Your search for "{{ search }}" found no results.</v-alert>
168 </v-data-table> 168 </v-data-table>
169 </v-tab-item> 169 </v-tab-item>
170 <!-- ****** ADD multiple INVOICE ****** --> 170 <!-- ****** ADD multiple INVOICE ****** -->
171 <v-tab-item> 171 <v-tab-item>
172 <v-container fluid grid-list-md> 172 <v-container fluid grid-list-md>
173 <v-snackbar 173 <v-snackbar
174 :timeout="timeout" 174 :timeout="timeout"
175 :top="y === 'top'" 175 :top="y === 'top'"
176 :right="x === 'right'" 176 :right="x === 'right'"
177 :vertical="mode === 'vertical'" 177 :vertical="mode === 'vertical'"
178 v-model="snackbar" 178 v-model="snackbar"
179 color="success" 179 color="success"
180 >{{ text }}</v-snackbar> 180 >{{ text }}</v-snackbar>
181 <v-flex xs12 sm12> 181 <v-flex xs12 sm12>
182 <v-container fluid> 182 <v-container fluid>
183 <v-layout wrap> 183 <v-layout wrap>
184 <v-flex xs12 sm12 md5 class="mt-4"> 184 <v-flex xs12 sm12 md5 class="mt-4">
185 <v-card flat> 185 <v-card flat>
186 <v-toolbar dark class="fixcolors" flat> 186 <v-toolbar dark class="fixcolors" flat>
187 <v-spacer></v-spacer> 187 <v-spacer></v-spacer>
188 <v-toolbar-title> 188 <v-toolbar-title>
189 <h3>Invoice</h3> 189 <h3>Invoice</h3>
190 </v-toolbar-title> 190 </v-toolbar-title>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 </v-toolbar> 192 </v-toolbar>
193 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 193 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
194 <v-layout> 194 <v-layout>
195 <v-flex xs4 class="pt-4 subheading"> 195 <v-flex xs4 class="pt-4 subheading">
196 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 196 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
197 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 197 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
198 </v-flex> 198 </v-flex>
199 <v-flex xs6 class="ml-3"> 199 <v-flex xs6 class="ml-3">
200 <v-select 200 <v-select
201 :items="addclass" 201 :items="addclass"
202 label="Select Class" 202 label="Select Class"
203 v-model="invoiceData.classNum" 203 v-model="invoiceData.classNum"
204 item-text="classNum" 204 item-text="classNum"
205 item-value="_id" 205 item-value="_id"
206 @change="getAllStudents()" 206 @change="getAllStudents()"
207 :rules="classRules" 207 :rules="classRules"
208 required 208 required
209 ></v-select> 209 ></v-select>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 <v-layout> 212 <v-layout>
213 <v-flex xs4 class="pt-4 subheading"> 213 <v-flex xs4 class="pt-4 subheading">
214 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 214 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
215 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 215 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
216 </v-flex> 216 </v-flex>
217 <v-flex xs6 class="ml-3"> 217 <v-flex xs6 class="ml-3">
218 <v-select 218 <v-select
219 :items="studentList" 219 :items="studentList"
220 label="Select Incharge" 220 label="Select Incharge"
221 v-model="invoiceData.sectionId" 221 v-model="invoiceData.sectionId"
222 item-text="name" 222 item-text="name"
223 item-value="_id" 223 item-value="_id"
224 :rules="inchargeRules" 224 :rules="inchargeRules"
225 required 225 required
226 ></v-select> 226 ></v-select>
227 </v-flex> 227 </v-flex>
228 </v-layout> 228 </v-layout>
229 <v-layout> 229 <v-layout>
230 <v-flex xs4 class="pt-4 subheading"> 230 <v-flex xs4 class="pt-4 subheading">
231 <label class="right">Date:</label> 231 <label class="right">Date:</label>
232 </v-flex> 232 </v-flex>
233 <v-flex xs6 class="ml-3"> 233 <v-flex xs6 class="ml-3">
234 <v-menu 234 <v-menu
235 ref="menu1" 235 ref="menu1"
236 :close-on-content-click="false" 236 :close-on-content-click="false"
237 v-model="menu1" 237 v-model="menu1"
238 :nudge-right="40" 238 :nudge-right="40"
239 lazy 239 lazy
240 :return-value.sync="invoiceData.date" 240 :return-value.sync="invoiceData.date"
241 transition="scale-transition" 241 transition="scale-transition"
242 offset-y 242 offset-y
243 full-width 243 full-width
244 min-width="290px" 244 min-width="290px"
245 > 245 >
246 <v-text-field 246 <v-text-field
247 slot="activator" 247 slot="activator"
248 :rules="dateRules" 248 :rules="dateRules"
249 v-model="invoiceData.date" 249 v-model="invoiceData.date"
250 placeholder="Select date" 250 placeholder="Select date"
251 ></v-text-field> 251 ></v-text-field>
252 <v-date-picker 252 <v-date-picker
253 v-model="invoiceData.date" 253 v-model="invoiceData.date"
254 @input="$refs.menu1.save(invoiceData.date)" 254 @input="$refs.menu1.save(invoiceData.date)"
255 ></v-date-picker> 255 ></v-date-picker>
256 </v-menu> 256 </v-menu>
257 </v-flex> 257 </v-flex>
258 </v-layout> 258 </v-layout>
259 <v-layout> 259 <v-layout>
260 <v-flex xs4 class="pt-4 subheading"> 260 <v-flex xs4 class="pt-4 subheading">
261 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 261 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs6 class="ml-3"> 264 <v-flex xs6 class="ml-3">
265 <v-select 265 <v-select
266 :items="paymentStatus" 266 :items="paymentStatus"
267 v-model="invoiceData.paymentStatus" 267 v-model="invoiceData.paymentStatus"
268 item-text="name" 268 item-text="name"
269 item-value="value" 269 item-value="value"
270 label="Select Payment Status" 270 label="Select Payment Status"
271 @change="getPayMethodList" 271 @change="getPayMethodList"
272 :rules="paymentStatusRules" 272 :rules="paymentStatusRules"
273 required 273 required
274 ></v-select> 274 ></v-select>
275 </v-flex> 275 </v-flex>
276 </v-layout> 276 </v-layout>
277 <v-layout v-show="showPayMethods"> 277 <v-layout v-show="showPayMethods">
278 <v-flex xs4 class="pt-4 subheading"> 278 <v-flex xs4 class="pt-4 subheading">
279 <label class="right">Payment Method:</label> 279 <label class="right">Payment Method:</label>
280 </v-flex> 280 </v-flex>
281 <v-flex xs6 class="ml-3"> 281 <v-flex xs6 class="ml-3">
282 <v-select 282 <v-select
283 :items="paymentMethods" 283 :items="paymentMethods"
284 v-model="invoiceData.paymentMethod" 284 v-model="invoiceData.paymentMethod"
285 label="Select Payment Method" 285 label="Select Payment Method"
286 required 286 required
287 ></v-select> 287 ></v-select>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-layout> 290 <v-layout>
291 <v-flex xs12 sm10 offset-sm1> 291 <v-flex xs12 sm10 offset-sm1>
292 <v-card-actions> 292 <v-card-actions>
293 <v-btn @click="clear" round dark>clear</v-btn> 293 <v-btn @click="clear" round dark>clear</v-btn>
294 <v-spacer></v-spacer> 294 <v-spacer></v-spacer>
295 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 295 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
296 </v-card-actions> 296 </v-card-actions>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-form> 299 </v-form>
300 </v-card> 300 </v-card>
301 </v-flex> 301 </v-flex>
302 <v-flex xs12 sm12 md7 class="mt-4"> 302 <v-flex xs12 sm12 md7 class="mt-4">
303 <v-card> 303 <v-card>
304 <v-toolbar dark class="fixcolors" flat> 304 <v-toolbar dark class="fixcolors" flat>
305 <v-spacer></v-spacer> 305 <v-spacer></v-spacer>
306 <v-toolbar-title> 306 <v-toolbar-title>
307 <h3>Fee Type List</h3> 307 <h3>Fee Type List</h3>
308 </v-toolbar-title> 308 </v-toolbar-title>
309 <v-spacer></v-spacer> 309 <v-spacer></v-spacer>
310 </v-toolbar> 310 </v-toolbar>
311 <v-layout> 311 <v-layout>
312 <v-flex xs4 sm2 class="mt-4"> 312 <v-flex xs4 sm2 class="mt-4">
313 <label class="right title">Fee Type:</label> 313 <label class="right title">Fee Type:</label>
314 </v-flex> 314 </v-flex>
315 <v-flex xs4 sm4> 315 <v-flex xs4 sm4>
316 <v-select 316 <v-select
317 :items="feeTypes" 317 :items="feeTypes"
318 v-model="feeType.feeTypeName" 318 v-model="feeType.feeTypeName"
319 item-text="feeType" 319 item-text="feeType"
320 item-value="feeType" 320 item-value="feeType"
321 label="Select Fee Type" 321 label="Select Fee Type"
322 ></v-select> 322 ></v-select>
323 </v-flex> 323 </v-flex>
324 <v-flex xs4 sm6> 324 <v-flex xs4 sm6>
325 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn> 325 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 <table class="feeTypeTable tableRsponsive"> 328 <table class="feeTypeTable tableRsponsive">
329 <tr class="info white--text"> 329 <tr class="info white--text">
330 <th>#</th> 330 <th>#</th>
331 <th>Fee Type</th> 331 <th>Fee Type</th>
332 <th>Amount</th> 332 <th>Amount</th>
333 <th>Discount(%)</th> 333 <th>Discount(%)</th>
334 <th>Subtotal</th> 334 <th>Subtotal</th>
335 <th>Paid Amount</th> 335 <th>Paid Amount</th>
336 <th>Action</th> 336 <th>Action</th>
337 </tr> 337 </tr>
338 <tr 338 <tr
339 v-show="showFeeType" 339 v-show="showFeeType"
340 v-for="(feeType, index) in feeTypeData" 340 v-for="(feeType, index) in feeTypeData"
341 :key="index" 341 :key="index"
342 v-on:keyup="getAmmountDetails(feeType)" 342 v-on:keyup="getAmmountDetails(feeType)"
343 > 343 >
344 <td style="width:40px">{{ index + 1 }}</td> 344 <td style="width:40px">{{ index + 1 }}</td>
345 <td style="width:120px">{{ feeType.feeTypeName }}</td> 345 <td style="width:120px">{{ feeType.feeTypeName }}</td>
346 <td> 346 <td>
347 <v-text-field 347 <v-text-field
348 placeholder="fill your Amount" 348 placeholder="fill your Amount"
349 v-model="feeType.amount" 349 v-model="feeType.amount"
350 type="number" 350 type="number"
351 ></v-text-field> 351 ></v-text-field>
352 </td> 352 </td>
353 <td> 353 <td>
354 <v-text-field 354 <v-text-field
355 placeholder="fill your Discount" 355 placeholder="fill your Discount"
356 v-model="feeType.discount" 356 v-model="feeType.discount"
357 type="number" 357 type="number"
358 ></v-text-field> 358 ></v-text-field>
359 </td> 359 </td>
360 <td>{{ feeType.subTotal }}</td> 360 <td>{{ feeType.subTotal }}</td>
361 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 361 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
362 <v-text-field 362 <v-text-field
363 placeholder="fill your Paid Amount" 363 placeholder="fill your Paid Amount"
364 v-model="feeType.paidAmount" 364 v-model="feeType.paidAmount"
365 type="number" 365 type="number"
366 :disabled="disabled" 366 :disabled="disabled"
367 ></v-text-field> 367 ></v-text-field>
368 </td> 368 </td>
369 <td v-if="invoiceData.paymentStatus == ''"> 369 <td v-if="invoiceData.paymentStatus == ''">
370 <v-text-field 370 <v-text-field
371 placeholder="fill your Paid Amount" 371 placeholder="fill your Paid Amount"
372 v-model="feeType.paidAmount" 372 v-model="feeType.paidAmount"
373 type="number" 373 type="number"
374 :disabled="disabled" 374 :disabled="disabled"
375 ></v-text-field> 375 ></v-text-field>
376 </td> 376 </td>
377 <td 377 <td
378 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 378 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
379 > 379 >
380 <v-text-field 380 <v-text-field
381 placeholder="fill your Paid Amount" 381 placeholder="fill your Paid Amount"
382 v-model="feeType.paidAmount" 382 v-model="feeType.paidAmount"
383 type="number" 383 type="number"
384 ></v-text-field> 384 ></v-text-field>
385 </td> 385 </td>
386 <td> 386 <td>
387 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 387 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
388 </td> 388 </td>
389 </tr> 389 </tr>
390 <tfoot> 390 <tfoot>
391 <tr> 391 <tr>
392 <td colspan="2">Total:</td> 392 <td colspan="2">Total:</td>
393 <td>{{ feeType.amount }}</td> 393 <td>{{ feeType.amount }}</td>
394 <td>{{ feeType.discount }}</td> 394 <td>{{ feeType.discount }}</td>
395 <td>{{ feeType.subTotal }}</td> 395 <td>{{ feeType.subTotal }}</td>
396 <td>{{ feeType.paidAmount }}</td> 396 <td>{{ feeType.paidAmount }}</td>
397 </tr> 397 </tr>
398 </tfoot> 398 </tfoot>
399 </table> 399 </table>
400 </v-card> 400 </v-card>
401 </v-flex> 401 </v-flex>
402 </v-layout> 402 </v-layout>
403 </v-container> 403 </v-container>
404 </v-flex> 404 </v-flex>
405 </v-container> 405 </v-container>
406 </v-tab-item> 406 </v-tab-item>
407 </v-tabs> 407 </v-tabs>
408 <div class="loader" v-if="showLoader"> 408 <div class="loader" v-if="showLoader">
409 <v-progress-circular indeterminate color="white"></v-progress-circular> 409 <v-progress-circular indeterminate color="white"></v-progress-circular>
410 </div> 410 </div>
411 </v-app> 411 </v-app>
412 </template> 412 </template>
413 413
414 <script> 414 <script>
415 import http from "@/Services/http.js"; 415 import http from "@/Services/http.js";
416 import Util from "@/util"; 416 import Util from "@/util";
417 import moment from "moment"; 417 import moment from "moment";
418 418
419 export default { 419 export default {
420 data: () => ({ 420 data: () => ({
421 snackbar: false, 421 snackbar: false,
422 showPayMethods: false, 422 showPayMethods: false,
423 y: "top", 423 y: "top",
424 x: "right", 424 x: "right",
425 mode: "", 425 mode: "",
426 timeout: 3000, 426 timeout: 3000,
427 text: "", 427 text: "",
428 showLoader: false, 428 showLoader: false,
429 loading: false, 429 loading: false,
430 date: null, 430 date: null,
431 search: "", 431 search: "",
432 dialog: false, 432 dialog: false,
433 dialog1: false, 433 dialog1: false,
434 valid: true, 434 valid: true,
435 validEdit: true, 435 validEdit: true,
436 isActive: true, 436 isActive: true,
437 newActive: false, 437 newActive: false,
438 showFeeType: false, 438 showFeeType: false,
439 disabled: true, 439 disabled: true,
440 details: [], 440 details: [],
441 feeTypes: [], 441 feeTypes: [],
442 menu1: false, 442 menu1: false,
443 paymentMethods: ["Cash", "Cheque"], 443 paymentMethods: ["Cash", "Cheque"],
444 feeType: { 444 feeType: {
445 amount: "0.00", 445 amount: "0.00",
446 discount: "0.00", 446 discount: "0.00",
447 paidAmount: 0.0, 447 paidAmount: 0.0,
448 subTotal: "0.00", 448 subTotal: "0.00",
449 feeTypeName: "" 449 feeTypeName: ""
450 }, 450 },
451 feeTypeData: [], 451 feeTypeData: [],
452 pagination: { 452 pagination: {
453 rowsPerPage: 15 453 rowsPerPage: 15
454 }, 454 },
455 classRules: [v => !!v || " Class Name is required"], 455 classRules: [v => !!v || " Class Name is required"],
456 inchargeRules: [v => !!v || "Student Name is required"], 456 inchargeRules: [v => !!v || "Student Name is required"],
457 dateRules: [v => !!v || " Date is required"], 457 dateRules: [v => !!v || " Date is required"],
458 paymentStatusRules: [v => !!v || "Payment Status is required"], 458 paymentStatusRules: [v => !!v || "Payment Status is required"],
459 paymentMethodsRules: [v => !!v || "payment Method is required"], 459 paymentMethodsRules: [v => !!v || "payment Method is required"],
460 headers: [ 460 headers: [
461 { 461 {
462 text: "No", 462 text: "No",
463 align: "center", 463 align: "center",
464 sortable: false, 464 sortable: false,
465 value: "No" 465 value: "No"
466 }, 466 },
467 { 467 {
468 text: "Student", 468 text: "Student",
469 value: "student", 469 value: "student",
470 sortable: false, 470 sortable: false,
471 align: "center" 471 align: "center"
472 }, 472 },
473 { text: "Class", value: "class", sortable: false, align: "center" }, 473 { text: "Class", value: "class", sortable: false, align: "center" },
474 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 474 { text: "Total", value: "subtotal", sortable: false, align: "center" },
475 { text: "Discount", value: "discount", sortable: false, align: "center" }, 475 { text: "Discount", value: "discount", sortable: false, align: "center" },
476 { 476 {
477 text: "Paid Amount", 477 text: "Paid Amount",
478 value: "paidAmount", 478 value: "paidAmount",
479 sortable: false, 479 sortable: false,
480 align: "center" 480 align: "center"
481 }, 481 },
482 { 482 {
483 text: "Balance", 483 text: "Balance",
484 value: "Balance", 484 value: "Balance",
485 sortable: false, 485 sortable: false,
486 align: "center" 486 align: "center"
487 }, 487 },
488 { 488 {
489 text: "Status", 489 text: "Status",
490 value: "paymentStatus", 490 value: "paymentStatus",
491 sortable: false, 491 sortable: false,
492 align: "center" 492 align: "center"
493 }, 493 },
494 { 494 {
495 text: "Date", 495 text: "Date",
496 value: "date", 496 value: "date",
497 sortable: false, 497 sortable: false,
498 align: "center" 498 align: "center"
499 }, 499 },
500 { text: "Action", value: "", sortable: false, align: "center" } 500 { text: "Action", value: "", sortable: false, align: "center" }
501 ], 501 ],
502 invoiceList: [], 502 invoiceList: [],
503 token: "", 503 token: "",
504 editedItem: {}, 504 editedItem: {},
505 invoiceData: { 505 invoiceData: {
506 paymentStatus: "" 506 paymentStatus: ""
507 }, 507 },
508 addclass: [], 508 addclass: [],
509 studentList: [], 509 studentList: [],
510 paymentStatus: [ 510 paymentStatus: [
511 { 511 {
512 name: "Not Paid", 512 name: "Not Paid",
513 value: "NOT_PAID" 513 value: "NOT_PAID"
514 }, 514 },
515 { 515 {
516 name: "Partially Paid", 516 name: "Partially Paid",
517 value: "PARTIALLY_PAID" 517 value: "PARTIALLY_PAID"
518 }, 518 },
519 { 519 {
520 name: "Fully Paid", 520 name: "Fully Paid",
521 value: "FULLY_PAID" 521 value: "FULLY_PAID"
522 } 522 }
523 ] 523 ]
524 }), 524 }),
525 methods: { 525 methods: {
526 save(date) { 526 save(date) {
527 this.$refs.menu1.save(date); 527 this.$refs.menu1.save(date);
528 }, 528 },
529 dates: function(date) { 529 dates: function(date) {
530 return moment(date).format("MMMM DD, YYYY"); 530 return moment(date).format("MMMM DD, YYYY");
531 }, 531 },
532 // profile(item) { 532 // profile(item) {
533 // this.editedIndex = this.InvoiceList.indexOf(item); 533 // this.editedIndex = this.InvoiceList.indexOf(item);
534 // this.editedItem = Object.assign({}, item); 534 // this.editedItem = Object.assign({}, item);
535 // this.dialog1 = true; 535 // this.dialog1 = true;
536 // }, 536 // },
537 deleteItem(item) { 537 deleteItem(item) {
538 let deleteInvoice = { 538 let deleteInvoice = {
539 invoiceId: item._id 539 invoiceId: item._id
540 }; 540 };
541 http() 541 http()
542 .delete( 542 .delete(
543 "/deleteInvoice", 543 "/deleteInvoice",
544 confirm("Are you sure you want to delete this?") && { 544 confirm("Are you sure you want to delete this?") && {
545 params: deleteInvoice 545 params: deleteInvoice
546 } 546 }
547 ) 547 )
548 .then(response => { 548 .then(response => {
549 if ((this.snackbar = true)) { 549 if ((this.snackbar = true)) {
550 this.text = "Successfully delete Existing Invoice"; 550 this.text = "Successfully delete Existing Invoice";
551 } 551 }
552 this.getInvoiceList(); 552 this.getInvoiceList();
553 }) 553 })
554 .catch(error => { 554 .catch(error => {
555 // console.log(error); 555 // console.log(error);
556 }); 556 });
557 }, 557 },
558 activeTab(type) { 558 activeTab(type) {
559 switch (type) { 559 switch (type) {
560 case "existing": 560 case "existing":
561 this.newActive = false; 561 this.newActive = false;
562 this.isActive = true; 562 this.isActive = true;
563 break; 563 break;
564 564
565 default: 565 default:
566 this.newActive = true; 566 this.newActive = true;
567 this.isActive = false; 567 this.isActive = false;
568 break; 568 break;
569 } 569 }
570 }, 570 },
571 close() { 571 close() {
572 this.dialog = false; 572 this.dialog = false;
573 setTimeout(() => { 573 setTimeout(() => {
574 this.editedItem = Object.assign({}, this.defaultItem); 574 this.editedItem = Object.assign({}, this.defaultItem);
575 this.editedIndex = -1; 575 this.editedIndex = -1;
576 }, 300); 576 }, 300);
577 }, 577 },
578 close1() { 578 close1() {
579 this.dialog1 = false; 579 this.dialog1 = false;
580 }, 580 },
581 submit() { 581 submit() {
582 let feeTypeId = ""; 582 let feeTypeId = "";
583 for (let i = 0; i < this.feeTypes.length; i++) { 583 for (let i = 0; i < this.feeTypes.length; i++) {
584 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 584 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
585 feeTypeId = this.feeTypes[i]._id; 585 feeTypeId = this.feeTypes[i]._id;
586 } 586 }
587 } 587 }
588 if (this.$refs.form.validate()) { 588 if (this.$refs.form.validate()) {
589 let invoiceData = { 589 let invoiceData = {
590 classId: this.invoiceData.classNum, 590 classId: this.invoiceData.classNum,
591 studentId: this.invoiceData.sectionId, 591 studentId: this.invoiceData.sectionId,
592 date: this.invoiceData.date, 592 date: this.invoiceData.date,
593 paymentStatus: this.invoiceData.paymentStatus, 593 paymentStatus: this.invoiceData.paymentStatus,
594 paymentMethod: this.invoiceData.paymentMethod, 594 paymentMethod: this.invoiceData.paymentMethod,
595 feeType: this.feeTypeData, 595 feeType: this.feeTypeData,
596 totalAmount: this.feeType.amount, 596 totalAmount: this.feeType.amount,
597 totalDiscount: this.feeType.discount, 597 totalDiscount: this.feeType.discount,
598 totalSubTotal: this.feeType.subTotal, 598 totalSubTotal: this.feeType.subTotal,
599 totalPaidAmount: this.feeType.paidAmount 599 totalPaidAmount: this.feeType.paidAmount
600 }; 600 };
601 if (invoiceData.paymentStatus == "NOT_PAID") { 601 if (invoiceData.paymentStatus == "NOT_PAID") {
602 delete invoiceData.totalPaidAmount; 602 delete invoiceData.totalPaidAmount;
603 } 603 }
604 http() 604 http()
605 .post("/createInvoice", invoiceData) 605 .post("/createInvoice", invoiceData)
606 .then(response => { 606 .then(response => {
607 this.getInvoiceList(); 607 this.getInvoiceList();
608 this.snackbar = true; 608 this.snackbar = true;
609 this.text = "New Invoice added successfully"; 609 this.text = "New Invoice added successfully";
610 this.clear(); 610 this.clear();
611 this.feeTypeData = []; 611 this.feeTypeData = [];
612 if (this.feeTypeData.length == 0) { 612 if (this.feeTypeData.length == 0) {
613 this.feeType = { 613 this.feeType = {
614 amount: "0.00", 614 amount: "0.00",
615 discount: "0.00", 615 discount: "0.00",
616 paidAmount: "0.00", 616 paidAmount: "0.00",
617 subTotal: "0.00", 617 subTotal: "0.00",
618 feeTypeList: "" 618 feeTypeList: ""
619 }; 619 };
620 } 620 }
621 this.loading = false; 621 this.loading = false;
622 }) 622 })
623 .catch(error => { 623 .catch(error => {
624 // console.log(error); 624 // console.log(error);
625 if ((this.snackbar = true)) { 625 if ((this.snackbar = true)) {
626 this.text = error.response.data.message; 626 this.text = error.response.data.message;
627 } 627 }
628 this.loading = false; 628 this.loading = false;
629 }); 629 });
630 } 630 }
631 }, 631 },
632 clear() { 632 clear() {
633 this.$refs.form.reset(); 633 this.$refs.form.reset();
634 }, 634 },
635 getInvoiceList() { 635 getInvoiceList() {
636 this.showLoader = true; 636 this.showLoader = true;
637 http() 637 http()
638 .get("/getInvoicesList", { 638 .get("/getInvoicesList", {
639 headers: { Authorization: "Bearer " + this.token } 639 headers: { Authorization: "Bearer " + this.token }
640 }) 640 })
641 .then(response => { 641 .then(response => {
642 this.invoiceList = response.data.data; 642 this.invoiceList = response.data.data;
643 this.showLoader = false; 643 this.showLoader = false;
644 }) 644 })
645 .catch(error => { 645 .catch(error => {
646 // console.log("err====>", err); 646 // console.log("err====>", err);
647 this.showLoader = false; 647 this.showLoader = false;
648 if (error.response.status === 401) { 648 if (error.response.status === 401) {
649 this.$router.replace({ path: "/" }); 649 this.$router.replace({ path: "/" });
650 this.$store.dispatch("setToken", null); 650 this.$store.dispatch("setToken", null);
651 this.$store.dispatch("Id", null); 651 this.$store.dispatch("Id", null);
652 } 652 }
653 }); 653 });
654 }, 654 },
655 selectFeeType() { 655 selectFeeType() {
656 this.showFeeType = true; 656 this.showFeeType = true;
657 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 657 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
658 // console.log("this.feeType.feeTypeListC", this.feeTypeData.feeTypeName); 658 // console.log("this.feeType.feeTypeListC", this.feeTypeData.feeTypeName);
659 }, 659 },
660 deleteSelectFee: function(index) { 660 deleteSelectFee: function(index) {
661 this.feeTypeData.splice(index, 1); 661 this.feeTypeData.splice(index, 1);
662 console.log("this.feeTypeData", this.feeTypeData); 662 // console.log("this.feeTypeData", this.feeTypeData);
663 // if (index === 1) 663 // if (index === 1)
664 for (let i = 0; i < this.feeTypeData.length; i++) { 664 for (let i = 0; i < this.feeTypeData.length; i++) {
665 this.feeType = this.feeTypeData[i]; 665 this.feeType = this.feeTypeData[i];
666 } 666 }
667 if (this.feeTypeData.length == 0) { 667 if (this.feeTypeData.length == 0) {
668 this.feeType = { 668 this.feeType = {
669 amount: "0.00", 669 amount: "0.00",
670 discount: "0.00", 670 discount: "0.00",
671 paidAmount: "0.00", 671 paidAmount: "0.00",
672 subTotal: "0.00", 672 subTotal: "0.00",
673 feeTypeName: "" 673 feeTypeName: ""
674 }; 674 };
675 } 675 }
676 }, 676 },
677 getAllClasses() { 677 getAllClasses() {
678 http() 678 http()
679 .get("/getClassesList", { 679 .get("/getClassesList", {
680 headers: { Authorization: "Bearer " + this.token } 680 headers: { Authorization: "Bearer " + this.token }
681 }) 681 })
682 .then(response => { 682 .then(response => {
683 this.addclass = response.data.data; 683 this.addclass = response.data.data;
684 }) 684 })
685 .catch(err => { 685 .catch(err => {
686 // console.log("err====>", err); 686 // console.log("err====>", err);
687 // this.$router.replace({ path: "/" }); 687 // this.$router.replace({ path: "/" });
688 }); 688 });
689 }, 689 },
690 getAllStudents() { 690 getAllStudents() {
691 http() 691 http()
692 .get("/getStudentsList", { 692 .get("/getStudentsList", {
693 params: { classId: this.invoiceData.classNum }, 693 params: { classId: this.invoiceData.classNum },
694 headers: { Authorization: "Bearer " + this.token } 694 headers: { Authorization: "Bearer " + this.token }
695 }) 695 })
696 .then(response => { 696 .then(response => {
697 this.studentList = response.data.data; 697 this.studentList = response.data.data;
698 }) 698 })
699 .catch(err => { 699 .catch(err => {
700 // console.log("err====>", err); 700 // console.log("err====>", err);
701 // this.$router.replace({ path: "/" }); 701 // this.$router.replace({ path: "/" });
702 }); 702 });
703 }, 703 },
704 getfeeType() { 704 getfeeType() {
705 http() 705 http()
706 .get("/getFeesList", { 706 .get("/getFeesList", {
707 headers: { Authorization: "Bearer " + this.token } 707 headers: { Authorization: "Bearer " + this.token }
708 }) 708 })
709 .then(response => { 709 .then(response => {
710 this.feeTypes = response.data.data; 710 this.feeTypes = response.data.data;
711 }) 711 })
712 .catch(err => { 712 .catch(err => {
713 // console.log("err====>", err); 713 // console.log("err====>", err);
714 // this.$router.replace({ path: "/" }); 714 // this.$router.replace({ path: "/" });
715 }); 715 });
716 }, 716 },
717 getAmmountDetails(feeTyp) { 717 getAmmountDetails(feeTyp) {
718 let feeType = { 718 let feeType = {
719 amount: "", 719 amount: "",
720 discount: "", 720 discount: "",
721 subTotal: "", 721 subTotal: "",
722 subParticularTotal: "", 722 subParticularTotal: "",
723 paidAmount: "" 723 paidAmount: ""
724 }; 724 };
725 for (let i = 0; i < this.feeTypeData.length; i++) { 725 for (let i = 0; i < this.feeTypeData.length; i++) {
726 // *********** AMOUNT *********** 726 // *********** AMOUNT ***********
727 727
728 feeType.amount = 728 feeType.amount =
729 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 729 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
730 // console.log("feeType.amount ", feeType.amount); 730 // console.log("feeType.amount ", feeType.amount);
731 this.feeType.amount = feeType.amount; 731 this.feeType.amount = feeType.amount;
732 this.feeType.subTotal = feeType.amount; 732 this.feeType.subTotal = feeType.amount;
733 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 733 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
734 734
735 // *********** DISCOUNT *********** 735 // *********** DISCOUNT ***********
736 736
737 if (this.feeTypeData[i].discount) { 737 if (this.feeTypeData[i].discount) {
738 feeType.discount = 738 feeType.discount =
739 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 739 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
740 // console.log("feeType.discount", feeType.discount); 740 // console.log("feeType.discount", feeType.discount);
741 this.feeType.discount = feeType.discount; 741 this.feeType.discount = feeType.discount;
742 feeType.subParticularTotal = 742 feeType.subParticularTotal =
743 this.feeTypeData[i].amount - 743 this.feeTypeData[i].amount -
744 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 744 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
745 // console.log("feeType.subTotal", feeType.subTotal); 745 // console.log("feeType.subTotal", feeType.subTotal);
746 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 746 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
747 } 747 }
748 748
749 // *********** SUBTOTAL *********** 749 // *********** SUBTOTAL ***********
750 750
751 feeType.subTotal = 751 feeType.subTotal =
752 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 752 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
753 this.feeType.subTotal = feeType.subTotal.toFixed(2); 753 this.feeType.subTotal = feeType.subTotal.toFixed(2);
754 754
755 // *********** PAID-AMOUNT *********** 755 // *********** PAID-AMOUNT ***********
756 756
757 feeType.paidAmount = 757 feeType.paidAmount =
758 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 758 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
759 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 759 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
760 } 760 }
761 }, 761 },
762 getPayMethodList() { 762 getPayMethodList() {
763 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 763 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
764 this.showPayMethods = true; 764 this.showPayMethods = true;
765 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 765 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
766 this.showPayMethods = true; 766 this.showPayMethods = true;
767 } else { 767 } else {
768 this.showPayMethods = false; 768 this.showPayMethods = false;
769 } 769 }
770 } 770 }
771 }, 771 },
772 mounted() { 772 mounted() {
773 this.token = this.$store.state.token; 773 this.token = this.$store.state.token;
774 this.getInvoiceList(); 774 this.getInvoiceList();
775 this.getAllClasses(); 775 this.getAllClasses();
776 this.getfeeType(); 776 this.getfeeType();
777 }, 777 },
778 created() { 778 created() {
779 this.$root.$on("app:search", search => { 779 this.$root.$on("app:search", search => {
780 this.search = search; 780 this.search = search;
781 }); 781 });
782 }, 782 },
783 beforeDestroy() { 783 beforeDestroy() {
784 // dont forget to remove the listener 784 // dont forget to remove the listener
785 this.$root.$off("app:search"); 785 this.$root.$off("app:search");
786 } 786 }
787 }; 787 };
788 </script> 788 </script>
789 789
790 790
791 <style scoped> 791 <style scoped>
792 .active { 792 .active {
793 background-color: gray; 793 background-color: gray;
794 color: white !important; 794 color: white !important;
795 } 795 }
796 .activebtn { 796 .activebtn {
797 color: black !important; 797 color: black !important;
798 } 798 }
799 table { 799 table {
800 border-collapse: collapse; 800 border-collapse: collapse;
801 border: 1px solid #e2e7eb; 801 border: 1px solid #e2e7eb;
802 } 802 }
803 803
804 th, 804 th,
805 td { 805 td {
806 border: 1px solid #e2e7eb; 806 border: 1px solid #e2e7eb;
807 padding: 10px; 807 padding: 10px;
808 text-align: center; 808 text-align: center;
809 } 809 }
810 table.feeTypeTable { 810 table.feeTypeTable {
811 table-layout: auto !important; 811 table-layout: auto !important;
812 width: 100% !important; 812 width: 100% !important;
813 } 813 }
814 </style> 814 </style>
src/pages/Account/viewInvoice.vue
Diff comments   View file @0065443
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 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-card> 5 <v-card>
6 <v-layout wrap> 6 <v-layout wrap>
7 <v-flex 12> 7 <v-flex 12>
8 <br /> 8 <br />
9 <v-layout wrap> 9 <v-layout wrap>
10 <v-flex xs12 sm6> 10 <v-flex xs12 sm6>
11 <v-layout> 11 <v-layout>
12 <v-flex xs4 sm2> 12 <v-flex xs4 sm2>
13 <h5 class="right my-1"> 13 <h5 class="right my-1">
14 <b>invoice:</b> 14 <b>invoice:</b>
15 </h5> 15 </h5>
16 </v-flex> 16 </v-flex>
17 <v-flex sm11 xs8> 17 <v-flex sm11 xs8>
18 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5> 18 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-layout> 21 <v-layout>
22 <v-flex xs4 sm2> 22 <v-flex xs4 sm2>
23 <h5 class="right my-1"> 23 <h5 class="right my-1">
24 <b>Name:</b> 24 <b>Name:</b>
25 </h5> 25 </h5>
26 </v-flex> 26 </v-flex>
27 <v-flex sm11 xs8> 27 <v-flex sm11 xs8>
28 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5> 28 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm2> 32 <v-flex xs4 sm2>
33 <h5 class="right my-1"> 33 <h5 class="right my-1">
34 <b>Class:</b> 34 <b>Class:</b>
35 </h5> 35 </h5>
36 </v-flex> 36 </v-flex>
37 <v-flex sm11 xs8> 37 <v-flex sm11 xs8>
38 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5> 38 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 <v-flex xs12 sm6> 42 <v-flex xs12 sm6>
43 43 <v-layout>
44 <v-layout> 44 <v-flex xs4 sm2>
45 <v-flex xs4 sm2> 45 <h5 class="right my-1">
46 <h5 class="right my-1"> 46 <b>Roll No:</b>
47 <b>Roll No:</b> 47 </h5>
48 </h5> 48 </v-flex>
49 </v-flex> 49 <v-flex sm6 xs8>
50 <v-flex sm6 xs8> 50 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
51 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5> 51 </v-flex>
52 </v-flex> 52 </v-layout>
53 </v-layout> 53 <v-layout>
54 <v-layout> 54 <v-flex xs4 sm2>
55 <v-flex xs4 sm2> 55 <h5 class="right my-1">
56 <h5 class="right my-1"> 56 <b>email:</b>
57 <b>email:</b> 57 </h5>
58 </h5> 58 </v-flex>
59 </v-flex> 59 <v-flex sm6 xs8>
60 <v-flex sm6 xs8> 60 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
61 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5> 61 </v-flex>
62 </v-flex> 62 </v-layout>
63 </v-layout> 63 <v-layout>
64 <v-layout> 64 <v-flex xs4 sm2>
65 <v-flex xs4 sm2> 65 <h5 class="right my-1">
66 <h5 class="right my-1"> 66 <b>Status :</b>
67 <b>Status :</b> 67 </h5>
68 </h5> 68 </v-flex>
69 </v-flex> 69 <v-flex sm6 xs8>
70 <v-flex sm6 xs8> 70 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
71 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
72 </v-flex>
73 </v-layout>
74 </v-flex>
75 </v-layout>
76 </v-flex> 71 </v-flex>
77 </v-layout> 72 </v-layout>
78 </v-card> 73 </v-flex>
79 <table class="feeTypeTable tableRsponsive"> 74 </v-layout>
80 <tr class="info white--text"> 75 </v-flex>
81 <th>#</th> 76 </v-layout>
82 <th>Fee Type</th> 77 </v-card>
83 <th>Amount</th> 78 <table class="feeTypeTable tableRsponsive">
84 <th>Discount</th> 79 <tr class="info white--text">
85 <th>Subtotal</th> 80 <th>#</th>
86 </tr> 81 <th>Fee Type</th>
87 <tr 82 <th>Amount</th>
88 v-for="(feeType, index) in feeTypeData" 83 <th>Discount</th>
89 :key="index" 84 <th>Subtotal</th>
90 v-on:keyup="getAmmountDetails(feeType)" 85 </tr>
91 > 86 <tr
92 <td style="width:40px">{{ index + 1 }}</td> 87 v-for="(feeType, index) in feeTypeData"
93 <td style="width:120px">{{ feeType.feeTypeName }}</td> 88 :key="index"
94 <td style="width:120px">{{ feeType.amount }}</td> 89 v-on:keyup="getAmmountDetails(feeType)"
95 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td> 90 >
96 <td style="width:120px">{{ feeType.subTotal }}</td> 91 <td style="width:40px">{{ index + 1 }}</td>
97 </tr> 92 <td style="width:120px">{{ feeType.feeTypeName }}</td>
98 <tfoot> 93 <td style="width:120px">{{ feeType.amount }}</td>
99 <tr> 94 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
100 <td colspan="4"><span class="right subheding">Total Amount (RS) :</span></td> 95 <td style="width:120px">{{ feeType.subTotal }}</td>
101 <td>{{ feeType.subTotal }}</td> 96 </tr>
102 </tr> 97 <tfoot>
103 <tr> 98 <tr>
104 <td colspan="4"><span class="right subheding">Paid (RS) :</span></td> 99 <td colspan="4">
105 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 100 <span class="right subheding">Total Amount (RS) :</span>
106 </tr> 101 </td>
107 <tr> 102 <td>{{ feeType.subTotal }}</td>
108 <td colspan="4"><span class="right subheding">Balance (RS) :</span></td> 103 </tr>
109 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 104 <tr>
110 </tr> 105 <td colspan="4">
111 </tfoot> 106 <span class="right subheding">Paid (RS) :</span>
112 </table> 107 </td>
113 </v-card> 108 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
114 </v-flex> 109 </tr>
115 </v-layout> 110 <tr>
116 </v-container> 111 <td colspan="4">
117 </v-flex> 112 <span class="right subheding">Balance (RS) :</span>
113 </td>
114 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
115 </tr>
116 </tfoot>
117 </table>
118 <!-- </v-card> -->
119 <!-- </v-flex> -->
120 <!-- </v-layout> -->
121 <!-- </v-container> -->
122 <!-- </v-flex> -->
118 </v-container> 123 </v-container>
119 <div class="loader" v-if="showLoader"> 124 <div class="loader" v-if="showLoader">
120 <v-progress-circular indeterminate color="white"></v-progress-circular> 125 <v-progress-circular indeterminate color="white"></v-progress-circular>
121 </div> 126 </div>
122 </v-app> 127 </v-app>
123 </template> 128 </template>
124 129
125 <script> 130 <script>
126 import http from "@/Services/http.js"; 131 import http from "@/Services/http.js";
127 import Util from "@/util"; 132 import Util from "@/util";
128 import moment from "moment"; 133 import moment from "moment";
129 134
130 export default { 135 export default {
131 data: () => ({ 136 data: () => ({
132 showLoader: false, 137 showLoader: false,
133 feeTypes: [], 138 feeTypes: [],
134 invoiceData: {}, 139 invoiceData: {},
135 feeType: { 140 feeType: {
136 amount: "", 141 amount: "",
137 discount: "", 142 discount: "",
138 totalPaidAmount: "", 143 totalPaidAmount: "",
139 subTotal: "", 144 subTotal: "",
140 feeTypeName: "" 145 feeTypeName: ""
141 }, 146 },
142 feeTypeData: [], 147 feeTypeData: [],
143 token: "", 148 token: "",
144 invoiceParticularData: {}, 149 invoiceParticularData: {}
145 }), 150 }),
146 151
147 methods: { 152 methods: {
148
149 getInvoiceList() { 153 getInvoiceList() {
150 http() 154 http()
151 .get("/getParticularInvoice", { 155 .get("/getParticularInvoice", {
152 params: { invoiceId: this.$route.params.viewInvoiceId }, 156 params: { invoiceId: this.$route.params.viewInvoiceId },
153 headers: { Authorization: "Bearer " + this.token } 157 headers: { Authorization: "Bearer " + this.token }
154 }) 158 })
155 .then(response => { 159 .then(response => {
156 this.invoiceParticularData = response.data.data; 160 this.invoiceParticularData = response.data.data;
157 this.invoiceData = this.invoiceParticularData; 161 this.invoiceData = this.invoiceParticularData;
158 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 162 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
159 this.feeTypeData = this.invoiceParticularData.feeType; 163 this.feeTypeData = this.invoiceParticularData.feeType;
160 (this.feeType.amount = response.data.data.totalAmount), 164 (this.feeType.amount = response.data.data.totalAmount),
161 (this.feeType.discount = response.data.data.totalDiscount), 165 (this.feeType.discount = response.data.data.totalDiscount),
162 (this.feeType.subTotal = response.data.data.totalSubTotal), 166 (this.feeType.subTotal = response.data.data.totalSubTotal),
163 this.feeType.totalPaidAmount = response.data.data.totalPaidAmount 167 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount(
164 console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount) 168 // console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount)
165 (this.showLoader = false); 169 (this.showLoader = false)
170 ));
166 }) 171 })
167 .catch(err => { 172 .catch(err => {
168 this.showLoader = false; 173 this.showLoader = false;
169 }); 174 });
170 }, 175 },
171 getfeeType() { 176 getfeeType() {
172 http() 177 http()
173 .get("/getFeesList", { 178 .get("/getFeesList", {
174 headers: { Authorization: "Bearer " + this.token } 179 headers: { Authorization: "Bearer " + this.token }
175 }) 180 })
176 .then(response => { 181 .then(response => {
177 this.feeTypes = response.data.data; 182 this.feeTypes = response.data.data;
178 }) 183 })
179 .catch(err => { 184 .catch(err => {
180 // console.log("err====>", err); 185 // console.log("err====>", err);
181 }); 186 });
182 }, 187 },
183 getAmmountDetails(feeTyp) { 188 getAmmountDetails(feeTyp) {
184 let feeType = { 189 let feeType = {
185 subTotal: "", 190 subTotal: "",
186 subParticularTotal: "", 191 subParticularTotal: "",
187 paidAmount: "" 192 paidAmount: ""
188 }; 193 };
189 // *********** SUBTOTAL *********** 194 // *********** SUBTOTAL ***********
190 feeType.subTotal = 195 feeType.subTotal =
191 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 196 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
192 this.feeType.subTotal = feeType.subTotal.toFixed(2); 197 this.feeType.subTotal = feeType.subTotal.toFixed(2);
193 // *********** PAID-AMOUNT *********** 198 // *********** PAID-AMOUNT ***********
194 feeType.paidAmount = 199 feeType.paidAmount =
195 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 200 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
196 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 201 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
197 } 202 }
198 }, 203 },
199 mounted() { 204 mounted() {
200 this.token = this.$store.state.token; 205 this.token = this.$store.state.token;
201 this.getInvoiceList(); 206 this.getInvoiceList();
202 this.getfeeType(); 207 this.getfeeType();
203 }, 208 },
204 created() { 209 created() {
205 this.$root.$on("app:search", search => { 210 this.$root.$on("app:search", search => {
206 this.search = search; 211 this.search = search;
207 }); 212 });
208 }, 213 },
209 beforeDestroy() { 214 beforeDestroy() {
210 // dont forget to remove the listener 215 // dont forget to remove the listener
211 this.$root.$off("app:search"); 216 this.$root.$off("app:search");
212 } 217 }
213 }; 218 };
214 </script> 219 </script>
215 220
216 221
217 <style scoped> 222 <style scoped>
218 .active { 223 .active {
219 background-color: gray; 224 background-color: gray;
220 color: white !important; 225 color: white !important;
221 } 226 }
222 .activebtn { 227 .activebtn {
223 color: black !important; 228 color: black !important;
224 } 229 }
225 table { 230 table {
226 border-collapse: collapse; 231 border-collapse: collapse;
227 border: 1px solid #e2e7eb; 232 border: 1px solid #e2e7eb;
228 } 233 }
229 234
230 th, 235 th,
231 td { 236 td {
232 border: 1px solid #e2e7eb; 237 border: 1px solid #e2e7eb;
233 padding: 10px; 238 padding: 10px;
234 text-align: center; 239 text-align: center;
235 } 240 }
236 table.feeTypeTable { 241 table.feeTypeTable {
237 table-layout: auto !important; 242 table-layout: auto !important;
238 width: 100% !important; 243 width: 100% !important;
239 } 244 }
240 @media screen and (max-width: 380px) { 245 @media screen and (max-width: 380px) {
241 .tableRsponsive { 246 .tableRsponsive {
src/pages/Administrator/academicYear.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gary">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing Academic Year</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add New Academic Year</v-tab>
19
20 <!-- ****** EDIT ACADEMIC YEAR ****** -->
21
22 <v-tab-item>
23 <v-snackbar
24 :timeout="timeout"
25 :top="y === 'top'"
26 :right="x === 'right'"
27 :vertical="mode === 'vertical'"
28 v-model="snackbar"
29 color="success"
30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer>
35 <v-toolbar-title>
36 <h3>Edit Academic Year</h3>
37 </v-toolbar-title>
38 <v-spacer></v-spacer>
39 </v-toolbar>
40 <v-card flat>
41 <v-container fluid>
42 <v-flex xs12 sm12>
43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Year:</label>
46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field
49 v-model="editedItem.year"
50 placeholder="fill your Title"
51 name="name"
52 type="text"
53 ></v-text-field>
54 </v-flex>
55 </v-layout>
56 </v-flex>
57 <v-flex xs12 sm12>
58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Year Title:</label>
61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3">
63 <v-text-field
64 v-model="editedItem.yearTitle"
65 placeholder="fill your Year Title"
66 name="name"
67 type="text"
68 ></v-text-field>
69 </v-flex>
70 </v-layout>
71 </v-flex>
72 <v-flex xs12 sm12>
73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right">Date:</label>
76 </v-flex>
77 <v-flex xs8 sm5 class="ml-3">
78 <v-menu
79 ref="menu"
80 :close-on-content-click="false"
81 v-model="menu"
82 :nudge-right="40"
83 lazy
84 transition="scale-transition"
85 offset-y
86 full-width
87 min-width="290px"
88 >
89 <v-text-field
90 slot="activator"
91 v-model="editedItem.startingDate"
92 placeholder="Select date"
93 ></v-text-field>
94 <v-date-picker
95 color="info"
96 ref="picker"
97 v-model="editedItem.startingDate"
98 @input="$refs.menu.save(editedItem.startingDate)"
99 ></v-date-picker>
100 </v-menu>
101 </v-flex>
102 </v-layout>
103 </v-flex>
104 <v-flex xs12 sm12>
105 <v-layout>
106 <v-flex xs4 class="pt-4 subheading">
107 <label class="right">Date:</label>
108 </v-flex>
109 <v-flex xs8 sm5 class="ml-3">
110 <v-menu
111 ref="menuEndDate"
112 :close-on-content-click="false"
113 v-model="menuEndDate"
114 :nudge-right="40"
115 lazy
116 transition="scale-transition"
117 offset-y
118 full-width
119 min-width="290px"
120 >
121 <v-text-field
122 slot="activator"
123 v-model="editedItem.endingDate"
124 placeholder="Select date"
125 ></v-text-field>
126 <v-date-picker
127 color="info"
128 ref="picker"
129 v-model="editedItem.endingDate"
130 @input="$refs.menuEndDate.save(editedItem.endingDate)"
131 ></v-date-picker>
132 </v-menu>
133 </v-flex>
134 </v-layout>
135 </v-flex>
136 <v-layout>
137 <v-flex xs12 sm10 offset-sm1>
138 <v-card-actions>
139 <v-btn round dark @click.native="close">Cancel</v-btn>
140 <v-spacer></v-spacer>
141 <v-btn round dark @click="save">Save</v-btn>
142 </v-card-actions>
143 </v-flex>
144 </v-layout>
145 </v-container>
146 </v-card>
147 </v-flex>
148 </v-dialog>
149
150 <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** -->
151
152 <v-dialog v-model="dialog1" max-width="700px">
153 <v-toolbar color="white">
154 <v-spacer></v-spacer>
155 <v-toolbar-title>
156 <h3>Academic Year</h3>
157 </v-toolbar-title>
158 <v-spacer></v-spacer>
159 <v-icon @click="close1">close</v-icon>
160 </v-toolbar>
161 <v-card>
162 <v-card-text>
163 <v-container grid-list-md>
164 <v-layout wrap>
165 <v-flex>
166 <v-layout>
167 <v-flex xs5 sm6>
168 <h5 class="right my-1">
169 <b>Title:</b>
170 </h5>
171 </v-flex>
172 <v-flex sm6 xs8>
173 <h5 class="my-1">{{ editedItem.year }}</h5>
174 </v-flex>
175 </v-layout>
176 <v-layout>
177 <v-flex xs5 sm6>
178 <h5 class="right my-1">
179 <b>Date:</b>
180 </h5>
181 </v-flex>
182 <v-flex sm6 xs8>
183 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
184 </v-flex>
185 </v-layout>
186 <v-layout>
187 <v-flex xs5 sm6>
188 <h5 class="right my-1">
189 <b>Description:</b>
190 </h5>
191 </v-flex>
192 <v-flex sm6 xs8>
193 <h5 class="my-1">{{ editedItem.yearTitle }}</h5>
194 </v-flex>
195 </v-layout>
196 </v-flex>
197 </v-layout>
198 </v-container>
199 </v-card-text>
200 </v-card>
201 </v-dialog>
202 <v-snackbar
203 :timeout="timeout"
204 :top="y === 'top'"
205 :right="x === 'right'"
206 :vertical="mode === 'vertical'"
207 v-model="snackbar"
208 color="success"
209 >{{ text }}</v-snackbar>
210
211 <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** -->
212
213 <v-data-table
214 :headers="headers"
215 :items="getAcademicYearList"
216 :pagination.sync="pagination"
217 :search="search"
218 >
219 <template slot="items" slot-scope="props">
220 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
221 <td id="td" class="text-xs-center">{{ props.item.year}}</td>
222 <td id="td" class="text-xs-center">{{ props.item.yearTitle}}</td>
223 <td id="td" class="text-xs-center">{{ dates(props.item.startingDate)}}</td>
224 <td id="td" class="text-xs-center">{{ dates(props.item.endingDate)}}</td>
225 <td id="td" class="text-xs-center">
226 <span>
227 <img
228 style="cursor:pointer; width:25px; height:18px; "
229 class="mr-5"
230 @click="profile(props.item)"
231 src="/static/icon/eye1.png"
232 />
233 <img
234 style="cursor:pointer; width:20px; height:18px; "
235 class="mr-5"
236 @click="editItem(props.item)"
237 src="/static/icon/edit1.png"
238 />
239 <img
240 style="cursor:pointer;width:20px; height:20px; "
241 class="mr-5"
242 @click="deleteItem(props.item)"
243 src="/static/icon/delete1.png"
244 />
245 </span>
246 </td>
247 </template>
248 <v-alert
249 slot="no-results"
250 :value="true"
251 color="error"
252 icon="warning"
253 >Your search for "{{ search }}" found no results.</v-alert>
254 </v-data-table>
255 </v-tab-item>
256
257 <!-- ****** ADD ACADEMIC YEAR ****** -->
258
259 <v-tab-item>
260 <v-container>
261 <v-snackbar
262 :timeout="timeout"
263 :top="y === 'top'"
264 :right="x === 'right'"
265 :vertical="mode === 'vertical'"
266 v-model="snackbar"
267 color="success"
268 >{{ text }}</v-snackbar>
269 <v-flex xs12 sm12 md8 offset-md2 class="top">
270 <v-card flat>
271 <v-form ref="form" v-model="valid" lazy-validation>
272 <v-container fluid>
273 <v-flex xs12>
274 <v-layout>
275 <v-flex xs5 sm4 class="pt-4 subheading">
276 <label class="right">Year:</label>
277 </v-flex>
278 <v-flex xs7 sm6 class="ml-3">
279 <v-text-field
280 v-model="addAcademicYear.year"
281 placeholder="fill Year (2019-2020)"
282 type="text"
283 :rules="yearRules"
284 required
285 ></v-text-field>
286 </v-flex>
287 </v-layout>
288 </v-flex>
289 <v-flex xs12>
290 <v-layout>
291 <v-flex xs5 sm4 class="pt-4 subheading">
292 <label class="right">Year Title:</label>
293 </v-flex>
294 <v-flex xs7 sm6 class="ml-3">
295 <v-text-field
296 placeholder="fill your Year Title"
297 :rules="yearTitleRules"
298 v-model="addAcademicYear.yearTitle"
299 type="text"
300 required
301 ></v-text-field>
302 </v-flex>
303 </v-layout>
304 </v-flex>
305 <v-flex xs12>
306 <v-layout>
307 <v-flex xs5 sm4 class="pt-4 subheading">
308 <label class="right">Starting Date:</label>
309 </v-flex>
310 <v-flex xs7 sm6 class="ml-3">
311 <v-menu
312 ref="menuStart"
313 :close-on-content-click="false"
314 v-model="menuStart"
315 :nudge-right="40"
316 :return-value.sync="addAcademicYear.startingDate"
317 app
318 lazy
319 transition="scale-transition"
320 offset-y
321 full-width
322 min-width="290px"
323 >
324 <v-text-field
325 slot="activator"
326 :rules="startDateRules"
327 v-model="addAcademicYear.startingDate"
328 append-icon="event"
329 placeholder="Select starting date"
330 ></v-text-field>
331 <v-date-picker
332 color="info"
333 v-model="addAcademicYear.startingDate"
334 @input="$refs.menuStart.save(addAcademicYear.startingDate)"
335 ></v-date-picker>
336 </v-menu>
337 </v-flex>
338 </v-layout>
339 </v-flex>
340 <v-flex xs12>
341 <v-layout>
342 <v-flex xs5 sm4 class="pt-4 subheading">
343 <label class="right">Ending Date:</label>
344 </v-flex>
345 <v-flex xs7 sm6 class="ml-3">
346 <v-menu
347 ref="menu1"
348 :close-on-content-click="false"
349 v-model="menu1"
350 :nudge-right="40"
351 :return-value.sync="addAcademicYear.endingDate"
352 app
353 lazy
354 transition="scale-transition"
355 offset-y
356 full-width
357 min-width="290px"
358 >
359 <v-text-field
360 slot="activator"
361 :rules="endDateRules"
362 v-model="addAcademicYear.endingDate"
363 append-icon="event"
364 placeholder="Select ending date"
365 ></v-text-field>
366 <v-date-picker
367 color="info"
368 v-model="addAcademicYear.endingDate"
369 @input="$refs.menu1.save(addAcademicYear.endingDate)"
370 ></v-date-picker>
371 </v-menu>
372 </v-flex>
373 </v-layout>
374 </v-flex>
375 <v-layout>
376 <v-flex xs12 sm9 offset-sm2>
377 <v-layout>
378 <v-flex xs6>
379 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
380 </v-flex>
381 <v-flex xs6>
382 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
383 </v-flex>
384 </v-layout>
385 </v-flex>
386 </v-layout>
387 </v-container>
388 </v-form>
389 </v-card>
390 </v-flex>
391 </v-container>
392 </v-tab-item>
393 </v-tabs>
394 <div class="loader" v-if="showLoader">
395 <v-progress-circular indeterminate color="white"></v-progress-circular>
396 </div>
397 </v-app>
398 </template>
399
400 <script>
401 import http from "@/Services/http.js";
402 import Util from "@/util";
403 import moment from "moment";
404
405 export default {
406 data: () => ({
407 snackbar: false,
408 y: "top",
409 x: "right",
410 mode: "",
411 timeout: 3000,
412 text: "",
413 loading: false,
414 date: null,
415 search: "",
416 showLoader: false,
417 dialog: false,
418 dialog1: false,
419 valid: true,
420 isActive: true,
421 newActive: false,
422 pagination: {
423 rowsPerPage: 15
424 },
425 date: null,
426 menu1: false,
427 menu: false,
428 menuStart: false,
429 menuEndDate: false,
430 yearRules: [v => !!v || "Year is required"],
431 yearTitleRules: [v => !!v || "Year Title is required"],
432 startDateRules: [v => !!v || "startDate is required"],
433 endDateRules: [v => !!v || "endDate is required"],
434 headers: [
435 {
436 text: "No",
437 align: "center",
438 sortable: false,
439 value: "No"
440 },
441 { text: "Year", value: "year", sortable: false, align: "center" },
442 {
443 text: "Year Title",
444 value: "yearTitle",
445 sortable: false,
446 align: "center"
447 },
448
449 {
450 text: "Starting Date",
451 value: "startingDate",
452 sortable: false,
453 align: "center"
454 },
455 {
456 text: "Ending Date",
457 value: "endingDate",
458 sortable: false,
459 align: "center"
460 },
461 { text: "Action", value: "", sortable: false, align: "center" }
462 ],
463 getAcademicYearList: [],
464 editedIndex: -1,
465 addAcademicYear: {},
466 editedItem: {},
467 token: ""
468 }),
469 methods: {
470 dates: function(date) {
471 return moment(date).format("MMMM DD, YYYY");
472 },
473 getAcademicYear() {
474 this.showLoader = true;
475 http()
476 .get("/getAcademicsList", {
477 headers: { Authorization: "Bearer " + this.token }
478 })
479 .then(response => {
480 this.getAcademicYearList = response.data.data;
481 this.showLoader = false;
482 })
483 .catch(error => {
484 this.showLoader = false;
485 if (error.response.status === 401) {
486 this.$router.replace({ path: "/" });
487 this.$store.dispatch("setToken", null);
488 this.$store.dispatch("Id", null);
489 }
490 });
491 },
492 editItem(item) {
493 this.editedIndex = this.getAcademicYearList.indexOf(item);
494 this.editedItem = Object.assign({}, item);
495 this.editedItem.schoolEventId = item._id;
496 this.dialog = true;
497 },
498 profile(item) {
499 this.editedIndex = this.getAcademicYearList.indexOf(item);
500 this.editedItem = Object.assign({}, item);
501 this.dialog1 = true;
502 },
503
504 deleteItem(item) {
505 let deleteAcademic = {
506 academicId: item._id
507 };
508 http()
509 .delete(
510 "/deleteAcademic",
511 confirm("Are you sure you want to delete this?") && {
512 params: deleteAcademic
513 }
514 )
515 .then(response => {
516 this.snackbar = true;
517 this.text = response.data.message;
518 this.getAcademicYear();
519 })
520 .catch(error => {
521 console.log(error);
522 });
523 },
524 activeTab(type) {
525 switch (type) {
526 case "existing":
527 this.newActive = false;
528 this.isActive = true;
529 break;
530
531 default:
532 this.newActive = true;
533 this.isActive = false;
534 break;
535 }
536 },
537 close() {
538 this.dialog = false;
539 setTimeout(() => {
540 this.editedItem = Object.assign({}, this.defaultItem);
541 this.editedIndex = -1;
542 }, 300);
543 },
544 close1() {
545 this.dialog1 = false;
546 },
547 submit() {
548 if (this.$refs.form.validate()) {
549 this.loading = true;
550 http()
551 .post("/createAcademic", this.addAcademicYear)
552 .then(response => {
553 if ((this.snackbar = true)) {
554 this.text = response.data.message;
555 }
556 this.getAcademicYear();
557 this.clear();
558 this.loading = false;
559 })
560 .catch(error => {
561 if ((this.snackbar = true)) {
562 this.text = error.response.data.message;
563 }
564 this.loading = false;
565 });
566 }
567 },
568 clear() {
569 this.$refs.form.reset();
570 },
571 save() {
572 this.editedItem.academicId = this.editedItem._id;
573 http()
574 .put("/updateAcademic", this.editedItem, {
575 headers: { Authorization: "Bearer " + this.token }
576 })
577 .then(response => {
578 this.snackbar = true;
579 this.text = response.data.message;
580 this.getAcademicYear();
581 this.close();
582 })
583 .catch(error => {
584 console.log(error);
585 });
586 }
587 },
588 mounted() {
589 this.token = this.$store.state.token;
590 this.getAcademicYear();
591 },
592 created() {
593 this.$root.$on("app:search", search => {
594 this.search = search;
595 });
596 },
597 beforeDestroy() {
598 // dont forget to remove the listener
599 this.$root.$off("app:search");
600 }
601 };
602 </script>
603 <style scoped>
604 #td {
605 max-width: 200px;
606 }
607 .active {
608 background-color: gray;
609 color: white !important;
610 }
611 .activebtn {
612 color: black !important;
613 }
614 </style>
src/pages/Administrator/resetPassword.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="login">
3 <v-container fluid fill-height>
4 <v-layout>
5 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
6 <v-toolbar class="fixcolors mt-5" dark>
7 <v-spacer></v-spacer>
8 <v-toolbar-title>Reset Password</v-toolbar-title>
9 <v-spacer></v-spacer>
10 </v-toolbar>
11 <v-card class="elevation-1 pa-3" id="form">
12 <v-card-text>
13 <v-flex xs12 sm8 md8 lg8 offset-sm2>
14 <v-form class="mt-3">
15 <v-select :rules="[rules.required]" label="Select Users" :tems="users"></v-select>
16 <v-select :rules="[rules.required]" label="Select Users Name" :tems="usersName"></v-select>
17 <v-text-field
18 :rules="[rules.required]"
19 v-model="user.oldPassword"
20 label="New Password"
21 ></v-text-field>
22 <v-text-field
23 v-model="user.newPassword"
24 :rules="[rules.required]"
25 label="Re-Password"
26 ></v-text-field>
27 </v-form>
28 </v-flex>
29 </v-card-text>
30 <v-card-actions>
31 <v-flex text-xs-center>
32 <v-btn
33 class="mt-3"
34 round
35 color="black"
36 dark
37 large
38 :loading="loading"
39 @click="reset"
40 >Reset Password</v-btn>
41 </v-flex>
42 </v-card-actions>
43 <v-snackbar
44 :timeout="timeout"
45 :top="y === 'top'"
46 :right="x === 'right'"
47 :vertical="mode === 'vertical'"
48 v-model="snackbar"
49 :color="color"
50 >{{ text }}</v-snackbar>
51 </v-card>
52 </v-flex>
53 </v-layout>
54 </v-container>
55 </v-app>
56 </template>
57 <script>
58 import http from "@/Services/http.js";
59
60 export default {
61 data() {
62 return {
63 snackbar: false,
64 y: "top",
65 x: "right",
66 mode: "",
67 timeout: 4000,
68 text: "",
69 user: {},
70 users: [],
71 usersName: [],
72 e1: true,
73 e2: true,
74 e3: true,
75 loading: false,
76 valid: false,
77 text: "Password Changed",
78 currentPassword: "",
79 newPassword: "",
80 confirmPassword: "",
81 rules: {
82 required: value => !!value || "This password field is Required."
83 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
84 }
85 };
86 },
87 methods: {
88 reset() {
89 var token = this.$store.state.token;
90 http()
91 .put("/schoolChangePassword", {
92 headers: { Authorization: "Bearer " + token }
93 })
94 .then(response => {
95 this.loading = true;
96 if ((this.snackbar = true)) {
97 this.text = "Successfully changed password !!";
98 console.log("snackbar", response.data.message);
99 }
100 setTimeout(() => {
101 this.$router.push("/dashboard");
102 }, 2000);
103 })
104 .catch(err => {
105 // console.log("err====>",err);
106 this.text = "User Not Found or Incorrect currentPassword";
107 this.snackbar = true;
108 this.loading = false;
109 });
110 }
111 },
112 computed: {
113 color() {
114 return this.loading ? "success" : "error";
115 }
116 }
117 };
118 </script>
119 <style scoped>
120 img {
121 position: absolute;
122 top: 13px;
123 left: 50px;
124 }
125 .v-btn--large {
126 padding: 0px 74px;
127 }
128 @media screen and (max-width: 769px) {
129 .v-btn--large {
130 font-size: 14px;
131 height: 44px;
132 padding: 0 32px;
133 }
134 }
135 </style>
136
src/pages/Administrator/role.vue
Diff comments   View file @0065443
File was created 1 =<template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing Role</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add New Role</v-tab>
19
20 <!-- ****** EDITS Role Distribution DETAILS ****** -->
21
22 <v-tab-item>
23 <v-snackbar
24 :timeout="timeout"
25 :top="y === 'top'"
26 :right="x === 'right'"
27 :vertical="mode === 'vertical'"
28 v-model="snackbar"
29 color="success"
30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer>
35 <v-toolbar-title>
36 <h3>Edit Role</h3>
37 </v-toolbar-title>
38 <v-spacer></v-spacer>
39 </v-toolbar>
40 <v-card flat>
41 <v-form ref="form">
42 <v-container fluid>
43 <v-flex xs12 sm12>
44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Role:</label>
47 </v-flex>
48 <v-flex xs8 sm6 class="ml-3">
49 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field>
50 </v-flex>
51 </v-layout>
52 </v-flex>
53 <v-layout>
54 <v-flex xs12 sm10 offset-sm1>
55 <v-card-actions>
56 <v-btn round dark @click.native="close">Cancel</v-btn>
57 <v-spacer></v-spacer>
58 <v-btn round dark @click="save">Save</v-btn>
59 </v-card-actions>
60 </v-flex>
61 </v-layout>
62 </v-container>
63 </v-form>
64 </v-card>
65 </v-flex>
66 </v-dialog>
67
68 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
69
70 <v-data-table
71 :headers="headers"
72 :items="getRole"
73 :pagination.sync="pagination"
74 :search="search"
75 >
76 <template slot="items" slot-scope="props">
77 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td>
78 <td id="tabeleData" class="text-xs-center">{{ props.item.name}}</td>
79 <td id="tabeleData" class="text-xs-center">
80 <span>
81 <img
82 style="cursor:pointer; width:20px; height:18px; "
83 class="mr-5"
84 @click="editItem(props.item)"
85 src="/static/icon/edit1.png"
86 />
87 <img
88 style="cursor:pointer;width:20px; height:20px; "
89 class="mr-5"
90 @click="deleteItem(props.item)"
91 src="/static/icon/delete1.png"
92 />
93 </span>
94 </td>
95 </template>
96 <v-alert
97 slot="no-results"
98 :value="true"
99 color="error"
100 icon="warning"
101 >Your search for "{{ search }}" found no results.</v-alert>
102 </v-data-table>
103 </v-tab-item>
104
105 <!-- ****** ADD ROLE ****** -->
106
107 <v-tab-item>
108 <v-container>
109 <v-snackbar
110 :timeout="timeout"
111 :top="y === 'top'"
112 :right="x === 'right'"
113 :vertical="mode === 'vertical'"
114 v-model="snackbar"
115 color="success"
116 >{{ text }}</v-snackbar>
117 <v-flex xs12 sm8 class="top" offset-sm2>
118 <v-card flat>
119 <v-form ref="form" v-model="valid" lazy-validation>
120 <v-container fluid>
121 <v-flex xs12>
122 <v-layout>
123 <v-flex xs4 class="pt-4 subheading">
124 <label class="right">Role:</label>
125 </v-flex>
126 <v-flex xs8 sm4 class="ml-3">
127 <v-text-field
128 v-model="addrole.name"
129 placeholder="fill your Role"
130 :rules="roleRules"
131 ></v-text-field>
132 </v-flex>
133 </v-layout>
134 </v-flex>
135 <v-layout>
136 <v-flex xs12 sm12>
137 <v-layout>
138 <v-flex xs5>
139 <v-btn @click="clear" round class="right" dark>clear</v-btn>
140 </v-flex>
141 <v-flex xs8 sm4>
142 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
143 </v-flex>
144 </v-layout>
145 </v-flex>
146 </v-layout>
147 </v-container>
148 </v-form>
149 </v-card>
150 </v-flex>
151 </v-container>
152 </v-tab-item>
153 </v-tabs>
154 <div class="loader" v-if="showLoader">
155 <v-progress-circular indeterminate color="white"></v-progress-circular>
156 </div>
157 </v-app>
158 </template>
159
160 <script>
161 import http from "@/Services/http.js";
162 import Util from "@/util";
163
164 export default {
165 data: () => ({
166 snackbar: false,
167 y: "top",
168 x: "right",
169 mode: "",
170 timeout: 3000,
171 text: "",
172 loading: false,
173 search: "",
174 showLoader: false,
175 dialog: false,
176 valid: true,
177 isActive: true,
178 newActive: false,
179 pagination: {
180 rowsPerPage: 15
181 },
182 roleRules: [v => !!v || "Role is required"],
183 headers: [
184 {
185 text: "No",
186 align: "center",
187 sortable: false,
188 value: "No"
189 },
190 { text: "Role", value: "role", sortable: false, align: "center" },
191 { text: "Action", value: "", sortable: false, align: "center" }
192 ],
193 getRole: [],
194 editedIndex: -1,
195 token: "",
196 addrole: {},
197 editedItem: {}
198 }),
199 methods: {
200 getRole() {
201 this.showLoader = true;
202 http()
203 .get("/getRolesList", {
204 headers: { Authorization: "Bearer " + this.token }
205 })
206 .then(response => {
207 this.getRole = response.data.data;
208 this.showLoader = false;
209 })
210 .catch(error => {
211 this.showLoader = false;
212 if (error.response.status === 401) {
213 this.$router.replace({ path: "/" });
214 this.$store.dispatch("setToken", null);
215 this.$store.dispatch("Id", null);
216 }
217 });
218 },
219 editItem(item) {
220 this.editedIndex = this.getRole.indexOf(item);
221 this.editedItem = Object.assign({}, item);
222 this.dialog = true;
223 },
224 deleteItem(item) {
225 let deleteRoleId = {
226 roleId: item._id
227 };
228 http()
229 .delete(
230 "/deleteRole",
231 confirm("Are you sure you want to delete this?") && {
232 params: deleteRoleId
233 },
234 {
235 headers: {
236 Authorization: "Bearer " + this.token
237 }
238 }
239 )
240 .then(response => {
241 this.text = response.data.message;
242 this.getRole();
243 })
244 .catch(error => {
245 console.log(error);
246 });
247 },
248 activeTab(type) {
249 switch (type) {
250 case "existing":
251 this.newActive = false;
252 this.isActive = true;
253 break;
254
255 default:
256 this.newActive = true;
257 this.isActive = false;
258 break;
259 }
260 },
261 close() {
262 this.dialog = false;
263 setTimeout(() => {
264 this.editedItem = Object.assign({}, this.defaultItem);
265 this.editedIndex = -1;
266 }, 300);
267 },
268 // close1() {
269 // this.dialog1 = false;
270 // },
271 submit() {
272 if (this.$refs.form.validate()) {
273 this.loading = true;
274 http()
275 .post("/createRole", this.addrole)
276 .then(response => {
277 this.snackbar = true;
278 this.text = response.data.message;
279 // this.getRole();
280 this.clear();
281 this.loading = false;
282 })
283 .catch(error => {
284 this.snackbar = true;
285 this.text = error.response.data.message;
286 this.loading = false;
287 });
288 }
289 },
290 clear() {
291 this.$refs.form.reset();
292 },
293 save() {
294 (this.editedItem.roleId = this.editedItem._id),
295 http()
296 .put("/updateRole", this.editedItem, {
297 headers: {
298 Authorization: "Bearer " + this.token
299 }
300 })
301 .then(response => {
302 this.text = "Successfully Edit Notification";
303 this.getRole();
304 this.close();
305 })
306 .catch(error => {
307 console.log(error);
308 });
309 }
310 },
311 mounted() {
312 this.token = this.$store.state.token;
313 this.getRole();
314 },
315 created() {
316 this.$root.$on("app:search", search => {
317 this.search = search;
318 });
319 },
320 beforeDestroy() {
321 // dont forget to remove the listener
322 this.$root.$off("app:search");
323 }
324 };
325 </script>
326 <style scoped>
327 #tabeleData {
328 border: 1px solid #dddddd;
329 text-align: left;
330 padding: 8px 0px;
331 max-width: 200px !important;
332 }
333 .active {
334 background-color: gray;
335 color: white !important;
336 }
337 .activebtn {
338 color: black !important;
339 }
340 </style>
src/pages/Administrator/systemAdmin.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing System Admin</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add New System Admin</v-tab>
19 <!-- ****** EDIT System Admin DETAILS ****** -->
20 <v-tab-item>
21 <v-snackbar
22 :timeout="timeout"
23 :top="y === 'top'"
24 :right="x === 'right'"
25 :vertical="mode === 'vertical'"
26 v-model="snackbar"
27 color="success"
28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="1100px" scrollable>
30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit System Admin Profile</v-toolbar-title>
34 <v-spacer></v-spacer>
35 </v-toolbar>
36 <v-card-text style="height: 800px;">
37 <v-layout>
38 <v-flex
39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
41 >
42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
44 <img
45 :src="editedItem.profilePicUrl"
46 v-else-if="editedItem.profilePicUrl && !imageUrl"
47 />
48 <img
49 v-if="imageUrl"
50 :src="imageUrl"
51 height="150"
52 style="border-radius:50%; width:200px"
53 />
54 </v-avatar>
55 <input
56 type="file"
57 style="display:none"
58 ref="image"
59 accept="image/*"
60 @change="onFilePicked"
61 />
62 </v-flex>
63 </v-layout>
64 <v-layout wrap>
65 <v-flex xs12 sm6>
66 <v-layout>
67 <v-flex xs4 sm4 class="pt-4 subheading">
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>
70 </v-flex>
71 <v-flex xs8 sm6 class="ml-3">
72 <v-text-field
73 v-model="editedItem.name"
74 placeholder="fill your full Name"
75 type="text"
76 required
77 ></v-text-field>
78 </v-flex>
79 </v-layout>
80 </v-flex>
81 <v-flex xs12 sm6>
82 <v-layout>
83 <v-flex xs4 sm4 class="pt-4 subheading">
84 <label class="right">Email ID:</label>
85 </v-flex>
86 <v-flex xs8 sm6 class="ml-3">
87 <v-text-field
88 placeholder="fill your email"
89 v-model="editedItem.email"
90 type="text"
91 required
92 ></v-text-field>
93 </v-flex>
94 </v-layout>
95 </v-flex>
96 </v-layout>
97 <v-layout wrap>
98 <v-flex xs12 sm6>
99 <v-layout>
100 <v-flex xs4 sm4 class="pt-4 subheading">
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>
103 </v-flex>
104 <v-flex xs8 sm6 class="ml-3">
105 <v-menu
106 ref="menu"
107 :close-on-content-click="false"
108 v-model="menu2"
109 :nudge-right="40"
110 lazy
111 transition="scale-transition"
112 offset-y
113 full-width
114 min-width="290px"
115 >
116 <v-text-field
117 slot="activator"
118 v-model="editedItem.dob"
119 placeholder="Select date"
120 ></v-text-field>
121 <v-date-picker
122 ref="picker"
123 v-model="editedItem.dob"
124 :max="new Date().toISOString().substr(0, 10)"
125 min="1950-01-01"
126 @input="menu2 = false"
127 ></v-date-picker>
128 </v-menu>
129 </v-flex>
130 </v-layout>
131 </v-flex>
132 <v-flex xs12 sm6>
133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">City:</label>
136 </v-flex>
137 <v-flex xs8 sm6 class="ml-3">
138 <v-text-field
139 v-model="editedItem.city"
140 placeholder="fill your City Name"
141 type="text"
142 required
143 ></v-text-field>
144 </v-flex>
145 </v-layout>
146 </v-flex>
147 </v-layout>
148 <v-layout wrap>
149 <v-flex xs12 sm6>
150 <v-layout>
151 <v-flex xs4 class="pt-4 subheading">
152 <label class="right">State:</label>
153 </v-flex>
154 <v-flex xs8 sm6 class="ml-3">
155 <v-text-field
156 v-model="editedItem.state"
157 placeholder="fill your State Name"
158 type="text"
159 required
160 ></v-text-field>
161 </v-flex>
162 </v-layout>
163 </v-flex>
164 <v-flex xs12 sm6>
165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">PinCode:</label>
168 </v-flex>
169 <v-flex xs8 sm6 class="ml-3">
170 <v-text-field
171 v-model="editedItem.pincode"
172 placeholder="fill your pincode"
173 type="number"
174 required
175 ></v-text-field>
176 </v-flex>
177 </v-layout>
178 </v-flex>
179 </v-layout>
180 <v-layout wrap>
181 <v-flex xs12 sm6>
182 <v-layout>
183 <v-flex xs4 class="pt-4 subheading">
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>
186 </v-flex>
187 <v-flex xs8 sm6 class="ml-3">
188 <v-text-field
189 v-model="editedItem.mobileNo"
190 placeholder="fill your MobileNo"
191 type="number"
192 required
193 ></v-text-field>
194 </v-flex>
195 </v-layout>
196 </v-flex>
197 <v-flex xs12 sm6>
198 <v-layout>
199 <v-flex xs4 class="pt-4 subheading">
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>
202 </v-flex>
203 <v-flex xs8 sm6 class="ml-3">
204 <v-autocomplete
205 v-model="editedItem.country"
206 :items="countries"
207 placeholder="Select Country Name"
208 required
209 ></v-autocomplete>
210 </v-flex>
211 </v-layout>
212 </v-flex>
213 </v-layout>
214 <v-layout wrap>
215 <v-flex xs12 sm6>
216 <v-layout>
217 <v-flex xs4 class="pt-4 subheading">
218 <label class="right">Join Date:</label>
219 </v-flex>
220 <v-flex xs8 sm6 class="ml-3">
221 <v-menu
222 ref="menu"
223 :close-on-content-click="false"
224 v-model="menu3"
225 :nudge-right="40"
226 lazy
227 transition="scale-transition"
228 offset-y
229 full-width
230 min-width="290px"
231 >
232 <v-text-field
233 slot="activator"
234 v-model="editedItem.joinDate"
235 placeholder="Select date"
236 ></v-text-field>
237 <v-date-picker
238 ref="picker"
239 v-model="editedItem.joinDate"
240 :max="new Date().toISOString().substr(0, 10)"
241 min="1950-01-01"
242 @input="menu3 = false"
243 ></v-date-picker>
244 </v-menu>
245 </v-flex>
246 </v-layout>
247 </v-flex>
248 <v-flex xs12 sm6>
249 <v-layout>
250 <v-flex xs4 class="pt-4 subheading">
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>
253 </v-flex>
254 <v-flex xs8 sm6 class="ml-3">
255 <v-text-field
256 label="Select Image"
257 @click="pickFile"
258 v-model="imageName"
259 append-icon="attach_file"
260 ></v-text-field>
261 </v-flex>
262 </v-layout>
263 </v-flex>
264 </v-layout>
265 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
266 <v-flex xs12 sm12>
267 <v-layout>
268 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
269 <label class="right pr-2">Present Address:</label>
270 </v-flex>
271 <v-flex xs8 sm10>
272 <v-text-field
273 name="input-4-3"
274 v-model="editedItem.presentAddress"
275 placeholder="fill Your present Address"
276 required
277 ></v-text-field>
278 </v-flex>
279 </v-layout>
280 </v-flex>
281 <v-flex xs12 sm12>
282 <v-layout>
283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
284 <label class="pr-2">Permanent Address:</label>
285 </v-flex>
286 <v-flex xs12 sm10>
287 <v-text-field
288 name="input-4-3"
289 v-model="editedItem.permanentAddress"
290 placeholder="fill Your Permanent Address"
291 required
292 ></v-text-field>
293 </v-flex>
294 </v-layout>
295 </v-flex>
296 </v-layout>
297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
298 <v-flex xs12 sm12>
299 <v-layout>
300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
301 <label class>Present Address:</label>
302 </v-flex>
303 </v-layout>
304 <v-layout>
305 <v-flex xs12 sm12>
306 <v-textarea
307 name="input-4-3"
308 v-model="editedItem.presentAddress"
309 placeholder="fill Your present Address"
310 required
311 ></v-textarea>
312 </v-flex>
313 </v-layout>
314 </v-flex>
315 <v-flex xs12 sm12>
316 <v-layout>
317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
318 <label>Permanent Address:</label>
319 </v-flex>
320 </v-layout>
321 <v-layout>
322 <v-flex xs12 sm12>
323 <v-textarea
324 name="input-4-3"
325 v-model="editedItem.permanentAddress"
326 placeholder="fill Your Permanent Address"
327 required
328 ></v-textarea>
329 </v-flex>
330 </v-layout>
331 </v-flex>
332 </v-layout>
333 <v-layout>
334 <v-flex xs12 sm12>
335 <v-layout>
336 <v-flex xs6>
337 <v-btn round dark @click.native="close">Cancel</v-btn>
338 </v-flex>
339 <v-flex xs6>
340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
341 </v-flex>
342 </v-layout>
343 </v-flex>
344 </v-layout>
345 </v-card-text>
346 </v-card>
347 </v-dialog>
348
349 <!-- ****** PROFILE VIEW System Admin DETAILS ****** -->
350
351 <v-dialog v-model="dialog1" max-width="600px" scrollable>
352 <v-card>
353 <v-toolbar color="grey lighten-2" flat>
354 <v-spacer></v-spacer>
355 <v-toolbar-title>
356 <h3> System Admin</h3>
357 </v-toolbar-title>
358 <v-spacer></v-spacer>
359 <v-icon @click="close1">close</v-icon>
360 </v-toolbar>
361 <v-card-text style="height: 700px;">
362 <v-container grid-list-md>
363 <v-layout wrap>
364 <v-flex>
365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="160px">
367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
369 </v-avatar>
370 </v-flex>
371 <v-layout>
372 <v-flex xs5 sm6>
373 <h5 class="right my-1">
374 <b>Full Name:</b>
375 </h5>
376 </v-flex>
377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.name }}</h5>
379 </v-flex>
380 </v-layout>
381 <v-layout>
382 <v-flex xs5 sm6>
383 <h5 class="right my-1">
384 <b>Email:</b>
385 </h5>
386 </v-flex>
387 <v-flex sm6 xs8>
388 <h5 class="my-1">{{ editedItem.email }}</h5>
389 </v-flex>
390 </v-layout>
391 <v-layout>
392 <v-flex xs5 sm6>
393 <h5 class="right my-1">
394 <b>City:</b>
395 </h5>
396 </v-flex>
397 <v-flex sm6 xs8>
398 <h5 class="my-1">{{ editedItem.city }}</h5>
399 </v-flex>
400 </v-layout>
401 <v-layout>
402 <v-flex xs5 sm6>
403 <h5 class="right my-1">
404 <b>State:</b>
405 </h5>
406 </v-flex>
407 <v-flex sm6 xs8>
408 <h5 class="my-1">{{ editedItem.state }}</h5>
409 </v-flex>
410 </v-layout>
411 <v-layout>
412 <v-flex xs5 sm6>
413 <h5 class="right my-1">
414 <b>Country:</b>
415 </h5>
416 </v-flex>
417 <v-flex sm6 xs8>
418 <h5 class="my-1">{{ editedItem.country }}</h5>
419 </v-flex>
420 </v-layout>
421 <v-layout>
422 <v-flex xs5 sm6>
423 <h5 class="right my-1">
424 <b>Pincode:</b>
425 </h5>
426 </v-flex>
427 <v-flex sm6 xs8>
428 <h5 class="my-1">{{ editedItem.pincode }}</h5>
429 </v-flex>
430 </v-layout>
431 <v-layout>
432 <v-flex xs5 sm6>
433 <h5 class="right my-1">
434 <b>Mobile No:</b>
435 </h5>
436 </v-flex>
437 <v-flex sm6 xs8>
438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
439 </v-flex>
440 </v-layout>
441 <v-layout>
442 <v-flex xs5 sm6>
443 <h5 class="right my-1">
444 <b>Join Date:</b>
445 </h5>
446 </v-flex>
447 <v-flex sm6 xs8>
448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
449 </v-flex>
450 </v-layout>
451 <v-layout>
452 <v-flex xs5 sm6>
453 <h5 class="right my-1">
454 <b>D.O.B :</b>
455 </h5>
456 </v-flex>
457 <v-flex sm6 xs8>
458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
459 </v-flex>
460 </v-layout>
461 <v-layout>
462 <v-flex xs6 sm6>
463 <h5 class="right my-1">
464 <b>Permanent Address:</b>
465 </h5>
466 </v-flex>
467 <v-flex sm6 xs8>
468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
469 </v-flex>
470 </v-layout>
471 <v-layout>
472 <v-flex xs6 sm6>
473 <h5 class="right my-1">
474 <b>present Address:</b>
475 </h5>
476 </v-flex>
477 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
479 </v-flex>
480 </v-layout>
481 </v-flex>
482 </v-layout>
483 </v-container>
484 </v-card-text>
485 </v-card>
486 </v-dialog>
487 <v-snackbar
488 :timeout="timeout"
489 :top="y === 'top'"
490 :right="x === 'right'"
491 :vertical="mode === 'vertical'"
492 v-model="snackbar"
493 color="success"
494 >{{ text }}</v-snackbar>
495
496 <!-- ****** EXISTING System Admin TABLE ****** -->
497
498 <v-data-table
499 :headers="headers"
500 :items="desserts"
501 :pagination.sync="pagination"
502 :search="search"
503 >
504 <template slot="items" slot-scope="props">
505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
506 <td id="td" class="text-xs-center">
507 <v-avatar>
508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
510 </v-avatar>
511 </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>
514 <td id="td" class="text-xs-center">{{ props.item.role }}</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> -->
517 <td class="text-xs-center">
518 <span>
519 <img
520 style="cursor:pointer; width:25px; height:18px; "
521 class="mr-5"
522 @click="profile(props.item)"
523 src="/static/icon/eye1.png"
524 />
525 <img
526 style="cursor:pointer; width:20px; height:18px; "
527 class="mr-5"
528 @click="editItem(props.item)"
529 src="/static/icon/edit1.png"
530 />
531 <img
532 style="cursor:pointer;width:20px; height:20px; "
533 class="mr-5"
534 @click="deleteItem(props.item)"
535 src="/static/icon/delete1.png"
536 />
537 </span>
538 </td>
539 </template>
540 <v-alert
541 slot="no-results"
542 :value="true"
543 color="error"
544 icon="warning"
545 >Your search for "{{ search }}" found no results.</v-alert>
546 </v-data-table>
547 </v-tab-item>
548
549 <!-- ****** Add System Admin Data****** -->
550 <v-tab-item>
551 <v-container fluid>
552 <v-snackbar
553 :timeout="timeout"
554 :top="y === 'top'"
555 :right="x === 'right'"
556 :vertical="mode === 'vertical'"
557 v-model="snackbar"
558 color="success"
559 >{{ text }}</v-snackbar>
560 <v-flex xs12 sm12 class="my-4">
561 <v-card flat>
562 <v-form ref="form" v-model="valid" lazy-validation>
563 <v-container fluid>
564 <v-layout>
565 <v-flex
566 xs12
567 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
568 >
569 <v-avatar size="100px">
570 <img src="/static/icon/user.png" v-if="!imageUrl" />
571 </v-avatar>
572 <img
573 :src="imageUrl"
574 height="150"
575 v-if="imageUrl"
576 style="border-radius:50%; width:200px"
577 />
578 </v-flex>
579 </v-layout>
580 <v-layout>
581 <v-flex xs12 sm6>
582 <v-layout>
583 <v-flex xs4 class="pt-4 subheading">
584 <label class="right hidden-sm-only hidden-xs-only">Name:</label>
585 <label
586 class="right hidden-lg-only hidden-xl-only hidden-md-only"
587 >Name</label>
588 </v-flex>
589 <v-flex xs8 class="ml-3">
590 <v-text-field
591 v-model="addSystemAdmin.name"
592 placeholder="fill your full Name"
593 name="name"
594 type="text"
595 :rules="nameRules"
596 required
597 ></v-text-field>
598 </v-flex>
599 </v-layout>
600 </v-flex>
601 <v-flex xs12 sm6>
602 <v-layout>
603 <v-flex xs4 class="pt-4 subheading">
604 <label class="right">Email ID:</label>
605 </v-flex>
606 <v-flex xs8 class="ml-3">
607 <v-text-field
608 placeholder="fill your email"
609 :rules="emailRules"
610 v-model="addSystemAdmin.email"
611 type="text"
612 name="email"
613 required
614 ></v-text-field>
615 </v-flex>
616 </v-layout>
617 </v-flex>
618 </v-layout>
619 <v-layout>
620 <v-flex xs12 sm6>
621 <v-layout>
622 <v-flex xs4 sm4 class="pt-4 subheading">
623 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
624 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
625 </v-flex>
626 <v-flex xs8 class="ml-3">
627 <v-menu
628 ref="menu"
629 :close-on-content-click="false"
630 v-model="menu"
631 :nudge-right="40"
632 lazy
633 transition="scale-transition"
634 offset-y
635 full-width
636 min-width="290px"
637 >
638 <v-text-field
639 slot="activator"
640 :rules="dateRules"
641 v-model="addSystemAdmin.date"
642 placeholder="Select date"
643 ></v-text-field>
644 <v-date-picker
645 ref="picker"
646 v-model="addSystemAdmin.date"
647 :max="new Date().toISOString().substr(0, 10)"
648 min="1950-01-01"
649 @input="menu = false"
650 ></v-date-picker>
651 </v-menu>
652 </v-flex>
653 </v-layout>
654 </v-flex>
655 <v-flex xs12 sm6>
656 <v-layout>
657 <v-flex xs4 class="pt-4 subheading">
658 <label class="right">Gender:</label>
659 </v-flex>
660 <v-flex xs8 class="ml-3">
661 <v-select
662 v-model="addSystemAdmin.gender"
663 :items="gender"
664 label="Select your City Name"
665 :rules="cityRules"
666 required
667 ></v-select>
668 </v-flex>
669 </v-layout>
670 </v-flex>
671 </v-layout>
672 <v-layout>
673 <v-flex xs12 sm6>
674 <v-layout>
675 <v-flex xs4 class="pt-4 subheading">
676 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
677 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
678 </v-flex>
679 <v-flex xs8 class="ml-3">
680 <v-text-field
681 v-model="addSystemAdmin.mobileNo"
682 placeholder="fill your Mobile No."
683 name="mobileNo"
684 type="number"
685 :rules="mobileNoRules"
686 required
687 ></v-text-field>
688 </v-flex>
689 </v-layout>
690 </v-flex>
691 <v-flex xs12 sm6>
692 <v-layout>
693 <v-flex xs4 class="pt-4 subheading">
694 <label class="right hidden-xs-only hidden-sm-only">Religion:</label>
695 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Religion:</label>
696 </v-flex>
697 <v-flex xs8 class="ml-3">
698 <v-text-field
699 v-model="addSystemAdmin.religion"
700 :rules="religion"
701 placeholder="fill your Religion"
702 required
703 ></v-text-field>
704 </v-flex>
705 </v-layout>
706 </v-flex>
707 </v-layout>
708 <v-layout>
709 <v-flex xs12 sm6>
710 <v-layout>
711 <v-flex xs4 class="pt-4 subheading">
712 <label class="right">Join Date:</label>
713 </v-flex>
714 <v-flex xs8 class="ml-3">
715 <v-menu
716 ref="menu1"
717 :close-on-content-click="false"
718 v-model="menu1"
719 :nudge-right="40"
720 lazy
721 transition="scale-transition"
722 offset-y
723 full-width
724 min-width="290px"
725 >
726 <v-text-field
727 slot="activator"
728 :rules="joinDateRules"
729 v-model="addSystemAdmin.joinDate"
730 placeholder="Select date"
731 ></v-text-field>
732 <v-date-picker
733 ref="picker"
734 v-model="addSystemAdmin.joinDate"
735 :max="new Date().toISOString().substr(0, 10)"
736 min="1950-01-01"
737 @input="menu1 = false"
738 ></v-date-picker>
739 </v-menu>
740 </v-flex>
741 </v-layout>
742 </v-flex>
743 <v-flex xs12 sm6>
744 <v-layout>
745 <v-flex xs4 class="pt-4 subheading">
746 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
747 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
748 </v-flex>
749 <v-flex xs8 class="ml-3">
750 <v-text-field
751 label="Select Image"
752 @click="pickFile"
753 v-model="imageName"
754 append-icon="attach_file"
755 ></v-text-field>
756 <input
757 type="file"
758 style="display:none"
759 ref="image"
760 accept="image/*"
761 @change="onFilePicked"
762 />
763 </v-flex>
764 </v-layout>
765 </v-flex>
766 </v-layout>
767 <v-layout>
768 <v-flex xs12 sm6>
769 <v-layout>
770 <v-flex xs4 class="pt-4 subheading">
771 <label class="right">Username:</label>
772 </v-flex>
773 <v-flex xs8 class="ml-3">
774 <v-text-field
775 v-model="addSystemAdmin.username"
776 placeholder="fill your Username"
777 name="state"
778 :rules="userNameRules"
779 required
780 ></v-text-field>
781 </v-flex>
782 </v-layout>
783 </v-flex>
784 <v-flex xs12 sm6>
785 <v-layout>
786 <v-flex xs4 class="pt-4 subheading">
787 <label class="right">Password:</label>
788 </v-flex>
789 <v-flex xs8 class="ml-3">
790 <v-text-field
791 v-model="addSystemAdmin.Password"
792 placeholder="fill your Password"
793 :rules="password"
794 required
795 ></v-text-field>
796 </v-flex>
797 </v-layout>
798 </v-flex>
799 </v-layout>
800 <v-layout class="hidden-xs-only hidden-sm-only">
801 <v-flex xs12 sm6>
802 <v-layout>
803 <v-flex xs4 md4 class="pt-4 subheading">
804 <label class="right">Address:</label>
805 </v-flex>
806 <v-flex xs8 md8 class="ml-3">
807 <v-text-field
808 name="input-4-3"
809 v-model="addSystemAdmin.address"
810 :rules="address"
811 placeholder="fill Your Address"
812 required
813 ></v-text-field>
814 </v-flex>
815 </v-layout>
816 </v-flex>
817 </v-layout>
818 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
819 <v-flex xs12 sm12>
820 <v-layout>
821 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
822 <label class>Addres:</label>
823 </v-flex>
824 </v-layout>
825 <v-layout>
826 <v-flex xs12 sm12>
827 <v-textarea
828 name="input-4-3"
829 v-model="addSystemAdmin.address"
830 :rules="address"
831 placeholder="fill Your present Address"
832 required
833 ></v-textarea>
834 </v-flex>
835 </v-layout>
836 </v-flex>
837 <!-- <v-flex xs12 sm12>
838 <v-layout>
839 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
840 <label>Permanent Address:</label>
841 </v-flex>
842 </v-layout>
843 <v-layout>
844 <v-flex xs12 sm12>
845 <v-textarea
846 name="input-4-3"
847 v-model="addSystemAdmin.permanentAddress"
848 :rules="permanentAddress"
849 placeholder="fill Your Permanent Address"
850 required
851 ></v-textarea>
852 </v-flex>
853 </v-layout>
854 </v-flex> -->
855 </v-layout>
856 <v-layout class="mx-2">
857 <v-flex xs12 sm12>
858 <v-layout>
859 <v-flex xs6>
860 <v-btn @click="clear" round dark>clear</v-btn>
861 </v-flex>
862 <v-flex xs6>
863 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
864 </v-flex>
865 </v-layout>
866 </v-flex>
867 </v-layout>
868 </v-container>
869 </v-form>
870 </v-card>
871 </v-flex>
872 </v-container>
873 </v-tab-item>
874 </v-tabs>
875 <div class="loader" v-if="showLoader">
876 <v-progress-circular indeterminate color="white"></v-progress-circular>
877 </div>
878 </v-app>
879 </template>
880
881 <script>
882 import http from "@/Services/http.js";
883 import moment from "moment";
884
885 export default {
886 data: () => ({
887 component: "report-generate",
888 snackbar: false,
889 y: "top",
890 x: "right",
891 mode: "",
892 timeout: 3000,
893 text: "",
894 showLoader: false,
895 loading: false,
896 date: null,
897 search: "",
898 menu: false,
899 menu1: false,
900 menu2: false,
901 menu3: false,
902 dialog: false,
903 dialog1: false,
904 valid: true,
905 isActive: true,
906 newActive: false,
907 pagination: {
908 rowsPerPage: 15
909 },
910 imageData: {},
911 imageName: "",
912 imageUrl: "",
913 imageFile: "",
914 nameRules: [v => !!v || " Full Name is required"],
915 dateRules: [v => !!v || " DOB is required"],
916 cityRules: [v => !!v || " City Name is required"],
917 password: [v => !!v || " Password is required"],
918 religion: [v => !!v || "Religion Name is required"],
919 permanentAddress: [v => !!v || " Permanent Address is required"],
920 address: [v => !!v || "Address is required"],
921 mobileNoRules: [v => !!v || "Mobile Number is required"],
922 userNameRules: [v => !!v || "Username Name is required"],
923 joinDateRules: [v => !!v || " Join Date is required"],
924 errorMessages: "",
925 emailRules: [
926 v => !!v || "E-mail is required",
927 v =>
928 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
929 "E-mail must be valid"
930 ],
931 countries: [],
932 headers: [
933 {
934 text: "No",
935 align: "center",
936 sortable: false,
937 value: "No"
938 },
939 {
940 text: "Profile Pic",
941 value: "profilePicUrl",
942 sortable: false,
943 align: "center"
944 },
945 { text: "Name", value: "name", sortable: false, align: "center" },
946 { text: "Email", value: "email", sortable: false, align: "center" },
947 { text: "Role", value: "role", sortable: false, align: "center" },
948 {
949 text: "Status",
950 value: "status",
951 sortable: false,
952 align: "center"
953 },
954 { text: "Action", value: "", sortable: false, align: "center" }
955 ],
956 gender:['Male','Female'],
957 desserts: [],
958 editedIndex: -1,
959 upload: "",
960 editedItem: {},
961 addSystemAdmin: {},
962 }),
963 watch: {
964 menu(val) {
965 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
966 },
967 menu1(val) {
968 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
969 }
970 },
971 methods: {
972 save(date) {
973 this.$refs.menu.save(date);
974 },
975 save(date) {
976 this.$refs.menu1.save(date);
977 },
978 pickFile() {
979 this.$refs.image.click();
980 },
981 onFilePicked(e) {
982 // console.log(e)
983 const files = e.target.files;
984 this.upload = e.target.files[0];
985 console.log("imageData-upload========>", this.upload);
986 if (files[0] !== undefined) {
987 this.imageName = files[0].name;
988 if (this.imageName.lastIndexOf(".") <= 0) {
989 return;
990 }
991 const fr = new FileReader();
992 fr.readAsDataURL(files[0]);
993 fr.addEventListener("load", () => {
994 this.imageUrl = fr.result;
995 this.imageFile = files[0]; // this is an image file that can be sent to server...
996 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
997 // console.log("upload=======>", this.imageData.imageUrl);
998 console.log("imageFile", this.imageUrl);
999 });
1000 } else {
1001 this.imageName = "";
1002 this.imageFile = "";
1003 this.imageUrl = "";
1004 }
1005 },
1006 dates: function(date) {
1007 return moment(date).format("MMMM DD, YYYY");
1008 },
1009 getSystemAdminList() {
1010 this.showLoader = true;
1011 var token = this.$store.state.token;
1012 http()
1013 .get("/getTeachersList", {
1014 headers: { Authorization: "Bearer " + token }
1015 })
1016 .then(response => {
1017 this.desserts = response.data.data;
1018 this.showLoader = false;
1019 // console.log("getTeacherList=====>",this.desserts)
1020 })
1021 .catch(error => {
1022 this.showLoader = false;
1023 if (error.response.status === 401) {
1024 this.$router.replace({ path: "/" });
1025 this.$store.dispatch("setToken", null);
1026 this.$store.dispatch("Id", null);
1027 }
1028 });
1029 },
1030 editItem(item) {
1031 this.editedIndex = this.desserts.indexOf(item);
1032 this.editedItem = Object.assign({}, item);
1033 this.editedItem.dob =
1034 this.editedItem.dob != undefined
1035 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1036 : (this.editedItem.dob = "");
1037 this.editedItem.joinDate =
1038 this.editedItem.joinDate != undefined
1039 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1040 0,
1041 10
1042 ))
1043 : (this.editedItem.joinDate = "");
1044
1045 this.dialog = true;
1046 },
1047 profile(item) {
1048 this.editedIndex = this.desserts.indexOf(item);
1049 this.editedItem = Object.assign({}, item);
1050 this.dialog1 = true;
1051 },
1052 deleteItem(item) {
1053 let deleteTeachers = {
1054 teacherId: item._id
1055 };
1056 // console.log("deleteUers",deleteTeachers)
1057 http()
1058 .delete(
1059 "/deleteTeacher",
1060 confirm("Are you sure you want to delete this?") && {
1061 params: deleteTeachers
1062 }
1063 )
1064 .then(response => {
1065 // console.log("deleteUers",deleteTeachers)
1066 if ((this.snackbar = true)) {
1067 this.text = "Successfully delete Existing Teacher";
1068 }
1069 this.getSystemAdminList();
1070 })
1071 .catch(error => {
1072 console.log(error);
1073 });
1074 },
1075 activeTab(type) {
1076 switch (type) {
1077 case "existing":
1078 this.newActive = false;
1079 this.isActive = true;
1080 break;
1081
1082 default:
1083 this.newActive = true;
1084 this.isActive = false;
1085 break;
1086 }
1087 },
1088 close() {
1089 this.dialog = false;
1090 setTimeout(() => {
1091 this.editedItem = Object.assign({}, this.defaultItem);
1092 this.editedIndex = -1;
1093 }, 300);
1094 },
1095 close1() {
1096 this.dialog1 = false;
1097 },
1098 submit() {
1099 if (this.$refs.form.validate()) {
1100 let addTeacher = {
1101 // name: this.addTeachers.name,
1102 // email: this.addTeachers.email,
1103 // role: this.addTeachers.role,
1104 // dob: this.addTeachers.date,
1105 // city: this.addTeachers.city,
1106 // pincode: this.addTeachers.pincode,
1107 // country: this.addTeachers.country,
1108 // permanentAddress: this.addTeachers.permanentAddress,
1109 // presentAddress: this.addTeachers.presentAddress,
1110 // mobileNo: this.addTeachers.mobileNo,
1111 // state: this.addTeachers.state,
1112 // joinDate: this.addTeachers.joinDate
1113 };
1114 if (this.imageUrl) {
1115 var str = this.imageUrl;
1116 const [baseUrl, imageUrl] = str.split(/,/);
1117 addTeacher.upload = imageUrl;
1118 }
1119 this.loading = true;
1120 http()
1121 .post("/createTeacher", addTeacher)
1122 .then(response => {
1123 this.imageUrl = "";
1124 this.getTeacherList();
1125 this.snackbar = true;
1126 this.text = "New Teacher added successfully";
1127 this.clear();
1128 this.loading = false;
1129 })
1130 .catch(error => {
1131 // console.log(error);
1132 if ((this.snackbar = true)) {
1133 this.text = error.response.data.message;
1134 }
1135 this.loading = false;
1136 });
1137 }
1138 },
1139 clear() {
1140 this.$refs.form.reset();
1141 this.imageUrl = "";
1142 },
1143 save() {
1144 this.loading = true;
1145 let editTeacher = {};
1146 if (this.imageUrl) {
1147 var str = this.imageUrl;
1148 const [baseUrl, imageUrl] = str.split(/,/);
1149 editTeacher.upload = imageUrl;
1150 }
1151 http()
1152 .put("/updateTeacher", editTeacher)
1153 .then(response => {
1154 console.log("editTeacher", editTeacher);
1155 this.snackbar = true;
1156 this.text = "Successfully Edit Existing Teacher";
1157 this.loading = false;
1158 this.getTeacherList();
1159 this.close();
1160 })
1161 .catch(error => {
1162 console.log(error);
1163 this.loading = false;
1164 });
1165 }
1166 },
1167 mounted() {
1168 // this.getSystemAdminList();
1169 },
1170 created() {
1171 this.$root.$on("app:search", search => {
1172 this.search = search;
1173 });
1174 },
1175 beforeDestroy() {
1176 // dont forget to remove the listener
1177 this.$root.$off("app:search");
1178 }
1179 };
1180 </script>
1181 <style scoped>
1182 .active {
1183 background-color: gray;
1184 color: white !important;
1185 }
1186 .activebtn {
1187 color: black !important;
1188 }
1189 </style>
src/pages/Exam/examSchedule.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Exam Schedule</v-tab> 10 >Existing Exam Schedule</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add Exam Schedule</v-tab> 18 >Add Exam Schedule</v-tab>
19 19
20 <!-- ****** Edit Exam Schedule****** --> 20 <!-- ****** Edit Exam Schedule****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="800px" scrollable> 31 <v-dialog v-model="dialog" max-width="800px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Exam Schedule</h3> 36 <h3>Edit Exam Schedule</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:670px;"> 40 <v-card-text style="height:670px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex xs12 sm12> 44 <v-flex xs12 sm12>
45 <v-layout> 45 <v-layout>
46 <v-flex xs4 class="pt-4 subheading"> 46 <v-flex xs4 class="pt-4 subheading">
47 <label class="right">Exam Name:</label> 47 <label class="right">Exam Name:</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs5 class="ml-3"> 49 <v-flex xs5 class="ml-3">
50 <v-select 50 <v-select
51 :rules="examNameRules" 51 :rules="examNameRules"
52 :items="examList" 52 :items="examList"
53 v-model="editedItem.examName" 53 v-model="editedItem.examName"
54 label="Select your Exam Name" 54 label="Select your Exam Name"
55 item-text="examName" 55 item-text="examName"
56 item-value="examName" 56 item-value="examName"
57 ></v-select> 57 ></v-select>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 </v-flex> 60 </v-flex>
61 <v-flex xs12 sm12> 61 <v-flex xs12 sm12>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading"> 63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right">Class:</label> 64 <label class="right">Class:</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs5 class="ml-3"> 66 <v-flex xs5 class="ml-3">
67 <v-select 67 <v-select
68 v-model="editedItem.classId" 68 v-model="editedItem.classId"
69 label="Select your Class" 69 label="Select your Class"
70 type="text" 70 type="text"
71 :items="classList" 71 :items="classList"
72 item-text="classNum" 72 item-text="classNum"
73 item-value="_id" 73 item-value="_id"
74 :rules="classRules"
75 @change="getSections(editedItem.classId)" 74 @change="getSections(editedItem.classId)"
76 required 75 required
77 ></v-select> 76 ></v-select>
78 </v-flex> 77 </v-flex>
79 </v-layout> 78 </v-layout>
80 </v-flex> 79 </v-flex>
81 <v-flex xs12 sm12> 80 <v-flex xs12 sm12>
82 <v-layout> 81 <v-layout>
83 <v-flex xs4 class="pt-4 subheading"> 82 <v-flex xs4 class="pt-4 subheading">
84 <label class="right">Section:</label> 83 <label class="right">Section:</label>
85 </v-flex> 84 </v-flex>
86 <v-flex xs5 class="ml-3"> 85 <v-flex xs5 class="ml-3">
87 <v-select 86 <v-select
88 :items="addSection" 87 :items="addSection"
89 label="Select your section" 88 label="Select your section"
90 v-model="editedItem.sectionId" 89 v-model="editedItem.sectionId"
91 item-text="name" 90 item-text="name"
92 item-value="_id" 91 item-value="_id"
93 name="Select Section" 92 name="Select Section"
94 :rules="sectionRules"
95 required 93 required
96 ></v-select> 94 ></v-select>
97 </v-flex> 95 </v-flex>
98 </v-layout> 96 </v-layout>
99 </v-flex> 97 </v-flex>
100 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
101 <v-layout> 99 <v-layout>
102 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
103 <label class="right">Subject Name:</label> 101 <label class="right">Subject Name:</label>
104 </v-flex> 102 </v-flex>
105 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
106 <v-select 104 <v-select
107 :items="subjects" 105 :items="subjects"
108 label="Select your Subject Name" 106 label="Select your Subject Name"
109 v-model="editedItem.subjectName" 107 v-model="editedItem.subjectName"
110 item-text="subjectName" 108 item-text="subjectName"
111 item-value="subjectName" 109 item-value="subjectName"
112 name="Select Section" 110 name="Select Section"
113 :rules="sectionRules"
114 required 111 required
115 ></v-select> 112 ></v-select>
116 </v-flex> 113 </v-flex>
117 </v-layout> 114 </v-layout>
118 </v-flex> 115 </v-flex>
119 <v-flex xs12 sm12> 116 <v-flex xs12 sm12>
120 <v-layout> 117 <v-layout>
121 <v-flex xs4 class="pt-4 subheading"> 118 <v-flex xs4 class="pt-4 subheading">
122 <label class="right">Date:</label> 119 <label class="right">Date:</label>
123 </v-flex> 120 </v-flex>
124 <v-flex xs5 class="ml-3"> 121 <v-flex xs5 class="ml-3">
125 <v-menu 122 <v-menu
126 ref="editDate" 123 ref="editDate"
127 :close-on-content-click="false" 124 :close-on-content-click="false"
128 v-model="editDate" 125 v-model="editDate"
129 :nudge-right="40" 126 :nudge-right="40"
130 :return-value.sync="editDate" 127 :return-value.sync="editDate"
131 lazy 128 lazy
132 transition="scale-transition" 129 transition="scale-transition"
133 offset-y 130 offset-y
134 full-width 131 full-width
135 min-width="290px" 132 min-width="290px"
136 > 133 >
137 <v-text-field 134 <v-text-field
138 slot="activator" 135 slot="activator"
139 v-model="editedItem.date" 136 v-model="editedItem.date"
140 label="Select Date" 137 label="Select Date"
141 append-icon="event" 138 append-icon="event"
142 readonly 139 readonly
143 ></v-text-field> 140 ></v-text-field>
144 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> 141 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
145 </v-menu> 142 </v-menu>
146 </v-flex> 143 </v-flex>
147 </v-layout> 144 </v-layout>
148 </v-flex> 145 </v-flex>
149 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
150 <v-layout> 147 <v-layout>
151 <v-flex xs4 class="pt-4 subheading"> 148 <v-flex xs4 class="pt-4 subheading">
152 <label class="right">Time From:</label> 149 <label class="right">Time From:</label>
153 </v-flex> 150 </v-flex>
154 <v-flex xs5 class="ml-3"> 151 <v-flex xs5 class="ml-3">
155 <v-menu 152 <v-menu
156 ref="menuEdit" 153 ref="menuEdit"
157 :close-on-content-click="false" 154 :close-on-content-click="false"
158 v-model="menuEdit" 155 v-model="menuEdit"
159 :nudge-right="40" 156 :nudge-right="40"
160 :return-value.sync="editedItem.timeFrom" 157 :return-value.sync="editedItem.timeFrom"
161 lazy 158 lazy
162 transition="scale-transition" 159 transition="scale-transition"
163 offset-y 160 offset-y
164 full-width 161 full-width
165 max-width="290px" 162 max-width="290px"
166 min-width="290px" 163 min-width="290px"
167 > 164 >
168 <v-text-field 165 <v-text-field
169 slot="activator" 166 slot="activator"
170 v-model="editedItem.timeFrom" 167 v-model="editedItem.timeFrom"
171 label="Select your time From" 168 label="Select your time From"
172 append-icon="access_time" 169 append-icon="access_time"
173 :rules="timeInRules"
174 ></v-text-field> 170 ></v-text-field>
175 <v-time-picker 171 <v-time-picker
176 v-model="editedItem.timeIn" 172 v-model="editedItem.timeIn"
177 @change="$refs.menuEdit.save(editedItem.timeIn)" 173 @change="$refs.menuEdit.save(editedItem.timeIn)"
178 ></v-time-picker> 174 ></v-time-picker>
179 </v-menu> 175 </v-menu>
180 </v-flex> 176 </v-flex>
181 </v-layout> 177 </v-layout>
182 </v-flex> 178 </v-flex>
183 <v-flex xs12 sm12> 179 <v-flex xs12 sm12>
184 <v-layout> 180 <v-layout>
185 <v-flex xs4 class="pt-4 subheading"> 181 <v-flex xs4 class="pt-4 subheading">
186 <label class="right">Time To:</label> 182 <label class="right">Time To:</label>
187 </v-flex> 183 </v-flex>
188 <v-flex xs5 class="ml-3"> 184 <v-flex xs5 class="ml-3">
189 <v-menu 185 <v-menu
190 ref="timeToEdit" 186 ref="timeToEdit"
191 :close-on-content-click="false" 187 :close-on-content-click="false"
192 v-model="timeToEdit" 188 v-model="timeToEdit"
193 :nudge-right="40" 189 :nudge-right="40"
194 :return-value.sync="editedItem.timeTo" 190 :return-value.sync="editedItem.timeTo"
195 lazy 191 lazy
196 transition="scale-transition" 192 transition="scale-transition"
197 offset-y 193 offset-y
198 full-width 194 full-width
199 max-width="290px" 195 max-width="290px"
200 min-width="290px" 196 min-width="290px"
201 > 197 >
202 <v-text-field 198 <v-text-field
203 slot="activator" 199 slot="activator"
204 v-model="editedItem.timeTo" 200 v-model="editedItem.timeTo"
205 label="Select your Time To" 201 label="Select your Time To"
206 append-icon="access_time" 202 append-icon="access_time"
207 :rules="timeOutRules"
208 ></v-text-field> 203 ></v-text-field>
209 <v-time-picker 204 <v-time-picker
210 v-model="editedItem.timeTo" 205 v-model="editedItem.timeTo"
211 @change="$refs.timeToEdit.save(editedItem.timeTo)" 206 @change="$refs.timeToEdit.save(editedItem.timeTo)"
212 ></v-time-picker> 207 ></v-time-picker>
213 </v-menu> 208 </v-menu>
214 </v-flex> 209 </v-flex>
215 </v-layout> 210 </v-layout>
216 </v-flex> 211 </v-flex>
217 <v-flex xs12 sm12> 212 <v-flex xs12 sm12>
218 <v-layout> 213 <v-layout>
219 <v-flex xs4 class="pt-4 subheading"> 214 <v-flex xs4 class="pt-4 subheading">
220 <label class="right">Room:</label> 215 <label class="right">Room:</label>
221 </v-flex> 216 </v-flex>
222 <v-flex xs5 class="ml-3"> 217 <v-flex xs5 class="ml-3">
223 <v-text-field 218 <v-text-field
224 placeholder="fill your room" 219 placeholder="fill your room"
225 v-model="editedItem.room" 220 v-model="editedItem.room"
226 @keyup.enter="save" 221 @keyup.enter="save"
227 ></v-text-field> 222 ></v-text-field>
228 </v-flex> 223 </v-flex>
229 </v-layout> 224 </v-layout>
230 </v-flex> 225 </v-flex>
231 </v-layout> 226 </v-layout>
232 <v-layout> 227 <v-layout>
233 <v-flex xs12 sm8 offset-sm2> 228 <v-flex xs12 sm8 offset-sm2>
234 <v-card-actions> 229 <v-card-actions>
235 <v-btn round dark @click.native="close">Close</v-btn> 230 <v-btn round dark @click.native="close">Close</v-btn>
236 <v-spacer></v-spacer> 231 <v-spacer></v-spacer>
237 <v-btn round dark @click="save">Save</v-btn> 232 <v-btn round dark @click="save">Save</v-btn>
238 </v-card-actions> 233 </v-card-actions>
239 </v-flex> 234 </v-flex>
240 </v-layout> 235 </v-layout>
241 </v-container> 236 </v-container>
242 </v-form> 237 </v-form>
243 </v-card-text> 238 </v-card-text>
244 </v-card> 239 </v-card>
245 </v-dialog> 240 </v-dialog>
246 241
247 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> 242 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** -->
248 243
249 <v-dialog v-model="dialog1" max-width="600px"> 244 <v-dialog v-model="dialog1" max-width="600px">
250 <v-card> 245 <v-card>
251 <v-toolbar color="grey lighten-2" flat> 246 <v-toolbar color="grey lighten-2" flat>
252 <v-spacer></v-spacer> 247 <v-spacer></v-spacer>
253 <v-toolbar-title> 248 <v-toolbar-title>
254 <h3>Exam Schedule</h3> 249 <h3>Exam Schedule</h3>
255 </v-toolbar-title> 250 </v-toolbar-title>
256 <v-spacer></v-spacer> 251 <v-spacer></v-spacer>
257 <v-icon @click="close1">close</v-icon> 252 <v-icon @click="close1">close</v-icon>
258 </v-toolbar> 253 </v-toolbar>
259 <v-card-text> 254 <v-card-text>
260 <v-container grid-list-md> 255 <v-container grid-list-md>
261 <v-layout wrap> 256 <v-layout wrap>
262 <v-flex> 257 <v-flex>
263 <v-layout> 258 <v-layout>
264 <v-flex xs5 sm6> 259 <v-flex xs5 sm6>
265 <h5 class="right my-1"> 260 <h5 class="right my-1">
266 <b>Exam Name:</b> 261 <b>Exam Name:</b>
267 </h5> 262 </h5>
268 </v-flex> 263 </v-flex>
269 <v-flex sm6 xs8> 264 <v-flex sm6 xs8>
270 <h5 class="my-1">{{ editedItem.examName }}</h5> 265 <h5 class="my-1">{{ editedItem.examName }}</h5>
271 </v-flex> 266 </v-flex>
272 </v-layout> 267 </v-layout>
273 <v-layout> 268 <v-layout>
274 <v-flex xs5 sm6> 269 <v-flex xs5 sm6>
275 <h5 class="right my-1"> 270 <h5 class="right my-1">
276 <b>Class:</b> 271 <b>Class:</b>
277 </h5> 272 </h5>
278 </v-flex> 273 </v-flex>
279 <v-flex sm6 xs8> 274 <v-flex sm6 xs8>
280 <h5 class="my-1">{{ editedItem.classId }}</h5> 275 <h5 class="my-1">{{ editedItem.classId }}</h5>
281 </v-flex> 276 </v-flex>
282 </v-layout> 277 </v-layout>
283 <v-layout> 278 <v-layout>
284 <v-flex xs5 sm6> 279 <v-flex xs5 sm6>
285 <h5 class="right my-1"> 280 <h5 class="right my-1">
286 <b>Section:</b> 281 <b>Section:</b>
287 </h5> 282 </h5>
288 </v-flex> 283 </v-flex>
289 <v-flex sm6 xs8> 284 <v-flex sm6 xs8>
290 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 285 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
291 </v-flex> 286 </v-flex>
292 </v-layout> 287 </v-layout>
293 <v-layout> 288 <v-layout>
294 <v-flex xs5 sm6> 289 <v-flex xs5 sm6>
295 <h5 class="right my-1"> 290 <h5 class="right my-1">
296 <b>Subject Name:</b> 291 <b>Subject Name:</b>
297 </h5> 292 </h5>
298 </v-flex> 293 </v-flex>
299 <v-flex sm6 xs8> 294 <v-flex sm6 xs8>
300 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 295 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
301 </v-flex> 296 </v-flex>
302 </v-layout> 297 </v-layout>
303 <v-layout> 298 <v-layout>
304 <v-flex xs5 sm6> 299 <v-flex xs5 sm6>
305 <h5 class="right my-1"> 300 <h5 class="right my-1">
306 <b>Date:</b> 301 <b>Date:</b>
307 </h5> 302 </h5>
308 </v-flex> 303 </v-flex>
309 <v-flex sm6 xs8> 304 <v-flex sm6 xs8>
310 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 305 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
311 </v-flex> 306 </v-flex>
312 </v-layout> 307 </v-layout>
313 <v-layout> 308 <v-layout>
314 <v-flex xs5 sm6> 309 <v-flex xs5 sm6>
315 <h5 class="right my-1"> 310 <h5 class="right my-1">
316 <b>Time From:</b> 311 <b>Time From:</b>
317 </h5> 312 </h5>
318 </v-flex> 313 </v-flex>
319 <v-flex sm6 xs8> 314 <v-flex sm6 xs8>
320 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 315 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
321 </v-flex> 316 </v-flex>
322 </v-layout> 317 </v-layout>
323 <v-layout> 318 <v-layout>
324 <v-flex xs5 sm6> 319 <v-flex xs5 sm6>
325 <h5 class="right my-1"> 320 <h5 class="right my-1">
326 <b>Time To:</b> 321 <b>Time To:</b>
327 </h5> 322 </h5>
328 </v-flex> 323 </v-flex>
329 <v-flex sm6 xs8> 324 <v-flex sm6 xs8>
330 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 325 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
331 </v-flex> 326 </v-flex>
332 </v-layout> 327 </v-layout>
333 <v-layout> 328 <v-layout>
334 <v-flex xs5 sm6> 329 <v-flex xs5 sm6>
335 <h5 class="right my-1"> 330 <h5 class="right my-1">
336 <b>Room:</b> 331 <b>Room:</b>
337 </h5> 332 </h5>
338 </v-flex> 333 </v-flex>
339 <v-flex sm6 xs8> 334 <v-flex sm6 xs8>
340 <h5 class="my-1">{{ editedItem.room }}</h5> 335 <h5 class="my-1">{{ editedItem.room }}</h5>
341 </v-flex> 336 </v-flex>
342 </v-layout> 337 </v-layout>
343 </v-flex> 338 </v-flex>
344 </v-layout> 339 </v-layout>
345 </v-container> 340 </v-container>
346 </v-card-text> 341 </v-card-text>
347 </v-card> 342 </v-card>
348 </v-dialog> 343 </v-dialog>
349 344
350 <v-snackbar 345 <v-snackbar
351 :timeout="timeout" 346 :timeout="timeout"
352 :top="y === 'top'" 347 :top="y === 'top'"
353 :right="x === 'right'" 348 :right="x === 'right'"
354 :vertical="mode === 'vertical'" 349 :vertical="mode === 'vertical'"
355 v-model="snackbar" 350 v-model="snackbar"
356 color="success" 351 color="success"
357 >{{ text }}</v-snackbar> 352 >{{ text }}</v-snackbar>
358 353
359 <!-- ****** EXISTING Exam Schedule TABLE****** --> 354 <!-- ****** EXISTING Exam Schedule TABLE****** -->
360 <v-card flat> 355 <v-card flat>
361 <v-layout> 356 <v-layout>
362 <v-flex xs12> 357 <v-flex xs12>
363 <v-layout> 358 <v-layout>
364 <v-flex xs2 sm1 md1 class="pt-4 subheading"> 359 <v-flex xs2 sm1 md1 class="pt-4 subheading">
365 <label class="right">Class:</label> 360 <label class="right">Class:</label>
366 </v-flex> 361 </v-flex>
367 <v-flex xs8 sm3 md2 class="ml-3"> 362 <v-flex xs8 sm3 md2 class="ml-3">
368 <v-select 363 <v-select
369 v-model="getScheduleData.classId" 364 v-model="getScheduleData.classId"
370 label="Select your class" 365 label="Select your class"
371 type="text" 366 type="text"
372 :items="classList" 367 :items="classList"
373 item-text="classNum" 368 item-text="classNum"
374 item-value="_id" 369 item-value="_id"
375 :rules="classRules"
376 @change="getSchedulesList()" 370 @change="getSchedulesList()"
377 required 371 required
378 ></v-select> 372 ></v-select>
379 </v-flex> 373 </v-flex>
380 </v-layout> 374 </v-layout>
381 </v-flex> 375 </v-flex>
382 </v-layout> 376 </v-layout>
383 </v-card> 377 </v-card>
384 <v-data-table 378 <v-data-table
385 :headers="headers" 379 :headers="headers"
386 :items="ScheduleData" 380 :items="ScheduleData"
387 :pagination.sync="pagination" 381 :pagination.sync="pagination"
388 :search="search" 382 :search="search"
389 > 383 >
390 <template slot="items" slot-scope="props"> 384 <template slot="items" slot-scope="props">
391 <td class="text-xs-center">{{ props.index + 1}}</td> 385 <td class="text-xs-center">{{ props.index + 1}}</td>
392 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> --> 386 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> -->
393 <td id="td" class="text-xs-center">{{ props.item.examName}}</td> 387 <td id="td" class="text-xs-center">{{ props.item.examName}}</td>
394 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 388 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
395 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td> 389 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td>
396 <td id="td" class="text-xs-center">{{ props.item.subjectName }}</td> 390 <td id="td" class="text-xs-center">{{ props.item.subjectName }}</td>
397 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 391 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
398 <td id="td" class="text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> 392 <td id="td" class="text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
399 <td id="td" class="text-xs-center">{{ props.item.room }}</td> 393 <td id="td" class="text-xs-center">{{ props.item.room }}</td>
400 <td class="text-xs-center"> 394 <td class="text-xs-center">
401 <span> 395 <span>
402 <img 396 <img
403 style="cursor:pointer; width:25px; height:18px; " 397 style="cursor:pointer; width:25px; height:18px; "
404 class="mr-5" 398 class="mr-5"
405 @click="profile(props.item)" 399 @click="profile(props.item)"
406 src="/static/icon/eye1.png" 400 src="/static/icon/eye1.png"
407 /> 401 />
408 <img 402 <img
409 style="cursor:pointer; width:20px; height:18px; " 403 style="cursor:pointer; width:20px; height:18px; "
410 class="mr-5" 404 class="mr-5"
411 @click="editItem(props.item)" 405 @click="editItem(props.item)"
412 src="/static/icon/edit1.png" 406 src="/static/icon/edit1.png"
413 /> 407 />
414 <img 408 <img
415 style="cursor:pointer;width:20px; height:20px; " 409 style="cursor:pointer;width:20px; height:20px; "
416 class="mr-5" 410 class="mr-5"
417 @click="deleteSchedule(props.item)" 411 @click="deleteSchedule(props.item)"
418 src="/static/icon/delete1.png" 412 src="/static/icon/delete1.png"
419 /> 413 />
420 </span> 414 </span>
421 </td> 415 </td>
422 </template> 416 </template>
423 <v-alert 417 <v-alert
424 slot="no-results" 418 slot="no-results"
425 :value="true" 419 :value="true"
426 color="error" 420 color="error"
427 icon="warning" 421 icon="warning"
428 >Your search for "{{ search }}" found no results.</v-alert> 422 >Your search for "{{ search }}" found no results.</v-alert>
429 </v-data-table> 423 </v-data-table>
430 </v-tab-item> 424 </v-tab-item>
431 425
432 <!-- ****** ADD Exam Schedule ****** --> 426 <!-- ****** ADD Exam Schedule ****** -->
433 427
434 <v-tab-item> 428 <v-tab-item>
435 <v-container> 429 <v-container>
436 <v-snackbar 430 <v-snackbar
437 :timeout="timeout" 431 :timeout="timeout"
438 :top="y === 'top'" 432 :top="y === 'top'"
439 :right="x === 'right'" 433 :right="x === 'right'"
440 :vertical="mode === 'vertical'" 434 :vertical="mode === 'vertical'"
441 v-model="snackbar" 435 v-model="snackbar"
442 :color="color" 436 :color="color"
443 >{{ text }}</v-snackbar> 437 >{{ text }}</v-snackbar>
444 <v-flex xs12 sm12 class="my-4"> 438 <v-flex xs12 sm12 class="my-4">
445 <v-card flat> 439 <v-card flat>
446 <v-form ref="form" v-model="valid" lazy-validation> 440 <v-form ref="form" v-model="valid" lazy-validation>
447 <v-container fluid> 441 <v-container fluid>
448 <v-flex xs12> 442 <v-flex xs12>
449 <v-layout> 443 <v-layout>
450 <v-flex xs5 class="pt-4 subheading"> 444 <v-flex xs5 class="pt-4 subheading">
451 <label class="right">Exam Name:</label> 445 <label class="right">Exam Name:</label>
452 </v-flex> 446 </v-flex>
453 <v-flex xs7 sm4 class="ml-3"> 447 <v-flex xs7 sm4 class="ml-3">
454 <v-select 448 <v-select
455 label="Select your Exam Name" 449 label="Select your Exam Name"
456 :rules="examNameRules" 450 :rules="examNameRules"
457 :items="examList" 451 :items="examList"
458 v-model="addSchedule.examName" 452 v-model="addSchedule.examName"
459 item-text="examName" 453 item-text="examName"
460 item-value="examName" 454 item-value="examName"
461 ></v-select> 455 ></v-select>
462 </v-flex> 456 </v-flex>
463 </v-layout> 457 </v-layout>
464 </v-flex> 458 </v-flex>
465 <v-flex xs12> 459 <v-flex xs12>
466 <v-layout> 460 <v-layout>
467 <v-flex xs5 class="pt-4 subheading"> 461 <v-flex xs5 class="pt-4 subheading">
468 <label class="right">Class:</label> 462 <label class="right">Class:</label>
469 </v-flex> 463 </v-flex>
470 <v-flex xs7 sm4 class="ml-3"> 464 <v-flex xs7 sm4 class="ml-3">
471 <v-select 465 <v-select
472 v-model="addSchedule.classId" 466 v-model="addSchedule.classId"
473 label="Select your class" 467 label="Select your class"
474 type="text" 468 type="text"
475 :items="classList" 469 :items="classList"
476 item-text="classNum" 470 item-text="classNum"
477 item-value="_id" 471 item-value="_id"
478 :rules="classRules" 472 :rules="classRules"
479 @change="getSections(addSchedule.classId)" 473 @change="getSections(addSchedule.classId)"
480 required 474 required
481 ></v-select> 475 ></v-select>
482 </v-flex> 476 </v-flex>
483 </v-layout> 477 </v-layout>
484 </v-flex> 478 </v-flex>
485 <v-flex xs12> 479 <v-flex xs12>
486 <v-layout> 480 <v-layout>
487 <v-flex xs5 class="pt-4 subheading"> 481 <v-flex xs5 class="pt-4 subheading">
488 <label class="right">Section:</label> 482 <label class="right">Section:</label>
489 </v-flex> 483 </v-flex>
490 <v-flex xs7 sm4 class="ml-3"> 484 <v-flex xs7 sm4 class="ml-3">
491 <v-select 485 <v-select
492 :items="addSection" 486 :items="addSection"
493 label="Select Section" 487 label="Select Section"
494 v-model="addSchedule.sectionId" 488 v-model="addSchedule.sectionId"
495 item-text="name" 489 item-text="name"
496 item-value="_id" 490 item-value="_id"
497 name="Select Section" 491 name="Select Section"
498 :rules="sectionRules" 492 :rules="sectionRules"
499 required 493 required
500 ></v-select> 494 ></v-select>
501 </v-flex> 495 </v-flex>
502 </v-layout> 496 </v-layout>
503 </v-flex> 497 </v-flex>
504 <v-flex xs12> 498 <v-flex xs12>
505 <v-layout> 499 <v-layout>
506 <v-flex xs5 class="pt-4 subheading"> 500 <v-flex xs5 class="pt-4 subheading">
507 <label class="right">Subject Name:</label> 501 <label class="right">Subject Name:</label>
508 </v-flex> 502 </v-flex>
509 <v-flex xs7 sm4 class="ml-3"> 503 <v-flex xs7 sm4 class="ml-3">
510 <v-select 504 <v-select
511 :items="subjects" 505 :items="subjects"
512 label="Select Section" 506 label="Select Subject"
513 v-model="addSchedule.subjectName" 507 v-model="addSchedule.subjectName"
514 item-text="subjectName" 508 item-text="subjectName"
515 item-value="subjectName" 509 item-value="subjectName"
516 name="Select Section" 510 name="Select Section"
517 :rules="sectionRules" 511 :rules="subjectRules"
518 required 512 required
519 ></v-select> 513 ></v-select>
520 </v-flex> 514 </v-flex>
521 </v-layout> 515 </v-layout>
522 </v-flex> 516 </v-flex>
523 <v-flex xs12> 517 <v-flex xs12>
524 <v-layout> 518 <v-layout>
525 <v-flex xs5 class="pt-4 subheading"> 519 <v-flex xs5 class="pt-4 subheading">
526 <label class="right">Date:</label> 520 <label class="right">Date:</label>
527 </v-flex> 521 </v-flex>
528 <v-flex xs7 sm4 class="ml-3"> 522 <v-flex xs7 sm4 class="ml-3">
529 <v-menu 523 <v-menu
530 ref="menu2" 524 ref="menu2"
531 :close-on-content-click="false" 525 :close-on-content-click="false"
532 v-model="menu2" 526 v-model="menu2"
533 :nudge-right="40" 527 :nudge-right="40"
534 :return-value.sync="addSchedule.date" 528 :return-value.sync="addSchedule.date"
535 lazy 529 lazy
536 transition="scale-transition" 530 transition="scale-transition"
537 offset-y 531 offset-y
538 full-width 532 full-width
539 min-width="290px" 533 min-width="290px"
540 > 534 >
541 <v-text-field 535 <v-text-field
542 slot="activator" 536 slot="activator"
543 v-model="addSchedule.date" 537 v-model="addSchedule.date"
544 label="Select Date" 538 label="Select Date"
545 append-icon="event" 539 append-icon="event"
546 readonly 540 readonly
547 ></v-text-field> 541 ></v-text-field>
548 <v-date-picker 542 <v-date-picker
549 v-model="addSchedule.date" 543 v-model="addSchedule.date"
550 @input="$refs.menu2.save(addSchedule.date)" 544 @input="$refs.menu2.save(addSchedule.date)"
551 ></v-date-picker> 545 ></v-date-picker>
552 </v-menu> 546 </v-menu>
553 </v-flex> 547 </v-flex>
554 </v-layout> 548 </v-layout>
555 </v-flex> 549 </v-flex>
556 <v-flex xs12> 550 <v-flex xs12>
557 <v-layout> 551 <v-layout>
558 <v-flex xs5 class="pt-4 subheading"> 552 <v-flex xs5 class="pt-4 subheading">
559 <label class="right">Time From:</label> 553 <label class="right">Time From:</label>
560 </v-flex> 554 </v-flex>
561 <v-flex xs7 sm4 class="ml-3"> 555 <v-flex xs7 sm4 class="ml-3">
562 <v-menu 556 <v-menu
563 ref="menuA" 557 ref="menuA"
564 :close-on-content-click="false" 558 :close-on-content-click="false"
565 v-model="menuB" 559 v-model="menuB"
566 :nudge-right="40" 560 :nudge-right="40"
567 :return-value.sync="addSchedule.timeFrom" 561 :return-value.sync="addSchedule.timeFrom"
568 lazy 562 lazy
569 transition="scale-transition" 563 transition="scale-transition"
570 offset-y 564 offset-y
571 full-width 565 full-width
572 max-width="290px" 566 max-width="290px"
573 min-width="290px" 567 min-width="290px"
574 > 568 >
575 <v-text-field 569 <v-text-field
576 slot="activator" 570 slot="activator"
577 v-model="addSchedule.timeIn" 571 v-model="addSchedule.timeIn"
578 label="Select your time From" 572 label="Select your time From"
579 append-icon="access_time" 573 append-icon="access_time"
580 :rules="timeInRules" 574 :rules="timeInRules"
581 ></v-text-field> 575 ></v-text-field>
582 <v-time-picker 576 <v-time-picker
583 v-model="addSchedule.timeIn" 577 v-model="addSchedule.timeIn"
584 @change="$refs.menuA.save(addSchedule.timeIn)" 578 @change="$refs.menuA.save(addSchedule.timeIn)"
585 ></v-time-picker> 579 ></v-time-picker>
586 </v-menu> 580 </v-menu>
587 </v-flex> 581 </v-flex>
588 </v-layout> 582 </v-layout>
589 </v-flex> 583 </v-flex>
590 <v-flex xs12> 584 <v-flex xs12>
591 <v-layout> 585 <v-layout>
592 <v-flex xs5 class="pt-4 subheading"> 586 <v-flex xs5 class="pt-4 subheading">
593 <label class="right">Time To:</label> 587 <label class="right">Time To:</label>
594 </v-flex> 588 </v-flex>
595 <v-flex xs7 sm4 class="ml-3"> 589 <v-flex xs7 sm4 class="ml-3">
596 <v-menu 590 <v-menu
597 ref="menu" 591 ref="menu"
598 :close-on-content-click="false" 592 :close-on-content-click="false"
599 v-model="menu1" 593 v-model="menu1"
600 :nudge-right="40" 594 :nudge-right="40"
601 :return-value.sync="addSchedule.timeTo" 595 :return-value.sync="addSchedule.timeTo"
602 lazy 596 lazy
603 transition="scale-transition" 597 transition="scale-transition"
604 offset-y 598 offset-y
605 full-width 599 full-width
606 max-width="290px" 600 max-width="290px"
607 min-width="290px" 601 min-width="290px"
608 > 602 >
609 <v-text-field 603 <v-text-field
610 slot="activator" 604 slot="activator"
611 v-model="addSchedule.timeTo" 605 v-model="addSchedule.timeTo"
612 label="Select your Time To" 606 label="Select your Time To"
613 append-icon="access_time" 607 append-icon="access_time"
614 :rules="timeOutRules" 608 :rules="timeOutRules"
615 ></v-text-field> 609 ></v-text-field>
616 <v-time-picker 610 <v-time-picker
617 v-model="addSchedule.timeTo" 611 v-model="addSchedule.timeTo"
618 @change="$refs.menu.save(addSchedule.timeTo)" 612 @change="$refs.menu.save(addSchedule.timeTo)"
619 ></v-time-picker> 613 ></v-time-picker>
620 </v-menu> 614 </v-menu>
621 </v-flex> 615 </v-flex>
622 </v-layout> 616 </v-layout>
623 </v-flex> 617 </v-flex>
624 <v-flex xs12> 618 <v-flex xs12>
625 <v-layout> 619 <v-layout>
626 <v-flex xs5 class="pt-4 subheading"> 620 <v-flex xs5 class="pt-4 subheading">
627 <label class="right">Room:</label> 621 <label class="right">Room:</label>
628 </v-flex> 622 </v-flex>
629 <v-flex xs7 sm4 class="ml-3"> 623 <v-flex xs7 sm4 class="ml-3">
630 <v-text-field 624 <v-text-field
631 placeholder="fill your room" 625 placeholder="fill your room"
632 :rules="roomRules" 626 :rules="roomRules"
633 v-model="addSchedule.room" 627 v-model="addSchedule.room"
634 @keyup.enter="submit" 628 @keyup.enter="submit"
635 ></v-text-field> 629 ></v-text-field>
636 </v-flex> 630 </v-flex>
637 </v-layout> 631 </v-layout>
638 </v-flex> 632 </v-flex>
639 <v-layout> 633 <v-layout>
640 <v-flex xs12 sm7 offset-sm3> 634 <v-flex xs12 sm7 offset-sm3>
641 <v-card-actions> 635 <v-card-actions>
642 <v-btn @click="clear" round dark>clear</v-btn> 636 <v-btn @click="clear" round dark>clear</v-btn>
643 <v-spacer class="hidden-xs-only"></v-spacer> 637 <v-spacer class="hidden-xs-only"></v-spacer>
644 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 638 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
645 </v-card-actions> 639 </v-card-actions>
646 </v-flex> 640 </v-flex>
647 </v-layout> 641 </v-layout>
648 </v-container> 642 </v-container>
649 </v-form> 643 </v-form>
650 </v-card> 644 </v-card>
651 </v-flex> 645 </v-flex>
652 </v-container> 646 </v-container>
653 </v-tab-item> 647 </v-tab-item>
654 </v-tabs> 648 </v-tabs>
655 <div class="loader" v-if="showLoader"> 649 <div class="loader" v-if="showLoader">
656 <v-progress-circular indeterminate color="white"></v-progress-circular> 650 <v-progress-circular indeterminate color="white"></v-progress-circular>
657 </div> 651 </div>
658 </v-app> 652 </v-app>
659 </template> 653 </template>
660 654
661 <script> 655 <script>
662 import http from "@/Services/http.js"; 656 import http from "@/Services/http.js";
663 import moment from "moment"; 657 import moment from "moment";
664 658
665 export default { 659 export default {
666 data: () => ({ 660 data: () => ({
667 snackbar: false, 661 snackbar: false,
668 date: null, 662 date: null,
669 editDate: false, 663 editDate: false,
670 menu1: false, 664 menu1: false,
671 menuB: false, 665 menuB: false,
672 menu2: false, 666 menu2: false,
673 menuEdit: false, 667 menuEdit: false,
674 timeToEdit: false, 668 timeToEdit: false,
675 color: "", 669 color: "",
676 y: "top", 670 y: "top",
677 x: "right", 671 x: "right",
678 mode: "", 672 mode: "",
679 timeout: 10000, 673 timeout: 10000,
680 text: "", 674 text: "",
681 loading: false, 675 loading: false,
682 date: null, 676 date: null,
683 search: "", 677 search: "",
684 showLoader: false, 678 showLoader: false,
685 dialog: false, 679 dialog: false,
686 dialog1: false, 680 dialog1: false,
687 valid: true, 681 valid: true,
688 isActive: true, 682 isActive: true,
689 newActive: false, 683 newActive: false,
690 addSection: [], 684 addSection: [],
691 pagination: { 685 pagination: {
692 rowsPerPage: 15 686 rowsPerPage: 15
693 }, 687 },
694 examNameRules: [v => !!v || "Exam Name is required"], 688 examNameRules: [v => !!v || "Exam Name is required"],
695 classRules: [v => !!v || "Class Name is required"], 689 classRules: [v => !!v || "Class Name is required"],
696 sectionRules: [v => !!v || "section is required"], 690 sectionRules: [v => !!v || "section is required"],
691 subjectRules: [v => !!v || "Subject is required"],
697 timeInRules: [v => !!v || "Time In is required"], 692 timeInRules: [v => !!v || "Time In is required"],
698 timeOutRules: [v => !!v || "time Out s is required"], 693 timeOutRules: [v => !!v || "time Out s is required"],
699 roomRules: [v => !!v || "Room is required"], 694 roomRules: [v => !!v || "Room is required"],
700 headers: [ 695 headers: [
701 { 696 {
702 align: "justify-center", 697 align: "justify-center",
703 text: "No", 698 text: "No",
704 sortable: false, 699 sortable: false,
705 value: "No" 700 value: "No"
706 }, 701 },
707 { 702 {
708 text: "Exam Name", 703 text: "Exam Name",
709 vaue: "examName", 704 vaue: "examName",
710 sortable: false, 705 sortable: false,
711 align: "center" 706 align: "center"
712 }, 707 },
713 { 708 {
714 text: "Class", 709 text: "Class",
715 value: "classId.classNum", 710 value: "classId.classNum",
716 sortable: false, 711 sortable: false,
717 align: "center" 712 align: "center"
718 }, 713 },
719 { 714 {
720 text: "Section", 715 text: "Section",
721 value: "sectionId.name", 716 value: "sectionId.name",
722 sortable: false, 717 sortable: false,
723 align: "center" 718 align: "center"
724 }, 719 },
725 { 720 {
726 text: "Subject Name", 721 text: "Subject Name",
727 value: "subjectName", 722 value: "subjectName",
728 sortable: false, 723 sortable: false,
729 align: "center" 724 align: "center"
730 }, 725 },
731 { 726 {
732 text: "Date", 727 text: "Date",
733 value: "date", 728 value: "date",
734 sortable: false, 729 sortable: false,
735 align: "center" 730 align: "center"
736 }, 731 },
737 { 732 {
738 text: "Time", 733 text: "Time",
739 value: "timeFrom", 734 value: "timeFrom",
740 sortable: false, 735 sortable: false,
741 align: "center" 736 align: "center"
742 }, 737 },
743 { 738 {
744 text: "Room", 739 text: "Room",
745 value: "room", 740 value: "room",
746 sortable: false, 741 sortable: false,
747 align: "center" 742 align: "center"
748 }, 743 },
749 { text: "Action", value: "", sortable: false, align: "center" } 744 { text: "Action", value: "", sortable: false, align: "center" }
750 ], 745 ],
751 classList: [], 746 classList: [],
752 examList: [], 747 examList: [],
753 subjects: [], 748 subjects: [],
754 addSchedule: {}, 749 addSchedule: {},
755 editedItem: {}, 750 editedItem: {},
756 getScheduleData: {}, 751 getScheduleData: {},
757 ScheduleData: [], 752 ScheduleData: [],
758 token: "" 753 token: ""
759 }), 754 }),
760 methods: { 755 methods: {
761 dates: function(date) { 756 dates: function(date) {
762 return moment(date).format("MMMM DD, YYYY"); 757 return moment(date).format("MMMM DD, YYYY");
763 }, 758 },
764 pickFile() { 759 pickFile() {
765 this.$refs.image.click(); 760 this.$refs.image.click();
766 }, 761 },
767 getSchedulesList() { 762 getSchedulesList() {
768 this.showLoader = true; 763 this.showLoader = true;
769 http() 764 http()
770 .get("/getSchedulesList", { 765 .get("/getSchedulesList", {
771 params: { classId: this.getScheduleData.classId }, 766 params: { classId: this.getScheduleData.classId },
772 headers: { Authorization: "Bearer " + this.token } 767 headers: { Authorization: "Bearer " + this.token }
773 }) 768 })
774 .then(response => { 769 .then(response => {
775 this.ScheduleData = response.data.data; 770 this.ScheduleData = response.data.data;
776 this.showLoader = false; 771 this.showLoader = false;
777 }) 772 })
778 .catch(error => { 773 .catch(error => {
779 // console.log("err====>", err); 774 // console.log("err====>", err);
780 this.showLoader = false; 775 this.showLoader = false;
781 this.loadingSearch = false; 776 this.loadingSearch = false;
782 this.snackbar = true; 777 this.snackbar = true;
783 this.text = error.response.data.message; 778 this.text = error.response.data.message;
784 if (error.response.status === 401) { 779 if (error.response.status === 401) {
785 this.$router.replace({ path: "/" }); 780 this.$router.replace({ path: "/" });
786 this.$store.dispatch("setToken", null); 781 this.$store.dispatch("setToken", null);
787 this.$store.dispatch("Id", null); 782 this.$store.dispatch("Id", null);
788 } 783 }
789 }); 784 });
790 }, 785 },
791 editItem(item) { 786 editItem(item) {
792 console.log("item", item); 787 console.log("item", item);
793 this.editedIndex = this.ScheduleData.indexOf(item); 788 this.editedIndex = this.ScheduleData.indexOf(item);
794 this.editedItem = Object.assign({}, item); 789 this.editedItem = Object.assign({}, item);
795 this.editedItem.classId = this.editedItem.classId._id; 790 this.editedItem.classId = this.editedItem.classId._id;
796 this.editedItem.sectionId = this.editedItem.sectionId._id; 791 this.editedItem.sectionId = this.editedItem.sectionId._id;
797 this.editedItem.date = 792 this.editedItem.date =
798 this.editedItem.date != undefined 793 this.editedItem.date != undefined
799 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 794 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
800 : (this.editedItem.date = ""); 795 : (this.editedItem.date = "");
801 this.dialog = true; 796 this.dialog = true;
802 }, 797 },
803 profile(item) { 798 profile(item) {
804 this.editedIndex = this.ScheduleData.indexOf(item); 799 this.editedIndex = this.ScheduleData.indexOf(item);
805 this.editedItem = Object.assign({}, item); 800 this.editedItem = Object.assign({}, item);
806 this.editedItem.classId = this.editedItem.classId.classNum; 801 this.editedItem.classId = this.editedItem.classId.classNum;
807 this.editedItem.sectionId = this.editedItem.sectionId.name; 802 this.editedItem.sectionId = this.editedItem.sectionId.name;
808 this.dialog1 = true; 803 this.dialog1 = true;
809 }, 804 },
810 deleteSchedule(item) { 805 deleteSchedule(item) {
811 let deleteSchedule = { 806 let deleteSchedule = {
812 scheduleId: item._id 807 scheduleId: item._id
813 }; 808 };
814 http() 809 http()
815 .delete( 810 .delete(
816 "/deleteSchedule", 811 "/deleteSchedule",
817 confirm("Are you sure you want to Delete this?") && { 812 confirm("Are you sure you want to Delete this?") && {
818 params: deleteSchedule 813 params: deleteSchedule
819 } 814 }
820 ) 815 )
821 .then(response => { 816 .then(response => {
822 this.snackbar = true; 817 this.snackbar = true;
823 this.text = "Successfully Delete Schedule "; 818 this.text = "Successfully Delete Schedule ";
824 this.getSchedulesList(); 819 this.getSchedulesList();
825 }) 820 })
826 .catch(error => { 821 .catch(error => {
827 // console.log(error); 822 // console.log(error);
828 }); 823 });
829 }, 824 },
830 activeTab(type) { 825 activeTab(type) {
831 switch (type) { 826 switch (type) {
832 case "existing": 827 case "existing":
833 this.newActive = false; 828 this.newActive = false;
834 this.isActive = true; 829 this.isActive = true;
835 break; 830 break;
836 831
837 default: 832 default:
838 this.newActive = true; 833 this.newActive = true;
839 this.isActive = false; 834 this.isActive = false;
840 break; 835 break;
841 } 836 }
842 }, 837 },
843 close() { 838 close() {
844 this.dialog = false; 839 this.dialog = false;
845 }, 840 },
846 close1() { 841 close1() {
847 this.dialog1 = false; 842 this.dialog1 = false;
848 }, 843 },
849 submit() { 844 submit() {
850 this.loading = true; 845 this.loading = true;
851 if (this.$refs.form.validate()) { 846 if (this.$refs.form.validate()) {
852 http() 847 http()
853 .post("/createSchedule", this.addSchedule) 848 .post("/createSchedule", this.addSchedule)
854 .then(response => { 849 .then(response => {
855 this.snackbar = true; 850 this.snackbar = true;
856 this.text = "New Exam Schedule added successfully"; 851 this.text = "New Exam Schedule added successfully";
857 this.getSchedulesList(); 852 this.getSchedulesList();
858 this.color = "succses"; 853 this.color = "succses";
859 this.loading = false; 854 this.loading = false;
860 this.clear(); 855 this.clear();
861 }) 856 })
862 .catch(error => { 857 .catch(error => {
863 if ((this.snackbar = true)) { 858 if ((this.snackbar = true)) {
864 this.text = error.response.data.message; 859 this.text = error.response.data.message;
865 this.color = "red"; 860 this.color = "red";
866 } 861 }
867 }); 862 });
868 } 863 }
869 }, 864 },
870 clear() { 865 clear() {
871 this.$refs.form.reset(); 866 this.$refs.form.reset();
872 this.disable = false; 867 this.disable = false;
873 this.loading = false; 868 this.loading = false;
874 }, 869 },
875 save() { 870 save() {
876 this.editedItem.scheduleId = this.editedItem._id; 871 this.editedItem.scheduleId = this.editedItem._id;
877 http() 872 http()
878 .put("/updateSchedule", this.editedItem) 873 .put("/updateSchedule", this.editedItem)
879 .then(response => { 874 .then(response => {
880 this.snackbar = true; 875 this.snackbar = true;
881 this.text = "Successfully Edit Exam Schedule"; 876 this.text = "Successfully Edit Exam Schedule";
882 this.color = "green"; 877 this.color = "green";
883 this.getSchedulesList(); 878 this.getSchedulesList();
884 this.close(); 879 this.close();
885 }) 880 })
886 .catch(error => { 881 .catch(error => {
887 this.snackbar = true; 882 this.snackbar = true;
888 this.text = error.response.data.message; 883 this.text = error.response.data.message;
889 this.color = "red"; 884 this.color = "red";
890 }); 885 });
891 }, 886 },
892 getClass() { 887 getClass() {
893 http() 888 http()
894 .get("/getClassesList", { 889 .get("/getClassesList", {
895 headers: { Authorization: "Bearer " + this.token } 890 headers: { Authorization: "Bearer " + this.token }
896 }) 891 })
897 .then(response => { 892 .then(response => {
898 this.classList = response.data.data; 893 this.classList = response.data.data;
899 // console.log("getClassesList=====>",this.addclass) 894 // console.log("getClassesList=====>",this.addclass)
900 }) 895 })
901 .catch(err => { 896 .catch(err => {
902 // console.log("err====>", err); 897 // console.log("err====>", err);
903 }); 898 });
904 }, 899 },
905 getSections(_id) { 900 getSections(_id) {
906 console.log(_id); 901 console.log(_id);
907 for (let i = 0; i < this.classList.length; i++) { 902 for (let i = 0; i < this.classList.length; i++) {
908 if (_id == this.classList[i]._id) { 903 if (_id == this.classList[i]._id) {
909 // console.log(this.classList[i].subjects); 904 // console.log(this.classList[i].subjects);
910 this.subjects = this.classList[i].subjects; 905 this.subjects = this.classList[i].subjects;
911 } 906 }
912 } 907 }
913 http() 908 http()
914 .get( 909 .get(
915 "/getSectionsList", 910 "/getSectionsList",
916 { params: { classId: _id } }, 911 { params: { classId: _id } },
917 { 912 {
918 headers: { Authorization: "Bearer " + this.token } 913 headers: { Authorization: "Bearer " + this.token }
919 } 914 }
920 ) 915 )
921 .then(response => { 916 .then(response => {
922 this.addSection = response.data.data; 917 this.addSection = response.data.data;
923 }) 918 })
924 .catch(err => { 919 .catch(err => {
925 // console.log("err====>", err); 920 // console.log("err====>", err);
926 }); 921 });
927 }, 922 },
928 getExamList() { 923 getExamList() {
929 this.showLoader = true; 924 this.showLoader = true;
930 this.loadingSearch = true; 925 this.loadingSearch = true;
931 http() 926 http()
932 .get("/getExamsList", { 927 .get("/getExamsList", {
933 headers: { Authorization: "Bearer " + this.token } 928 headers: { Authorization: "Bearer " + this.token }
934 }) 929 })
935 .then(response => { 930 .then(response => {
936 this.examList = response.data.data; 931 this.examList = response.data.data;
937 this.showLoader = false; 932 this.showLoader = false;
938 this.loadingSearch = false; 933 this.loadingSearch = false;
939 }) 934 })
940 .catch(error => { 935 .catch(error => {
941 // console.log("err====>", err); 936 // console.log("err====>", err);
942 this.showLoader = false; 937 this.showLoader = false;
943 this.loadingSearch = false; 938 this.loadingSearch = false;
944 this.snackbar = true; 939 this.snackbar = true;
945 this.text = error.response.data.message; 940 this.text = error.response.data.message;
946 if (error.response.status === 401) { 941 if (error.response.status === 401) {
947 this.$router.replace({ path: "/" }); 942 this.$router.replace({ path: "/" });
948 this.$store.dispatch("setToken", null); 943 this.$store.dispatch("setToken", null);
949 this.$store.dispatch("Id", null); 944 this.$store.dispatch("Id", null);
950 } 945 }
951 }); 946 });
952 } 947 }
953 }, 948 },
954 mounted() { 949 mounted() {
955 this.token = this.$store.state.token; 950 this.token = this.$store.state.token;
956 // this.getSchedulesList(); 951 // this.getSchedulesList();
957 this.getClass(); 952 this.getClass();
958 this.getExamList(); 953 this.getExamList();
959 }, 954 },
960 created() { 955 created() {
961 this.$root.$on("app:search", search => { 956 this.$root.$on("app:search", search => {
962 this.search = search; 957 this.search = search;
963 }); 958 });
964 }, 959 },
965 beforeDestroy() { 960 beforeDestroy() {
966 // dont forget to remove the listener 961 // dont forget to remove the listener
967 this.$root.$off("app:search"); 962 this.$root.$off("app:search");
968 } 963 }
969 }; 964 };
970 </script> 965 </script>
971 <style scoped> 966 <style scoped>
972 .active { 967 .active {
973 background-color: gray; 968 background-color: gray;
974 color: white !important; 969 color: white !important;
975 } 970 }
976 .activebtn { 971 .activebtn {
977 color: black !important; 972 color: black !important;
978 } 973 }
src/pages/Library/eBook.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing E-Books</v-tab> 10 >Existing E-Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add E-Books</v-tab> 18 >Add E-Books</v-tab>
19 19
20 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 20 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit E-Books</h3> 36 <h3>Edit E-Books</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:760px;"> 40 <v-card-text style="height:760px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onImagePicked" 54 @change="onImagePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex v-if="files != ''"> 57 <v-flex v-if="files != ''">
58 <img :src="files" height="450" width="500;" /> 58 <img :src="files" height="450" width="500;" />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <img 61 <img
62 v-if="editedItem.coverPhotoUrl && files == '' " 62 v-if="editedItem.coverPhotoUrl && files == '' "
63 :src="editedItem.coverPhotoUrl" 63 :src="editedItem.coverPhotoUrl"
64 height="450" 64 height="450"
65 width="500" 65 width="500"
66 alt="eBooks" 66 alt="eBooks"
67 class="pa-2" 67 class="pa-2"
68 /> 68 />
69 <!-- <v-layout justify-center> 69 <!-- <v-layout justify-center>
70 <v-flex 70 <v-flex
71 xs3 71 xs3
72 v-for="Image in editedItem.newsImageUrl" 72 v-for="Image in editedItem.newsImageUrl"
73 :key="Image._id" 73 :key="Image._id"
74 v-if="editedItem.newsImageUrl" 74 v-if="editedItem.newsImageUrl"
75 class="profile-image-wrapper" 75 class="profile-image-wrapper"
76 > 76 >
77 77
78 <v-icon 78 <v-icon
79 class="red edit-profile-icon" 79 class="red edit-profile-icon"
80 dark 80 dark
81 @click="deleteImage(Image._id,editedItem._id)" 81 @click="deleteImage(Image._id,editedItem._id)"
82 >close</v-icon> 82 >close</v-icon>
83 </v-flex> 83 </v-flex>
84 <v-flex v-for="(file, index) in files" :key="index"> 84 <v-flex v-for="(file, index) in files" :key="index">
85 <img :src="file" height="160" width="160" class="pa-2" /> 85 <img :src="file" height="160" width="160" class="pa-2" />
86 </v-flex> 86 </v-flex>
87 </v-layout>--> 87 </v-layout>-->
88 <img 88 <img
89 src="/static/icon/user.png" 89 src="/static/icon/user.png"
90 v-if="editedItem.coverPhotoUrl == ''" 90 v-if="editedItem.coverPhotoUrl == ''"
91 height="160" 91 height="160"
92 width="160" 92 width="160"
93 alt="Books" 93 alt="Books"
94 /> 94 />
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout> 97 <v-layout>
98 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
101 <label class="right">Name:</label> 101 <label class="right">Name:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
104 <v-text-field 104 <v-text-field
105 v-model="editedItem.name" 105 v-model="editedItem.name"
106 placeholder="fill your Name" 106 placeholder="fill your Name"
107 type="text" 107 type="text"
108 ></v-text-field> 108 ></v-text-field>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Author:</label> 115 <label class="right">Author:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs5 class="ml-3"> 117 <v-flex xs5 class="ml-3">
118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> 118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 <v-flex xs12 sm12> 122 <v-flex xs12 sm12>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs5 class="ml-3"> 127 <v-flex xs5 class="ml-3">
128 <v-text-field 128 <v-text-field
129 v-model="editedItem.className" 129 v-model="editedItem.className"
130 :items="addClass" 130 :items="addClass"
131 label="Select Class" 131 label="Select Class"
132 item-text="classNum" 132 item-text="classNum"
133 item-value="_id" 133 item-value="_id"
134 ></v-text-field> 134 ></v-text-field>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 </v-flex> 137 </v-flex>
138 <v-flex xs12 sm12> 138 <v-flex xs12 sm12>
139 <v-layout> 139 <v-layout>
140 <v-flex xs4 class="pt-4 subheading"> 140 <v-flex xs4 class="pt-4 subheading">
141 <label class="right">Upload Image:</label> 141 <label class="right">Upload Image:</label>
142 </v-flex> 142 </v-flex>
143 <v-flex xs5 class="ml-3"> 143 <v-flex xs5 class="ml-3">
144 <v-text-field 144 <v-text-field
145 label="Select Image" 145 label="Select Image"
146 @click="pickImage" 146 @click="pickImage"
147 v-model="imageName" 147 v-model="imageName"
148 append-icon="attach_file" 148 append-icon="attach_file"
149 multiple 149 multiple
150 ></v-text-field> 150 ></v-text-field>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs4 class="pt-4 subheading"> 156 <v-flex xs4 class="pt-4 subheading">
157 <label class="right">Upload File:</label> 157 <label class="right">Upload File:</label>
158 </v-flex> 158 </v-flex>
159 <v-flex xs5 class="ml-3"> 159 <v-flex xs5 class="ml-3">
160 <input 160 <input
161 type="file" 161 type="file"
162 style="display: none" 162 style="display: none"
163 ref="file" 163 ref="file"
164 @change="onFilePicked" 164 @change="onFilePicked"
165 /> 165 />
166 <v-text-field 166 <v-text-field
167 label="Select File" 167 label="Select File"
168 @click="pickFile" 168 @click="pickFile"
169 v-model="fileName" 169 v-model="fileName"
170 append-icon="attach_file" 170 append-icon="attach_file"
171 multiple 171 multiple
172 ></v-text-field> 172 ></v-text-field>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 <v-flex xs12 sm12> 176 <v-flex xs12 sm12>
177 <v-layout> 177 <v-layout>
178 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
179 <label class="right">Private:</label> 179 <label class="right">Private:</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs5 class="ml-3"> 181 <v-flex xs5 class="ml-3">
182 <v-checkbox v-model="editedItem.private"></v-checkbox> 182 <v-checkbox v-model="editedItem.private"></v-checkbox>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 <v-layout> 187 <v-layout>
188 <v-flex xs12 sm8 offset-sm2> 188 <v-flex xs12 sm8 offset-sm2>
189 <v-card-actions> 189 <v-card-actions>
190 <v-btn round dark @click.native="close">Cancel</v-btn> 190 <v-btn round dark @click.native="close">Cancel</v-btn>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> 192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn>
193 </v-card-actions> 193 </v-card-actions>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-container> 196 </v-container>
197 </v-form> 197 </v-form>
198 </v-card-text> 198 </v-card-text>
199 </v-card> 199 </v-card>
200 </v-dialog> 200 </v-dialog>
201 201
202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
203 203
204 <v-dialog v-model="dialog1" max-width="800px" scrollable> 204 <v-dialog v-model="dialog1" max-width="800px" scrollable>
205 <v-card style="height: 700px;"> 205 <v-card style="height: 700px;">
206 <v-toolbar color="grey lighten-2" flat> 206 <v-toolbar color="grey lighten-2" flat>
207 <v-spacer></v-spacer> 207 <v-spacer></v-spacer>
208 <v-toolbar-title> 208 <v-toolbar-title>
209 <h3>E-Books</h3> 209 <h3>E-Books</h3>
210 </v-toolbar-title> 210 </v-toolbar-title>
211 <v-spacer></v-spacer> 211 <v-spacer></v-spacer>
212 <v-icon @click="close1">close</v-icon> 212 <v-icon @click="close1">close</v-icon>
213 </v-toolbar> 213 </v-toolbar>
214 <v-card-text> 214 <v-card-text>
215 <v-container> 215 <v-container>
216 <v-layout wrap> 216 <v-layout wrap>
217 <v-flex sm12 xs12> 217 <v-flex sm12 xs12>
218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> 218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 </v-container> 221 </v-container>
222 </v-card-text> 222 </v-card-text>
223 </v-card> 223 </v-card>
224 </v-dialog> 224 </v-dialog>
225 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 225 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
226 <v-data-table 226 <v-data-table
227 :headers="headers" 227 :headers="headers"
228 :items="eBookData" 228 :items="eBookData"
229 :pagination.sync="pagination" 229 :pagination.sync="pagination"
230 :search="search" 230 :search="search"
231 > 231 >
232 <template slot="items" slot-scope="props"> 232 <template slot="items" slot-scope="props">
233 <td class="text-xs-center">{{ props.index + 1}}</td> 233 <td class="text-xs-center">{{ props.index + 1}}</td>
234 <td id="td" class="text-xs-center"> 234 <td id="td" class="text-xs-center">
235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> 235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" />
236 </td> 236 </td>
237 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 237 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
238 <td id="td" class="text-xs-center">{{ props.item.author}}</td> 238 <td id="td" class="text-xs-center">{{ props.item.author}}</td>
239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
240 240
241 <td class="text-xs-center"> 241 <td class="text-xs-center">
242 <span> 242 <span>
243 <img 243 <img
244 style="cursor:pointer; width:25px; height:18px; " 244 style="cursor:pointer; width:25px; height:18px; "
245 class="mr-5" 245 class="mr-5"
246 @click="profile(props.item)" 246 @click="profile(props.item)"
247 src="/static/icon/eye1.png" 247 src="/static/icon/eye1.png"
248 /> 248 />
249 <img 249 <img
250 style="cursor:pointer; width:20px; height:18px; " 250 style="cursor:pointer; width:20px; height:18px; "
251 class="mr-5" 251 class="mr-5"
252 @click="editItem(props.item)" 252 @click="editItem(props.item)"
253 src="/static/icon/edit1.png" 253 src="/static/icon/edit1.png"
254 /> 254 />
255 <img 255 <img
256 style="cursor:pointer;width:20px; height:20px; " 256 style="cursor:pointer;width:20px; height:20px; "
257 class="mr-5" 257 class="mr-5"
258 @click="deleteItem(props.item)" 258 @click="deleteItem(props.item)"
259 src="/static/icon/delete1.png" 259 src="/static/icon/delete1.png"
260 /> 260 />
261 </span> 261 </span>
262 </td> 262 </td>
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 </v-tab-item> 271 </v-tab-item>
272 272
273 <!-- ****** ADD MULTIPLE E-BOOK ****** --> 273 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
274 274
275 <v-tab-item> 275 <v-tab-item>
276 <v-container> 276 <v-container>
277 <v-snackbar 277 <v-snackbar
278 :timeout="timeout" 278 :timeout="timeout"
279 :top="y === 'top'" 279 :top="y === 'top'"
280 :right="x === 'right'" 280 :right="x === 'right'"
281 :vertical="mode === 'vertical'" 281 :vertical="mode === 'vertical'"
282 v-model="snackbar" 282 v-model="snackbar"
283 color="success" 283 color="success"
284 >{{ text }}</v-snackbar> 284 >{{ text }}</v-snackbar>
285 <v-flex xs12 sm12 class="my-4"> 285 <v-flex xs12 sm12 class="my-4">
286 <v-card flat> 286 <v-card flat>
287 <v-form ref="form" v-model="valid" lazy-validation> 287 <v-form ref="form" v-model="valid" lazy-validation>
288 <v-container fluid> 288 <v-container fluid>
289 <v-layout> 289 <v-layout>
290 <v-flex 290 <v-flex
291 xs12 291 xs12
292 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 292 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
293 > 293 >
294 <input 294 <input
295 type="file" 295 type="file"
296 style="display: none" 296 style="display: none"
297 ref="image" 297 ref="image"
298 accept="image/*" 298 accept="image/*"
299 @change="onImagePicked" 299 @change="onImagePicked"
300 /> 300 />
301 <v-layout justify-center> 301 <v-layout justify-center>
302 <v-flex v-if="files != ''"> 302 <v-flex v-if="files != ''">
303 <img :src="files" height="240" width="260px;" /> 303 <img :src="files" height="240" width="260px;" />
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 <img 306 <img
307 src="/static/icon/user.png" 307 src="/static/icon/user.png"
308 v-if="files ==''" 308 v-if="files ==''"
309 height="140" 309 height="140"
310 width="180px;" 310 width="180px;"
311 /> 311 />
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 class="pt-4 subheading"> 316 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Name:</label> 317 <label class="right">Name:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs4 class="ml-3"> 319 <v-flex xs4 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="addEBooks.name" 321 v-model="addEBooks.name"
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">Author:</label> 334 <label class="right">Author:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs4 class="ml-3"> 336 <v-flex xs4 class="ml-3">
337 <v-text-field 337 <v-text-field
338 v-model="addEBooks.author" 338 v-model="addEBooks.author"
339 placeholder="fill your Author Name" 339 placeholder="fill your Author Name"
340 name="name" 340 name="name"
341 type="text" 341 type="text"
342 :rules="titleRules" 342 :rules="titleRules"
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">Class:</label> 351 <label class="right">Class:</label>
352 </v-flex> 352 </v-flex>
353 <v-flex xs4 class="ml-3"> 353 <v-flex xs4 class="ml-3">
354 <v-select 354 <v-select
355 v-model="addEBooks.classId" 355 v-model="addEBooks.classId"
356 :items="addClass" 356 :items="addClass"
357 label="Select Class" 357 label="Select Class"
358 item-text="classNum" 358 item-text="classNum"
359 item-value="_id" 359 item-value="_id"
360 :rules="titleRules" 360 :rules="titleRules"
361 required 361 required
362 ></v-select> 362 ></v-select>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 </v-flex> 365 </v-flex>
366 <v-flex xs12> 366 <v-flex xs12>
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">Upload Image:</label> 369 <label class="right">Upload Image:</label>
370 </v-flex> 370 </v-flex>
371 <v-flex xs4 class="ml-3"> 371 <v-flex xs4 class="ml-3">
372 <v-text-field 372 <v-text-field
373 label="Select Image" 373 label="Select Image"
374 @click="pickImage" 374 @click="pickImage"
375 v-model="imageName" 375 v-model="imageName"
376 append-icon="attach_file" 376 append-icon="attach_file"
377 multiple 377 multiple
378 ></v-text-field> 378 ></v-text-field>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 </v-flex> 381 </v-flex>
382 <v-flex xs12> 382 <v-flex xs12>
383 <v-layout> 383 <v-layout>
384 <v-flex xs4 class="pt-4 subheading"> 384 <v-flex xs4 class="pt-4 subheading">
385 <label class="right">Upload File:</label> 385 <label class="right">Upload File:</label>
386 </v-flex> 386 </v-flex>
387 <v-flex xs4 class="ml-3"> 387 <v-flex xs4 class="ml-3">
388 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 388 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
389 <v-text-field 389 <v-text-field
390 label="Select File" 390 label="Select File"
391 @click="pickFile" 391 @click="pickFile"
392 v-model="fileName" 392 v-model="fileName"
393 append-icon="attach_file" 393 append-icon="attach_file"
394 multiple 394 multiple
395 ></v-text-field> 395 ></v-text-field>
396 </v-flex> 396 </v-flex>
397 </v-layout> 397 </v-layout>
398 </v-flex> 398 </v-flex>
399 <v-flex xs12> 399 <v-flex xs12>
400 <v-layout> 400 <v-layout>
401 <v-flex xs4 class="pt-3 subheading"> 401 <v-flex xs4 class="pt-3 subheading">
402 <label class="right">Private:</label> 402 <label class="right">Private:</label>
403 </v-flex> 403 </v-flex>
404 <v-flex xs4 class="ml-3"> 404 <v-flex xs4 class="ml-3">
405 <v-checkbox v-model="addEBooks.private"></v-checkbox> 405 <v-checkbox v-model="addEBooks.private"></v-checkbox>
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 sm7 offset-sm2> 410 <v-flex xs12 sm7 offset-sm2>
411 <v-card-actions> 411 <v-card-actions>
412 <v-btn @click="clear" round dark>clear</v-btn> 412 <v-btn @click="clear" round dark>clear</v-btn>
413 <v-spacer></v-spacer> 413 <v-spacer></v-spacer>
414 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 414 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
415 </v-card-actions> 415 </v-card-actions>
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 </v-container> 418 </v-container>
419 </v-form> 419 </v-form>
420 </v-card> 420 </v-card>
421 </v-flex> 421 </v-flex>
422 </v-container> 422 </v-container>
423 </v-tab-item> 423 </v-tab-item>
424 </v-tabs> 424 </v-tabs>
425 <div class="loader" v-if="showLoader"> 425 <div class="loader" v-if="showLoader">
426 <v-progress-circular indeterminate color="white"></v-progress-circular> 426 <v-progress-circular indeterminate color="white"></v-progress-circular>
427 </div> 427 </div>
428 </v-app> 428 </v-app>
429 </template> 429 </template>
430 430
431 <script> 431 <script>
432 import http from "@/Services/http.js"; 432 import http from "@/Services/http.js";
433 import Util from "@/util"; 433 import Util from "@/util";
434 434
435 export default { 435 export default {
436 data: () => ({ 436 data: () => ({
437 snackbar: false, 437 snackbar: false,
438 y: "top", 438 y: "top",
439 x: "right", 439 x: "right",
440 mode: "", 440 mode: "",
441 timeout: 3000, 441 timeout: 3000,
442 text: "", 442 text: "",
443 loading: false, 443 loading: false,
444 loadingUpadte: false, 444 loadingUpadte: false,
445 date: null, 445 date: null,
446 search: "", 446 search: "",
447 showLoader: false, 447 showLoader: false,
448 dialog: false, 448 dialog: false,
449 dialog1: false, 449 dialog1: false,
450 valid: true, 450 valid: true,
451 isActive: true, 451 isActive: true,
452 newActive: false, 452 newActive: false,
453 addClass: [], 453 addClass: [],
454 addSection: [], 454 addSection: [],
455 AddUsercredentials: {}, 455 AddUsercredentials: {},
456 pagination: { 456 pagination: {
457 rowsPerPage: 15 457 rowsPerPage: 15
458 }, 458 },
459 imageName: "", 459 imageName: "",
460 fileName: "", 460 fileName: "",
461 imageUrl: "", 461 imageUrl: "",
462 imageFile: "", 462 imageFile: "",
463 image: [], 463 image: [],
464 upload: "", 464 upload: "",
465 files: "", 465 files: "",
466 anyFile: "", 466 anyFile: "",
467 titleRules: [v => !!v || " Tilte is required"], 467 titleRules: [v => !!v || " Tilte is required"],
468 descriptionRules: [v => !!v || " Description is required"], 468 descriptionRules: [v => !!v || " Description is required"],
469 headers: [ 469 headers: [
470 { 470 {
471 align: "justify-center", 471 align: "justify-center",
472 text: "No", 472 text: "No",
473 sortable: false, 473 sortable: false,
474 value: "No" 474 value: "No"
475 }, 475 },
476 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 476 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
477 { text: "Name", vaue: "name", sortable: false, align: "center" }, 477 { text: "Name", vaue: "name", sortable: false, align: "center" },
478 { text: "Author", value: "author", sortable: false, align: "center" }, 478 { text: "Author", value: "author", sortable: false, align: "center" },
479 { 479 {
480 text: "Class", 480 text: "Class",
481 value: "classId", 481 value: "classId",
482 sortable: false, 482 sortable: false,
483 align: "center" 483 align: "center"
484 }, 484 },
485 { text: "Action", value: "", sortable: false, align: "center" } 485 { text: "Action", value: "", sortable: false, align: "center" }
486 ], 486 ],
487 eBookData: [], 487 eBookData: [],
488 editedIndex: -1, 488 editedIndex: -1,
489 addEBooks: { 489 addEBooks: {
490 private: false 490 private: false
491 }, 491 },
492 editedItem: {}, 492 editedItem: {},
493 token: "" 493 token: ""
494 }), 494 }),
495 methods: { 495 methods: {
496 pickImage() { 496 pickImage() {
497 this.$refs.image.click(); 497 this.$refs.image.click();
498 }, 498 },
499 pickFile() { 499 pickFile() {
500 this.$refs.file.click(); 500 this.$refs.file.click();
501 }, 501 },
502 onImagePicked(e) { 502 onImagePicked(e) {
503 // console.log(e) 503 // console.log(e)
504 const files = e.target.files; 504 const files = e.target.files;
505 /** fetch Image Name **/ 505 /** fetch Image Name **/
506 if (files[0] !== undefined) { 506 if (files[0] !== undefined) {
507 this.imageName = files[0].name; 507 this.imageName = files[0].name;
508 if (this.imageName.lastIndexOf(".") <= 0) { 508 if (this.imageName.lastIndexOf(".") <= 0) {
509 return; 509 return;
510 } 510 }
511 /** Select many image and showing many image add to news card **/ 511 /** Select many image and showing many image add to news card **/
512 const fr = new FileReader(); 512 const fr = new FileReader();
513 fr.readAsDataURL(files[0]); 513 fr.readAsDataURL(files[0]);
514 fr.addEventListener("load", () => { 514 fr.addEventListener("load", () => {
515 this.files = fr.result; 515 this.files = fr.result;
516 }); 516 });
517 } else { 517 } else {
518 this.imageName = ""; 518 this.imageName = "";
519 this.imageFile = ""; 519 this.imageFile = "";
520 this.files = ""; 520 this.files = "";
521 this.imageUrl = ""; 521 this.imageUrl = "";
522 } 522 }
523 }, 523 },
524 getEBooksList() { 524 getEBooksList() {
525 this.showLoader = true; 525 this.showLoader = true;
526 http() 526 http()
527 .get("/getEBooksList", { 527 .get("/getEBooksList", {
528 headers: { Authorization: "Bearer " + this.token } 528 headers: { Authorization: "Bearer " + this.token }
529 }) 529 })
530 .then(response => { 530 .then(response => {
531 this.eBookData = response.data.data; 531 this.eBookData = response.data.data;
532 this.showLoader = false; 532 this.showLoader = false;
533 }) 533 })
534 .catch(err => { 534 .catch(err => {
535 // console.log("err====>", err); 535 // console.log("err====>", err);
536 this.showLoader = false; 536 this.showLoader = false;
537 if (error.response.status === 401) { 537 if (error.response.status === 401) {
538 this.$router.replace({ path: "/" }); 538 this.$router.replace({ path: "/" });
539 this.$store.dispatch("setToken", null); 539 this.$store.dispatch("setToken", null);
540 this.$store.dispatch("Id", null); 540 this.$store.dispatch("Id", null);
541 } 541 }
542 }); 542 });
543 }, 543 },
544 onFilePicked(e) { 544 onFilePicked(e) {
545 // console.log(e) 545 // console.log(e)
546 const files = e.target.files; 546 const files = e.target.files;
547 /** fetch Image Name **/ 547 /** fetch Image Name **/
548 if (files[0] !== undefined) { 548 if (files[0] !== undefined) {
549 this.fileName = files[0].name; 549 this.fileName = files[0].name;
550 if (this.fileName.lastIndexOf(".") <= 0) { 550 if (this.fileName.lastIndexOf(".") <= 0) {
551 return; 551 return;
552 } 552 }
553 const fr = new FileReader(); 553 const fr = new FileReader();
554 fr.readAsDataURL(files[0]); 554 fr.readAsDataURL(files[0]);
555 fr.addEventListener("load", () => { 555 fr.addEventListener("load", () => {
556 this.anyFile = fr.result; 556 this.anyFile = fr.result;
557 // console.log(" this.anyFile Url", this.anyFile ) 557 // console.log(" this.anyFile Url", this.anyFile )
558 }); 558 });
559 } else { 559 } else {
560 this.anyFile = ""; 560 this.anyFile = "";
561 this.fileName = ""; 561 this.fileName = "";
562 } 562 }
563 }, 563 },
564 editItem(item) { 564 editItem(item) {
565 this.files = []; 565 this.files = [];
566 this.editedIndex = this.eBookData.indexOf(item); 566 this.editedIndex = this.eBookData.indexOf(item);
567 this.editedItem = Object.assign({}, item); 567 this.editedItem = Object.assign({}, item);
568 this.editedItem.className = item.classId.classNum; 568 this.editedItem.className = item.classId.classNum;
569 this.dialog = true; 569 this.dialog = true;
570 }, 570 },
571 profile(item) { 571 profile(item) {
572 this.editedIndex = this.eBookData.indexOf(item); 572 this.editedIndex = this.eBookData.indexOf(item);
573 this.editedItem = Object.assign({}, item); 573 this.editedItem = Object.assign({}, item);
574 this.dialog1 = true; 574 this.dialog1 = true;
575 }, 575 },
576 deleteItem(item) { 576 deleteItem(item) {
577 let deleteEBooks = { 577 let deleteEBooks = {
578 ebookId: item._id 578 ebookId: item._id
579 }; 579 };
580 http() 580 http()
581 .delete( 581 .delete(
582 "/deleteEBook", 582 "/deleteEBook",
583 confirm("Are you sure you want to delete this?") && { 583 confirm("Are you sure you want to delete this?") && {
584 params: deleteEBooks 584 params: deleteEBooks
585 } 585 }
586 ) 586 )
587 .then(response => { 587 .then(response => {
588 this.snackbar = true; 588 this.snackbar = true;
589 this.text = "Successfully delete Existing News"; 589 this.text = "Successfully delete Existing News";
590 this.getEBooksList(); 590 this.getEBooksList();
591 }) 591 })
592 .catch(error => { 592 .catch(error => {
593 this.snackbar = true; 593 this.snackbar = true;
594 this.text = error.response.data.message; 594 this.text = error.response.data.message;
595 }); 595 });
596 }, 596 },
597 activeTab(type) { 597 activeTab(type) {
598 switch (type) { 598 switch (type) {
599 case "existing": 599 case "existing":
600 this.newActive = false; 600 this.newActive = false;
601 this.isActive = true; 601 this.isActive = true;
602 break; 602 break;
603 603
604 default: 604 default:
605 this.newActive = true; 605 this.newActive = true;
606 this.isActive = false; 606 this.isActive = false;
607 break; 607 break;
608 } 608 }
609 }, 609 },
610 close() { 610 close() {
611 this.dialog = false; 611 this.dialog = false;
612 setTimeout(() => { 612 setTimeout(() => {
613 this.editedItem = Object.assign({}, this.defaultItem); 613 this.editedItem = Object.assign({}, this.defaultItem);
614 this.editedIndex = -1; 614 this.editedIndex = -1;
615 }, 300); 615 }, 300);
616 }, 616 },
617 close1() { 617 close1() {
618 this.dialog1 = false; 618 this.dialog1 = false;
619 }, 619 },
620 submit() { 620 submit() {
621 this.loading = true; 621 this.loading = true;
622 if (this.$refs.form.validate()) { 622 if (this.$refs.form.validate()) {
623 if (this.files) { 623 if (this.files) {
624 const [baseUrl, imageUrl] = this.files.split(/,/); 624 const [baseUrl, imageUrl] = this.files.split(/,/);
625 this.addEBooks.uploadCover = imageUrl; 625 this.addEBooks.uploadCover = imageUrl;
626 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 626 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
627 } 627 }
628 if (this.anyFile) { 628 if (this.anyFile) {
629 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 629 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
630 this.addEBooks.uploadFile = fileUrl; 630 this.addEBooks.uploadFile = fileUrl;
631 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 631 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
632 } 632 }
633 http() 633 http()
634 .post("/createEBook", this.addEBooks) 634 .post("/createEBook", this.addEBooks)
635 .then(response => { 635 .then(response => {
636 this.snackbar = true; 636 this.snackbar = true;
637 this.text = "New E-Book added successfully"; 637 this.text = "New E-Book added successfully";
638 this.addEBooks.uploadCover = ""; 638 this.addEBooks.uploadCover = "";
639 this.addEBooks.uploadFile = ""; 639 this.addEBooks.uploadFile = "";
640 this.files = ""; 640 this.files = "";
641 this.getEBooksList(); 641 this.getEBooksList();
642 this.loading = false; 642 this.loading = false;
643 this.clear(); 643 this.clear();
644 }) 644 })
645 .catch(error => { 645 .catch(error => {
646 this.snackbar = true; 646 this.snackbar = true;
647 this.text = error.response.data.message; 647 this.text = error.response.data.message;
648 }); 648 });
649 } 649 }
650 }, 650 },
651 clear() { 651 clear() {
652 this.$refs.form.reset(); 652 this.$refs.form.reset();
653 this.addEBooks.uploadCover = "" 653 this.addEBooks.uploadCover = ""
654 this.files = "" 654 this.files = ""
655 }, 655 },
656 save() { 656 save() {
657 this.loadingUpadte = true; 657 this.loadingUpadte = true;
658 if (this.files.length > 0) { 658 if (this.files.length > 0) {
659 const [baseUrl, imageUrl] = this.files.split(/,/); 659 const [baseUrl, imageUrl] = this.files.split(/,/);
660 this.editedItem.uploadCover = imageUrl; 660 this.editedItem.uploadCover = imageUrl;
661 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 661 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
662 } 662 }
663 if (this.anyFile) { 663 if (this.anyFile) {
664 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 664 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
665 this.editedItem.uploadFile = fileUrl; 665 this.editedItem.uploadFile = fileUrl;
666 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 666 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
667 } 667 }
668 this.editedItem.ebookId = this.editedItem._id; 668 this.editedItem.ebookId = this.editedItem._id;
669 http() 669 http()
670 .put("/updateEBook", this.editedItem) 670 .put("/updateEBook", this.editedItem)
671 .then(response => { 671 .then(response => {
672 this.loadingUpadte = false; 672 this.loadingUpadte = false;
673 this.snackbar = true; 673 this.snackbar = true;
674 this.text = "Successfully Edit Existing E-Book"; 674 this.text = "Successfully Edit Existing E-Book";
675 this.getEBooksList(); 675 this.getEBooksList();
676 this.editedItem.uploadFile = ""; 676 this.editedItem.uploadFile = "";
677 this.editedItem.uploadCover = ""; 677 this.editedItem.uploadCover = "";
678 this.anyFile = ""; 678 this.anyFile = "";
679 this.files = ""; 679 this.files = "";
680 this.close(); 680 this.close();
681 }) 681 })
682 .catch(error => { 682 .catch(error => {
683 this.loadingUpadte = false; 683 this.loadingUpadte = false;
684 this.snackbar = true; 684 this.snackbar = true;
685 this.text = error.response.data.message; 685 this.text = error.response.data.message;
686 // console.log(error); 686 // console.log(error);
687 }); 687 });
688 }, 688 },
689 getAllClass() { 689 getAllClass() {
690 http() 690 http()
691 .get("/getClassesList", { 691 .get("/getClassesList", {
692 headers: { Authorization: "Bearer " + this.token } 692 headers: { Authorization: "Bearer " + this.token }
693 }) 693 })
694 .then(response => { 694 .then(response => {
695 this.addClass = response.data.data; 695 this.addClass = response.data.data;
696 }) 696 })
697 .catch(err => { 697 .catch(err => {
698 // console.log("err====>", err); 698 // console.log("err====>", err);
699 // this.$router.replace({ path: "/" }); 699 // this.$router.replace({ path: "/" });
700 }); 700 });
701 } 701 }
702 }, 702 },
703 mounted() { 703 mounted() {
704 this.token = this.$store.state.token; 704 this.token = this.$store.state.token;
705 this.getEBooksList(); 705 this.getEBooksList();
706 this.getAllClass(); 706 this.getAllClass();
707 this.getBookData(); 707 // this.getBookData();
708 // this.editItem; 708 // this.editItem;
709 }, 709 },
710 created() { 710 created() {
711 this.$root.$on("app:search", search => { 711 this.$root.$on("app:search", search => {
712 this.search = search; 712 this.search = search;
713 }); 713 });
714 }, 714 },
715 beforeDestroy() { 715 beforeDestroy() {
716 // dont forget to remove the listener 716 // dont forget to remove the listener
717 this.$root.$off("app:search"); 717 this.$root.$off("app:search");
718 } 718 }
719 }; 719 };
720 </script> 720 </script>
721 <style scoped> 721 <style scoped>
722 .active { 722 .active {
723 background-color: gray; 723 background-color: gray;
724 color: white !important; 724 color: white !important;
725 } 725 }
726 .activebtn { 726 .activebtn {
727 color: black !important; 727 color: black !important;
728 } 728 }
729 </style> 729 </style>
src/pages/Mark/mark.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing Mark</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add Mark</v-tab>
19
20 <!-- ****** Edit Mark ****** -->
21
22 <v-tab-item>
23 <!-- <v-snackbar
24 :timeout="timeout"
25 :top="y === 'top'"
26 :right="x === 'right'"
27 :vertical="mode === 'vertical'"
28 v-model="snackbar"
29 color="success"
30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="800px" scrollable>
32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer>
35 <v-toolbar-title>
36 <h3>Edit Mark</h3>
37 </v-toolbar-title>
38 <v-spacer></v-spacer>
39 </v-toolbar>
40 <v-card-text style="height:670px;">
41 <v-form ref="form">
42 <v-container fluid>
43 <v-layout>
44 <v-flex xs12 sm12>
45 <v-layout>
46 <v-flex xs4 class="pt-4 subheading">
47 <label class="right">Exam Name:</label>
48 </v-flex>
49 <v-flex xs5 class="ml-3">
50 <v-select
51 :rules="examNameRules"
52 :items="examList"
53 v-model="editedItem.examName"
54 label="Select your Exam Name"
55 item-text="examName"
56 item-value="examName"
57 ></v-select>
58 </v-flex>
59 </v-layout>
60 </v-flex>
61 <v-flex xs12 sm12>
62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right">Class:</label>
65 </v-flex>
66 <v-flex xs5 class="ml-3">
67 <v-select
68 v-model="editedItem.classId"
69 label="Select your Class"
70 type="text"
71 :items="classList"
72 item-text="classNum"
73 item-value="_id"
74 @change="getSections(editedItem.classId)"
75 required
76 ></v-select>
77 </v-flex>
78 </v-layout>
79 </v-flex>
80 <v-flex xs12 sm12>
81 <v-layout>
82 <v-flex xs4 class="pt-4 subheading">
83 <label class="right">Section:</label>
84 </v-flex>
85 <v-flex xs5 class="ml-3">
86 <v-select
87 :items="addSection"
88 label="Select your section"
89 v-model="editedItem.sectionId"
90 item-text="name"
91 item-value="_id"
92 name="Select Section"
93 :rules="sectionRules"
94 required
95 ></v-select>
96 </v-flex>
97 </v-layout>
98 </v-flex>
99 <v-flex xs12 sm12>
100 <v-layout>
101 <v-flex xs4 class="pt-4 subheading">
102 <label class="right">Subject Name:</label>
103 </v-flex>
104 <v-flex xs5 class="ml-3">
105 <v-select
106 :items="subjects"
107 label="Select your Subject Name"
108 v-model="editedItem.subjectName"
109 item-text="subjectName"
110 item-value="subjectName"
111 name="Select Section"
112 :rules="sectionRules"
113 required
114 ></v-select>
115 </v-flex>
116 </v-layout>
117 </v-flex>
118 </v-layout>
119 <v-layout>
120 <v-flex xs12 sm8 offset-sm2>
121 <v-card-actions>
122 <v-btn round dark @click.native="close">Close</v-btn>
123 <v-spacer></v-spacer>
124 <v-btn round dark @click="save">Save</v-btn>
125 </v-card-actions>
126 </v-flex>
127 </v-layout>
128 </v-container>
129 </v-form>
130 </v-card-text>
131 </v-card>
132 </v-dialog>-->
133
134 <!-- ****** PROFILE VIEW Exam ****** -->
135
136 <!-- <v-dialog v-model="dialog1" max-width="600px">
137 <v-card>
138 <v-toolbar color="grey lighten-2" flat>
139 <v-spacer></v-spacer>
140 <v-toolbar-title>
141 <h3>Mark</h3>
142 </v-toolbar-title>
143 <v-spacer></v-spacer>
144 <v-icon @click="close1">close</v-icon>
145 </v-toolbar>
146 <v-card-text>
147 <v-container grid-list-md>
148 <v-layout wrap>
149 <v-flex>
150 <v-layout>
151 <v-flex xs5 sm6>
152 <h5 class="right my-1">
153 <b>Exam Name:</b>
154 </h5>
155 </v-flex>
156 <v-flex sm6 xs8>
157 <h5 class="my-1">{{ editedItem.examName }}</h5>
158 </v-flex>
159 </v-layout>
160 <v-layout>
161 <v-flex xs5 sm6>
162 <h5 class="right my-1">
163 <b>Class:</b>
164 </h5>
165 </v-flex>
166 <v-flex sm6 xs8>
167 <h5 class="my-1">{{ editedItem.classId }}</h5>
168 </v-flex>
169 </v-layout>
170 <v-layout>
171 <v-flex xs5 sm6>
172 <h5 class="right my-1">
173 <b>Section:</b>
174 </h5>
175 </v-flex>
176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
178 </v-flex>
179 </v-layout>
180 <v-layout>
181 <v-flex xs5 sm6>
182 <h5 class="right my-1">
183 <b>Subject Name:</b>
184 </h5>
185 </v-flex>
186 <v-flex sm6 xs8>
187 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
188 </v-flex>
189 </v-layout>
190 <v-layout>
191 <v-flex xs5 sm6>
192 <h5 class="right my-1">
193 <b>Date:</b>
194 </h5>
195 </v-flex>
196 <v-flex sm6 xs8>
197 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
198 </v-flex>
199 </v-layout>
200 <v-layout>
201 <v-flex xs5 sm6>
202 <h5 class="right my-1">
203 <b>Time From:</b>
204 </h5>
205 </v-flex>
206 <v-flex sm6 xs8>
207 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
208 </v-flex>
209 </v-layout>
210 <v-layout>
211 <v-flex xs5 sm6>
212 <h5 class="right my-1">
213 <b>Time To:</b>
214 </h5>
215 </v-flex>
216 <v-flex sm6 xs8>
217 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
218 </v-flex>
219 </v-layout>
220 <v-layout>
221 <v-flex xs5 sm6>
222 <h5 class="right my-1">
223 <b>Room:</b>
224 </h5>
225 </v-flex>
226 <v-flex sm6 xs8>
227 <h5 class="my-1">{{ editedItem.room }}</h5>
228 </v-flex>
229 </v-layout>
230 </v-flex>
231 </v-layout>
232 </v-container>
233 </v-card-text>
234 </v-card>
235 </v-dialog>-->
236
237 <v-snackbar
238 :timeout="timeout"
239 :top="y === 'top'"
240 :right="x === 'right'"
241 :vertical="mode === 'vertical'"
242 v-model="snackbar"
243 color="success"
244 >{{ text }}</v-snackbar>
245
246 <!-- ****** EXISTING MARK TABLE ****** -->
247
248 <v-card flat>
249 <v-flex xs12 sm12 lg12>
250 <v-layout wrap>
251 <v-flex xs12 sm12 lg3>
252 <v-layout>
253 <v-flex xs3 sm6 lg2 class="subheading mt-4">
254 <label class="right">Class:</label>
255 </v-flex>
256 <v-flex xs12 sm12 lg8 class="ml-2">
257 <v-select
258 v-model="getMark.classId"
259 label="Select your class"
260 type="text"
261 :items="classList"
262 item-text="classNum"
263 item-value="_id"
264 @change="getSections(getMark.classId)"
265 required
266 ></v-select>
267 </v-flex>
268 </v-layout>
269 </v-flex>
270 <v-flex xs12 sm12 lg3>
271 <v-layout>
272 <v-flex xs3 sm6 lg2 class="subheading mt-4">
273 <label class="right">Section:</label>
274 </v-flex>
275 <v-flex xs12 sm12 lg8 class="ml-2">
276 <v-select
277 :items="addSection"
278 label="Select your Section"
279 v-model="getMark.sectionId"
280 item-text="name"
281 item-value="_id"
282 name="Select Section"
283 required
284 ></v-select>
285 </v-flex>
286 </v-layout>
287 </v-flex>
288 <v-flex xs12 sm12 lg6>
289 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-4">Mark</v-btn>
290 </v-flex>
291 </v-layout>
292 </v-flex>
293 </v-card>
294 <v-data-table
295 :headers="headers"
296 :items="getStudentsList"
297 :pagination.sync="pagination"
298 :search="search"
299 >
300 <template slot="items" slot-scope="props">
301 <td class="text-xs-center">{{ props.index + 1}}</td>
302 <td id="td" class="text-xs-center">
303 <v-avatar>
304 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
305 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
306 </v-avatar>
307 </td>
308 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
309 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
310 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
311 <td class="text-xs-center">
312 <span>
313 <!-- <img
314 style="cursor:pointer; width:25px; height:18px; "
315 class="mr-5"
316 @click="profile(props.item)"
317 src="/static/icon/eye1.png"
318 />-->
319 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }">
320 <img
321 style="cursor:pointer; width:20px; height:18px; "
322 class="mr-5"
323 src="/static/icon/edit1.png"
324 />
325 </router-link>
326 <!-- <img
327 style="cursor:pointer;width:20px; height:20px; "
328 class="mr-5"
329 @click="deleteSchedule(props.item)"
330 src="/static/icon/delete1.png"
331 />-->
332 </span>
333 </td>
334 </template>
335 <v-alert
336 slot="no-results"
337 :value="true"
338 color="error"
339 icon="warning"
340 >Your search for "{{ search }}" found no results.</v-alert>
341 </v-data-table>
342 </v-tab-item>
343
344 <!-- ****** ADD Mark Schedule ****** -->
345
346 <v-tab-item>
347 <v-snackbar
348 :timeout="timeout"
349 :top="y === 'top'"
350 :right="x === 'right'"
351 :vertical="mode === 'vertical'"
352 v-model="snackbar"
353 :color="color"
354 >{{ text }}</v-snackbar>
355 <v-form ref="form" v-model="valid" lazy-validation>
356 <v-container fluid>
357 <v-flex xs12 sm12 lg12>
358 <v-layout wrap>
359 <v-flex xs12 sm12 lg10>
360 <v-layout wrap>
361 <v-flex xs12 sm12 lg3>
362 <v-flex xs3 sm2 lg2 class="subheading">
363 <label>Exam:</label>
364 </v-flex>
365 <v-flex xs12 sm12 lg10>
366 <v-select
367 label="Select your Exam Name"
368 :items="examList"
369 v-model="addMark.examId"
370 :rules="examRules"
371 item-text="examName"
372 item-value="_id"
373 ></v-select>
374 </v-flex>
375 </v-flex>
376 <v-flex xs12 sm12 lg3>
377 <v-flex xs3 sm6 lg2 class="subheading">
378 <label>Class:</label>
379 </v-flex>
380 <v-flex xs12 sm12 lg10 class>
381 <v-select
382 v-model="addMark.classId"
383 label="Select your class"
384 type="text"
385 :items="classList"
386 item-text="classNum"
387 item-value="_id"
388 :rules="classRules"
389 @change="getSections(addMark.classId)"
390 required
391 ></v-select>
392 </v-flex>
393 </v-flex>
394 <v-flex xs12 sm12 lg3>
395 <v-flex xs3 sm6 lg2 class="subheading">
396 <label>Section:</label>
397 </v-flex>
398 <v-flex xs12 sm12 lg10 class>
399 <v-select
400 :items="addSection"
401 label="Select your Section"
402 v-model="addMark.sectionId"
403 item-text="name"
404 item-value="_id"
405 name="Select Section"
406 :rules="sectionRules"
407 required
408 ></v-select>
409 </v-flex>
410 </v-flex>
411 <v-flex xs12 sm12 lg3>
412 <v-flex xs3 sm6 lg2 class="subheading">
413 <label>Subject:</label>
414 </v-flex>
415 <v-flex xs12 sm12 lg10 class>
416 <v-select
417 :items="subjects"
418 label="Select your Subject"
419 v-model="addMark.subjectId"
420 item-text="subjectName"
421 item-value="_id"
422 name="Select Section"
423 :rules="subjectRules"
424 required
425 ></v-select>
426 </v-flex>
427 </v-flex>
428 </v-layout>
429 </v-flex>
430 <v-flex xs12 sm12 lg2>
431 <v-flex xs12 sm12 lg12>
432 <v-btn
433 @click="findStudents"
434 round
435 dark
436 :loading="loading"
437 class="right mt-4"
438 >Mark</v-btn>
439 </v-flex>
440 </v-flex>
441 </v-layout>
442 </v-flex>
443 <v-card class="mt-4">
444 <v-data-table
445 :headers="headerOfMark"
446 :items="getStudentData"
447 :pagination.sync="pagination"
448 :search="search"
449 >
450 <template slot="items" slot-scope="props">
451 <td class="text-xs-center">{{ props.index + 1}}</td>
452 <td id="td" class="text-xs-center">
453 <v-avatar>
454 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
455 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
456 </v-avatar>
457 </td>
458 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
459 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
460 <td
461 id="td"
462 class="text-xs-center markTable"
463 v-for="marks in props.item.marksObtained"
464 >
465 <v-text-field v-model="marks.marksScored"></v-text-field>
466 </td>
467 </template>
468 <v-alert
469 slot="no-results"
470 :value="true"
471 color="error"
472 icon="warning"
473 >Your search for "{{ search }}" found no results.</v-alert>
474 </v-data-table>
475 </v-card>
476 <v-layout class="mt-2">
477 <v-flex xs12 sm12>
478 <v-layout>
479 <v-flex xs12>
480 <v-btn @click="submit" round dark :loading="loading" class="right">Add Mark</v-btn>
481 </v-flex>
482 </v-layout>
483 </v-flex>
484 </v-layout>
485 </v-container>
486 </v-form>
487 </v-tab-item>
488 </v-tabs>
489 <div class="loader" v-if="showLoader">
490 <v-progress-circular indeterminate color="white"></v-progress-circular>
491 </div>
492 </v-app>
493 </template>
494
495 <script>
496 import http from "@/Services/http.js";
497 import moment from "moment";
498
499 export default {
500 data: () => ({
501 snackbar: false,
502 date: null,
503 // editDate: false,
504 // menu1: false,
505 // menuB: false,
506 // menu2: false,
507 // menuEdit: false,
508 // timeToEdit: false,
509 color: "",
510 y: "top",
511 x: "right",
512 mode: "",
513 timeout: 10000,
514 text: "",
515 loading: false,
516 // date: null,
517 search: "",
518 showLoader: false,
519 dialog: false,
520 dialog1: false,
521 valid: true,
522 isActive: true,
523 newActive: false,
524 addSection: [],
525 pagination: {
526 rowsPerPage: 15
527 },
528 classRules: [v => !!v || "Class is required"],
529 sectionRules: [v => !!v || "section is required"],
530 subjectRules: [v => !!v || "Subject is required"],
531 examRules: [v => !!v || "Exam is required"],
532
533 headerOfMark: [
534 // {
535 // align: "justify-center",
536 // text: "#",
537 // sortable: false,
538 // value: "index"
539 // },
540 {
541 align: "justify-center",
542 text: "No",
543 sortable: false,
544 value: "No"
545 },
546 {
547 text: "Profile Pic",
548 vaue: "profilePicUrl",
549 sortable: false,
550 align: "center"
551 },
552 {
553 text: "Name",
554 vaue: "name",
555 sortable: false,
556 align: "center"
557 },
558 {
559 text: "Roll No.",
560 value: "rollNo",
561 sortable: false,
562 align: "center"
563 }
564 // {
565 // text: "Distribution Type",
566 // value: "distributionType",
567 // sortable: false,
568 // align: "center"
569 // },
570 // { text: "markValue", value: "markValue", sortable: false, align: "center" },
571 // {
572 // text: "Roll No.",
573 // align: "center",
574 // sortable: false,
575 // value: "rollNo"
576 // },
577 // { text: "Exam", value: "exam", sortable: false, align: "center" },
578 // {
579 // text: "ASSIGNMENT",
580 // value: "assignment",
581 // sortable: false,
582 // align: "center"
583 // }
584 ],
585 headers: [
586 {
587 align: "justify-center",
588 text: "No",
589 sortable: false,
590 value: "No"
591 },
592 {
593 text: "Profile Pic",
594 vaue: "profilePicUrl",
595 sortable: false,
596 align: "center"
597 },
598 {
599 text: "Name",
600 vaue: "name",
601 sortable: false,
602 align: "center"
603 },
604 {
605 text: "Roll No.",
606 value: "rollNo",
607 sortable: false,
608 align: "center"
609 },
610 {
611 text: "Email",
612 value: "email",
613 sortable: false,
614 align: "center"
615 },
616 { text: "Action", value: "", sortable: false, align: "center" }
617 ],
618 classList: [],
619 examList: [],
620 subjects: [],
621 addMark: {},
622 getMark: {},
623 // editedItem: {},
624 getScheduleData: {},
625 markData: [],
626 getStudentData: [],
627 getStudentsList: [],
628 token: ""
629 }),
630 methods: {
631 // dates: function(date) {
632 // return moment(date).format("MMMM DD, YYYY");
633 // },
634 // pickFile() {
635 // this.$refs.image.click();
636 // },
637 // getStudentsList() {
638 // this.showLoader = true;
639 // http()
640 // .get("/getStudentsList", {
641 // params: { classId: this.getScheduleData.classId },
642 // headers: { Authorization: "Bearer " + this.token }
643 // })
644 // .then(response => {
645 // this.getStudentsList = response.data.data;
646 // this.showLoader = false;
647 // })
648 // .catch(error => {
649 // // console.log("err====>", err);
650 // this.showLoader = false;
651 // this.loadingSearch = false;
652 // this.snackbar = true;
653 // this.text = error.response.data.message;
654 // if (error.response.status === 401) {
655 // this.$router.replace({ path: "/" });
656 // this.$store.dispatch("setToken", null);
657 // this.$store.dispatch("Id", null);
658 // }
659 // });
660 // },
661 // editItem(item) {
662 // console.log("item", item);
663 // this.editedIndex = this.ScheduleData.indexOf(item);
664 // this.editedItem = Object.assign({}, item);
665 // this.editedItem.classId = this.editedItem.classId._id;
666 // this.editedItem.sectionId = this.editedItem.sectionId._id;
667 // this.editedItem.date =
668 // this.editedItem.date != undefined
669 // ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
670 // : (this.editedItem.date = "");
671 // this.dialog = true;
672 // },
673 // profile(item) {
674 // this.editedIndex = this.ScheduleData.indexOf(item);
675 // this.editedItem = Object.assign({}, item);
676 // this.editedItem.classId = this.editedItem.classId.classNum;
677 // this.editedItem.sectionId = this.editedItem.sectionId.name;
678 // this.dialog1 = true;
679 // },
680 // deleteSchedule(item) {
681 // let deleteSchedule = {
682 // scheduleId: item._id
683 // };
684 // http()
685 // .delete(
686 // "/deleteSchedule",
687 // confirm("Are you sure you want to Delete this?") && {
688 // params: deleteSchedule
689 // }
690 // )
691 // .then(response => {
692 // this.snackbar = true;
693 // this.text = "Successfully Delete Schedule ";
694 // this.getStudentsList();
695 // })
696 // .catch(error => {
697 // // console.log(error);
698 // });
699 // },
700 activeTab(type) {
701 switch (type) {
702 case "existing":
703 this.newActive = false;
704 this.isActive = true;
705 break;
706
707 default:
708 this.newActive = true;
709 this.isActive = false;
710 break;
711 }
712 },
713 // close() {
714 // this.dialog = false;
715 // },
716 // close1() {
717 // this.dialog1 = false;
718 // },
719 // clear() {
720 // this.$refs.form.reset();
721 // this.disable = false;
722 // this.loading = false;
723 // },
724 // save() {
725 // this.editedItem.scheduleId = this.editedItem._id;
726 // http()
727 // .put("/updateSchedule", this.editedItem)
728 // .then(response => {
729 // this.snackbar = true;
730 // this.text = "Successfully Edit Exam Schedule";
731 // this.color = "green";
732 // this.getSchedulesList();
733 // this.close();
734 // })
735 // .catch(error => {
736 // this.snackbar = true;
737 // this.text = error.response.data.message;
738 // this.color = "red";
739 // });
740 // },
741 getClass() {
742 this.showLoader = true;
743 http()
744 .get("/getClassesList", {
745 headers: { Authorization: "Bearer " + this.token }
746 })
747 .then(response => {
748 this.classList = response.data.data;
749 this.showLoader = false;
750 // console.log("getClassesList=====>",this.addclass)
751 })
752 .catch(err => {
753 // console.log("err====>", err);
754 this.showLoader = false;
755 });
756 },
757 getSections(_id) {
758 this.showLoader = true;
759 for (let i = 0; i < this.classList.length; i++) {
760 if (_id == this.classList[i]._id) {
761 // console.log(this.classList[i].subjects);
762 this.subjects = this.classList[i].subjects;
763 }
764 }
765 http()
766 .get(
767 "/getSectionsList",
768 { params: { classId: _id } },
769 {
770 headers: { Authorization: "Bearer " + this.token }
771 }
772 )
773 .then(response => {
774 this.addSection = response.data.data;
775 this.showLoader = false;
776 })
777 .catch(err => {
778 // console.log("err====>", err);
779 });
780 },
781 getExamList() {
782 this.showLoader = true;
783 this.loadingSearch = true;
784 http()
785 .get("/getExamsList", {
786 headers: { Authorization: "Bearer " + this.token }
787 })
788 .then(response => {
789 this.examList = response.data.data;
790 this.showLoader = false;
791 this.loadingSearch = false;
792 })
793 .catch(error => {
794 // console.log("err====>", err);
795 this.showLoader = false;
796 this.loadingSearch = false;
797 this.snackbar = true;
798 this.text = error.response.data.message;
799 if (error.response.status === 401) {
800 this.$router.replace({ path: "/" });
801 this.$store.dispatch("setToken", null);
802 this.$store.dispatch("Id", null);
803 }
804 });
805 },
806 findStudents() {
807 if (this.$refs.form.validate()) {
808 this.showLoader = true;
809 http()
810 .get("/getStudentWithClass", {
811 params: {
812 classId: this.addMark.classId,
813 sectionId: this.addMark.sectionId
814 }
815 })
816 .then(response => {
817 this.getStudentData = response.data.data;
818 this.showLoader = false;
819 // console.log("getSectionsList=====>", response.data.data);
820 this.showLoader = true;
821 http()
822 .get("/getMarkDistributionsList", {
823 params: this.addMark
824 })
825 .then(response => {
826 this.showLoader = false;
827 // console.log("getSectionsList=====>", response.data.data);
828 for (var i = 0; i < response.data.data.length; i++) {
829 this.headerOfMark.push({
830 text:
831 response.data.data[i].distributionType +
832 " (" +
833 response.data.data[i].markValue +
834 ")",
835 sortable: false,
836 align: "center"
837 });
838 }
839 for (var i = 0; i < this.getStudentData.length; i++) {
840 this.getStudentData[i].marksObtained = [];
841 for (var j = 0; j < response.data.data.length; j++) {
842 this.getStudentData[i].marksObtained.push({
843 markDistributionId: response.data.data[j]._id,
844 marksScored: 0
845 });
846 }
847 }
848 console.log("this.getStudentData", this.getStudentData);
849 })
850 .catch(error => {
851 console.log("err====>", error);
852 this.showLoader = false;
853 });
854 })
855 .catch(error => {
856 console.log("err====>", error);
857 this.showLoader = false;
858 });
859 }
860 },
861 submit() {
862 let studentsMarks = [];
863 for (var j = 0; j < this.getStudentData.length; j++) {
864 studentsMarks.push({
865 studentId: this.getStudentData[j]._id,
866 marksObtained: this.getStudentData[j].marksObtained
867 });
868 }
869 // console.log("marksObtaine----marksObtained", studentsMarks);
870 let markData = {
871 examId: this.addMark.examId,
872 classId: this.addMark.classId,
873 sectionId: this.addMark.sectionId,
874 subjectId: this.addMark.subjectId,
875 studentsMarks: studentsMarks
876 };
877 console.log("markData", markData);
878 if (this.$refs.form.validate()) {
879 http()
880 .post("/createMark", markData)
881 .then(response => {
882 this.snackbar = true;
883 this.text = response.data.message;
884 this.color = "green";
885 this.loading = false;
886 this.clear();
887 })
888 .catch(error => {
889 if ((this.snackbar = true)) {
890 this.text = error.response.data.message;
891 this.color = "red";
892 }
893 });
894 }
895 },
896 getStudents() {
897 this.showLoader = true;
898 http()
899 .get("/getStudentWithClass", {
900 params: {
901 classId: this.getMark.classId,
902 sectionId: this.getMark.sectionId
903 }
904 })
905 .then(response => {
906 this.getStudentsList = response.data.data;
907 this.showLoader = false;
908 // console.log("getSectionsList=====>", response.data.data);
909 })
910 .catch(error => {
911 console.log("err====>", error);
912 this.showLoader = false;
913 });
914 }
915 },
916 mounted() {
917 this.token = this.$store.state.token;
918 // this.getSchedulesList();
919 this.getClass();
920 this.getExamList();
921 },
922 created() {
923 this.$root.$on("app:search", search => {
924 this.search = search;
925 });
926 },
927 beforeDestroy() {
928 // dont forget to remove the listener
929 this.$root.$off("app:search");
930 }
931 };
932 </script>
933 <style scoped>
934 .active {
935 background-color: gray;
936 color: white !important;
937 }
938 .activebtn {
939 color: black !important;
940 }
941 .markTable {
942 max-width: 80px !important;
943 }
944 </style>
src/pages/Mark/markDistribution.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing Mark Distribution</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add New Mark Distribution</v-tab>
19
20 <!-- ****** EDIT Mark Distribution ****** -->
21
22 <v-tab-item>
23 <v-snackbar
24 :timeout="timeout"
25 :top="y === 'top'"
26 :right="x === 'right'"
27 :vertical="mode === 'vertical'"
28 v-model="snackbar"
29 color="success"
30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer>
35 <v-toolbar-title>
36 <h3>Edit Mark Distribution</h3>
37 </v-toolbar-title>
38 <v-spacer></v-spacer>
39 </v-toolbar>
40 <v-card flat>
41 <v-form ref="form">
42 <v-container fluid>
43 <v-flex xs12 sm12>
44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Mark Distribution:</label>
47 </v-flex>
48 <v-flex xs8 sm6 class="ml-3">
49 <v-text-field
50 v-model="editedItem.distributionType"
51 placeholder="fill your Distribution Type"
52 ></v-text-field>
53 </v-flex>
54 </v-layout>
55 </v-flex>
56 <v-flex xs12 sm12>
57 <v-layout>
58 <v-flex xs4 class="pt-4 subheading">
59 <label class="right">Mark Value:</label>
60 </v-flex>
61 <v-flex xs8 sm6 class="ml-3">
62 <v-text-field
63 placeholder="fill your Mark Value"
64 v-model="editedItem.markValue"
65 ></v-text-field>
66 </v-flex>
67 </v-layout>
68 </v-flex>
69 <v-layout>
70 <v-flex xs12 sm10 offset-sm1>
71 <v-card-actions>
72 <v-btn round dark @click.native="close">Cancel</v-btn>
73 <v-spacer></v-spacer>
74 <v-btn round dark @click="save">Save</v-btn>
75 </v-card-actions>
76 </v-flex>
77 </v-layout>
78 </v-container>
79 </v-form>
80 </v-card>
81 </v-flex>
82 </v-dialog>
83 <!-- ****** EXISTING MARK DISTRIBUTATION TABLE ****** -->
84 <v-data-table
85 :headers="headers"
86 :items="markList"
87 :pagination.sync="pagination"
88 :search="search"
89 >
90 <template slot="items" slot-scope="props">
91 <td id="tabeleData" class="text-xs-center">{{ props.index + 1 }}</td>
92 <td id="tabeleData" class="text-xs-center">{{ props.item.distributionType}}</td>
93 <td id="tabeleData" class="text-xs-center linkCover">{{ props.item.markValue}}</td>
94
95 <td id="tabeleData" class="text-xs-center">
96 <span>
97 <img
98 style="cursor:pointer; width:20px; height:18px; "
99 class="mr-5"
100 @click="editItem(props.item)"
101 src="/static/icon/edit1.png"
102 />
103 <img
104 style="cursor:pointer;width:20px; height:20px; "
105 class="mr-5"
106 @click="deleteItem(props.item)"
107 src="/static/icon/delete1.png"
108 />
109 </span>
110 </td>
111 </template>
112 <v-alert
113 slot="no-results"
114 :value="true"
115 color="error"
116 icon="warning"
117 >Your search for "{{ search }}" found no results.</v-alert>
118 </v-data-table>
119 </v-tab-item>
120
121 <!-- ****** ADD MULTIPLE REMINDER ****** -->
122
123 <v-tab-item>
124 <v-container>
125 <v-snackbar
126 :timeout="timeout"
127 :top="y === 'top'"
128 :right="x === 'right'"
129 :vertical="mode === 'vertical'"
130 v-model="snackbar"
131 color="success"
132 >{{ text }}</v-snackbar>
133 <v-flex xs12 sm8 class="top" offset-sm2>
134 <v-card flat>
135 <v-form ref="form" v-model="valid" lazy-validation>
136 <v-container fluid>
137 <v-flex xs12>
138 <v-layout>
139 <v-flex xs4 class="pt-4 subheading">
140 <label class="right">Mark Distribution:</label>
141 </v-flex>
142 <v-flex xs8 sm4 class="ml-3">
143 <v-text-field
144 v-model="mark.distributionType"
145 placeholder="fill your Mark Distribution"
146 :rules="markDistributionRules"
147 ></v-text-field>
148 </v-flex>
149 </v-layout>
150 </v-flex>
151 <v-flex xs12>
152 <v-layout>
153 <v-flex xs4 class="pt-4 subheading">
154 <label class="right">Mark Value:</label>
155 </v-flex>
156 <v-flex xs8 sm4 class="ml-3">
157 <v-text-field
158 placeholder="fill your Mark Value"
159 :rules="markValueRules"
160 v-model="mark.markValue"
161 type="text"
162 required
163 ></v-text-field>
164 </v-flex>
165 </v-layout>
166 </v-flex>
167 <v-layout>
168 <v-flex xs12 sm12>
169 <v-layout>
170 <v-flex xs4>
171 <v-btn @click="clear" round class="right" dark>clear</v-btn>
172 </v-flex>
173 <v-flex xs8 sm4>
174 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
175 </v-flex>
176 </v-layout>
177 </v-flex>
178 </v-layout>
179 </v-container>
180 </v-form>
181 </v-card>
182 </v-flex>
183 </v-container>
184 </v-tab-item>
185 </v-tabs>
186 <v-snackbar
187 :timeout="timeout"
188 :top="y === 'top'"
189 :right="x === 'right'"
190 :vertical="mode === 'vertical'"
191 v-model="snackbar"
192 color="success"
193 >{{ text }}</v-snackbar>
194 <div class="loader" v-if="showLoader">
195 <v-progress-circular indeterminate color="white"></v-progress-circular>
196 </div>
197 </v-app>
198 </template>
199
200 <script>
201 import http from "@/Services/http.js";
202 import Util from "@/util";
203
204 export default {
205 data: () => ({
206 snackbar: false,
207 y: "top",
208 x: "right",
209 mode: "",
210 timeout: 3000,
211 text: "",
212 loading: false,
213 search: "",
214 showLoader: false,
215 dialog: false,
216 valid: true,
217 isActive: true,
218 newActive: false,
219 pagination: {
220 rowsPerPage: 15
221 },
222 markDistributionRules: [v => !!v || " Mark Distribution type is required"],
223 markValueRules: [v => !!v || "Mark Value is required"],
224 headers: [
225 {
226 text: "No",
227 align: "center",
228 sortable: false,
229 value: "No"
230 },
231 {
232 text: " Mark Distribution Type",
233 value: " distributionType",
234 sortable: false,
235 align: "center"
236 },
237 {
238 text: " Mark Value",
239 value: "markValue",
240 sortable: false,
241 align: "center"
242 },
243 { text: "Action", value: "", sortable: false, align: "center" }
244 ],
245 markList: [],
246 editedIndex: -1,
247 mark: {},
248 editedItem: {},
249 token: ""
250 }),
251 methods: {
252 getMarkDistributions() {
253 this.showLoader = true;
254 http()
255 .get("/getMarkDistributionsList", {
256 headers: { Authorization: "Bearer " + this.token }
257 })
258 .then(response => {
259 this.markList = response.data.data;
260 this.showLoader = false;
261 })
262 .catch(error => {
263 this.showLoader = false;
264 // if (error.response.status === 401) {
265 // this.$router.replace({ path: "/" });
266 // this.$store.dispatch("setToken", null);
267 // this.$store.dispatch("Id", null);
268 // }
269 });
270 },
271 editItem(item) {
272 this.editedIndex = this.markList.indexOf(item);
273 this.editedItem = Object.assign({}, item);
274 this.dialog = true;
275 },
276 deleteItem(item) {
277 let deleteParticularMark = {
278 markDistributionId: item._id
279 };
280 http()
281 .delete(
282 "/deleteMarkDistribution",
283 confirm("Are you sure you want to delete this?") && {
284 params: deleteParticularMark
285 }
286 )
287 .then(response => {
288 this.snackbar = true;
289 this.text = response.data.message;
290 this.getMarkDistributions();
291 })
292 .catch(error => {
293 console.log(error);
294 });
295 },
296 activeTab(type) {
297 switch (type) {
298 case "existing":
299 this.newActive = false;
300 this.isActive = true;
301 break;
302
303 default:
304 this.newActive = true;
305 this.isActive = false;
306 break;
307 }
308 },
309 close() {
310 this.dialog = false;
311 setTimeout(() => {
312 this.editedItem = Object.assign({}, this.defaultItem);
313 this.editedIndex = -1;
314 }, 300);
315 },
316 submit() {
317 if (this.$refs.form.validate()) {
318 this.loading = true;
319 http()
320 .post("/createMarkDistribution", this.mark)
321 .then(response => {
322 this.snackbar = true;
323 this.text = response.data.message;
324 this.getMarkDistributions();
325 this.clear();
326 this.loading = false;
327 })
328 .catch(error => {
329 this.snackbar = true;
330 this.text = error.response.data.message;
331 this.loading = false;
332 });
333 }
334 },
335 clear() {
336 this.$refs.form.reset();
337 },
338 save() {
339 (this.editedItem.markDistributionId = this.editedItem._id),
340 http()
341 .put("/updateMarkDistribution", this.editedItem)
342 .then(response => {
343 this.snackbar = true;
344 this.text = "Successfully Edit Notification";
345 this.getMarkDistributions();
346 this.close();
347 })
348 .catch(error => {
349 console.log(error);
350 });
351 }
352 },
353 mounted() {
354 this.token = this.$store.state.token;
355 this.getMarkDistributions();
356 },
357 created() {
358 this.$root.$on("app:search", search => {
359 this.search = search;
360 });
361 },
362 beforeDestroy() {
363 // dont forget to remove the listener
364 this.$root.$off("app:search");
365 }
366 };
367 </script>
368 <style scoped>
369 #tabeleData {
370 border: 1px solid #dddddd;
371 text-align: left;
372 padding: 8px 0px;
373 max-width: 200px !important;
374 }
375 .active {
376 background-color: gray;
377 color: white !important;
378 }
379 .activebtn {
380 color: black !important;
381 }
382 </style>
src/pages/Mark/promotion.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="login">
3 <v-container fluid>
4 <v-card class="px-3 grey lighten-2" flat>
5 <v-flex xs12>
6 <v-layout wrap>
7 <v-flex xs12 sm12 md3>
8 <!-- <v-layout> -->
9 <v-flex md12 class="mt-4 body-1">
10 <label>Academic Year :</label>
11 </v-flex>
12 <v-flex md10>
13 <v-select :items="acedemicYear" label="Select Academic Year"></v-select>
14 </v-flex>
15 <!-- </v-layout> -->
16 </v-flex>
17 <v-flex xs12 sm12 md3>
18 <!-- <v-layout> -->
19 <v-flex md12 class="mt-4 body-1">
20 <label class>Class :</label>
21 </v-flex>
22 <v-flex md10 class="ml-2">
23 <v-select :items="acedemicYear" label="Select Academic Year"></v-select>
24 </v-flex>
25 <!-- </v-layout> -->
26 </v-flex>
27 <v-flex xs12 sm12 md3>
28 <v-flex md12 class="mt-4 body-1">
29 <label>Promotion Academic Year :</label>
30 </v-flex>
31 <v-flex md10>
32 <v-select :items="acedemicYear" label="Select Promotion Academic Year"></v-select>
33 </v-flex>
34 </v-flex>
35 <v-flex xs12 sm12 md3>
36 <v-flex md12 class="mt-4 body-1">
37 <label class>Promotion Class :</label>
38 </v-flex>
39 <v-flex md10 class="ml-2">
40 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
41 </v-flex>
42 </v-flex>
43 </v-layout>
44 </v-flex>
45 </v-card>
46 <v-container class="pb-0 pt-5">
47 <v-card class="px-3 grey lighten-2" flat>
48 <v-flex xs12>
49 <v-layout>
50 <v-flex xs12 sm12 md12>
51 <v-layout>
52 <!-- <p>{{ radios || 'null' }}</p> -->
53 <v-radio-group v-model="radios" :mandatory="false">
54 <v-layout>
55 <v-flex xs12 sm12 md6>
56 <v-layout>
57 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio>
58 </v-layout>
59 </v-flex>
60 <v-flex xs12 sm12 md6>
61 <v-layout>
62 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio>
63 </v-layout>
64 </v-flex>
65 </v-layout>
66 </v-radio-group>
67 </v-layout>
68 </v-flex>
69 </v-layout>
70 </v-flex>
71 </v-card>
72 </v-container>
73 <v-container fluid>
74 <!-- <v-flex xs12> -->
75 <v-layout wrap>
76 <v-flex xs12 sm12 md6>
77 <v-layout>
78 <v-flex xs12 sm12 md11>
79 <v-card class="px-3 grey lighten-2" flat>
80 <v-layout wrap>
81 <v-flex xs12 sm12 md5 class="mt-4 body-1">
82 <label>Exam</label>
83 </v-flex>
84 <v-flex sm12 xs12 md7>
85 <!-- <p>{{ selected }}</p> -->
86 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox>
87 <v-checkbox
88 v-model="selected"
89 label="SECOND TERMINAL"
90 value="Jacob"
91 class="mt-0"
92 ></v-checkbox>
93 <v-checkbox v-model="selected" label="Test07" value="Jacob" class="mt-0"></v-checkbox>
94 </v-flex>
95 </v-layout>
96 </v-card>
97 </v-flex>
98 </v-layout>
99 </v-flex>
100 <v-flex xs12 sm12 md6>
101 <v-layout wrap>
102 <v-flex xs12 sm12 md12>
103 <v-card class="px-3 grey lighten-2" flat height="160">
104 <v-layout wrap>
105 <v-flex xs12 sm12 md5 class="mt-4 body-1">
106 <label>Mark Percentage</label>
107 </v-flex>
108 <v-flex xs12 sm12 md7>
109 <!-- <p>{{ selected }}</p> -->
110 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox>
111 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox>
112 </v-flex>
113 </v-layout>
114 </v-card>
115 </v-flex>
116 </v-layout>
117 </v-flex>
118 </v-layout>
119 </v-container>
120 <v-card class="px-3 grey lighten-2" flat>
121 <v-flex xs12>
122 <v-layout wrap>
123 <v-flex xs12 sm12 md3>
124 <v-flex md12 class="mt-4 body-1">
125 <label>HINDI Pass Mark :</label>
126 </v-flex>
127 <v-flex md10>
128 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field>
129 </v-flex>
130 </v-flex>
131 <v-flex xs12 sm12 md3>
132 <v-flex md12 class="mt-4 body-1">
133 <label class>ENGLISH Pass Mark :</label>
134 </v-flex>
135 <v-flex md10 class="ml-2">
136 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field>
137 </v-flex>
138 </v-flex>
139 <v-flex xs12 sm12 md3>
140 <v-flex md12 class="mt-4 body-1">
141 <label>MATHEMATICS Pass Mark :</label>
142 </v-flex>
143 <v-flex md10>
144 <v-text-field v-model="passmark.mathematics" placeholder="fill Mathematics Pass Mark"></v-text-field>
145 </v-flex>
146 </v-flex>
147 <!-- <v-flex xs12 sm12 md3>
148 <v-flex md12 class="mt-4 body-1">
149 <label class>Promotion Class :</label>
150 </v-flex>
151 <v-flex md10 class="ml-2">
152 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
153 </v-flex>
154 </v-flex>-->
155 </v-layout>
156 </v-flex>
157 </v-card>
158 <v-layout>
159 <v-flex xs10 sm10 md4 class="mx-auto mt-4">
160 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn>
161 </v-flex>
162 </v-layout>
163 </v-container>
164 </v-app>
165 </template>
166
167 <script>
168 export default {
169 data() {
170 return {
171 radios: "radio-1",
172 acedemicYear: [],
173 passmark: {
174 hindi: "40",
175 english: "40",
176 mathematics: "40"
177 },
178 selected: ["John"]
179 };
180 }
181 };
182 </script>
src/pages/Mark/viewMark.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** -->
4 <v-container fluid grid-list-md>
5 <v-flex xs12 sm12>
6 <v-container fluid>
7 <v-layout wrap>
8 <v-flex xs12 sm12 md3 class="mt-4">
9 <v-card flat>
10 <v-toolbar dark class="fixcolors" flat>
11 <v-spacer></v-spacer>
12 <v-toolbar-title>
13 <h3>Profile</h3>
14 </v-toolbar-title>
15 <v-spacer></v-spacer>
16 </v-toolbar>
17 <v-card-text>
18 <v-container>
19 <v-layout wrap v-for="(mark,i) in markData" :key="i">
20 <v-flex xs12>
21 <v-layout>
22 <v-flex
23 xs12
24 class="text-xs-center text-sm-center text-md-center text-lg-center"
25 >
26 <v-avatar size="100px">
27 <img
28 src="/static/icon/user.png"
29 v-if="!mark.studentsMarks[0].studentId.profilePicUrl"
30 />
31 <img
32 :src="mark.studentsMarks[0].studentId.profilePicUrl"
33 v-else-if="mark.studentsMarks[0].studentId.profilePicUrl"
34 />
35 </v-avatar>
36 </v-flex>
37 </v-layout>
38 <v-layout>
39 <v-flex xs12 sm12>
40 <h3 class="text-xs-center">
41 <b>{{ mark.studentsMarks[0].studentId.name }}</b>
42 </h3>
43 <p class="text-xs-center grey--text">Student</p>
44 </v-flex>
45 </v-layout>
46 <v-layout style="border: 1px solid lightgrey;">
47 <v-flex xs6 sm6 class="py-0">
48 <h4 class="right">
49 <b>Roll No :</b>
50 </h4>
51 </v-flex>
52 <v-flex sm6 xs6 class="py-0">
53 <h4>{{ mark.studentsMarks[0].studentId.rollNo }}</h4>
54 </v-flex>
55 </v-layout>
56 <v-layout style="border: 1px solid lightgrey;">
57 <v-flex xs6 sm6 class="py-0">
58 <h4 class="right">
59 <b>Class :</b>
60 </h4>
61 </v-flex>
62 <v-flex sm6 xs6 class="right py-0">
63 <h4>{{ mark.classId.classNum }}</h4>
64 </v-flex>
65 </v-layout>
66 <v-layout style="border: 1px solid lightgrey;">
67 <v-flex xs6 sm6 class="right py-0">
68 <h4 class="right">
69 <b>Section :</b>
70 </h4>
71 </v-flex>
72 <v-flex sm6 xs6 class="right py-0">
73 <h4>{{ mark.sectionId.name}}</h4>
74 </v-flex>
75 </v-layout>
76 </v-flex>
77 </v-layout>
78 </v-container>
79 </v-card-text>
80 </v-card>
81 </v-flex>
82 <v-flex xs12 sm12 md9 class="mt-4">
83 <v-card>
84 <v-toolbar dark class="fixcolors" flat>
85 <v-spacer></v-spacer>
86 <v-toolbar-title>
87 <h3>Mark</h3>
88 </v-toolbar-title>
89 <v-spacer></v-spacer>
90 </v-toolbar>
91 <v-card-title
92 v-for="(markList,i) in markData"
93 :key="i"
94 class="subheading"
95 >{{ markList.examId.examName }}</v-card-title>
96 <table class="feeTypeTable tableRsponsive">
97 <tr class="info white--text">
98 <th rowspan="2">Subject</th>
99 <th
100 colspan="2"
101 v-for="(markDistribution,i) in markDistributions"
102 :key="i "
103 >{{ markDistribution.markDistributionId.distributionType}}</th>
104 <!-- <th colspan="2">ASSIGNMENT</th> -->
105 <th colspan="3">Total</th>
106 </tr>
107 <tr class="info white--text">
108 <th
109 class="bg-sky"
110 v-for="(markDistribution,i) in markDistributions"
111 :key="i"
112 >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th>
113 <th
114 class="bg-sky-light"
115 v-for="(markDistribution,i) in markDistributions"
116 :key="i"
117 >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th>
118 <th class="bg-sky">Mark</th>
119 <th class="bg-purple">Point</th>
120 <th class="bg-skyDark">Grade</th>
121 </tr>
122 <!-- </tr> -->
123 <tr v-for="(mark,i) in markData" :key="i">
124 <td>{{mark.classId.subjects[0].subjectName}}</td>
125 <td
126 v-for="(markDistribution,i) in markParticularDistributionData"
127 :key="i"
128 >{{ markDistribution }}</td>
129 <!-- <td>
130 10
131 </td>
132 <td>
133 10
134 </td>
135 <td>
136 83
137 </td>
138 <td>
139 8
140 </td>
141 <td>B
142 </td>-->
143 </tr>
144 <!-- <tfoot>
145 <tr>
146 <td colspan="2">Total:</td>
147 <td></td>
148 <td></td>
149 <td></td>
150 <td></td>
151 </tr>
152 </tfoot>-->
153 </table>
154 </v-card>
155 </v-flex>
156 </v-layout>
157 </v-container>
158 </v-flex>
159 </v-container>
160 <div class="loader" v-if="showLoader">
161 <v-progress-circular indeterminate color="white"></v-progress-circular>
162 </div>
163 </v-app>
164 </template>
165
166 <script>
167 import http from "@/Services/http.js";
168 import moment from "moment";
169
170 export default {
171 data: () => ({
172 showLoader: false,
173 markData: [],
174 token: "",
175 markDistributions: [],
176 markParticularDistributionData: []
177 }),
178 mounted() {
179 this.token = this.$store.state.token;
180 this.getMarkList();
181 },
182 methods: {
183 getMarkList() {
184 this.showLoader = true;
185 http()
186 .get("/getParticularMark", {
187 params: { studentId: this.$route.params.markId },
188 headers: { Authorization: "Bearer " + this.token }
189 })
190 .then(response => {
191 this.markData = response.data.data;
192 for (let i = 0; i < this.markData.length; i++) {
193 for (let j = 0; j < this.markData[i].studentsMarks.length; j++) {
194 // console.log("this.studentsMarksSSSSSSSSSSSSS",this.markData[i].studentsMarks[j].marksObtained)
195
196 this.markDistributions = this.markData[i].studentsMarks[
197 j
198 ].marksObtained;
199 for (
200 let k = 0;
201 k < this.markData[i].studentsMarks[j].marksObtained.length;
202 k++
203 ) {
204 this.markParticularDistributionData.push(
205 this.markData[i].studentsMarks[j].marksObtained[k]
206 .marksScored
207 );
208 this.markParticularDistributionData.push(
209 this.markData[i].studentsMarks[j].marksObtained[k]
210 .markDistributionId.markValue,
211 );
212 console.log(
213 "this.markParticularDistributionData",
214 this.markParticularDistributionData
215 );
216 }
217 }
218 }
219 this.showLoader = false;
220 })
221 .catch(error => {
222 // console.log("err====>", err);
223 this.showLoader = false;
224 this.snackbar = true;
225 this.text = error.response.data.message;
226 if (error.response.status === 401) {
227 this.$router.replace({ path: "/" });
228 this.$store.dispatch("setToken", null);
229 this.$store.dispatch("Id", null);
230 }
231 });
232 }
233 }
234 };
235 </script>
236
237 <style scoped>
238 table {
239 border-collapse: collapse;
240 border: 1px solid #e2e7eb;
241 }
242
243 th,
244 td {
245 border: 1px solid #e2e7eb;
246 padding: 10px;
247 text-align: center;
248 }
249 table.feeTypeTable {
250 table-layout: auto !important;
251 width: 100% !important;
252 }
253 .bg-sky {
254 background-color: #98b2cc !important;
255 }
256 .bg-sky-light {
257 background-color: #89a0b8;
258 }
259 .bg-purple {
260 background-color: #9583ac;
261 }
262 .bg-skyDark {
263 background-color: #956785;
264 }
265 @media screen and (max-width: 380px) {
266 .tableRsponsive {
267 display: block;
268 position: relative;
269 overflow: scroll;
270 }
271 }
272 </style>
src/pages/Report/markSheetReport.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-snackbar
4 :timeout="timeout"
5 :top="y === 'top'"
6 :right="x === 'right'"
7 :vertical="mode === 'vertical'"
8 v-model="snackbar"
9 color="success"
10 >{{ text }}</v-snackbar>
11
12 <!-- ****** Mark Sheet Report TABLE****** -->
13 <v-card flat>
14 <v-card-actions>
15 <v-layout>
16 <h4 class="right mt-2 ml-2">Mark Sheet Report</h4>
17 </v-layout>
18 <v-spacer></v-spacer>
19 </v-card-actions>
20 </v-card>
21 <v-card flat>
22 <v-flex xs12 sm12 lg12>
23 <v-layout wrap>
24 <v-flex xs12 sm12 lg3>
25 <v-layout>
26 <v-flex xs3 sm6 lg2 class="subheading mt-4">
27 <label class="right">Exam:</label>
28 </v-flex>
29 <v-flex xs12 sm12 lg8 class="ml-2">
30 <v-select
31 v-model="getMark.exam"
32 label="Select your Exam"
33 type="text"
34 :items="examList"
35 item-text="classNum"
36 item-value="_id"
37 @change="getSections(getMark.classId)"
38 required
39 ></v-select>
40 </v-flex>
41 </v-layout>
42 </v-flex>
43 <v-flex xs12 sm12 lg3>
44 <v-layout>
45 <v-flex xs3 sm6 lg2 class="subheading mt-4">
46 <label class="right">Class:</label>
47 </v-flex>
48 <v-flex xs12 sm12 lg8 class="ml-2">
49 <v-select
50 v-model="getMark.classId"
51 label="Select your class"
52 type="text"
53 :items="classList"
54 item-text="classNum"
55 item-value="_id"
56 @change="getSections(getMark.classId)"
57 required
58 ></v-select>
59 </v-flex>
60 </v-layout>
61 </v-flex>
62 <v-flex xs12 sm12 lg3>
63 <v-layout>
64 <v-flex xs3 sm6 lg2 class="subheading mt-4">
65 <label class="right">Section:</label>
66 </v-flex>
67 <v-flex xs12 sm12 lg8 class="ml-2">
68 <v-select
69 :items="addSection"
70 label="Select your Section"
71 v-model="getMark.sectionId"
72 item-text="name"
73 item-value="_id"
74 name="Select Section"
75 required
76 ></v-select>
77 </v-flex>
78 </v-layout>
79 </v-flex>
80 <v-flex xs12 sm12 lg3>
81 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-3">Get Report</v-btn>
82 </v-flex>
83 </v-layout>
84 </v-flex>
85 </v-card>
86 <v-data-table
87 :headers="headers"
88 :items="getStudentsList"
89 :pagination.sync="pagination"
90 :search="search"
91 >
92 <template slot="items" slot-scope="props">
93 <td class="text-xs-center">{{ props.index + 1}}</td>
94 <td id="td" class="text-xs-center">
95 <v-avatar>
96 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
97 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
98 </v-avatar>
99 </td>
100 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
101 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
102 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
103 <td class="text-xs-center">
104 <span>
105 <!-- <img
106 style="cursor:pointer; width:25px; height:18px; "
107 class="mr-5"
108 @click="profile(props.item)"
109 src="/static/icon/eye1.png"
110 />-->
111 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }">
112 <img
113 style="cursor:pointer; width:20px; height:18px; "
114 class="mr-5"
115 src="/static/icon/edit1.png"
116 />
117 </router-link>
118 <!-- <img
119 style="cursor:pointer;width:20px; height:20px; "
120 class="mr-5"
121 @click="deleteSchedule(props.item)"
122 src="/static/icon/delete1.png"
123 />-->
124 </span>
125 </td>
126 </template>
127 <v-alert
128 slot="no-results"
129 :value="true"
130 color="error"
131 icon="warning"
132 >Your search for "{{ search }}" found no results.</v-alert>
133 </v-data-table>
134 <div class="loader" v-if="showLoader">
135 <v-progress-circular indeterminate color="white"></v-progress-circular>
136 </div>
137 </v-app>
138 </template>
139
140 <script>
141 import http from "@/Services/http.js";
142 import moment from "moment";
143
144 export default {
145 data: () => ({
146 snackbar: false,
147 color: "",
148 y: "top",
149 x: "right",
150 mode: "",
151 timeout: 10000,
152 text: "",
153 loading: false,
154 search: "",
155 showLoader: false,
156 addSection: [],
157 pagination: {
158 rowsPerPage: 15
159 },
160 headers: [
161 {
162 align: "justify-center",
163 text: "No",
164 sortable: false,
165 value: "No"
166 },
167 {
168 text: "Profile Pic",
169 vaue: "profilePicUrl",
170 sortable: false,
171 align: "center"
172 },
173 {
174 text: "Name",
175 vaue: "name",
176 sortable: false,
177 align: "center"
178 },
179 {
180 text: "Roll No.",
181 value: "rollNo",
182 sortable: false,
183 align: "center"
184 },
185 {
186 text: "Email",
187 value: "email",
188 sortable: false,
189 align: "center"
190 },
191 { text: "Action", value: "", sortable: false, align: "center" }
192 ],
193 classList: [],
194 getMark: {},
195 markData: [],
196 examList: [],
197 getStudentsList: [],
198 token: ""
199 }),
200 methods: {
201 getClass() {
202 http()
203 .get("/getClassesList", {
204 headers: { Authorization: "Bearer " + this.token }
205 })
206 .then(response => {
207 this.classList = response.data.data;
208 })
209 .catch(err => {
210 // console.log("err====>", err);
211 });
212 },
213 getSections(_id) {
214 console.log(_id);
215 for (let i = 0; i < this.classList.length; i++) {
216 if (_id == this.classList[i]._id) {
217 this.subjects = this.classList[i].subjects;
218 }
219 }
220 http()
221 .get(
222 "/getSectionsList",
223 { params: { classId: _id } },
224 {
225 headers: { Authorization: "Bearer " + this.token }
226 }
227 )
228 .then(response => {
229 this.addSection = response.data.data;
230 })
231 .catch(err => {
232 // console.log("err====>", err);
233 });
234 },
235 getStudents() {
236 this.showLoader = true;
237 http()
238 .get("/getStudentWithClass", {
239 params: {
240 classId: this.getMark.classId,
241 sectionId: this.getMark.sectionId
242 }
243 })
244 .then(response => {
245 this.getStudentsList = response.data.data;
246 this.showLoader = false;
247 console.log("getSectionsList=====>", response.data.data);
248 })
249 .catch(error => {
250 console.log("err====>", error);
251 this.showLoader = false;
252 });
253 },
254 getExamList() {
255 this.showLoader = true;
256 http()
257 .get("/getExamsList", {
258 headers: { Authorization: "Bearer " + this.token }
259 })
260 .then(response => {
261 this.examList = response.data.data;
262 this.showLoader = false;
263 })
264 .catch(error => {
265 // console.log("err====>", err);
266 this.showLoader = false;
267 this.snackbar = true;
268 this.text = error.response.data.message;
269 if (error.response.status === 401) {
270 this.$router.replace({ path: "/" });
271 this.$store.dispatch("setToken", null);
272 this.$store.dispatch("Id", null);
273 }
274 });
275 }
276 },
277 mounted() {
278 this.token = this.$store.state.token;
279 this.getExamList();
280 this.getClass();
281 },
282 created() {
283 this.$root.$on("app:search", search => {
284 this.search = search;
285 });
286 },
287 beforeDestroy() {
288 // dont forget to remove the listener
289 this.$root.$off("app:search");
290 }
291 };
292 </script>
293 <style scoped>
294 .active {
295 background-color: gray;
296 color: white !important;
297 }
298 .activebtn {
299 color: black !important;
300 }
301 </style>s
src/pages/Report/studentReport.vue
Diff comments   View file @0065443
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-snackbar
4 :timeout="timeout"
5 :top="y === 'top'"
6 :right="x === 'right'"
7 :vertical="mode === 'vertical'"
8 v-model="snackbar"
9 color="success"
10 >{{ text }}</v-snackbar>
11
12 <!-- ****** Student Report TABLE****** -->
13 <v-card flat>
14 <v-card-actions>
15 <v-layout>
16 <h4 class="right mt-2 ml-2">Student Report</h4>
17 </v-layout>
18 <v-spacer></v-spacer>
19 </v-card-actions>
20 </v-card>
21 <v-card flat>
22 <v-form ref="form" v-model="valid" lazy-validation>
23 <v-flex xs12 sm12 lg12>
24 <v-layout wrap>
25 <v-flex xs12 sm12 lg4>
26 <v-layout>
27 <v-flex xs3 sm6 lg3 class="subheading mt-4">
28 <label class="right">Report For :</label>
29 </v-flex>
30 <v-flex xs12 sm12 lg8 class="ml-2">
31 <v-select
32 v-model="report.form"
33 label="Select your report for"
34 :items="formList"
35 item-text="name"
36 item-value="value"
37 @change="getReport(report.form)"
38 :rules="formRules"
39 required
40 ></v-select>
41 </v-flex>
42 </v-layout>
43 </v-flex>
44 <v-flex xs12 sm12 lg4 v-if="bloodGroup">
45 <v-layout>
46 <v-flex xs3 sm6 lg4 class="subheading mt-4">
47 <label class="right">Blood Group :</label>
48 </v-flex>
49 <v-flex xs12 sm12 lg8 class="ml-2">
50 <v-select
51 v-model="report.bloodGroup"
52 label="Select your Blood Group "
53 :items="bloodGroupList"
54 :rules="bloodGroupRules"
55 required
56 ></v-select>
57 </v-flex>
58 </v-layout>
59 </v-flex>
60 <v-flex xs12 sm12 lg4 v-if="genderShow">
61 <v-layout>
62 <v-flex xs3 sm6 lg4 class="subheading mt-4">
63 <label class="right">Gender:</label>
64 </v-flex>
65 <v-flex xs12 sm12 lg8 class="ml-2">
66 <v-select
67 v-model="report.gender"
68 label="Select your gender "
69 :items="gender"
70 :rules="genderRules"
71 required
72 ></v-select>
73 </v-flex>
74 </v-layout>
75 </v-flex>
76 <v-flex xs12 sm12 lg4 v-if="TransportShow">
77 <v-layout>
78 <v-flex xs3 sm6 lg4 class="subheading mt-4">
79 <label class="right">Route:</label>
80 </v-flex>
81 <v-flex xs12 sm12 lg8 class="ml-2">
82 <v-select
83 v-model="report.route"
84 label="Select your gender "
85 :items="route"
86 :rules="routeRules"
87 required
88 ></v-select>
89 </v-flex>
90 </v-layout>
91 </v-flex>
92 <v-flex xs12 sm12 lg4 v-if="HostelShow">
93 <v-layout>
94 <v-flex xs3 sm6 lg4 class="subheading mt-4">
95 <label class="right">Hostel:</label>
96 </v-flex>
97 <v-flex xs12 sm12 lg8 class="ml-2">
98 <v-select
99 v-model="report.route"
100 label="Select your hostel "
101 :items="hostelList"
102 :rules="hostelRules"
103 required
104 ></v-select>
105 </v-flex>
106 </v-layout>
107 </v-flex>
108 <v-flex xs12 sm12 lg4 v-if="countryShow">
109 <v-layout>
110 <v-flex xs3 sm6 lg4 class="subheading mt-4">
111 <label class="right">Country :</label>
112 </v-flex>
113 <v-flex xs12 sm12 lg8 class="ml-2">
114 <v-select
115 v-model="report.country"
116 label="Select your Country "
117 :items="countryList"
118 :rules="countryRules"
119 required
120 ></v-select>
121 </v-flex>
122 </v-layout>
123 </v-flex>
124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
125 <v-layout>
126 <v-flex xs3 sm6 lg4 class="subheading mt-4">
127 <label class="right">Country :</label>
128 </v-flex>
129 <v-flex xs12 sm12 lg8 class="ml-2">
130 <v-select
131 v-model="report.country"
132 label="Select your Country "
133 :items="countryList"
134 required
135 ></v-select>
136 </v-flex>
137 </v-layout>
138 </v-flex>-->
139 <v-flex xs12 sm12 lg4>
140 <v-layout>
141 <v-flex xs3 sm6 lg3 class="subheading mt-4">
142 <label class="right">Class:</label>
143 </v-flex>
144 <v-flex xs12 sm12 lg8 class="ml-2">
145 <v-select
146 v-model="report.classId"
147 label="Select your class"
148 type="text"
149 :rules="classRules"
150 :items="classList"
151 item-text="classNum"
152 item-value="_id"
153 @change="getSections(report.classId)"
154 required
155 ></v-select>
156 </v-flex>
157 </v-layout>
158 </v-flex>
159 <v-flex xs12 sm12 lg4 v-if="sectionShow">
160 <v-layout>
161 <v-flex xs3 sm6 lg3 class="subheading mt-4">
162 <label class="right">Section:</label>
163 </v-flex>
164 <v-flex xs12 sm12 lg8 class="ml-2">
165 <v-select
166 :items="addSection"
167 label="Select your Section"
168 v-model="report.sectionId"
169 :rules="sectionRules"
170 item-text="name"
171 item-value="_id"
172 name="Select Section"
173 required
174 ></v-select>
175 </v-flex>
176 </v-layout>
177 </v-flex>
178 <v-flex xs12 sm12 lg4>
179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn>
180 </v-flex>
181 </v-layout>
182 </v-flex>
183 </v-form>
184 </v-card>
185 <v-card flat v-if="getStudentsReportList">
186 <v-card-actions>
187 <v-layout>
188 <h5 class="right mt-2 ml-2">Student Report</h5>
189 <!-- <h5 class="right mt-2 ml-2">: {{ getStudentsReportList[0].classId.classNum }}</h5> -->
190 </v-layout>
191 <v-spacer></v-spacer>
192 <v-layout>
193 <h5 class=" mt-2 ml-2">Student Report</h5>
194 <!-- <h5 class=" mt-2 ml-2">: {{ getStudentsReportList[0].sectionId.name }}</h5> -->
195 </v-layout>
196 </v-card-actions>
197 </v-card>
198 <v-data-table
199 :headers="headers"
200 :items="getStudentsReportList"
201 :pagination.sync="pagination"
202 :search="search"
203 >
204 <template slot="items" slot-scope="props">
205 <td class="text-xs-center">{{ props.index + 1}}</td>
206 <td id="td" class="text-xs-center">
207 <v-avatar>
208 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
209 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
210 </v-avatar>
211 </td>
212 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
214 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
215 </template>
216 <v-alert
217 slot="no-results"
218 :value="true"
219 color="error"
220 icon="warning"
221 >Your search for "{{ search }}" found no results.</v-alert>
222 </v-data-table>
223 <div class="loader" v-if="showLoader">
224 <v-progress-circular indeterminate color="white"></v-progress-circular>
225 </div>
226 </v-app>
227 </template>
228
229 <script>
230 import http from "@/Services/http.js";
231 import countryList from "@/script/country.js";
232
233 import moment from "moment";
234
235 export default {
236 data: () => ({
237 snackbar: false,
238 color: "",
239 y: "top",
240 x: "right",
241 mode: "",
242 timeout: 10000,
243 text: "",
244 loading: false,
245 valid: true,
246 search: "",
247 showLoader: false,
248 bloodGroup: false,
249 genderShow: false,
250 countryShow: false,
251 TransportShow: false,
252 HostelShow: false,
253 BirthdayShow: false,
254 sectionShow: false,
255 showTable: false,
256 addSection: [],
257 pagination: {
258 rowsPerPage: 15
259 },
260 formRules: [v => !!v || "Form For is required"],
261 bloodGroupRules: [v => !!v || "Blood group is required"],
262 classRules: [v => !!v || "Class is required"],
263 sectionRules: [v => !!v || "Class is required"],
264 genderRules: [v => !!v || "Gender is required"],
265 routeRules: [v => !!v || "RouteI is required"],
266 hostelRules: [v => !!v || "Hostel is required"],
267 countryRules: [v => !!v || "Country is required"],
268 headers: [
269 {
270 align: "justify-center",
271 text: "No",
272 sortable: false,
273 value: "No"
274 },
275 {
276 text: "Profile Pic",
277 vaue: "profilePicUrl",
278 sortable: false,
279 align: "center"
280 },
281 {
282 text: "Name",
283 vaue: "name",
284 sortable: false,
285 align: "center"
286 },
287 {
288 text: "Roll No.",
289 value: "rollNo",
290 sortable: false,
291 align: "center"
292 },
293 {
294 text: "Email",
295 value: "email",
296 sortable: false,
297 align: "center"
298 }
299 ],
300 classList: [],
301 report: {},
302 markData: [],
303 formList: [
304 {
305 name: "Blood Group",
306 value: "bloodGroup"
307 },
308 "Country",
309 "Gender",
310 "Transport",
311 "Hostel"
312 // "Birthday"
313 ],
314 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
315 gender: ["Male", "female"],
316 getStudentsReportList: [],
317 studentReort: "",
318 countryList: [],
319 route: [],
320 Hostel: [],
321 hostelList: [],
322 token: ""
323 }),
324 methods: {
325 clear() {
326 this.$refs.form.reset();
327 // console.log("this.clear()", this.$refs.form.reset;
328 },
329 getClass() {
330 http()
331 .get("/getClassesList", {
332 headers: { Authorization: "Bearer " + this.token }
333 })
334 .then(response => {
335 this.classList = response.data.data;
336 })
337 .catch(err => {
338 // console.log("err====>", err);
339 });
340 },
341 getReport() {
342 if (this.report.form === "bloodGroup") {
343 this.bloodGroup = true;
344 this.genderShow = false;
345 this.TransportShow = false;
346 this.countryShow = false;
347 this.BirthdayShow = false;
348 this.HostelShow = false;
349 }
350 if (this.report.form === "Gender") {
351 this.genderShow = true;
352 this.bloodGroup = false;
353 this.TransportShow = false;
354 this.BirthdayShow = false;
355 this.countryShow = false;
356 this.HostelShow = false;
357 }
358 if (this.report.form === "Transport") {
359 this.TransportShow = true;
360 this.genderShow = false;
361 this.bloodGroup = false;
362 this.BirthdayShow = false;
363 this.countryShow = false;
364 this.HostelShow = false;
365 }
366 if (this.report.form === "Country") {
367 this.countryShow = true;
368 this.TransportShow = false;
369 this.genderShow = false;
370 this.bloodGroup = false;
371 this.BirthdayShow = false;
372 this.HostelShow = false;
373 }
374 if (this.report.form === "Hostel") {
375 this.HostelShow = true;
376 this.TransportShow = false;
377 this.genderShow = false;
378 this.bloodGroup = false;
379 this.countryShow = false;
380 this.BirthdayShow = false;
381 }
382 if (this.report.form === "Birthday") {
383 this.BirthdayShow = true;
384 this.TransportShow = false;
385 this.genderShow = false;
386 this.HostelShow = false;
387 this.bloodGroup = false;
388 this.countryShow = false;
389 }
390 },
391 getStudents() {
392 if (this.$refs.form.validate()) {
393 this.showLoader = true;
394 // for (let i = 0; i < this.classList.length; i++) {
395 // if (this.report.classId === this.classList[i]._id) {
396 // Number(this.studentReort.className) = this.classList[i].classNum;
397 // }
398 // }
399 // for (let i = 0; i < this.addSection.length; i++) {
400 // if (this.report.sectionId === this.addSection[i]._id) {
401 // this.studentReort.sectionName = this.addSection[i].name;
402 // }
403 // }
404 http()
405 .get("/getStudentReport", {
406 params: {
407 bloodGroup: this.report.bloodGroup,
408 country: this.report.country,
409 gender: this.report.gender,
410 classId: this.report.classId,
411 sectionId: this.report.sectionId
412 },
413 headers: { Authorization: "Bearer " + this.token }
414 })
415 .then(response => {
416 this.getStudentsReportList = response.data.data;
417 this.showTable = true;
418 this.showLoader = false;
419 this.clear();
420 // console.log("getSectionsList=====>", response.data.data);
421 })
422 .catch(error => {
423 console.log("err====>", error);
424 this.showLoader = false;
425 });
426 }
427 },
428 getSections() {
429 this.sectionShow = true;
430 this.showLoader = true;
431 http()
432 .get(
433 "/getSectionsList",
434 { params: { classId: this.report.classId } },
435 {
436 headers: { Authorization: "Bearer " + this.token }
437 }
438 )
439 .then(response => {
440 this.addSection = response.data.data;
441 this.showLoader = false;
442 })
443 .catch(error => {
444 console.log("err====>", error);
445 this.showLoader = false;
446 });
447 }
448 // getFormList() {
449 // this.showLoader = true;
450 // http()
451 // .get("/getExamsList", {
452 // headers: { Authorization: "Bearer " + this.token }
453 // })
454 // .then(response => {
455 // this.formList = response.data.data;
456 // this.showLoader = false;
457 // })
458 // .catch(error => {
459 // // console.log("err====>", err);
460 // this.showLoader = false;
461 // this.snackbar = true;
462 // this.text = error.response.data.message;
463 // if (error.response.status === 401) {
464 // this.$router.replace({ path: "/" });
465 // this.$store.dispatch("setToken", null);
466 // this.$store.dispatch("Id", null);
467 // }
468 // });
469 // }
470 },
471 mounted() {
472 this.token = this.$store.state.token;
473 const getindustryList = countryList();
474 this.countryList = getindustryList;
475 // console.log("getindustryList", this.countryList);
476 // this.getExamList();
477 this.getClass();
478 },
479 created() {
480 this.$root.$on("app:search", search => {
481 this.search = search;
482 });
483 },
484 beforeDestroy() {
485 // dont forget to remove the listener
486 this.$root.$off("app:search");
487 }
488 };
489 </script>
490 <style scoped>
491 .active {
492 background-color: gray;
493 color: white !important;
494 }
495 .activebtn {
496 color: black !important;
497 }
498 </style>s
src/pages/Students/students.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Students</v-tab> 10 >Existing Students</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Students</v-tab> 18 >Add New Students</v-tab>
19 19
20 <!-- ****** EDITS STUDENTS DETAILS ****** --> 20 <!-- ****** EDITS STUDENTS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1500px" scrollable> 31 <v-dialog v-model="dialog" max-width="1500px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Student Profile</h3> 36 <h3>Edit Student Profile</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height: 586px;"> 40 <v-card-text style="height: 586px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <v-avatar size="160px"> 48 <v-avatar size="160px">
49 <img 49 <img
50 src="/static/icon/user.png" 50 src="/static/icon/user.png"
51 v-if="!editedItem.profilePicUrl && !imageUrl" 51 v-if="!editedItem.profilePicUrl && !imageUrl"
52 /> 52 />
53 <img 53 <img
54 :src="editedItem.profilePicUrl" 54 :src="editedItem.profilePicUrl"
55 v-else-if="editedItem.profilePicUrl && !imageUrl" 55 v-else-if="editedItem.profilePicUrl && !imageUrl"
56 /> 56 />
57 <img 57 <img
58 v-if="imageUrl" 58 v-if="imageUrl"
59 :src="imageUrl" 59 :src="imageUrl"
60 height="150" 60 height="150"
61 style="border-radius:50%; width:200px" 61 style="border-radius:50%; width:200px"
62 /> 62 />
63 </v-avatar> 63 </v-avatar>
64 <input 64 <input
65 type="file" 65 type="file"
66 style="display: none" 66 style="display: none"
67 ref="image" 67 ref="image"
68 accept="image/*" 68 accept="image/*"
69 @change="onFilePicked" 69 @change="onFilePicked"
70 /> 70 />
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12 sm4> 74 <v-flex xs12 sm4>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-select 81 <v-select
82 :items="addclass" 82 :items="addclass"
83 label="Select Class" 83 label="Select Class"
84 v-model="editedItem.select" 84 v-model="editedItem.select"
85 item-text="classNum" 85 item-text="classNum"
86 item-value="_id" 86 item-value="_id"
87 name="Select Class" 87 name="Select Class"
88 @change="getSections(editedItem.select)" 88 @change="getSections(editedItem.select)"
89 required 89 required
90 ></v-select> 90 ></v-select>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 </v-flex> 93 </v-flex>
94 <v-flex xs12 sm4> 94 <v-flex xs12 sm4>
95 <v-layout> 95 <v-layout>
96 <v-flex xs4 class="pt-4 subheading"> 96 <v-flex xs4 class="pt-4 subheading">
97 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 97 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
98 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 98 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 class="ml-3"> 100 <v-flex xs8 class="ml-3">
101 <v-select 101 <v-select
102 :items="addSection" 102 :items="addSection"
103 label="Select Section" 103 label="Select Section"
104 v-model="editedItem.selectSection" 104 v-model="editedItem.selectSection"
105 item-text="name" 105 item-text="name"
106 item-value="_id" 106 item-value="_id"
107 name="Select Section" 107 name="Select Section"
108 required 108 required
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm4> 113 <v-flex xs12 sm4>
114 <v-layout> 114 <v-layout>
115 <v-flex xs4 class="pt-4 subheading"> 115 <v-flex xs4 class="pt-4 subheading">
116 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 116 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
117 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 117 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
118 </v-flex> 118 </v-flex>
119 <v-flex xs8 class="ml-3"> 119 <v-flex xs8 class="ml-3">
120 <v-text-field 120 <v-text-field
121 v-model="editedItem.name" 121 v-model="editedItem.name"
122 placeholder="fill your full Name" 122 placeholder="fill your full Name"
123 name="name" 123 name="name"
124 type="text" 124 type="text"
125 required 125 required
126 ></v-text-field> 126 ></v-text-field>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 <v-layout> 131 <v-layout>
132 <v-flex xs12 sm4> 132 <v-flex xs12 sm4>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">Email ID:</label> 135 <label class="right">Email ID:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 class="ml-3"> 137 <v-flex xs8 class="ml-3">
138 <v-text-field 138 <v-text-field
139 placeholder="fill your email" 139 placeholder="fill your email"
140 v-model="editedItem.email" 140 v-model="editedItem.email"
141 type="text" 141 type="text"
142 name="email" 142 name="email"
143 required 143 required
144 ></v-text-field> 144 ></v-text-field>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 <v-flex xs12 sm4> 148 <v-flex xs12 sm4>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 151 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
152 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 152 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 class="ml-3"> 154 <v-flex xs8 class="ml-3">
155 <v-menu 155 <v-menu
156 ref="menu" 156 ref="menu"
157 :close-on-content-click="false" 157 :close-on-content-click="false"
158 v-model="menu1" 158 v-model="menu1"
159 :nudge-right="40" 159 :nudge-right="40"
160 lazy 160 lazy
161 transition="scale-transition" 161 transition="scale-transition"
162 offset-y 162 offset-y
163 full-width 163 full-width
164 min-width="290px" 164 min-width="290px"
165 > 165 >
166 <v-text-field 166 <v-text-field
167 slot="activator" 167 slot="activator"
168 v-model="editedItem.dob" 168 v-model="editedItem.dob"
169 placeholder="Select Dob" 169 placeholder="Select Dob"
170 ></v-text-field> 170 ></v-text-field>
171 <v-date-picker 171 <v-date-picker
172 ref="picker" 172 ref="picker"
173 v-model="editedItem.dob" 173 v-model="editedItem.dob"
174 :max="new Date().toISOString().substr(0, 10)" 174 :max="new Date().toISOString().substr(0, 10)"
175 min="1950-01-01" 175 min="1950-01-01"
176 @input="menu1 = false" 176 @input="menu1 = false"
177 ></v-date-picker> 177 ></v-date-picker>
178 </v-menu> 178 </v-menu>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 <v-flex xs12 sm4> 182 <v-flex xs12 sm4>
183 <v-layout> 183 <v-layout>
184 <v-flex xs4 class="pt-4 subheading"> 184 <v-flex xs4 class="pt-4 subheading">
185 <label class="right">City:</label> 185 <label class="right">City:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 class="ml-3"> 187 <v-flex xs8 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.city" 189 v-model="editedItem.city"
190 placeholder="fill your City Name" 190 placeholder="fill your City Name"
191 name="City" 191 name="City"
192 type="text" 192 type="text"
193 required 193 required
194 ></v-text-field> 194 ></v-text-field>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12 sm4> 200 <v-flex xs12 sm4>
201 <v-layout> 201 <v-layout>
202 <v-flex xs4 class="pt-4 subheading"> 202 <v-flex xs4 class="pt-4 subheading">
203 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 203 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
204 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> 204 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
205 </v-flex> 205 </v-flex>
206 <v-flex xs8 class="ml-3"> 206 <v-flex xs8 class="ml-3">
207 <v-text-field 207 <v-text-field
208 v-model="editedItem.bloodGroup" 208 v-model="editedItem.bloodGroup"
209 placeholder="fill your BloodGroup" 209 placeholder="fill your BloodGroup"
210 name="state" 210 name="state"
211 type="text" 211 type="text"
212 required 212 required
213 ></v-text-field> 213 ></v-text-field>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-flex> 216 </v-flex>
217 <v-flex xs12 sm4> 217 <v-flex xs12 sm4>
218 <v-layout> 218 <v-layout>
219 <v-flex xs4 class="pt-4 subheading"> 219 <v-flex xs4 class="pt-4 subheading">
220 <label class="right">Allergies:</label> 220 <label class="right">Allergies:</label>
221 </v-flex> 221 </v-flex>
222 <v-flex xs8 class="ml-3"> 222 <v-flex xs8 class="ml-3">
223 <v-text-field 223 <v-text-field
224 v-model="editedItem.allergies" 224 v-model="editedItem.allergies"
225 placeholder="fill your Allergies" 225 placeholder="fill your Allergies"
226 name="pincode" 226 name="pincode"
227 required 227 required
228 ></v-text-field> 228 ></v-text-field>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm4> 232 <v-flex xs12 sm4>
233 <v-layout> 233 <v-layout>
234 <v-flex xs4 class="pt-4 subheading"> 234 <v-flex xs4 class="pt-4 subheading">
235 <label class="right">Medical Notes:</label> 235 <label class="right">Medical Notes:</label>
236 </v-flex> 236 </v-flex>
237 <v-flex xs8 class="ml-3"> 237 <v-flex xs8 class="ml-3">
238 <v-text-field 238 <v-text-field
239 v-model="editedItem.medicalNotes" 239 v-model="editedItem.medicalNotes"
240 placeholder="fill your medicalNotes" 240 placeholder="fill your medicalNotes"
241 name="mobileNo" 241 name="mobileNo"
242 required 242 required
243 ></v-text-field> 243 ></v-text-field>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 <v-layout> 248 <v-layout>
249 <v-flex xs12 sm4> 249 <v-flex xs12 sm4>
250 <v-layout> 250 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Height:</label> 252 <label class="right">Height:</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 class="ml-3"> 254 <v-flex xs8 class="ml-3">
255 <v-text-field 255 <v-text-field
256 v-model="editedItem.height" 256 v-model="editedItem.height"
257 placeholder="fill your Height" 257 placeholder="fill your Height"
258 name="state" 258 name="state"
259 type="text" 259 type="text"
260 required 260 required
261 ></v-text-field> 261 ></v-text-field>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 <v-flex xs12 sm4> 265 <v-flex xs12 sm4>
266 <v-layout> 266 <v-layout>
267 <v-flex xs4 class="pt-4 subheading"> 267 <v-flex xs4 class="pt-4 subheading">
268 <label class="right">Weight:</label> 268 <label class="right">Weight:</label>
269 </v-flex> 269 </v-flex>
270 <v-flex xs8 class="ml-3"> 270 <v-flex xs8 class="ml-3">
271 <v-text-field 271 <v-text-field
272 v-model="editedItem.weight" 272 v-model="editedItem.weight"
273 placeholder="fill your Weight" 273 placeholder="fill your Weight"
274 name="pincode" 274 name="pincode"
275 required 275 required
276 ></v-text-field> 276 ></v-text-field>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 </v-flex> 279 </v-flex>
280 <v-flex xs12 sm4> 280 <v-flex xs12 sm4>
281 <v-layout> 281 <v-layout>
282 <v-flex xs4 class="pt-4 subheading"> 282 <v-flex xs4 class="pt-4 subheading">
283 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 283 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
284 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 284 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs8 class="ml-3"> 286 <v-flex xs8 class="ml-3">
287 <v-text-field 287 <v-text-field
288 label="Select Image" 288 label="Select Image"
289 @click="pickFile" 289 @click="pickFile"
290 v-model="imageName" 290 v-model="imageName"
291 append-icon="attach_file" 291 append-icon="attach_file"
292 ></v-text-field> 292 ></v-text-field>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout> 297 <v-layout>
298 <v-flex xs12 sm4> 298 <v-flex xs12 sm4>
299 <v-layout> 299 <v-layout>
300 <v-flex xs4 class="pt-4 subheading"> 300 <v-flex xs4 class="pt-4 subheading">
301 <label class="right">State:</label> 301 <label class="right">State:</label>
302 </v-flex> 302 </v-flex>
303 <v-flex xs8 class="ml-3"> 303 <v-flex xs8 class="ml-3">
304 <v-text-field 304 <v-text-field
305 v-model="editedItem.state" 305 v-model="editedItem.state"
306 placeholder="fill your State Name" 306 placeholder="fill your State Name"
307 name="state" 307 name="state"
308 type="text" 308 type="text"
309 required 309 required
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-layout> 312 </v-layout>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12 sm4> 314 <v-flex xs12 sm4>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 class="pt-4 subheading"> 316 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Pincode:</label> 317 <label class="right">Pincode:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs8 class="ml-3"> 319 <v-flex xs8 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="editedItem.pincode" 321 v-model="editedItem.pincode"
322 placeholder="fill your pincode" 322 placeholder="fill your pincode"
323 name="pincode" 323 name="pincode"
324 type="number" 324 type="number"
325 required 325 required
326 ></v-text-field> 326 ></v-text-field>
327 </v-flex> 327 </v-flex>
328 </v-layout> 328 </v-layout>
329 </v-flex> 329 </v-flex>
330 <v-flex xs12 sm4> 330 <v-flex xs12 sm4>
331 <v-layout> 331 <v-layout>
332 <v-flex xs4 class="pt-4 subheading"> 332 <v-flex xs4 class="pt-4 subheading">
333 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 333 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
334 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 334 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs8 class="ml-3"> 336 <v-flex xs8 class="ml-3">
337 <v-text-field 337 <v-text-field
338 v-model="editedItem.mobile" 338 v-model="editedItem.mobile"
339 placeholder="fill your MobileNo" 339 placeholder="fill your MobileNo"
340 name="mobileNo" 340 name="mobileNo"
341 type="number" 341 type="number"
342 required 342 required
343 ></v-text-field> 343 ></v-text-field>
344 </v-flex> 344 </v-flex>
345 </v-layout> 345 </v-layout>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs12 sm4> 349 <v-flex xs12 sm4>
350 <v-layout> 350 <v-layout>
351 <v-flex xs4 class="pt-4 subheading"> 351 <v-flex xs4 class="pt-4 subheading">
352 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 352 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
353 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 353 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs8 class="ml-3"> 355 <v-flex xs8 class="ml-3">
356 <v-autocomplete 356 <v-autocomplete
357 v-model="editedItem.country" 357 v-model="editedItem.country"
358 :items="countries" 358 :items="countries"
359 placeholder="Select Country Name" 359 placeholder="Select Country Name"
360 required 360 required
361 ></v-autocomplete> 361 ></v-autocomplete>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 <v-flex xs12 sm4> 365 <v-flex xs12 sm4>
366 <v-layout> 366 <v-layout>
367 <v-flex xs4 class="pt-4 subheading"> 367 <v-flex xs4 class="pt-4 subheading">
368 <label class="right">Gender:</label> 368 <label class="right">Gender:</label>
369 </v-flex> 369 </v-flex>
370 <v-flex xs8 class="ml-3"> 370 <v-flex xs8 class="ml-3">
371 <v-select 371 <v-select
372 :items="gender" 372 :items="gender"
373 v-model="editedItem.gender" 373 v-model="editedItem.gender"
374 placeholder="Select Gender" 374 placeholder="Select Gender"
375 required 375 required
376 ></v-select> 376 ></v-select>
377 </v-flex> 377 </v-flex>
378 </v-layout> 378 </v-layout>
379 </v-flex> 379 </v-flex>
380 <v-flex xs12 sm4> 380 <v-flex xs12 sm4>
381 <v-layout> 381 <v-layout>
382 <v-flex xs4 class="pt-4 subheading"> 382 <v-flex xs4 class="pt-4 subheading">
383 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 383 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
384 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 384 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
385 </v-flex> 385 </v-flex>
386 <v-flex xs8 class="ml-3"> 386 <v-flex xs8 class="ml-3">
387 <v-text-field 387 <v-text-field
388 :items="gender" 388 :items="gender"
389 v-model="editedItem.rollNo" 389 v-model="editedItem.rollNo"
390 placeholder="fill roll number" 390 placeholder="fill roll number"
391 required 391 required
392 ></v-text-field> 392 ></v-text-field>
393 </v-flex> 393 </v-flex>
394 </v-layout> 394 </v-layout>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 <v-layout class="hidden-xs-only hidden-sm-only"> 397 <v-layout class="hidden-xs-only hidden-sm-only">
398 <v-flex xs12 sm12> 398 <v-flex xs12 sm12>
399 <v-layout> 399 <v-layout>
400 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 400 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
401 <label class="right pr-4">Present Address:</label> 401 <label class="right pr-4">Present Address:</label>
402 </v-flex> 402 </v-flex>
403 <v-flex xs8 sm12> 403 <v-flex xs8 sm12>
404 <v-text-field 404 <v-text-field
405 name="input-4-3" 405 name="input-4-3"
406 v-model="editedItem.presentAddress" 406 v-model="editedItem.presentAddress"
407 placeholder="fill Your present Address" 407 placeholder="fill Your present Address"
408 required 408 required
409 ></v-text-field> 409 ></v-text-field>
410 </v-flex> 410 </v-flex>
411 </v-layout> 411 </v-layout>
412 </v-flex> 412 </v-flex>
413 <v-flex xs12 sm12> 413 <v-flex xs12 sm12>
414 <v-layout> 414 <v-layout>
415 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 415 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
416 <label class>Permanent Address:</label> 416 <label class>Permanent Address:</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs12 sm12> 418 <v-flex xs12 sm12>
419 <v-text-field 419 <v-text-field
420 name="input-4-3" 420 name="input-4-3"
421 v-model="editedItem.permanentAddress" 421 v-model="editedItem.permanentAddress"
422 placeholder="fill Your Permanent Address" 422 placeholder="fill Your Permanent Address"
423 required 423 required
424 ></v-text-field> 424 ></v-text-field>
425 </v-flex> 425 </v-flex>
426 </v-layout> 426 </v-layout>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 429 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
430 <v-flex xs12 sm12> 430 <v-flex xs12 sm12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 432 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
433 <label class>Present Address :</label> 433 <label class>Present Address :</label>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs12 sm12> 437 <v-flex xs12 sm12>
438 <v-textarea 438 <v-textarea
439 name="input-4-3" 439 name="input-4-3"
440 v-model="editedItem.presentAddress" 440 v-model="editedItem.presentAddress"
441 placeholder="fill Your present Address" 441 placeholder="fill Your present Address"
442 required 442 required
443 ></v-textarea> 443 ></v-textarea>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 </v-flex> 446 </v-flex>
447 <v-flex xs12 sm12> 447 <v-flex xs12 sm12>
448 <v-layout> 448 <v-layout>
449 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 449 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
450 <label>Permanent addr:</label> 450 <label>Permanent addr:</label>
451 </v-flex> 451 </v-flex>
452 </v-layout> 452 </v-layout>
453 <v-layout> 453 <v-layout>
454 <v-flex xs12 sm12> 454 <v-flex xs12 sm12>
455 <v-textarea 455 <v-textarea
456 name="input-4-3" 456 name="input-4-3"
457 v-model="editedItem.permanentAddress" 457 v-model="editedItem.permanentAddress"
458 placeholder="fill Your Permanent Address" 458 placeholder="fill Your Permanent Address"
459 required 459 required
460 ></v-textarea> 460 ></v-textarea>
461 </v-flex> 461 </v-flex>
462 </v-layout> 462 </v-layout>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 <v-layout> 465 <v-layout>
466 <v-flex xs12 sm12> 466 <v-flex xs12 sm12>
467 <v-layout> 467 <v-layout>
468 <v-flex xs6> 468 <v-flex xs6>
469 <v-btn round dark @click.native="close">Cancel</v-btn> 469 <v-btn round dark @click.native="close">Cancel</v-btn>
470 </v-flex> 470 </v-flex>
471 <v-flex xs6> 471 <v-flex xs6>
472 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 472 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 </v-container> 477 </v-container>
478 </v-form> 478 </v-form>
479 </v-card-text> 479 </v-card-text>
480 </v-card> 480 </v-card>
481 </v-dialog> 481 </v-dialog>
482 482
483 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 483 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
484 484
485 <v-dialog v-model="dialog1" max-width="1100px" scrollable> 485 <v-dialog v-model="dialog1" max-width="1100px" scrollable>
486 <v-card> 486 <v-card>
487 <v-toolbar color="grey lighten-2" flat> 487 <v-toolbar color="grey lighten-2" flat>
488 <v-spacer></v-spacer> 488 <v-spacer></v-spacer>
489 <v-toolbar-title>Student Profile</v-toolbar-title> 489 <v-toolbar-title>Student Profile</v-toolbar-title>
490 <v-spacer></v-spacer> 490 <v-spacer></v-spacer>
491 <v-icon @click="close1">close</v-icon> 491 <v-icon @click="close1">close</v-icon>
492 </v-toolbar> 492 </v-toolbar>
493 <v-card-text style="height: 700px;"> 493 <v-card-text style="height: 700px;">
494 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 494 <v-flex align-center justify-center layout text-xs-center class="mt-3">
495 <v-avatar size="160px"> 495 <v-avatar size="160px">
496 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 496 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
497 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 497 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
498 </v-avatar> 498 </v-avatar>
499 </v-flex> 499 </v-flex>
500 <v-container grid-list-md> 500 <v-container grid-list-md>
501 <v-layout wrap> 501 <v-layout wrap>
502 <v-flex xs12 sm6> 502 <v-flex xs12 sm6>
503 <v-layout> 503 <v-layout>
504 <v-flex xs6 sm5> 504 <v-flex xs6 sm5>
505 <h5 class="right my-1"> 505 <h5 class="right my-1">
506 <b>Full Name:</b> 506 <b>Full Name:</b>
507 </h5> 507 </h5>
508 </v-flex> 508 </v-flex>
509 <v-flex sm7 xs6> 509 <v-flex sm7 xs6>
510 <h5 class="my-1 left">{{ editedItem.name }}</h5> 510 <h5 class="my-1 left">{{ editedItem.name }}</h5>
511 </v-flex> 511 </v-flex>
512 </v-layout> 512 </v-layout>
513 </v-flex> 513 </v-flex>
514 <v-flex xs12 sm6> 514 <v-flex xs12 sm6>
515 <v-layout> 515 <v-layout>
516 <v-flex xs6 sm4> 516 <v-flex xs6 sm4>
517 <h5 class="right my-1"> 517 <h5 class="right my-1">
518 <b>Email:</b> 518 <b>Email:</b>
519 </h5> 519 </h5>
520 </v-flex> 520 </v-flex>
521 <v-flex sm8 xs6> 521 <v-flex sm8 xs6>
522 <h5 class="my-1 left">{{ editedItem.email }}</h5> 522 <h5 class="my-1 left">{{ editedItem.email }}</h5>
523 </v-flex> 523 </v-flex>
524 </v-layout> 524 </v-layout>
525 </v-flex> 525 </v-flex>
526 </v-layout> 526 </v-layout>
527 <v-layout wrap> 527 <v-layout wrap>
528 <v-flex xs12 sm6> 528 <v-flex xs12 sm6>
529 <v-layout> 529 <v-layout>
530 <v-flex xs6 sm5> 530 <v-flex xs6 sm5>
531 <b> 531 <b>
532 <h5 class="right my-1"> 532 <h5 class="right my-1">
533 <b>Gender:</b> 533 <b>Gender:</b>
534 </h5> 534 </h5>
535 </b> 535 </b>
536 </v-flex> 536 </v-flex>
537 <v-flex sm7 xs6> 537 <v-flex sm7 xs6>
538 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 538 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
539 </v-flex> 539 </v-flex>
540 </v-layout> 540 </v-layout>
541 </v-flex> 541 </v-flex>
542 <v-flex xs12 sm6> 542 <v-flex xs12 sm6>
543 <v-layout> 543 <v-layout>
544 <v-flex xs6 sm4> 544 <v-flex xs6 sm4>
545 <b> 545 <b>
546 <h5 class="right my-1"> 546 <h5 class="right my-1">
547 <b>D.O.B:</b> 547 <b>D.O.B:</b>
548 </h5> 548 </h5>
549 </b> 549 </b>
550 </v-flex> 550 </v-flex>
551 <v-flex sm7 xs6> 551 <v-flex sm7 xs6>
552 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 552 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
553 </v-flex> 553 </v-flex>
554 </v-layout> 554 </v-layout>
555 </v-flex> 555 </v-flex>
556 </v-layout> 556 </v-layout>
557 <v-layout wrap> 557 <v-layout wrap>
558 <v-flex xs12 sm6> 558 <v-flex xs12 sm6>
559 <v-layout> 559 <v-layout>
560 <v-flex xs6 sm5> 560 <v-flex xs6 sm5>
561 <b> 561 <b>
562 <h5 class="right my-1"> 562 <h5 class="right my-1">
563 <b>Blood Group:</b> 563 <b>Blood Group:</b>
564 </h5> 564 </h5>
565 </b> 565 </b>
566 </v-flex> 566 </v-flex>
567 <v-flex sm7 xs6> 567 <v-flex sm7 xs6>
568 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 568 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
569 </v-flex> 569 </v-flex>
570 </v-layout> 570 </v-layout>
571 </v-flex> 571 </v-flex>
572 <v-flex xs12 sm6> 572 <v-flex xs12 sm6>
573 <v-layout> 573 <v-layout>
574 <v-flex xs6 sm4> 574 <v-flex xs6 sm4>
575 <b> 575 <b>
576 <h5 class="right my-1"> 576 <h5 class="right my-1">
577 <b>Allergies:</b> 577 <b>Allergies:</b>
578 </h5> 578 </h5>
579 </b> 579 </b>
580 </v-flex> 580 </v-flex>
581 <v-flex sm8 xs6> 581 <v-flex sm8 xs6>
582 <h5 class="my-1">{{ editedItem.allergies }}</h5> 582 <h5 class="my-1">{{ editedItem.allergies }}</h5>
583 </v-flex> 583 </v-flex>
584 </v-layout> 584 </v-layout>
585 </v-flex> 585 </v-flex>
586 </v-layout> 586 </v-layout>
587 <v-layout wrap> 587 <v-layout wrap>
588 <v-flex xs12 sm6> 588 <v-flex xs12 sm6>
589 <v-layout> 589 <v-layout>
590 <v-flex xs6 sm5> 590 <v-flex xs6 sm5>
591 <b> 591 <b>
592 <h5 class="right my-1"> 592 <h5 class="right my-1">
593 <b>Height:</b> 593 <b>Height:</b>
594 </h5> 594 </h5>
595 </b> 595 </b>
596 </v-flex> 596 </v-flex>
597 <v-flex sm7 xs6> 597 <v-flex sm7 xs6>
598 <h5 class="my-1 left">{{ editedItem.height }}</h5> 598 <h5 class="my-1 left">{{ editedItem.height }}</h5>
599 </v-flex> 599 </v-flex>
600 </v-layout> 600 </v-layout>
601 </v-flex> 601 </v-flex>
602 <v-flex xs12 sm6> 602 <v-flex xs12 sm6>
603 <v-layout> 603 <v-layout>
604 <v-flex xs6 sm4> 604 <v-flex xs6 sm4>
605 <b> 605 <b>
606 <h5 class="right my-1"> 606 <h5 class="right my-1">
607 <b>Weight:</b> 607 <b>Weight:</b>
608 </h5> 608 </h5>
609 </b> 609 </b>
610 </v-flex> 610 </v-flex>
611 <v-flex sm8 xs6> 611 <v-flex sm8 xs6>
612 <h5 class="my-1">{{ editedItem.weight }}</h5> 612 <h5 class="my-1">{{ editedItem.weight }}</h5>
613 </v-flex> 613 </v-flex>
614 </v-layout> 614 </v-layout>
615 </v-flex> 615 </v-flex>
616 </v-layout> 616 </v-layout>
617 <v-layout wrap> 617 <v-layout wrap>
618 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
619 <v-layout> 619 <v-layout>
620 <v-flex xs6 sm5> 620 <v-flex xs6 sm5>
621 <b> 621 <b>
622 <h5 class="right my-1"> 622 <h5 class="right my-1">
623 <b>City:</b> 623 <b>City:</b>
624 </h5> 624 </h5>
625 </b> 625 </b>
626 </v-flex> 626 </v-flex>
627 <v-flex sm7 xs6> 627 <v-flex sm7 xs6>
628 <h5 class="my-1 left">{{ editedItem.city }}</h5> 628 <h5 class="my-1 left">{{ editedItem.city }}</h5>
629 </v-flex> 629 </v-flex>
630 </v-layout> 630 </v-layout>
631 </v-flex> 631 </v-flex>
632 <v-flex xs12 sm6> 632 <v-flex xs12 sm6>
633 <v-layout> 633 <v-layout>
634 <v-flex xs6 sm4> 634 <v-flex xs6 sm4>
635 <b> 635 <b>
636 <h5 class="right my-1"> 636 <h5 class="right my-1">
637 <b>State:</b> 637 <b>State:</b>
638 </h5> 638 </h5>
639 </b> 639 </b>
640 </v-flex> 640 </v-flex>
641 <v-flex sm8 xs6> 641 <v-flex sm8 xs6>
642 <h5 class="my-1">{{ editedItem.state }}</h5> 642 <h5 class="my-1">{{ editedItem.state }}</h5>
643 </v-flex> 643 </v-flex>
644 </v-layout> 644 </v-layout>
645 </v-flex> 645 </v-flex>
646 </v-layout> 646 </v-layout>
647 <v-layout wrap> 647 <v-layout wrap>
648 <v-flex xs12 sm6> 648 <v-flex xs12 sm6>
649 <v-layout> 649 <v-layout>
650 <v-flex xs6 sm5> 650 <v-flex xs6 sm5>
651 <b> 651 <b>
652 <h5 class="right my-1"> 652 <h5 class="right my-1">
653 <b>Pincode:</b> 653 <b>Pincode:</b>
654 </h5> 654 </h5>
655 </b> 655 </b>
656 </v-flex> 656 </v-flex>
657 <v-flex sm7 xs6> 657 <v-flex sm7 xs6>
658 <h5 class="my-1">{{ editedItem.pincode }}</h5> 658 <h5 class="my-1">{{ editedItem.pincode }}</h5>
659 </v-flex> 659 </v-flex>
660 </v-layout> 660 </v-layout>
661 </v-flex> 661 </v-flex>
662 <v-flex xs12 sm5> 662 <v-flex xs12 sm5>
663 <v-layout> 663 <v-layout>
664 <v-flex xs6 sm5> 664 <v-flex xs6 sm5>
665 <b> 665 <b>
666 <h5 class="right my-1"> 666 <h5 class="right my-1">
667 <b>Country:</b> 667 <b>Country:</b>
668 </h5> 668 </h5>
669 </b> 669 </b>
670 </v-flex> 670 </v-flex>
671 <v-flex sm7 xs6> 671 <v-flex sm7 xs6>
672 <h5 class="my-1">{{ editedItem.country }}</h5> 672 <h5 class="my-1">{{ editedItem.country }}</h5>
673 </v-flex> 673 </v-flex>
674 </v-layout> 674 </v-layout>
675 </v-flex> 675 </v-flex>
676 </v-layout> 676 </v-layout>
677 <v-layout wrap> 677 <v-layout wrap>
678 <v-flex xs12 sm6> 678 <v-flex xs12 sm6>
679 <v-layout> 679 <v-layout>
680 <v-flex sm5 xs6> 680 <v-flex sm5 xs6>
681 <b> 681 <b>
682 <h5 class="right my-1"> 682 <h5 class="right my-1">
683 <b>Mobile No:</b> 683 <b>Mobile No:</b>
684 </h5> 684 </h5>
685 </b> 685 </b>
686 </v-flex> 686 </v-flex>
687 <v-flex sm6 xs6> 687 <v-flex sm6 xs6>
688 <h5 class="my-1">{{ editedItem.mobile }}</h5> 688 <h5 class="my-1">{{ editedItem.mobile }}</h5>
689 </v-flex> 689 </v-flex>
690 </v-layout> 690 </v-layout>
691 </v-flex> 691 </v-flex>
692 <v-flex xs12 sm6> 692 <v-flex xs12 sm6>
693 <v-layout> 693 <v-layout>
694 <v-flex xs6 sm4> 694 <v-flex xs6 sm4>
695 <b> 695 <b>
696 <h5 class="right my-1"> 696 <h5 class="right my-1">
697 <b>Fahter Name:</b> 697 <b>Fahter Name:</b>
698 </h5> 698 </h5>
699 </b> 699 </b>
700 </v-flex> 700 </v-flex>
701 <v-flex sm8 xs6> 701 <v-flex sm8 xs6>
702 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 702 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
703 </v-flex> 703 </v-flex>
704 </v-layout> 704 </v-layout>
705 </v-flex> 705 </v-flex>
706 </v-layout> 706 </v-layout>
707 <v-layout wrap> 707 <v-layout wrap>
708 <v-flex xs12 sm5> 708 <v-flex xs12 sm5>
709 <v-layout> 709 <v-layout>
710 <v-flex xs6 sm6> 710 <v-flex xs6 sm6>
711 <b> 711 <b>
712 <h5 class="right my-1"> 712 <h5 class="right my-1">
713 <b>Mother Name:</b> 713 <b>Mother Name:</b>
714 </h5> 714 </h5>
715 </b> 715 </b>
716 </v-flex> 716 </v-flex>
717 <v-flex sm6 xs6> 717 <v-flex sm6 xs6>
718 <h5 class="my-1">{{ editedItem.motherName }}</h5> 718 <h5 class="my-1">{{ editedItem.motherName }}</h5>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 <v-flex xs12 sm6> 722 <v-flex xs12 sm6>
723 <v-layout> 723 <v-layout>
724 <v-flex xs6 sm6> 724 <v-flex xs6 sm6>
725 <b> 725 <b>
726 <h5 class="right my-1"> 726 <h5 class="right my-1">
727 <b>Father Cell No:</b> 727 <b>Father Cell No:</b>
728 </h5> 728 </h5>
729 </b> 729 </b>
730 </v-flex> 730 </v-flex>
731 <v-flex sm6 xs6> 731 <v-flex sm6 xs6>
732 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 732 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
733 </v-flex> 733 </v-flex>
734 </v-layout> 734 </v-layout>
735 </v-flex> 735 </v-flex>
736 </v-layout> 736 </v-layout>
737 <v-layout wrap> 737 <v-layout wrap>
738 <v-flex xs12 sm5> 738 <v-flex xs12 sm5>
739 <v-layout> 739 <v-layout>
740 <v-flex xs6 sm6> 740 <v-flex xs6 sm6>
741 <b> 741 <b>
742 <h5 class="right my-1"> 742 <h5 class="right my-1">
743 <b>Mother Cell No:</b> 743 <b>Mother Cell No:</b>
744 </h5> 744 </h5>
745 </b> 745 </b>
746 </v-flex> 746 </v-flex>
747 <v-flex sm6 xs6> 747 <v-flex sm6 xs6>
748 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 748 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
749 </v-flex> 749 </v-flex>
750 </v-layout> 750 </v-layout>
751 </v-flex> 751 </v-flex>
752 <v-flex xs12 sm6> 752 <v-flex xs12 sm6>
753 <v-layout> 753 <v-layout>
754 <v-flex xs6 sm6> 754 <v-flex xs6 sm6>
755 <b> 755 <b>
756 <h5 class="my-1 right"> 756 <h5 class="my-1 right">
757 <b>Academic Year:</b> 757 <b>Academic Year:</b>
758 </h5> 758 </h5>
759 </b> 759 </b>
760 </v-flex> 760 </v-flex>
761 <v-flex sm5 xs6> 761 <v-flex sm5 xs6>
762 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 762 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
763 </v-flex> 763 </v-flex>
764 </v-layout> 764 </v-layout>
765 </v-flex> 765 </v-flex>
766 </v-layout> 766 </v-layout>
767 <v-layout wrap> 767 <v-layout wrap>
768 <v-flex xs12 sm5> 768 <v-flex xs12 sm5>
769 <v-layout> 769 <v-layout>
770 <v-flex xs6 sm6> 770 <v-flex xs6 sm6>
771 <b> 771 <b>
772 <h5 class="my-1 right"> 772 <h5 class="my-1 right">
773 <b>Medical Notes:</b> 773 <b>Medical Notes:</b>
774 </h5> 774 </h5>
775 </b> 775 </b>
776 </v-flex> 776 </v-flex>
777 <v-flex sm5 xs6> 777 <v-flex sm5 xs6>
778 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 778 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
779 </v-flex> 779 </v-flex>
780 </v-layout> 780 </v-layout>
781 </v-flex> 781 </v-flex>
782 <v-flex xs12 sm6> 782 <v-flex xs12 sm6>
783 <v-layout> 783 <v-layout>
784 <v-flex xs6 sm6> 784 <v-flex xs6 sm6>
785 <b> 785 <b>
786 <h5 class="right my-1"> 786 <h5 class="right my-1">
787 <b>Roll No. :</b> 787 <b>Roll No. :</b>
788 </h5> 788 </h5>
789 </b> 789 </b>
790 </v-flex> 790 </v-flex>
791 <v-flex sm6 xs6> 791 <v-flex sm6 xs6>
792 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 792 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
793 </v-flex> 793 </v-flex>
794 </v-layout> 794 </v-layout>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 <v-layout wrap class="hidden-xs-only"> 797 <v-layout wrap class="hidden-xs-only">
798 <v-flex xs12 sm5> 798 <v-flex xs12 sm5>
799 <v-layout wrap> 799 <v-layout wrap>
800 <v-flex sm6> 800 <v-flex sm6>
801 <b> 801 <b>
802 <h5 class="my-1 right"> 802 <h5 class="my-1 right">
803 <b>present Address:</b> 803 <b>present Address:</b>
804 </h5> 804 </h5>
805 </b> 805 </b>
806 </v-flex> 806 </v-flex>
807 <v-flex sm5> 807 <v-flex sm5>
808 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 808 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
809 </v-flex> 809 </v-flex>
810 </v-layout> 810 </v-layout>
811 </v-flex> 811 </v-flex>
812 <v-flex sm6> 812 <v-flex sm6>
813 <v-layout wrap> 813 <v-layout wrap>
814 <v-flex sm6> 814 <v-flex sm6>
815 <b> 815 <b>
816 <h5 class="my-1 right"> 816 <h5 class="my-1 right">
817 <b>Permanent Address:</b> 817 <b>Permanent Address:</b>
818 </h5> 818 </h5>
819 </b> 819 </b>
820 </v-flex> 820 </v-flex>
821 <v-flex sm6> 821 <v-flex sm6>
822 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 822 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
823 </v-flex> 823 </v-flex>
824 </v-layout> 824 </v-layout>
825 </v-flex> 825 </v-flex>
826 </v-layout> 826 </v-layout>
827 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 827 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
828 <v-flex xs12 sm5> 828 <v-flex xs12 sm5>
829 <v-layout wrap> 829 <v-layout wrap>
830 <v-flex xs8 sm6> 830 <v-flex xs8 sm6>
831 <b> 831 <b>
832 <h5 class="my-1"> 832 <h5 class="my-1">
833 <b>present Address:-</b> 833 <b>present Address:-</b>
834 </h5> 834 </h5>
835 </b> 835 </b>
836 </v-flex> 836 </v-flex>
837 <v-flex sm5 xs12> 837 <v-flex sm5 xs12>
838 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 838 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
839 </v-flex> 839 </v-flex>
840 </v-layout> 840 </v-layout>
841 </v-flex> 841 </v-flex>
842 <v-flex xs12 sm6> 842 <v-flex xs12 sm6>
843 <v-layout wrap> 843 <v-layout wrap>
844 <v-flex xs9 sm6> 844 <v-flex xs9 sm6>
845 <b> 845 <b>
846 <h5 class="my-1"> 846 <h5 class="my-1">
847 <b>Permanent Address:-</b> 847 <b>Permanent Address:-</b>
848 </h5> 848 </h5>
849 </b> 849 </b>
850 </v-flex> 850 </v-flex>
851 <v-flex sm6 xs12> 851 <v-flex sm6 xs12>
852 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 852 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
853 </v-flex> 853 </v-flex>
854 </v-layout> 854 </v-layout>
855 </v-flex> 855 </v-flex>
856 </v-layout> 856 </v-layout>
857 </v-container> 857 </v-container>
858 </v-card-text> 858 </v-card-text>
859 </v-card> 859 </v-card>
860 </v-dialog> 860 </v-dialog>
861 861
862 <v-snackbar 862 <v-snackbar
863 :timeout="timeout" 863 :timeout="timeout"
864 :top="y === 'top'" 864 :top="y === 'top'"
865 :right="x === 'right'" 865 :right="x === 'right'"
866 :vertical="mode === 'vertical'" 866 :vertical="mode === 'vertical'"
867 v-model="snackbar" 867 v-model="snackbar"
868 color="success" 868 color="success"
869 >{{ text }}</v-snackbar> 869 >{{ text }}</v-snackbar>
870 870
871 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 871 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
872 <v-card flat> 872 <v-card flat>
873 <v-card-actions class="hidden-xs-only hidden-sm-only"> 873 <v-card-actions class="hidden-xs-only hidden-sm-only">
874 <v-layout> 874 <v-layout>
875 <label class="right mt-4 ml-5">Select Class:</label> 875 <label class="right mt-4 ml-5">Select Class:</label>
876 <v-select 876 <v-select
877 :items="addclass" 877 :items="addclass"
878 label="Select Class" 878 label="Select Class"
879 v-model="selectStudents.select" 879 v-model="selectStudents.select"
880 item-text="classNum" 880 item-text="classNum"
881 item-value="_id" 881 item-value="_id"
882 name="Select Class" 882 name="Select Class"
883 :rules="classRules" 883 :rules="classRules"
884 @change="getSections(selectStudents.select)" 884 @change="getSections(selectStudents.select)"
885 class="px-4" 885 class="px-4"
886 required 886 required
887 ></v-select> 887 ></v-select>
888 <label class="right mt-4">Select Section:</label> 888 <label class="right mt-4">Select Section:</label>
889 <v-select 889 <v-select
890 :items="addSection" 890 :items="addSection"
891 label="Select Section" 891 label="Select Section"
892 v-model="selectStudents.selectSection" 892 v-model="selectStudents.selectSection"
893 item-text="name" 893 item-text="name"
894 item-value="_id" 894 item-value="_id"
895 name="Select Section" 895 name="Select Section"
896 :rules="sectionRules" 896 :rules="sectionRules"
897 class="pl-3" 897 class="pl-3"
898 required 898 required
899 ></v-select> 899 ></v-select>
900 </v-layout> 900 </v-layout>
901 <v-spacer></v-spacer> 901 <v-spacer></v-spacer>
902 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn> 902 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
903 </v-card-actions> 903 </v-card-actions>
904 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 904 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
905 <v-layout> 905 <v-layout>
906 <v-flex xs4> 906 <v-flex xs4>
907 <label class="right mt-4">Select Class:</label> 907 <label class="right mt-4">Select Class:</label>
908 </v-flex> 908 </v-flex>
909 <v-flex xs8> 909 <v-flex xs8>
910 <v-select 910 <v-select
911 :items="addclass" 911 :items="addclass"
912 label="Select Class" 912 label="Select Class"
913 v-model="selectStudents.select" 913 v-model="selectStudents.select"
914 item-text="classNum" 914 item-text="classNum"
915 item-value="_id" 915 item-value="_id"
916 name="Select Class" 916 name="Select Class"
917 :rules="classRules" 917 :rules="classRules"
918 @change="getSections(selectStudents.select)" 918 @change="getSections(selectStudents.select)"
919 class="px-2" 919 class="px-2"
920 required 920 required
921 ></v-select> 921 ></v-select>
922 </v-flex> 922 </v-flex>
923 </v-layout> 923 </v-layout>
924 <v-layout> 924 <v-layout>
925 <v-flex xs4> 925 <v-flex xs4>
926 <label class="right mt-4">Select Section:</label> 926 <label class="right mt-4">Select Section:</label>
927 </v-flex> 927 </v-flex>
928 <v-flex xs8> 928 <v-flex xs8>
929 <v-select 929 <v-select
930 :items="addSection" 930 :items="addSection"
931 label="Select Section" 931 label="Select Section"
932 v-model="selectStudents.selectSection" 932 v-model="selectStudents.selectSection"
933 item-text="name" 933 item-text="name"
934 item-value="_id" 934 item-value="_id"
935 name="Select Section" 935 name="Select Section"
936 :rules="sectionRules" 936 :rules="sectionRules"
937 class="px-2" 937 class="px-2"
938 required 938 required
939 ></v-select> 939 ></v-select>
940 </v-flex> 940 </v-flex>
941 </v-layout> 941 </v-layout>
942 <v-layout> 942 <v-layout>
943 <v-flex xs5 class="mx-auto mb-2"> 943 <v-flex xs5 class="mx-auto mb-2">
944 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn> 944 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
945 </v-flex> 945 </v-flex>
946 </v-layout> 946 </v-layout>
947 </v-flex> 947 </v-flex>
948 </v-card> 948 </v-card>
949 <v-data-table 949 <v-data-table
950 :headers="headers" 950 :headers="headers"
951 :items="desserts" 951 :items="desserts"
952 :pagination.sync="pagination" 952 :pagination.sync="pagination"
953 :search="search" 953 :search="search"
954 > 954 >
955 <template slot="items" slot-scope="props"> 955 <template slot="items" slot-scope="props">
956 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td> 956 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
957 <td id="td" class="text-xs-center"> 957 <td id="td" class="text-xs-center">
958 <v-avatar> 958 <v-avatar>
959 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 959 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
960 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 960 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
961 </v-avatar> 961 </v-avatar>
962 </td> 962 </td>
963 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 963 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
964 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 964 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
965 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 965 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
966 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 966 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
967 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td> 967 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
968 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td> 968 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
969 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 969 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
970 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 970 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
971 971
972 <td class="text-xs-center"> 972 <td class="text-xs-center">
973 <span> 973 <span>
974 <img 974 <img
975 style="cursor:pointer; width:25px; height:18px; " 975 style="cursor:pointer; width:25px; height:18px; "
976 class="mr-5" 976 class="mr-5"
977 @click="profile(props.item)" 977 @click="profile(props.item)"
978 src="/static/icon/eye1.png" 978 src="/static/icon/eye1.png"
979 /> 979 />
980 <img 980 <img
981 style="cursor:pointer; width:20px; height:18px; " 981 style="cursor:pointer; width:20px; height:18px; "
982 class="mr-5" 982 class="mr-5"
983 @click="editItem(props.item)" 983 @click="editItem(props.item)"
984 src="/static/icon/edit1.png" 984 src="/static/icon/edit1.png"
985 /> 985 />
986 <img 986 <img
987 style="cursor:pointer;width:20px; height:20px; " 987 style="cursor:pointer;width:20px; height:20px; "
988 class="mr-5" 988 class="mr-5"
989 @click="deleteItem(props.item)" 989 @click="deleteItem(props.item)"
990 src="/static/icon/delete1.png" 990 src="/static/icon/delete1.png"
991 /> 991 />
992 </span> 992 </span>
993 </td> 993 </td>
994 </template> 994 </template>
995 <v-alert 995 <v-alert
996 slot="no-results" 996 slot="no-results"
997 :value="true" 997 :value="true"
998 color="error" 998 color="error"
999 icon="warning" 999 icon="warning"
1000 >Your search for "{{ search }}" found no results.</v-alert> 1000 >Your search for "{{ search }}" found no results.</v-alert>
1001 </v-data-table> 1001 </v-data-table>
1002 </v-tab-item> 1002 </v-tab-item>
1003 1003
1004 <!-- ****** ADD STUDENTS DETAILS****** --> 1004 <!-- ****** ADD STUDENTS DETAILS****** -->
1005 <v-tab-item> 1005 <v-tab-item>
1006 <v-container fluid> 1006 <v-container fluid>
1007 <v-layout align-center justify-center fill-height> 1007 <v-layout align-center justify-center fill-height>
1008 <v-flex xs12 sm12 md10 lg11> 1008 <v-flex xs12 sm12 md10 lg11>
1009 <div> 1009 <div>
1010 <v-app> 1010 <v-app>
1011 <v-stepper v-model="e2"> 1011 <v-stepper v-model="e2">
1012 <v-stepper-header> 1012 <v-stepper-header>
1013 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1013 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1014 <v-divider></v-divider> 1014 <v-divider></v-divider>
1015 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1015 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1016 </v-stepper-header> 1016 </v-stepper-header>
1017 <v-stepper-items> 1017 <v-stepper-items>
1018 <v-stepper-content step="1"> 1018 <v-stepper-content step="1">
1019 <v-container fluid class> 1019 <v-container fluid class>
1020 <v-snackbar 1020 <v-snackbar
1021 :timeout="timeout" 1021 :timeout="timeout"
1022 :top="y === 'top'" 1022 :top="y === 'top'"
1023 :right="x === 'right'" 1023 :right="x === 'right'"
1024 :vertical="mode === 'vertical'" 1024 :vertical="mode === 'vertical'"
1025 v-model="snackbar" 1025 v-model="snackbar"
1026 color="success" 1026 color="success"
1027 >{{ text }}</v-snackbar> 1027 >{{ text }}</v-snackbar>
1028 <v-flex xs12 sm12> 1028 <v-flex xs12 sm12>
1029 <v-form ref="parentForm" v-model="valid" lazy-validation> 1029 <v-form ref="parentForm" v-model="valid" lazy-validation>
1030 <v-layout wrap> 1030 <v-layout wrap>
1031 <v-flex xs12 sm6> 1031 <v-flex xs12 sm6>
1032 <v-layout> 1032 <v-layout>
1033 <v-flex xs4 class="pt-4 subheading"> 1033 <v-flex xs4 class="pt-4 subheading">
1034 <label class="right">Parent Email Id:</label> 1034 <label class="right">Parent Email Id:</label>
1035 </v-flex> 1035 </v-flex>
1036 <v-flex xs8 class="ml-3"> 1036 <v-flex xs8 class="ml-3">
1037 <v-text-field 1037 <v-text-field
1038 placeholder="fill Parent email" 1038 placeholder="fill Parent email"
1039 :rules="emailRules" 1039 :rules="emailRules"
1040 v-model.trim="parentData.email" 1040 v-model.trim="parentData.email"
1041 type="text" 1041 type="text"
1042 v-on:keyup="getParentDetails" 1042 v-on:keyup="getParentDetails"
1043 name="email" 1043 name="email"
1044 required 1044 required
1045 ></v-text-field> 1045 ></v-text-field>
1046 </v-flex> 1046 </v-flex>
1047 </v-layout> 1047 </v-layout>
1048 </v-flex> 1048 </v-flex>
1049 <v-flex xs12 sm6> 1049 <v-flex xs12 sm6>
1050 <v-layout> 1050 <v-layout>
1051 <v-flex xs4 class="pt-4 subheading"> 1051 <v-flex xs4 class="pt-4 subheading">
1052 <label class="right">Father Name:</label> 1052 <label class="right">Father Name:</label>
1053 </v-flex> 1053 </v-flex>
1054 <v-flex xs8 class="ml-3"> 1054 <v-flex xs8 class="ml-3">
1055 <v-text-field 1055 <v-text-field
1056 v-model="parentData.fatherName" 1056 v-model="parentData.fatherName"
1057 :rules="fatherNameRules" 1057 :rules="fatherNameRules"
1058 placeholder="Fill your father Name" 1058 placeholder="Fill your father Name"
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-layout> 1064 </v-layout>
1065 <v-layout wrap> 1065 <v-layout wrap>
1066 <v-flex xs12 sm6> 1066 <v-flex xs12 sm6>
1067 <v-layout> 1067 <v-layout>
1068 <v-flex xs4 class="pt-4 subheading"> 1068 <v-flex xs4 class="pt-4 subheading">
1069 <label class="right">Father Cell No:</label> 1069 <label class="right">Father Cell No:</label>
1070 </v-flex> 1070 </v-flex>
1071 <v-flex xs8 class="ml-3"> 1071 <v-flex xs8 class="ml-3">
1072 <v-text-field 1072 <v-text-field
1073 v-model="parentData.fatherCellNo" 1073 v-model="parentData.fatherCellNo"
1074 placeholder="fill your father Cell Number" 1074 placeholder="fill your father Cell Number"
1075 name="state" 1075 name="state"
1076 type="number" 1076 type="number"
1077 :rules="fatheCellNoRules" 1077 :rules="fatheCellNoRules"
1078 required 1078 required
1079 ></v-text-field> 1079 ></v-text-field>
1080 </v-flex> 1080 </v-flex>
1081 </v-layout> 1081 </v-layout>
1082 </v-flex> 1082 </v-flex>
1083 <v-flex xs12 sm6> 1083 <v-flex xs12 sm6>
1084 <v-layout> 1084 <v-layout>
1085 <v-flex xs4 class="pt-4 subheading"> 1085 <v-flex xs4 class="pt-4 subheading">
1086 <label class="right">Mother Name:</label> 1086 <label class="right">Mother Name:</label>
1087 </v-flex> 1087 </v-flex>
1088 <v-flex xs8 class="ml-3"> 1088 <v-flex xs8 class="ml-3">
1089 <v-text-field 1089 <v-text-field
1090 v-model="parentData.motherName" 1090 v-model="parentData.motherName"
1091 placeholder="fill your Mother Name" 1091 placeholder="fill your Mother Name"
1092 name="state" 1092 name="state"
1093 type="text" 1093 type="text"
1094 :rules="motherNameRules" 1094 :rules="motherNameRules"
1095 required 1095 required
1096 ></v-text-field> 1096 ></v-text-field>
1097 </v-flex> 1097 </v-flex>
1098 </v-layout> 1098 </v-layout>
1099 </v-flex> 1099 </v-flex>
1100 </v-layout> 1100 </v-layout>
1101 <v-layout wrap> 1101 <v-layout wrap>
1102 <v-flex xs12 sm6> 1102 <v-flex xs12 sm6>
1103 <v-layout> 1103 <v-layout>
1104 <v-flex xs4 class="pt-4 subheading"> 1104 <v-flex xs4 class="pt-4 subheading">
1105 <label class="right">Mother Cell No:</label> 1105 <label class="right">Mother Cell No:</label>
1106 </v-flex> 1106 </v-flex>
1107 <v-flex xs8 class="ml-3"> 1107 <v-flex xs8 class="ml-3">
1108 <v-text-field 1108 <v-text-field
1109 v-model="parentData.motherCellNo" 1109 v-model="parentData.motherCellNo"
1110 placeholder="fill your Mother Cell Number" 1110 placeholder="fill your Mother Cell Number"
1111 name="state" 1111 name="state"
1112 type="number" 1112 type="number"
1113 :rules="motherCellNoRules" 1113 :rules="motherCellNoRules"
1114 required 1114 required
1115 ></v-text-field> 1115 ></v-text-field>
1116 </v-flex> 1116 </v-flex>
1117 </v-layout> 1117 </v-layout>
1118 </v-flex> 1118 </v-flex>
1119 </v-layout> 1119 </v-layout>
1120 <v-flex sm12 class="hidden-xs-only"> 1120 <v-flex sm12 class="hidden-xs-only">
1121 <v-card-actions> 1121 <v-card-actions>
1122 <v-spacer></v-spacer> 1122 <v-spacer></v-spacer>
1123 <v-btn 1123 <v-btn
1124 @click="submitParentDetails" 1124 @click="submitParentDetails"
1125 round 1125 round
1126 dark 1126 dark
1127 :loading="loading" 1127 :loading="loading"
1128 v-show="showParent" 1128 v-show="showParent"
1129 >Add</v-btn> 1129 >Add</v-btn>
1130 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1130 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1131 </v-card-actions> 1131 </v-card-actions>
1132 </v-flex> 1132 </v-flex>
1133 <v-flex 1133 <v-flex
1134 xs6 1134 xs6
1135 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1135 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1136 > 1136 >
1137 <v-btn 1137 <v-btn
1138 @click="submitParentDetails" 1138 @click="submitParentDetails"
1139 round 1139 round
1140 dark 1140 dark
1141 :loading="loading" 1141 :loading="loading"
1142 v-show="showParent" 1142 v-show="showParent"
1143 >Add</v-btn> 1143 >Add</v-btn>
1144 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1144 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1145 </v-flex> 1145 </v-flex>
1146 </v-form> 1146 </v-form>
1147 </v-flex> 1147 </v-flex>
1148 </v-container> 1148 </v-container>
1149 </v-stepper-content> 1149 </v-stepper-content>
1150 <v-stepper-content step="2"> 1150 <v-stepper-content step="2">
1151 <!-- <v-container fluid> --> 1151 <!-- <v-container fluid> -->
1152 <v-snackbar 1152 <v-snackbar
1153 :timeout="timeout" 1153 :timeout="timeout"
1154 :top="y === 'top'" 1154 :top="y === 'top'"
1155 :right="x === 'right'" 1155 :right="x === 'right'"
1156 :vertical="mode === 'vertical'" 1156 :vertical="mode === 'vertical'"
1157 v-model="snackbar" 1157 v-model="snackbar"
1158 color="success" 1158 color="success"
1159 >{{ text }}</v-snackbar> 1159 >{{ text }}</v-snackbar>
1160 <v-flex xs12 sm12> 1160 <v-flex xs12 sm12>
1161 <v-form ref="form" v-model="valid" lazy-validation> 1161 <v-form ref="form" v-model="valid" lazy-validation>
1162 <!-- <v-container fluid> --> 1162 <!-- <v-container fluid> -->
1163 <v-layout> 1163 <v-layout>
1164 <v-flex 1164 <v-flex
1165 xs12 1165 xs12
1166 class="text-xs-center text-sm-center text-md-center text-lg-center" 1166 class="text-xs-center text-sm-center text-md-center text-lg-center"
1167 > 1167 >
1168 <v-avatar size="100px"> 1168 <v-avatar size="100px">
1169 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1169 <img src="/static/icon/user.png" v-if="!imageUrl" />
1170 </v-avatar> 1170 </v-avatar>
1171 <input 1171 <input
1172 type="file" 1172 type="file"
1173 style="display: none" 1173 style="display: none"
1174 ref="image" 1174 ref="image"
1175 accept="image/*" 1175 accept="image/*"
1176 @change="onFilePicked" 1176 @change="onFilePicked"
1177 /> 1177 />
1178 <img 1178 <img
1179 :src="imageData.imageUrl" 1179 :src="imageData.imageUrl"
1180 height="150" 1180 height="150"
1181 v-if="imageUrl" 1181 v-if="imageUrl"
1182 style="border-radius:50%; width:200px" 1182 style="border-radius:50%; width:200px"
1183 /> 1183 />
1184 </v-flex> 1184 </v-flex>
1185 </v-layout> 1185 </v-layout>
1186 <v-layout wrap> 1186 <v-layout wrap>
1187 <v-flex xs12 sm6> 1187 <v-flex xs12 sm6>
1188 <v-layout> 1188 <v-layout>
1189 <v-flex x4 sm4 class="pt-4 subheading"> 1189 <v-flex x4 sm4 class="pt-4 subheading">
1190 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1190 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1191 <label 1191 <label
1192 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1192 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1193 >Class:</label> 1193 >Class:</label>
1194 </v-flex> 1194 </v-flex>
1195 <v-flex xs8 sm8 class="ml-3"> 1195 <v-flex xs8 sm8 class="ml-3">
1196 <v-select 1196 <v-select
1197 :items="addclass" 1197 :items="addclass"
1198 label="Select Class" 1198 label="Select Class"
1199 v-model="addStudents.select" 1199 v-model="addStudents.select"
1200 item-text="classNum" 1200 item-text="classNum"
1201 item-value="_id" 1201 item-value="_id"
1202 name="Select Class" 1202 name="Select Class"
1203 :rules="classRules" 1203 :rules="classRules"
1204 @change="getSection(addStudents.select)" 1204 @change="getSection(addStudents.select)"
1205 required 1205 required
1206 ></v-select> 1206 ></v-select>
1207 </v-flex> 1207 </v-flex>
1208 </v-layout> 1208 </v-layout>
1209 </v-flex> 1209 </v-flex>
1210 <v-flex xs12 sm6> 1210 <v-flex xs12 sm6>
1211 <v-layout> 1211 <v-layout>
1212 <v-flex xs4 class="pt-4 subheading"> 1212 <v-flex xs4 class="pt-4 subheading">
1213 <label 1213 <label
1214 class="right hidden-xs-only hidden-sm-only" 1214 class="right hidden-xs-only hidden-sm-only"
1215 >Select Section:</label> 1215 >Select Section:</label>
1216 <label 1216 <label
1217 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1217 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1218 >Section:</label> 1218 >Section:</label>
1219 </v-flex> 1219 </v-flex>
1220 <v-flex xs8 class="ml-3"> 1220 <v-flex xs8 class="ml-3">
1221 <v-select 1221 <v-select
1222 :items="addSection" 1222 :items="addSection"
1223 label="Select Section" 1223 label="Select Section"
1224 v-model="addStudents.selectSection" 1224 v-model="addStudents.selectSection"
1225 item-text="name" 1225 item-text="name"
1226 item-value="_id" 1226 item-value="_id"
1227 name="Select Section" 1227 name="Select Section"
1228 :rules="sectionRules" 1228 :rules="sectionRules"
1229 required 1229 required
1230 ></v-select> 1230 ></v-select>
1231 </v-flex> 1231 </v-flex>
1232 </v-layout> 1232 </v-layout>
1233 </v-flex> 1233 </v-flex>
1234 </v-layout> 1234 </v-layout>
1235 <v-layout wrap> 1235 <v-layout wrap>
1236 <v-flex xs12 sm6> 1236 <v-flex xs12 sm6>
1237 <v-layout> 1237 <v-layout>
1238 <v-flex xs4 sm4 class="pt-4 subheading"> 1238 <v-flex xs4 sm4 class="pt-4 subheading">
1239 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1239 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1240 <label 1240 <label
1241 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1241 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1242 >Name:</label> 1242 >Name:</label>
1243 </v-flex> 1243 </v-flex>
1244 <v-flex xs8 sm8 class="ml-3"> 1244 <v-flex xs8 sm8 class="ml-3">
1245 <v-text-field 1245 <v-text-field
1246 v-model="addStudents.name" 1246 v-model="addStudents.name"
1247 placeholder="fill your full Name" 1247 placeholder="fill your full Name"
1248 name="name" 1248 name="name"
1249 type="text" 1249 type="text"
1250 :rules="nameRules" 1250 :rules="nameRules"
1251 required 1251 required
1252 ></v-text-field> 1252 ></v-text-field>
1253 </v-flex> 1253 </v-flex>
1254 </v-layout> 1254 </v-layout>
1255 </v-flex> 1255 </v-flex>
1256 <v-flex xs12 sm6> 1256 <v-flex xs12 sm6>
1257 <v-layout> 1257 <v-layout>
1258 <v-flex xs4 sm4 class="pt-4 subheading"> 1258 <v-flex xs4 sm4 class="pt-4 subheading">
1259 <label class="right">Email ID:</label> 1259 <label class="right">Email ID:</label>
1260 </v-flex> 1260 </v-flex>
1261 <v-flex xs8 sm8 class="ml-3"> 1261 <v-flex xs8 sm8 class="ml-3">
1262 <v-text-field 1262 <v-text-field
1263 placeholder="fill your email" 1263 placeholder="fill your email"
1264 :rules="emailRules" 1264 :rules="emailRules"
1265 v-model="addStudents.email" 1265 v-model="addStudents.email"
1266 type="text" 1266 type="text"
1267 name="email" 1267 name="email"
1268 required 1268 required
1269 ></v-text-field> 1269 ></v-text-field>
1270 </v-flex> 1270 </v-flex>
1271 </v-layout> 1271 </v-layout>
1272 </v-flex> 1272 </v-flex>
1273 </v-layout> 1273 </v-layout>
1274 <v-layout wrap> 1274 <v-layout wrap>
1275 <v-flex xs12 sm6> 1275 <v-flex xs12 sm6>
1276 <v-layout> 1276 <v-layout>
1277 <v-flex xs4 sm4 class="pt-4 subheading"> 1277 <v-flex xs4 sm4 class="pt-4 subheading">
1278 <label 1278 <label
1279 class="right hidden-sm-only hidden-xs-only" 1279 class="right hidden-sm-only hidden-xs-only"
1280 >Date of Birth:</label> 1280 >Date of Birth:</label>
1281 <label 1281 <label
1282 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1282 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1283 >D.O.B:</label> 1283 >D.O.B:</label>
1284 </v-flex> 1284 </v-flex>
1285 <v-flex xs8 sm8 class="ml-3"> 1285 <v-flex xs8 sm8 class="ml-3">
1286 <v-menu 1286 <v-menu
1287 ref="menu" 1287 ref="menu"
1288 :close-on-content-click="false" 1288 :close-on-content-click="false"
1289 v-model="menu" 1289 v-model="menu"
1290 :nudge-right="40" 1290 :nudge-right="40"
1291 lazy 1291 lazy
1292 transition="scale-transition" 1292 transition="scale-transition"
1293 offset-y 1293 offset-y
1294 full-width 1294 full-width
1295 min-width="290px" 1295 min-width="290px"
1296 > 1296 >
1297 <v-text-field 1297 <v-text-field
1298 slot="activator" 1298 slot="activator"
1299 :rules="dateRules" 1299 :rules="dateRules"
1300 v-model="addStudents.date" 1300 v-model="addStudents.date"
1301 placeholder="Select date" 1301 placeholder="Select date"
1302 ></v-text-field> 1302 ></v-text-field>
1303 <v-date-picker 1303 <v-date-picker
1304 ref="picker" 1304 ref="picker"
1305 v-model="addStudents.date" 1305 v-model="addStudents.date"
1306 :max="new Date().toISOString().substr(0, 10)" 1306 :max="new Date().toISOString().substr(0, 10)"
1307 min="1950-01-01" 1307 min="1950-01-01"
1308 @input="menu = false" 1308 @input="menu = false"
1309 ></v-date-picker> 1309 ></v-date-picker>
1310 </v-menu> 1310 </v-menu>
1311 </v-flex> 1311 </v-flex>
1312 </v-layout> 1312 </v-layout>
1313 </v-flex> 1313 </v-flex>
1314 <v-flex xs12 sm6> 1314 <v-flex xs12 sm6>
1315 <v-layout> 1315 <v-layout>
1316 <v-flex xs4 class="pt-4 subheading"> 1316 <v-flex xs4 class="pt-4 subheading">
1317 <label class="right">City:</label> 1317 <label class="right">City:</label>
1318 </v-flex> 1318 </v-flex>
1319 <v-flex xs8 class="ml-3"> 1319 <v-flex xs8 class="ml-3">
1320 <v-text-field 1320 <v-text-field
1321 v-model="addStudents.city" 1321 v-model="addStudents.city"
1322 placeholder="fill your City Name" 1322 placeholder="fill your City Name"
1323 name="City" 1323 name="City"
1324 type="text" 1324 type="text"
1325 :rules="cityRules" 1325 :rules="cityRules"
1326 required 1326 required
1327 ></v-text-field> 1327 ></v-text-field>
1328 </v-flex> 1328 </v-flex>
1329 </v-layout> 1329 </v-layout>
1330 </v-flex> 1330 </v-flex>
1331 </v-layout> 1331 </v-layout>
1332 <v-layout wrap> 1332 <v-layout wrap>
1333 <v-flex xs12 sm6> 1333 <v-flex xs12 sm6>
1334 <v-layout> 1334 <v-layout>
1335 <v-flex xs4 class="pt-4 subheading"> 1335 <v-flex xs4 class="pt-4 subheading">
1336 <label class="right">State:</label> 1336 <label class="right">State:</label>
1337 </v-flex> 1337 </v-flex>
1338 <v-flex xs8 class="ml-3"> 1338 <v-flex xs8 class="ml-3">
1339 <v-text-field 1339 <v-text-field
1340 v-model="addStudents.state" 1340 v-model="addStudents.state"
1341 placeholder="fill your State Name" 1341 placeholder="fill your State Name"
1342 name="state" 1342 name="state"
1343 type="text" 1343 type="text"
1344 :rules="stateRules" 1344 :rules="stateRules"
1345 required 1345 required
1346 ></v-text-field> 1346 ></v-text-field>
1347 </v-flex> 1347 </v-flex>
1348 </v-layout> 1348 </v-layout>
1349 </v-flex> 1349 </v-flex>
1350 <v-flex xs12 sm6> 1350 <v-flex xs12 sm6>
1351 <v-layout> 1351 <v-layout>
1352 <v-flex xs4 class="pt-4 subheading"> 1352 <v-flex xs4 class="pt-4 subheading">
1353 <label class="right">Pincode:</label> 1353 <label class="right">Pincode:</label>
1354 </v-flex> 1354 </v-flex>
1355 <v-flex xs8 class="ml-3"> 1355 <v-flex xs8 class="ml-3">
1356 <v-text-field 1356 <v-text-field
1357 v-model="addStudents.pincode" 1357 v-model="addStudents.pincode"
1358 placeholder="fill your pincode" 1358 placeholder="fill your pincode"
1359 name="pincode" 1359 name="pincode"
1360 type="number" 1360 type="number"
1361 :rules="pincode" 1361 :rules="pincode"
1362 required 1362 required
1363 ></v-text-field> 1363 ></v-text-field>
1364 </v-flex> 1364 </v-flex>
1365 </v-layout> 1365 </v-layout>
1366 </v-flex> 1366 </v-flex>
1367 </v-layout> 1367 </v-layout>
1368 <v-layout wrap> 1368 <v-layout wrap>
1369 <v-flex xs12 sm6> 1369 <v-flex xs12 sm6>
1370 <v-layout> 1370 <v-layout>
1371 <v-flex xs4 class="pt-4 subheading"> 1371 <v-flex xs4 class="pt-4 subheading">
1372 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1372 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1373 <label 1373 <label
1374 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1374 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1375 >Mobile:</label> 1375 >Mobile:</label>
1376 </v-flex> 1376 </v-flex>
1377 <v-flex xs8 class="ml-3"> 1377 <v-flex xs8 class="ml-3">
1378 <v-text-field 1378 <v-text-field
1379 v-model="addStudents.mobile" 1379 v-model="addStudents.mobile"
1380 placeholder="fill your MobileNo" 1380 placeholder="fill your MobileNo"
1381 name="mobileNo" 1381 name="mobileNo"
1382 type="number" 1382 type="number"
1383 :rules="mobileNoRules" 1383 :rules="mobileNoRules"
1384 required 1384 required
1385 ></v-text-field> 1385 ></v-text-field>
1386 </v-flex> 1386 </v-flex>
1387 </v-layout> 1387 </v-layout>
1388 </v-flex> 1388 </v-flex>
1389 <v-flex xs12 sm6> 1389 <v-flex xs12 sm6>
1390 <v-layout> 1390 <v-layout>
1391 <v-flex xs4 class="pt-4 subheading"> 1391 <v-flex xs4 class="pt-4 subheading">
1392 <label 1392 <label
1393 class="right hidden-xs-only hidden-sm-only" 1393 class="right hidden-xs-only hidden-sm-only"
1394 >Select Country:</label> 1394 >Select Country:</label>
1395 <label 1395 <label
1396 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1396 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1397 >Country:</label> 1397 >Country:</label>
1398 </v-flex> 1398 </v-flex>
1399 <v-flex xs8 class="ml-3"> 1399 <v-flex xs8 class="ml-3">
1400 <v-autocomplete 1400 <v-autocomplete
1401 v-model="addStudents.country" 1401 v-model="addStudents.country"
1402 :rules="country" 1402 :rules="country"
1403 :items="countries" 1403 :items="countries"
1404 placeholder="Select Country Name" 1404 placeholder="Select Country Name"
1405 required 1405 required
1406 ></v-autocomplete> 1406 ></v-autocomplete>
1407 </v-flex> 1407 </v-flex>
1408 </v-layout> 1408 </v-layout>
1409 </v-flex> 1409 </v-flex>
1410 </v-layout> 1410 </v-layout>
1411 <v-layout wrap> 1411 <v-layout wrap>
1412 <v-flex xs12 sm6> 1412 <v-flex xs12 sm6>
1413 <v-layout> 1413 <v-layout>
1414 <v-flex xs4 class="pt-4 subheading"> 1414 <v-flex xs4 class="pt-4 subheading">
1415 <label class="right">Gender:</label> 1415 <label class="right">Gender:</label>
1416 </v-flex> 1416 </v-flex>
1417 <v-flex xs8 class="ml-3"> 1417 <v-flex xs8 class="ml-3">
1418 <v-select 1418 <v-select
1419 :items="gender" 1419 :items="gender"
1420 v-model="addStudents.gender" 1420 v-model="addStudents.gender"
1421 :rules="genderRules" 1421 :rules="genderRules"
1422 label="Select Gender" 1422 label="Select Gender"
1423 required 1423 required
1424 ></v-select> 1424 ></v-select>
1425 </v-flex> 1425 </v-flex>
1426 </v-layout> 1426 </v-layout>
1427 </v-flex> 1427 </v-flex>
1428 <v-flex xs12 sm6> 1428 <v-flex xs12 sm6>
1429 <v-layout> 1429 <v-layout>
1430 <v-flex xs4 class="pt-4 subheading"> 1430 <v-flex xs4 class="pt-4 subheading">
1431 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1431 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1432 <label 1432 <label
1433 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1433 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1434 >Blood:</label> 1434 >Blood:</label>
1435 </v-flex> 1435 </v-flex>
1436 <v-flex xs8 class="ml-3"> 1436 <v-flex xs8 class="ml-3">
1437 <v-text-field 1437 <v-text-field
1438 v-model="addStudents.bloodGroup" 1438 v-model="addStudents.bloodGroup"
1439 placeholder="Fill your Blood Group" 1439 placeholder="Fill your Blood Group"
1440 required 1440 required
1441 ></v-text-field> 1441 ></v-text-field>
1442 </v-flex> 1442 </v-flex>
1443 </v-layout> 1443 </v-layout>
1444 </v-flex> 1444 </v-flex>
1445 </v-layout> 1445 </v-layout>
1446 <v-layout wrap> 1446 <v-layout wrap>
1447 <v-flex xs12 sm6> 1447 <v-flex xs12 sm6>
1448 <v-layout> 1448 <v-layout>
1449 <v-flex xs4 class="pt-4 subheading"> 1449 <v-flex xs4 class="pt-4 subheading">
1450 <label class="right">Allergies:</label> 1450 <label class="right">Allergies:</label>
1451 </v-flex> 1451 </v-flex>
1452 <v-flex xs8 class="ml-3"> 1452 <v-flex xs8 class="ml-3">
1453 <v-text-field 1453 <v-text-field
1454 v-model="addStudents.allergies" 1454 v-model="addStudents.allergies"
1455 placeholder="Fill your Allergies" 1455 placeholder="Fill your Allergies"
1456 required 1456 required
1457 ></v-text-field> 1457 ></v-text-field>
1458 </v-flex> 1458 </v-flex>
1459 </v-layout> 1459 </v-layout>
1460 </v-flex> 1460 </v-flex>
1461 <v-flex xs12 sm6> 1461 <v-flex xs12 sm6>
1462 <v-layout> 1462 <v-layout>
1463 <v-flex xs4 class="pt-4 subheading"> 1463 <v-flex xs4 class="pt-4 subheading">
1464 <label 1464 <label
1465 class="right hidden-xs-only hidden-sm-only" 1465 class="right hidden-xs-only hidden-sm-only"
1466 >Medical Notes:</label> 1466 >Medical Notes:</label>
1467 <label 1467 <label
1468 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1468 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1469 >Medical:</label> 1469 >Medical:</label>
1470 </v-flex> 1470 </v-flex>
1471 <v-flex xs8 class="ml-3"> 1471 <v-flex xs8 class="ml-3">
1472 <v-text-field 1472 <v-text-field
1473 v-model="addStudents.medicalNotes" 1473 v-model="addStudents.medicalNotes"
1474 placeholder="Fill your Medical Notes" 1474 placeholder="Fill your Medical Notes"
1475 required 1475 required
1476 ></v-text-field> 1476 ></v-text-field>
1477 </v-flex> 1477 </v-flex>
1478 </v-layout> 1478 </v-layout>
1479 </v-flex> 1479 </v-flex>
1480 </v-layout> 1480 </v-layout>
1481 <v-layout wrap> 1481 <v-layout wrap>
1482 <v-flex xs12 sm6> 1482 <v-flex xs12 sm6>
1483 <v-layout> 1483 <v-layout>
1484 <v-flex xs4 class="pt-4 subheading"> 1484 <v-flex xs4 class="pt-4 subheading">
1485 <label class="right">Height:</label> 1485 <label class="right">Height:</label>
1486 </v-flex> 1486 </v-flex>
1487 <v-flex xs8 class="ml-3"> 1487 <v-flex xs8 class="ml-3">
1488 <v-text-field 1488 <v-text-field
1489 v-model="addStudents.height" 1489 v-model="addStudents.height"
1490 placeholder="Fill your Height" 1490 placeholder="Fill your Height"
1491 required 1491 required
1492 ></v-text-field> 1492 ></v-text-field>
1493 </v-flex> 1493 </v-flex>
1494 </v-layout> 1494 </v-layout>
1495 </v-flex> 1495 </v-flex>
1496 <v-flex xs12 sm6> 1496 <v-flex xs12 sm6>
1497 <v-layout> 1497 <v-layout>
1498 <v-flex xs4 class="pt-4 subheading"> 1498 <v-flex xs4 class="pt-4 subheading">
1499 <label class="right">Weight:</label> 1499 <label class="right">Weight:</label>
1500 </v-flex> 1500 </v-flex>
1501 <v-flex xs8 class="ml-3"> 1501 <v-flex xs8 class="ml-3">
1502 <v-text-field 1502 <v-text-field
1503 v-model="addStudents.weight" 1503 v-model="addStudents.weight"
1504 placeholder="Fill your Weight" 1504 placeholder="Fill your Weight"
1505 required 1505 required
1506 ></v-text-field> 1506 ></v-text-field>
1507 </v-flex> 1507 </v-flex>
1508 </v-layout> 1508 </v-layout>
1509 </v-flex> 1509 </v-flex>
1510 </v-layout> 1510 </v-layout>
1511 <v-layout wrap> 1511 <v-layout wrap>
1512 <v-flex xs12 sm6> 1512 <v-flex xs12 sm6>
1513 <v-layout> 1513 <v-layout>
1514 <v-flex xs4 class="pt-4 subheading"> 1514 <v-flex xs4 class="pt-4 subheading">
1515 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1515 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1516 <label 1516 <label
1517 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1517 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1518 >Uplaod :</label> 1518 >Uplaod :</label>
1519 </v-flex> 1519 </v-flex>
1520 <v-flex xs8 class="ml-3"> 1520 <v-flex xs8 class="ml-3">
1521 <v-text-field 1521 <v-text-field
1522 label="Select Image" 1522 label="Select Image"
1523 @click="pickFile" 1523 @click="pickFile"
1524 v-model="imageName" 1524 v-model="imageName"
1525 append-icon="attach_file" 1525 append-icon="attach_file"
1526 ></v-text-field> 1526 ></v-text-field>
1527 </v-flex> 1527 </v-flex>
1528 </v-layout> 1528 </v-layout>
1529 </v-flex> 1529 </v-flex>
1530 <v-flex xs12 sm6> 1530 <v-flex xs12 sm6>
1531 <v-layout> 1531 <v-layout>
1532 <v-flex xs4 class="pt-4 subheading"> 1532 <v-flex xs4 class="pt-4 subheading">
1533 <label 1533 <label
1534 class="right hidden-xs-only hidden-sm-only" 1534 class="right hidden-xs-only hidden-sm-only"
1535 >Academic Year:</label> 1535 >Academic Year:</label>
1536 <label 1536 <label
1537 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1537 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1538 >Year:</label> 1538 >Year:</label>
1539 </v-flex> 1539 </v-flex>
1540 <v-flex xs8 class="ml-3"> 1540 <v-flex xs8 class="ml-3">
1541 <v-text-field 1541 <v-text-field
1542 v-model="addStudents.establishmentYear" 1542 v-model="addStudents.establishmentYear"
1543 placeholder="fill your Academic Year" 1543 placeholder="fill your Academic Year"
1544 name="state" 1544 name="state"
1545 type="number" 1545 type="number"
1546 :rules="establishmentYearRules" 1546 :rules="establishmentYearRules"
1547 required 1547 required
1548 ></v-text-field> 1548 ></v-text-field>
1549 </v-flex> 1549 </v-flex>
1550 </v-layout> 1550 </v-layout>
1551 </v-flex> 1551 </v-flex>
1552 </v-layout> 1552 </v-layout>
1553 <v-layout wrap> 1553 <v-layout wrap>
1554 <v-flex xs12 sm6> 1554 <v-flex xs12 sm6>
1555 <v-layout> 1555 <v-layout>
1556 <v-flex xs4 class="pt-4 subheading"> 1556 <v-flex xs4 class="pt-4 subheading">
1557 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1557 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1558 <label 1558 <label
1559 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1559 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1560 >Roll No:</label> 1560 >Roll No:</label>
1561 </v-flex> 1561 </v-flex>
1562 <v-flex xs8 class="ml-3"> 1562 <v-flex xs8 class="ml-3">
1563 <v-text-field 1563 <v-text-field
1564 v-model="addStudents.rollNo" 1564 v-model="addStudents.rollNo"
1565 placeholder="Fill your Roll Number" 1565 placeholder="Fill your Roll Number"
1566 required 1566 required
1567 ></v-text-field> 1567 ></v-text-field>
1568 </v-flex> 1568 </v-flex>
1569 </v-layout> 1569 </v-layout>
1570 </v-flex> 1570 </v-flex>
1571 </v-layout> 1571 <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only">
1572 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
1573 <v-flex xs12 sm12>
1574 <v-layout> 1572 <v-layout>
1575 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 1573 <v-flex xs4 sm4 class="pt-4 subheading">
1576 <label class="right pr-4">Present Address:</label> 1574 <label class="right pr-4">Present Address:</label>
1577 </v-flex> 1575 </v-flex>
1578 <v-flex xs8 sm12> 1576 <v-flex xs8 sm8 class="ml-3">
1579 <v-text-field 1577 <v-text-field
1580 name="input-4-3" 1578 name="input-4-3"
1581 v-model="addStudents.presentAddress" 1579 v-model="addStudents.presentAddress"
1582 :rules="presentAddress" 1580 :rules="presentAddress"
1583 placeholder="fill Your present Address" 1581 placeholder="fill Your present Address"
1584 required 1582 required
1585 ></v-text-field> 1583 ></v-text-field>
1586 </v-flex> 1584 </v-flex>
1587 </v-layout> 1585 </v-layout>
1588 </v-flex> 1586 </v-flex>
1589 <v-flex xs12 sm12> 1587 </v-layout>
1588 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
1589 <v-flex xs12 sm6>
1590 <v-layout> 1590 <v-layout>
1591 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 1591 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1592 <label class>Permanent Address:</label> 1592 <label class="right">Permanent Address:</label>
1593 </v-flex> 1593 </v-flex>
1594 <v-flex xs12 sm12> 1594 <v-flex xs12 sm8 class="ml-3">
1595 <v-text-field 1595 <v-text-field
1596 name="input-4-3" 1596 name="input-4-3"
1597 v-model="addStudents.permanentAddress" 1597 v-model="addStudents.permanentAddress"
1598 :rules="permanentAddress" 1598 :rules="permanentAddress"
1599 placeholder="fill Your Permanent Address" 1599 placeholder="fill Your Permanent Address"
1600 required 1600 required
1601 ></v-text-field> 1601 ></v-text-field>
1602 </v-flex> 1602 </v-flex>
1603 </v-layout> 1603 </v-layout>
1604 </v-flex> 1604 </v-flex>
1605 </v-layout> 1605 </v-layout>
1606 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1606 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1607 <v-flex xs12 sm12> 1607 <v-flex xs12 sm12>
1608 <v-layout> 1608 <v-layout>
1609 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 1609 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1610 <label class>Present Address :</label> 1610 <label class>Present Address :</label>
1611 </v-flex> 1611 </v-flex>
1612 </v-layout> 1612 </v-layout>
1613 <v-layout> 1613 <v-layout>
1614 <v-flex xs12 sm12> 1614 <v-flex xs12 sm12>
1615 <v-textarea 1615 <v-textarea
1616 name="input-4-3" 1616 name="input-4-3"
1617 v-model="addStudents.presentAddress" 1617 v-model="addStudents.presentAddress"
1618 :rules="presentAddress" 1618 :rules="presentAddress"
1619 placeholder="fill Your present Address" 1619 placeholder="fill Your present Address"
1620 required 1620 required
1621 ></v-textarea> 1621 ></v-textarea>
1622 </v-flex> 1622 </v-flex>
1623 </v-layout> 1623 </v-layout>
1624 </v-flex> 1624 </v-flex>
1625 <v-flex xs12 sm12> 1625 <v-flex xs12 sm12>
1626 <v-layout> 1626 <v-layout>
1627 <v-flex 1627 <v-flex
1628 xs12 1628 xs12
1629 sm3 1629 sm12
1630 class="pt-4 pr-4 subheading text-xs-center addressForm" 1630 class="pt-4 pr-4 subheading text-xs-center addressForm"
1631 > 1631 >
1632 <label>Permanent addr:</label> 1632 <label>Permanent addr:</label>
1633 </v-flex> 1633 </v-flex>
1634 </v-layout> 1634 </v-layout>
1635 <v-layout> 1635 <v-layout>
1636 <v-flex xs12 sm12> 1636 <v-flex xs12 sm12>
1637 <v-textarea 1637 <v-textarea
1638 name="input-4-3" 1638 name="input-4-3"
1639 v-model="addStudents.permanentAddress" 1639 v-model="addStudents.permanentAddress"
1640 :rules="permanentAddress" 1640 :rules="permanentAddress"
1641 placeholder="fill Your Permanent Address" 1641 placeholder="fill Your Permanent Address"
1642 required 1642 required
1643 ></v-textarea> 1643 ></v-textarea>
1644 </v-flex> 1644 </v-flex>
1645 </v-layout> 1645 </v-layout>
1646 </v-flex> 1646 </v-flex>
1647 </v-layout> 1647 </v-layout>
1648 <v-layout> 1648 <v-layout>
1649 <v-flex xs12 sm12> 1649 <v-flex xs12 sm12>
1650 <v-layout> 1650 <v-layout>
1651 <v-flex xs6> 1651 <v-flex xs6>
1652 <v-btn round dark @click="e2 = 1">Back</v-btn> 1652 <v-btn round dark @click="e2 = 1">Back</v-btn>
1653 </v-flex> 1653 </v-flex>
1654 <v-flex xs6> 1654 <v-flex xs6>
1655 <v-btn 1655 <v-btn
1656 @click="submit" 1656 @click="submit"
1657 round 1657 round
1658 dark 1658 dark
1659 :loading="loading" 1659 :loading="loading"
1660 class="right" 1660 class="right"
1661 >Add</v-btn> 1661 >Add</v-btn>
1662 </v-flex> 1662 </v-flex>
1663 </v-layout> 1663 </v-layout>
1664 </v-flex> 1664 </v-flex>
1665 </v-layout> 1665 </v-layout>
1666 <!-- </v-container> --> 1666 <!-- </v-container> -->
1667 </v-form> 1667 </v-form>
1668 </v-flex> 1668 </v-flex>
1669 <!-- </v-container> --> 1669 <!-- </v-container> -->
1670 </v-stepper-content> 1670 </v-stepper-content>
1671 </v-stepper-items> 1671 </v-stepper-items>
1672 </v-stepper> 1672 </v-stepper>
1673 </v-app> 1673 </v-app>
1674 </div> 1674 </div>
1675 </v-flex> 1675 </v-flex>
1676 </v-layout> 1676 </v-layout>
1677 </v-container> 1677 </v-container>
1678 </v-tab-item> 1678 </v-tab-item>
1679 </v-tabs> 1679 </v-tabs>
1680 <div class="loader" v-if="showLoader"> 1680 <div class="loader" v-if="showLoader">
1681 <v-progress-circular indeterminate color="white"></v-progress-circular> 1681 <v-progress-circular indeterminate color="white"></v-progress-circular>
1682 </div> 1682 </div>
1683 </div> 1683 </div>
1684 </template> 1684 </template>
1685 1685
1686 <script> 1686 <script>
1687 import http from "@/Services/http.js"; 1687 import http from "@/Services/http.js";
1688 import Util from "@/util"; 1688 import Util from "@/util";
1689 import moment from "moment"; 1689 import moment from "moment";
1690 1690
1691 export default { 1691 export default {
1692 data: () => ({ 1692 data: () => ({
1693 e2: 0, 1693 e2: 0,
1694 showParent: true, 1694 showParent: true,
1695 showNext: false, 1695 showNext: false,
1696 snackbar: false, 1696 snackbar: false,
1697 y: "top", 1697 y: "top",
1698 x: "right", 1698 x: "right",
1699 mode: "", 1699 mode: "",
1700 timeout: 3000, 1700 timeout: 3000,
1701 text: "", 1701 text: "",
1702 showLoader: false, 1702 showLoader: false,
1703 loading: false, 1703 loading: false,
1704 date: null, 1704 date: null,
1705 search: "", 1705 search: "",
1706 menu: false, 1706 menu: false,
1707 menu1: false, 1707 menu1: false,
1708 dialog: false, 1708 dialog: false,
1709 dialog1: false, 1709 dialog1: false,
1710 valid: true, 1710 valid: true,
1711 isActive: true, 1711 isActive: true,
1712 newActive: false, 1712 newActive: false,
1713 addclass: [], 1713 addclass: [],
1714 addSection: [], 1714 addSection: [],
1715 gender: ["Male", "Female"], 1715 gender: ["Male", "Female"],
1716 AddUsercredentials: {}, 1716 AddUsercredentials: {},
1717 pagination: { 1717 pagination: {
1718 rowsPerPage: 15 1718 rowsPerPage: 15
1719 }, 1719 },
1720 imageData: {}, 1720 imageData: {},
1721 imageName: "", 1721 imageName: "",
1722 imageUrl: "", 1722 imageUrl: "",
1723 imageFile: "", 1723 imageFile: "",
1724 nameRules: [v => !!v || " Full Name is required"], 1724 nameRules: [v => !!v || " Full Name is required"],
1725 dateRules: [v => !!v || " DOB is required"], 1725 dateRules: [v => !!v || " DOB is required"],
1726 cityRules: [v => !!v || " City Name is required"], 1726 cityRules: [v => !!v || " City Name is required"],
1727 pincode: [v => !!v || " Pincode is required"], 1727 pincode: [v => !!v || " Pincode is required"],
1728 country: [v => !!v || " Country Name is required"], 1728 country: [v => !!v || " Country Name is required"],
1729 permanentAddress: [v => !!v || " Permanent Address is required"], 1729 permanentAddress: [v => !!v || " Permanent Address is required"],
1730 presentAddress: [v => !!v || " Present Address is required"], 1730 presentAddress: [v => !!v || " Present Address is required"],
1731 mobileNoRules: [v => !!v || "Mobile Number is required"], 1731 mobileNoRules: [v => !!v || "Mobile Number is required"],
1732 stateRules: [v => !!v || "State Name is required"], 1732 stateRules: [v => !!v || "State Name is required"],
1733 classRules: [v => !!v || " Class Name is required"], 1733 classRules: [v => !!v || " Class Name is required"],
1734 sectionRules: [v => !!v || " Section Name is required"], 1734 sectionRules: [v => !!v || " Section Name is required"],
1735 genderRules: [v => !!v || " Select Gender is required"], 1735 genderRules: [v => !!v || " Select Gender is required"],
1736 fatherNameRules: [v => !!v || " Father Name is required"], 1736 fatherNameRules: [v => !!v || " Father Name is required"],
1737 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1737 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1738 motherNameRules: [v => !!v || " Mother Name is required"], 1738 motherNameRules: [v => !!v || " Mother Name is required"],
1739 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 1739 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
1740 establishmentYearRules: [v => !!v || " Academic Year is required"], 1740 establishmentYearRules: [v => !!v || " Academic Year is required"],
1741 errorMessages: "", 1741 errorMessages: "",
1742 emailRules: [ 1742 emailRules: [
1743 v => !!v || "E-mail is required", 1743 v => !!v || "E-mail is required",
1744 v => 1744 v =>
1745 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1745 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1746 "E-mail must be valid" 1746 "E-mail must be valid"
1747 ], 1747 ],
1748 countries: [ 1748 countries: [
1749 "Afghanistan", 1749 "Afghanistan",
1750 "Albania", 1750 "Albania",
1751 "Algeria", 1751 "Algeria",
1752 "Andorra", 1752 "Andorra",
1753 "Angola", 1753 "Angola",
1754 "Anguilla", 1754 "Anguilla",
1755 "Antigua &amp; Barbuda", 1755 "Antigua &amp; Barbuda",
1756 "Argentina", 1756 "Argentina",
1757 "Armenia", 1757 "Armenia",
1758 "Aruba", 1758 "Aruba",
1759 "Australia", 1759 "Australia",
1760 "Austria", 1760 "Austria",
1761 "Azerbaijan", 1761 "Azerbaijan",
1762 "Bahamas", 1762 "Bahamas",
1763 "Bahrain", 1763 "Bahrain",
1764 "Bangladesh", 1764 "Bangladesh",
1765 "Barbados", 1765 "Barbados",
1766 "Belarus", 1766 "Belarus",
1767 "Belgium", 1767 "Belgium",
1768 "Belize", 1768 "Belize",
1769 "Benin", 1769 "Benin",
1770 "Bermuda", 1770 "Bermuda",
1771 "Bhutan", 1771 "Bhutan",
1772 "Bolivia", 1772 "Bolivia",
1773 "Bosnia &amp; Herzegovina", 1773 "Bosnia &amp; Herzegovina",
1774 "Botswana", 1774 "Botswana",
1775 "Brazil", 1775 "Brazil",
1776 "British Virgin Islands", 1776 "British Virgin Islands",
1777 "Brunei", 1777 "Brunei",
1778 "Bulgaria", 1778 "Bulgaria",
1779 "Burkina Faso", 1779 "Burkina Faso",
1780 "Burundi", 1780 "Burundi",
1781 "Cambodia", 1781 "Cambodia",
1782 "Cameroon", 1782 "Cameroon",
1783 "Cape Verde", 1783 "Cape Verde",
1784 "Cayman Islands", 1784 "Cayman Islands",
1785 "Chad", 1785 "Chad",
1786 "Chile", 1786 "Chile",
1787 "China", 1787 "China",
1788 "Colombia", 1788 "Colombia",
1789 "Congo", 1789 "Congo",
1790 "Cook Islands", 1790 "Cook Islands",
1791 "Costa Rica", 1791 "Costa Rica",
1792 "Cote D Ivoire", 1792 "Cote D Ivoire",
1793 "Croatia", 1793 "Croatia",
1794 "Cruise Ship", 1794 "Cruise Ship",
1795 "Cuba", 1795 "Cuba",
1796 "Cyprus", 1796 "Cyprus",
1797 "Czech Republic", 1797 "Czech Republic",
1798 "Denmark", 1798 "Denmark",
1799 "Djibouti", 1799 "Djibouti",
1800 "Dominica", 1800 "Dominica",
1801 "Dominican Republic", 1801 "Dominican Republic",
1802 "Ecuador", 1802 "Ecuador",
1803 "Egypt", 1803 "Egypt",
1804 "El Salvador", 1804 "El Salvador",
1805 "Equatorial Guinea", 1805 "Equatorial Guinea",
1806 "Estonia", 1806 "Estonia",
1807 "Ethiopia", 1807 "Ethiopia",
1808 "Falkland Islands", 1808 "Falkland Islands",
1809 "Faroe Islands", 1809 "Faroe Islands",
1810 "Fiji", 1810 "Fiji",
1811 "Finland", 1811 "Finland",
1812 "France", 1812 "France",
1813 "French Polynesia", 1813 "French Polynesia",
1814 "French West Indies", 1814 "French West Indies",
1815 "Gabon", 1815 "Gabon",
1816 "Gambia", 1816 "Gambia",
1817 "Georgia", 1817 "Georgia",
1818 "Germany", 1818 "Germany",
1819 "Ghana", 1819 "Ghana",
1820 "Gibraltar", 1820 "Gibraltar",
1821 "Greece", 1821 "Greece",
1822 "Greenland", 1822 "Greenland",
1823 "Grenada", 1823 "Grenada",
1824 "Guam", 1824 "Guam",
1825 "Guatemala", 1825 "Guatemala",
1826 "Guernsey", 1826 "Guernsey",
1827 "Guinea", 1827 "Guinea",
1828 "Guinea Bissau", 1828 "Guinea Bissau",
1829 "Guyana", 1829 "Guyana",
1830 "Haiti", 1830 "Haiti",
1831 "Honduras", 1831 "Honduras",
1832 "Hong Kong", 1832 "Hong Kong",
1833 "Hungary", 1833 "Hungary",
1834 "Iceland", 1834 "Iceland",
1835 "India", 1835 "India",
1836 "Indonesia", 1836 "Indonesia",
1837 "Iran", 1837 "Iran",
1838 "Iraq", 1838 "Iraq",
1839 "Ireland", 1839 "Ireland",
1840 "Isle of Man", 1840 "Isle of Man",
1841 "Israel", 1841 "Israel",
1842 "Italy", 1842 "Italy",
1843 "Jamaica", 1843 "Jamaica",
1844 "Japan", 1844 "Japan",
1845 "Jersey", 1845 "Jersey",
1846 "Jordan", 1846 "Jordan",
1847 "Kazakhstan", 1847 "Kazakhstan",
1848 "Kenya", 1848 "Kenya",
1849 "Kuwait", 1849 "Kuwait",
1850 "Kyrgyz Republic", 1850 "Kyrgyz Republic",
1851 "Laos", 1851 "Laos",
1852 "Latvia", 1852 "Latvia",
1853 "Lebanon", 1853 "Lebanon",
1854 "Lesotho", 1854 "Lesotho",
1855 "Liberia", 1855 "Liberia",
1856 "Libya", 1856 "Libya",
1857 "Liechtenstein", 1857 "Liechtenstein",
1858 "Lithuania", 1858 "Lithuania",
1859 "Luxembourg", 1859 "Luxembourg",
1860 "Macau", 1860 "Macau",
1861 "Macedonia", 1861 "Macedonia",
1862 "Madagascar", 1862 "Madagascar",
1863 "Malawi", 1863 "Malawi",
1864 "Malaysia", 1864 "Malaysia",
1865 "Maldives", 1865 "Maldives",
1866 "Mali", 1866 "Mali",
1867 "Malta", 1867 "Malta",
1868 "Mauritania", 1868 "Mauritania",
1869 "Mauritius", 1869 "Mauritius",
1870 "Mexico", 1870 "Mexico",
1871 "Moldova", 1871 "Moldova",
1872 "Monaco", 1872 "Monaco",
1873 "Mongolia", 1873 "Mongolia",
1874 "Montenegro", 1874 "Montenegro",
1875 "Montserrat", 1875 "Montserrat",
1876 "Morocco", 1876 "Morocco",
1877 "Mozambique", 1877 "Mozambique",
1878 "Namibia", 1878 "Namibia",
1879 "Nepal", 1879 "Nepal",
1880 "Netherlands", 1880 "Netherlands",
1881 "Netherlands Antilles", 1881 "Netherlands Antilles",
1882 "New Caledonia", 1882 "New Caledonia",
1883 "New Zealand", 1883 "New Zealand",
1884 "Nicaragua", 1884 "Nicaragua",
1885 "Niger", 1885 "Niger",
1886 "Nigeria", 1886 "Nigeria",
1887 "Norway", 1887 "Norway",
1888 "Oman", 1888 "Oman",
1889 "Pakistan", 1889 "Pakistan",
1890 "Palestine", 1890 "Palestine",
1891 "Panama", 1891 "Panama",
1892 "Papua New Guinea", 1892 "Papua New Guinea",
1893 "Paraguay", 1893 "Paraguay",
1894 "Peru", 1894 "Peru",
1895 "Philippines", 1895 "Philippines",
1896 "Poland", 1896 "Poland",
1897 "Portugal", 1897 "Portugal",
1898 "Puerto Rico", 1898 "Puerto Rico",
1899 "Qatar", 1899 "Qatar",
1900 "Reunion", 1900 "Reunion",
1901 "Romania", 1901 "Romania",
1902 "Russia", 1902 "Russia",
1903 "Rwanda", 1903 "Rwanda",
1904 "Saint Pierre &amp; Miquelon", 1904 "Saint Pierre &amp; Miquelon",
1905 "Samoa", 1905 "Samoa",
1906 "San Marino", 1906 "San Marino",
1907 "Satellite", 1907 "Satellite",
1908 "Saudi Arabia", 1908 "Saudi Arabia",
1909 "Senegal", 1909 "Senegal",
1910 "Serbia", 1910 "Serbia",
1911 "Seychelles", 1911 "Seychelles",
1912 "Sierra Leone", 1912 "Sierra Leone",
1913 "Singapore", 1913 "Singapore",
1914 "Slovakia", 1914 "Slovakia",
1915 "Slovenia", 1915 "Slovenia",
1916 "South Africa", 1916 "South Africa",
1917 "South Korea", 1917 "South Korea",
1918 "Spain", 1918 "Spain",
1919 "Sri Lanka", 1919 "Sri Lanka",
1920 "St Kitts &amp; Nevis", 1920 "St Kitts &amp; Nevis",
1921 "St Lucia", 1921 "St Lucia",
1922 "St Vincent", 1922 "St Vincent",
1923 "St. Lucia", 1923 "St. Lucia",
1924 "Sudan", 1924 "Sudan",
1925 "Suriname", 1925 "Suriname",
1926 "Swaziland", 1926 "Swaziland",
1927 "Sweden", 1927 "Sweden",
1928 "Switzerland", 1928 "Switzerland",
1929 "Syria", 1929 "Syria",
1930 "Taiwan", 1930 "Taiwan",
1931 "Tajikistan", 1931 "Tajikistan",
1932 "Tanzania", 1932 "Tanzania",
1933 "Thailand", 1933 "Thailand",
1934 "Timor L'Este", 1934 "Timor L'Este",
1935 "Togo", 1935 "Togo",
1936 "Tonga", 1936 "Tonga",
1937 "Trinidad &amp; Tobago", 1937 "Trinidad &amp; Tobago",
1938 "Tunisia", 1938 "Tunisia",
1939 "Turkey", 1939 "Turkey",
1940 "Turkmenistan", 1940 "Turkmenistan",
1941 "Turks &amp; Caicos", 1941 "Turks &amp; Caicos",
1942 "Uganda", 1942 "Uganda",
1943 "Ukraine", 1943 "Ukraine",
1944 "United Arab Emirates", 1944 "United Arab Emirates",
1945 "United Kingdom", 1945 "United Kingdom",
1946 "United States", 1946 "United States",
1947 "Uruguay", 1947 "Uruguay",
1948 "Uzbekistan", 1948 "Uzbekistan",
1949 "Venezuela", 1949 "Venezuela",
1950 "Vietnam", 1950 "Vietnam",
1951 "Virgin Islands (US)", 1951 "Virgin Islands (US)",
1952 "Yemen", 1952 "Yemen",
1953 "Zambia", 1953 "Zambia",
1954 "Zimbabwe" 1954 "Zimbabwe"
1955 ], 1955 ],
1956 headers: [ 1956 headers: [
1957 { 1957 {
1958 text: "Roll No.", 1958 text: "Roll No.",
1959 align: "center", 1959 align: "center",
1960 sortable: false, 1960 sortable: false,
1961 value: "rollNo" 1961 value: "rollNo"
1962 }, 1962 },
1963 { 1963 {
1964 text: "Profile Pic", 1964 text: "Profile Pic",
1965 value: "profilePicUrl", 1965 value: "profilePicUrl",
1966 sortable: false, 1966 sortable: false,
1967 align: "center" 1967 align: "center"
1968 }, 1968 },
1969 { text: "Name", value: "name", sortable: false, align: "center" }, 1969 { text: "Name", value: "name", sortable: false, align: "center" },
1970 { text: "Email", value: "email", sortable: false, align: "center" }, 1970 { text: "Email", value: "email", sortable: false, align: "center" },
1971 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1971 { text: "Dob", value: "dob", sortable: false, align: "center" },
1972 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1972 { text: "Gender", value: "gender", sortable: false, align: "center" },
1973 { 1973 {
1974 text: "Father Name", 1974 text: "Father Name",
1975 value: "fatherName", 1975 value: "fatherName",
1976 sortable: false, 1976 sortable: false,
1977 align: "center" 1977 align: "center"
1978 }, 1978 },
1979 { 1979 {
1980 text: "Mother Name", 1980 text: "Mother Name",
1981 value: "motherName", 1981 value: "motherName",
1982 sortable: false, 1982 sortable: false,
1983 align: "center" 1983 align: "center"
1984 }, 1984 },
1985 { 1985 {
1986 text: "Academic Year", 1986 text: "Academic Year",
1987 value: "establishmentYear", 1987 value: "establishmentYear",
1988 sortable: false, 1988 sortable: false,
1989 align: "center" 1989 align: "center"
1990 }, 1990 },
1991 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1991 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1992 { text: "Action", value: "", sortable: false, align: "center" } 1992 { text: "Action", value: "", sortable: false, align: "center" }
1993 ], 1993 ],
1994 desserts: [], 1994 desserts: [],
1995 parentId: "", 1995 parentId: "",
1996 editedIndex: -1, 1996 editedIndex: -1,
1997 parentData: {}, 1997 parentData: {},
1998 addStudents: { 1998 addStudents: {
1999 role: "STUDENT", 1999 role: "STUDENT",
2000 name: "", 2000 name: "",
2001 email: "", 2001 email: "",
2002 date: "", 2002 date: "",
2003 city: "", 2003 city: "",
2004 pincode: "", 2004 pincode: "",
2005 country: "", 2005 country: "",
2006 permanentAddress: "", 2006 permanentAddress: "",
2007 presentAddress: "", 2007 presentAddress: "",
2008 mobile: "", 2008 mobile: "",
2009 state: "", 2009 state: "",
2010 gender: "", 2010 gender: "",
2011 select: "", 2011 select: "",
2012 selectSection: "", 2012 selectSection: "",
2013 bloodGroup: "", 2013 bloodGroup: "",
2014 allergies: "", 2014 allergies: "",
2015 medicalNotes: "", 2015 medicalNotes: "",
2016 height: "", 2016 height: "",
2017 weight: "", 2017 weight: "",
2018 rollNo: "", 2018 rollNo: "",
2019 establishmentYear: new Date().getFullYear() 2019 establishmentYear: new Date().getFullYear()
2020 }, 2020 },
2021 selectStudents: { 2021 selectStudents: {
2022 select: "", 2022 select: "",
2023 selectSection: "" 2023 selectSection: ""
2024 }, 2024 },
2025 editedItem: { 2025 editedItem: {
2026 role: "STUDENT", 2026 role: "STUDENT",
2027 name: "", 2027 name: "",
2028 email: "", 2028 email: "",
2029 dob: "", 2029 dob: "",
2030 city: "", 2030 city: "",
2031 pincode: "", 2031 pincode: "",
2032 country: "", 2032 country: "",
2033 permanentAddress: "", 2033 permanentAddress: "",
2034 presentAddress: "", 2034 presentAddress: "",
2035 mobile: "", 2035 mobile: "",
2036 state: "", 2036 state: "",
2037 gender: "", 2037 gender: "",
2038 select: "", 2038 select: "",
2039 selectSection: "", 2039 selectSection: "",
2040 bloodGroup: "", 2040 bloodGroup: "",
2041 allergies: "", 2041 allergies: "",
2042 medicalNotes: "", 2042 medicalNotes: "",
2043 height: "", 2043 height: "",
2044 weight: "", 2044 weight: "",
2045 rollNo: "", 2045 rollNo: "",
2046 establishmentYear: new Date().getFullYear() 2046 establishmentYear: new Date().getFullYear()
2047 }, 2047 },
2048 defaultItem: { 2048 defaultItem: {
2049 role: "STUDENT", 2049 role: "STUDENT",
2050 name: "", 2050 name: "",
2051 email: "" 2051 email: ""
2052 } 2052 }
2053 }), 2053 }),
2054 watch: { 2054 watch: {
2055 menu(val) { 2055 menu(val) {
2056 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2056 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2057 }, 2057 },
2058 menu1(val) { 2058 menu1(val) {
2059 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2059 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2060 } 2060 }
2061 }, 2061 },
2062 methods: { 2062 methods: {
2063 findStudents() { 2063 findStudents() {
2064 this.showLoader = true; 2064 this.showLoader = true;
2065 http() 2065 http()
2066 .get("/getStudentWithClass", { 2066 .get("/getStudentWithClass", {
2067 params: { 2067 params: {
2068 classId: this.selectStudents.select, 2068 classId: this.selectStudents.select,
2069 sectionId: this.selectStudents.selectSection 2069 sectionId: this.selectStudents.selectSection
2070 } 2070 }
2071 }) 2071 })
2072 .then(response => { 2072 .then(response => {
2073 this.desserts = response.data.data; 2073 this.desserts = response.data.data;
2074 this.showLoader = false; 2074 this.showLoader = false;
2075 console.log("getSectionsList=====>", this.addSection); 2075 console.log("getSectionsList=====>", this.addSection);
2076 }) 2076 })
2077 .catch(err => { 2077 .catch(err => {
2078 console.log("err====>", err); 2078 console.log("err====>", err);
2079 this.showLoader = false; 2079 this.showLoader = false;
2080 }); 2080 });
2081 }, 2081 },
2082 getSections(_id) { 2082 getSections(_id) {
2083 var token = this.$store.state.token; 2083 var token = this.$store.state.token;
2084 http() 2084 http()
2085 .get( 2085 .get(
2086 "/getSectionsList", 2086 "/getSectionsList",
2087 { params: { classId: _id } }, 2087 { params: { classId: _id } },
2088 { 2088 {
2089 headers: { Authorization: "Bearer " + token } 2089 headers: { Authorization: "Bearer " + token }
2090 } 2090 }
2091 ) 2091 )
2092 .then(response => { 2092 .then(response => {
2093 this.addSection = response.data.data; 2093 this.addSection = response.data.data;
2094 console.log("getSectionsList=====>", this.addSection); 2094 console.log("getSectionsList=====>", this.addSection);
2095 }) 2095 })
2096 .catch(err => { 2096 .catch(err => {
2097 // console.log("err====>", err); 2097 // console.log("err====>", err);
2098 // this.$router.replace({ path: '/' }); 2098 // this.$router.replace({ path: '/' });
2099 }); 2099 });
2100 }, 2100 },
2101 getSection(_id) { 2101 getSection(_id) {
2102 var token = this.$store.state.token; 2102 var token = this.$store.state.token;
2103 http() 2103 http()
2104 .get( 2104 .get(
2105 "/getSectionsList", 2105 "/getSectionsList",
2106 { params: { classId: _id } }, 2106 { params: { classId: _id } },
2107 { 2107 {
2108 headers: { Authorization: "Bearer " + token } 2108 headers: { Authorization: "Bearer " + token }
2109 } 2109 }
2110 ) 2110 )
2111 .then(response => { 2111 .then(response => {
2112 this.addSection = response.data.data; 2112 this.addSection = response.data.data;
2113 console.log("getSectionsList=====>", this.addSection); 2113 console.log("getSectionsList=====>", this.addSection);
2114 }) 2114 })
2115 .catch(err => { 2115 .catch(err => {
2116 // console.log("err====>", err); 2116 // console.log("err====>", err);
2117 // this.$router.replace({ path: '/' }); 2117 // this.$router.replace({ path: '/' });
2118 }); 2118 });
2119 }, 2119 },
2120 pickFile() { 2120 pickFile() {
2121 this.$refs.image.click(); 2121 this.$refs.image.click();
2122 }, 2122 },
2123 dates: function(date) { 2123 dates: function(date) {
2124 return moment(date).format("MMMM DD, YYYY"); 2124 return moment(date).format("MMMM DD, YYYY");
2125 }, 2125 },
2126 onFilePicked(e) { 2126 onFilePicked(e) {
2127 // console.log(e) 2127 // console.log(e)
2128 const files = e.target.files; 2128 const files = e.target.files;
2129 this.imageData.upload = e.target.files[0]; 2129 this.imageData.upload = e.target.files[0];
2130 if (files[0] !== undefined) { 2130 if (files[0] !== undefined) {
2131 this.imageName = files[0].name; 2131 this.imageName = files[0].name;
2132 if (this.imageName.lastIndexOf(".") <= 0) { 2132 if (this.imageName.lastIndexOf(".") <= 0) {
2133 return; 2133 return;
2134 } 2134 }
2135 const fr = new FileReader(); 2135 const fr = new FileReader();
2136 fr.readAsDataURL(files[0]); 2136 fr.readAsDataURL(files[0]);
2137 fr.addEventListener("load", () => { 2137 fr.addEventListener("load", () => {
2138 this.imageUrl = fr.result; 2138 this.imageUrl = fr.result;
2139 this.imageFile = files[0]; // this is an image file that can be sent to server... 2139 this.imageFile = files[0]; // this is an image file that can be sent to server...
2140 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 2140 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
2141 }); 2141 });
2142 } else { 2142 } else {
2143 this.imageName = ""; 2143 this.imageName = "";
2144 this.imageFile = ""; 2144 this.imageFile = "";
2145 this.imageUrl = ""; 2145 this.imageUrl = "";
2146 } 2146 }
2147 }, 2147 },
2148 // getStudentList() { 2148 // getStudentList() {
2149 // this.showLoader = true; 2149 // this.showLoader = true;
2150 // var token = this.$store.state.token; 2150 // var token = this.$store.state.token;
2151 // http() 2151 // http()
2152 // .get("/getStudentsList", { 2152 // .get("/getStudentsList", {
2153 // headers: { Authorization: "Bearer " + token } 2153 // headers: { Authorization: "Bearer " + token }
2154 // }) 2154 // })
2155 // .then(response => { 2155 // .then(response => {
2156 // this.desserts = response.data.data; 2156 // this.desserts = response.data.data;
2157 // this.showLoader = false; 2157 // this.showLoader = false;
2158 // // console.log("getStudentList=====>",this.desserts) 2158 // // console.log("getStudentList=====>",this.desserts)
2159 // }) 2159 // })
2160 // .catch(err => { 2160 // .catch(err => {
2161 // // console.log("err====>", err); 2161 // // console.log("err====>", err);
2162 // this.showLoader = false; 2162 // this.showLoader = false;
2163 // this.$router.replace({ path: "/" }); 2163 // this.$router.replace({ path: "/" });
2164 // }); 2164 // });
2165 // }, 2165 // },
2166 editItem(item) { 2166 editItem(item) {
2167 this.editedIndex = this.desserts.indexOf(item); 2167 this.editedIndex = this.desserts.indexOf(item);
2168 this.editedItem = Object.assign({}, item); 2168 this.editedItem = Object.assign({}, item);
2169 this.editedItem.fatherName = item.parentId.fatherName; 2169 this.editedItem.fatherName = item.parentId.fatherName;
2170 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2170 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2171 this.editedItem.motherName = item.parentId.motherName; 2171 this.editedItem.motherName = item.parentId.motherName;
2172 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2172 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2173 // if(this.editedItem.dob != undefined){ 2173 // if(this.editedItem.dob != undefined){
2174 // this.editedItem.dob = this.editedItem.dob.substring(0, 10) 2174 // this.editedItem.dob = this.editedItem.dob.substring(0, 10)
2175 // }else if(this.editedItem.dob = undefined){ 2175 // }else if(this.editedItem.dob = undefined){
2176 // this.editedItem.dob = '' 2176 // this.editedItem.dob = ''
2177 // } 2177 // }
2178 this.editedItem.dob = 2178 this.editedItem.dob =
2179 this.editedItem.dob != undefined 2179 this.editedItem.dob != undefined
2180 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 2180 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
2181 : (this.editedItem.dob = ""); 2181 : (this.editedItem.dob = "");
2182 this.dialog = true; 2182 this.dialog = true;
2183 }, 2183 },
2184 profile(item) { 2184 profile(item) {
2185 console.log("item", item); 2185 console.log("item", item);
2186 this.editedIndex = this.desserts.indexOf(item); 2186 this.editedIndex = this.desserts.indexOf(item);
2187 this.editedItem = Object.assign({}, item); 2187 this.editedItem = Object.assign({}, item);
2188 this.editedItem.fatherName = item.parentId.fatherName; 2188 this.editedItem.fatherName = item.parentId.fatherName;
2189 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2189 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2190 this.editedItem.motherName = item.parentId.motherName; 2190 this.editedItem.motherName = item.parentId.motherName;
2191 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2191 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2192 2192
2193 this.dialog1 = true; 2193 this.dialog1 = true;
2194 }, 2194 },
2195 deleteItem(item) { 2195 deleteItem(item) {
2196 let deleteStudent = { 2196 let deleteStudent = {
2197 studentId: item._id 2197 studentId: item._id
2198 }; 2198 };
2199 http() 2199 http()
2200 .delete( 2200 .delete(
2201 "/deleteStudent", 2201 "/deleteStudent",
2202 confirm("Are you sure you want to delete this?") && { 2202 confirm("Are you sure you want to delete this?") && {
2203 params: deleteStudent 2203 params: deleteStudent
2204 } 2204 }
2205 ) 2205 )
2206 .then(response => { 2206 .then(response => {
2207 // console.log("deleteUers",deleteStudent) 2207 // console.log("deleteUers",deleteStudent)
2208 if ((this.snackbar = true)) { 2208 if ((this.snackbar = true)) {
2209 this.text = "Successfully delete Existing Student"; 2209 this.text = "Successfully delete Existing Student";
2210 } 2210 }
2211 this.getStudentList(); 2211 this.getStudentList();
2212 }) 2212 })
2213 .catch(error => { 2213 .catch(error => {
2214 // console.log(error); 2214 // console.log(error);
2215 }); 2215 });
2216 }, 2216 },
2217 activeTab(type) { 2217 activeTab(type) {
2218 switch (type) { 2218 switch (type) {
2219 case "existing": 2219 case "existing":
2220 this.newActive = false; 2220 this.newActive = false;
2221 this.isActive = true; 2221 this.isActive = true;
2222 break; 2222 break;
2223 2223
2224 default: 2224 default:
2225 this.newActive = true; 2225 this.newActive = true;
2226 this.isActive = false; 2226 this.isActive = false;
2227 break; 2227 break;
2228 } 2228 }
2229 }, 2229 },
2230 close() { 2230 close() {
2231 this.dialog = false; 2231 this.dialog = false;
2232 setTimeout(() => { 2232 setTimeout(() => {
2233 this.editedItem = Object.assign({}, this.defaultItem); 2233 this.editedItem = Object.assign({}, this.defaultItem);
2234 this.editedIndex = -1; 2234 this.editedIndex = -1;
2235 }, 300); 2235 }, 300);
2236 }, 2236 },
2237 close1() { 2237 close1() {
2238 this.dialog1 = false; 2238 this.dialog1 = false;
2239 }, 2239 },
2240 submit() { 2240 submit() {
2241 if (this.$refs.form.validate()) { 2241 if (this.$refs.form.validate()) {
2242 let addStudent = { 2242 let addStudent = {
2243 parentId: this.parentId, 2243 parentId: this.parentId,
2244 name: this.addStudents.name, 2244 name: this.addStudents.name,
2245 email: this.addStudents.email, 2245 email: this.addStudents.email,
2246 role: this.addStudents.role, 2246 role: this.addStudents.role,
2247 dob: this.addStudents.date, 2247 dob: this.addStudents.date,
2248 city: this.addStudents.city, 2248 city: this.addStudents.city,
2249 pincode: this.addStudents.pincode, 2249 pincode: this.addStudents.pincode,
2250 country: this.addStudents.country, 2250 country: this.addStudents.country,
2251 permanentAddress: this.addStudents.permanentAddress, 2251 permanentAddress: this.addStudents.permanentAddress,
2252 presentAddress: this.addStudents.presentAddress, 2252 presentAddress: this.addStudents.presentAddress,
2253 mobile: this.addStudents.mobile, 2253 mobile: this.addStudents.mobile,
2254 state: this.addStudents.state, 2254 state: this.addStudents.state,
2255 gender: this.addStudents.gender, 2255 gender: this.addStudents.gender,
2256 establishmentYear: this.addStudents.establishmentYear, 2256 establishmentYear: this.addStudents.establishmentYear,
2257 classId: this.addStudents.select, 2257 classId: this.addStudents.select,
2258 sectionId: this.addStudents.selectSection, 2258 sectionId: this.addStudents.selectSection,
2259 bloodGroup: this.addStudents.bloodGroup, 2259 bloodGroup: this.addStudents.bloodGroup,
2260 allergies: this.addStudents.allergies, 2260 allergies: this.addStudents.allergies,
2261 medicalNotes: this.addStudents.medicalNotes, 2261 medicalNotes: this.addStudents.medicalNotes,
2262 height: this.addStudents.height, 2262 height: this.addStudents.height,
2263 weight: this.addStudents.weight, 2263 weight: this.addStudents.weight,
2264 rollNo: this.addStudents.rollNo 2264 rollNo: this.addStudents.rollNo
2265 }; 2265 };
2266 if (this.imageUrl) { 2266 if (this.imageUrl) {
2267 var str = this.imageUrl; 2267 var str = this.imageUrl;
2268 const [baseUrl, imageUrl] = str.split(/,/); 2268 const [baseUrl, imageUrl] = str.split(/,/);
2269 addStudent.upload = imageUrl; 2269 addStudent.upload = imageUrl;
2270 } 2270 }
2271 this.loading = true; 2271 this.loading = true;
2272 http() 2272 http()
2273 .post("/createStudent", addStudent) 2273 .post("/createStudent", addStudent)
2274 .then(response => { 2274 .then(response => {
2275 console.log(addStudent); 2275 console.log(addStudent);
2276 if ((this.snackbar = true)) { 2276 if ((this.snackbar = true)) {
2277 this.text = "New Student added successfully"; 2277 this.text = "New Student added successfully";
2278 } 2278 }
2279 // this.getStudentList(); 2279 // this.getStudentList();
2280 this.clear(); 2280 this.clear();
2281 this.loading = false; 2281 this.loading = false;
2282 }) 2282 })
2283 .catch(error => { 2283 .catch(error => {
2284 // console.log(error); 2284 // console.log(error);
2285 if ((this.snackbar = true)) { 2285 if ((this.snackbar = true)) {
2286 this.text = error.response.data.message; 2286 this.text = error.response.data.message;
2287 } 2287 }
2288 this.loading = false; 2288 this.loading = false;
2289 }); 2289 });
2290 } 2290 }
2291 }, 2291 },
2292 clear() { 2292 clear() {
2293 this.$refs.form.reset(); 2293 this.$refs.form.reset();
2294 this.imageUrl = ""; 2294 this.imageUrl = "";
2295 }, 2295 },
2296 save() { 2296 save() {
2297 let editStudent = { 2297 let editStudent = {
2298 studentId: this.editedItem._id, 2298 studentId: this.editedItem._id,
2299 name: this.editedItem.name, 2299 name: this.editedItem.name,
2300 email: this.editedItem.email, 2300 email: this.editedItem.email,
2301 role: this.editedItem.role, 2301 role: this.editedItem.role,
2302 dob: this.editedItem.dob, 2302 dob: this.editedItem.dob,
2303 city: this.editedItem.city, 2303 city: this.editedItem.city,
2304 pincode: this.editedItem.pincode, 2304 pincode: this.editedItem.pincode,
2305 country: this.editedItem.country, 2305 country: this.editedItem.country,
2306 permanentAddress: this.editedItem.permanentAddress, 2306 permanentAddress: this.editedItem.permanentAddress,
2307 presentAddress: this.editedItem.presentAddress, 2307 presentAddress: this.editedItem.presentAddress,
2308 mobile: this.editedItem.mobile, 2308 mobile: this.editedItem.mobile,
2309 state: this.editedItem.state, 2309 state: this.editedItem.state,
2310 gender: this.editedItem.gender, 2310 gender: this.editedItem.gender,
2311 establishmentYear: this.editedItem.establishmentYear, 2311 establishmentYear: this.editedItem.establishmentYear,
2312 classId: this.editedItem.select, 2312 classId: this.editedItem.select,
2313 sectionId: this.editedItem.selectSection, 2313 sectionId: this.editedItem.selectSection,
2314 bloodGroup: this.editedItem.bloodGroup, 2314 bloodGroup: this.editedItem.bloodGroup,
2315 allergies: this.editedItem.allergies, 2315 allergies: this.editedItem.allergies,
2316 medicalNotes: this.editedItem.medicalNotes, 2316 medicalNotes: this.editedItem.medicalNotes,
2317 height: this.editedItem.height, 2317 height: this.editedItem.height,
2318 weight: this.editedItem.weight, 2318 weight: this.editedItem.weight,
2319 rollNo: this.editedItem.rollNo 2319 rollNo: this.editedItem.rollNo
2320 }; 2320 };
2321 if (this.imageUrl) { 2321 if (this.imageUrl) {
2322 var str = this.imageUrl; 2322 var str = this.imageUrl;
2323 const [baseUrl, imageUrl] = str.split(/,/); 2323 const [baseUrl, imageUrl] = str.split(/,/);
2324 editStudent.upload = imageUrl; 2324 editStudent.upload = imageUrl;
2325 } 2325 }
2326 http() 2326 http()
2327 .put("/updateStudent", editStudent) 2327 .put("/updateStudent", editStudent)
2328 .then(response => { 2328 .then(response => {
2329 this.snackbar = true; 2329 this.snackbar = true;
2330 this.text = "Successfully Student Existing User"; 2330 this.text = "Successfully Student Existing User";
2331 this.imageUrl = ""; 2331 this.imageUrl = "";
2332 this.findStudents(); 2332 this.findStudents();
2333 this.close(); 2333 this.close();
2334 }) 2334 })
2335 .catch(error => { 2335 .catch(error => {
2336 // console.log(error); 2336 // console.log(error);
2337 if ((this.snackbar = true)) { 2337 if ((this.snackbar = true)) {
2338 this.text = error.response.data.statusText; 2338 this.text = error.response.data.statusText;
2339 } 2339 }
2340 }); 2340 });
2341 }, 2341 },
2342 submitParentDetails() { 2342 submitParentDetails() {
2343 if (this.$refs.parentForm.validate()) { 2343 if (this.$refs.parentForm.validate()) {
2344 let addparentDetails = { 2344 let addparentDetails = {
2345 email: this.parentData.email, 2345 email: this.parentData.email,
2346 fatherName: this.parentData.fatherName, 2346 fatherName: this.parentData.fatherName,
2347 fatherCellNo: this.parentData.fatherCellNo, 2347 fatherCellNo: this.parentData.fatherCellNo,
2348 motherName: this.parentData.motherName, 2348 motherName: this.parentData.motherName,
2349 motherCellNo: this.parentData.motherCellNo, 2349 motherCellNo: this.parentData.motherCellNo,
2350 role: "PARENT" 2350 role: "PARENT"
2351 }; 2351 };
2352 this.loading = true; 2352 this.loading = true;
2353 http() 2353 http()
2354 .post("/createParent", addparentDetails) 2354 .post("/createParent", addparentDetails)
2355 .then(response => { 2355 .then(response => {
2356 this.parentId = response.data.data.id; 2356 this.parentId = response.data.data.id;
2357 this.e2 = 2; 2357 this.e2 = 2;
2358 if ((this.snackbar = true)) { 2358 if ((this.snackbar = true)) {
2359 this.text = "successfully"; 2359 this.text = "successfully";
2360 } 2360 }
2361 // this.getStudentList(); 2361 // this.getStudentList();
2362 this.clear(); 2362 this.clear();
2363 this.loading = false; 2363 this.loading = false;
2364 }) 2364 })
2365 .catch(error => { 2365 .catch(error => {
2366 console.log(error.response.data); 2366 console.log(error.response.data);
2367 if ((this.snackbar = true)) { 2367 if ((this.snackbar = true)) {
2368 this.text = error.response.data.message; 2368 this.text = error.response.data.message;
2369 this.text = error.response.data.statusText; 2369 this.text = error.response.data.statusText;
2370 } 2370 }
2371 this.loading = false; 2371 this.loading = false;
2372 }); 2372 });
2373 } 2373 }
2374 }, 2374 },
2375 getParentDetails() { 2375 getParentDetails() {
2376 if (this.parentData.email) { 2376 if (this.parentData.email) {
2377 http() 2377 http()
2378 .get("getParticularParent", { 2378 .get("getParticularParent", {
2379 params: { email: this.parentData.email }, 2379 params: { email: this.parentData.email },
2380 headers: { 2380 headers: {
2381 Authorization: "Bearer " + this.$store.state.token 2381 Authorization: "Bearer " + this.$store.state.token
2382 } 2382 }
2383 }) 2383 })
2384 .then(response => { 2384 .then(response => {
2385 this.showNext = true; 2385 this.showNext = true;
2386 this.showParent = false; 2386 this.showParent = false;
2387 this.parentData = response.data.data; 2387 this.parentData = response.data.data;
2388 this.parentId = response.data.data._id; 2388 this.parentId = response.data.data._id;
2389 }) 2389 })
2390 .catch(error => { 2390 .catch(error => {
2391 console.log("err====>", error.response.data.message); 2391 console.log("err====>", error.response.data.message);
2392 }); 2392 });
2393 } 2393 }
2394 } 2394 }
2395 }, 2395 },
2396 mounted() { 2396 mounted() {
2397 // this.getStudentList(); 2397 // this.getStudentList();
2398 var token = this.$store.state.token; 2398 var token = this.$store.state.token;
2399 http() 2399 http()
2400 .get("/getClassesList", { 2400 .get("/getClassesList", {
2401 headers: { Authorization: "Bearer " + token } 2401 headers: { Authorization: "Bearer " + token }
2402 }) 2402 })
2403 .then(response => { 2403 .then(response => {
2404 this.addclass = response.data.data; 2404 this.addclass = response.data.data;
2405 }) 2405 })
2406 .catch(err => { 2406 .catch(err => {
2407 // console.log("err====>", err); 2407 // console.log("err====>", err);
2408 this.$router.replace({ path: "/" }); 2408 this.$router.replace({ path: "/" });
2409 }); 2409 });
2410 }, 2410 },
2411 created() { 2411 created() {
2412 this.$root.$on("app:search", search => { 2412 this.$root.$on("app:search", search => {
2413 this.search = search; 2413 this.search = search;
2414 }); 2414 });
2415 }, 2415 },
2416 beforeDestroy() { 2416 beforeDestroy() {
2417 // dont forget to remove the listener 2417 // dont forget to remove the listener
2418 this.$root.$off("app:search"); 2418 this.$root.$off("app:search");
2419 } 2419 }
2420 }; 2420 };
2421 </script> 2421 </script>
2422 <style scoped> 2422 <style scoped>
2423 .active { 2423 .active {
2424 background-color: gray; 2424 background-color: gray;
2425 color: white !important; 2425 color: white !important;
2426 } 2426 }
2427 .activebtn { 2427 .activebtn {
2428 color: black !important; 2428 color: black !important;
src/pages/Teachers/teachers.vue
Diff comments   View file @0065443
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Teachers</v-tab> 10 >Existing Teachers</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Teachers</v-tab> 18 >Add New Teachers</v-tab>
19 <!-- ****** EDIT TEACHERS DETAILS ****** --> 19 <!-- ****** EDIT TEACHERS DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="1100px" scrollable> 29 <v-dialog v-model="dialog" max-width="1100px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 800px;"> 36 <v-card-text style="height: 800px;">
37 <v-layout> 37 <v-layout>
38 <v-flex 38 <v-flex
39 xs12 39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
41 > 41 >
42 <v-avatar size="160px"> 42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
44 <img 44 <img
45 :src="editedItem.profilePicUrl" 45 :src="editedItem.profilePicUrl"
46 v-else-if="editedItem.profilePicUrl && !imageUrl" 46 v-else-if="editedItem.profilePicUrl && !imageUrl"
47 /> 47 />
48 <img 48 <img
49 v-if="imageUrl" 49 v-if="imageUrl"
50 :src="imageUrl" 50 :src="imageUrl"
51 height="150" 51 height="150"
52 style="border-radius:50%; width:200px" 52 style="border-radius:50%; width:200px"
53 /> 53 />
54 </v-avatar> 54 </v-avatar>
55 <input 55 <input
56 type="file" 56 type="file"
57 style="display:none" 57 style="display:none"
58 ref="image" 58 ref="image"
59 accept="image/*" 59 accept="image/*"
60 @change="onFilePicked" 60 @change="onFilePicked"
61 /> 61 />
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout wrap> 64 <v-layout wrap>
65 <v-flex xs12 sm6> 65 <v-flex xs12 sm6>
66 <v-layout> 66 <v-layout>
67 <v-flex xs4 sm4 class="pt-4 subheading"> 67 <v-flex xs4 sm4 class="pt-4 subheading">
68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs8 sm6 class="ml-3"> 71 <v-flex xs8 sm6 class="ml-3">
72 <v-text-field 72 <v-text-field
73 v-model="editedItem.name" 73 v-model="editedItem.name"
74 placeholder="fill your full Name" 74 placeholder="fill your full Name"
75 type="text" 75 type="text"
76 required 76 required
77 ></v-text-field> 77 ></v-text-field>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm6> 81 <v-flex xs12 sm6>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 sm4 class="pt-4 subheading"> 83 <v-flex xs4 sm4 class="pt-4 subheading">
84 <label class="right">Email ID:</label> 84 <label class="right">Email ID:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs8 sm6 class="ml-3"> 86 <v-flex xs8 sm6 class="ml-3">
87 <v-text-field 87 <v-text-field
88 placeholder="fill your email" 88 placeholder="fill your email"
89 v-model="editedItem.email" 89 v-model="editedItem.email"
90 type="text" 90 type="text"
91 required 91 required
92 ></v-text-field> 92 ></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout wrap> 97 <v-layout wrap>
98 <v-flex xs12 sm6> 98 <v-flex xs12 sm6>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 sm4 class="pt-4 subheading"> 100 <v-flex xs4 sm4 class="pt-4 subheading">
101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
103 </v-flex> 103 </v-flex>
104 <v-flex xs8 sm6 class="ml-3"> 104 <v-flex xs8 sm6 class="ml-3">
105 <v-menu 105 <v-menu
106 ref="menu" 106 ref="menu"
107 :close-on-content-click="false" 107 :close-on-content-click="false"
108 v-model="menu2" 108 v-model="menu2"
109 :nudge-right="40" 109 :nudge-right="40"
110 lazy 110 lazy
111 transition="scale-transition" 111 transition="scale-transition"
112 offset-y 112 offset-y
113 full-width 113 full-width
114 min-width="290px" 114 min-width="290px"
115 > 115 >
116 <v-text-field 116 <v-text-field
117 slot="activator" 117 slot="activator"
118 v-model="editedItem.dob" 118 v-model="editedItem.dob"
119 placeholder="Select date" 119 placeholder="Select date"
120 ></v-text-field> 120 ></v-text-field>
121 <v-date-picker 121 <v-date-picker
122 ref="picker" 122 ref="picker"
123 v-model="editedItem.dob" 123 v-model="editedItem.dob"
124 :max="new Date().toISOString().substr(0, 10)" 124 :max="new Date().toISOString().substr(0, 10)"
125 min="1950-01-01" 125 min="1950-01-01"
126 @input="menu2 = false" 126 @input="menu2 = false"
127 ></v-date-picker> 127 ></v-date-picker>
128 </v-menu> 128 </v-menu>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 </v-flex> 131 </v-flex>
132 <v-flex xs12 sm6> 132 <v-flex xs12 sm6>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">City:</label> 135 <label class="right">City:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 sm6 class="ml-3"> 137 <v-flex xs8 sm6 class="ml-3">
138 <v-text-field 138 <v-text-field
139 v-model="editedItem.city" 139 v-model="editedItem.city"
140 placeholder="fill your City Name" 140 placeholder="fill your City Name"
141 type="text" 141 type="text"
142 required 142 required
143 ></v-text-field> 143 ></v-text-field>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout wrap> 148 <v-layout wrap>
149 <v-flex xs12 sm6> 149 <v-flex xs12 sm6>
150 <v-layout> 150 <v-layout>
151 <v-flex xs4 class="pt-4 subheading"> 151 <v-flex xs4 class="pt-4 subheading">
152 <label class="right">State:</label> 152 <label class="right">State:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 sm6 class="ml-3"> 154 <v-flex xs8 sm6 class="ml-3">
155 <v-text-field 155 <v-text-field
156 v-model="editedItem.state" 156 v-model="editedItem.state"
157 placeholder="fill your State Name" 157 placeholder="fill your State Name"
158 type="text" 158 type="text"
159 required 159 required
160 ></v-text-field> 160 ></v-text-field>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm6> 164 <v-flex xs12 sm6>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">PinCode:</label> 167 <label class="right">PinCode:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 sm6 class="ml-3"> 169 <v-flex xs8 sm6 class="ml-3">
170 <v-text-field 170 <v-text-field
171 v-model="editedItem.pincode" 171 v-model="editedItem.pincode"
172 placeholder="fill your pincode" 172 placeholder="fill your pincode"
173 type="number" 173 type="number"
174 required 174 required
175 ></v-text-field> 175 ></v-text-field>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout wrap> 180 <v-layout wrap>
181 <v-flex xs12 sm6> 181 <v-flex xs12 sm6>
182 <v-layout> 182 <v-layout>
183 <v-flex xs4 class="pt-4 subheading"> 183 <v-flex xs4 class="pt-4 subheading">
184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 sm6 class="ml-3"> 187 <v-flex xs8 sm6 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.mobileNo" 189 v-model="editedItem.mobileNo"
190 placeholder="fill your MobileNo" 190 placeholder="fill your MobileNo"
191 type="number" 191 type="number"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 <v-flex xs12 sm6> 197 <v-flex xs12 sm6>
198 <v-layout> 198 <v-layout>
199 <v-flex xs4 class="pt-4 subheading"> 199 <v-flex xs4 class="pt-4 subheading">
200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs8 sm6 class="ml-3"> 203 <v-flex xs8 sm6 class="ml-3">
204 <v-autocomplete 204 <v-autocomplete
205 v-model="editedItem.country" 205 v-model="editedItem.country"
206 :items="countries" 206 :items="countries"
207 placeholder="Select Country Name" 207 placeholder="Select Country Name"
208 required 208 required
209 ></v-autocomplete> 209 ></v-autocomplete>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout wrap> 214 <v-layout wrap>
215 <v-flex xs12 sm6> 215 <v-flex xs12 sm6>
216 <v-layout> 216 <v-layout>
217 <v-flex xs4 class="pt-4 subheading"> 217 <v-flex xs4 class="pt-4 subheading">
218 <label class="right">Join Date:</label> 218 <label class="right">Join Date:</label>
219 </v-flex> 219 </v-flex>
220 <v-flex xs8 sm6 class="ml-3"> 220 <v-flex xs8 sm6 class="ml-3">
221 <v-menu 221 <v-menu
222 ref="menu" 222 ref="menu"
223 :close-on-content-click="false" 223 :close-on-content-click="false"
224 v-model="menu3" 224 v-model="menu3"
225 :nudge-right="40" 225 :nudge-right="40"
226 lazy 226 lazy
227 transition="scale-transition" 227 transition="scale-transition"
228 offset-y 228 offset-y
229 full-width 229 full-width
230 min-width="290px" 230 min-width="290px"
231 > 231 >
232 <v-text-field 232 <v-text-field
233 slot="activator" 233 slot="activator"
234 v-model="editedItem.joinDate" 234 v-model="editedItem.joinDate"
235 placeholder="Select date" 235 placeholder="Select date"
236 ></v-text-field> 236 ></v-text-field>
237 <v-date-picker 237 <v-date-picker
238 ref="picker" 238 ref="picker"
239 v-model="editedItem.joinDate" 239 v-model="editedItem.joinDate"
240 :max="new Date().toISOString().substr(0, 10)" 240 :max="new Date().toISOString().substr(0, 10)"
241 min="1950-01-01" 241 min="1950-01-01"
242 @input="menu3 = false" 242 @input="menu3 = false"
243 ></v-date-picker> 243 ></v-date-picker>
244 </v-menu> 244 </v-menu>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 <v-flex xs12 sm6> 248 <v-flex xs12 sm6>
249 <v-layout> 249 <v-layout>
250 <v-flex xs4 class="pt-4 subheading"> 250 <v-flex xs4 class="pt-4 subheading">
251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 sm6 class="ml-3"> 254 <v-flex xs8 sm6 class="ml-3">
255 <v-text-field 255 <v-text-field
256 label="Select Image" 256 label="Select Image"
257 @click="pickFile" 257 @click="pickFile"
258 v-model="imageName" 258 v-model="imageName"
259 append-icon="attach_file" 259 append-icon="attach_file"
260 ></v-text-field> 260 ></v-text-field>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 265 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
266 <v-flex xs12 sm12> 266 <v-flex xs12 sm12>
267 <v-layout> 267 <v-layout>
268 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 268 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
269 <label class="right pr-2">Present Address:</label> 269 <label class="right pr-2">Present Address:</label>
270 </v-flex> 270 </v-flex>
271 <v-flex xs8 sm10> 271 <v-flex xs8 sm10>
272 <v-text-field 272 <v-text-field
273 name="input-4-3" 273 name="input-4-3"
274 v-model="editedItem.presentAddress" 274 v-model="editedItem.presentAddress"
275 placeholder="fill Your present Address" 275 placeholder="fill Your present Address"
276 required 276 required
277 ></v-text-field> 277 ></v-text-field>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm12> 281 <v-flex xs12 sm12>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
284 <label class="pr-2">Permanent Address:</label> 284 <label class="pr-2">Permanent Address:</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs12 sm10> 286 <v-flex xs12 sm10>
287 <v-text-field 287 <v-text-field
288 name="input-4-3" 288 name="input-4-3"
289 v-model="editedItem.permanentAddress" 289 v-model="editedItem.permanentAddress"
290 placeholder="fill Your Permanent Address" 290 placeholder="fill Your Permanent Address"
291 required 291 required
292 ></v-text-field> 292 ></v-text-field>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
298 <v-flex xs12 sm12> 298 <v-flex xs12 sm12>
299 <v-layout> 299 <v-layout>
300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
301 <label class>Present Address:</label> 301 <label class>Present Address:</label>
302 </v-flex> 302 </v-flex>
303 </v-layout> 303 </v-layout>
304 <v-layout> 304 <v-layout>
305 <v-flex xs12 sm12> 305 <v-flex xs12 sm12>
306 <v-textarea 306 <v-textarea
307 name="input-4-3" 307 name="input-4-3"
308 v-model="editedItem.presentAddress" 308 v-model="editedItem.presentAddress"
309 placeholder="fill Your present Address" 309 placeholder="fill Your present Address"
310 required 310 required
311 ></v-textarea> 311 ></v-textarea>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 <v-flex xs12 sm12> 315 <v-flex xs12 sm12>
316 <v-layout> 316 <v-layout>
317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
318 <label>Permanent Address:</label> 318 <label>Permanent Address:</label>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 <v-layout> 321 <v-layout>
322 <v-flex xs12 sm12> 322 <v-flex xs12 sm12>
323 <v-textarea 323 <v-textarea
324 name="input-4-3" 324 name="input-4-3"
325 v-model="editedItem.permanentAddress" 325 v-model="editedItem.permanentAddress"
326 placeholder="fill Your Permanent Address" 326 placeholder="fill Your Permanent Address"
327 required 327 required
328 ></v-textarea> 328 ></v-textarea>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <v-layout> 333 <v-layout>
334 <v-flex xs12 sm12> 334 <v-flex xs12 sm12>
335 <v-layout> 335 <v-layout>
336 <v-flex xs6> 336 <v-flex xs6>
337 <v-btn round dark @click.native="close">Cancel</v-btn> 337 <v-btn round dark @click.native="close">Cancel</v-btn>
338 </v-flex> 338 </v-flex>
339 <v-flex xs6> 339 <v-flex xs6>
340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 </v-layout> 344 </v-layout>
345 </v-card-text> 345 </v-card-text>
346 </v-card> 346 </v-card>
347 </v-dialog> 347 </v-dialog>
348 348
349 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 349 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
350 350
351 <v-dialog v-model="dialog1" max-width="600px" scrollable> 351 <v-dialog v-model="dialog1" max-width="600px" scrollable>
352 <v-card> 352 <v-card>
353 <v-toolbar color="grey lighten-2" flat> 353 <v-toolbar color="grey lighten-2" flat>
354 <v-spacer></v-spacer> 354 <v-spacer></v-spacer>
355 <v-toolbar-title> 355 <v-toolbar-title>
356 <h3>Teacher Profile</h3> 356 <h3>Teacher Profile</h3>
357 </v-toolbar-title> 357 </v-toolbar-title>
358 <v-spacer></v-spacer> 358 <v-spacer></v-spacer>
359 <v-icon @click="close1">close</v-icon> 359 <v-icon @click="close1">close</v-icon>
360 </v-toolbar> 360 </v-toolbar>
361 <v-card-text style="height: 700px;"> 361 <v-card-text style="height: 700px;">
362 <v-container grid-list-md> 362 <v-container grid-list-md>
363 <v-layout wrap> 363 <v-layout wrap>
364 <v-flex> 364 <v-flex>
365 <v-flex align-center justify-center layout text-xs-center> 365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="160px"> 366 <v-avatar size="160px">
367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
369 </v-avatar> 369 </v-avatar>
370 </v-flex> 370 </v-flex>
371 <v-layout> 371 <v-layout>
372 <v-flex xs5 sm6> 372 <v-flex xs5 sm6>
373 <h5 class="right my-1"> 373 <h5 class="right my-1">
374 <b>Full Name:</b> 374 <b>Full Name:</b>
375 </h5> 375 </h5>
376 </v-flex> 376 </v-flex>
377 <v-flex sm6 xs8> 377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.name }}</h5> 378 <h5 class="my-1">{{ editedItem.name }}</h5>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs5 sm6> 382 <v-flex xs5 sm6>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>Email:</b> 384 <b>Email:</b>
385 </h5> 385 </h5>
386 </v-flex> 386 </v-flex>
387 <v-flex sm6 xs8> 387 <v-flex sm6 xs8>
388 <h5 class="my-1">{{ editedItem.email }}</h5> 388 <h5 class="my-1">{{ editedItem.email }}</h5>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-layout> 391 <v-layout>
392 <v-flex xs5 sm6> 392 <v-flex xs5 sm6>
393 <h5 class="right my-1"> 393 <h5 class="right my-1">
394 <b>City:</b> 394 <b>City:</b>
395 </h5> 395 </h5>
396 </v-flex> 396 </v-flex>
397 <v-flex sm6 xs8> 397 <v-flex sm6 xs8>
398 <h5 class="my-1">{{ editedItem.city }}</h5> 398 <h5 class="my-1">{{ editedItem.city }}</h5>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs5 sm6> 402 <v-flex xs5 sm6>
403 <h5 class="right my-1"> 403 <h5 class="right my-1">
404 <b>State:</b> 404 <b>State:</b>
405 </h5> 405 </h5>
406 </v-flex> 406 </v-flex>
407 <v-flex sm6 xs8> 407 <v-flex sm6 xs8>
408 <h5 class="my-1">{{ editedItem.state }}</h5> 408 <h5 class="my-1">{{ editedItem.state }}</h5>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-layout> 411 <v-layout>
412 <v-flex xs5 sm6> 412 <v-flex xs5 sm6>
413 <h5 class="right my-1"> 413 <h5 class="right my-1">
414 <b>Country:</b> 414 <b>Country:</b>
415 </h5> 415 </h5>
416 </v-flex> 416 </v-flex>
417 <v-flex sm6 xs8> 417 <v-flex sm6 xs8>
418 <h5 class="my-1">{{ editedItem.country }}</h5> 418 <h5 class="my-1">{{ editedItem.country }}</h5>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 <v-layout> 421 <v-layout>
422 <v-flex xs5 sm6> 422 <v-flex xs5 sm6>
423 <h5 class="right my-1"> 423 <h5 class="right my-1">
424 <b>Pincode:</b> 424 <b>Pincode:</b>
425 </h5> 425 </h5>
426 </v-flex> 426 </v-flex>
427 <v-flex sm6 xs8> 427 <v-flex sm6 xs8>
428 <h5 class="my-1">{{ editedItem.pincode }}</h5> 428 <h5 class="my-1">{{ editedItem.pincode }}</h5>
429 </v-flex> 429 </v-flex>
430 </v-layout> 430 </v-layout>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 sm6> 432 <v-flex xs5 sm6>
433 <h5 class="right my-1"> 433 <h5 class="right my-1">
434 <b>Mobile No:</b> 434 <b>Mobile No:</b>
435 </h5> 435 </h5>
436 </v-flex> 436 </v-flex>
437 <v-flex sm6 xs8> 437 <v-flex sm6 xs8>
438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 <v-layout> 441 <v-layout>
442 <v-flex xs5 sm6> 442 <v-flex xs5 sm6>
443 <h5 class="right my-1"> 443 <h5 class="right my-1">
444 <b>Join Date:</b> 444 <b>Join Date:</b>
445 </h5> 445 </h5>
446 </v-flex> 446 </v-flex>
447 <v-flex sm6 xs8> 447 <v-flex sm6 xs8>
448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
449 </v-flex> 449 </v-flex>
450 </v-layout> 450 </v-layout>
451 <v-layout> 451 <v-layout>
452 <v-flex xs5 sm6> 452 <v-flex xs5 sm6>
453 <h5 class="right my-1"> 453 <h5 class="right my-1">
454 <b>D.O.B :</b> 454 <b>D.O.B :</b>
455 </h5> 455 </h5>
456 </v-flex> 456 </v-flex>
457 <v-flex sm6 xs8> 457 <v-flex sm6 xs8>
458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
459 </v-flex> 459 </v-flex>
460 </v-layout> 460 </v-layout>
461 <v-layout> 461 <v-layout>
462 <v-flex xs6 sm6> 462 <v-flex xs6 sm6>
463 <h5 class="right my-1"> 463 <h5 class="right my-1">
464 <b>Permanent Address:</b> 464 <b>Permanent Address:</b>
465 </h5> 465 </h5>
466 </v-flex> 466 </v-flex>
467 <v-flex sm6 xs8> 467 <v-flex sm6 xs8>
468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
469 </v-flex> 469 </v-flex>
470 </v-layout> 470 </v-layout>
471 <v-layout> 471 <v-layout>
472 <v-flex xs6 sm6> 472 <v-flex xs6 sm6>
473 <h5 class="right my-1"> 473 <h5 class="right my-1">
474 <b>present Address:</b> 474 <b>present Address:</b>
475 </h5> 475 </h5>
476 </v-flex> 476 </v-flex>
477 <v-flex sm6 xs8> 477 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
479 </v-flex> 479 </v-flex>
480 </v-layout> 480 </v-layout>
481 </v-flex> 481 </v-flex>
482 </v-layout> 482 </v-layout>
483 </v-container> 483 </v-container>
484 </v-card-text> 484 </v-card-text>
485 </v-card> 485 </v-card>
486 </v-dialog> 486 </v-dialog>
487 <v-snackbar 487 <v-snackbar
488 :timeout="timeout" 488 :timeout="timeout"
489 :top="y === 'top'" 489 :top="y === 'top'"
490 :right="x === 'right'" 490 :right="x === 'right'"
491 :vertical="mode === 'vertical'" 491 :vertical="mode === 'vertical'"
492 v-model="snackbar" 492 v-model="snackbar"
493 color="success" 493 color="success"
494 >{{ text }}</v-snackbar> 494 >{{ text }}</v-snackbar>
495 495
496 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 496 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
497 497
498 <v-data-table 498 <v-data-table
499 :headers="headers" 499 :headers="headers"
500 :items="desserts" 500 :items="desserts"
501 :pagination.sync="pagination" 501 :pagination.sync="pagination"
502 :search="search" 502 :search="search"
503 > 503 >
504 <template slot="items" slot-scope="props"> 504 <template slot="items" slot-scope="props">
505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
506 <td id="td" class="text-xs-center"> 506 <td id="td" class="text-xs-center">
507 <v-avatar> 507 <v-avatar>
508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
510 </v-avatar> 510 </v-avatar>
511 </td> 511 </td>
512 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 512 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
513 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 513 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
514 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 514 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
515 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td> 515 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
516 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 516 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
517 <td class="text-xs-center"> 517 <td class="text-xs-center">
518 <span> 518 <span>
519 <img 519 <img
520 style="cursor:pointer; width:25px; height:18px; " 520 style="cursor:pointer; width:25px; height:18px; "
521 class="mr-5" 521 class="mr-5"
522 @click="profile(props.item)" 522 @click="profile(props.item)"
523 src="/static/icon/eye1.png" 523 src="/static/icon/eye1.png"
524 /> 524 />
525 <img 525 <img
526 style="cursor:pointer; width:20px; height:18px; " 526 style="cursor:pointer; width:20px; height:18px; "
527 class="mr-5" 527 class="mr-5"
528 @click="editItem(props.item)" 528 @click="editItem(props.item)"
529 src="/static/icon/edit1.png" 529 src="/static/icon/edit1.png"
530 /> 530 />
531 <img 531 <img
532 style="cursor:pointer;width:20px; height:20px; " 532 style="cursor:pointer;width:20px; height:20px; "
533 class="mr-5" 533 class="mr-5"
534 @click="deleteItem(props.item)" 534 @click="deleteItem(props.item)"
535 src="/static/icon/delete1.png" 535 src="/static/icon/delete1.png"
536 /> 536 />
537 </span> 537 </span>
538 </td> 538 </td>
539 </template> 539 </template>
540 <v-alert 540 <v-alert
541 slot="no-results" 541 slot="no-results"
542 :value="true" 542 :value="true"
543 color="error" 543 color="error"
544 icon="warning" 544 icon="warning"
545 >Your search for "{{ search }}" found no results.</v-alert> 545 >Your search for "{{ search }}" found no results.</v-alert>
546 </v-data-table> 546 </v-data-table>
547 </v-tab-item> 547 </v-tab-item>
548 548
549 <!-- ****** Add Teachers Data****** --> 549 <!-- ****** Add Teachers Data****** -->
550 <v-tab-item> 550 <v-tab-item>
551 <v-container fluid> 551 <v-container fluid>
552 <v-snackbar 552 <v-snackbar
553 :timeout="timeout" 553 :timeout="timeout"
554 :top="y === 'top'" 554 :top="y === 'top'"
555 :right="x === 'right'" 555 :right="x === 'right'"
556 :vertical="mode === 'vertical'" 556 :vertical="mode === 'vertical'"
557 v-model="snackbar" 557 v-model="snackbar"
558 color="success" 558 color="success"
559 >{{ text }}</v-snackbar> 559 >{{ text }}</v-snackbar>
560 <v-flex xs12 sm12 class="my-4"> 560 <v-flex xs12 sm12 class="my-4">
561 <v-card flat> 561 <v-card flat>
562 <v-form ref="form" v-model="valid" lazy-validation> 562 <v-form ref="form" v-model="valid" lazy-validation>
563 <v-container fluid> 563 <v-container fluid>
564 <v-layout> 564 <v-layout>
565 <v-flex 565 <v-flex
566 xs12 566 xs12
567 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 567 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
568 > 568 >
569 <v-avatar size="100px"> 569 <v-avatar size="100px">
570 <img src="/static/icon/user.png" v-if="!imageUrl" /> 570 <img src="/static/icon/user.png" v-if="!imageUrl" />
571 </v-avatar> 571 </v-avatar>
572 <img 572 <img
573 :src="imageUrl" 573 :src="imageUrl"
574 height="150" 574 height="150"
575 v-if="imageUrl" 575 v-if="imageUrl"
576 style="border-radius:50%; width:200px" 576 style="border-radius:50%; width:200px"
577 /> 577 />
578 </v-flex> 578 </v-flex>
579 </v-layout> 579 </v-layout>
580 <v-layout> 580 <v-layout>
581 <v-flex xs12 sm6> 581 <v-flex xs12 sm6>
582 <v-layout> 582 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 583 <v-flex xs4 class="pt-4 subheading">
584 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> 584 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
585 <label 585 <label
586 class="right hidden-lg-only hidden-xl-only hidden-md-only" 586 class="right hidden-lg-only hidden-xl-only hidden-md-only"
587 >Full Name</label> 587 >Full Name</label>
588 </v-flex> 588 </v-flex>
589 <v-flex xs8 class="ml-3"> 589 <v-flex xs8 class="ml-3">
590 <v-text-field 590 <v-text-field
591 v-model="addTeachers.name" 591 v-model="addTeachers.name"
592 placeholder="fill your full Name" 592 placeholder="fill your full Name"
593 name="name" 593 name="name"
594 type="text" 594 type="text"
595 :rules="nameRules" 595 :rules="nameRules"
596 required 596 required
597 ></v-text-field> 597 ></v-text-field>
598 </v-flex> 598 </v-flex>
599 </v-layout> 599 </v-layout>
600 </v-flex> 600 </v-flex>
601 <v-flex xs12 sm6> 601 <v-flex xs12 sm6>
602 <v-layout> 602 <v-layout>
603 <v-flex xs4 class="pt-4 subheading"> 603 <v-flex xs4 class="pt-4 subheading">
604 <label class="right">Email ID:</label> 604 <label class="right">Email ID:</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 placeholder="fill your email" 608 placeholder="fill your email"
609 :rules="emailRules" 609 :rules="emailRules"
610 v-model="addTeachers.email" 610 v-model="addTeachers.email"
611 type="text" 611 type="text"
612 name="email" 612 name="email"
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-layout> 618 </v-layout>
619 <v-layout> 619 <v-layout>
620 <v-flex xs12 sm6> 620 <v-flex xs12 sm6>
621 <v-layout> 621 <v-layout>
622 <v-flex xs4 sm4 class="pt-4 subheading"> 622 <v-flex xs4 sm4 class="pt-4 subheading">
623 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 623 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
624 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 624 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
625 </v-flex> 625 </v-flex>
626 <v-flex xs8 class="ml-3"> 626 <v-flex xs8 class="ml-3">
627 <v-menu 627 <v-menu
628 ref="menu" 628 ref="menu"
629 :close-on-content-click="false" 629 :close-on-content-click="false"
630 v-model="menu" 630 v-model="menu"
631 :nudge-right="40" 631 :nudge-right="40"
632 lazy 632 lazy
633 transition="scale-transition" 633 transition="scale-transition"
634 offset-y 634 offset-y
635 full-width 635 full-width
636 min-width="290px" 636 min-width="290px"
637 > 637 >
638 <v-text-field 638 <v-text-field
639 slot="activator" 639 slot="activator"
640 :rules="dateRules" 640 :rules="dateRules"
641 v-model="addTeachers.date" 641 v-model="addTeachers.date"
642 placeholder="Select date" 642 placeholder="Select date"
643 ></v-text-field> 643 ></v-text-field>
644 <v-date-picker 644 <v-date-picker
645 ref="picker" 645 ref="picker"
646 v-model="addTeachers.date" 646 v-model="addTeachers.date"
647 :max="new Date().toISOString().substr(0, 10)" 647 :max="new Date().toISOString().substr(0, 10)"
648 min="1950-01-01" 648 min="1950-01-01"
649 @input="menu = false" 649 @input="menu = false"
650 ></v-date-picker> 650 ></v-date-picker>
651 </v-menu> 651 </v-menu>
652 </v-flex> 652 </v-flex>
653 </v-layout> 653 </v-layout>
654 </v-flex> 654 </v-flex>
655 <v-flex xs12 sm6> 655 <v-flex xs12 sm6>
656 <v-layout> 656 <v-layout>
657 <v-flex xs4 class="pt-4 subheading"> 657 <v-flex xs4 class="pt-4 subheading">
658 <label class="right">City:</label> 658 <label class="right">City:</label>
659 </v-flex> 659 </v-flex>
660 <v-flex xs8 class="ml-3"> 660 <v-flex xs8 class="ml-3">
661 <v-text-field 661 <v-text-field
662 v-model="addTeachers.city" 662 v-model="addTeachers.city"
663 placeholder="fill your City Name" 663 placeholder="fill your City Name"
664 name="City" 664 name="City"
665 type="text" 665 type="text"
666 :rules="cityRules" 666 :rules="cityRules"
667 required 667 required
668 ></v-text-field> 668 ></v-text-field>
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> 673 <v-layout>
674 <v-flex xs12 sm6> 674 <v-flex xs12 sm6>
675 <v-layout> 675 <v-layout>
676 <v-flex xs4 class="pt-4 subheading"> 676 <v-flex xs4 class="pt-4 subheading">
677 <label class="right">State:</label> 677 <label class="right">State:</label>
678 </v-flex> 678 </v-flex>
679 <v-flex xs8 class="ml-3"> 679 <v-flex xs8 class="ml-3">
680 <v-text-field 680 <v-text-field
681 v-model="addTeachers.state" 681 v-model="addTeachers.state"
682 placeholder="fill your State Name" 682 placeholder="fill your State Name"
683 name="state" 683 name="state"
684 type="text" 684 type="text"
685 :rules="stateRules" 685 :rules="stateRules"
686 required 686 required
687 ></v-text-field> 687 ></v-text-field>
688 </v-flex> 688 </v-flex>
689 </v-layout> 689 </v-layout>
690 </v-flex> 690 </v-flex>
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">PinCode:</label> 694 <label class="right">PinCode:</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="addTeachers.pincode" 698 v-model="addTeachers.pincode"
699 placeholder="fill your pincode" 699 placeholder="fill your pincode"
700 name="pincode" 700 name="pincode"
701 type="number" 701 type="number"
702 :rules="pincode" 702 :rules="pincode"
703 required 703 required
704 ></v-text-field> 704 ></v-text-field>
705 </v-flex> 705 </v-flex>
706 </v-layout> 706 </v-layout>
707 </v-flex> 707 </v-flex>
708 </v-layout> 708 </v-layout>
709 <v-layout> 709 <v-layout>
710 <v-flex xs12 sm6> 710 <v-flex xs12 sm6>
711 <v-layout> 711 <v-layout>
712 <v-flex xs4 class="pt-4 subheading"> 712 <v-flex xs4 class="pt-4 subheading">
713 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 713 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
714 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 714 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
715 </v-flex> 715 </v-flex>
716 <v-flex xs8 class="ml-3"> 716 <v-flex xs8 class="ml-3">
717 <v-text-field 717 <v-text-field
718 v-model="addTeachers.mobileNo" 718 v-model="addTeachers.mobileNo"
719 placeholder="fill your Mobile No." 719 placeholder="fill your Mobile No."
720 name="mobileNo" 720 name="mobileNo"
721 type="number" 721 type="number"
722 :rules="mobileNoRules" 722 :rules="mobileNoRules"
723 required 723 required
724 ></v-text-field> 724 ></v-text-field>
725 </v-flex> 725 </v-flex>
726 </v-layout> 726 </v-layout>
727 </v-flex> 727 </v-flex>
728 <v-flex xs12 sm6> 728 <v-flex xs12 sm6>
729 <v-layout> 729 <v-layout>
730 <v-flex xs4 class="pt-4 subheading"> 730 <v-flex xs4 class="pt-4 subheading">
731 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 731 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
732 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 732 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
733 </v-flex> 733 </v-flex>
734 <v-flex xs8 class="ml-3"> 734 <v-flex xs8 class="ml-3">
735 <v-autocomplete 735 <v-autocomplete
736 v-model="addTeachers.country" 736 v-model="addTeachers.country"
737 :rules="country" 737 :rules="country"
738 :items="countries" 738 :items="countries"
739 placeholder="Select Country Name" 739 placeholder="Select Country Name"
740 required 740 required
741 ></v-autocomplete> 741 ></v-autocomplete>
742 </v-flex> 742 </v-flex>
743 </v-layout> 743 </v-layout>
744 </v-flex> 744 </v-flex>
745 </v-layout> 745 </v-layout>
746 <v-layout> 746 <v-layout>
747 <v-flex xs12 sm6> 747 <v-flex xs12 sm6>
748 <v-layout> 748 <v-layout>
749 <v-flex xs4 class="pt-4 subheading"> 749 <v-flex xs4 class="pt-4 subheading">
750 <label class="right">Join Date:</label> 750 <label class="right">Join Date:</label>
751 </v-flex> 751 </v-flex>
752 <v-flex xs8 class="ml-3"> 752 <v-flex xs8 class="ml-3">
753 <v-menu 753 <v-menu
754 ref="menu1" 754 ref="menu1"
755 :close-on-content-click="false" 755 :close-on-content-click="false"
756 v-model="menu1" 756 v-model="menu1"
757 :nudge-right="40" 757 :nudge-right="40"
758 lazy 758 lazy
759 transition="scale-transition" 759 transition="scale-transition"
760 offset-y 760 offset-y
761 full-width 761 full-width
762 min-width="290px" 762 min-width="290px"
763 > 763 >
764 <v-text-field 764 <v-text-field
765 slot="activator" 765 slot="activator"
766 :rules="joinDateRules" 766 :rules="joinDateRules"
767 v-model="addTeachers.joinDate" 767 v-model="addTeachers.joinDate"
768 placeholder="Select date" 768 placeholder="Select date"
769 ></v-text-field> 769 ></v-text-field>
770 <v-date-picker 770 <v-date-picker
771 ref="picker" 771 ref="picker"
772 v-model="addTeachers.joinDate" 772 v-model="addTeachers.joinDate"
773 :max="new Date().toISOString().substr(0, 10)" 773 :max="new Date().toISOString().substr(0, 10)"
774 min="1950-01-01" 774 min="1950-01-01"
775 @input="menu1 = false" 775 @input="menu1 = false"
776 ></v-date-picker> 776 ></v-date-picker>
777 </v-menu> 777 </v-menu>
778 </v-flex> 778 </v-flex>
779 </v-layout> 779 </v-layout>
780 </v-flex> 780 </v-flex>
781 <v-flex xs12 sm6> 781 <v-flex xs12 sm6>
782 <v-layout> 782 <v-layout>
783 <v-flex xs4 class="pt-4 subheading"> 783 <v-flex xs4 class="pt-4 subheading">
784 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 784 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
785 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 785 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
786 </v-flex> 786 </v-flex>
787 <v-flex xs8 class="ml-3"> 787 <v-flex xs8 class="ml-3">
788 <v-text-field 788 <v-text-field
789 label="Select Image" 789 label="Select Image"
790 @click="pickFile" 790 @click="pickFile"
791 v-model="imageName" 791 v-model="imageName"
792 append-icon="attach_file" 792 append-icon="attach_file"
793 ></v-text-field> 793 ></v-text-field>
794 <input 794 <input
795 type="file" 795 type="file"
796 style="display:none" 796 style="display:none"
797 ref="image" 797 ref="image"
798 accept="image/*" 798 accept="image/*"
799 @change="onFilePicked" 799 @change="onFilePicked"
800 /> 800 />
801 </v-flex> 801 </v-flex>
802 </v-layout> 802 </v-layout>
803 </v-flex> 803 </v-flex>
804 </v-layout> 804 </v-layout>
805 <v-layout class="hidden-xs-only hidden-sm-only"> 805 <v-layout class="hidden-xs-only hidden-sm-only">
806 <v-flex xs12 sm12> 806 <v-flex xs12 sm6>
807 <v-layout> 807 <v-layout>
808 <v-flex xs4 md2 class="pt-4 subheading ml-5"> 808 <v-flex xs4 md4 class="pt-4 subheading">
809 <label class="right pr-4">Present Address:</label> 809 <label class="right">Present Address:</label>
810 </v-flex> 810 </v-flex>
811 <v-flex xs8 md10> 811 <v-flex xs8 md8 class="ml-3">
812 <v-text-field 812 <v-text-field
813 name="input-4-3" 813 name="input-4-3"
814 v-model="addTeachers.presentAddress" 814 v-model="addTeachers.presentAddress"
815 :rules="presentAddress" 815 :rules="presentAddress"
816 placeholder="fill Your present Address" 816 placeholder="fill Your present Address"
817 required 817 required
818 ></v-text-field> 818 ></v-text-field>
819 </v-flex> 819 </v-flex>
820 </v-layout> 820 </v-layout>
821 </v-flex> 821 </v-flex>
822 <v-flex xs12 sm12> 822 <v-flex xs12 sm6>
823 <v-layout> 823 <v-layout>
824 <v-flex xs4 md2 class="pt-4 subheading ml-5 addressForm"> 824 <v-flex xs4 md4 class="pt-4 subheading addressForm">
825 <label class="right pr-4">Permanent Address:</label> 825 <label class="right">Permanent Address:</label>
826 </v-flex> 826 </v-flex>
827 <v-flex xs12 md10> 827 <v-flex xs12 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.permanentAddress" 830 v-model="addTeachers.permanentAddress"
831 :rules="permanentAddress" 831 :rules="permanentAddress"
832 placeholder="fill Your Permanent Address" 832 placeholder="fill Your Permanent Address"
833 required 833 required
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-layout> 838 </v-layout>
839 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 839 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
840 <v-flex xs12 sm12> 840 <v-flex xs12 sm12>
841 <v-layout> 841 <v-layout>
842 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 842 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
843 <label class>Present Addres:</label> 843 <label class>Present Addres:</label>
844 </v-flex> 844 </v-flex>
845 </v-layout> 845 </v-layout>
846 <v-layout> 846 <v-layout>
847 <v-flex xs12 sm12> 847 <v-flex xs12 sm12>
848 <v-textarea 848 <v-textarea
849 name="input-4-3" 849 name="input-4-3"
850 v-model="addTeachers.presentAddress" 850 v-model="addTeachers.presentAddress"
851 :rules="presentAddress" 851 :rules="presentAddress"
852 placeholder="fill Your present Address" 852 placeholder="fill Your present Address"
853 required 853 required
854 ></v-textarea> 854 ></v-textarea>
855 </v-flex> 855 </v-flex>
856 </v-layout> 856 </v-layout>
857 </v-flex> 857 </v-flex>
858 <v-flex xs12 sm12> 858 <v-flex xs12 sm12>
859 <v-layout> 859 <v-layout>
860 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> 860 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
861 <label>Permanent Address:</label> 861 <label>Permanent Address:</label>
862 </v-flex> 862 </v-flex>
863 </v-layout> 863 </v-layout>
864 <v-layout> 864 <v-layout>
865 <v-flex xs12 sm12> 865 <v-flex xs12 sm12>
866 <v-textarea 866 <v-textarea
867 name="input-4-3" 867 name="input-4-3"
868 v-model="addTeachers.permanentAddress" 868 v-model="addTeachers.permanentAddress"
869 :rules="permanentAddress" 869 :rules="permanentAddress"
870 placeholder="fill Your Permanent Address" 870 placeholder="fill Your Permanent Address"
871 required 871 required
872 ></v-textarea> 872 ></v-textarea>
873 </v-flex> 873 </v-flex>
874 </v-layout> 874 </v-layout>
875 </v-flex> 875 </v-flex>
876 </v-layout> 876 </v-layout>
877 <v-layout class="mx-2"> 877 <v-layout class="mx-2">
878 <v-flex xs12 sm12> 878 <v-flex xs12 sm11 offset-sm1>
879 <v-layout> 879 <v-layout>
880 <v-flex xs6> 880 <v-flex xs6 class="">
881 <v-btn @click="clear" round dark>clear</v-btn> 881 <v-btn @click="clear" round dark>clear</v-btn>
882 </v-flex> 882 </v-flex>
883 <v-flex xs6> 883 <v-flex xs6>
884 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 884 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
885 </v-flex> 885 </v-flex>
886 </v-layout> 886 </v-layout>
887 </v-flex> 887 </v-flex>
888 </v-layout> 888 </v-layout>
889 </v-container> 889 </v-container>
890 </v-form> 890 </v-form>
891 </v-card> 891 </v-card>
892 </v-flex> 892 </v-flex>
893 </v-container> 893 </v-container>
894 </v-tab-item> 894 </v-tab-item>
895 </v-tabs> 895 </v-tabs>
896 <div class="loader" v-if="showLoader"> 896 <div class="loader" v-if="showLoader">
897 <v-progress-circular indeterminate color="white"></v-progress-circular> 897 <v-progress-circular indeterminate color="white"></v-progress-circular>
898 </div> 898 </div>
899 </v-app> 899 </v-app>
900 </template> 900 </template>
901 901
902 <script> 902 <script>
903 import http from "@/Services/http.js"; 903 import http from "@/Services/http.js";
904 import Util from "@/util"; 904 import Util from "@/util";
905 import moment from "moment"; 905 import moment from "moment";
906 906
907 export default { 907 export default {
908 data: () => ({ 908 data: () => ({
909 component: "report-generate", 909 component: "report-generate",
910 snackbar: false, 910 snackbar: false,
911 y: "top", 911 y: "top",
912 x: "right", 912 x: "right",
913 mode: "", 913 mode: "",
914 timeout: 3000, 914 timeout: 3000,
915 text: "", 915 text: "",
916 showLoader: false, 916 showLoader: false,
917 loading: false, 917 loading: false,
918 date: null, 918 date: null,
919 search: "", 919 search: "",
920 menu: false, 920 menu: false,
921 menu1: false, 921 menu1: false,
922 menu2: false, 922 menu2: false,
923 menu3: false, 923 menu3: false,
924 dialog: false, 924 dialog: false,
925 dialog1: false, 925 dialog1: false,
926 valid: true, 926 valid: true,
927 isActive: true, 927 isActive: true,
928 newActive: false, 928 newActive: false,
929 pagination: { 929 pagination: {
930 rowsPerPage: 15 930 rowsPerPage: 15
931 }, 931 },
932 imageData: {}, 932 imageData: {},
933 imageName: "", 933 imageName: "",
934 imageUrl: "", 934 imageUrl: "",
935 imageFile: "", 935 imageFile: "",
936 nameRules: [v => !!v || " Full Name is required"], 936 nameRules: [v => !!v || " Full Name is required"],
937 dateRules: [v => !!v || " DOB is required"], 937 dateRules: [v => !!v || " DOB is required"],
938 cityRules: [v => !!v || " City Name is required"], 938 cityRules: [v => !!v || " City Name is required"],
939 pincode: [v => !!v || " Pincode is required"], 939 pincode: [v => !!v || " Pincode is required"],
940 country: [v => !!v || " Country Name is required"], 940 country: [v => !!v || " Country Name is required"],
941 permanentAddress: [v => !!v || " Permanent Address is required"], 941 permanentAddress: [v => !!v || " Permanent Address is required"],
942 presentAddress: [v => !!v || " Present Address is required"], 942 presentAddress: [v => !!v || " Present Address is required"],
943 mobileNoRules: [v => !!v || "Mobile Number is required"], 943 mobileNoRules: [v => !!v || "Mobile Number is required"],
944 stateRules: [v => !!v || "State Name is required"], 944 stateRules: [v => !!v || "State Name is required"],
945 joinDateRules: [v => !!v || " Join Date is required"], 945 joinDateRules: [v => !!v || " Join Date is required"],
946 errorMessages: "", 946 errorMessages: "",
947 emailRules: [ 947 emailRules: [
948 v => !!v || "E-mail is required", 948 v => !!v || "E-mail is required",
949 v => 949 v =>
950 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 950 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
951 "E-mail must be valid" 951 "E-mail must be valid"
952 ], 952 ],
953 countries: [ 953 countries: [
954 "Afghanistan", 954 "Afghanistan",
955 "Albania", 955 "Albania",
956 "Algeria", 956 "Algeria",
957 "Andorra", 957 "Andorra",
958 "Angola", 958 "Angola",
959 "Anguilla", 959 "Anguilla",
960 "Antigua &amp; Barbuda", 960 "Antigua &amp; Barbuda",
961 "Argentina", 961 "Argentina",
962 "Armenia", 962 "Armenia",
963 "Aruba", 963 "Aruba",
964 "Australia", 964 "Australia",
965 "Austria", 965 "Austria",
966 "Azerbaijan", 966 "Azerbaijan",
967 "Bahamas", 967 "Bahamas",
968 "Bahrain", 968 "Bahrain",
969 "Bangladesh", 969 "Bangladesh",
970 "Barbados", 970 "Barbados",
971 "Belarus", 971 "Belarus",
972 "Belgium", 972 "Belgium",
973 "Belize", 973 "Belize",
974 "Benin", 974 "Benin",
975 "Bermuda", 975 "Bermuda",
976 "Bhutan", 976 "Bhutan",
977 "Bolivia", 977 "Bolivia",
978 "Bosnia &amp; Herzegovina", 978 "Bosnia &amp; Herzegovina",
979 "Botswana", 979 "Botswana",
980 "Brazil", 980 "Brazil",
981 "British Virgin Islands", 981 "British Virgin Islands",
982 "Brunei", 982 "Brunei",
983 "Bulgaria", 983 "Bulgaria",
984 "Burkina Faso", 984 "Burkina Faso",
985 "Burundi", 985 "Burundi",
986 "Cambodia", 986 "Cambodia",
987 "Cameroon", 987 "Cameroon",
988 "Cape Verde", 988 "Cape Verde",
989 "Cayman Islands", 989 "Cayman Islands",
990 "Chad", 990 "Chad",
991 "Chile", 991 "Chile",
992 "China", 992 "China",
993 "Colombia", 993 "Colombia",
994 "Congo", 994 "Congo",
995 "Cook Islands", 995 "Cook Islands",
996 "Costa Rica", 996 "Costa Rica",
997 "Cote D Ivoire", 997 "Cote D Ivoire",
998 "Croatia", 998 "Croatia",
999 "Cruise Ship", 999 "Cruise Ship",
1000 "Cuba", 1000 "Cuba",
1001 "Cyprus", 1001 "Cyprus",
1002 "Czech Republic", 1002 "Czech Republic",
1003 "Denmark", 1003 "Denmark",
1004 "Djibouti", 1004 "Djibouti",
1005 "Dominica", 1005 "Dominica",
1006 "Dominican Republic", 1006 "Dominican Republic",
1007 "Ecuador", 1007 "Ecuador",
1008 "Egypt", 1008 "Egypt",
1009 "El Salvador", 1009 "El Salvador",
1010 "Equatorial Guinea", 1010 "Equatorial Guinea",
1011 "Estonia", 1011 "Estonia",
1012 "Ethiopia", 1012 "Ethiopia",
1013 "Falkland Islands", 1013 "Falkland Islands",
1014 "Faroe Islands", 1014 "Faroe Islands",
1015 "Fiji", 1015 "Fiji",
1016 "Finland", 1016 "Finland",
1017 "France", 1017 "France",
1018 "French Polynesia", 1018 "French Polynesia",
1019 "French West Indies", 1019 "French West Indies",
1020 "Gabon", 1020 "Gabon",
1021 "Gambia", 1021 "Gambia",
1022 "Georgia", 1022 "Georgia",
1023 "Germany", 1023 "Germany",
1024 "Ghana", 1024 "Ghana",
1025 "Gibraltar", 1025 "Gibraltar",
1026 "Greece", 1026 "Greece",
1027 "Greenland", 1027 "Greenland",
1028 "Grenada", 1028 "Grenada",
1029 "Guam", 1029 "Guam",
1030 "Guatemala", 1030 "Guatemala",
1031 "Guernsey", 1031 "Guernsey",
1032 "Guinea", 1032 "Guinea",
1033 "Guinea Bissau", 1033 "Guinea Bissau",
1034 "Guyana", 1034 "Guyana",
1035 "Haiti", 1035 "Haiti",
1036 "Honduras", 1036 "Honduras",
1037 "Hong Kong", 1037 "Hong Kong",
1038 "Hungary", 1038 "Hungary",
1039 "Iceland", 1039 "Iceland",
1040 "India", 1040 "India",
1041 "Indonesia", 1041 "Indonesia",
1042 "Iran", 1042 "Iran",
1043 "Iraq", 1043 "Iraq",
1044 "Ireland", 1044 "Ireland",
1045 "Isle of Man", 1045 "Isle of Man",
1046 "Israel", 1046 "Israel",
1047 "Italy", 1047 "Italy",
1048 "Jamaica", 1048 "Jamaica",
1049 "Japan", 1049 "Japan",
1050 "Jersey", 1050 "Jersey",
1051 "Jordan", 1051 "Jordan",
1052 "Kazakhstan", 1052 "Kazakhstan",
1053 "Kenya", 1053 "Kenya",
1054 "Kuwait", 1054 "Kuwait",
1055 "Kyrgyz Republic", 1055 "Kyrgyz Republic",
1056 "Laos", 1056 "Laos",
1057 "Latvia", 1057 "Latvia",
1058 "Lebanon", 1058 "Lebanon",
1059 "Lesotho", 1059 "Lesotho",
1060 "Liberia", 1060 "Liberia",
1061 "Libya", 1061 "Libya",
1062 "Liechtenstein", 1062 "Liechtenstein",
1063 "Lithuania", 1063 "Lithuania",
1064 "Luxembourg", 1064 "Luxembourg",
1065 "Macau", 1065 "Macau",
1066 "Macedonia", 1066 "Macedonia",
1067 "Madagascar", 1067 "Madagascar",
1068 "Malawi", 1068 "Malawi",
1069 "Malaysia", 1069 "Malaysia",
1070 "Maldives", 1070 "Maldives",
1071 "Mali", 1071 "Mali",
1072 "Malta", 1072 "Malta",
1073 "Mauritania", 1073 "Mauritania",
1074 "Mauritius", 1074 "Mauritius",
1075 "Mexico", 1075 "Mexico",
1076 "Moldova", 1076 "Moldova",
1077 "Monaco", 1077 "Monaco",
1078 "Mongolia", 1078 "Mongolia",
1079 "Montenegro", 1079 "Montenegro",
1080 "Montserrat", 1080 "Montserrat",
1081 "Morocco", 1081 "Morocco",
1082 "Mozambique", 1082 "Mozambique",
1083 "Namibia", 1083 "Namibia",
1084 "Nepal", 1084 "Nepal",
1085 "Netherlands", 1085 "Netherlands",
1086 "Netherlands Antilles", 1086 "Netherlands Antilles",
1087 "New Caledonia", 1087 "New Caledonia",
1088 "New Zealand", 1088 "New Zealand",
1089 "Nicaragua", 1089 "Nicaragua",
1090 "Niger", 1090 "Niger",
1091 "Nigeria", 1091 "Nigeria",
1092 "Norway", 1092 "Norway",
1093 "Oman", 1093 "Oman",
1094 "Pakistan", 1094 "Pakistan",
1095 "Palestine", 1095 "Palestine",
1096 "Panama", 1096 "Panama",
1097 "Papua New Guinea", 1097 "Papua New Guinea",
1098 "Paraguay", 1098 "Paraguay",
1099 "Peru", 1099 "Peru",
1100 "Philippines", 1100 "Philippines",
1101 "Poland", 1101 "Poland",
1102 "Portugal", 1102 "Portugal",
1103 "Puerto Rico", 1103 "Puerto Rico",
1104 "Qatar", 1104 "Qatar",
1105 "Reunion", 1105 "Reunion",
1106 "Romania", 1106 "Romania",
1107 "Russia", 1107 "Russia",
1108 "Rwanda", 1108 "Rwanda",
1109 "Saint Pierre &amp; Miquelon", 1109 "Saint Pierre &amp; Miquelon",
1110 "Samoa", 1110 "Samoa",
1111 "San Marino", 1111 "San Marino",
1112 "Satellite", 1112 "Satellite",
1113 "Saudi Arabia", 1113 "Saudi Arabia",
1114 "Senegal", 1114 "Senegal",
1115 "Serbia", 1115 "Serbia",
1116 "Seychelles", 1116 "Seychelles",
1117 "Sierra Leone", 1117 "Sierra Leone",
1118 "Singapore", 1118 "Singapore",
1119 "Slovakia", 1119 "Slovakia",
1120 "Slovenia", 1120 "Slovenia",
1121 "South Africa", 1121 "South Africa",
1122 "South Korea", 1122 "South Korea",
1123 "Spain", 1123 "Spain",
1124 "Sri Lanka", 1124 "Sri Lanka",
1125 "St Kitts &amp; Nevis", 1125 "St Kitts &amp; Nevis",
1126 "St Lucia", 1126 "St Lucia",
1127 "St Vincent", 1127 "St Vincent",
1128 "St. Lucia", 1128 "St. Lucia",
1129 "Sudan", 1129 "Sudan",
1130 "Suriname", 1130 "Suriname",
1131 "Swaziland", 1131 "Swaziland",
1132 "Sweden", 1132 "Sweden",
1133 "Switzerland", 1133 "Switzerland",
1134 "Syria", 1134 "Syria",
1135 "Taiwan", 1135 "Taiwan",
1136 "Tajikistan", 1136 "Tajikistan",
1137 "Tanzania", 1137 "Tanzania",
1138 "Thailand", 1138 "Thailand",
1139 "Timor L'Este", 1139 "Timor L'Este",
1140 "Togo", 1140 "Togo",
1141 "Tonga", 1141 "Tonga",
1142 "Trinidad &amp; Tobago", 1142 "Trinidad &amp; Tobago",
1143 "Tunisia", 1143 "Tunisia",
1144 "Turkey", 1144 "Turkey",
1145 "Turkmenistan", 1145 "Turkmenistan",
1146 "Turks &amp; Caicos", 1146 "Turks &amp; Caicos",
1147 "Uganda", 1147 "Uganda",
1148 "Ukraine", 1148 "Ukraine",
1149 "United Arab Emirates", 1149 "United Arab Emirates",
1150 "United Kingdom", 1150 "United Kingdom",
1151 "United States", 1151 "United States",
1152 "Uruguay", 1152 "Uruguay",
1153 "Uzbekistan", 1153 "Uzbekistan",
1154 "Venezuela", 1154 "Venezuela",
1155 "Vietnam", 1155 "Vietnam",
1156 "Virgin Islands (US)", 1156 "Virgin Islands (US)",
1157 "Yemen", 1157 "Yemen",
1158 "Zambia", 1158 "Zambia",
1159 "Zimbabwe" 1159 "Zimbabwe"
1160 ], 1160 ],
1161 headers: [ 1161 headers: [
1162 { 1162 {
1163 text: "No", 1163 text: "No",
1164 align: "center", 1164 align: "center",
1165 sortable: false, 1165 sortable: false,
1166 value: "No" 1166 value: "No"
1167 }, 1167 },
1168 { 1168 {
1169 text: "Profile Pic", 1169 text: "Profile Pic",
1170 value: "profilePicUrl", 1170 value: "profilePicUrl",
1171 sortable: false, 1171 sortable: false,
1172 align: "center" 1172 align: "center"
1173 }, 1173 },
1174 { text: "Name", value: "name", sortable: false, align: "center" }, 1174 { text: "Name", value: "name", sortable: false, align: "center" },
1175 { text: "Email", value: "email", sortable: false, align: "center" }, 1175 { text: "Email", value: "email", sortable: false, align: "center" },
1176 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1176 { text: "DOB", value: "dob", sortable: false, align: "center" },
1177 { 1177 {
1178 text: "Join Date", 1178 text: "Join Date",
1179 value: "joinDate", 1179 value: "joinDate",
1180 sortable: false, 1180 sortable: false,
1181 align: "center" 1181 align: "center"
1182 }, 1182 },
1183 { 1183 {
1184 text: "Mobile No", 1184 text: "Mobile No",
1185 value: "mobileNo", 1185 value: "mobileNo",
1186 sortable: false, 1186 sortable: false,
1187 align: "center" 1187 align: "center"
1188 }, 1188 },
1189 { text: "Action", value: "", sortable: false, align: "center" } 1189 { text: "Action", value: "", sortable: false, align: "center" }
1190 ], 1190 ],
1191 desserts: [], 1191 desserts: [],
1192 editedIndex: -1, 1192 editedIndex: -1,
1193 upload: "", 1193 upload: "",
1194 editedItem: { 1194 editedItem: {
1195 role: "TEACHER", 1195 role: "TEACHER",
1196 name: "", 1196 name: "",
1197 email: "", 1197 email: "",
1198 date: null, 1198 date: null,
1199 city: "", 1199 city: "",
1200 pincode: "", 1200 pincode: "",
1201 country: "", 1201 country: "",
1202 permanentAddress: "", 1202 permanentAddress: "",
1203 presentAddress: "", 1203 presentAddress: "",
1204 mobileNo: "", 1204 mobileNo: "",
1205 state: "", 1205 state: "",
1206 joinDate: null 1206 joinDate: null
1207 }, 1207 },
1208 addTeachers: { 1208 addTeachers: {
1209 role: "TEACHER", 1209 role: "TEACHER",
1210 name: "", 1210 name: "",
1211 email: "", 1211 email: "",
1212 date: null, 1212 date: null,
1213 city: "", 1213 city: "",
1214 pincode: "", 1214 pincode: "",
1215 country: "", 1215 country: "",
1216 permanentAddress: "", 1216 permanentAddress: "",
1217 presentAddress: "", 1217 presentAddress: "",
1218 mobileNo: "", 1218 mobileNo: "",
1219 state: "", 1219 state: "",
1220 joinDate: null 1220 joinDate: null
1221 }, 1221 },
1222 defaultItem: { 1222 defaultItem: {
1223 role: "TEACHER", 1223 role: "TEACHER",
1224 name: "", 1224 name: "",
1225 email: "" 1225 email: ""
1226 } 1226 }
1227 }), 1227 }),
1228 watch: { 1228 watch: {
1229 menu(val) { 1229 menu(val) {
1230 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1230 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1231 }, 1231 },
1232 menu1(val) { 1232 menu1(val) {
1233 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1233 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1234 } 1234 }
1235 }, 1235 },
1236 methods: { 1236 methods: {
1237 save(date) { 1237 save(date) {
1238 this.$refs.menu.save(date); 1238 this.$refs.menu.save(date);
1239 }, 1239 },
1240 save(date) { 1240 save(date) {
1241 this.$refs.menu1.save(date); 1241 this.$refs.menu1.save(date);
1242 }, 1242 },
1243 pickFile() { 1243 pickFile() {
1244 this.$refs.image.click(); 1244 this.$refs.image.click();
1245 }, 1245 },
1246 onFilePicked(e) { 1246 onFilePicked(e) {
1247 // console.log(e) 1247 // console.log(e)
1248 const files = e.target.files; 1248 const files = e.target.files;
1249 this.upload = e.target.files[0]; 1249 this.upload = e.target.files[0];
1250 console.log("imageData-upload========>", this.upload); 1250 console.log("imageData-upload========>", this.upload);
1251 if (files[0] !== undefined) { 1251 if (files[0] !== undefined) {
1252 this.imageName = files[0].name; 1252 this.imageName = files[0].name;
1253 if (this.imageName.lastIndexOf(".") <= 0) { 1253 if (this.imageName.lastIndexOf(".") <= 0) {
1254 return; 1254 return;
1255 } 1255 }
1256 const fr = new FileReader(); 1256 const fr = new FileReader();
1257 fr.readAsDataURL(files[0]); 1257 fr.readAsDataURL(files[0]);
1258 fr.addEventListener("load", () => { 1258 fr.addEventListener("load", () => {
1259 this.imageUrl = fr.result; 1259 this.imageUrl = fr.result;
1260 this.imageFile = files[0]; // this is an image file that can be sent to server... 1260 this.imageFile = files[0]; // this is an image file that can be sent to server...
1261 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1261 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1262 // console.log("upload=======>", this.imageData.imageUrl); 1262 // console.log("upload=======>", this.imageData.imageUrl);
1263 console.log("imageFile", this.imageUrl); 1263 console.log("imageFile", this.imageUrl);
1264 }); 1264 });
1265 } else { 1265 } else {
1266 this.imageName = ""; 1266 this.imageName = "";
1267 this.imageFile = ""; 1267 this.imageFile = "";
1268 this.imageUrl = ""; 1268 this.imageUrl = "";
1269 } 1269 }
1270 }, 1270 },
1271 dates: function(date) { 1271 dates: function(date) {
1272 return moment(date).format("MMMM DD, YYYY"); 1272 return moment(date).format("MMMM DD, YYYY");
1273 }, 1273 },
1274 getTeacherList() { 1274 getTeacherList() {
1275 this.showLoader = true; 1275 this.showLoader = true;
1276 var token = this.$store.state.token; 1276 var token = this.$store.state.token;
1277 http() 1277 http()
1278 .get("/getTeachersList", { 1278 .get("/getTeachersList", {
1279 headers: { Authorization: "Bearer " + token } 1279 headers: { Authorization: "Bearer " + token }
1280 }) 1280 })
1281 .then(response => { 1281 .then(response => {
1282 this.desserts = response.data.data; 1282 this.desserts = response.data.data;
1283 this.showLoader = false; 1283 this.showLoader = false;
1284 // console.log("getTeacherList=====>",this.desserts) 1284 // console.log("getTeacherList=====>",this.desserts)
1285 }) 1285 })
1286 .catch(error => { 1286 .catch(error => {
1287 this.showLoader = false; 1287 this.showLoader = false;
1288 if (error.response.status === 401) { 1288 if (error.response.status === 401) {
1289 this.$router.replace({ path: "/" }); 1289 this.$router.replace({ path: "/" });
1290 this.$store.dispatch("setToken", null); 1290 this.$store.dispatch("setToken", null);
1291 this.$store.dispatch("Id", null); 1291 this.$store.dispatch("Id", null);
1292 } 1292 }
1293 }); 1293 });
1294 }, 1294 },
1295 editItem(item) { 1295 editItem(item) {
1296 this.editedIndex = this.desserts.indexOf(item); 1296 this.editedIndex = this.desserts.indexOf(item);
1297 this.editedItem = Object.assign({}, item); 1297 this.editedItem = Object.assign({}, item);
1298 this.editedItem.dob = 1298 this.editedItem.dob =
1299 this.editedItem.dob != undefined 1299 this.editedItem.dob != undefined
1300 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1300 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1301 : (this.editedItem.dob = ""); 1301 : (this.editedItem.dob = "");
1302 this.editedItem.joinDate = 1302 this.editedItem.joinDate =
1303 this.editedItem.joinDate != undefined 1303 this.editedItem.joinDate != undefined
1304 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1304 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1305 0, 1305 0,
1306 10 1306 10
1307 )) 1307 ))
1308 : (this.editedItem.joinDate = ""); 1308 : (this.editedItem.joinDate = "");
1309 1309
1310 this.dialog = true; 1310 this.dialog = true;
1311 }, 1311 },
1312 profile(item) { 1312 profile(item) {
1313 this.editedIndex = this.desserts.indexOf(item); 1313 this.editedIndex = this.desserts.indexOf(item);
1314 this.editedItem = Object.assign({}, item); 1314 this.editedItem = Object.assign({}, item);
1315 this.dialog1 = true; 1315 this.dialog1 = true;
1316 }, 1316 },
1317 deleteItem(item) { 1317 deleteItem(item) {
1318 let deleteTeachers = { 1318 let deleteTeachers = {
1319 teacherId: item._id 1319 teacherId: item._id
1320 }; 1320 };
1321 // console.log("deleteUers",deleteTeachers) 1321 // console.log("deleteUers",deleteTeachers)
1322 http() 1322 http()
1323 .delete( 1323 .delete(
1324 "/deleteTeacher", 1324 "/deleteTeacher",
1325 confirm("Are you sure you want to delete this?") && { 1325 confirm("Are you sure you want to delete this?") && {
1326 params: deleteTeachers 1326 params: deleteTeachers
1327 } 1327 }
1328 ) 1328 )
1329 .then(response => { 1329 .then(response => {
1330 // console.log("deleteUers",deleteTeachers) 1330 // console.log("deleteUers",deleteTeachers)
1331 if ((this.snackbar = true)) { 1331 if ((this.snackbar = true)) {
1332 this.text = "Successfully delete Existing Teacher"; 1332 this.text = "Successfully delete Existing Teacher";
1333 } 1333 }
1334 this.getTeacherList(); 1334 this.getTeacherList();
1335 }) 1335 })
1336 .catch(error => { 1336 .catch(error => {
1337 console.log(error); 1337 console.log(error);
1338 }); 1338 });
1339 }, 1339 },
1340 activeTab(type) { 1340 activeTab(type) {
1341 switch (type) { 1341 switch (type) {
1342 case "existing": 1342 case "existing":
1343 this.newActive = false; 1343 this.newActive = false;
1344 this.isActive = true; 1344 this.isActive = true;
1345 break; 1345 break;
1346 1346
1347 default: 1347 default:
1348 this.newActive = true; 1348 this.newActive = true;
1349 this.isActive = false; 1349 this.isActive = false;
1350 break; 1350 break;
1351 } 1351 }
1352 }, 1352 },
1353 close() { 1353 close() {
1354 this.dialog = false; 1354 this.dialog = false;
1355 setTimeout(() => { 1355 setTimeout(() => {
1356 this.editedItem = Object.assign({}, this.defaultItem); 1356 this.editedItem = Object.assign({}, this.defaultItem);
1357 this.editedIndex = -1; 1357 this.editedIndex = -1;
1358 }, 300); 1358 }, 300);
1359 }, 1359 },
1360 close1() { 1360 close1() {
1361 this.dialog1 = false; 1361 this.dialog1 = false;
1362 }, 1362 },
1363 submit() { 1363 submit() {
1364 if (this.$refs.form.validate()) { 1364 if (this.$refs.form.validate()) {
1365 let addTeacher = { 1365 let addTeacher = {
1366 name: this.addTeachers.name, 1366 name: this.addTeachers.name,
1367 email: this.addTeachers.email, 1367 email: this.addTeachers.email,
1368 role: this.addTeachers.role, 1368 role: this.addTeachers.role,
1369 dob: this.addTeachers.date, 1369 dob: this.addTeachers.date,
1370 city: this.addTeachers.city, 1370 city: this.addTeachers.city,
1371 pincode: this.addTeachers.pincode, 1371 pincode: this.addTeachers.pincode,
1372 country: this.addTeachers.country, 1372 country: this.addTeachers.country,
1373 permanentAddress: this.addTeachers.permanentAddress, 1373 permanentAddress: this.addTeachers.permanentAddress,
1374 presentAddress: this.addTeachers.presentAddress, 1374 presentAddress: this.addTeachers.presentAddress,
1375 mobileNo: this.addTeachers.mobileNo, 1375 mobileNo: this.addTeachers.mobileNo,
1376 state: this.addTeachers.state, 1376 state: this.addTeachers.state,
1377 joinDate: this.addTeachers.joinDate 1377 joinDate: this.addTeachers.joinDate
1378 }; 1378 };
1379 if (this.imageUrl) { 1379 if (this.imageUrl) {
1380 var str = this.imageUrl; 1380 var str = this.imageUrl;
1381 const [baseUrl, imageUrl] = str.split(/,/); 1381 const [baseUrl, imageUrl] = str.split(/,/);
1382 addTeacher.upload = imageUrl; 1382 addTeacher.upload = imageUrl;
1383 } 1383 }
1384 this.loading = true; 1384 this.loading = true;
1385 http() 1385 http()
1386 .post("/createTeacher", addTeacher) 1386 .post("/createTeacher", addTeacher)
1387 .then(response => { 1387 .then(response => {
1388 this.imageUrl = ""; 1388 this.imageUrl = "";
1389 this.getTeacherList(); 1389 this.getTeacherList();
1390 this.snackbar = true; 1390 this.snackbar = true;
1391 this.text = "New Teacher added successfully"; 1391 this.text = "New Teacher added successfully";
1392 this.clear(); 1392 this.clear();
1393 this.loading = false; 1393 this.loading = false;
1394 }) 1394 })
1395 .catch(error => { 1395 .catch(error => {
1396 // console.log(error); 1396 // console.log(error);
1397 if ((this.snackbar = true)) { 1397 if ((this.snackbar = true)) {
1398 this.text = error.response.data.message; 1398 this.text = error.response.data.message;
1399 } 1399 }
1400 this.loading = false; 1400 this.loading = false;
1401 }); 1401 });
1402 } 1402 }
1403 }, 1403 },
1404 clear() { 1404 clear() {
1405 this.$refs.form.reset(); 1405 this.$refs.form.reset();
1406 this.imageUrl = ""; 1406 this.imageUrl = "";
1407 }, 1407 },
1408 save() { 1408 save() {
1409 this.loading = true; 1409 this.loading = true;
1410 let editTeacher = { 1410 let editTeacher = {
1411 teacherId: this.editedItem._id, 1411 teacherId: this.editedItem._id,
1412 name: this.editedItem.name, 1412 name: this.editedItem.name,
1413 email: this.editedItem.email, 1413 email: this.editedItem.email,
1414 role: this.editedItem.role, 1414 role: this.editedItem.role,
1415 dob: this.editedItem.date, 1415 dob: this.editedItem.date,
1416 city: this.editedItem.city, 1416 city: this.editedItem.city,
1417 pincode: this.editedItem.pincode, 1417 pincode: this.editedItem.pincode,
1418 country: this.editedItem.country, 1418 country: this.editedItem.country,
1419 permanentAddress: this.editedItem.permanentAddress, 1419 permanentAddress: this.editedItem.permanentAddress,
1420 presentAddress: this.editedItem.presentAddress, 1420 presentAddress: this.editedItem.presentAddress,
1421 mobileNo: this.editedItem.mobileNo, 1421 mobileNo: this.editedItem.mobileNo,
1422 state: this.editedItem.state, 1422 state: this.editedItem.state,
1423 joinDate: this.editedItem.joinDate 1423 joinDate: this.editedItem.joinDate
1424 }; 1424 };
1425 if (this.imageUrl) { 1425 if (this.imageUrl) {
1426 var str = this.imageUrl; 1426 var str = this.imageUrl;
1427 const [baseUrl, imageUrl] = str.split(/,/); 1427 const [baseUrl, imageUrl] = str.split(/,/);
1428 editTeacher.upload = imageUrl; 1428 editTeacher.upload = imageUrl;
1429 } 1429 }
1430 http() 1430 http()
1431 .put("/updateTeacher", editTeacher) 1431 .put("/updateTeacher", editTeacher)
1432 .then(response => { 1432 .then(response => {
1433 console.log("editTeacher", editTeacher); 1433 console.log("editTeacher", editTeacher);
1434 this.snackbar = true; 1434 this.snackbar = true;
1435 this.text = "Successfully Edit Existing Teacher"; 1435 this.text = "Successfully Edit Existing Teacher";
1436 this.loading = false; 1436 this.loading = false;
1437 this.getTeacherList(); 1437 this.getTeacherList();
1438 this.close(); 1438 this.close();
1439 }) 1439 })
1440 .catch(error => { 1440 .catch(error => {
1441 console.log(error); 1441 console.log(error);
1442 this.loading = false; 1442 this.loading = false;
1443 }); 1443 });
1444 } 1444 }
1445 }, 1445 },
1446 mounted() { 1446 mounted() {
1447 this.getTeacherList(); 1447 this.getTeacherList();
1448 }, 1448 },
1449 created() { 1449 created() {
1450 this.$root.$on("app:search", search => { 1450 this.$root.$on("app:search", search => {
1451 this.search = search; 1451 this.search = search;
1452 }); 1452 });
1453 }, 1453 },
1454 beforeDestroy() { 1454 beforeDestroy() {
1455 // dont forget to remove the listener 1455 // dont forget to remove the listener
1456 this.$root.$off("app:search"); 1456 this.$root.$off("app:search");
1457 } 1457 }
1458 }; 1458 };
1459 </script> 1459 </script>
1460 <style scoped> 1460 <style scoped>
1461 .active { 1461 .active {
1462 background-color: gray; 1462 background-color: gray;
1463 color: white !important; 1463 color: white !important;
1464 } 1464 }
1465 .activebtn { 1465 .activebtn {
1466 color: black !important; 1466 color: black !important;
1467 } 1467 }
1468 </style> 1468 </style>
src/router/paths.js
Diff comments   View file @0065443
1 export default [{ 1 export default [{
2 path: '*', 2 path: '*',
3 meta: { 3 meta: {
4 public: true, 4 public: true,
5 }, 5 },
6 redirect: { 6 redirect: {
7 path: '/404' 7 path: '/404'
8 } 8 }
9 }, 9 },
10 { 10 {
11 path: '/404', 11 path: '/404',
12 meta: { 12 meta: {
13 public: true, 13 public: true,
14 }, 14 },
15 name: 'NotFound', 15 name: 'NotFound',
16 component: () => 16 component: () =>
17 import ( 17 import (
18 /* webpackChunkName: "routes" */ 18 /* webpackChunkName: "routes" */
19 /* webpackMode: "lazy-once" */ 19 /* webpackMode: "lazy-once" */
20 `@/pages/NotFound/NotFound.vue` 20 `@/pages/NotFound/NotFound.vue`
21 ) 21 )
22 }, 22 },
23 { 23 {
24 path: '/500', 24 path: '/500',
25 meta: { 25 meta: {
26 public: true, 26 public: true,
27 }, 27 },
28 name: 'ServerError', 28 name: 'ServerError',
29 component: () => 29 component: () =>
30 import ( 30 import (
31 /* webpackChunkName: "routes" */ 31 /* webpackChunkName: "routes" */
32 /* webpackMode: "lazy-once" */ 32 /* webpackMode: "lazy-once" */
33 `@/pages/NotFound/Error.vue` 33 `@/pages/NotFound/Error.vue`
34 ) 34 )
35 }, 35 },
36 { 36 {
37 path: '/changepassword', 37 path: '/changepassword',
38 meta: {}, 38 meta: {},
39 name: 'changepassword', 39 name: 'changepassword',
40 props: (route) => ({ type: route.query.type }), 40 props: (route) => ({ type: route.query.type }),
41 component: () => 41 component: () =>
42 import ( 42 import (
43 /* webpackChunkName: "routes" */ 43 /* webpackChunkName: "routes" */
44 /* webpackMode: "lazy-once" */ 44 /* webpackMode: "lazy-once" */
45 `@/pages/Authentication/changepassword.vue` 45 `@/pages/Authentication/changepassword.vue`
46 ) 46 )
47 }, 47 },
48 { 48 {
49 path: '/teachers', 49 path: '/teachers',
50 meta: { breadcrumb: false }, 50 meta: { breadcrumb: false },
51 name: 'teachers', 51 name: 'teachers',
52 component: () => 52 component: () =>
53 import ( 53 import (
54 /* webpackChunkName: "routes" */ 54 /* webpackChunkName: "routes" */
55 /* webpackMode: "lazy-once" */ 55 /* webpackMode: "lazy-once" */
56 `@/pages/Teachers/teachers.vue` 56 `@/pages/Teachers/teachers.vue`
57 ) 57 )
58 }, 58 },
59 { 59 {
60 path: '/', 60 path: '/',
61 meta: { 61 meta: {
62 public: true, 62 public: true,
63 }, 63 },
64 name: 'Login', 64 name: 'Login',
65 component: () => 65 component: () =>
66 import ( 66 import (
67 /* webpackChunkName: "routes" */ 67 /* webpackChunkName: "routes" */
68 /* webpackMode: "lazy-once" */ 68 /* webpackMode: "lazy-once" */
69 `@/pages/Authentication/Login.vue` 69 `@/pages/Authentication/Login.vue`
70 ) 70 )
71 }, 71 },
72 { 72 {
73 path: '/forgetpassword', 73 path: '/forgetpassword',
74 meta: { 74 meta: {
75 public: true, 75 public: true,
76 }, 76 },
77 name: 'forgetpassword', 77 name: 'forgetpassword',
78 component: () => 78 component: () =>
79 import ( 79 import (
80 /* webpackChunkName: "routes" */ 80 /* webpackChunkName: "routes" */
81 /* webpackMode: "lazy-once" */ 81 /* webpackMode: "lazy-once" */
82 `@/pages/Authentication/forgetpassword.vue` 82 `@/pages/Authentication/forgetpassword.vue`
83 ) 83 )
84 }, 84 },
85 { 85 {
86 path: '/students', 86 path: '/students',
87 meta: {}, 87 meta: {},
88 name: 'Students', 88 name: 'Students',
89 props: (route) => ({ type: route.query.type }), 89 props: (route) => ({ type: route.query.type }),
90 component: () => 90 component: () =>
91 import ( 91 import (
92 /* webpackChunkName: "routes" */ 92 /* webpackChunkName: "routes" */
93 /* webpackMode: "lazy-once" */ 93 /* webpackMode: "lazy-once" */
94 `@/pages/Students/students.vue` 94 `@/pages/Students/students.vue`
95 ) 95 )
96 }, 96 },
97 { 97 {
98 path: '/addclass', 98 path: '/addclass',
99 meta: {}, 99 meta: {},
100 name: 'addclass', 100 name: 'addclass',
101 props: (route) => ({ type: route.query.type }), 101 props: (route) => ({ type: route.query.type }),
102 component: () => 102 component: () =>
103 import ( 103 import (
104 /* webpackChunkName: "routes" */ 104 /* webpackChunkName: "routes" */
105 /* webpackMode: "lazy-once" */ 105 /* webpackMode: "lazy-once" */
106 `@/pages/Class/addclass.vue` 106 `@/pages/Class/addclass.vue`
107 ) 107 )
108 }, 108 },
109 { 109 {
110 path: '/section', 110 path: '/section',
111 meta: {}, 111 meta: {},
112 name: 'section', 112 name: 'section',
113 props: (route) => ({ type: route.query.type }), 113 props: (route) => ({ type: route.query.type }),
114 component: () => 114 component: () =>
115 import ( 115 import (
116 /* webpackChunkName: "routes" */ 116 /* webpackChunkName: "routes" */
117 /* webpackMode: "lazy-once" */ 117 /* webpackMode: "lazy-once" */
118 `@/pages/Section/section.vue` 118 `@/pages/Section/section.vue`
119 ) 119 )
120 }, 120 },
121 { 121 {
122 path: '/noticeBoard', 122 path: '/noticeBoard',
123 meta: {}, 123 meta: {},
124 name: 'NoticeBoard', 124 name: 'NoticeBoard',
125 props: (route) => ({ type: route.query.type }), 125 props: (route) => ({ type: route.query.type }),
126 component: () => 126 component: () =>
127 import ( 127 import (
128 /* webpackChunkName: "routes" */ 128 /* webpackChunkName: "routes" */
129 /* webpackMode: "lazy-once" */ 129 /* webpackMode: "lazy-once" */
130 `@/pages/NoticeBoard/noticeBoard.vue` 130 `@/pages/NoticeBoard/noticeBoard.vue`
131 ) 131 )
132 }, 132 },
133 { 133 {
134 path: '/news', 134 path: '/news',
135 meta: {}, 135 meta: {},
136 name: 'news', 136 name: 'news',
137 props: (route) => ({ type: route.query.type }), 137 props: (route) => ({ type: route.query.type }),
138 component: () => 138 component: () =>
139 import ( 139 import (
140 /* webpackChunkName: "routes" */ 140 /* webpackChunkName: "routes" */
141 /* webpackMode: "lazy-once" */ 141 /* webpackMode: "lazy-once" */
142 `@/pages/News/news.vue` 142 `@/pages/News/news.vue`
143 ) 143 )
144 }, 144 },
145 // { 145 // {
146 // path: '/reminder', 146 // path: '/reminder',
147 // meta: { }, 147 // meta: { },
148 // name: 'reminder', 148 // name: 'reminder',
149 // props: (route) => ({ type: route.query.type }), 149 // props: (route) => ({ type: route.query.type }),
150 // component: () => import( 150 // component: () => import(
151 // /* webpackChunkName: "routes" */ 151 // /* webpackChunkName: "routes" */
152 // /* webpackMode: "lazy-once" */ 152 // /* webpackMode: "lazy-once" */
153 // `@/pages/Reminder/reminder.vue` 153 // `@/pages/Reminder/reminder.vue`
154 // ) 154 // )
155 // }, 155 // },
156 { 156 {
157 path: '/timeTable', 157 path: '/timeTable',
158 meta: {}, 158 meta: {},
159 name: 'timeTable', 159 name: 'timeTable',
160 props: (route) => ({ type: route.query.type }), 160 props: (route) => ({ type: route.query.type }),
161 component: () => 161 component: () =>
162 import ( 162 import (
163 /* webpackChunkName: "routes" */ 163 /* webpackChunkName: "routes" */
164 /* webpackMode: "lazy-once" */ 164 /* webpackMode: "lazy-once" */
165 `@/pages/TimeTable/timeTable.vue` 165 `@/pages/TimeTable/timeTable.vue`
166 ) 166 )
167 }, 167 },
168 { 168 {
169 path: '/notification', 169 path: '/notification',
170 meta: {}, 170 meta: {},
171 name: 'notification', 171 name: 'notification',
172 props: (route) => ({ type: route.query.type }), 172 props: (route) => ({ type: route.query.type }),
173 component: () => 173 component: () =>
174 import ( 174 import (
175 /* webpackChunkName: "routes" */ 175 /* webpackChunkName: "routes" */
176 /* webpackMode: "lazy-once" */ 176 /* webpackMode: "lazy-once" */
177 `@/pages/Notification/notification.vue` 177 `@/pages/Notification/notification.vue`
178 ) 178 )
179 }, 179 },
180 { 180 {
181 path: '/parents', 181 path: '/parents',
182 meta: {}, 182 meta: {},
183 name: 'parents', 183 name: 'parents',
184 props: (route) => ({ type: route.query.type }), 184 props: (route) => ({ type: route.query.type }),
185 component: () => 185 component: () =>
186 import ( 186 import (
187 /* webpackChunkName: "routes" */ 187 /* webpackChunkName: "routes" */
188 /* webpackMode: "lazy-once" */ 188 /* webpackMode: "lazy-once" */
189 `@/pages/Parent/parents.vue` 189 `@/pages/Parent/parents.vue`
190 ) 190 )
191 }, 191 },
192 { 192 {
193 path: '/subject', 193 path: '/subject',
194 meta: {}, 194 meta: {},
195 name: 'subject', 195 name: 'subject',
196 props: (route) => ({ type: route.query.type }), 196 props: (route) => ({ type: route.query.type }),
197 component: () => 197 component: () =>
198 import ( 198 import (
199 /* webpackChunkName: "routes" */ 199 /* webpackChunkName: "routes" */
200 /* webpackMode: "lazy-once" */ 200 /* webpackMode: "lazy-once" */
201 `@/pages/Subjects/subjects.vue` 201 `@/pages/Subjects/subjects.vue`
202 ) 202 )
203 }, 203 },
204 { 204 {
205 path: '/dashboard', 205 path: '/dashboard',
206 meta: {}, 206 meta: {},
207 name: 'Dashboard', 207 name: 'Dashboard',
208 props: (route) => ({ type: route.query.type }), 208 props: (route) => ({ type: route.query.type }),
209 component: () => 209 component: () =>
210 import ( 210 import (
211 /* webpackChunkName: "routes" */ 211 /* webpackChunkName: "routes" */
212 /* webpackMode: "lazy-once" */ 212 /* webpackMode: "lazy-once" */
213 `@/pages/Dashboard/dashboard.vue` 213 `@/pages/Dashboard/dashboard.vue`
214 ) 214 )
215 }, 215 },
216 { 216 {
217 path: '/socialMedia', 217 path: '/socialMedia',
218 meta: {}, 218 meta: {},
219 name: 'SocialMedia', 219 name: 'SocialMedia',
220 props: (route) => ({ type: route.query.type }), 220 props: (route) => ({ type: route.query.type }),
221 component: () => 221 component: () =>
222 import ( 222 import (
223 /* webpackChunkName: "routes" */ 223 /* webpackChunkName: "routes" */
224 /* webpackMode: "lazy-once" */ 224 /* webpackMode: "lazy-once" */
225 `@/pages/socialMedia/socialMedia.vue` 225 `@/pages/socialMedia/socialMedia.vue`
226 ) 226 )
227 }, 227 },
228 { 228 {
229 path: '/gallery', 229 path: '/gallery',
230 meta: {}, 230 meta: {},
231 name: 'Gallery', 231 name: 'Gallery',
232 props: (route) => ({ type: route.query.type }), 232 props: (route) => ({ type: route.query.type }),
233 component: () => 233 component: () =>
234 import ( 234 import (
235 /* webpackChunkName: "routes" */ 235 /* webpackChunkName: "routes" */
236 /* webpackMode: "lazy-once" */ 236 /* webpackMode: "lazy-once" */
237 `@/pages/Gallery/gallery.vue` 237 `@/pages/Gallery/gallery.vue`
238 ) 238 )
239 }, 239 },
240 { 240 {
241 path: '/event', 241 path: '/event',
242 meta: {}, 242 meta: {},
243 name: 'Event', 243 name: 'Event',
244 props: (route) => ({ type: route.query.type }), 244 props: (route) => ({ type: route.query.type }),
245 component: () => 245 component: () =>
246 import ( 246 import (
247 /* webpackChunkName: "routes" */ 247 /* webpackChunkName: "routes" */
248 /* webpackMode: "lazy-once" */ 248 /* webpackMode: "lazy-once" */
249 `@/pages/Event/event.vue` 249 `@/pages/Event/event.vue`
250 ) 250 )
251 }, 251 },
252 { 252 {
253 path: '/holiday', 253 path: '/holiday',
254 meta: {}, 254 meta: {},
255 name: 'Holiday', 255 name: 'Holiday',
256 props: (route) => ({ type: route.query.type }), 256 props: (route) => ({ type: route.query.type }),
257 component: () => 257 component: () =>
258 import ( 258 import (
259 /* webpackChunkName: "routes" */ 259 /* webpackChunkName: "routes" */
260 /* webpackMode: "lazy-once" */ 260 /* webpackMode: "lazy-once" */
261 `@/pages/Holiday/holiday.vue` 261 `@/pages/Holiday/holiday.vue`
262 ) 262 )
263 }, 263 },
264 { 264 {
265 path: '/user', 265 path: '/user',
266 meta: {}, 266 meta: {},
267 name: 'User', 267 name: 'User',
268 props: (route) => ({ type: route.query.type }), 268 props: (route) => ({ type: route.query.type }),
269 component: () => 269 component: () =>
270 import ( 270 import (
271 /* webpackChunkName: "routes" */ 271 /* webpackChunkName: "routes" */
272 /* webpackMode: "lazy-once" */ 272 /* webpackMode: "lazy-once" */
273 `@/pages/User/user.vue` 273 `@/pages/User/user.vue`
274 ) 274 )
275 }, 275 },
276 { 276 {
277 path: '/AttendenceStudent', 277 path: '/AttendenceStudent',
278 meta: {}, 278 meta: {},
279 name: 'studentAttendence', 279 name: 'studentAttendence',
280 props: (route) => ({ type: route.query.type }), 280 props: (route) => ({ type: route.query.type }),
281 component: () => 281 component: () =>
282 import ( 282 import (
283 /* webpackChunkName: "routes" */ 283 /* webpackChunkName: "routes" */
284 /* webpackMode: "lazy-once" */ 284 /* webpackMode: "lazy-once" */
285 `@/pages/Attendence/studentAttendence.vue` 285 `@/pages/Attendence/studentAttendence.vue`
286 ) 286 )
287 }, 287 },
288 { 288 {
289 path: '/AttendenceTeacher', 289 path: '/AttendenceTeacher',
290 meta: {}, 290 meta: {},
291 name: 'teacherAttendence', 291 name: 'teacherAttendence',
292 props: (route) => ({ type: route.query.type }), 292 props: (route) => ({ type: route.query.type }),
293 component: () => 293 component: () =>
294 import ( 294 import (
295 /* webpackChunkName: "routes" */ 295 /* webpackChunkName: "routes" */
296 /* webpackMode: "lazy-once" */ 296 /* webpackMode: "lazy-once" */
297 `@/pages/Attendence/teacherAttendence.vue` 297 `@/pages/Attendence/teacherAttendence.vue`
298 ) 298 )
299 }, 299 },
300 { 300 {
301 path: '/AttendenceUser', 301 path: '/AttendenceUser',
302 meta: {}, 302 meta: {},
303 name: 'userAttendence', 303 name: 'userAttendence',
304 props: (route) => ({ type: route.query.type }), 304 props: (route) => ({ type: route.query.type }),
305 component: () => 305 component: () =>
306 import ( 306 import (
307 /* webpackChunkName: "routes" */ 307 /* webpackChunkName: "routes" */
308 /* webpackMode: "lazy-once" */ 308 /* webpackMode: "lazy-once" */
309 `@/pages/Attendence/userAttendence.vue` 309 `@/pages/Attendence/userAttendence.vue`
310 ) 310 )
311 }, 311 },
312 { 312 {
313 path: '/feeTypes', 313 path: '/feeTypes',
314 meta: {}, 314 meta: {},
315 name: 'feeTypes', 315 name: 'feeTypes',
316 props: (route) => ({ type: route.query.type }), 316 props: (route) => ({ type: route.query.type }),
317 component: () => 317 component: () =>
318 import ( 318 import (
319 /* webpackChunkName: "routes" */ 319 /* webpackChunkName: "routes" */
320 /* webpackMode: "lazy-once" */ 320 /* webpackMode: "lazy-once" */
321 `@/pages/Account/feeTypes.vue` 321 `@/pages/Account/feeTypes.vue`
322 ) 322 )
323 }, 323 },
324 { 324 {
325 path: '/invoice', 325 path: '/invoice',
326 meta: {}, 326 meta: {},
327 name: 'Invoice', 327 name: 'Invoice',
328 props: (route) => ({ type: route.query.type }), 328 props: (route) => ({ type: route.query.type }),
329 component: () => 329 component: () =>
330 import ( 330 import (
331 /* webpackChunkName: "routes" */ 331 /* webpackChunkName: "routes" */
332 /* webpackMode: "lazy-once" */ 332 /* webpackMode: "lazy-once" */
333 `@/pages/Account/invoice.vue` 333 `@/pages/Account/invoice.vue`
334 ) 334 )
335 }, 335 },
336 { 336 {
337 path: '/paymentHistory', 337 path: '/paymentHistory',
338 meta: {}, 338 meta: {},
339 name: 'paymentHistory', 339 name: 'paymentHistory',
340 props: (route) => ({ type: route.query.type }), 340 props: (route) => ({ type: route.query.type }),
341 component: () => 341 component: () =>
342 import ( 342 import (
343 /* webpackChunkName: "routes" */ 343 /* webpackChunkName: "routes" */
344 /* webpackMode: "lazy-once" */ 344 /* webpackMode: "lazy-once" */
345 `@/pages/Account/paymentHistory.vue` 345 `@/pages/Account/paymentHistory.vue`
346 ) 346 )
347 }, 347 },
348 { 348 {
349 path: '/expense', 349 path: '/expense',
350 meta: {}, 350 meta: {},
351 name: 'Expense', 351 name: 'Expense',
352 props: (route) => ({ type: route.query.type }), 352 props: (route) => ({ type: route.query.type }),
353 component: () => 353 component: () =>
354 import ( 354 import (
355 /* webpackChunkName: "routes" */ 355 /* webpackChunkName: "routes" */
356 /* webpackMode: "lazy-once" */ 356 /* webpackMode: "lazy-once" */
357 `@/pages/Account/expense.vue` 357 `@/pages/Account/expense.vue`
358 ) 358 )
359 }, 359 },
360 { 360 {
361 path: '/income', 361 path: '/income',
362 meta: {}, 362 meta: {},
363 name: 'Income', 363 name: 'Income',
364 props: (route) => ({ type: route.query.type }), 364 props: (route) => ({ type: route.query.type }),
365 component: () => 365 component: () =>
366 import ( 366 import (
367 /* webpackChunkName: "routes" */ 367 /* webpackChunkName: "routes" */
368 /* webpackMode: "lazy-once" */ 368 /* webpackMode: "lazy-once" */
369 `@/pages/Account/income.vue` 369 `@/pages/Account/income.vue`
370 ) 370 )
371 }, 371 },
372 { 372 {
373 path: '/libraryMember', 373 path: '/libraryMember',
374 meta: {}, 374 meta: {},
375 name: 'libraryMember', 375 name: 'libraryMember',
376 props: (route) => ({ type: route.query.type }), 376 props: (route) => ({ type: route.query.type }),
377 component: () => 377 component: () =>
378 import ( 378 import (
379 /* webpackChunkName: "routes" */ 379 /* webpackChunkName: "routes" */
380 /* webpackMode: "lazy-once" */ 380 /* webpackMode: "lazy-once" */
381 `@/pages/Library/member.vue` 381 `@/pages/Library/member.vue`
382 ) 382 )
383 }, 383 },
384 { 384 {
385 path: '/books', 385 path: '/books',
386 meta: {}, 386 meta: {},
387 name: 'Books', 387 name: 'Books',
388 props: (route) => ({ type: route.query.type }), 388 props: (route) => ({ type: route.query.type }),
389 component: () => 389 component: () =>
390 import ( 390 import (
391 /* webpackChunkName: "routes" */ 391 /* webpackChunkName: "routes" */
392 /* webpackMode: "lazy-once" */ 392 /* webpackMode: "lazy-once" */
393 `@/pages/Library/books.vue` 393 `@/pages/Library/books.vue`
394 ) 394 )
395 }, 395 },
396 { 396 {
397 path: '/issue', 397 path: '/issue',
398 meta: {}, 398 meta: {},
399 name: 'Issue', 399 name: 'Issue',
400 props: (route) => ({ type: route.query.type }), 400 props: (route) => ({ type: route.query.type }),
401 component: () => 401 component: () =>
402 import ( 402 import (
403 /* webpackChunkName: "routes" */ 403 /* webpackChunkName: "routes" */
404 /* webpackMode: "lazy-once" */ 404 /* webpackMode: "lazy-once" */
405 `@/pages/Library/issue.vue` 405 `@/pages/Library/issue.vue`
406 ) 406 )
407 }, 407 },
408 { 408 {
409 path: '/e-books', 409 path: '/e-books',
410 meta: {}, 410 meta: {},
411 name: 'eBooks', 411 name: 'eBooks',
412 props: (route) => ({ type: route.query.type }), 412 props: (route) => ({ type: route.query.type }),
413 component: () => 413 component: () =>
414 import ( 414 import (
415 /* webpackChunkName: "routes" */ 415 /* webpackChunkName: "routes" */
416 /* webpackMode: "lazy-once" */ 416 /* webpackMode: "lazy-once" */
417 `@/pages/Library/eBook.vue` 417 `@/pages/Library/eBook.vue`
418 ) 418 )
419 }, 419 },
420 { 420 {
421 path: '/invoiceId/:invoiceid', 421 path: '/invoiceId/:invoiceid',
422 meta: {}, 422 meta: {},
423 name: 'EditInvoice', 423 name: 'EditInvoice',
424 // props: (route) => ({ type: route.query.type }), 424 // props: (route) => ({ type: route.query.type }),
425 component: () => 425 component: () =>
426 import ( 426 import (
427 /* webpackChunkName: "routes" */ 427 /* webpackChunkName: "routes" */
428 /* webpackMode: "lazy-once" */ 428 /* webpackMode: "lazy-once" */
429 `@/pages/Account/editInvoice.vue` 429 `@/pages/Account/editInvoice.vue`
430 ) 430 )
431 }, 431 },
432 { 432 {
433 path: '/StudentsAttendence/:id', 433 path: '/StudentsAttendence/:id',
434 meta: {}, 434 meta: {},
435 name: 'ViewStudentsAttendence', 435 name: 'ViewStudentsAttendence',
436 props: (route) => ({ type: route.query.type }), 436 props: (route) => ({ type: route.query.type }),
437 component: () => 437 component: () =>
438 import ( 438 import (
439 /* webpackChunkName: "routes" */ 439 /* webpackChunkName: "routes" */
440 /* webpackMode: "lazy-once" */ 440 /* webpackMode: "lazy-once" */
441 `@/pages/Attendence/viewStudentsAttendence.vue` 441 `@/pages/Attendence/viewStudentsAttendence.vue`
442 ) 442 )
443 }, 443 },
444 { 444 {
445 path: '/viewInvoice/:viewInvoiceId', 445 path: '/viewInvoice/:viewInvoiceId',
446 meta: {}, 446 meta: {},
447 name: 'ViewInvoice', 447 name: 'ViewInvoice',
448 props: (route) => ({ type: route.query.type }), 448 props: (route) => ({ type: route.query.type }),
449 component: () => 449 component: () =>
450 import ( 450 import (
451 /* webpackChunkName: "routes" */ 451 /* webpackChunkName: "routes" */
452 /* webpackMode: "lazy-once" */ 452 /* webpackMode: "lazy-once" */
453 `@/pages/Account/viewInvoice.vue` 453 `@/pages/Account/viewInvoice.vue`
454 ) 454 )
455 }, 455 },
456 { 456 {
457 path: '/exam', 457 path: '/exam',
458 meta: {}, 458 meta: {},
459 name: 'Exam', 459 name: 'Exam',
460 props: (route) => ({ type: route.query.type }), 460 props: (route) => ({ type: route.query.type }),
461 component: () => 461 component: () =>
462 import ( 462 import (
463 /* webpackChunkName: "routes" */ 463 /* webpackChunkName: "routes" */
464 /* webpackMode: "lazy-once" */ 464 /* webpackMode: "lazy-once" */
465 `@/pages/Exam/exam.vue` 465 `@/pages/Exam/exam.vue`
466 ) 466 )
467 }, 467 },
468 { 468 {
469 path: '/grade', 469 path: '/grade',
470 meta: {}, 470 meta: {},
471 name: 'Grade', 471 name: 'Grade',
472 props: (route) => ({ type: route.query.type }), 472 props: (route) => ({ type: route.query.type }),
473 component: () => 473 component: () =>
474 import ( 474 import (
475 /* webpackChunkName: "routes" */ 475 /* webpackChunkName: "routes" */
476 /* webpackMode: "lazy-once" */ 476 /* webpackMode: "lazy-once" */
477 `@/pages/Exam/grade.vue` 477 `@/pages/Exam/grade.vue`
478 ) 478 )
479 }, 479 },
480 { 480 {
481 path: '/examSchedule', 481 path: '/examSchedule',
482 meta: {}, 482 meta: {},
483 name: 'ExamSchedule', 483 name: 'ExamSchedule',
484 props: (route) => ({ type: route.query.type }), 484 props: (route) => ({ type: route.query.type }),
485 component: () => 485 component: () =>
486 import ( 486 import (
487 /* webpackChunkName: "routes" */ 487 /* webpackChunkName: "routes" */
488 /* webpackMode: "lazy-once" */ 488 /* webpackMode: "lazy-once" */
489 `@/pages/Exam/examSchedule.vue` 489 `@/pages/Exam/examSchedule.vue`
490 ) 490 )
491 }, 491 },
492 {
493 path: '/mark',
494 meta: {},
495 name: 'Mark',
496 props: (route) => ({ type: route.query.type }),
497 component: () =>
498 import (
499 /* webpackChunkName: "routes" */
500 /* webpackMode: "lazy-once" */
501 `@/pages/Mark/mark.vue`
502 )
503 },
504 {
505 path: '/viewMark/:markId',
506 meta: {},
507 name: 'viewMark',
508 props: (route) => ({ type: route.query.type }),
509 component: () =>
510 import (
511 /* webpackChunkName: "routes" */
512 /* webpackMode: "lazy-once" */
513 `@/pages/Mark/viewMark.vue`
514 )
515 },
516 {
517 path: '/markDistribution',
518 meta: {},
519 name: 'markDistribution',
520 props: (route) => ({ type: route.query.type }),
521 component: () =>
522 import (
523 /* webpackChunkName: "routes" */
524 /* webpackMode: "lazy-once" */
525 `@/pages/Mark/markDistribution.vue`
526 )
527 },
528 {
529 path: '/promotion',
530 meta: {},
531 name: 'Promotion',
532 props: (route) => ({ type: route.query.type }),
533 component: () =>
534 import (
535 /* webpackChunkName: "routes" */
536 /* webpackMode: "lazy-once" */
537 `@/pages/Mark/promotion.vue`
538 )
539 },
540 {
541 path: '/academicYear',
542 meta: {},
543 name: 'academicYear',
544 props: (route) => ({ type: route.query.type }),
545 component: () =>
546 import (
547 /* webpackChunkName: "routes" */
548 /* webpackMode: "lazy-once" */
549 `@/pages/Administrator/academicYear.vue`
550 )
551 },
552 {
553 path: '/systemAdmin',
554 meta: {},
555 name: 'systemAdmin',
556 props: (route) => ({ type: route.query.type }),
557 component: () =>
558 import (
559 /* webpackChunkName: "routes" */
560 /* webpackMode: "lazy-once" */
561 `@/pages/Administrator/systemAdmin.vue`
562 )
563 },
564 {
565 path: '/resetPassword',
566 meta: {},
567 name: 'resetPassword',
568 props: (route) => ({ type: route.query.type }),
569 component: () =>
570 import (
571 /* webpackChunkName: "routes" */
572 /* webpackMode: "lazy-once" */
573 `@/pages/Administrator/resetPassword.vue`
574 )
575 },
576 {
577 path: '/role',
578 meta: {},
579 name: 'Role',
580 props: (route) => ({ type: route.query.type }),
581 component: () =>
582 import (
583 /* webpackChunkName: "routes" */
584 /* webpackMode: "lazy-once" */
585 `@/pages/Administrator/role.vue`
586 )
587 },
588 {
589 path: '/studentReport',
590 meta: {},
591 name: 'studentReport',
592 props: (route) => ({ type: route.query.type }),
593 component: () =>
594 import (
595 /* webpackChunkName: "routes" */
596 /* webpackMode: "lazy-once" */
597 `@/pages/Report/studentReport.vue`
598 )
599 },
600 {
601 path: '/markSheetReport',
602 meta: {},
603 name: 'markSheetReport',
604 props: (route) => ({ type: route.query.type }),
605 component: () =>
606 import (
607 /* webpackChunkName: "routes" */
608 /* webpackMode: "lazy-once" */
609 `@/pages/Report/markSheetReport.vue`
610 )
611 }
492 ]; 612 ];
src/script/country.js
Diff comments   View file @0065443
File was created 1 export default () => {
2
3 const countryList = [
4 "Afghanistan",
5 "Albania",
6 "Algeria",
7 "Andorra",
8 "Angola",
9 "Anguilla",
10 "Antigua &amp; Barbuda",
11 "Argentina",
12 "Armenia",
13 "Aruba",
14 "Australia",
15 "Austria",
16 "Azerbaijan",
17 "Bahamas",
18 "Bahrain",
19 "Bangladesh",
20 "Barbados",
21 "Belarus",
22 "Belgium",
23 "Belize",
24 "Benin",
25 "Bermuda",
26 "Bhutan",
27 "Bolivia",
28 "Bosnia &amp; Herzegovina",
29 "Botswana",
30 "Brazil",
31 "British Virgin Islands",
32 "Brunei",
33 "Bulgaria",
34 "Burkina Faso",
35 "Burundi",
36 "Cambodia",
37 "Cameroon",
38 "Cape Verde",
39 "Cayman Islands",
40 "Chad",
41 "Chile",
42 "China",
43 "Colombia",
44 "Congo",
45 "Cook Islands",
46 "Costa Rica",
47 "Cote D Ivoire",
48 "Croatia",
49 "Cruise Ship",
50 "Cuba",
51 "Cyprus",
52 "Czech Republic",
53 "Denmark",
54 "Djibouti",
55 "Dominica",
56 "Dominican Republic",
57 "Ecuador",
58 "Egypt",
59 "El Salvador",
60 "Equatorial Guinea",
61 "Estonia",
62 "Ethiopia",
63 "Falkland Islands",
64 "Faroe Islands",
65 "Fiji",
66 "Finland",
67 "France",
68 "French Polynesia",
69 "French West Indies",
70 "Gabon",
71 "Gambia",
72 "Georgia",
73 "Germany",
74 "Ghana",
75 "Gibraltar",
76 "Greece",
77 "Greenland",
78 "Grenada",
79 "Guam",
80 "Guatemala",
81 "Guernsey",
82 "Guinea",
83 "Guinea Bissau",
84 "Guyana",
85 "Haiti",
86 "Honduras",
87 "Hong Kong",
88 "Hungary",
89 "Iceland",
90 "India",
91 "Indonesia",
92 "Iran",
93 "Iraq",
94 "Ireland",
95 "Isle of Man",
96 "Israel",
97 "Italy",
98 "Jamaica",
99 "Japan",
100 "Jersey",
101 "Jordan",
102 "Kazakhstan",
103 "Kenya",
104 "Kuwait",
105 "Kyrgyz Republic",
106 "Laos",
107 "Latvia",
108 "Lebanon",
109 "Lesotho",
110 "Liberia",
111 "Libya",
112 "Liechtenstein",
113 "Lithuania",
114 "Luxembourg",
115 "Macau",
116 "Macedonia",
117 "Madagascar",
118 "Malawi",
119 "Malaysia",
120 "Maldives",
121 "Mali",
122 "Malta",
123 "Mauritania",
124 "Mauritius",
125 "Mexico",
126 "Moldova",
127 "Monaco",
128 "Mongolia",
129 "Montenegro",
130 "Montserrat",
131 "Morocco",
132 "Mozambique",
133 "Namibia",
134 "Nepal",
135 "Netherlands",
136 "Netherlands Antilles",
137 "New Caledonia",
138 "New Zealand",
139 "Nicaragua",
140 "Niger",
141 "Nigeria",
142 "Norway",
143 "Oman",
144 "Pakistan",
145 "Palestine",
146 "Panama",
147 "Papua New Guinea",
148 "Paraguay",
149 "Peru",
150 "Philippines",
151 "Poland",
152 "Portugal",
153 "Puerto Rico",
154 "Qatar",
155 "Reunion",
156 "Romania",
157 "Russia",
158 "Rwanda",
159 "Saint Pierre &amp; Miquelon",
160 "Samoa",
161 "San Marino",
162 "Satellite",
163 "Saudi Arabia",
164 "Senegal",
165 "Serbia",
166 "Seychelles",
167 "Sierra Leone",
168 "Singapore",
169 "Slovakia",
170 "Slovenia",
171 "South Africa",
172 "South Korea",
173 "Spain",
174 "Sri Lanka",
175 "St Kitts &amp; Nevis",
176 "St Lucia",
177 "St Vincent",
178 "St. Lucia",
179 "Sudan",
180 "Suriname",
181 "Swaziland",
182 "Sweden",
183 "Switzerland",
184 "Syria",
185 "Taiwan",
186 "Tajikistan",
187 "Tanzania",
188 "Thailand",
189 "Timor L'Este",
190 "Togo",
191 "Tonga",
192 "Trinidad &amp; Tobago",
193 "Tunisia",
194 "Turkey",
195 "Turkmenistan",
196 "Turks &amp; Caicos",
197 "Uganda",
198 "Ukraine",
199 "United Arab Emirates",
200 "United Kingdom",
201 "United States",
202 "Uruguay",
203 "Uzbekistan",
204 "Venezuela",
205 "Vietnam",
206 "Virgin Islands (US)",
207 "Yemen",
208 "Zambia",
209 "Zimbabwe"
210 ]
211 return countryList;
212 }
static/schoolIcons/administrator.png
Diff comments   View file @0065443

20.6 KB
static/schoolIcons/marks.png
Diff comments   View file @0065443

16 KB
static/schoolIcons/reports.png
Diff comments   View file @0065443

17.3 KB
static/schoolIcons/settings.png
Diff comments   View file @0065443

16.5 KB