Commit 4dd422bef9b96d013b9e8fa5f17e0178029d8da8
1 parent
4da08fe72f
Exists in
master
and in
1 other branch
change ui of card and button
Showing
46 changed files
with
198 additions
and
196 deletions
Show diff stats
src/pages/Academic/assignment.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Assignment ****** --> | 3 | <!-- ****** EDIT Assignment ****** --> |
| 4 | <v-dialog v-model="editAssignmentDialog" max-width="400px" persistent> | 4 | <v-dialog v-model="editAssignmentDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Assignment</label> | 8 | <label class="title text-xs-center">Edit Assignment</label> |
| 9 | <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation> | 13 | <v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 class="pt-4 subheading"> | 15 | <v-flex xs4 class="pt-4 subheading"> |
| 16 | <label class="right">Title:</label> | 16 | <label class="right">Title:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 class="ml-3"> | 18 | <v-flex xs8 class="ml-3"> |
| 19 | <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field> | 19 | <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | </v-layout> | 21 | </v-layout> |
| 22 | <v-layout> | 22 | <v-layout> |
| 23 | <v-flex xs4 class="pt-4 subheading"> | 23 | <v-flex xs4 class="pt-4 subheading"> |
| 24 | <label class="right">Description:</label> | 24 | <label class="right">Description:</label> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | <v-flex xs8 class="ml-3"> | 26 | <v-flex xs8 class="ml-3"> |
| 27 | <v-text-field | 27 | <v-text-field |
| 28 | v-model="editedItem.description" | 28 | v-model="editedItem.description" |
| 29 | type="text" | 29 | type="text" |
| 30 | :rules="deadlineRules" | 30 | :rules="deadlineRules" |
| 31 | required | 31 | required |
| 32 | ></v-text-field> | 32 | ></v-text-field> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | </v-layout> | 34 | </v-layout> |
| 35 | <v-layout> | 35 | <v-layout> |
| 36 | <v-flex xs4 class="pt-4 subheading"> | 36 | <v-flex xs4 class="pt-4 subheading"> |
| 37 | <label class="right">Deadline:</label> | 37 | <label class="right">Deadline:</label> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | <v-flex xs8 class="ml-3"> | 39 | <v-flex xs8 class="ml-3"> |
| 40 | <v-menu | 40 | <v-menu |
| 41 | ref="menu1" | 41 | ref="menu1" |
| 42 | :close-on-content-click="false" | 42 | :close-on-content-click="false" |
| 43 | v-model="menu1" | 43 | v-model="menu1" |
| 44 | :nudge-right="40" | 44 | :nudge-right="40" |
| 45 | :return-value.sync="menu1" | 45 | :return-value.sync="menu1" |
| 46 | lazy | 46 | lazy |
| 47 | transition="scale-transition" | 47 | transition="scale-transition" |
| 48 | offset-y | 48 | offset-y |
| 49 | full-width | 49 | full-width |
| 50 | min-width="290px" | 50 | min-width="290px" |
| 51 | > | 51 | > |
| 52 | <v-text-field | 52 | <v-text-field |
| 53 | slot="activator" | 53 | slot="activator" |
| 54 | v-model="editedItem.deadline" | 54 | v-model="editedItem.deadline" |
| 55 | placeholder="Select Date" | 55 | placeholder="Select Date" |
| 56 | :rules="deadlineRules" | 56 | :rules="deadlineRules" |
| 57 | append-icon="event" | 57 | append-icon="event" |
| 58 | required | 58 | required |
| 59 | ></v-text-field> | 59 | ></v-text-field> |
| 60 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> | 60 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> |
| 61 | </v-menu> | 61 | </v-menu> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout> | 63 | </v-layout> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-flex xs4 class="pt-4 subheading"> | 65 | <v-flex xs4 class="pt-4 subheading"> |
| 66 | <label class="right">Class:</label> | 66 | <label class="right">Class:</label> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex xs8 class="ml-3"> | 68 | <v-flex xs8 class="ml-3"> |
| 69 | <v-select | 69 | <v-select |
| 70 | :items="classList" | 70 | :items="classList" |
| 71 | item-text="classNum" | 71 | item-text="classNum" |
| 72 | item-value="_id" | 72 | item-value="_id" |
| 73 | :rules="classRules" | 73 | :rules="classRules" |
| 74 | v-model="editedItem.classId" | 74 | v-model="editedItem.classId" |
| 75 | @change="getSections(editedItem.classId)" | 75 | @change="getSections(editedItem.classId)" |
| 76 | required | 76 | required |
| 77 | ></v-select> | 77 | ></v-select> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | </v-layout> | 79 | </v-layout> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs4 class="pt-4 subheading"> | 81 | <v-flex xs4 class="pt-4 subheading"> |
| 82 | <label class="right">Section:</label> | 82 | <label class="right">Section:</label> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | <v-flex xs8 class="ml-3"> | 84 | <v-flex xs8 class="ml-3"> |
| 85 | <v-select | 85 | <v-select |
| 86 | :items="addSection" | 86 | :items="addSection" |
| 87 | item-text="name" | 87 | item-text="name" |
| 88 | item-value="_id" | 88 | item-value="_id" |
| 89 | v-model="editedItem.sectionId" | 89 | v-model="editedItem.sectionId" |
| 90 | :rules="sectionRules" | 90 | :rules="sectionRules" |
| 91 | @change="getClassSubject(editedItem.classId)" | 91 | @change="getClassSubject(editedItem.classId)" |
| 92 | required | 92 | required |
| 93 | ></v-select> | 93 | ></v-select> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | <v-layout> | 96 | <v-layout> |
| 97 | <v-flex xs4 class="pt-4 subheading"> | 97 | <v-flex xs4 class="pt-4 subheading"> |
| 98 | <label class="right">Subject</label> | 98 | <label class="right">Subject</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="subjectList.subjects" | 102 | :items="subjectList.subjects" |
| 103 | v-model="editedItem.subjectName" | 103 | v-model="editedItem.subjectName" |
| 104 | item-text="subjectName" | 104 | item-text="subjectName" |
| 105 | item-value="_id" | 105 | item-value="_id" |
| 106 | :rules="subjectRules" | 106 | :rules="subjectRules" |
| 107 | required | 107 | required |
| 108 | ></v-select> | 108 | ></v-select> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs4 class="pt-4 subheading"> | 112 | <v-flex xs4 class="pt-4 subheading"> |
| 113 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> | 113 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> |
| 114 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label> | 114 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs8 sm8 class="ml-3"> | 116 | <v-flex xs8 sm8 class="ml-3"> |
| 117 | <v-text-field | 117 | <v-text-field |
| 118 | label="Select File" | 118 | label="Select File" |
| 119 | @click="pickFile" | 119 | @click="pickFile" |
| 120 | v-model="imageName" | 120 | v-model="imageName" |
| 121 | append-icon="attach_file" | 121 | append-icon="attach_file" |
| 122 | ></v-text-field> | 122 | ></v-text-field> |
| 123 | <input | 123 | <input |
| 124 | type="file" | 124 | type="file" |
| 125 | style="display:none" | 125 | style="display:none" |
| 126 | ref="image" | 126 | ref="image" |
| 127 | accept="image/*" | 127 | accept="image/*" |
| 128 | @change="onFilePicked" | 128 | @change="onFilePicked" |
| 129 | /> | 129 | /> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-flex xs12 sm12> | 132 | <v-flex xs12 sm12> |
| 133 | <v-card-actions> | 133 | <v-card-actions> |
| 134 | <v-spacer></v-spacer> | 134 | <v-spacer></v-spacer> |
| 135 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 135 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 136 | </v-card-actions> | 136 | </v-card-actions> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-form> | 138 | </v-form> |
| 139 | </v-container> | 139 | </v-container> |
| 140 | </v-card> | 140 | </v-card> |
| 141 | </v-dialog> | 141 | </v-dialog> |
| 142 | 142 | ||
| 143 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 143 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 144 | <v-dialog v-model="viewAssignmentDialog" max-width="500px" persistent> | 144 | <v-dialog v-model="viewAssignmentDialog" max-width="500px" persistent> |
| 145 | <v-card flat class="card-style pa-3" dark> | 145 | <v-card flat class="Card-style pa-3"> |
| 146 | <v-layout> | 146 | <v-layout> |
| 147 | <v-flex xs12> | 147 | <v-flex xs12> |
| 148 | <label class="title text-xs-center">View Attendence</label> | 148 | <label class="title text-xs-center">View Attendence</label> |
| 149 | <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon> | 149 | <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <v-card-text> | 152 | <v-card-text> |
| 153 | <v-container grid-list-md> | 153 | <v-container grid-list-md> |
| 154 | <v-layout wrap> | 154 | <v-layout wrap> |
| 155 | <v-flex> | 155 | <v-flex> |
| 156 | <v-layout> | 156 | <v-layout> |
| 157 | <v-flex xs6 sm4> | 157 | <v-flex xs6 sm4> |
| 158 | <h5 class="right my-1"> | 158 | <h5 class="right my-1"> |
| 159 | <b>Title:</b> | 159 | <b>Title:</b> |
| 160 | </h5> | 160 | </h5> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | <v-flex sm8 xs6> | 162 | <v-flex sm8 xs6> |
| 163 | <h5 class="my-1">{{ editedItem.title }}</h5> | 163 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | </v-layout> | 165 | </v-layout> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs6 sm4> | 167 | <v-flex xs6 sm4> |
| 168 | <h5 class="right my-1"> | 168 | <h5 class="right my-1"> |
| 169 | <b>Description:</b> | 169 | <b>Description:</b> |
| 170 | </h5> | 170 | </h5> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | <v-flex sm8 xs6> | 172 | <v-flex sm8 xs6> |
| 173 | <h5 class="my-1">{{ editedItem.description }}</h5> | 173 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | <v-layout> | 176 | <v-layout> |
| 177 | <v-flex xs6 sm4> | 177 | <v-flex xs6 sm4> |
| 178 | <h5 class="right my-1"> | 178 | <h5 class="right my-1"> |
| 179 | <b>Deadline:</b> | 179 | <b>Deadline:</b> |
| 180 | </h5> | 180 | </h5> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | <v-flex sm8 xs6> | 182 | <v-flex sm8 xs6> |
| 183 | <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5> | 183 | <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-layout> | 185 | </v-layout> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-container> | 188 | </v-container> |
| 189 | </v-card-text> | 189 | </v-card-text> |
| 190 | </v-card> | 190 | </v-card> |
| 191 | </v-dialog> | 191 | </v-dialog> |
| 192 | 192 | ||
| 193 | <!-- ****** EXISTING ASSIGNMENT TABLE ****** --> | 193 | <!-- ****** EXISTING ASSIGNMENT TABLE ****** --> |
| 194 | <v-toolbar color="transparent" flat> | 194 | <v-toolbar color="transparent" flat> |
| 195 | <v-btn | 195 | <v-btn |
| 196 | fab | 196 | fab |
| 197 | dark | 197 | dark |
| 198 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 198 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 199 | small | 199 | small |
| 200 | @click="addAssignmentDialog = true" | 200 | @click="addAssignmentDialog = true" |
| 201 | > | 201 | > |
| 202 | <v-icon dark>add</v-icon> | 202 | <v-icon dark>add</v-icon> |
| 203 | </v-btn> | 203 | </v-btn> |
| 204 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 204 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 205 | <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true"> | 205 | <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true"> |
| 206 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment | 206 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment |
| 207 | </v-btn> | 207 | </v-btn> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-spacer></v-spacer> | 209 | <v-spacer></v-spacer> |
| 210 | <v-flex lg2 md2 xs12 v-show="show"> | 210 | <v-flex lg2 md2 xs12 v-show="show"> |
| 211 | <v-select | 211 | <v-select |
| 212 | :items="classList" | 212 | :items="classList" |
| 213 | placeholder="Select Your Class" | 213 | placeholder="Select Your Class" |
| 214 | v-model="showAssignment.classId" | 214 | v-model="showAssignment.classId" |
| 215 | item-text="classNum" | 215 | item-text="classNum" |
| 216 | item-value="_id" | 216 | item-value="_id" |
| 217 | name="Select Class" | 217 | name="Select Class" |
| 218 | :rules="classRules" | 218 | :rules="classRules" |
| 219 | @change="getAssignmentList()" | 219 | @change="getAssignmentList()" |
| 220 | class="pl-2" | 220 | class="pl-2" |
| 221 | required | 221 | required |
| 222 | ></v-select> | 222 | ></v-select> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-card-title class="body-1" v-show="show"> | 224 | <v-card-title class="body-1" v-show="show"> |
| 225 | <v-btn icon flat @click="displaySearch"> | 225 | <v-btn icon flat @click="displaySearch"> |
| 226 | <v-avatar size="27"> | 226 | <v-avatar size="27"> |
| 227 | <img src="/static/icon/search.png" alt="icon" /> | 227 | <img src="/static/icon/search.png" alt="icon" /> |
| 228 | </v-avatar> | 228 | </v-avatar> |
| 229 | </v-btn> | 229 | </v-btn> |
| 230 | </v-card-title> | 230 | </v-card-title> |
| 231 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 231 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 232 | <v-layout> | 232 | <v-layout> |
| 233 | <v-text-field | 233 | <v-text-field |
| 234 | v-model="search" | 234 | v-model="search" |
| 235 | placeholder="Search" | 235 | placeholder="Search" |
| 236 | prepend-inner-icon="search" | 236 | prepend-inner-icon="search" |
| 237 | color="primary" | 237 | color="primary" |
| 238 | autofocus | 238 | autofocus |
| 239 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 239 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 240 | ></v-text-field> | 240 | ></v-text-field> |
| 241 | <v-icon @click="closeSearch" color="error">close</v-icon> | 241 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | </v-toolbar> | 244 | </v-toolbar> |
| 245 | <v-data-table | 245 | <v-data-table |
| 246 | :headers="headers" | 246 | :headers="headers" |
| 247 | :items="assignmentData" | 247 | :items="assignmentData" |
| 248 | :pagination.sync="pagination" | 248 | :pagination.sync="pagination" |
| 249 | :search="search" | 249 | :search="search" |
| 250 | > | 250 | > |
| 251 | <template slot="items" slot-scope="props"> | 251 | <template slot="items" slot-scope="props"> |
| 252 | <tr class="tr"> | 252 | <tr class="tr"> |
| 253 | <td class="td-row td">{{ props.index + 1 }}</td> | 253 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 254 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> | 254 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> |
| 255 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> | 255 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> |
| 256 | <td class="text-xs-center td td-row">{{ props.item.deadline }}</td> | 256 | <td class="text-xs-center td td-row">{{ props.item.deadline }}</td> |
| 257 | <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td> | 257 | <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td> |
| 258 | <td | 258 | <td |
| 259 | class="text-xs-center td td-row" | 259 | class="text-xs-center td td-row" |
| 260 | v-if="props.item.teacherId" | 260 | v-if="props.item.teacherId" |
| 261 | >{{ props.item.teacherId.name }}</td> | 261 | >{{ props.item.teacherId.name }}</td> |
| 262 | <td | 262 | <td |
| 263 | class="text-xs-center td td-row" | 263 | class="text-xs-center td td-row" |
| 264 | v-if="!props.item.teacherId" | 264 | v-if="!props.item.teacherId" |
| 265 | >{{ props.item.schoolId.name }}</td> | 265 | >{{ props.item.schoolId.name }}</td> |
| 266 | <td class="text-xs-center td td-row"> | 266 | <td class="text-xs-center td td-row"> |
| 267 | <a | 267 | <a |
| 268 | class="hover" | 268 | class="hover" |
| 269 | :href="props.item.file" | 269 | :href="props.item.file" |
| 270 | target="_blank" | 270 | target="_blank" |
| 271 | style="text-decoration: none!important; color: grey" | 271 | style="text-decoration: none!important; color: grey" |
| 272 | @click="generatePDF2Canvas(props.item)" | 272 | @click="generatePDF2Canvas(props.item)" |
| 273 | :loading="loadingPdf" | 273 | :loading="loadingPdf" |
| 274 | > | 274 | > |
| 275 | <!-- <span> --> | 275 | <!-- <span> --> |
| 276 | <h5>{{props.item.fileName}}</h5> | 276 | <h5>{{props.item.fileName}}</h5> |
| 277 | <!-- </span> --> | 277 | <!-- </span> --> |
| 278 | </a> | 278 | </a> |
| 279 | </td> | 279 | </td> |
| 280 | <td class="text-xs-center td td-row"> | 280 | <td class="text-xs-center td td-row"> |
| 281 | <span> | 281 | <span> |
| 282 | <v-tooltip top> | 282 | <v-tooltip top> |
| 283 | <img | 283 | <img |
| 284 | slot="activator" | 284 | slot="activator" |
| 285 | style="cursor:pointer; width:25px; height:25px; " | 285 | style="cursor:pointer; width:25px; height:25px; " |
| 286 | class="mr-3" | 286 | class="mr-3" |
| 287 | @click="profile(props.item)" | 287 | @click="profile(props.item)" |
| 288 | src="/static/icon/view.png" | 288 | src="/static/icon/view.png" |
| 289 | /> | 289 | /> |
| 290 | <span>View</span> | 290 | <span>View</span> |
| 291 | </v-tooltip> | 291 | </v-tooltip> |
| 292 | <v-tooltip top> | 292 | <v-tooltip top> |
| 293 | <img | 293 | <img |
| 294 | slot="activator" | 294 | slot="activator" |
| 295 | style="cursor:pointer; width:20px; height:18px; " | 295 | style="cursor:pointer; width:20px; height:18px; " |
| 296 | class="mr-3" | 296 | class="mr-3" |
| 297 | @click="editItem(props.item)" | 297 | @click="editItem(props.item)" |
| 298 | src="/static/icon/edit.png" | 298 | src="/static/icon/edit.png" |
| 299 | /> | 299 | /> |
| 300 | <span>Edit</span> | 300 | <span>Edit</span> |
| 301 | </v-tooltip> | 301 | </v-tooltip> |
| 302 | <v-tooltip top> | 302 | <v-tooltip top> |
| 303 | <img | 303 | <img |
| 304 | slot="activator" | 304 | slot="activator" |
| 305 | style="cursor:pointer; width:20px; height:20px; " | 305 | style="cursor:pointer; width:20px; height:20px; " |
| 306 | class="mr-3" | 306 | class="mr-3" |
| 307 | @click="deleteItem(props.item)" | 307 | @click="deleteItem(props.item)" |
| 308 | src="/static/icon/delete.png" | 308 | src="/static/icon/delete.png" |
| 309 | /> | 309 | /> |
| 310 | <span>Delete</span> | 310 | <span>Delete</span> |
| 311 | </v-tooltip> | 311 | </v-tooltip> |
| 312 | </span> | 312 | </span> |
| 313 | </td> | 313 | </td> |
| 314 | </tr> | 314 | </tr> |
| 315 | </template> | 315 | </template> |
| 316 | <v-alert | 316 | <v-alert |
| 317 | slot="no-results" | 317 | slot="no-results" |
| 318 | :value="true" | 318 | :value="true" |
| 319 | color="error" | 319 | color="error" |
| 320 | icon="warning" | 320 | icon="warning" |
| 321 | >Your search for "{{ search }}" found no results.</v-alert> | 321 | >Your search for "{{ search }}" found no results.</v-alert> |
| 322 | </v-data-table> | 322 | </v-data-table> |
| 323 | <!-- ****** ADD MULTIPLE Subject ****** --> | 323 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 324 | <v-snackbar | 324 | <v-snackbar |
| 325 | :timeout="timeout" | 325 | :timeout="timeout" |
| 326 | :top="y === 'top'" | 326 | :top="y === 'top'" |
| 327 | :right="x === 'right'" | 327 | :right="x === 'right'" |
| 328 | :vertical="mode === 'vertical'" | 328 | :vertical="mode === 'vertical'" |
| 329 | v-model="snackbar" | 329 | v-model="snackbar" |
| 330 | :color="color" | 330 | :color="color" |
| 331 | >{{ text }}</v-snackbar> | 331 | >{{ text }}</v-snackbar> |
| 332 | <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog" persistent> | 332 | <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog" persistent> |
| 333 | <v-card flat class="card-style pa-2" dark> | 333 | <v-card flat class="Card-style pa-2"> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs12> | 335 | <v-flex xs12> |
| 336 | <label class="title text-xs-center">Add Assignment</label> | 336 | <label class="title text-xs-center">Add Assignment</label> |
| 337 | <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon> | 337 | <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon> |
| 338 | </v-flex> | 338 | </v-flex> |
| 339 | </v-layout> | 339 | </v-layout> |
| 340 | <v-container fluid fill-height> | 340 | <v-container fluid fill-height> |
| 341 | <v-layout align-center> | 341 | <v-layout align-center> |
| 342 | <v-flex xs12> | 342 | <v-flex xs12> |
| 343 | <v-form ref="form" v-model="valid" lazy-validation> | 343 | <v-form ref="form" v-model="valid" lazy-validation> |
| 344 | <v-layout> | 344 | <v-layout> |
| 345 | <v-flex xs4 sm4 class="pt-4 subheading"> | 345 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 346 | <label class="right">Title :</label> | 346 | <label class="right">Title :</label> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | <v-flex xs8 sm8 class="ml-3"> | 348 | <v-flex xs8 sm8 class="ml-3"> |
| 349 | <v-text-field | 349 | <v-text-field |
| 350 | name="name" | 350 | name="name" |
| 351 | type="text" | 351 | type="text" |
| 352 | placeholder="Select Title" | 352 | placeholder="Select Title" |
| 353 | :rules="titleRules" | 353 | :rules="titleRules" |
| 354 | v-model="addAssignment.title" | 354 | v-model="addAssignment.title" |
| 355 | required | 355 | required |
| 356 | ></v-text-field> | 356 | ></v-text-field> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | </v-layout> | 358 | </v-layout> |
| 359 | <v-layout> | 359 | <v-layout> |
| 360 | <v-flex xs4 sm4 class="pt-4 subheading"> | 360 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 361 | <label class="right">Description :</label> | 361 | <label class="right">Description :</label> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | <v-flex xs8 sm8 class="ml-3"> | 363 | <v-flex xs8 sm8 class="ml-3"> |
| 364 | <v-text-field | 364 | <v-text-field |
| 365 | name="name" | 365 | name="name" |
| 366 | type="text" | 366 | type="text" |
| 367 | placeholder="Select Description" | 367 | placeholder="Select Description" |
| 368 | :rules="descriptionRules" | 368 | :rules="descriptionRules" |
| 369 | v-model="addAssignment.description" | 369 | v-model="addAssignment.description" |
| 370 | required | 370 | required |
| 371 | ></v-text-field> | 371 | ></v-text-field> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | </v-layout> | 373 | </v-layout> |
| 374 | <v-layout> | 374 | <v-layout> |
| 375 | <v-flex xs4 sm4 class="pt-4 subheading"> | 375 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 376 | <label class="right">Deadline :</label> | 376 | <label class="right">Deadline :</label> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex xs8 sm7 class="ml-3"> | 378 | <v-flex xs8 sm7 class="ml-3"> |
| 379 | <v-menu | 379 | <v-menu |
| 380 | ref="menu2" | 380 | ref="menu2" |
| 381 | :close-on-content-click="false" | 381 | :close-on-content-click="false" |
| 382 | v-model="menu2" | 382 | v-model="menu2" |
| 383 | :nudge-right="40" | 383 | :nudge-right="40" |
| 384 | :return-value.sync="addAssignment.date" | 384 | :return-value.sync="addAssignment.date" |
| 385 | lazy | 385 | lazy |
| 386 | transition="scale-transition" | 386 | transition="scale-transition" |
| 387 | offset-y | 387 | offset-y |
| 388 | full-width | 388 | full-width |
| 389 | min-width="290px" | 389 | min-width="290px" |
| 390 | > | 390 | > |
| 391 | <v-text-field | 391 | <v-text-field |
| 392 | slot="activator" | 392 | slot="activator" |
| 393 | v-model="addAssignment.deadline" | 393 | v-model="addAssignment.deadline" |
| 394 | :rules="deadlineRules" | 394 | :rules="deadlineRules" |
| 395 | placeholder="Select Date" | 395 | placeholder="Select Date" |
| 396 | append-icon="event" | 396 | append-icon="event" |
| 397 | readonly | 397 | readonly |
| 398 | ></v-text-field> | 398 | ></v-text-field> |
| 399 | <v-date-picker | 399 | <v-date-picker |
| 400 | v-model="addAssignment.deadline" | 400 | v-model="addAssignment.deadline" |
| 401 | @input="$refs.menu2.save(addAssignment.date)" | 401 | @input="$refs.menu2.save(addAssignment.date)" |
| 402 | ></v-date-picker> | 402 | ></v-date-picker> |
| 403 | </v-menu> | 403 | </v-menu> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | </v-layout> | 405 | </v-layout> |
| 406 | <v-layout> | 406 | <v-layout> |
| 407 | <v-flex xs4 sm4 class="pt-4 subheading"> | 407 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 408 | <label class="right">Class :</label> | 408 | <label class="right">Class :</label> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs8 sm8 class="ml-3"> | 410 | <v-flex xs8 sm8 class="ml-3"> |
| 411 | <v-select | 411 | <v-select |
| 412 | :items="classList" | 412 | :items="classList" |
| 413 | placeholder="Select Class" | 413 | placeholder="Select Class" |
| 414 | item-text="classNum" | 414 | item-text="classNum" |
| 415 | item-value="_id" | 415 | item-value="_id" |
| 416 | v-model="addAssignment.classId" | 416 | v-model="addAssignment.classId" |
| 417 | name="Select Class" | 417 | name="Select Class" |
| 418 | :rules="classRules" | 418 | :rules="classRules" |
| 419 | @change="getSections(addAssignment.classId)" | 419 | @change="getSections(addAssignment.classId)" |
| 420 | class="pl-2" | 420 | class="pl-2" |
| 421 | required | 421 | required |
| 422 | ></v-select> | 422 | ></v-select> |
| 423 | </v-flex> | 423 | </v-flex> |
| 424 | </v-layout> | 424 | </v-layout> |
| 425 | <v-layout> | 425 | <v-layout> |
| 426 | <v-flex xs4 sm4 class="pt-4 subheading"> | 426 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 427 | <label class="right">Section :</label> | 427 | <label class="right">Section :</label> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex xs8 sm8 class="ml-3"> | 429 | <v-flex xs8 sm8 class="ml-3"> |
| 430 | <v-select | 430 | <v-select |
| 431 | :items="addSection" | 431 | :items="addSection" |
| 432 | placeholder="Select Section" | 432 | placeholder="Select Section" |
| 433 | item-text="name" | 433 | item-text="name" |
| 434 | item-value="_id" | 434 | item-value="_id" |
| 435 | v-model="addAssignment.sectionId" | 435 | v-model="addAssignment.sectionId" |
| 436 | name="Select Section" | 436 | name="Select Section" |
| 437 | :rules="sectionRules" | 437 | :rules="sectionRules" |
| 438 | @change="getClassSubject(addAssignment.classId)" | 438 | @change="getClassSubject(addAssignment.classId)" |
| 439 | class="px-2" | 439 | class="px-2" |
| 440 | required | 440 | required |
| 441 | ></v-select> | 441 | ></v-select> |
| 442 | </v-flex> | 442 | </v-flex> |
| 443 | </v-layout> | 443 | </v-layout> |
| 444 | <v-layout> | 444 | <v-layout> |
| 445 | <v-flex xs3 sm4 class="pt-4 subheading"> | 445 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 446 | <label class="right">Subject :</label> | 446 | <label class="right">Subject :</label> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs8 sm8 class="ml-2"> | 448 | <v-flex xs8 sm8 class="ml-2"> |
| 449 | <v-select | 449 | <v-select |
| 450 | :items="subjectList.subjects" | 450 | :items="subjectList.subjects" |
| 451 | placeholder="Select your subject" | 451 | placeholder="Select your subject" |
| 452 | v-model="addAssignment.subjectName" | 452 | v-model="addAssignment.subjectName" |
| 453 | item-text="subjectName" | 453 | item-text="subjectName" |
| 454 | item-value="_id" | 454 | item-value="_id" |
| 455 | :rules="subjectRules" | 455 | :rules="subjectRules" |
| 456 | required | 456 | required |
| 457 | ></v-select> | 457 | ></v-select> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | </v-layout> | 459 | </v-layout> |
| 460 | <v-layout> | 460 | <v-layout> |
| 461 | <v-flex xs4 class="pt-4 subheading"> | 461 | <v-flex xs4 class="pt-4 subheading"> |
| 462 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> | 462 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> |
| 463 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label> | 463 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label> |
| 464 | </v-flex> | 464 | </v-flex> |
| 465 | <v-flex xs8 class="ml-3"> | 465 | <v-flex xs8 class="ml-3"> |
| 466 | <v-text-field | 466 | <v-text-field |
| 467 | placeholder="Select File" | 467 | placeholder="Select File" |
| 468 | @click="pickFile" | 468 | @click="pickFile" |
| 469 | v-model="imageName" | 469 | v-model="imageName" |
| 470 | append-icon="attach_file" | 470 | append-icon="attach_file" |
| 471 | ></v-text-field> | 471 | ></v-text-field> |
| 472 | <input | 472 | <input |
| 473 | type="file" | 473 | type="file" |
| 474 | style="display:none" | 474 | style="display:none" |
| 475 | ref="image" | 475 | ref="image" |
| 476 | accept="image/*" | 476 | accept="image/*" |
| 477 | @change="onFilePicked" | 477 | @change="onFilePicked" |
| 478 | /> | 478 | /> |
| 479 | </v-flex> | 479 | </v-flex> |
| 480 | </v-layout> | 480 | </v-layout> |
| 481 | <v-layout> | 481 | <v-layout> |
| 482 | <v-flex xs12 sm12> | 482 | <v-flex xs12 sm12> |
| 483 | <v-card-actions> | 483 | <v-card-actions> |
| 484 | <v-spacer></v-spacer> | 484 | <v-spacer></v-spacer> |
| 485 | <v-btn | 485 | <v-btn |
| 486 | @click="submit" | 486 | @click="submit" |
| 487 | round | 487 | round |
| 488 | dark | 488 | dark |
| 489 | :loading="loading" | 489 | :loading="loading" |
| 490 | class="add-button" | 490 | class="add-button" |
| 491 | >Add Assignment</v-btn> | 491 | >Add Assignment</v-btn> |
| 492 | </v-card-actions> | 492 | </v-card-actions> |
| 493 | </v-flex> | 493 | </v-flex> |
| 494 | </v-layout> | 494 | </v-layout> |
| 495 | </v-form> | 495 | </v-form> |
| 496 | </v-flex> | 496 | </v-flex> |
| 497 | </v-layout> | 497 | </v-layout> |
| 498 | </v-container> | 498 | </v-container> |
| 499 | </v-card> | 499 | </v-card> |
| 500 | </v-dialog> | 500 | </v-dialog> |
| 501 | <div class="loader" v-if="showLoader"> | 501 | <div class="loader" v-if="showLoader"> |
| 502 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 502 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 503 | </div> | 503 | </div> |
| 504 | </v-container> | 504 | </v-container> |
| 505 | </template> | 505 | </template> |
| 506 | 506 | ||
| 507 | <script> | 507 | <script> |
| 508 | import http from "@/Services/http.js"; | 508 | import http from "@/Services/http.js"; |
| 509 | import Util from "@/util"; | 509 | import Util from "@/util"; |
| 510 | import moment from "moment"; | 510 | import moment from "moment"; |
| 511 | import jsPDF from "jspdf"; | 511 | import jsPDF from "jspdf"; |
| 512 | import { saveAs } from "file-saver"; | 512 | import { saveAs } from "file-saver"; |
| 513 | 513 | ||
| 514 | export default { | 514 | export default { |
| 515 | data: () => ({ | 515 | data: () => ({ |
| 516 | snackbar: false, | 516 | snackbar: false, |
| 517 | role: "", | 517 | role: "", |
| 518 | menu1: false, | 518 | menu1: false, |
| 519 | menu2: false, | 519 | menu2: false, |
| 520 | y: "top", | 520 | y: "top", |
| 521 | x: "right", | 521 | x: "right", |
| 522 | mode: "", | 522 | mode: "", |
| 523 | timeout: 3000, | 523 | timeout: 3000, |
| 524 | text: "", | 524 | text: "", |
| 525 | color: "", | 525 | color: "", |
| 526 | show: true, | 526 | show: true, |
| 527 | showSearch: false, | 527 | showSearch: false, |
| 528 | showLoader: false, | 528 | showLoader: false, |
| 529 | loading: false, | 529 | loading: false, |
| 530 | editLoading: false, | 530 | editLoading: false, |
| 531 | date: null, | 531 | date: null, |
| 532 | search: "", | 532 | search: "", |
| 533 | viewAssignmentDialog: false, | 533 | viewAssignmentDialog: false, |
| 534 | editAssignmentDialog: false, | 534 | editAssignmentDialog: false, |
| 535 | valid: true, | 535 | valid: true, |
| 536 | validEditAssignment: true, | 536 | validEditAssignment: true, |
| 537 | addAssignmentDialog: false, | 537 | addAssignmentDialog: false, |
| 538 | 538 | ||
| 539 | pagination: { | 539 | pagination: { |
| 540 | rowsPerPage: 10, | 540 | rowsPerPage: 10, |
| 541 | }, | 541 | }, |
| 542 | token: "", | 542 | token: "", |
| 543 | headers: [ | 543 | headers: [ |
| 544 | { | 544 | { |
| 545 | text: "No", | 545 | text: "No", |
| 546 | align: "", | 546 | align: "", |
| 547 | sortable: false, | 547 | sortable: false, |
| 548 | value: "No", | 548 | value: "No", |
| 549 | }, | 549 | }, |
| 550 | { | 550 | { |
| 551 | text: "Title", | 551 | text: "Title", |
| 552 | value: "title", | 552 | value: "title", |
| 553 | sortable: false, | 553 | sortable: false, |
| 554 | align: "center", | 554 | align: "center", |
| 555 | }, | 555 | }, |
| 556 | { | 556 | { |
| 557 | text: "Description", | 557 | text: "Description", |
| 558 | value: "description", | 558 | value: "description", |
| 559 | sortable: false, | 559 | sortable: false, |
| 560 | align: "center", | 560 | align: "center", |
| 561 | }, | 561 | }, |
| 562 | { | 562 | { |
| 563 | text: "Deadline", | 563 | text: "Deadline", |
| 564 | value: "deadline", | 564 | value: "deadline", |
| 565 | sortable: false, | 565 | sortable: false, |
| 566 | align: "center", | 566 | align: "center", |
| 567 | }, | 567 | }, |
| 568 | { | 568 | { |
| 569 | text: "Section", | 569 | text: "Section", |
| 570 | value: "name", | 570 | value: "name", |
| 571 | sortable: false, | 571 | sortable: false, |
| 572 | align: "center", | 572 | align: "center", |
| 573 | }, | 573 | }, |
| 574 | { | 574 | { |
| 575 | text: "Uploader", | 575 | text: "Uploader", |
| 576 | value: "name", | 576 | value: "name", |
| 577 | sortable: false, | 577 | sortable: false, |
| 578 | align: "center", | 578 | align: "center", |
| 579 | }, | 579 | }, |
| 580 | { | 580 | { |
| 581 | text: "File", | 581 | text: "File", |
| 582 | value: "file", | 582 | value: "file", |
| 583 | sortable: false, | 583 | sortable: false, |
| 584 | align: "center", | 584 | align: "center", |
| 585 | }, | 585 | }, |
| 586 | { text: "Action", value: "", sortable: false, align: "center" }, | 586 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 587 | ], | 587 | ], |
| 588 | 588 | ||
| 589 | showPdfData: false, | 589 | showPdfData: false, |
| 590 | loadingPdf: false, | 590 | loadingPdf: false, |
| 591 | hideData: true, | 591 | hideData: true, |
| 592 | 592 | ||
| 593 | assignmentData: [], | 593 | assignmentData: [], |
| 594 | subjectList: [], | 594 | subjectList: [], |
| 595 | classList: [], | 595 | classList: [], |
| 596 | addSection: [], | 596 | addSection: [], |
| 597 | editedIndex: -1, | 597 | editedIndex: -1, |
| 598 | addSubject: {}, | 598 | addSubject: {}, |
| 599 | 599 | ||
| 600 | editedItem: { | 600 | editedItem: { |
| 601 | title: "", | 601 | title: "", |
| 602 | description: "", | 602 | description: "", |
| 603 | deadline: "", | 603 | deadline: "", |
| 604 | classId: "", | 604 | classId: "", |
| 605 | sectionId: "", | 605 | sectionId: "", |
| 606 | subjectName: "", | 606 | subjectName: "", |
| 607 | fileType: "", | 607 | fileType: "", |
| 608 | }, | 608 | }, |
| 609 | addAssignment: {}, | 609 | addAssignment: {}, |
| 610 | showAssignment: {}, | 610 | showAssignment: {}, |
| 611 | 611 | ||
| 612 | imageData: {}, | 612 | imageData: {}, |
| 613 | imageName: "", | 613 | imageName: "", |
| 614 | imageUrl: "", | 614 | imageUrl: "", |
| 615 | imageFile: "", | 615 | imageFile: "", |
| 616 | 616 | ||
| 617 | titleRules: [(v) => !!v || " Title is required"], | 617 | titleRules: [(v) => !!v || " Title is required"], |
| 618 | descriptionRules: [(v) => !!v || " Description is required"], | 618 | descriptionRules: [(v) => !!v || " Description is required"], |
| 619 | deadlineRules: [(v) => !!v || " Deadline is required"], | 619 | deadlineRules: [(v) => !!v || " Deadline is required"], |
| 620 | classRules: [(v) => !!v || "Class is required"], | 620 | classRules: [(v) => !!v || "Class is required"], |
| 621 | sectionRules: [(v) => !!v || "Section is required"], | 621 | sectionRules: [(v) => !!v || "Section is required"], |
| 622 | subjectRules: [(v) => !!v || "Student is required"], | 622 | subjectRules: [(v) => !!v || "Student is required"], |
| 623 | fileRules: [(v) => !!v || "File is required"], | 623 | fileRules: [(v) => !!v || "File is required"], |
| 624 | }), | 624 | }), |
| 625 | watch: { | 625 | watch: { |
| 626 | addAssignmentDialog: function (val) { | 626 | addAssignmentDialog: function (val) { |
| 627 | if (!val) { | 627 | if (!val) { |
| 628 | this.addAssignment = []; | 628 | this.addAssignment = []; |
| 629 | this.imageName = ""; | 629 | this.imageName = ""; |
| 630 | } | 630 | } |
| 631 | }, | 631 | }, |
| 632 | }, | 632 | }, |
| 633 | methods: { | 633 | methods: { |
| 634 | dates: function (date) { | 634 | dates: function (date) { |
| 635 | return moment(date).format("MMMM DD, YYYY"); | 635 | return moment(date).format("MMMM DD, YYYY"); |
| 636 | }, | 636 | }, |
| 637 | pickFile() { | 637 | pickFile() { |
| 638 | this.$refs.image.click(); | 638 | this.$refs.image.click(); |
| 639 | }, | 639 | }, |
| 640 | editItem(item) { | 640 | editItem(item) { |
| 641 | this.editedIndex = this.assignmentData; | 641 | this.editedIndex = this.assignmentData; |
| 642 | this.editedItem = Object.assign({}, item); | 642 | this.editedItem = Object.assign({}, item); |
| 643 | this.dialog = true; | 643 | this.dialog = true; |
| 644 | this.editAssignmentDialog = true; | 644 | this.editAssignmentDialog = true; |
| 645 | }, | 645 | }, |
| 646 | profile(item) { | 646 | profile(item) { |
| 647 | this.editedIndex = this.assignmentData; | 647 | this.editedIndex = this.assignmentData; |
| 648 | this.editedItem = Object.assign({}, item); | 648 | this.editedItem = Object.assign({}, item); |
| 649 | this.dialog1 = true; | 649 | this.dialog1 = true; |
| 650 | this.viewAssignmentDialog = true; | 650 | this.viewAssignmentDialog = true; |
| 651 | }, | 651 | }, |
| 652 | deleteItem(item) { | 652 | deleteItem(item) { |
| 653 | let deleteAssignment = { | 653 | let deleteAssignment = { |
| 654 | assignmentId: item._id, | 654 | assignmentId: item._id, |
| 655 | }; | 655 | }; |
| 656 | http() | 656 | http() |
| 657 | .delete( | 657 | .delete( |
| 658 | "/deleteAssignment", | 658 | "/deleteAssignment", |
| 659 | confirm("Are you sure you want to delete this?") && { | 659 | confirm("Are you sure you want to delete this?") && { |
| 660 | params: deleteAssignment, | 660 | params: deleteAssignment, |
| 661 | }, | 661 | }, |
| 662 | { | 662 | { |
| 663 | headers: { Authorization: "Bearer " + this.token }, | 663 | headers: { Authorization: "Bearer " + this.token }, |
| 664 | } | 664 | } |
| 665 | ) | 665 | ) |
| 666 | .then((response) => { | 666 | .then((response) => { |
| 667 | this.getAssignmentList(); | 667 | this.getAssignmentList(); |
| 668 | this.snackbar = true; | 668 | this.snackbar = true; |
| 669 | this.text = "Successfully delete Existing Assignment"; | 669 | this.text = "Successfully delete Existing Assignment"; |
| 670 | this.color = "green"; | 670 | this.color = "green"; |
| 671 | }) | 671 | }) |
| 672 | .catch((error) => { | 672 | .catch((error) => { |
| 673 | this.snackbar = true; | 673 | this.snackbar = true; |
| 674 | this.text = error.response.data.message; | 674 | this.text = error.response.data.message; |
| 675 | this.color = "error"; | 675 | this.color = "error"; |
| 676 | }); | 676 | }); |
| 677 | }, | 677 | }, |
| 678 | close() { | 678 | close() { |
| 679 | this.editAssignmentDialog = false; | 679 | this.editAssignmentDialog = false; |
| 680 | }, | 680 | }, |
| 681 | close1() { | 681 | close1() { |
| 682 | this.viewAssignmentDialog = false; | 682 | this.viewAssignmentDialog = false; |
| 683 | }, | 683 | }, |
| 684 | closeAddAssignmentModel() { | 684 | closeAddAssignmentModel() { |
| 685 | this.addAssignmentDialog = false; | 685 | this.addAssignmentDialog = false; |
| 686 | // this.assignmentData = []; | 686 | // this.assignmentData = []; |
| 687 | this.addAssignment = []; | 687 | this.addAssignment = []; |
| 688 | this.imageName = ""; | 688 | this.imageName = ""; |
| 689 | }, | 689 | }, |
| 690 | submit() { | 690 | submit() { |
| 691 | var addAssignment = { | 691 | var addAssignment = { |
| 692 | title: this.addAssignment.title, | 692 | title: this.addAssignment.title, |
| 693 | description: this.addAssignment.description, | 693 | description: this.addAssignment.description, |
| 694 | deadline: this.addAssignment.deadline, | 694 | deadline: this.addAssignment.deadline, |
| 695 | classId: this.addAssignment.classId, | 695 | classId: this.addAssignment.classId, |
| 696 | sectionId: this.addAssignment.sectionId, | 696 | sectionId: this.addAssignment.sectionId, |
| 697 | subjectName: this.addAssignment.subjectName, | 697 | subjectName: this.addAssignment.subjectName, |
| 698 | file: this.addAssignment.imageName, | 698 | file: this.addAssignment.imageName, |
| 699 | fileName: this.imageName, | 699 | fileName: this.imageName, |
| 700 | }; | 700 | }; |
| 701 | var signatures = { | 701 | var signatures = { |
| 702 | JVBERi0: "other", | 702 | JVBERi0: "other", |
| 703 | iVBORw0KGgo: "image", | 703 | iVBORw0KGgo: "image", |
| 704 | UEsDBBQ: "other", | 704 | UEsDBBQ: "other", |
| 705 | "/": "image", | 705 | "/": "image", |
| 706 | AAABAA: "image", | 706 | AAABAA: "image", |
| 707 | IywiV2hhdC: "other", | 707 | IywiV2hhdC: "other", |
| 708 | bmFtZSxl: "other", | 708 | bmFtZSxl: "other", |
| 709 | }; | 709 | }; |
| 710 | function detectMimeType(b64) { | 710 | function detectMimeType(b64) { |
| 711 | for (var s in signatures) { | 711 | for (var s in signatures) { |
| 712 | if (b64.indexOf(s) === 0) { | 712 | if (b64.indexOf(s) === 0) { |
| 713 | return signatures[s]; | 713 | return signatures[s]; |
| 714 | } | 714 | } |
| 715 | } | 715 | } |
| 716 | } | 716 | } |
| 717 | if (this.$refs.form.validate()) { | 717 | if (this.$refs.form.validate()) { |
| 718 | if (this.imageUrl) { | 718 | if (this.imageUrl) { |
| 719 | var str = this.imageUrl; | 719 | var str = this.imageUrl; |
| 720 | const [baseUrl, imageUrl] = str.split(/,/); | 720 | const [baseUrl, imageUrl] = str.split(/,/); |
| 721 | addAssignment.upload = imageUrl; | 721 | addAssignment.upload = imageUrl; |
| 722 | addAssignment.fileType = detectMimeType(imageUrl); | 722 | addAssignment.fileType = detectMimeType(imageUrl); |
| 723 | } | 723 | } |
| 724 | // console.log("data===>", addAssignment); | 724 | // console.log("data===>", addAssignment); |
| 725 | http() | 725 | http() |
| 726 | .post("/createAssignment", addAssignment) | 726 | .post("/createAssignment", addAssignment) |
| 727 | .then((response) => { | 727 | .then((response) => { |
| 728 | this.getAssignmentList(); | 728 | this.getAssignmentList(); |
| 729 | this.snackbar = true; | 729 | this.snackbar = true; |
| 730 | this.text = "Assignment added successfully"; | 730 | this.text = "Assignment added successfully"; |
| 731 | this.color = "green"; | 731 | this.color = "green"; |
| 732 | this.addAssignmentDialog = false; | 732 | this.addAssignmentDialog = false; |
| 733 | this.clear(); | 733 | this.clear(); |
| 734 | }) | 734 | }) |
| 735 | .catch((error) => { | 735 | .catch((error) => { |
| 736 | // console.log(error); | 736 | // console.log(error); |
| 737 | this.snackbar = true; | 737 | this.snackbar = true; |
| 738 | this.text = error.response.data.message; | 738 | this.text = error.response.data.message; |
| 739 | this.color = "red"; | 739 | this.color = "red"; |
| 740 | }); | 740 | }); |
| 741 | } | 741 | } |
| 742 | }, | 742 | }, |
| 743 | getAssignmentList() { | 743 | getAssignmentList() { |
| 744 | if (this.addAssignment.classId) { | 744 | if (this.addAssignment.classId) { |
| 745 | this.addAssignment.classId = this.addAssignment.classId; | 745 | this.addAssignment.classId = this.addAssignment.classId; |
| 746 | } | 746 | } |
| 747 | this.showLoader = true; | 747 | this.showLoader = true; |
| 748 | http() | 748 | http() |
| 749 | .get( | 749 | .get( |
| 750 | "/getAssignmentList", | 750 | "/getAssignmentList", |
| 751 | { | 751 | { |
| 752 | params: { classId: this.showAssignment.classId }, | 752 | params: { classId: this.showAssignment.classId }, |
| 753 | }, | 753 | }, |
| 754 | { | 754 | { |
| 755 | headers: { Authorization: "Bearer " + this.token }, | 755 | headers: { Authorization: "Bearer " + this.token }, |
| 756 | } | 756 | } |
| 757 | ) | 757 | ) |
| 758 | .then((response) => { | 758 | .then((response) => { |
| 759 | this.assignmentData = response.data.data; | 759 | this.assignmentData = response.data.data; |
| 760 | this.showLoader = false; | 760 | this.showLoader = false; |
| 761 | this.loadingSearch = false; | 761 | this.loadingSearch = false; |
| 762 | }) | 762 | }) |
| 763 | .catch((error) => { | 763 | .catch((error) => { |
| 764 | // console.log("err====>", err); | 764 | // console.log("err====>", err); |
| 765 | this.showLoader = false; | 765 | this.showLoader = false; |
| 766 | this.loadingSearch = false; | 766 | this.loadingSearch = false; |
| 767 | this.snackbar = true; | 767 | this.snackbar = true; |
| 768 | this.text = error.response.data.message; | 768 | this.text = error.response.data.message; |
| 769 | if (error.response.status === 401) { | 769 | if (error.response.status === 401) { |
| 770 | this.$router.replace({ path: "/" }); | 770 | this.$router.replace({ path: "/" }); |
| 771 | this.$store.dispatch("setToken", null); | 771 | this.$store.dispatch("setToken", null); |
| 772 | this.$store.dispatch("Id", null); | 772 | this.$store.dispatch("Id", null); |
| 773 | } | 773 | } |
| 774 | }); | 774 | }); |
| 775 | }, | 775 | }, |
| 776 | clear() { | 776 | clear() { |
| 777 | this.$refs.form.reset(); | 777 | this.$refs.form.reset(); |
| 778 | }, | 778 | }, |
| 779 | save() { | 779 | save() { |
| 780 | if (this.$refs.formEditAssignment.validate()) { | 780 | if (this.$refs.formEditAssignment.validate()) { |
| 781 | let editAssignment = { | 781 | let editAssignment = { |
| 782 | assignmentId: this.editedItem._id, | 782 | assignmentId: this.editedItem._id, |
| 783 | title: this.addAssignment.title, | 783 | title: this.addAssignment.title, |
| 784 | description: this.addAssignment.description, | 784 | description: this.addAssignment.description, |
| 785 | deadline: this.addAssignment.deadline, | 785 | deadline: this.addAssignment.deadline, |
| 786 | classId: this.addAssignment.classId, | 786 | classId: this.addAssignment.classId, |
| 787 | sectionId: this.addAssignment.sectionId, | 787 | sectionId: this.addAssignment.sectionId, |
| 788 | subjectName: this.addAssignment.subjectName, | 788 | subjectName: this.addAssignment.subjectName, |
| 789 | file: this.addAssignment.imageName, | 789 | file: this.addAssignment.imageName, |
| 790 | fileName: this.imageName, | 790 | fileName: this.imageName, |
| 791 | }; | 791 | }; |
| 792 | this.editLoading = true; | 792 | this.editLoading = true; |
| 793 | var signatures = { | 793 | var signatures = { |
| 794 | JVBERi0: "other", | 794 | JVBERi0: "other", |
| 795 | iVBORw0KGgo: "image", | 795 | iVBORw0KGgo: "image", |
| 796 | UEsDBBQ: "other", | 796 | UEsDBBQ: "other", |
| 797 | "/": "image", | 797 | "/": "image", |
| 798 | AAABAA: "image", | 798 | AAABAA: "image", |
| 799 | IywiV2hhdC: "other", | 799 | IywiV2hhdC: "other", |
| 800 | bmFtZSxl: "other", | 800 | bmFtZSxl: "other", |
| 801 | }; | 801 | }; |
| 802 | function detectMimeType(b64) { | 802 | function detectMimeType(b64) { |
| 803 | for (var s in signatures) { | 803 | for (var s in signatures) { |
| 804 | if (b64.indexOf(s) === 0) { | 804 | if (b64.indexOf(s) === 0) { |
| 805 | return signatures[s]; | 805 | return signatures[s]; |
| 806 | } | 806 | } |
| 807 | } | 807 | } |
| 808 | } | 808 | } |
| 809 | if (this.imageUrl) { | 809 | if (this.imageUrl) { |
| 810 | var str = this.imageUrl; | 810 | var str = this.imageUrl; |
| 811 | const [baseUrl, imageUrl] = str.split(/,/); | 811 | const [baseUrl, imageUrl] = str.split(/,/); |
| 812 | editAssignment.upload = imageUrl; | 812 | editAssignment.upload = imageUrl; |
| 813 | editAssignment.fileType = detectMimeType(imageUrl); | 813 | editAssignment.fileType = detectMimeType(imageUrl); |
| 814 | } | 814 | } |
| 815 | http() | 815 | http() |
| 816 | .put("/updateAssignment", editAssignment) | 816 | .put("/updateAssignment", editAssignment) |
| 817 | .then((response) => { | 817 | .then((response) => { |
| 818 | this.snackbar = true; | 818 | this.snackbar = true; |
| 819 | this.text = "Successfully Edit Existing Assignment"; | 819 | this.text = "Successfully Edit Existing Assignment"; |
| 820 | this.color = "green"; | 820 | this.color = "green"; |
| 821 | this.getAssignmentList(); | 821 | this.getAssignmentList(); |
| 822 | this.editLoading = false; | 822 | this.editLoading = false; |
| 823 | this.editAssignmentDialog = false; | 823 | this.editAssignmentDialog = false; |
| 824 | }) | 824 | }) |
| 825 | .catch((error) => { | 825 | .catch((error) => { |
| 826 | this.editLoading = false; | 826 | this.editLoading = false; |
| 827 | // console.log(error); | 827 | // console.log(error); |
| 828 | }); | 828 | }); |
| 829 | } | 829 | } |
| 830 | }, | 830 | }, |
| 831 | getClass() { | 831 | getClass() { |
| 832 | http() | 832 | http() |
| 833 | .get("/getClassesList", { | 833 | .get("/getClassesList", { |
| 834 | headers: { Authorization: "Bearer " + this.token }, | 834 | headers: { Authorization: "Bearer " + this.token }, |
| 835 | }) | 835 | }) |
| 836 | .then((response) => { | 836 | .then((response) => { |
| 837 | this.classList = response.data.data; | 837 | this.classList = response.data.data; |
| 838 | }) | 838 | }) |
| 839 | .catch((error) => { | 839 | .catch((error) => { |
| 840 | if (error.response.status === 401) { | 840 | if (error.response.status === 401) { |
| 841 | this.$router.replace({ path: "/" }); | 841 | this.$router.replace({ path: "/" }); |
| 842 | this.$store.dispatch("setToken", null); | 842 | this.$store.dispatch("setToken", null); |
| 843 | this.$store.dispatch("Id", null); | 843 | this.$store.dispatch("Id", null); |
| 844 | } | 844 | } |
| 845 | }); | 845 | }); |
| 846 | }, | 846 | }, |
| 847 | getSections(_id) { | 847 | getSections(_id) { |
| 848 | var token = this.$store.state.token; | 848 | var token = this.$store.state.token; |
| 849 | this.showLoader = true; | 849 | this.showLoader = true; |
| 850 | http() | 850 | http() |
| 851 | .get( | 851 | .get( |
| 852 | "/getSectionsList", | 852 | "/getSectionsList", |
| 853 | { params: { classId: _id } }, | 853 | { params: { classId: _id } }, |
| 854 | { | 854 | { |
| 855 | headers: { Authorization: "Bearer " + token }, | 855 | headers: { Authorization: "Bearer " + token }, |
| 856 | } | 856 | } |
| 857 | ) | 857 | ) |
| 858 | .then((response) => { | 858 | .then((response) => { |
| 859 | this.addSection = response.data.data; | 859 | this.addSection = response.data.data; |
| 860 | this.showLoader = false; | 860 | this.showLoader = false; |
| 861 | }) | 861 | }) |
| 862 | .catch((err) => { | 862 | .catch((err) => { |
| 863 | this.showLoader = false; | 863 | this.showLoader = false; |
| 864 | }); | 864 | }); |
| 865 | }, | 865 | }, |
| 866 | getClassSubject(_id) { | 866 | getClassSubject(_id) { |
| 867 | this.showLoader = true; | 867 | this.showLoader = true; |
| 868 | // this.classId = this.classId; | 868 | // this.classId = this.classId; |
| 869 | http() | 869 | http() |
| 870 | .get( | 870 | .get( |
| 871 | "/getParticularClass", | 871 | "/getParticularClass", |
| 872 | { params: { classId: _id } }, | 872 | { params: { classId: _id } }, |
| 873 | { | 873 | { |
| 874 | headers: { Authorization: "Bearer " + this.token }, | 874 | headers: { Authorization: "Bearer " + this.token }, |
| 875 | } | 875 | } |
| 876 | ) | 876 | ) |
| 877 | .then((response) => { | 877 | .then((response) => { |
| 878 | this.subjectList = response.data.data; | 878 | this.subjectList = response.data.data; |
| 879 | this.showLoader = false; | 879 | this.showLoader = false; |
| 880 | }) | 880 | }) |
| 881 | .catch((err) => { | 881 | .catch((err) => { |
| 882 | this.showLoader = false; | 882 | this.showLoader = false; |
| 883 | }); | 883 | }); |
| 884 | }, | 884 | }, |
| 885 | onFilePicked(e) { | 885 | onFilePicked(e) { |
| 886 | const files = e.target.files; | 886 | const files = e.target.files; |
| 887 | this.upload = e.target.files[0]; | 887 | this.upload = e.target.files[0]; |
| 888 | if (files[0] !== undefined) { | 888 | if (files[0] !== undefined) { |
| 889 | this.imageName = files[0].name; | 889 | this.imageName = files[0].name; |
| 890 | if (this.imageName.lastIndexOf(".") <= 0) { | 890 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 891 | return; | 891 | return; |
| 892 | } | 892 | } |
| 893 | const fr = new FileReader(); | 893 | const fr = new FileReader(); |
| 894 | fr.readAsDataURL(files[0]); | 894 | fr.readAsDataURL(files[0]); |
| 895 | fr.addEventListener("load", () => { | 895 | fr.addEventListener("load", () => { |
| 896 | this.imageUrl = fr.result; | 896 | this.imageUrl = fr.result; |
| 897 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 897 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 898 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 898 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 899 | }); | 899 | }); |
| 900 | // console.log("this.imageName", this.imageName); | 900 | // console.log("this.imageName", this.imageName); |
| 901 | } else { | 901 | } else { |
| 902 | this.imageName = ""; | 902 | this.imageName = ""; |
| 903 | this.imageFile = ""; | 903 | this.imageFile = ""; |
| 904 | this.imageUrl = ""; | 904 | this.imageUrl = ""; |
| 905 | } | 905 | } |
| 906 | }, | 906 | }, |
| 907 | displaySearch() { | 907 | displaySearch() { |
| 908 | (this.show = false), (this.showSearch = true); | 908 | (this.show = false), (this.showSearch = true); |
| 909 | }, | 909 | }, |
| 910 | closeSearch() { | 910 | closeSearch() { |
| 911 | this.showSearch = false; | 911 | this.showSearch = false; |
| 912 | this.show = true; | 912 | this.show = true; |
| 913 | this.search = ""; | 913 | this.search = ""; |
| 914 | }, | 914 | }, |
| 915 | 915 | ||
| 916 | async generatePDF2Canvas(item) { | 916 | async generatePDF2Canvas(item) { |
| 917 | var dataType = ""; | 917 | var dataType = ""; |
| 918 | var type = ""; | 918 | var type = ""; |
| 919 | if (item.fileType == "image") { | 919 | if (item.fileType == "image") { |
| 920 | dataType = "file.jpg"; | 920 | dataType = "file.jpg"; |
| 921 | } else if (item.fileType == "other") { | 921 | } else if (item.fileType == "other") { |
| 922 | dataType = "file.pdf"; | 922 | dataType = "file.pdf"; |
| 923 | type = "application/pdf"; | 923 | type = "application/pdf"; |
| 924 | } | 924 | } |
| 925 | var FileSaver = require("file-saver"); | 925 | var FileSaver = require("file-saver"); |
| 926 | FileSaver.saveAs(item.file, "image.jpg"); | 926 | FileSaver.saveAs(item.file, "image.jpg"); |
| 927 | }, | 927 | }, |
| 928 | }, | 928 | }, |
| 929 | mounted() { | 929 | mounted() { |
| 930 | this.token = this.$store.state.token; | 930 | this.token = this.$store.state.token; |
| 931 | this.role = this.$store.state.role; | 931 | this.role = this.$store.state.role; |
| 932 | this.getClass(); | 932 | this.getClass(); |
| 933 | }, | 933 | }, |
| 934 | }; | 934 | }; |
| 935 | </script> | 935 | </script> |
| 936 | 936 | ||
| 937 | <style scoped> | 937 | <style scoped> |
| 938 | a:hover :hover { | 938 | a:hover :hover { |
| 939 | text-decoration: underline !important; | 939 | text-decoration: underline !important; |
| 940 | color: blue; | 940 | color: blue; |
| 941 | } | 941 | } |
| 942 | </style> | 942 | </style> |
src/pages/Academic/routine.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Subject ****** --> | 3 | <!-- ****** EDIT Subject ****** --> |
| 4 | <v-dialog v-model="editRoutineDialog" max-width="600px" persistent> | 4 | <v-dialog v-model="editRoutineDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Routine</label> | 8 | <label class="title text-xs-center">Edit Routine</label> |
| 9 | <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation> | 13 | <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs3 sm4 class="pt-4 subheading"> | 15 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 16 | <label class="right">Class :</label> | 16 | <label class="right">Class :</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm8 class="ml-2"> | 18 | <v-flex xs8 sm8 class="ml-2"> |
| 19 | <v-select | 19 | <v-select |
| 20 | :items="classList" | 20 | :items="classList" |
| 21 | label="Select your Class" | 21 | label="Select your Class" |
| 22 | v-model="editedItem.classId" | 22 | v-model="editedItem.classId" |
| 23 | item-text="classNum" | 23 | item-text="classNum" |
| 24 | item-value="_id" | 24 | item-value="_id" |
| 25 | :rules="classRules" | 25 | :rules="classRules" |
| 26 | @change="getClassSubject(editedItem.classId)" | 26 | @change="getClassSubject(editedItem.classId)" |
| 27 | required | 27 | required |
| 28 | ></v-select> | 28 | ></v-select> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs3 sm4 class="pt-4 subheading"> | 32 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 33 | <label class="right">Subject :</label> | 33 | <label class="right">Subject :</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs8 sm8 class="ml-2"> | 35 | <v-flex xs8 sm8 class="ml-2"> |
| 36 | <v-select | 36 | <v-select |
| 37 | :items="subjectList.subjects" | 37 | :items="subjectList.subjects" |
| 38 | label="Select your subject" | 38 | label="Select your subject" |
| 39 | v-model="editedItem.subjectName" | 39 | v-model="editedItem.subjectName" |
| 40 | item-text="subjectName" | 40 | item-text="subjectName" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | :rules="subjectRules" | 42 | :rules="subjectRules" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | </v-layout> | 46 | </v-layout> |
| 47 | <v-layout> | 47 | <v-layout> |
| 48 | <v-flex xs4 sm4 class="pt-4 subheading"> | 48 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 49 | <label class="right">Teacher Name :</label> | 49 | <label class="right">Teacher Name :</label> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | <v-flex xs8 sm8 class="ml-3"> | 51 | <v-flex xs8 sm8 class="ml-3"> |
| 52 | <v-select | 52 | <v-select |
| 53 | :items="teacherList" | 53 | :items="teacherList" |
| 54 | label="Select your teacher" | 54 | label="Select your teacher" |
| 55 | v-model="editedItem.teacherId" | 55 | v-model="editedItem.teacherId" |
| 56 | item-text="name" | 56 | item-text="name" |
| 57 | item-value="_id" | 57 | item-value="_id" |
| 58 | :rules="teacherRules" | 58 | :rules="teacherRules" |
| 59 | required | 59 | required |
| 60 | ></v-select> | 60 | ></v-select> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | </v-layout> | 62 | </v-layout> |
| 63 | <v-layout> | 63 | <v-layout> |
| 64 | <v-flex xs5 sm4 class="pt-4 subheading"> | 64 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 65 | <label class="right">Starting time:</label> | 65 | <label class="right">Starting time:</label> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | <v-flex xs7 sm6 class="ml-3"> | 67 | <v-flex xs7 sm6 class="ml-3"> |
| 68 | <v-menu | 68 | <v-menu |
| 69 | ref="menuC" | 69 | ref="menuC" |
| 70 | :close-on-content-click="false" | 70 | :close-on-content-click="false" |
| 71 | v-model="menu4" | 71 | v-model="menu4" |
| 72 | :nudge-right="40" | 72 | :nudge-right="40" |
| 73 | lazy | 73 | lazy |
| 74 | transition="scale-transition" | 74 | transition="scale-transition" |
| 75 | offset-y | 75 | offset-y |
| 76 | full-width | 76 | full-width |
| 77 | max-width="290px" | 77 | max-width="290px" |
| 78 | min-width="290px" | 78 | min-width="290px" |
| 79 | > | 79 | > |
| 80 | <v-text-field | 80 | <v-text-field |
| 81 | slot="activator" | 81 | slot="activator" |
| 82 | v-model="editedItem.startingTime" | 82 | v-model="editedItem.startingTime" |
| 83 | placeholder="Select your starting time" | 83 | placeholder="Select your starting time" |
| 84 | append-icon="access_time" | 84 | append-icon="access_time" |
| 85 | readonly | 85 | readonly |
| 86 | ></v-text-field> | 86 | ></v-text-field> |
| 87 | <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker> | 87 | <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker> |
| 88 | </v-menu> | 88 | </v-menu> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | <v-layout> | 91 | <v-layout> |
| 92 | <v-flex xs5 sm4 class="pt-4 subheading"> | 92 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 93 | <label class="right">Ending Time:</label> | 93 | <label class="right">Ending Time:</label> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | <v-flex xs7 sm6 class="ml-3"> | 95 | <v-flex xs7 sm6 class="ml-3"> |
| 96 | <v-menu | 96 | <v-menu |
| 97 | ref="menuB" | 97 | ref="menuB" |
| 98 | :close-on-content-click="false" | 98 | :close-on-content-click="false" |
| 99 | v-model="menu3" | 99 | v-model="menu3" |
| 100 | :nudge-right="40" | 100 | :nudge-right="40" |
| 101 | lazy | 101 | lazy |
| 102 | transition="scale-transition" | 102 | transition="scale-transition" |
| 103 | offset-y | 103 | offset-y |
| 104 | full-width | 104 | full-width |
| 105 | max-width="290px" | 105 | max-width="290px" |
| 106 | min-width="290px" | 106 | min-width="290px" |
| 107 | > | 107 | > |
| 108 | <v-text-field | 108 | <v-text-field |
| 109 | slot="activator" | 109 | slot="activator" |
| 110 | v-model="editedItem.endingTime" | 110 | v-model="editedItem.endingTime" |
| 111 | placeholder="Select your end time" | 111 | placeholder="Select your end time" |
| 112 | append-icon="access_time" | 112 | append-icon="access_time" |
| 113 | readonly | 113 | readonly |
| 114 | ></v-text-field> | 114 | ></v-text-field> |
| 115 | <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker> | 115 | <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker> |
| 116 | </v-menu> | 116 | </v-menu> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | </v-layout> | 118 | </v-layout> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 sm4 class="pt-4 subheading"> | 120 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 121 | <label class="right">Room:</label> | 121 | <label class="right">Room:</label> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs8 sm8 class="ml-3"> | 123 | <v-flex xs8 sm8 class="ml-3"> |
| 124 | <v-text-field | 124 | <v-text-field |
| 125 | label="fill your room" | 125 | label="fill your room" |
| 126 | :rules="roomRules" | 126 | :rules="roomRules" |
| 127 | v-model="editedItem.room" | 127 | v-model="editedItem.room" |
| 128 | @keyup.enter="submit" | 128 | @keyup.enter="submit" |
| 129 | ></v-text-field> | 129 | ></v-text-field> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs4 sm4 class="pt-4 subheading"> | 133 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 134 | <label class="right">Period:</label> | 134 | <label class="right">Period:</label> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | <v-flex xs8 sm8 class="ml-3"> | 136 | <v-flex xs8 sm8 class="ml-3"> |
| 137 | <v-text-field | 137 | <v-text-field |
| 138 | label="fill your period" | 138 | label="fill your period" |
| 139 | :rules="periodRules" | 139 | :rules="periodRules" |
| 140 | v-model="editedItem.period" | 140 | v-model="editedItem.period" |
| 141 | @keyup.enter="submit" | 141 | @keyup.enter="submit" |
| 142 | ></v-text-field> | 142 | ></v-text-field> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | </v-layout> | 144 | </v-layout> |
| 145 | <v-layout> | 145 | <v-layout> |
| 146 | <v-flex xs12 sm12> | 146 | <v-flex xs12 sm12> |
| 147 | <v-card-actions> | 147 | <v-card-actions> |
| 148 | <v-spacer></v-spacer> | 148 | <v-spacer></v-spacer> |
| 149 | <v-btn | 149 | <v-btn |
| 150 | @click="update" | 150 | @click="update" |
| 151 | round | 151 | round |
| 152 | dark | 152 | dark |
| 153 | :loading="loading" | 153 | :loading="loading" |
| 154 | class="add-button" | 154 | class="add-button" |
| 155 | >Update Routine</v-btn> | 155 | >Update Routine</v-btn> |
| 156 | </v-card-actions> | 156 | </v-card-actions> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | </v-layout> | 158 | </v-layout> |
| 159 | </v-form> | 159 | </v-form> |
| 160 | </v-container> | 160 | </v-container> |
| 161 | </v-card> | 161 | </v-card> |
| 162 | </v-dialog> | 162 | </v-dialog> |
| 163 | 163 | ||
| 164 | <!-- ****** EXISTING ROUTINE TABLE ****** --> | 164 | <!-- ****** EXISTING ROUTINE TABLE ****** --> |
| 165 | <v-toolbar color="transparent" flat> | 165 | <v-toolbar color="transparent" flat> |
| 166 | <v-btn | 166 | <v-btn |
| 167 | fab | 167 | fab |
| 168 | dark | 168 | dark |
| 169 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 169 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 170 | small | 170 | small |
| 171 | @click="addRoutineDialog = true" | 171 | @click="addRoutineDialog = true" |
| 172 | > | 172 | > |
| 173 | <v-icon dark>add</v-icon> | 173 | <v-icon dark>add</v-icon> |
| 174 | </v-btn> | 174 | </v-btn> |
| 175 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 175 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 176 | <v-btn | 176 | <v-btn |
| 177 | round | 177 | round |
| 178 | class="open-dialog-button" | 178 | class="open-dialog-button" |
| 179 | dark | 179 | dark |
| 180 | @click="addRoutineDialog = true" | 180 | @click="addRoutineDialog = true" |
| 181 | v-if="role != 'TEACHER' " | 181 | v-if="role != 'TEACHER' " |
| 182 | > | 182 | > |
| 183 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine | 183 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | <v-spacer></v-spacer> | 186 | <v-spacer></v-spacer> |
| 187 | <v-flex lg2 md2 xs12 v-show="show"> | 187 | <v-flex lg2 md2 xs12 v-show="show"> |
| 188 | <v-select | 188 | <v-select |
| 189 | :items="classList" | 189 | :items="classList" |
| 190 | label="Select Your Class" | 190 | label="Select Your Class" |
| 191 | v-model="addRoutineList.classId" | 191 | v-model="addRoutineList.classId" |
| 192 | item-text="classNum" | 192 | item-text="classNum" |
| 193 | item-value="_id" | 193 | item-value="_id" |
| 194 | name="Select Class" | 194 | name="Select Class" |
| 195 | :rules="classRules" | 195 | :rules="classRules" |
| 196 | @change="getSections(addRoutineList.classId)" | 196 | @change="getSections(addRoutineList.classId)" |
| 197 | class="pl-2" | 197 | class="pl-2" |
| 198 | required | 198 | required |
| 199 | ></v-select> | 199 | ></v-select> |
| 200 | </v-flex> | 200 | </v-flex> |
| 201 | <v-flex xs8 sm3 md2 class="mr-3"> | 201 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 202 | <v-select | 202 | <v-select |
| 203 | v-model="addRoutineList.sectionId" | 203 | v-model="addRoutineList.sectionId" |
| 204 | label="Select your section" | 204 | label="Select your section" |
| 205 | :items="addSection" | 205 | :items="addSection" |
| 206 | item-text="name" | 206 | item-text="name" |
| 207 | item-value="_id" | 207 | item-value="_id" |
| 208 | name="Select Section" | 208 | name="Select Section" |
| 209 | :rules="sectionRules" | 209 | :rules="sectionRules" |
| 210 | @change="getRoutineList()" | 210 | @change="getRoutineList()" |
| 211 | class="pl-2" | 211 | class="pl-2" |
| 212 | required | 212 | required |
| 213 | ></v-select> | 213 | ></v-select> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | <v-card-title class="body-1" v-show="show"> | 215 | <v-card-title class="body-1" v-show="show"> |
| 216 | <v-btn icon flat @click="displaySearch"> | 216 | <v-btn icon flat @click="displaySearch"> |
| 217 | <v-avatar size="27"> | 217 | <v-avatar size="27"> |
| 218 | <img src="/static/icon/search.png" alt="icon" /> | 218 | <img src="/static/icon/search.png" alt="icon" /> |
| 219 | </v-avatar> | 219 | </v-avatar> |
| 220 | </v-btn> | 220 | </v-btn> |
| 221 | </v-card-title> | 221 | </v-card-title> |
| 222 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 222 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 223 | <v-layout> | 223 | <v-layout> |
| 224 | <v-text-field | 224 | <v-text-field |
| 225 | autofocus | 225 | autofocus |
| 226 | v-model="search" | 226 | v-model="search" |
| 227 | label="Search" | 227 | label="Search" |
| 228 | prepend-inner-icon="search" | 228 | prepend-inner-icon="search" |
| 229 | color="primary" | 229 | color="primary" |
| 230 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 230 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 231 | ></v-text-field> | 231 | ></v-text-field> |
| 232 | <v-icon @click="closeSearch" color="error">close</v-icon> | 232 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-toolbar> | 235 | </v-toolbar> |
| 236 | 236 | ||
| 237 | <div class="col-sm-12"> | 237 | <div class="col-sm-12"> |
| 238 | <div class="box-body"> | 238 | <div class="box-body"> |
| 239 | <div class="row"> | 239 | <div class="row"> |
| 240 | <div class="col-sm-12"> | 240 | <div class="col-sm-12"> |
| 241 | <div class="nav-tabs-custom"> | 241 | <div class="nav-tabs-custom"> |
| 242 | <ul class="nav nav-tabs"> | 242 | <ul class="nav nav-tabs"> |
| 243 | <li class="active"> | 243 | <li class="active"> |
| 244 | <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a> | 244 | <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a> |
| 245 | </li> | 245 | </li> |
| 246 | </ul> | 246 | </ul> |
| 247 | 247 | ||
| 248 | <div class="tab-content" v-show="hideTable"> | 248 | <div class="tab-content" v-show="hideTable"> |
| 249 | <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar"> | 249 | <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar"> |
| 250 | <div | 250 | <div |
| 251 | id="mCSB_1" | 251 | id="mCSB_1" |
| 252 | class="mCustomScrollBox mCS-light" | 252 | class="mCustomScrollBox mCS-light" |
| 253 | style="max-height: none;" | 253 | style="max-height: none;" |
| 254 | tabindex="0" | 254 | tabindex="0" |
| 255 | > | 255 | > |
| 256 | <div | 256 | <div |
| 257 | id="mCSB_1_container" | 257 | id="mCSB_1_container" |
| 258 | class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" | 258 | class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" |
| 259 | style="position: relative; top: 0px; left: 0px; width: 100%;" | 259 | style="position: relative; top: 0px; left: 0px; width: 100%;" |
| 260 | dir="ltr" | 260 | dir="ltr" |
| 261 | > | 261 | > |
| 262 | <div id="hide-table-2"> | 262 | <div id="hide-table-2"> |
| 263 | <table id="table" class="table table-striped"> | 263 | <table id="table" class="table table-striped"> |
| 264 | <tbody> | 264 | <tbody> |
| 265 | <tr> | 265 | <tr> |
| 266 | <td>MONDAY</td> | 266 | <td>MONDAY</td> |
| 267 | </tr> | 267 | </tr> |
| 268 | <tr> | 268 | <tr> |
| 269 | <td>TUESDAY</td> | 269 | <td>TUESDAY</td> |
| 270 | </tr> | 270 | </tr> |
| 271 | <tr> | 271 | <tr> |
| 272 | <td>WEDNESDAY</td> | 272 | <td>WEDNESDAY</td> |
| 273 | </tr> | 273 | </tr> |
| 274 | <tr> | 274 | <tr> |
| 275 | <td>THURSDAY</td> | 275 | <td>THURSDAY</td> |
| 276 | </tr> | 276 | </tr> |
| 277 | <tr> | 277 | <tr> |
| 278 | <td>FRIDAY</td> | 278 | <td>FRIDAY</td> |
| 279 | </tr> | 279 | </tr> |
| 280 | <tr> | 280 | <tr> |
| 281 | <td>SATURDAY</td> | 281 | <td>SATURDAY</td> |
| 282 | </tr> | 282 | </tr> |
| 283 | </tbody> | 283 | </tbody> |
| 284 | </table> | 284 | </table> |
| 285 | </div> | 285 | </div> |
| 286 | </div> | 286 | </div> |
| 287 | <div | 287 | <div |
| 288 | id="mCSB_1_scrollbar_horizontal" | 288 | id="mCSB_1_scrollbar_horizontal" |
| 289 | class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal" | 289 | class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal" |
| 290 | style="display: none;" | 290 | style="display: none;" |
| 291 | > | 291 | > |
| 292 | <div class="mCSB_draggerContainer"> | 292 | <div class="mCSB_draggerContainer"> |
| 293 | <div | 293 | <div |
| 294 | id="mCSB_1_dragger_horizontal" | 294 | id="mCSB_1_dragger_horizontal" |
| 295 | class="mCSB_dragger" | 295 | class="mCSB_dragger" |
| 296 | style="position: absolute; min-width: 30px; width: 0px; left: 0px;" | 296 | style="position: absolute; min-width: 30px; width: 0px; left: 0px;" |
| 297 | > | 297 | > |
| 298 | <div class="mCSB_dragger_bar"></div> | 298 | <div class="mCSB_dragger_bar"></div> |
| 299 | </div> | 299 | </div> |
| 300 | <div class="mCSB_draggerRail"></div> | 300 | <div class="mCSB_draggerRail"></div> |
| 301 | </div> | 301 | </div> |
| 302 | </div> | 302 | </div> |
| 303 | </div> | 303 | </div> |
| 304 | </div> | 304 | </div> |
| 305 | </div> | 305 | </div> |
| 306 | <div> | 306 | <div> |
| 307 | <table id="table" class="table table-bordered" v-show="showTable"> | 307 | <table id="table" class="table table-bordered" v-show="showTable"> |
| 308 | <tbody> | 308 | <tbody> |
| 309 | <div class="nav-tabs-custom"> | 309 | <div class="nav-tabs-custom"> |
| 310 | <div class="tab-content" id="scrolling"> | 310 | <div class="tab-content" id="scrolling"> |
| 311 | <div id="hide-table-2"> | 311 | <div id="hide-table-2"> |
| 312 | <v-data-table :items="routineList"> | 312 | <v-data-table :items="routineList"> |
| 313 | <template slot="items" slot-scope="props"> | 313 | <template slot="items" slot-scope="props"> |
| 314 | <tr class="tr"> | 314 | <tr class="tr"> |
| 315 | <td>{{ props.item.day }}</td> | 315 | <td>{{ props.item.day }}</td> |
| 316 | <td class="text-center" v-for="list in props.item.lectureRoutine"> | 316 | <td class="text-center" v-for="list in props.item.lectureRoutine"> |
| 317 | {{ props.item.classId.classNum }} | 317 | {{ props.item.classId.classNum }} |
| 318 | <br /> | 318 | <br /> |
| 319 | {{ props.item.sectionId.name }} | 319 | {{ props.item.sectionId.name }} |
| 320 | <br /> | 320 | <br /> |
| 321 | {{ list.startingTime }} - {{ list.endingTime }} | 321 | {{ list.startingTime }} - {{ list.endingTime }} |
| 322 | <br /> | 322 | <br /> |
| 323 | {{ list.room }} | 323 | {{ list.room }} |
| 324 | <br /> | 324 | <br /> |
| 325 | {{ list.subjectName }} | 325 | {{ list.subjectName }} |
| 326 | <br /> | 326 | <br /> |
| 327 | {{ list.teacherId.name}} | 327 | {{ list.teacherId.name}} |
| 328 | <br /> | 328 | <br /> |
| 329 | <span> | 329 | <span> |
| 330 | <v-tooltip top> | 330 | <v-tooltip top> |
| 331 | <img | 331 | <img |
| 332 | slot="activator" | 332 | slot="activator" |
| 333 | style="cursor:pointer; width:20px; height:18px; " | 333 | style="cursor:pointer; width:20px; height:18px; " |
| 334 | class="mr-3" | 334 | class="mr-3" |
| 335 | @click="editItem(list, props.item)" | 335 | @click="editItem(list, props.item)" |
| 336 | src="/static/icon/edit.png" | 336 | src="/static/icon/edit.png" |
| 337 | /> | 337 | /> |
| 338 | <span>Edit</span> | 338 | <span>Edit</span> |
| 339 | </v-tooltip> | 339 | </v-tooltip> |
| 340 | <v-tooltip top> | 340 | <v-tooltip top> |
| 341 | <img | 341 | <img |
| 342 | slot="activator" | 342 | slot="activator" |
| 343 | style="cursor:pointer; width:20px; height:18px; " | 343 | style="cursor:pointer; width:20px; height:18px; " |
| 344 | class="mr-3" | 344 | class="mr-3" |
| 345 | @click="deleteItem(props.item)" | 345 | @click="deleteItem(props.item)" |
| 346 | src="/static/icon/delete.png" | 346 | src="/static/icon/delete.png" |
| 347 | /> | 347 | /> |
| 348 | <span>Delete</span> | 348 | <span>Delete</span> |
| 349 | </v-tooltip> | 349 | </v-tooltip> |
| 350 | </span> | 350 | </span> |
| 351 | </td> | 351 | </td> |
| 352 | </tr> | 352 | </tr> |
| 353 | </template> | 353 | </template> |
| 354 | </v-data-table> | 354 | </v-data-table> |
| 355 | </div> | 355 | </div> |
| 356 | </div> | 356 | </div> |
| 357 | </div> | 357 | </div> |
| 358 | </tbody> | 358 | </tbody> |
| 359 | </table> | 359 | </table> |
| 360 | </div> | 360 | </div> |
| 361 | </div> | 361 | </div> |
| 362 | </div> | 362 | </div> |
| 363 | </div> | 363 | </div> |
| 364 | </div> | 364 | </div> |
| 365 | </div> | 365 | </div> |
| 366 | <!-- ****** ADD MULTIPLE Subject ****** --> | 366 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 367 | <v-snackbar | 367 | <v-snackbar |
| 368 | :timeout="timeout" | 368 | :timeout="timeout" |
| 369 | :top="y === 'top'" | 369 | :top="y === 'top'" |
| 370 | :right="x === 'right'" | 370 | :right="x === 'right'" |
| 371 | :vertical="mode === 'vertical'" | 371 | :vertical="mode === 'vertical'" |
| 372 | v-model="snackbar" | 372 | v-model="snackbar" |
| 373 | :color="color" | 373 | :color="color" |
| 374 | >{{ text }}</v-snackbar> | 374 | >{{ text }}</v-snackbar> |
| 375 | <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent> | 375 | <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent> |
| 376 | v-if="addRoutineDialog" | 376 | v-if="addRoutineDialog" |
| 377 | <v-card flat class="card-style pa-2" dark> | 377 | <v-card flat class="Card-style pa-2"> |
| 378 | <v-layout> | 378 | <v-layout> |
| 379 | <v-flex xs12> | 379 | <v-flex xs12> |
| 380 | <label class="title text-xs-center">Add Routine</label> | 380 | <label class="title text-xs-center">Add Routine</label> |
| 381 | <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon> | 381 | <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | </v-layout> | 383 | </v-layout> |
| 384 | <v-container fluid fill-height> | 384 | <v-container fluid fill-height> |
| 385 | <v-layout align-center> | 385 | <v-layout align-center> |
| 386 | <v-flex xs12> | 386 | <v-flex xs12> |
| 387 | <v-form ref="form" v-model="valid" lazy-validation> | 387 | <v-form ref="form" v-model="valid" lazy-validation> |
| 388 | <v-layout> | 388 | <v-layout> |
| 389 | <v-flex xs4 sm4 class="pt-4 subheading"> | 389 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 390 | <label class="right">School Year :</label> | 390 | <label class="right">School Year :</label> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | <v-flex xs8 sm8 class="ml-3"> | 392 | <v-flex xs8 sm8 class="ml-3"> |
| 393 | <v-text-field | 393 | <v-text-field |
| 394 | label="fill your year" | 394 | label="fill your year" |
| 395 | :rules="schoolRules" | 395 | :rules="schoolRules" |
| 396 | v-model="addRoutine.schoolYear" | 396 | v-model="addRoutine.schoolYear" |
| 397 | ></v-text-field> | 397 | ></v-text-field> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | <v-layout> | 400 | <v-layout> |
| 401 | <v-flex xs4 sm4 class="pt-4 subheading"> | 401 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 402 | <label class="right">Class :</label> | 402 | <label class="right">Class :</label> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | <v-flex xs8 sm8 class="ml-3"> | 404 | <v-flex xs8 sm8 class="ml-3"> |
| 405 | <v-select | 405 | <v-select |
| 406 | :items="classList" | 406 | :items="classList" |
| 407 | item-text="classNum" | 407 | item-text="classNum" |
| 408 | item-value="_id" | 408 | item-value="_id" |
| 409 | v-model="addRoutine.classId" | 409 | v-model="addRoutine.classId" |
| 410 | label="Select Class" | 410 | label="Select Class" |
| 411 | :rules="classRules" | 411 | :rules="classRules" |
| 412 | @change="getSections(addRoutine.classId)" | 412 | @change="getSections(addRoutine.classId)" |
| 413 | class="pl-2" | 413 | class="pl-2" |
| 414 | required | 414 | required |
| 415 | ></v-select> | 415 | ></v-select> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | <v-layout> | 418 | <v-layout> |
| 419 | <v-flex xs4 sm4 class="pt-4 subheading"> | 419 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 420 | <label class="right">Section :</label> | 420 | <label class="right">Section :</label> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | <v-flex xs8 sm8 class="ml-3"> | 422 | <v-flex xs8 sm8 class="ml-3"> |
| 423 | <v-select | 423 | <v-select |
| 424 | :items="addSection" | 424 | :items="addSection" |
| 425 | item-text="name" | 425 | item-text="name" |
| 426 | item-value="_id" | 426 | item-value="_id" |
| 427 | v-model="addRoutine.sectionId" | 427 | v-model="addRoutine.sectionId" |
| 428 | label="Select Section" | 428 | label="Select Section" |
| 429 | :rules="sectionRules" | 429 | :rules="sectionRules" |
| 430 | @change="getClassSubject(addRoutine.classId)" | 430 | @change="getClassSubject(addRoutine.classId)" |
| 431 | class="px-2" | 431 | class="px-2" |
| 432 | required | 432 | required |
| 433 | ></v-select> | 433 | ></v-select> |
| 434 | </v-flex> | 434 | </v-flex> |
| 435 | </v-layout> | 435 | </v-layout> |
| 436 | <v-layout> | 436 | <v-layout> |
| 437 | <v-flex xs3 sm4 class="pt-4 subheading"> | 437 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 438 | <label class="right">Subject :</label> | 438 | <label class="right">Subject :</label> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | <v-flex xs8 sm8 class="ml-2"> | 440 | <v-flex xs8 sm8 class="ml-2"> |
| 441 | <v-select | 441 | <v-select |
| 442 | :items="subjectList.subjects" | 442 | :items="subjectList.subjects" |
| 443 | label="Select your subject" | 443 | label="Select your subject" |
| 444 | v-model="addRoutine.subjectName" | 444 | v-model="addRoutine.subjectName" |
| 445 | item-text="subjectName" | 445 | item-text="subjectName" |
| 446 | item-value="subjectName" | 446 | item-value="subjectName" |
| 447 | :rules="subjectRules" | 447 | :rules="subjectRules" |
| 448 | required | 448 | required |
| 449 | ></v-select> | 449 | ></v-select> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | </v-layout> | 451 | </v-layout> |
| 452 | <v-layout> | 452 | <v-layout> |
| 453 | <v-flex xs3 sm4 class="pt-4 subheading"> | 453 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 454 | <label class="right">Day :</label> | 454 | <label class="right">Day :</label> |
| 455 | </v-flex> | 455 | </v-flex> |
| 456 | <v-flex xs8 sm8 class="ml-2"> | 456 | <v-flex xs8 sm8 class="ml-2"> |
| 457 | <v-select | 457 | <v-select |
| 458 | :items="day" | 458 | :items="day" |
| 459 | label="Select your day" | 459 | label="Select your day" |
| 460 | v-model="addRoutine.day" | 460 | v-model="addRoutine.day" |
| 461 | item-text="text" | 461 | item-text="text" |
| 462 | :rules="dayRules" | 462 | :rules="dayRules" |
| 463 | required | 463 | required |
| 464 | ></v-select> | 464 | ></v-select> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | </v-layout> | 466 | </v-layout> |
| 467 | <v-layout> | 467 | <v-layout> |
| 468 | <v-flex xs4 sm4 class="pt-4 subheading"> | 468 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 469 | <label class="right">Teacher Name :</label> | 469 | <label class="right">Teacher Name :</label> |
| 470 | </v-flex> | 470 | </v-flex> |
| 471 | <v-flex xs8 sm8 class="ml-3"> | 471 | <v-flex xs8 sm8 class="ml-3"> |
| 472 | <v-select | 472 | <v-select |
| 473 | v-model="addRoutine.teacherId" | 473 | v-model="addRoutine.teacherId" |
| 474 | label="Select your teacher" | 474 | label="Select your teacher" |
| 475 | type="text" | 475 | type="text" |
| 476 | :items="teacherList" | 476 | :items="teacherList" |
| 477 | item-text="name" | 477 | item-text="name" |
| 478 | item-value="_id" | 478 | item-value="_id" |
| 479 | :rules="teacherRules" | 479 | :rules="teacherRules" |
| 480 | required | 480 | required |
| 481 | ></v-select> | 481 | ></v-select> |
| 482 | </v-flex> | 482 | </v-flex> |
| 483 | </v-layout> | 483 | </v-layout> |
| 484 | <v-layout> | 484 | <v-layout> |
| 485 | <v-flex xs4 class="pt-4 subheading"> | 485 | <v-flex xs4 class="pt-4 subheading"> |
| 486 | <label class="right">Starting time:</label> | 486 | <label class="right">Starting time:</label> |
| 487 | </v-flex> | 487 | </v-flex> |
| 488 | <v-flex xs8 sm6 class="ml-3"> | 488 | <v-flex xs8 sm6 class="ml-3"> |
| 489 | <v-menu | 489 | <v-menu |
| 490 | ref="menuA" | 490 | ref="menuA" |
| 491 | :close-on-content-click="false" | 491 | :close-on-content-click="false" |
| 492 | v-model="menu2" | 492 | v-model="menu2" |
| 493 | :nudge-right="40" | 493 | :nudge-right="40" |
| 494 | :return-value.sync="addRoutine.startingTime" | 494 | :return-value.sync="addRoutine.startingTime" |
| 495 | lazy | 495 | lazy |
| 496 | transition="scale-transition" | 496 | transition="scale-transition" |
| 497 | offset-y | 497 | offset-y |
| 498 | full-width | 498 | full-width |
| 499 | max-width="290px" | 499 | max-width="290px" |
| 500 | min-width="290px" | 500 | min-width="290px" |
| 501 | > | 501 | > |
| 502 | <v-text-field | 502 | <v-text-field |
| 503 | slot="activator" | 503 | slot="activator" |
| 504 | v-model="addRoutine.startingTime" | 504 | v-model="addRoutine.startingTime" |
| 505 | label="Select your starting time" | 505 | label="Select your starting time" |
| 506 | append-icon="access_time" | 506 | append-icon="access_time" |
| 507 | :rules="timeInRules" | 507 | :rules="timeInRules" |
| 508 | readonly | 508 | readonly |
| 509 | ></v-text-field> | 509 | ></v-text-field> |
| 510 | <v-time-picker | 510 | <v-time-picker |
| 511 | v-model="addRoutine.startingTime" | 511 | v-model="addRoutine.startingTime" |
| 512 | @change="$refs.menuA.save(addRoutine.startingTime)" | 512 | @change="$refs.menuA.save(addRoutine.startingTime)" |
| 513 | ></v-time-picker> | 513 | ></v-time-picker> |
| 514 | </v-menu> | 514 | </v-menu> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | </v-layout> | 516 | </v-layout> |
| 517 | <v-layout> | 517 | <v-layout> |
| 518 | <v-flex xs4 class="pt-4 subheading"> | 518 | <v-flex xs4 class="pt-4 subheading"> |
| 519 | <label class="right">Ending Time:</label> | 519 | <label class="right">Ending Time:</label> |
| 520 | </v-flex> | 520 | </v-flex> |
| 521 | <v-flex xs8 sm6 class="ml-3"> | 521 | <v-flex xs8 sm6 class="ml-3"> |
| 522 | <v-menu | 522 | <v-menu |
| 523 | ref="menu" | 523 | ref="menu" |
| 524 | :close-on-content-click="false" | 524 | :close-on-content-click="false" |
| 525 | v-model="menu1" | 525 | v-model="menu1" |
| 526 | :nudge-right="40" | 526 | :nudge-right="40" |
| 527 | :return-value.sync="addRoutine.endingTime" | 527 | :return-value.sync="addRoutine.endingTime" |
| 528 | lazy | 528 | lazy |
| 529 | transition="scale-transition" | 529 | transition="scale-transition" |
| 530 | offset-y | 530 | offset-y |
| 531 | full-width | 531 | full-width |
| 532 | max-width="290px" | 532 | max-width="290px" |
| 533 | min-width="290px" | 533 | min-width="290px" |
| 534 | > | 534 | > |
| 535 | <v-text-field | 535 | <v-text-field |
| 536 | slot="activator" | 536 | slot="activator" |
| 537 | v-model="addRoutine.endingTime" | 537 | v-model="addRoutine.endingTime" |
| 538 | label="Select your end time" | 538 | label="Select your end time" |
| 539 | append-icon="access_time" | 539 | append-icon="access_time" |
| 540 | :rules="timeOutRules" | 540 | :rules="timeOutRules" |
| 541 | readonly | 541 | readonly |
| 542 | ></v-text-field> | 542 | ></v-text-field> |
| 543 | <v-time-picker | 543 | <v-time-picker |
| 544 | v-model="addRoutine.endingTime" | 544 | v-model="addRoutine.endingTime" |
| 545 | @change="$refs.menu.save(addRoutine.endingTime)" | 545 | @change="$refs.menu.save(addRoutine.endingTime)" |
| 546 | ></v-time-picker> | 546 | ></v-time-picker> |
| 547 | </v-menu> | 547 | </v-menu> |
| 548 | </v-flex> | 548 | </v-flex> |
| 549 | </v-layout> | 549 | </v-layout> |
| 550 | <v-layout> | 550 | <v-layout> |
| 551 | <v-flex xs4 sm4 class="pt-4 subheading"> | 551 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 552 | <label class="right">Room:</label> | 552 | <label class="right">Room:</label> |
| 553 | </v-flex> | 553 | </v-flex> |
| 554 | <v-flex xs8 sm8 class="ml-3"> | 554 | <v-flex xs8 sm8 class="ml-3"> |
| 555 | <v-text-field | 555 | <v-text-field |
| 556 | label="fill your room" | 556 | label="fill your room" |
| 557 | :rules="roomRules" | 557 | :rules="roomRules" |
| 558 | v-model="addRoutine.room" | 558 | v-model="addRoutine.room" |
| 559 | @keyup.enter="submit" | 559 | @keyup.enter="submit" |
| 560 | ></v-text-field> | 560 | ></v-text-field> |
| 561 | </v-flex> | 561 | </v-flex> |
| 562 | </v-layout> | 562 | </v-layout> |
| 563 | <v-layout> | 563 | <v-layout> |
| 564 | <v-flex xs4 sm4 class="pt-4 subheading"> | 564 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 565 | <label class="right">Period:</label> | 565 | <label class="right">Period:</label> |
| 566 | </v-flex> | 566 | </v-flex> |
| 567 | <v-flex xs8 sm8 class="ml-3"> | 567 | <v-flex xs8 sm8 class="ml-3"> |
| 568 | <v-text-field | 568 | <v-text-field |
| 569 | label="fill your period" | 569 | label="fill your period" |
| 570 | :rules="periodRules" | 570 | :rules="periodRules" |
| 571 | v-model="addRoutine.period" | 571 | v-model="addRoutine.period" |
| 572 | @keyup.enter="submit" | 572 | @keyup.enter="submit" |
| 573 | ></v-text-field> | 573 | ></v-text-field> |
| 574 | </v-flex> | 574 | </v-flex> |
| 575 | </v-layout> | 575 | </v-layout> |
| 576 | <v-layout> | 576 | <v-layout> |
| 577 | <v-flex xs12 sm12> | 577 | <v-flex xs12 sm12> |
| 578 | <v-card-actions> | 578 | <v-card-actions> |
| 579 | <v-spacer></v-spacer> | 579 | <v-spacer></v-spacer> |
| 580 | <v-btn | 580 | <v-btn |
| 581 | @click="create" | 581 | @click="create" |
| 582 | round | 582 | round |
| 583 | dark | 583 | dark |
| 584 | :loading="loading" | 584 | :loading="loading" |
| 585 | class="add-button" | 585 | class="add-button" |
| 586 | >Add Routine</v-btn> | 586 | >Add Routine</v-btn> |
| 587 | </v-card-actions> | 587 | </v-card-actions> |
| 588 | </v-flex> | 588 | </v-flex> |
| 589 | </v-layout> | 589 | </v-layout> |
| 590 | </v-form> | 590 | </v-form> |
| 591 | </v-flex> | 591 | </v-flex> |
| 592 | </v-layout> | 592 | </v-layout> |
| 593 | </v-container> | 593 | </v-container> |
| 594 | </v-card> | 594 | </v-card> |
| 595 | </v-dialog> | 595 | </v-dialog> |
| 596 | <div class="loader" v-if="showLoader"> | 596 | <div class="loader" v-if="showLoader"> |
| 597 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 597 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 598 | </div> | 598 | </div> |
| 599 | </v-container> | 599 | </v-container> |
| 600 | </template> | 600 | </template> |
| 601 | 601 | ||
| 602 | <script> | 602 | <script> |
| 603 | import http from "@/Services/http.js"; | 603 | import http from "@/Services/http.js"; |
| 604 | import Util from "@/util"; | 604 | import Util from "@/util"; |
| 605 | 605 | ||
| 606 | export default { | 606 | export default { |
| 607 | data: () => ({ | 607 | data: () => ({ |
| 608 | snackbar: false, | 608 | snackbar: false, |
| 609 | y: "top", | 609 | y: "top", |
| 610 | x: "right", | 610 | x: "right", |
| 611 | role: "", | 611 | role: "", |
| 612 | mode: "", | 612 | mode: "", |
| 613 | timeout: 3000, | 613 | timeout: 3000, |
| 614 | text: "", | 614 | text: "", |
| 615 | color: "", | 615 | color: "", |
| 616 | show: true, | 616 | show: true, |
| 617 | showSearch: false, | 617 | showSearch: false, |
| 618 | showLoader: false, | 618 | showLoader: false, |
| 619 | loading: false, | 619 | loading: false, |
| 620 | editLoading: false, | 620 | editLoading: false, |
| 621 | date: null, | 621 | date: null, |
| 622 | search: "", | 622 | search: "", |
| 623 | editRoutineDialog: false, | 623 | editRoutineDialog: false, |
| 624 | valid: true, | 624 | valid: true, |
| 625 | validEditRoutine: true, | 625 | validEditRoutine: true, |
| 626 | addRoutineDialog: false, | 626 | addRoutineDialog: false, |
| 627 | showTable: false, | 627 | showTable: false, |
| 628 | hideTable: true, | 628 | hideTable: true, |
| 629 | name: "", | 629 | name: "", |
| 630 | 630 | ||
| 631 | day: [ | 631 | day: [ |
| 632 | "Monday", | 632 | "Monday", |
| 633 | "Tuesday", | 633 | "Tuesday", |
| 634 | "Wednesday", | 634 | "Wednesday", |
| 635 | "Thursday", | 635 | "Thursday", |
| 636 | "Friday", | 636 | "Friday", |
| 637 | "Saturday", | 637 | "Saturday", |
| 638 | "Sunday", | 638 | "Sunday", |
| 639 | ], | 639 | ], |
| 640 | 640 | ||
| 641 | token: "", | 641 | token: "", |
| 642 | 642 | ||
| 643 | menu1: false, | 643 | menu1: false, |
| 644 | menu2: false, | 644 | menu2: false, |
| 645 | menu4: false, | 645 | menu4: false, |
| 646 | menu3: false, | 646 | menu3: false, |
| 647 | 647 | ||
| 648 | schoolRules: [(v) => !!v || "School Year is required"], | 648 | schoolRules: [(v) => !!v || "School Year is required"], |
| 649 | classRules: [(v) => !!v || " Class Name is required"], | 649 | classRules: [(v) => !!v || " Class Name is required"], |
| 650 | teacherRules: [(v) => !!v || " Teacher Name is required"], | 650 | teacherRules: [(v) => !!v || " Teacher Name is required"], |
| 651 | sectionRules: [(v) => !!v || "Section is required"], | 651 | sectionRules: [(v) => !!v || "Section is required"], |
| 652 | studentRules: [(v) => !!v || " Student is required"], | 652 | studentRules: [(v) => !!v || " Student is required"], |
| 653 | finalRules: [(v) => !!v || "Final MArk is required"], | 653 | finalRules: [(v) => !!v || "Final MArk is required"], |
| 654 | subjectRules: [(v) => !!v || " Subject Name is required"], | 654 | subjectRules: [(v) => !!v || " Subject Name is required"], |
| 655 | dayRules: [(v) => !!v || "Day is required"], | 655 | dayRules: [(v) => !!v || "Day is required"], |
| 656 | timeInRules: [(v) => !!v || "Start Time is required"], | 656 | timeInRules: [(v) => !!v || "Start Time is required"], |
| 657 | timeOutRules: [(v) => !!v || "End Time is required"], | 657 | timeOutRules: [(v) => !!v || "End Time is required"], |
| 658 | roomRules: [(v) => !!v || "Room is required"], | 658 | roomRules: [(v) => !!v || "Room is required"], |
| 659 | periodRules: [(v) => !!v || "Period is required"], | 659 | periodRules: [(v) => !!v || "Period is required"], |
| 660 | 660 | ||
| 661 | classList: [], | 661 | classList: [], |
| 662 | addSection: [], | 662 | addSection: [], |
| 663 | subjectList: [], | 663 | subjectList: [], |
| 664 | teacherList: [], | 664 | teacherList: [], |
| 665 | titleRules: [], | 665 | titleRules: [], |
| 666 | markRules: [], | 666 | markRules: [], |
| 667 | typeRules: [], | 667 | typeRules: [], |
| 668 | routineList: [], | 668 | routineList: [], |
| 669 | editedIndex: -1, | 669 | editedIndex: -1, |
| 670 | addRoutine: {}, | 670 | addRoutine: {}, |
| 671 | addRoutineList: {}, | 671 | addRoutineList: {}, |
| 672 | startingTime: "", | 672 | startingTime: "", |
| 673 | editedItem: {}, | 673 | editedItem: {}, |
| 674 | }), | 674 | }), |
| 675 | watch: { | 675 | watch: { |
| 676 | addRoutineDialog: function (val) { | 676 | addRoutineDialog: function (val) { |
| 677 | if (!val) { | 677 | if (!val) { |
| 678 | this.addRoutine = []; | 678 | this.addRoutine = []; |
| 679 | } | 679 | } |
| 680 | }, | 680 | }, |
| 681 | }, | 681 | }, |
| 682 | methods: { | 682 | methods: { |
| 683 | editItem(item, routineData) { | 683 | editItem(item, routineData) { |
| 684 | this.editedIndex = this.routineList; | 684 | this.editedIndex = this.routineList; |
| 685 | this.editedItem = Object.assign({}, item); | 685 | this.editedItem = Object.assign({}, item); |
| 686 | this.editedItem.lectureRoutineId = item._id; | 686 | this.editedItem.lectureRoutineId = item._id; |
| 687 | this.editedItem.routineId = routineData._id; | 687 | this.editedItem.routineId = routineData._id; |
| 688 | this.dialog = true; | 688 | this.dialog = true; |
| 689 | this.editRoutineDialog = true; | 689 | this.editRoutineDialog = true; |
| 690 | }, | 690 | }, |
| 691 | deleteItem(item) { | 691 | deleteItem(item) { |
| 692 | let deleteLecture = { | 692 | let deleteLecture = { |
| 693 | routineId: item._id, | 693 | routineId: item._id, |
| 694 | lectureId: item.lectureRoutine[0]._id, | 694 | lectureId: item.lectureRoutine[0]._id, |
| 695 | }; | 695 | }; |
| 696 | http() | 696 | http() |
| 697 | .delete( | 697 | .delete( |
| 698 | "/deleteRoutineLecture", | 698 | "/deleteRoutineLecture", |
| 699 | confirm("Are you sure you want to delete this?") && { | 699 | confirm("Are you sure you want to delete this?") && { |
| 700 | params: deleteLecture, | 700 | params: deleteLecture, |
| 701 | } | 701 | } |
| 702 | ) | 702 | ) |
| 703 | .then((response) => { | 703 | .then((response) => { |
| 704 | this.snackbar = true; | 704 | this.snackbar = true; |
| 705 | this.text = "Successfully delete Existing Routine"; | 705 | this.text = "Successfully delete Existing Routine"; |
| 706 | this.color = "green"; | 706 | this.color = "green"; |
| 707 | this.getRoutineList(); | 707 | this.getRoutineList(); |
| 708 | }) | 708 | }) |
| 709 | .catch((error) => { | 709 | .catch((error) => { |
| 710 | this.snackbar = true; | 710 | this.snackbar = true; |
| 711 | this.text = error.response.data.message; | 711 | this.text = error.response.data.message; |
| 712 | this.color = "error"; | 712 | this.color = "error"; |
| 713 | }); | 713 | }); |
| 714 | }, | 714 | }, |
| 715 | close() { | 715 | close() { |
| 716 | this.editRoutineDialog = false; | 716 | this.editRoutineDialog = false; |
| 717 | }, | 717 | }, |
| 718 | closeAddRoutineModel() { | 718 | closeAddRoutineModel() { |
| 719 | this.addRoutineDialog = false; | 719 | this.addRoutineDialog = false; |
| 720 | this.classList = []; | 720 | this.classList = []; |
| 721 | this.addRoutine = []; | 721 | this.addRoutine = []; |
| 722 | }, | 722 | }, |
| 723 | create() { | 723 | create() { |
| 724 | var routineData = { | 724 | var routineData = { |
| 725 | schoolYear: this.addRoutine.schoolYear, | 725 | schoolYear: this.addRoutine.schoolYear, |
| 726 | classId: this.addRoutine.classId, | 726 | classId: this.addRoutine.classId, |
| 727 | sectionId: this.addRoutine.sectionId, | 727 | sectionId: this.addRoutine.sectionId, |
| 728 | day: this.addRoutine.day, | 728 | day: this.addRoutine.day, |
| 729 | lectureRoutine: [], | 729 | lectureRoutine: [], |
| 730 | }; | 730 | }; |
| 731 | if (this.$refs.form.validate()) { | 731 | if (this.$refs.form.validate()) { |
| 732 | routineData.lectureRoutine.push({ | 732 | routineData.lectureRoutine.push({ |
| 733 | teacherId: this.addRoutine.teacherId, | 733 | teacherId: this.addRoutine.teacherId, |
| 734 | startingTime: this.addRoutine.startingTime, | 734 | startingTime: this.addRoutine.startingTime, |
| 735 | endingTime: this.addRoutine.endingTime, | 735 | endingTime: this.addRoutine.endingTime, |
| 736 | room: this.addRoutine.room, | 736 | room: this.addRoutine.room, |
| 737 | period: this.addRoutine.period, | 737 | period: this.addRoutine.period, |
| 738 | subjectName: this.addRoutine.subjectName, | 738 | subjectName: this.addRoutine.subjectName, |
| 739 | }); | 739 | }); |
| 740 | http() | 740 | http() |
| 741 | .post("/createRoutine", routineData) | 741 | .post("/createRoutine", routineData) |
| 742 | .then((response) => { | 742 | .then((response) => { |
| 743 | this.text = "Routine added successfully"; | 743 | this.text = "Routine added successfully"; |
| 744 | // this.clear(); | 744 | // this.clear(); |
| 745 | this.snackbar = true; | 745 | this.snackbar = true; |
| 746 | this.color = "green"; | 746 | this.color = "green"; |
| 747 | // console.log("===this.addRoutine===", this.addRoutine); | 747 | // console.log("===this.addRoutine===", this.addRoutine); |
| 748 | http() | 748 | http() |
| 749 | .get( | 749 | .get( |
| 750 | "/getRoutineList", | 750 | "/getRoutineList", |
| 751 | { | 751 | { |
| 752 | params: { | 752 | params: { |
| 753 | classId: this.addRoutine.classId, | 753 | classId: this.addRoutine.classId, |
| 754 | sectionId: this.addRoutine.sectionId, | 754 | sectionId: this.addRoutine.sectionId, |
| 755 | }, | 755 | }, |
| 756 | }, | 756 | }, |
| 757 | { | 757 | { |
| 758 | headers: { Authorization: "Bearer " + this.token }, | 758 | headers: { Authorization: "Bearer " + this.token }, |
| 759 | } | 759 | } |
| 760 | ) | 760 | ) |
| 761 | .then((response) => { | 761 | .then((response) => { |
| 762 | this.routineList = response.data.data; | 762 | this.routineList = response.data.data; |
| 763 | this.showLoader = false; | 763 | this.showLoader = false; |
| 764 | this.showTable = true; | 764 | this.showTable = true; |
| 765 | this.hideTable = false; | 765 | this.hideTable = false; |
| 766 | }) | 766 | }) |
| 767 | .catch((err) => { | 767 | .catch((err) => { |
| 768 | // console.log("err====>", err); | 768 | // console.log("err====>", err); |
| 769 | this.snackbar = true; | 769 | this.snackbar = true; |
| 770 | this.text = error.response.data.message; | 770 | this.text = error.response.data.message; |
| 771 | this.color = "error"; | 771 | this.color = "error"; |
| 772 | }); | 772 | }); |
| 773 | this.addRoutineDialog = false; | 773 | this.addRoutineDialog = false; |
| 774 | }) | 774 | }) |
| 775 | .catch((error) => { | 775 | .catch((error) => { |
| 776 | // console.log(error); | 776 | // console.log(error); |
| 777 | this.snackbar = true; | 777 | this.snackbar = true; |
| 778 | this.text = error.response.data.message; | 778 | this.text = error.response.data.message; |
| 779 | this.color = "error"; | 779 | this.color = "error"; |
| 780 | }); | 780 | }); |
| 781 | } | 781 | } |
| 782 | }, | 782 | }, |
| 783 | clear() { | 783 | clear() { |
| 784 | this.$refs.form.reset(); | 784 | this.$refs.form.reset(); |
| 785 | }, | 785 | }, |
| 786 | 786 | ||
| 787 | update() { | 787 | update() { |
| 788 | if (this.$refs.formEditRoutine.validate()) { | 788 | if (this.$refs.formEditRoutine.validate()) { |
| 789 | let editRoutine = { | 789 | let editRoutine = { |
| 790 | routineId: this.editedItem.routineId, | 790 | routineId: this.editedItem.routineId, |
| 791 | lectureRoutineId: this.editedItem.lectureRoutineId, | 791 | lectureRoutineId: this.editedItem.lectureRoutineId, |
| 792 | subjectName: this.editedItem.subjectName, | 792 | subjectName: this.editedItem.subjectName, |
| 793 | teacherId: this.editedItem.teacherId._id, | 793 | teacherId: this.editedItem.teacherId._id, |
| 794 | startingTime: this.editedItem.startingTime, | 794 | startingTime: this.editedItem.startingTime, |
| 795 | endingTime: this.editedItem.endingTime, | 795 | endingTime: this.editedItem.endingTime, |
| 796 | room: this.editedItem.room, | 796 | room: this.editedItem.room, |
| 797 | period: this.editedItem.period, | 797 | period: this.editedItem.period, |
| 798 | }; | 798 | }; |
| 799 | this.editLoading = true; | 799 | this.editLoading = true; |
| 800 | http() | 800 | http() |
| 801 | .put("/updateRoutine", editRoutine) | 801 | .put("/updateRoutine", editRoutine) |
| 802 | .then((response) => { | 802 | .then((response) => { |
| 803 | this.snackbar = true; | 803 | this.snackbar = true; |
| 804 | this.text = "Successfully Edit Existing Routine"; | 804 | this.text = "Successfully Edit Existing Routine"; |
| 805 | this.color = "green"; | 805 | this.color = "green"; |
| 806 | this.editLoading = false; | 806 | this.editLoading = false; |
| 807 | this.editRoutineDialog = false; | 807 | this.editRoutineDialog = false; |
| 808 | this.getRoutineList(); | 808 | this.getRoutineList(); |
| 809 | // http() | 809 | // http() |
| 810 | // .get( | 810 | // .get( |
| 811 | // "/getRoutineList", | 811 | // "/getRoutineList", |
| 812 | // { | 812 | // { |
| 813 | // params: { | 813 | // params: { |
| 814 | // classId: this.addRoutine.classId, | 814 | // classId: this.addRoutine.classId, |
| 815 | // sectionId: this.addRoutine.sectionId | 815 | // sectionId: this.addRoutine.sectionId |
| 816 | // } | 816 | // } |
| 817 | // }, | 817 | // }, |
| 818 | // { | 818 | // { |
| 819 | // headers: { Authorization: "Bearer " + this.token } | 819 | // headers: { Authorization: "Bearer " + this.token } |
| 820 | // } | 820 | // } |
| 821 | // ) | 821 | // ) |
| 822 | // .then(response => { | 822 | // .then(response => { |
| 823 | // this.routineList = response.data.data; | 823 | // this.routineList = response.data.data; |
| 824 | // this.showLoader = false; | 824 | // this.showLoader = false; |
| 825 | // this.showTable = true; | 825 | // this.showTable = true; |
| 826 | // this.hideTable = false; | 826 | // this.hideTable = false; |
| 827 | // }) | 827 | // }) |
| 828 | // .catch(err => { | 828 | // .catch(err => { |
| 829 | // console.log("err====>", err); | 829 | // console.log("err====>", err); |
| 830 | // }); | 830 | // }); |
| 831 | }) | 831 | }) |
| 832 | .catch((error) => { | 832 | .catch((error) => { |
| 833 | this.editLoading = false; | 833 | this.editLoading = false; |
| 834 | }); | 834 | }); |
| 835 | } | 835 | } |
| 836 | }, | 836 | }, |
| 837 | getClass() { | 837 | getClass() { |
| 838 | http() | 838 | http() |
| 839 | .get("/getClassesList", { | 839 | .get("/getClassesList", { |
| 840 | headers: { Authorization: "Bearer " + this.token }, | 840 | headers: { Authorization: "Bearer " + this.token }, |
| 841 | }) | 841 | }) |
| 842 | .then((response) => { | 842 | .then((response) => { |
| 843 | this.classList = response.data.data; | 843 | this.classList = response.data.data; |
| 844 | }) | 844 | }) |
| 845 | .catch((error) => { | 845 | .catch((error) => { |
| 846 | if (error.response.status === 401) { | 846 | if (error.response.status === 401) { |
| 847 | this.$router.replace({ path: "/" }); | 847 | this.$router.replace({ path: "/" }); |
| 848 | this.$store.dispatch("setToken", null); | 848 | this.$store.dispatch("setToken", null); |
| 849 | this.$store.dispatch("Id", null); | 849 | this.$store.dispatch("Id", null); |
| 850 | } | 850 | } |
| 851 | }); | 851 | }); |
| 852 | }, | 852 | }, |
| 853 | getSections(_id) { | 853 | getSections(_id) { |
| 854 | var token = this.$store.state.token; | 854 | var token = this.$store.state.token; |
| 855 | this.showLoader = true; | 855 | this.showLoader = true; |
| 856 | this.routineList = []; | 856 | this.routineList = []; |
| 857 | http() | 857 | http() |
| 858 | .get( | 858 | .get( |
| 859 | "/getSectionsList", | 859 | "/getSectionsList", |
| 860 | { params: { classId: _id } }, | 860 | { params: { classId: _id } }, |
| 861 | { | 861 | { |
| 862 | headers: { Authorization: "Bearer " + token }, | 862 | headers: { Authorization: "Bearer " + token }, |
| 863 | } | 863 | } |
| 864 | ) | 864 | ) |
| 865 | .then((response) => { | 865 | .then((response) => { |
| 866 | this.addSection = response.data.data; | 866 | this.addSection = response.data.data; |
| 867 | this.showLoader = false; | 867 | this.showLoader = false; |
| 868 | }) | 868 | }) |
| 869 | .catch((err) => { | 869 | .catch((err) => { |
| 870 | this.showLoader = false; | 870 | this.showLoader = false; |
| 871 | }); | 871 | }); |
| 872 | }, | 872 | }, |
| 873 | getClassSubject(_id) { | 873 | getClassSubject(_id) { |
| 874 | this.showLoader = true; | 874 | this.showLoader = true; |
| 875 | // this.classId = this.classId; | 875 | // this.classId = this.classId; |
| 876 | http() | 876 | http() |
| 877 | .get( | 877 | .get( |
| 878 | "/getParticularClass", | 878 | "/getParticularClass", |
| 879 | { params: { classId: _id } }, | 879 | { params: { classId: _id } }, |
| 880 | { | 880 | { |
| 881 | headers: { Authorization: "Bearer " + this.token }, | 881 | headers: { Authorization: "Bearer " + this.token }, |
| 882 | } | 882 | } |
| 883 | ) | 883 | ) |
| 884 | .then((response) => { | 884 | .then((response) => { |
| 885 | this.subjectList = response.data.data; | 885 | this.subjectList = response.data.data; |
| 886 | this.showLoader = false; | 886 | this.showLoader = false; |
| 887 | }) | 887 | }) |
| 888 | .catch((err) => { | 888 | .catch((err) => { |
| 889 | this.showLoader = false; | 889 | this.showLoader = false; |
| 890 | }); | 890 | }); |
| 891 | }, | 891 | }, |
| 892 | getTeacherList() { | 892 | getTeacherList() { |
| 893 | this.showLoader = true; | 893 | this.showLoader = true; |
| 894 | var token = this.$store.state.token; | 894 | var token = this.$store.state.token; |
| 895 | http() | 895 | http() |
| 896 | .get("/getTeachersList", { | 896 | .get("/getTeachersList", { |
| 897 | headers: { Authorization: "Bearer " + token }, | 897 | headers: { Authorization: "Bearer " + token }, |
| 898 | }) | 898 | }) |
| 899 | .then((response) => { | 899 | .then((response) => { |
| 900 | this.teacherList = response.data.data; | 900 | this.teacherList = response.data.data; |
| 901 | this.showLoader = false; | 901 | this.showLoader = false; |
| 902 | // console.log("getTeacherList=====>",this.desserts) | 902 | // console.log("getTeacherList=====>",this.desserts) |
| 903 | }) | 903 | }) |
| 904 | .catch((error) => { | 904 | .catch((error) => { |
| 905 | this.showLoader = false; | 905 | this.showLoader = false; |
| 906 | if (error.response.status === 401) { | 906 | if (error.response.status === 401) { |
| 907 | this.$router.replace({ path: "/" }); | 907 | this.$router.replace({ path: "/" }); |
| 908 | this.$store.dispatch("setToken", null); | 908 | this.$store.dispatch("setToken", null); |
| 909 | this.$store.dispatch("Id", null); | 909 | this.$store.dispatch("Id", null); |
| 910 | } | 910 | } |
| 911 | }); | 911 | }); |
| 912 | }, | 912 | }, |
| 913 | getRoutineList() { | 913 | getRoutineList() { |
| 914 | this.showLoader = true; | 914 | this.showLoader = true; |
| 915 | http() | 915 | http() |
| 916 | .get( | 916 | .get( |
| 917 | "/getRoutineList", | 917 | "/getRoutineList", |
| 918 | { | 918 | { |
| 919 | params: { | 919 | params: { |
| 920 | classId: this.addRoutineList.classId, | 920 | classId: this.addRoutineList.classId, |
| 921 | sectionId: this.addRoutineList.sectionId, | 921 | sectionId: this.addRoutineList.sectionId, |
| 922 | }, | 922 | }, |
| 923 | }, | 923 | }, |
| 924 | { | 924 | { |
| 925 | headers: { Authorization: "Bearer " + this.token }, | 925 | headers: { Authorization: "Bearer " + this.token }, |
| 926 | } | 926 | } |
| 927 | ) | 927 | ) |
| 928 | .then((response) => { | 928 | .then((response) => { |
| 929 | this.routineList = response.data.data; | 929 | this.routineList = response.data.data; |
| 930 | this.showLoader = false; | 930 | this.showLoader = false; |
| 931 | this.showTable = true; | 931 | this.showTable = true; |
| 932 | this.hideTable = false; | 932 | this.hideTable = false; |
| 933 | }) | 933 | }) |
| 934 | .catch((err) => { | 934 | .catch((err) => { |
| 935 | this.showLoader = false; | 935 | this.showLoader = false; |
| 936 | }); | 936 | }); |
| 937 | }, | 937 | }, |
| 938 | displaySearch() { | 938 | displaySearch() { |
| 939 | (this.show = false), (this.showSearch = true); | 939 | (this.show = false), (this.showSearch = true); |
| 940 | }, | 940 | }, |
| 941 | closeSearch() { | 941 | closeSearch() { |
| 942 | this.showSearch = false; | 942 | this.showSearch = false; |
| 943 | this.show = true; | 943 | this.show = true; |
| 944 | this.search = ""; | 944 | this.search = ""; |
| 945 | }, | 945 | }, |
| 946 | }, | 946 | }, |
| 947 | mounted() { | 947 | mounted() { |
| 948 | this.token = this.$store.state.token; | 948 | this.token = this.$store.state.token; |
| 949 | this.getClass(); | 949 | this.getClass(); |
| 950 | this.getTeacherList(); | 950 | this.getTeacherList(); |
| 951 | this.role = this.$store.state.role; | 951 | this.role = this.$store.state.role; |
| 952 | }, | 952 | }, |
| 953 | }; | 953 | }; |
| 954 | </script> | 954 | </script> |
| 955 | 955 | ||
| 956 | <style scoped> | 956 | <style scoped> |
| 957 | html, | 957 | html, |
| 958 | body { | 958 | body { |
| 959 | font-family: "OpenSans Regular"; | 959 | font-family: "OpenSans Regular"; |
| 960 | } | 960 | } |
| 961 | .box .box-body { | 961 | .box .box-body { |
| 962 | padding: 15px; | 962 | padding: 15px; |
| 963 | border-top-left-radius: 0; | 963 | border-top-left-radius: 0; |
| 964 | border-top-right-radius: 0; | 964 | border-top-right-radius: 0; |
| 965 | border-bottom-right-radius: 3px; | 965 | border-bottom-right-radius: 3px; |
| 966 | border-bottom-left-radius: 3px; | 966 | border-bottom-left-radius: 3px; |
| 967 | } | 967 | } |
| 968 | .nav-tabs-custom { | 968 | .nav-tabs-custom { |
| 969 | margin-bottom: 20px; | 969 | margin-bottom: 20px; |
| 970 | background: #fff; | 970 | background: #fff; |
| 971 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); | 971 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); |
| 972 | } | 972 | } |
| 973 | .nav-tabs { | 973 | .nav-tabs { |
| 974 | border-bottom: 1px solid #ddd; | 974 | border-bottom: 1px solid #ddd; |
| 975 | } | 975 | } |
| 976 | .nav { | 976 | .nav { |
| 977 | padding-left: 0; | 977 | padding-left: 0; |
| 978 | list-style: none; | 978 | list-style: none; |
| 979 | } | 979 | } |
| 980 | .tab-content > .active { | 980 | .tab-content > .active { |
| 981 | display: block; | 981 | display: block; |
| 982 | } | 982 | } |
| 983 | .nav-tabs-custom > .nav-tabs > li.active > a { | 983 | .nav-tabs-custom > .nav-tabs > li.active > a { |
| 984 | border-top: 0; | 984 | border-top: 0; |
| 985 | border-left-color: #09a3a3; | 985 | border-left-color: #09a3a3; |
| 986 | border-right-color: #09a3a3; | 986 | border-right-color: #09a3a3; |
| 987 | } | 987 | } |
| 988 | .nav-tabs-custom > .nav-tabs { | 988 | .nav-tabs-custom > .nav-tabs { |
| 989 | background-color: #e5e5e5; | 989 | background-color: #e5e5e5; |
| 990 | margin: 0; | 990 | margin: 0; |
| 991 | border-bottom-color: #e5e5e5; | 991 | border-bottom-color: #e5e5e5; |
| 992 | } | 992 | } |
| 993 | .nav-tabs-custom > .nav-tabs > li:first-of-type { | 993 | .nav-tabs-custom > .nav-tabs > li:first-of-type { |
| 994 | margin-left: 0px; | 994 | margin-left: 0px; |
| 995 | } | 995 | } |
| 996 | .nav-tabs-custom > .nav-tabs > li.active { | 996 | .nav-tabs-custom > .nav-tabs > li.active { |
| 997 | border-bottom-color: #09a3a3; | 997 | border-bottom-color: #09a3a3; |
| 998 | } | 998 | } |
| 999 | .nav-tabs-custom > .nav-tabs > li { | 999 | .nav-tabs-custom > .nav-tabs > li { |
| 1000 | border-bottom: 2px solid transparent; | 1000 | border-bottom: 2px solid transparent; |
| 1001 | border-top: 3px solid transparent; | 1001 | border-top: 3px solid transparent; |
| 1002 | margin-bottom: -2px; | 1002 | margin-bottom: -2px; |
| 1003 | margin-right: 5px; | 1003 | margin-right: 5px; |
| 1004 | } | 1004 | } |
| 1005 | .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { | 1005 | .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { |
| 1006 | border-left-width: 0; | 1006 | border-left-width: 0; |
| 1007 | } | 1007 | } |
| 1008 | .nav-tabs-custom > .nav-tabs > li.active > a { | 1008 | .nav-tabs-custom > .nav-tabs > li.active > a { |
| 1009 | border-top: 0; | 1009 | border-top: 0; |
| 1010 | border-bottom-color: #09a3a3; | 1010 | border-bottom-color: #09a3a3; |
| 1011 | } | 1011 | } |
| 1012 | .nav-tabs-custom > .nav-tabs > li.active > a, | 1012 | .nav-tabs-custom > .nav-tabs > li.active > a, |
| 1013 | .nav-tabs-custom > .nav-tabs > li.active:hover > a { | 1013 | .nav-tabs-custom > .nav-tabs > li.active:hover > a { |
| 1014 | background-color: #e5e5e5; | 1014 | background-color: #e5e5e5; |
| 1015 | border: 0px; | 1015 | border: 0px; |
| 1016 | color: #000000db; | 1016 | color: #000000db; |
| 1017 | } | 1017 | } |
| 1018 | .nav-tabs-custom > .nav-tabs > li > a, | 1018 | .nav-tabs-custom > .nav-tabs > li > a, |
| 1019 | .nav-tabs-custom > .nav-tabs > li > a:hover { | 1019 | .nav-tabs-custom > .nav-tabs > li > a:hover { |
| 1020 | border-radius: 0 !important; | 1020 | border-radius: 0 !important; |
| 1021 | } | 1021 | } |
| 1022 | .nav-tabs-custom > .tab-content { | 1022 | .nav-tabs-custom > .tab-content { |
| 1023 | background: #fff; | 1023 | background: #fff; |
| 1024 | padding: 10px; | 1024 | padding: 10px; |
| 1025 | } | 1025 | } |
| 1026 | .page-header { | 1026 | .page-header { |
| 1027 | margin: 10px 0 20px 0; | 1027 | margin: 10px 0 20px 0; |
| 1028 | padding: 0px 0px 16px; | 1028 | padding: 0px 0px 16px; |
| 1029 | font-size: 22px; | 1029 | font-size: 22px; |
| 1030 | border: none; | 1030 | border: none; |
| 1031 | } | 1031 | } |
| 1032 | .table { | 1032 | .table { |
| 1033 | width: 100%; | 1033 | width: 100%; |
| 1034 | border-collapse: collapse; | 1034 | border-collapse: collapse; |
| 1035 | border-spacing: 0; | 1035 | border-spacing: 0; |
| 1036 | } | 1036 | } |
| 1037 | .table > tbody > tr > th, | 1037 | .table > tbody > tr > th, |
| 1038 | .table > tfoot > tr > th, | 1038 | .table > tfoot > tr > th, |
| 1039 | .table > tbody > tr > td, | 1039 | .table > tbody > tr > td, |
| 1040 | .table > tfoot > tr > td { | 1040 | .table > tfoot > tr > td { |
| 1041 | padding: 8px; | 1041 | padding: 8px; |
| 1042 | line-height: 1.428571429; | 1042 | line-height: 1.428571429; |
| 1043 | vertical-align: top; | 1043 | vertical-align: top; |
| 1044 | border-top: 1px solid #ddd; | 1044 | border-top: 1px solid #ddd; |
| 1045 | } | 1045 | } |
| 1046 | .nav::before, | 1046 | .nav::before, |
| 1047 | .nav::after { | 1047 | .nav::after { |
| 1048 | display: table; | 1048 | display: table; |
| 1049 | content: ""; | 1049 | content: ""; |
| 1050 | } | 1050 | } |
| 1051 | .box .box-body .table { | 1051 | .box .box-body .table { |
| 1052 | margin-bottom: 0; | 1052 | margin-bottom: 0; |
| 1053 | } | 1053 | } |
| 1054 | .table-bordered { | 1054 | .table-bordered { |
| 1055 | border: 1px solid #e2e7eb; | 1055 | border: 1px solid #e2e7eb; |
| 1056 | } | 1056 | } |
| 1057 | .table-striped > tbody > tr:nth-child(2n + 1) > td, | 1057 | .table-striped > tbody > tr:nth-child(2n + 1) > td, |
| 1058 | .table-striped > tbody > tr:nth-child(2n + 1) > th { | 1058 | .table-striped > tbody > tr:nth-child(2n + 1) > th { |
| 1059 | background-color: #f0f3f5; | 1059 | background-color: #f0f3f5; |
| 1060 | } | 1060 | } |
| 1061 | .table-bordered > tbody > v-data-table > template > tr > th, | 1061 | .table-bordered > tbody > v-data-table > template > tr > th, |
| 1062 | .table-bordered > tbody > tr > td { | 1062 | .table-bordered > tbody > tr > td { |
| 1063 | border-color: #e2e7eb; | 1063 | border-color: #e2e7eb; |
| 1064 | font-size: 12px; | 1064 | font-size: 12px; |
| 1065 | } | 1065 | } |
| 1066 | .table-bordered > tbody > tr > td { | 1066 | .table-bordered > tbody > tr > td { |
| 1067 | color: #707070; | 1067 | color: #707070; |
| 1068 | } | 1068 | } |
| 1069 | /* | 1069 | /* |
| 1070 | .table-bordered > tbody > tr > th, | 1070 | .table-bordered > tbody > tr > th, |
| 1071 | .table-bordered > tfoot > tr > th, | 1071 | .table-bordered > tfoot > tr > th, |
| 1072 | .table-bordered > tbody > tr > td, | 1072 | .table-bordered > tbody > tr > td, |
| 1073 | .table-bordered > tfoot > tr > td { | 1073 | .table-bordered > tfoot > tr > td { |
| 1074 | border: 1px solid #ddd; | 1074 | border: 1px solid #ddd; |
| 1075 | } */ | 1075 | } */ |
| 1076 | .mCustomScrollbar.mCS_no_scrollbar, | 1076 | .mCustomScrollbar.mCS_no_scrollbar, |
| 1077 | .mCustomScrollbar.mCS_touch_action { | 1077 | .mCustomScrollbar.mCS_touch_action { |
| 1078 | touch-action: auto; | 1078 | touch-action: auto; |
| 1079 | } | 1079 | } |
| 1080 | .mCSB_scrollTools.mCSB_scrollTools_horizontal { | 1080 | .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
| 1081 | width: auto; | 1081 | width: auto; |
| 1082 | height: 16px; | 1082 | height: 16px; |
| 1083 | top: auto; | 1083 | top: auto; |
| 1084 | right: 0; | 1084 | right: 0; |
| 1085 | bottom: 0; | 1085 | bottom: 0; |
| 1086 | left: 0; | 1086 | left: 0; |
| 1087 | } | 1087 | } |
| 1088 | .mCSB_scrollTools { | 1088 | .mCSB_scrollTools { |
| 1089 | opacity: 0.75; | 1089 | opacity: 0.75; |
| 1090 | } | 1090 | } |
| 1091 | .mCSB_scrollTools .mCSB_draggerContainer { | 1091 | .mCSB_scrollTools .mCSB_draggerContainer { |
| 1092 | position: absolute; | 1092 | position: absolute; |
| 1093 | height: auto; | 1093 | height: auto; |
| 1094 | top: 0; | 1094 | top: 0; |
| 1095 | left: 0; | 1095 | left: 0; |
| 1096 | bottom: 0; | 1096 | bottom: 0; |
| 1097 | right: 0; | 1097 | right: 0; |
| 1098 | } | 1098 | } |
| 1099 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { | 1099 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { |
| 1100 | height: 100%; | 1100 | height: 100%; |
| 1101 | } | 1101 | } |
| 1102 | .mCSB_scrollTools .mCSB_dragger { | 1102 | .mCSB_scrollTools .mCSB_dragger { |
| 1103 | cursor: pointer; | 1103 | cursor: pointer; |
| 1104 | z-index: 1; | 1104 | z-index: 1; |
| 1105 | } | 1105 | } |
| 1106 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { | 1106 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { |
| 1107 | width: 100%; | 1107 | width: 100%; |
| 1108 | height: 4px; | 1108 | height: 4px; |
| 1109 | margin: 6px auto; | 1109 | margin: 6px auto; |
| 1110 | } | 1110 | } |
| 1111 | .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { | 1111 | .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
| 1112 | background-color: rgba(255, 255, 255, 0.75); | 1112 | background-color: rgba(255, 255, 255, 0.75); |
| 1113 | } | 1113 | } |
| 1114 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { | 1114 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { |
| 1115 | width: 100%; | 1115 | width: 100%; |
| 1116 | height: 2px; | 1116 | height: 2px; |
| 1117 | margin: 7px 0; | 1117 | margin: 7px 0; |
| 1118 | } | 1118 | } |
| 1119 | .mCSB_scrollTools .mCSB_draggerRail { | 1119 | .mCSB_scrollTools .mCSB_draggerRail { |
| 1120 | background-color: rgba(0, 0, 0, 0.4); | 1120 | background-color: rgba(0, 0, 0, 0.4); |
| 1121 | border-radius: 16px; | 1121 | border-radius: 16px; |
| 1122 | } | 1122 | } |
| 1123 | .mCustomScrollBox { | 1123 | .mCustomScrollBox { |
| 1124 | position: relative; | 1124 | position: relative; |
| 1125 | overflow: hidden; | 1125 | overflow: hidden; |
| 1126 | height: 100%; | 1126 | height: 100%; |
| 1127 | max-width: 100%; | 1127 | max-width: 100%; |
| 1128 | outline: none; | 1128 | outline: none; |
| 1129 | direction: ltr; | 1129 | direction: ltr; |
| 1130 | } | 1130 | } |
| 1131 | /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { | 1131 | /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { |
| 1132 | margin-bottom: 0; | 1132 | margin-bottom: 0; |
| 1133 | } | 1133 | } |
| 1134 | .mCSB_horizontal.mCSB_inside > .mCSB_container { | 1134 | .mCSB_horizontal.mCSB_inside > .mCSB_container { |
| 1135 | margin-right: 0; | 1135 | margin-right: 0; |
| 1136 | } */ | 1136 | } */ |
| 1137 | .mCSB_container { | 1137 | .mCSB_container { |
| 1138 | overflow: hidden; | 1138 | overflow: hidden; |
| 1139 | height: auto; | 1139 | height: auto; |
| 1140 | } | 1140 | } |
| 1141 | 1141 | ||
| 1142 | @media (min-width: 768px) { | 1142 | @media (min-width: 768px) { |
| 1143 | .col-sm-12 { | 1143 | .col-sm-12 { |
| 1144 | width: 100%; | 1144 | width: 100%; |
| 1145 | } | 1145 | } |
| 1146 | } | 1146 | } |
| 1147 | </style> | 1147 | </style> |
src/pages/Academic/subject.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Subject ****** --> | 3 | <!-- ****** EDIT Subject ****** --> |
| 4 | <v-dialog v-model="editSubjectDialog" max-width="600px" persistent> | 4 | <v-dialog v-model="editSubjectDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Subject</label> | 8 | <label class="title text-xs-center">Edit Subject</label> |
| 9 | <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> | 13 | <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 class="pt-4 subheading"> | 15 | <v-flex xs4 class="pt-4 subheading"> |
| 16 | <label class="right">Class:</label> | 16 | <label class="right">Class:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 class="ml-3"> | 18 | <v-flex xs8 class="ml-3"> |
| 19 | <v-select | 19 | <v-select |
| 20 | v-model="editedItem.classId" | 20 | v-model="editedItem.classId" |
| 21 | label="Select your class" | 21 | label="Select your class" |
| 22 | type="text" | 22 | type="text" |
| 23 | :items="classList" | 23 | :items="classList" |
| 24 | item-text="classNum" | 24 | item-text="classNum" |
| 25 | item-value="_id" | 25 | item-value="_id" |
| 26 | :rules="classRules" | 26 | :rules="classRules" |
| 27 | required | 27 | required |
| 28 | ></v-select> | 28 | ></v-select> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 sm4 class="pt-4 subheading"> | 32 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 33 | <label class="right">Teacher Name :</label> | 33 | <label class="right">Teacher Name :</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs8 sm8 class="ml-3"> | 35 | <v-flex xs8 sm8 class="ml-3"> |
| 36 | <v-select | 36 | <v-select |
| 37 | v-model="editedItem.teacherId" | 37 | v-model="editedItem.teacherId" |
| 38 | label="Select your teacher" | 38 | label="Select your teacher" |
| 39 | type="text" | 39 | type="text" |
| 40 | :items="teacherList" | 40 | :items="teacherList" |
| 41 | item-text="name" | 41 | item-text="name" |
| 42 | item-value="_id" | 42 | item-value="_id" |
| 43 | :rules="teacherRules" | 43 | :rules="teacherRules" |
| 44 | required | 44 | required |
| 45 | ></v-select> | 45 | ></v-select> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | </v-layout> | 47 | </v-layout> |
| 48 | <v-layout> | 48 | <v-layout> |
| 49 | <v-flex xs4 sm4 class="pt-4 sybheading"> | 49 | <v-flex xs4 sm4 class="pt-4 sybheading"> |
| 50 | <label class="right">Type :</label> | 50 | <label class="right">Type :</label> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex xs8 sm8 class="ml-3"> | 52 | <v-flex xs8 sm8 class="ml-3"> |
| 53 | <v-select | 53 | <v-select |
| 54 | v-model="editedItem.type" | 54 | v-model="editedItem.type" |
| 55 | :items="type" | 55 | :items="type" |
| 56 | label="Select your Type" | 56 | label="Select your Type" |
| 57 | :rules="typeRules" | 57 | :rules="typeRules" |
| 58 | required | 58 | required |
| 59 | ></v-select> | 59 | ></v-select> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 sm4 class="pt-4 subheading"> | 63 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 64 | <label class="right">Pass Mark :</label> | 64 | <label class="right">Pass Mark :</label> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex xs8 sm8 class="ml-3"> | 66 | <v-flex xs8 sm8 class="ml-3"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | label="Fill your Pass Mark" | 68 | label="Fill your Pass Mark" |
| 69 | name="name" | 69 | name="name" |
| 70 | type="text" | 70 | type="text" |
| 71 | :rules="markRules" | 71 | :rules="markRules" |
| 72 | v-model="editedItem.passMarks" | 72 | v-model="editedItem.passMarks" |
| 73 | required | 73 | required |
| 74 | ></v-text-field> | 74 | ></v-text-field> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | </v-layout> | 76 | </v-layout> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-flex xs4 sm4 class="pt-4 subheading"> | 78 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 79 | <label class="right">Final Mark :</label> | 79 | <label class="right">Final Mark :</label> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | <v-flex xs8 sm8 class="ml-3"> | 81 | <v-flex xs8 sm8 class="ml-3"> |
| 82 | <v-text-field | 82 | <v-text-field |
| 83 | label="Fill your final mark" | 83 | label="Fill your final mark" |
| 84 | name="name" | 84 | name="name" |
| 85 | type="text" | 85 | type="text" |
| 86 | :rules="finalRules" | 86 | :rules="finalRules" |
| 87 | v-model="editedItem.finalMarks" | 87 | v-model="editedItem.finalMarks" |
| 88 | required | 88 | required |
| 89 | ></v-text-field> | 89 | ></v-text-field> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | </v-layout> | 91 | </v-layout> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs4 class="pt-4 subheading"> | 93 | <v-flex xs4 class="pt-4 subheading"> |
| 94 | <label class="right">Subject:</label> | 94 | <label class="right">Subject:</label> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | <v-flex xs8 class="ml-3"> | 96 | <v-flex xs8 class="ml-3"> |
| 97 | <v-text-field | 97 | <v-text-field |
| 98 | placeholder="fill your Subject" | 98 | placeholder="fill your Subject" |
| 99 | v-model="editedItem.subjectName" | 99 | v-model="editedItem.subjectName" |
| 100 | :rules="subjectRules" | 100 | :rules="subjectRules" |
| 101 | type="text" | 101 | type="text" |
| 102 | name="email" | 102 | name="email" |
| 103 | required | 103 | required |
| 104 | ></v-text-field> | 104 | ></v-text-field> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs4 sm4 class="pt-4 subheading"> | 108 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 109 | <label class="right">Subject Author :</label> | 109 | <label class="right">Subject Author :</label> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs8 sm8 class="ml-3"> | 111 | <v-flex xs8 sm8 class="ml-3"> |
| 112 | <v-text-field | 112 | <v-text-field |
| 113 | v-model="editedItem.subjectAuthor" | 113 | v-model="editedItem.subjectAuthor" |
| 114 | placeholder="fill your Subject Author" | 114 | placeholder="fill your Subject Author" |
| 115 | name="name" | 115 | name="name" |
| 116 | type="text" | 116 | type="text" |
| 117 | ></v-text-field> | 117 | ></v-text-field> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-layout> | 119 | </v-layout> |
| 120 | <v-layout> | 120 | <v-layout> |
| 121 | <v-flex xs4 sm4 class="pt-4 subheading"> | 121 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 122 | <label class="right">Subject Code:</label> | 122 | <label class="right">Subject Code:</label> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | <v-flex xs8 sm8 class="ml-3"> | 124 | <v-flex xs8 sm8 class="ml-3"> |
| 125 | <v-text-field | 125 | <v-text-field |
| 126 | v-model="editedItem.subjectCode" | 126 | v-model="editedItem.subjectCode" |
| 127 | placeholder="fill your Subject Code" | 127 | placeholder="fill your Subject Code" |
| 128 | name="name" | 128 | name="name" |
| 129 | type="text" | 129 | type="text" |
| 130 | ></v-text-field> | 130 | ></v-text-field> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | <v-flex xs12 sm12> | 133 | <v-flex xs12 sm12> |
| 134 | <v-card-actions> | 134 | <v-card-actions> |
| 135 | <v-spacer></v-spacer> | 135 | <v-spacer></v-spacer> |
| 136 | <v-btn | 136 | <v-btn |
| 137 | round | 137 | round |
| 138 | dark | 138 | dark |
| 139 | @click="save" | 139 | @click="save" |
| 140 | :loading="editLoading" | 140 | :loading="editLoading" |
| 141 | class="add-button" | 141 | class="add-button" |
| 142 | >Update Subject</v-btn> | 142 | >Update Subject</v-btn> |
| 143 | </v-card-actions> | 143 | </v-card-actions> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-form> | 145 | </v-form> |
| 146 | </v-container> | 146 | </v-container> |
| 147 | </v-card> | 147 | </v-card> |
| 148 | </v-dialog> | 148 | </v-dialog> |
| 149 | 149 | ||
| 150 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 150 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 151 | 151 | ||
| 152 | <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent> | 152 | <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent> |
| 153 | <v-card flat class="card-style pa-3" dark> | 153 | <v-card flat class="Card-style pa-3"> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs12> | 155 | <v-flex xs12> |
| 156 | <label class="title text-xs-center">View Subject</label> | 156 | <label class="title text-xs-center">View Subject</label> |
| 157 | <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> | 157 | <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | <v-card-text> | 160 | <v-card-text> |
| 161 | <v-container grid-list-md> | 161 | <v-container grid-list-md> |
| 162 | <v-layout wrap> | 162 | <v-layout wrap> |
| 163 | <v-flex> | 163 | <v-flex> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs6 sm4> | 165 | <v-flex xs6 sm4> |
| 166 | <h5 class="right my-1"> | 166 | <h5 class="right my-1"> |
| 167 | <b>Subject Name:</b> | 167 | <b>Subject Name:</b> |
| 168 | </h5> | 168 | </h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex sm8 xs6> | 170 | <v-flex sm8 xs6> |
| 171 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 171 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout> | 174 | <v-layout> |
| 175 | <v-flex xs6 sm4> | 175 | <v-flex xs6 sm4> |
| 176 | <h5 class="right my-1"> | 176 | <h5 class="right my-1"> |
| 177 | <b>Subject Author:</b> | 177 | <b>Sub Author:</b> |
| 178 | </h5> | 178 | </h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex sm8 xs6> | 180 | <v-flex sm8 xs6> |
| 181 | <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> | 181 | <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | <v-layout> | 184 | <v-layout> |
| 185 | <v-flex xs6 sm4> | 185 | <v-flex xs6 sm4> |
| 186 | <h5 class="right my-1"> | 186 | <h5 class="right my-1"> |
| 187 | <b>Subject :</b> | 187 | <b>Subject :</b> |
| 188 | </h5> | 188 | </h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex sm8 xs6> | 190 | <v-flex sm8 xs6> |
| 191 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> | 191 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | <!-- <v-layout> | 194 | <!-- <v-layout> |
| 195 | <v-flex xs6 sm4> | 195 | <v-flex xs6 sm4> |
| 196 | <h5 class="right my-1"> | 196 | <h5 class="right my-1"> |
| 197 | <b>Teacher :</b> | 197 | <b>Teacher :</b> |
| 198 | </h5> | 198 | </h5> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex sm8 xs6> | 200 | <v-flex sm8 xs6> |
| 201 | <h5 class="my-1">{{ editedItem.teacherId }}</h5> | 201 | <h5 class="my-1">{{ editedItem.teacherId }}</h5> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | </v-layout>--> | 203 | </v-layout>--> |
| 204 | <v-layout> | 204 | <v-layout> |
| 205 | <v-flex xs6 sm4> | 205 | <v-flex xs6 sm4> |
| 206 | <h5 class="right my-1"> | 206 | <h5 class="right my-1"> |
| 207 | <b>Pass Marks :</b> | 207 | <b>Pass Marks :</b> |
| 208 | </h5> | 208 | </h5> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex sm8 xs6> | 210 | <v-flex sm8 xs6> |
| 211 | <h5 class="my-1">{{ editedItem.passMarks }}</h5> | 211 | <h5 class="my-1">{{ editedItem.passMarks }}</h5> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-layout> | 213 | </v-layout> |
| 214 | <v-layout> | 214 | <v-layout> |
| 215 | <v-flex xs6 sm4> | 215 | <v-flex xs6 sm4> |
| 216 | <h5 class="right my-1"> | 216 | <h5 class="right my-1"> |
| 217 | <b>Final Marks :</b> | 217 | <b>Final Marks :</b> |
| 218 | </h5> | 218 | </h5> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | <v-flex sm8 xs6> | 220 | <v-flex sm8 xs6> |
| 221 | <h5 class="my-1">{{ editedItem.finalMarks }}</h5> | 221 | <h5 class="my-1">{{ editedItem.finalMarks }}</h5> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | </v-layout> | 223 | </v-layout> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs6 sm4> | 225 | <v-flex xs6 sm4> |
| 226 | <h5 class="right my-1"> | 226 | <h5 class="right my-1"> |
| 227 | <b>Type :</b> | 227 | <b>Type :</b> |
| 228 | </h5> | 228 | </h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex sm8 xs6> | 230 | <v-flex sm8 xs6> |
| 231 | <h5 class="my-1">{{ editedItem.type }}</h5> | 231 | <h5 class="my-1">{{ editedItem.type }}</h5> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | </v-container> | 236 | </v-container> |
| 237 | </v-card-text> | 237 | </v-card-text> |
| 238 | </v-card> | 238 | </v-card> |
| 239 | </v-dialog> | 239 | </v-dialog> |
| 240 | 240 | ||
| 241 | <!-- ****** EXISTING SUBJECTS TABLE ****** --> | 241 | <!-- ****** EXISTING SUBJECTS TABLE ****** --> |
| 242 | <v-toolbar color="transparent" flat> | 242 | <v-toolbar color="transparent" flat> |
| 243 | <v-btn | 243 | <v-btn |
| 244 | fab | 244 | fab |
| 245 | dark | 245 | dark |
| 246 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 246 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 247 | small | 247 | small |
| 248 | @click="addSubjectDialog = true" | 248 | @click="addSubjectDialog = true" |
| 249 | > | 249 | > |
| 250 | <v-icon dark>add</v-icon> | 250 | <v-icon dark>add</v-icon> |
| 251 | </v-btn> | 251 | </v-btn> |
| 252 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 252 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 253 | <v-btn | 253 | <v-btn |
| 254 | round | 254 | round |
| 255 | class="open-dialog-button" | 255 | class="open-dialog-button" |
| 256 | dark | 256 | dark |
| 257 | @click="addSubjectDialog = true" | 257 | @click="addSubjectDialog = true" |
| 258 | v-if="role != 'TEACHER' " | 258 | v-if="role != 'TEACHER' " |
| 259 | > | 259 | > |
| 260 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject | 260 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject |
| 261 | </v-btn> | 261 | </v-btn> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | <v-spacer></v-spacer> | 263 | <v-spacer></v-spacer> |
| 264 | <v-flex lg2 md2 xs12 v-show="show"> | 264 | <v-flex lg2 md2 xs12 v-show="show"> |
| 265 | <v-select | 265 | <v-select |
| 266 | :items="classList" | 266 | :items="classList" |
| 267 | label="Select Your Class" | 267 | label="Select Your Class" |
| 268 | v-model="getSubject.classId" | 268 | v-model="getSubject.classId" |
| 269 | item-text="classNum" | 269 | item-text="classNum" |
| 270 | item-value="_id" | 270 | item-value="_id" |
| 271 | name="Select Class" | 271 | name="Select Class" |
| 272 | :rules="classRules" | 272 | :rules="classRules" |
| 273 | @change="getClassSubject" | 273 | @change="getClassSubject" |
| 274 | class="pl-2" | 274 | class="pl-2" |
| 275 | required | 275 | required |
| 276 | ></v-select> | 276 | ></v-select> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-card-title class="body-1" v-show="show"> | 278 | <v-card-title class="body-1" v-show="show"> |
| 279 | <v-btn icon flat @click="displaySearch"> | 279 | <v-btn icon flat @click="displaySearch"> |
| 280 | <v-avatar size="27"> | 280 | <v-avatar size="27"> |
| 281 | <img src="/static/icon/search.png" alt="icon" /> | 281 | <img src="/static/icon/search.png" alt="icon" /> |
| 282 | </v-avatar> | 282 | </v-avatar> |
| 283 | </v-btn> | 283 | </v-btn> |
| 284 | </v-card-title> | 284 | </v-card-title> |
| 285 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 285 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-text-field | 287 | <v-text-field |
| 288 | autofocus | 288 | autofocus |
| 289 | v-model="search" | 289 | v-model="search" |
| 290 | label="Search" | 290 | label="Search" |
| 291 | prepend-inner-icon="search" | 291 | prepend-inner-icon="search" |
| 292 | color="primary" | 292 | color="primary" |
| 293 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 293 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 294 | ></v-text-field> | 294 | ></v-text-field> |
| 295 | <v-icon @click="closeSearch" color="error">close</v-icon> | 295 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 296 | </v-layout> | 296 | </v-layout> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-toolbar> | 298 | </v-toolbar> |
| 299 | <v-data-table | 299 | <v-data-table |
| 300 | :headers="headers" | 300 | :headers="headers" |
| 301 | :items="subjectList.subjects" | 301 | :items="subjectList.subjects" |
| 302 | :pagination.sync="pagination" | 302 | :pagination.sync="pagination" |
| 303 | :search="search" | 303 | :search="search" |
| 304 | > | 304 | > |
| 305 | <template slot="items" slot-scope="props"> | 305 | <template slot="items" slot-scope="props"> |
| 306 | <tr class="tr"> | 306 | <tr class="tr"> |
| 307 | <td class="td-row td">{{ props.index + 1 }}</td> | 307 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 308 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> | 308 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> |
| 309 | <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> | 309 | <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> |
| 310 | <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> | 310 | <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> |
| 311 | <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> | 311 | <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> |
| 312 | <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> | 312 | <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> |
| 313 | <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> | 313 | <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> |
| 314 | <td class="text-xs-center td td-row">{{ props.item.type }}</td> | 314 | <td class="text-xs-center td td-row">{{ props.item.type }}</td> |
| 315 | 315 | ||
| 316 | <td class="text-xs-center td td-row" v-if="role === 'ADMIN' "> | 316 | <td class="text-xs-center td td-row" v-if="role === 'ADMIN' "> |
| 317 | <span> | 317 | <span> |
| 318 | <v-tooltip top> | 318 | <v-tooltip top> |
| 319 | <img | 319 | <img |
| 320 | slot="activator" | 320 | slot="activator" |
| 321 | style="cursor:pointer; width:25px; height:25px; " | 321 | style="cursor:pointer; width:25px; height:25px; " |
| 322 | class="mr-3" | 322 | class="mr-3" |
| 323 | @click="profile(props.item)" | 323 | @click="profile(props.item)" |
| 324 | src="/static/icon/view.png" | 324 | src="/static/icon/view.png" |
| 325 | /> | 325 | /> |
| 326 | <span>View</span> | 326 | <span>View</span> |
| 327 | </v-tooltip> | 327 | </v-tooltip> |
| 328 | <v-tooltip top> | 328 | <v-tooltip top> |
| 329 | <img | 329 | <img |
| 330 | slot="activator" | 330 | slot="activator" |
| 331 | style="cursor:pointer; width:20px; height:18px; " | 331 | style="cursor:pointer; width:20px; height:18px; " |
| 332 | class="mr-3" | 332 | class="mr-3" |
| 333 | @click="editItem(props.item)" | 333 | @click="editItem(props.item)" |
| 334 | src="/static/icon/edit.png" | 334 | src="/static/icon/edit.png" |
| 335 | /> | 335 | /> |
| 336 | <span>Edit</span> | 336 | <span>Edit</span> |
| 337 | </v-tooltip> | 337 | </v-tooltip> |
| 338 | <v-tooltip top> | 338 | <v-tooltip top> |
| 339 | <img | 339 | <img |
| 340 | slot="activator" | 340 | slot="activator" |
| 341 | style="cursor:pointer; width:20px; height:20px; " | 341 | style="cursor:pointer; width:20px; height:20px; " |
| 342 | class="mr-3" | 342 | class="mr-3" |
| 343 | @click="deleteItem(props.item)" | 343 | @click="deleteItem(props.item)" |
| 344 | src="/static/icon/delete.png" | 344 | src="/static/icon/delete.png" |
| 345 | /> | 345 | /> |
| 346 | <span>Delete</span> | 346 | <span>Delete</span> |
| 347 | </v-tooltip> | 347 | </v-tooltip> |
| 348 | </span> | 348 | </span> |
| 349 | </td> | 349 | </td> |
| 350 | </tr> | 350 | </tr> |
| 351 | </template> | 351 | </template> |
| 352 | <v-alert | 352 | <v-alert |
| 353 | slot="no-results" | 353 | slot="no-results" |
| 354 | :value="true" | 354 | :value="true" |
| 355 | color="error" | 355 | color="error" |
| 356 | icon="warning" | 356 | icon="warning" |
| 357 | >Your search for "{{ search }}" found no results.</v-alert> | 357 | >Your search for "{{ search }}" found no results.</v-alert> |
| 358 | </v-data-table> | 358 | </v-data-table> |
| 359 | <!-- ****** ADD MULTIPLE Subject ****** --> | 359 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 360 | <v-snackbar | 360 | <v-snackbar |
| 361 | :timeout="timeout" | 361 | :timeout="timeout" |
| 362 | :top="y === 'top'" | 362 | :top="y === 'top'" |
| 363 | :right="x === 'right'" | 363 | :right="x === 'right'" |
| 364 | :vertical="mode === 'vertical'" | 364 | :vertical="mode === 'vertical'" |
| 365 | v-model="snackbar" | 365 | v-model="snackbar" |
| 366 | :color="color" | 366 | :color="color" |
| 367 | >{{ text }}</v-snackbar> | 367 | >{{ text }}</v-snackbar> |
| 368 | <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent> | 368 | <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent> |
| 369 | <v-card flat class="card-style pa-2" dark> | 369 | <v-card flat class="Card-style pa-2"> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex xs12> | 371 | <v-flex xs12> |
| 372 | <label class="title text-xs-center">Add Subject</label> | 372 | <label class="title text-xs-center">Add Subject</label> |
| 373 | <v-icon | 373 | <v-icon |
| 374 | size="24" | 374 | size="24" |
| 375 | class="right" | 375 | class="right" |
| 376 | @click="$refs.form.reset();addSubjectDialog = false" | 376 | @click="$refs.form.reset();addSubjectDialog = false" |
| 377 | >cancel</v-icon> | 377 | >cancel</v-icon> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | </v-layout> | 379 | </v-layout> |
| 380 | <v-container fluid fill-height> | 380 | <v-container fluid fill-height> |
| 381 | <v-layout align-center> | 381 | <v-layout align-center> |
| 382 | <v-flex xs12> | 382 | <v-flex xs12> |
| 383 | <v-form ref="form" v-model="valid" lazy-validation> | 383 | <v-form ref="form" v-model="valid" lazy-validation> |
| 384 | <v-layout> | 384 | <v-layout> |
| 385 | <v-flex xs4 sm4 class="pt-4 subheading"> | 385 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 386 | <label class="right">Class Name :</label> | 386 | <label class="right">Class Name :</label> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | <v-flex xs8 sm8 class="ml-3"> | 388 | <v-flex xs8 sm8 class="ml-3"> |
| 389 | <v-select | 389 | <v-select |
| 390 | v-model="addSubject.classId" | 390 | v-model="addSubject.classId" |
| 391 | label="Select your class" | 391 | label="Select your class" |
| 392 | type="text" | 392 | type="text" |
| 393 | :items="classList" | 393 | :items="classList" |
| 394 | item-text="classNum" | 394 | item-text="classNum" |
| 395 | item-value="_id" | 395 | item-value="_id" |
| 396 | :rules="classRules" | 396 | :rules="classRules" |
| 397 | required | 397 | required |
| 398 | ></v-select> | 398 | ></v-select> |
| 399 | </v-flex> | 399 | </v-flex> |
| 400 | </v-layout> | 400 | </v-layout> |
| 401 | <v-layout> | 401 | <v-layout> |
| 402 | <v-flex xs4 sm4 class="pt-4 subheading"> | 402 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 403 | <label class="right">Teacher Name :</label> | 403 | <label class="right">Teacher Name :</label> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | <v-flex xs8 sm8 class="ml-3"> | 405 | <v-flex xs8 sm8 class="ml-3"> |
| 406 | <v-select | 406 | <v-select |
| 407 | v-model="addSubject.teacherId" | 407 | v-model="addSubject.teacherId" |
| 408 | label="Select your teacher" | 408 | label="Select your teacher" |
| 409 | type="text" | 409 | type="text" |
| 410 | :items="teacherList" | 410 | :items="teacherList" |
| 411 | item-text="name" | 411 | item-text="name" |
| 412 | item-value="_id" | 412 | item-value="_id" |
| 413 | :rules="teacherRules" | 413 | :rules="teacherRules" |
| 414 | required | 414 | required |
| 415 | ></v-select> | 415 | ></v-select> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | <v-layout> | 418 | <v-layout> |
| 419 | <v-flex xs4 sm4 class="pt-4 sybheading"> | 419 | <v-flex xs4 sm4 class="pt-4 sybheading"> |
| 420 | <label class="right">Type :</label> | 420 | <label class="right">Type :</label> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | <v-flex xs8 sm8 class="ml-3"> | 422 | <v-flex xs8 sm8 class="ml-3"> |
| 423 | <v-select | 423 | <v-select |
| 424 | v-model="addSubject.type" | 424 | v-model="addSubject.type" |
| 425 | :items="type" | 425 | :items="type" |
| 426 | label="Select your Type" | 426 | label="Select your Type" |
| 427 | :rules="typeRules" | 427 | :rules="typeRules" |
| 428 | required | 428 | required |
| 429 | ></v-select> | 429 | ></v-select> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs4 sm4 class="pt-4 subheading"> | 433 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 434 | <label class="right">Pass Mark :</label> | 434 | <label class="right">Pass Mark :</label> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | <v-flex xs8 sm8 class="ml-3"> | 436 | <v-flex xs8 sm8 class="ml-3"> |
| 437 | <v-text-field | 437 | <v-text-field |
| 438 | label="Fill your Pass Mark" | 438 | label="Fill your Pass Mark" |
| 439 | name="name" | 439 | name="name" |
| 440 | type="text" | 440 | type="text" |
| 441 | :rules="markRules" | 441 | :rules="markRules" |
| 442 | v-model="addSubject.passMarks" | 442 | v-model="addSubject.passMarks" |
| 443 | required | 443 | required |
| 444 | ></v-text-field> | 444 | ></v-text-field> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | </v-layout> | 446 | </v-layout> |
| 447 | <v-layout> | 447 | <v-layout> |
| 448 | <v-flex xs4 sm4 class="pt-4 subheading"> | 448 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 449 | <label class="right">Final Mark :</label> | 449 | <label class="right">Final Mark :</label> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | <v-flex xs8 sm8 class="ml-3"> | 451 | <v-flex xs8 sm8 class="ml-3"> |
| 452 | <v-text-field | 452 | <v-text-field |
| 453 | label="Fill your final mark" | 453 | label="Fill your final mark" |
| 454 | name="name" | 454 | name="name" |
| 455 | type="text" | 455 | type="text" |
| 456 | :rules="finalRules" | 456 | :rules="finalRules" |
| 457 | v-model="addSubject.finalMarks" | 457 | v-model="addSubject.finalMarks" |
| 458 | required | 458 | required |
| 459 | ></v-text-field> | 459 | ></v-text-field> |
| 460 | </v-flex> | 460 | </v-flex> |
| 461 | </v-layout> | 461 | </v-layout> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs4 sm4 class="pt-4 subheading"> | 463 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 464 | <label class="right">Subject :</label> | 464 | <label class="right">Subject :</label> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-flex xs8 sm8 class="ml-3"> | 466 | <v-flex xs8 sm8 class="ml-3"> |
| 467 | <v-text-field | 467 | <v-text-field |
| 468 | v-model="addSubject.subjectName" | 468 | v-model="addSubject.subjectName" |
| 469 | placeholder="fill your Subject Name" | 469 | placeholder="fill your Subject Name" |
| 470 | name="name" | 470 | name="name" |
| 471 | type="text" | 471 | type="text" |
| 472 | :rules="subjectRules" | 472 | :rules="subjectRules" |
| 473 | required | 473 | required |
| 474 | ></v-text-field> | 474 | ></v-text-field> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-layout> | 476 | </v-layout> |
| 477 | <v-layout> | 477 | <v-layout> |
| 478 | <v-flex xs4 sm4 class="pt-4 subheading"> | 478 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 479 | <label class="right">Subject Author :</label> | 479 | <label class="right">Subject Author :</label> |
| 480 | </v-flex> | 480 | </v-flex> |
| 481 | <v-flex xs8 sm8 class="ml-3"> | 481 | <v-flex xs8 sm8 class="ml-3"> |
| 482 | <v-text-field | 482 | <v-text-field |
| 483 | v-model="addSubject.subjectAuthor" | 483 | v-model="addSubject.subjectAuthor" |
| 484 | placeholder="fill your Subject Author" | 484 | placeholder="fill your Subject Author" |
| 485 | name="name" | 485 | name="name" |
| 486 | type="text" | 486 | type="text" |
| 487 | ></v-text-field> | 487 | ></v-text-field> |
| 488 | </v-flex> | 488 | </v-flex> |
| 489 | </v-layout> | 489 | </v-layout> |
| 490 | <v-layout> | 490 | <v-layout> |
| 491 | <v-flex xs4 sm4 class="pt-4 subheading"> | 491 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 492 | <label class="right">Subject Code:</label> | 492 | <label class="right">Subject Code:</label> |
| 493 | </v-flex> | 493 | </v-flex> |
| 494 | <v-flex xs8 sm8 class="ml-3"> | 494 | <v-flex xs8 sm8 class="ml-3"> |
| 495 | <v-text-field | 495 | <v-text-field |
| 496 | v-model="addSubject.subjectCode" | 496 | v-model="addSubject.subjectCode" |
| 497 | placeholder="fill your Subject Code" | 497 | placeholder="fill your Subject Code" |
| 498 | name="name" | 498 | name="name" |
| 499 | type="text" | 499 | type="text" |
| 500 | ></v-text-field> | 500 | ></v-text-field> |
| 501 | </v-flex> | 501 | </v-flex> |
| 502 | </v-layout> | 502 | </v-layout> |
| 503 | <v-layout> | 503 | <v-layout> |
| 504 | <v-flex xs12 sm12> | 504 | <v-flex xs12 sm12> |
| 505 | <v-card-actions> | 505 | <v-card-actions> |
| 506 | <v-spacer></v-spacer> | 506 | <v-spacer></v-spacer> |
| 507 | <v-btn | 507 | <v-btn |
| 508 | @click="submit" | 508 | @click="submit" |
| 509 | round | 509 | round |
| 510 | dark | 510 | dark |
| 511 | :loading="addLoading" | 511 | :loading="addLoading" |
| 512 | class="add-button" | 512 | class="add-button" |
| 513 | >Add Subject</v-btn> | 513 | >Add Subject</v-btn> |
| 514 | </v-card-actions> | 514 | </v-card-actions> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | </v-layout> | 516 | </v-layout> |
| 517 | </v-form> | 517 | </v-form> |
| 518 | </v-flex> | 518 | </v-flex> |
| 519 | </v-layout> | 519 | </v-layout> |
| 520 | </v-container> | 520 | </v-container> |
| 521 | </v-card> | 521 | </v-card> |
| 522 | </v-dialog> | 522 | </v-dialog> |
| 523 | <div class="loader" v-if="showLoader"> | 523 | <div class="loader" v-if="showLoader"> |
| 524 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 524 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 525 | </div> | 525 | </div> |
| 526 | </v-container> | 526 | </v-container> |
| 527 | </template> | 527 | </template> |
| 528 | 528 | ||
| 529 | <script> | 529 | <script> |
| 530 | import http from "@/Services/http.js"; | 530 | import http from "@/Services/http.js"; |
| 531 | import Util from "@/util"; | 531 | import Util from "@/util"; |
| 532 | 532 | ||
| 533 | export default { | 533 | export default { |
| 534 | data: () => ({ | 534 | data: () => ({ |
| 535 | snackbar: false, | 535 | snackbar: false, |
| 536 | y: "top", | 536 | y: "top", |
| 537 | x: "right", | 537 | x: "right", |
| 538 | role: "", | 538 | role: "", |
| 539 | mode: "", | 539 | mode: "", |
| 540 | timeout: 3000, | 540 | timeout: 3000, |
| 541 | text: "", | 541 | text: "", |
| 542 | color: "", | 542 | color: "", |
| 543 | show: true, | 543 | show: true, |
| 544 | showSearch: false, | 544 | showSearch: false, |
| 545 | showLoader: false, | 545 | showLoader: false, |
| 546 | loading: false, | 546 | loading: false, |
| 547 | editLoading: false, | 547 | editLoading: false, |
| 548 | addLoading: false, | 548 | addLoading: false, |
| 549 | date: null, | 549 | date: null, |
| 550 | search: "", | 550 | search: "", |
| 551 | viewSubjectDialog: false, | 551 | viewSubjectDialog: false, |
| 552 | editSubjectDialog: false, | 552 | editSubjectDialog: false, |
| 553 | valid: true, | 553 | valid: true, |
| 554 | validEditSubject: true, | 554 | validEditSubject: true, |
| 555 | addSubjectDialog: false, | 555 | addSubjectDialog: false, |
| 556 | // isActive: true, | 556 | // isActive: true, |
| 557 | // newActive: false, | 557 | // newActive: false, |
| 558 | type: ["Optional", "Mandatory"], | 558 | type: ["Optional", "Mandatory"], |
| 559 | pagination: { | 559 | pagination: { |
| 560 | rowsPerPage: 10, | 560 | rowsPerPage: 10, |
| 561 | }, | 561 | }, |
| 562 | token: "", | 562 | token: "", |
| 563 | classRules: [(v) => !!v || " Class Name is required"], | 563 | classRules: [(v) => !!v || " Class Name is required"], |
| 564 | teacherRules: [(v) => !!v || " Teacher Name is required"], | 564 | teacherRules: [(v) => !!v || " Teacher Name is required"], |
| 565 | typeRules: [(v) => !!v || "Type is required"], | 565 | typeRules: [(v) => !!v || "Type is required"], |
| 566 | markRules: [(v) => !!v || " Pass Mark is required"], | 566 | markRules: [(v) => !!v || " Pass Mark is required"], |
| 567 | finalRules: [(v) => !!v || "Final MArk is required"], | 567 | finalRules: [(v) => !!v || "Final MArk is required"], |
| 568 | subjectRules: [(v) => !!v || " Subject Name is required"], | 568 | subjectRules: [(v) => !!v || " Subject Name is required"], |
| 569 | headers: [ | 569 | headers: [ |
| 570 | { | 570 | { |
| 571 | text: "No", | 571 | text: "No", |
| 572 | align: "", | 572 | align: "", |
| 573 | sortable: false, | 573 | sortable: false, |
| 574 | value: "No", | 574 | value: "No", |
| 575 | }, | 575 | }, |
| 576 | { | 576 | { |
| 577 | text: "Subject Name", | 577 | text: "Subject Name", |
| 578 | value: "subjectName", | 578 | value: "subjectName", |
| 579 | sortable: false, | 579 | sortable: false, |
| 580 | align: "center", | 580 | align: "center", |
| 581 | }, | 581 | }, |
| 582 | { | 582 | { |
| 583 | text: "Subject Author", | 583 | text: "Subject Author", |
| 584 | value: "subjectAuthor", | 584 | value: "subjectAuthor", |
| 585 | sortable: false, | 585 | sortable: false, |
| 586 | align: "center", | 586 | align: "center", |
| 587 | }, | 587 | }, |
| 588 | { | 588 | { |
| 589 | text: "Subject Code", | 589 | text: "Subject Code", |
| 590 | value: "subjectCode", | 590 | value: "subjectCode", |
| 591 | sortable: false, | 591 | sortable: false, |
| 592 | align: "center", | 592 | align: "center", |
| 593 | }, | 593 | }, |
| 594 | // { | 594 | // { |
| 595 | // text: "Teacher", | 595 | // text: "Teacher", |
| 596 | // value: "teacherId", | 596 | // value: "teacherId", |
| 597 | // sortable: false, | 597 | // sortable: false, |
| 598 | // align: "center" | 598 | // align: "center" |
| 599 | // }, | 599 | // }, |
| 600 | { | 600 | { |
| 601 | text: "Pass Marks", | 601 | text: "Pass Marks", |
| 602 | value: "passMarks", | 602 | value: "passMarks", |
| 603 | sortable: false, | 603 | sortable: false, |
| 604 | align: "center", | 604 | align: "center", |
| 605 | }, | 605 | }, |
| 606 | { | 606 | { |
| 607 | text: "Final Marks", | 607 | text: "Final Marks", |
| 608 | value: "finalMarks", | 608 | value: "finalMarks", |
| 609 | sortable: false, | 609 | sortable: false, |
| 610 | align: "center", | 610 | align: "center", |
| 611 | }, | 611 | }, |
| 612 | { | 612 | { |
| 613 | text: "Type", | 613 | text: "Type", |
| 614 | value: "type", | 614 | value: "type", |
| 615 | sortable: false, | 615 | sortable: false, |
| 616 | align: "center", | 616 | align: "center", |
| 617 | }, | 617 | }, |
| 618 | ], | 618 | ], |
| 619 | subjectList: [], | 619 | subjectList: [], |
| 620 | classList: [], | 620 | classList: [], |
| 621 | teacherList: [], | 621 | teacherList: [], |
| 622 | editedIndex: -1, | 622 | editedIndex: -1, |
| 623 | addSubject: {}, | 623 | addSubject: {}, |
| 624 | getSubject: {}, | 624 | getSubject: {}, |
| 625 | 625 | ||
| 626 | editedItem: { | 626 | editedItem: { |
| 627 | // subjectName: "", | 627 | // subjectName: "", |
| 628 | // subjectAuthor: "" | 628 | // subjectAuthor: "" |
| 629 | }, | 629 | }, |
| 630 | }), | 630 | }), |
| 631 | watch: { | 631 | watch: { |
| 632 | addSubjectDialog: function (val) { | 632 | addSubjectDialog: function (val) { |
| 633 | if (!val) { | 633 | if (!val) { |
| 634 | // this.addSubject = []; | 634 | // this.addSubject = []; |
| 635 | } | 635 | } |
| 636 | }, | 636 | }, |
| 637 | }, | 637 | }, |
| 638 | methods: { | 638 | methods: { |
| 639 | addActionInHeaders() { | 639 | addActionInHeaders() { |
| 640 | if (this.role === "ADMIN") { | 640 | if (this.role === "ADMIN") { |
| 641 | this.headers.push({ | 641 | this.headers.push({ |
| 642 | text: "Action", | 642 | text: "Action", |
| 643 | value: "", | 643 | value: "", |
| 644 | sortable: false, | 644 | sortable: false, |
| 645 | align: "center", | 645 | align: "center", |
| 646 | }); | 646 | }); |
| 647 | } | 647 | } |
| 648 | }, | 648 | }, |
| 649 | pickFile() { | 649 | pickFile() { |
| 650 | this.$refs.image.click(); | 650 | this.$refs.image.click(); |
| 651 | }, | 651 | }, |
| 652 | editItem(item) { | 652 | editItem(item) { |
| 653 | this.editedIndex = this.subjectList.subjects; | 653 | this.editedIndex = this.subjectList.subjects; |
| 654 | this.editedItem = Object.assign({}, item); | 654 | this.editedItem = Object.assign({}, item); |
| 655 | this.dialog = true; | 655 | this.dialog = true; |
| 656 | this.editSubjectDialog = true; | 656 | this.editSubjectDialog = true; |
| 657 | }, | 657 | }, |
| 658 | profile(item) { | 658 | profile(item) { |
| 659 | this.editedIndex = this.subjectList.subjects; | 659 | this.editedIndex = this.subjectList.subjects; |
| 660 | this.editedItem = Object.assign({}, item); | 660 | this.editedItem = Object.assign({}, item); |
| 661 | this.dialog1 = true; | 661 | this.dialog1 = true; |
| 662 | this.viewSubjectDialog = true; | 662 | this.viewSubjectDialog = true; |
| 663 | }, | 663 | }, |
| 664 | deleteItem(item) { | 664 | deleteItem(item) { |
| 665 | let deleteSubject = { | 665 | let deleteSubject = { |
| 666 | classId: this.addSubject.classId, | 666 | classId: this.addSubject.classId, |
| 667 | subjectId: item._id, | 667 | subjectId: item._id, |
| 668 | }; | 668 | }; |
| 669 | http() | 669 | http() |
| 670 | .delete( | 670 | .delete( |
| 671 | "/deleteSubject", | 671 | "/deleteSubject", |
| 672 | confirm("Are you sure you want to delete this?") && { | 672 | confirm("Are you sure you want to delete this?") && { |
| 673 | params: deleteSubject, | 673 | params: deleteSubject, |
| 674 | } | 674 | } |
| 675 | ) | 675 | ) |
| 676 | .then((response) => { | 676 | .then((response) => { |
| 677 | this.snackbar = true; | 677 | this.snackbar = true; |
| 678 | this.color = "green"; | 678 | this.color = "green"; |
| 679 | this.text = "Successfully delete Existing Subject"; | 679 | this.text = "Successfully delete Existing Subject"; |
| 680 | this.getClassSubject(this.addSubject.classId); | 680 | this.getClassSubject(this.addSubject.classId); |
| 681 | }) | 681 | }) |
| 682 | .catch((error) => { | 682 | .catch((error) => { |
| 683 | this.snackbar = true; | 683 | this.snackbar = true; |
| 684 | this.text = error.response.data.message; | 684 | this.text = error.response.data.message; |
| 685 | this.color = "error"; | 685 | this.color = "error"; |
| 686 | // console.log("error", error); | 686 | // console.log("error", error); |
| 687 | }); | 687 | }); |
| 688 | }, | 688 | }, |
| 689 | close() { | 689 | close() { |
| 690 | this.editSubjectDialog = false; | 690 | this.editSubjectDialog = false; |
| 691 | }, | 691 | }, |
| 692 | close1() { | 692 | close1() { |
| 693 | this.viewSubjectDialog = false; | 693 | this.viewSubjectDialog = false; |
| 694 | }, | 694 | }, |
| 695 | submit() { | 695 | submit() { |
| 696 | if (this.$refs.form.validate()) { | 696 | if (this.$refs.form.validate()) { |
| 697 | this.addLoading = true; | 697 | this.addLoading = true; |
| 698 | http() | 698 | http() |
| 699 | .post("/addSubject", this.addSubject) | 699 | .post("/addSubject", this.addSubject) |
| 700 | .then((response) => { | 700 | .then((response) => { |
| 701 | this.snackbar = true; | 701 | this.snackbar = true; |
| 702 | this.text = "New Subject added successfully"; | 702 | this.text = "New Subject added successfully"; |
| 703 | this.color = "green"; | 703 | this.color = "green"; |
| 704 | this.addLoading = false; | 704 | this.addLoading = false; |
| 705 | this.$refs.form.reset(); | 705 | this.$refs.form.reset(); |
| 706 | this.addSubjectDialog = false; | 706 | this.addSubjectDialog = false; |
| 707 | this.getClassSubject(_id); | 707 | this.getClassSubject(_id); |
| 708 | }) | 708 | }) |
| 709 | .catch((error) => { | 709 | .catch((error) => { |
| 710 | this.addLoading = false; | 710 | this.addLoading = 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 | if (this.$refs.formEditSubject.validate()) { | 718 | if (this.$refs.formEditSubject.validate()) { |
| 719 | let editSubject = { | 719 | let editSubject = { |
| 720 | classId: this.editedItem.classId, | 720 | classId: this.editedItem.classId, |
| 721 | subjectId: this.editedItem._id, | 721 | subjectId: this.editedItem._id, |
| 722 | teacherId: this.editedItem.teacherId, | 722 | teacherId: this.editedItem.teacherId, |
| 723 | type: this.editedItem.type, | 723 | type: this.editedItem.type, |
| 724 | passMarks: this.editedItem.passMarks, | 724 | passMarks: this.editedItem.passMarks, |
| 725 | finalMarks: this.editedItem.finalMarks, | 725 | finalMarks: this.editedItem.finalMarks, |
| 726 | subjectAuthor: this.editedItem.subjectAuthor, | 726 | subjectAuthor: this.editedItem.subjectAuthor, |
| 727 | subjectCode: this.editedItem.subjectCode, | 727 | subjectCode: this.editedItem.subjectCode, |
| 728 | subjectName: this.editedItem.subjectName, | 728 | subjectName: this.editedItem.subjectName, |
| 729 | }; | 729 | }; |
| 730 | this.editLoading = true; | 730 | this.editLoading = true; |
| 731 | http() | 731 | http() |
| 732 | .put("/updateSubject", editSubject) | 732 | .put("/updateSubject", editSubject) |
| 733 | .then((response) => { | 733 | .then((response) => { |
| 734 | this.snackbar = true; | 734 | this.snackbar = true; |
| 735 | this.text = "Successfully Edit Existing Subject"; | 735 | this.text = "Successfully Edit Existing Subject"; |
| 736 | this.color = "green"; | 736 | this.color = "green"; |
| 737 | this.editLoading = false; | 737 | this.editLoading = false; |
| 738 | this.editSubjectDialog = false; | 738 | this.editSubjectDialog = false; |
| 739 | this.getClassSubject(this.editedItem.classId); | 739 | this.getClassSubject(this.editedItem.classId); |
| 740 | }) | 740 | }) |
| 741 | .catch((error) => { | 741 | .catch((error) => { |
| 742 | this.editLoading = false; | 742 | this.editLoading = false; |
| 743 | 743 | ||
| 744 | // console.log(error); | 744 | // console.log(error); |
| 745 | }); | 745 | }); |
| 746 | } | 746 | } |
| 747 | }, | 747 | }, |
| 748 | getClassSubject(_id) { | 748 | getClassSubject(_id) { |
| 749 | this.showLoader = true; | 749 | this.showLoader = true; |
| 750 | // console.log("class", _id); | 750 | // console.log("class", _id); |
| 751 | // this.classId = this.classId; | 751 | // this.classId = this.classId; |
| 752 | http() | 752 | http() |
| 753 | .get( | 753 | .get( |
| 754 | "/getParticularClass", | 754 | "/getParticularClass", |
| 755 | { params: { classId: _id } }, | 755 | { params: { classId: _id } }, |
| 756 | { | 756 | { |
| 757 | headers: { Authorization: "Bearer " + this.token }, | 757 | headers: { Authorization: "Bearer " + this.token }, |
| 758 | } | 758 | } |
| 759 | ) | 759 | ) |
| 760 | .then((response) => { | 760 | .then((response) => { |
| 761 | this.subjectList = response.data.data; | 761 | this.subjectList = response.data.data; |
| 762 | this.showLoader = false; | 762 | this.showLoader = false; |
| 763 | }) | 763 | }) |
| 764 | .catch((err) => { | 764 | .catch((err) => { |
| 765 | this.showLoader = false; | 765 | this.showLoader = false; |
| 766 | }); | 766 | }); |
| 767 | }, | 767 | }, |
| 768 | getClass() { | 768 | getClass() { |
| 769 | http() | 769 | http() |
| 770 | .get("/getClassesList", { | 770 | .get("/getClassesList", { |
| 771 | headers: { Authorization: "Bearer " + this.token }, | 771 | headers: { Authorization: "Bearer " + this.token }, |
| 772 | }) | 772 | }) |
| 773 | .then((response) => { | 773 | .then((response) => { |
| 774 | this.classList = response.data.data; | 774 | this.classList = response.data.data; |
| 775 | }) | 775 | }) |
| 776 | .catch((error) => { | 776 | .catch((error) => { |
| 777 | if (error.response.status === 401) { | 777 | if (error.response.status === 401) { |
| 778 | this.$router.replace({ path: "/" }); | 778 | this.$router.replace({ path: "/" }); |
| 779 | this.$store.dispatch("setToken", null); | 779 | this.$store.dispatch("setToken", null); |
| 780 | this.$store.dispatch("Id", null); | 780 | this.$store.dispatch("Id", null); |
| 781 | } | 781 | } |
| 782 | }); | 782 | }); |
| 783 | }, | 783 | }, |
| 784 | getTeacherList() { | 784 | getTeacherList() { |
| 785 | this.showLoader = true; | 785 | this.showLoader = true; |
| 786 | var token = this.$store.state.token; | 786 | var token = this.$store.state.token; |
| 787 | http() | 787 | http() |
| 788 | .get("/getTeachersList", { | 788 | .get("/getTeachersList", { |
| 789 | headers: { Authorization: "Bearer " + token }, | 789 | headers: { Authorization: "Bearer " + token }, |
| 790 | }) | 790 | }) |
| 791 | .then((response) => { | 791 | .then((response) => { |
| 792 | this.teacherList = response.data.data; | 792 | this.teacherList = response.data.data; |
| 793 | this.showLoader = false; | 793 | this.showLoader = false; |
| 794 | // console.log("getTeacherList=====>",this.desserts) | 794 | // console.log("getTeacherList=====>",this.desserts) |
| 795 | }) | 795 | }) |
| 796 | .catch((error) => { | 796 | .catch((error) => { |
| 797 | this.showLoader = false; | 797 | this.showLoader = false; |
| 798 | if (error.response.status === 401) { | 798 | if (error.response.status === 401) { |
| 799 | this.$router.replace({ path: "/" }); | 799 | this.$router.replace({ path: "/" }); |
| 800 | this.$store.dispatch("setToken", null); | 800 | this.$store.dispatch("setToken", null); |
| 801 | this.$store.dispatch("Id", null); | 801 | this.$store.dispatch("Id", null); |
| 802 | } | 802 | } |
| 803 | }); | 803 | }); |
| 804 | }, | 804 | }, |
| 805 | displaySearch() { | 805 | displaySearch() { |
| 806 | (this.show = false), (this.showSearch = true); | 806 | (this.show = false), (this.showSearch = true); |
| 807 | }, | 807 | }, |
| 808 | closeSearch() { | 808 | closeSearch() { |
| 809 | this.showSearch = false; | 809 | this.showSearch = false; |
| 810 | this.show = true; | 810 | this.show = true; |
| 811 | this.search = ""; | 811 | this.search = ""; |
| 812 | }, | 812 | }, |
| 813 | }, | 813 | }, |
| 814 | mounted() { | 814 | mounted() { |
| 815 | this.token = this.$store.state.token; | 815 | this.token = this.$store.state.token; |
| 816 | // this.getNoticeDataList(); | 816 | // this.getNoticeDataList(); |
| 817 | this.getClass(); | 817 | this.getClass(); |
| 818 | this.getTeacherList(); | 818 | this.getTeacherList(); |
| 819 | this.role = this.$store.state.role; | 819 | this.role = this.$store.state.role; |
| 820 | this.addActionInHeaders(); | 820 | this.addActionInHeaders(); |
| 821 | }, | 821 | }, |
| 822 | }; | 822 | }; |
| 823 | </script> | 823 | </script> |
src/pages/Academic/syllabus.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Syllabus ****** --> | 3 | <!-- ****** EDIT Syllabus ****** --> |
| 4 | <v-dialog v-model="editSyllabusDialog" max-width="400px" persistent> | 4 | <v-dialog v-model="editSyllabusDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Syllabus</label> | 8 | <label class="title text-xs-center">Edit Syllabus</label> |
| 9 | <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> | 13 | <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 sm4 class="pt-4 subheading"> | 15 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 16 | <label class="right">Title :</label> | 16 | <label class="right">Title :</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field v-model="editedItem.title"></v-text-field> | 19 | <v-text-field v-model="editedItem.title"></v-text-field> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | </v-layout> | 21 | </v-layout> |
| 22 | <v-layout> | 22 | <v-layout> |
| 23 | <v-flex xs4 class="pt-4 subheading"> | 23 | <v-flex xs4 class="pt-4 subheading"> |
| 24 | <label class="right">Description:</label> | 24 | <label class="right">Description:</label> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | <v-flex xs8 class="ml-3"> | 26 | <v-flex xs8 class="ml-3"> |
| 27 | <v-text-field v-model="editedItem.description"></v-text-field> | 27 | <v-text-field v-model="editedItem.description"></v-text-field> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | </v-layout> | 29 | </v-layout> |
| 30 | <v-layout> | 30 | <v-layout> |
| 31 | <v-flex xs4 class="pt-4 subheading"> | 31 | <v-flex xs4 class="pt-4 subheading"> |
| 32 | <label class="right">Class:</label> | 32 | <label class="right">Class:</label> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | <v-flex xs8 class="ml-3"> | 34 | <v-flex xs8 class="ml-3"> |
| 35 | <v-select | 35 | <v-select |
| 36 | :items="classList" | 36 | :items="classList" |
| 37 | v-model="editedItem.classId" | 37 | v-model="editedItem.classId" |
| 38 | label="Select Class" | 38 | label="Select Class" |
| 39 | item-text="classNum" | 39 | item-text="classNum" |
| 40 | item-value="_id" | 40 | item-value="_id" |
| 41 | name="Select Class" | 41 | name="Select Class" |
| 42 | @change="getSections(addSyllabus.classId)" | 42 | @change="getSections(addSyllabus.classId)" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | </v-layout> | 46 | </v-layout> |
| 47 | <!-- <v-layout> | 47 | <!-- <v-layout> |
| 48 | <v-flex xs4 sm4 class="pt-4 subheading"> | 48 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 49 | <label class="right">Section :</label> | 49 | <label class="right">Section :</label> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | <v-flex xs8 sm8 class="ml-3"> | 51 | <v-flex xs8 sm8 class="ml-3"> |
| 52 | <v-select | 52 | <v-select |
| 53 | :items="addSection" | 53 | :items="addSection" |
| 54 | label="Select Section" | 54 | label="Select Section" |
| 55 | item-text="name" | 55 | item-text="name" |
| 56 | item-value="_id" | 56 | item-value="_id" |
| 57 | v-model="editedItem.sectionId" | 57 | v-model="editedItem.sectionId" |
| 58 | name="Select Section" | 58 | name="Select Section" |
| 59 | class="px-2" | 59 | class="px-2" |
| 60 | required | 60 | required |
| 61 | ></v-select> | 61 | ></v-select> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout>--> | 63 | </v-layout>--> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-flex xs4 class="pt-4 subheading"> | 65 | <v-flex xs4 class="pt-4 subheading"> |
| 66 | <label class="right">File:</label> | 66 | <label class="right">File:</label> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex xs8 sm6 class="ml-3"> | 68 | <v-flex xs8 sm6 class="ml-3"> |
| 69 | <v-text-field | 69 | <v-text-field |
| 70 | label="Select file" | 70 | label="Select file" |
| 71 | @click="pickFile" | 71 | @click="pickFile" |
| 72 | v-model="imageName" | 72 | v-model="imageName" |
| 73 | append-icon="attach_file" | 73 | append-icon="attach_file" |
| 74 | ></v-text-field> | 74 | ></v-text-field> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <input | 76 | <input |
| 77 | type="file" | 77 | type="file" |
| 78 | style="display:none" | 78 | style="display:none" |
| 79 | ref="image" | 79 | ref="image" |
| 80 | accept="image/*" | 80 | accept="image/*" |
| 81 | @change="onFilePicked" | 81 | @change="onFilePicked" |
| 82 | /> | 82 | /> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | <v-flex xs12 sm12> | 84 | <v-flex xs12 sm12> |
| 85 | <v-card-actions> | 85 | <v-card-actions> |
| 86 | <v-spacer></v-spacer> | 86 | <v-spacer></v-spacer> |
| 87 | <v-btn | 87 | <v-btn |
| 88 | round | 88 | round |
| 89 | dark | 89 | dark |
| 90 | @click="save" | 90 | @click="save" |
| 91 | :loading="editLoading" | 91 | :loading="editLoading" |
| 92 | class="add-button" | 92 | class="add-button" |
| 93 | >Update Syllabus</v-btn> | 93 | >Update Syllabus</v-btn> |
| 94 | </v-card-actions> | 94 | </v-card-actions> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-form> | 96 | </v-form> |
| 97 | </v-container> | 97 | </v-container> |
| 98 | </v-card> | 98 | </v-card> |
| 99 | </v-dialog> | 99 | </v-dialog> |
| 100 | 100 | ||
| 101 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 101 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 102 | 102 | ||
| 103 | <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> | 103 | <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> |
| 104 | <v-toolbar flat class="card-style pa-3" dark> | 104 | <v-toolbar flat class="card-style pa-3" dark> |
| 105 | <v-spacer></v-spacer> | 105 | <v-spacer></v-spacer> |
| 106 | <v-toolbar-title> | 106 | <v-toolbar-title> |
| 107 | <h3>Subject</h3> | 107 | <h3>Subject</h3> |
| 108 | </v-toolbar-title> | 108 | </v-toolbar-title> |
| 109 | <v-spacer></v-spacer> | 109 | <v-spacer></v-spacer> |
| 110 | <v-icon @click="close1">close</v-icon> | 110 | <v-icon @click="close1">close</v-icon> |
| 111 | </v-toolbar> | 111 | </v-toolbar> |
| 112 | <v-card> | 112 | <v-card> |
| 113 | <v-card-text> | 113 | <v-card-text> |
| 114 | <v-container grid-list-md> | 114 | <v-container grid-list-md> |
| 115 | <v-layout wrap> | 115 | <v-layout wrap> |
| 116 | <v-flex> | 116 | <v-flex> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs7 sm6> | 118 | <v-flex xs7 sm6> |
| 119 | <h5 class="right my-1"> | 119 | <h5 class="right my-1"> |
| 120 | <b>Subject Name:</b> | 120 | <b>Subject Name:</b> |
| 121 | </h5> | 121 | </h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex sm6 xs5> | 123 | <v-flex sm6 xs5> |
| 124 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 124 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | </v-layout> | 128 | </v-layout> |
| 129 | </v-container> | 129 | </v-container> |
| 130 | </v-card-text> | 130 | </v-card-text> |
| 131 | </v-card> | 131 | </v-card> |
| 132 | </v-dialog>--> | 132 | </v-dialog>--> |
| 133 | 133 | ||
| 134 | <!-- ****** EXISTING SYLLABUS TABLE ****** --> | 134 | <!-- ****** EXISTING SYLLABUS TABLE ****** --> |
| 135 | <v-toolbar color="transparent" flat> | 135 | <v-toolbar color="transparent" flat> |
| 136 | <v-btn | 136 | <v-btn |
| 137 | fab | 137 | fab |
| 138 | dark | 138 | dark |
| 139 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 139 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 140 | small | 140 | small |
| 141 | @click="addSyllabusDialog = true" | 141 | @click="addSyllabusDialog = true" |
| 142 | > | 142 | > |
| 143 | <v-icon dark>add</v-icon> | 143 | <v-icon dark>add</v-icon> |
| 144 | </v-btn> | 144 | </v-btn> |
| 145 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 145 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 146 | <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> | 146 | <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> |
| 147 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus | 147 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus |
| 148 | </v-btn> | 148 | </v-btn> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-spacer></v-spacer> | 150 | <v-spacer></v-spacer> |
| 151 | <v-flex lg2 md2 xs12 v-show="show"> | 151 | <v-flex lg2 md2 xs12 v-show="show"> |
| 152 | <v-select | 152 | <v-select |
| 153 | :items="classList" | 153 | :items="classList" |
| 154 | label="Select Class" | 154 | label="Select Class" |
| 155 | v-model="showSyllabus.classId" | 155 | v-model="showSyllabus.classId" |
| 156 | item-text="classNum" | 156 | item-text="classNum" |
| 157 | item-value="_id" | 157 | item-value="_id" |
| 158 | name="Select Class" | 158 | name="Select Class" |
| 159 | :rules="classRules" | 159 | :rules="classRules" |
| 160 | @change="getSyallabusList" | 160 | @change="getSyallabusList" |
| 161 | class="pl-2" | 161 | class="pl-2" |
| 162 | required | 162 | required |
| 163 | ></v-select> | 163 | ></v-select> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | <v-card-title class="body-1" v-show="show"> | 165 | <v-card-title class="body-1" v-show="show"> |
| 166 | <v-btn icon flat @click="displaySearch"> | 166 | <v-btn icon flat @click="displaySearch"> |
| 167 | <v-avatar size="27"> | 167 | <v-avatar size="27"> |
| 168 | <img src="/static/icon/search.png" alt="icon" /> | 168 | <img src="/static/icon/search.png" alt="icon" /> |
| 169 | </v-avatar> | 169 | </v-avatar> |
| 170 | </v-btn> | 170 | </v-btn> |
| 171 | </v-card-title> | 171 | </v-card-title> |
| 172 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 172 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 173 | <v-layout> | 173 | <v-layout> |
| 174 | <v-text-field | 174 | <v-text-field |
| 175 | autofocus | 175 | autofocus |
| 176 | v-model="search" | 176 | v-model="search" |
| 177 | label="Search" | 177 | label="Search" |
| 178 | prepend-inner-icon="search" | 178 | prepend-inner-icon="search" |
| 179 | color="primary" | 179 | color="primary" |
| 180 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 180 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 181 | ></v-text-field> | 181 | ></v-text-field> |
| 182 | <v-icon @click="closeSearch" color="error">close</v-icon> | 182 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-toolbar> | 185 | </v-toolbar> |
| 186 | <v-data-table | 186 | <v-data-table |
| 187 | :headers="headers" | 187 | :headers="headers" |
| 188 | :items="syllabusList" | 188 | :items="syllabusList" |
| 189 | :pagination.sync="pagination" | 189 | :pagination.sync="pagination" |
| 190 | :search="search" | 190 | :search="search" |
| 191 | > | 191 | > |
| 192 | <template slot="items" slot-scope="props"> | 192 | <template slot="items" slot-scope="props"> |
| 193 | <tr class="tr"> | 193 | <tr class="tr"> |
| 194 | <td class="td-row td">{{ props.index + 1 }}</td> | 194 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 195 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> | 195 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> |
| 196 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> | 196 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> |
| 197 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> | 197 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> |
| 198 | <td | 198 | <td |
| 199 | class="text-xs-center td tgeneratePDF2Canvasd-row" | 199 | class="text-xs-center td tgeneratePDF2Canvasd-row" |
| 200 | v-if="props.item.teacherId" | 200 | v-if="props.item.teacherId" |
| 201 | >{{ props.item.teacherId.name }}</td> | 201 | >{{ props.item.teacherId.name }}</td> |
| 202 | <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td> | 202 | <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td> |
| 203 | <td class="text-xs-center td td-row"> | 203 | <td class="text-xs-center td td-row"> |
| 204 | <!-- <v-btn | 204 | <!-- <v-btn |
| 205 | class="add-button" | 205 | class="add-button" |
| 206 | @click="generatePDF2Canvas(props.item)" | 206 | @click="generatePDF2Canvas(props.item)" |
| 207 | :loading="loadingPdf" | 207 | :loading="loadingPdf" |
| 208 | dark | 208 | dark |
| 209 | >{{ props.item.fileType }}</v-btn>--> | 209 | >{{ props.item.fileType }}</v-btn>--> |
| 210 | <a | 210 | <a |
| 211 | class="hover" | 211 | class="hover" |
| 212 | :href="props.item.documentUrl" | 212 | :href="props.item.documentUrl" |
| 213 | target="_blank" | 213 | target="_blank" |
| 214 | style="text-decoration: none!important; color: grey" | 214 | style="text-decoration: none!important; color: grey" |
| 215 | > | 215 | > |
| 216 | <!-- <v-btn flat block> | 216 | <!-- <v-btn flat block> |
| 217 | <span>--> | 217 | <span>--> |
| 218 | <h5>{{props.item.fileName}}</h5> | 218 | <h5>{{props.item.fileName}}</h5> |
| 219 | <!-- </span> | 219 | <!-- </span> |
| 220 | </v-btn>--> | 220 | </v-btn>--> |
| 221 | </a> | 221 | </a> |
| 222 | </td> | 222 | </td> |
| 223 | <td class="text-xs-center td td-row"> | 223 | <td class="text-xs-center td td-row"> |
| 224 | <span> | 224 | <span> |
| 225 | <v-tooltip top> | 225 | <v-tooltip top> |
| 226 | <img | 226 | <img |
| 227 | slot="activator" | 227 | slot="activator" |
| 228 | style="cursor:pointer; width:20px; height:18px; " | 228 | style="cursor:pointer; width:20px; height:18px; " |
| 229 | class="mr-3" | 229 | class="mr-3" |
| 230 | @click="editItem(props.item)" | 230 | @click="editItem(props.item)" |
| 231 | src="/static/icon/edit.png" | 231 | src="/static/icon/edit.png" |
| 232 | /> | 232 | /> |
| 233 | <span>Edit</span> | 233 | <span>Edit</span> |
| 234 | </v-tooltip> | 234 | </v-tooltip> |
| 235 | <v-tooltip top> | 235 | <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:20px; height:20px; " | 238 | style="cursor:pointer; width:20px; height:20px; " |
| 239 | class="mr-3" | 239 | class="mr-3" |
| 240 | @click="deleteItem(props.item)" | 240 | @click="deleteItem(props.item)" |
| 241 | src="/static/icon/delete.png" | 241 | src="/static/icon/delete.png" |
| 242 | /> | 242 | /> |
| 243 | <span>Delete</span> | 243 | <span>Delete</span> |
| 244 | </v-tooltip> | 244 | </v-tooltip> |
| 245 | </span> | 245 | </span> |
| 246 | </td> | 246 | </td> |
| 247 | </tr> | 247 | </tr> |
| 248 | </template> | 248 | </template> |
| 249 | <v-alert | 249 | <v-alert |
| 250 | slot="no-results" | 250 | slot="no-results" |
| 251 | :value="true" | 251 | :value="true" |
| 252 | color="error" | 252 | color="error" |
| 253 | icon="warning" | 253 | icon="warning" |
| 254 | >Your search for "{{ search }}" found no results.</v-alert> | 254 | >Your search for "{{ search }}" found no results.</v-alert> |
| 255 | </v-data-table> | 255 | </v-data-table> |
| 256 | <!-- ****** ADD SYLLABUS ****** --> | 256 | <!-- ****** ADD SYLLABUS ****** --> |
| 257 | <v-snackbar | 257 | <v-snackbar |
| 258 | :timeout="timeout" | 258 | :timeout="timeout" |
| 259 | :top="y === 'top'" | 259 | :top="y === 'top'" |
| 260 | :right="x === 'right'" | 260 | :right="x === 'right'" |
| 261 | :vertical="mode === 'vertical'" | 261 | :vertical="mode === 'vertical'" |
| 262 | v-model="snackbar" | 262 | v-model="snackbar" |
| 263 | :color="color" | 263 | :color="color" |
| 264 | >{{ text }}</v-snackbar> | 264 | >{{ text }}</v-snackbar> |
| 265 | <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog" persistent> | 265 | <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog" persistent> |
| 266 | <v-card flat class="card-style pa-2" dark> | 266 | <v-card flat class="Card-style pa-2"> |
| 267 | <v-layout> | 267 | <v-layout> |
| 268 | <v-flex xs12> | 268 | <v-flex xs12> |
| 269 | <label class="title text-xs-center">Add Syllabus</label> | 269 | <label class="title text-xs-center">Add Syllabus</label> |
| 270 | <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon> | 270 | <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | </v-layout> | 272 | </v-layout> |
| 273 | <v-container fluid fill-height> | 273 | <v-container fluid fill-height> |
| 274 | <v-layout align-center> | 274 | <v-layout align-center> |
| 275 | <v-flex xs12> | 275 | <v-flex xs12> |
| 276 | <v-form ref="form" v-model="valid" lazy-validation> | 276 | <v-form ref="form" v-model="valid" lazy-validation> |
| 277 | <v-layout> | 277 | <v-layout> |
| 278 | <v-flex xs4 sm4 class="pt-4 subheading"> | 278 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 279 | <label class="right">Title :</label> | 279 | <label class="right">Title :</label> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs8 sm8 class="ml-3"> | 281 | <v-flex xs8 sm8 class="ml-3"> |
| 282 | <v-text-field | 282 | <v-text-field |
| 283 | v-model="addSyllabus.title" | 283 | v-model="addSyllabus.title" |
| 284 | name="name" | 284 | name="name" |
| 285 | type="text" | 285 | type="text" |
| 286 | placeholder="Add Title" | 286 | placeholder="Add Title" |
| 287 | :rules="titleRules" | 287 | :rules="titleRules" |
| 288 | required | 288 | required |
| 289 | ></v-text-field> | 289 | ></v-text-field> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | </v-layout> | 291 | </v-layout> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs4 sm4 class="pt-4 subheading"> | 293 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 294 | <label class="right">Description :</label> | 294 | <label class="right">Description :</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | <v-flex xs8 sm8 class="ml-3"> | 296 | <v-flex xs8 sm8 class="ml-3"> |
| 297 | <v-text-field | 297 | <v-text-field |
| 298 | v-model="addSyllabus.description" | 298 | v-model="addSyllabus.description" |
| 299 | name="name" | 299 | name="name" |
| 300 | type="text" | 300 | type="text" |
| 301 | placeholder="Add Description" | 301 | placeholder="Add Description" |
| 302 | :rules="descriptionRules" | 302 | :rules="descriptionRules" |
| 303 | required | 303 | required |
| 304 | ></v-text-field> | 304 | ></v-text-field> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | </v-layout> | 306 | </v-layout> |
| 307 | <v-layout> | 307 | <v-layout> |
| 308 | <v-flex xs4 class="pt-4 subheading"> | 308 | <v-flex xs4 class="pt-4 subheading"> |
| 309 | <label class="right">Class:</label> | 309 | <label class="right">Class:</label> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | <v-flex xs8 class="ml-3"> | 311 | <v-flex xs8 class="ml-3"> |
| 312 | <v-select | 312 | <v-select |
| 313 | :items="classList" | 313 | :items="classList" |
| 314 | v-model="addSyllabus.classId" | 314 | v-model="addSyllabus.classId" |
| 315 | label="Select Class" | 315 | label="Select Class" |
| 316 | item-text="classNum" | 316 | item-text="classNum" |
| 317 | item-value="_id" | 317 | item-value="_id" |
| 318 | name="Select Class" | 318 | name="Select Class" |
| 319 | @change="getSections(addSyllabus.classId)" | 319 | @change="getSections(addSyllabus.classId)" |
| 320 | required | 320 | required |
| 321 | ></v-select> | 321 | ></v-select> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | </v-layout> | 323 | </v-layout> |
| 324 | <!-- <v-layout> | 324 | <!-- <v-layout> |
| 325 | <v-flex xs4 sm4 class="pt-4 subheading"> | 325 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 326 | <label class="right">Section :</label> | 326 | <label class="right">Section :</label> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | <v-flex xs8 sm8 class="ml-3"> | 328 | <v-flex xs8 sm8 class="ml-3"> |
| 329 | <v-select | 329 | <v-select |
| 330 | :items="addSection" | 330 | :items="addSection" |
| 331 | label="Select Section" | 331 | label="Select Section" |
| 332 | item-text="name" | 332 | item-text="name" |
| 333 | item-value="_id" | 333 | item-value="_id" |
| 334 | v-model="addSyllabus.sectionId" | 334 | v-model="addSyllabus.sectionId" |
| 335 | name="Select Section" | 335 | name="Select Section" |
| 336 | class="px-2" | 336 | class="px-2" |
| 337 | required | 337 | required |
| 338 | ></v-select> | 338 | ></v-select> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | </v-layout>--> | 340 | </v-layout>--> |
| 341 | <v-layout> | 341 | <v-layout> |
| 342 | <v-flex xs4 class="pt-4 subheading"> | 342 | <v-flex xs4 class="pt-4 subheading"> |
| 343 | <label class="right">File:</label> | 343 | <label class="right">File:</label> |
| 344 | </v-flex> | 344 | </v-flex> |
| 345 | <v-flex xs8 sm6 class="ml-3"> | 345 | <v-flex xs8 sm6 class="ml-3"> |
| 346 | <v-text-field | 346 | <v-text-field |
| 347 | label="Select file" | 347 | label="Select file" |
| 348 | @click="pickFile" | 348 | @click="pickFile" |
| 349 | v-model="imageName" | 349 | v-model="imageName" |
| 350 | append-icon="attach_file" | 350 | append-icon="attach_file" |
| 351 | ></v-text-field> | 351 | ></v-text-field> |
| 352 | <input | 352 | <input |
| 353 | type="file" | 353 | type="file" |
| 354 | style="display:none" | 354 | style="display:none" |
| 355 | ref="image" | 355 | ref="image" |
| 356 | accept="image/*" | 356 | accept="image/*" |
| 357 | @change="onFilePicked" | 357 | @change="onFilePicked" |
| 358 | /> | 358 | /> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | </v-layout> | 360 | </v-layout> |
| 361 | <v-layout> | 361 | <v-layout> |
| 362 | <v-flex xs12 sm12> | 362 | <v-flex xs12 sm12> |
| 363 | <v-card-actions> | 363 | <v-card-actions> |
| 364 | <v-spacer></v-spacer> | 364 | <v-spacer></v-spacer> |
| 365 | <v-btn | 365 | <v-btn |
| 366 | @click="submit" | 366 | @click="submit" |
| 367 | round | 367 | round |
| 368 | dark | 368 | dark |
| 369 | :loading="loading" | 369 | :loading="loading" |
| 370 | class="add-button" | 370 | class="add-button" |
| 371 | >Add Syllabus</v-btn> | 371 | >Add Syllabus</v-btn> |
| 372 | </v-card-actions> | 372 | </v-card-actions> |
| 373 | </v-flex> | 373 | </v-flex> |
| 374 | </v-layout> | 374 | </v-layout> |
| 375 | </v-form> | 375 | </v-form> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | </v-layout> | 377 | </v-layout> |
| 378 | </v-container> | 378 | </v-container> |
| 379 | </v-card> | 379 | </v-card> |
| 380 | </v-dialog> | 380 | </v-dialog> |
| 381 | <div class="loader" v-if="showLoader"> | 381 | <div class="loader" v-if="showLoader"> |
| 382 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 382 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 383 | </div> | 383 | </div> |
| 384 | </v-container> | 384 | </v-container> |
| 385 | </template> | 385 | </template> |
| 386 | 386 | ||
| 387 | <script> | 387 | <script> |
| 388 | import http from "@/Services/http.js"; | 388 | import http from "@/Services/http.js"; |
| 389 | import Util from "@/util"; | 389 | import Util from "@/util"; |
| 390 | import moment from "moment"; | 390 | import moment from "moment"; |
| 391 | import jsPDF from "jspdf"; | 391 | import jsPDF from "jspdf"; |
| 392 | import { saveAs } from "file-saver"; | 392 | import { saveAs } from "file-saver"; |
| 393 | 393 | ||
| 394 | export default { | 394 | export default { |
| 395 | data: () => ({ | 395 | data: () => ({ |
| 396 | snackbar: false, | 396 | snackbar: false, |
| 397 | y: "top", | 397 | y: "top", |
| 398 | x: "right", | 398 | x: "right", |
| 399 | mode: "", | 399 | mode: "", |
| 400 | timeout: 3000, | 400 | timeout: 3000, |
| 401 | text: "", | 401 | text: "", |
| 402 | color: "", | 402 | color: "", |
| 403 | show: true, | 403 | show: true, |
| 404 | showSearch: false, | 404 | showSearch: false, |
| 405 | showLoader: false, | 405 | showLoader: false, |
| 406 | loading: false, | 406 | loading: false, |
| 407 | editLoading: false, | 407 | editLoading: false, |
| 408 | date: null, | 408 | date: null, |
| 409 | search: "", | 409 | search: "", |
| 410 | editSyllabusDialog: false, | 410 | editSyllabusDialog: false, |
| 411 | valid: true, | 411 | valid: true, |
| 412 | validEditSyllabus: true, | 412 | validEditSyllabus: true, |
| 413 | addSyllabusDialog: false, | 413 | addSyllabusDialog: false, |
| 414 | loadingPdf: false, | 414 | loadingPdf: false, |
| 415 | 415 | ||
| 416 | pagination: { | 416 | pagination: { |
| 417 | rowsPerPage: 10, | 417 | rowsPerPage: 10, |
| 418 | }, | 418 | }, |
| 419 | token: "", | 419 | token: "", |
| 420 | upload: "", | 420 | upload: "", |
| 421 | titleRules: [(v) => !!v || " Title is required"], | 421 | titleRules: [(v) => !!v || " Title is required"], |
| 422 | descriptionRules: [(v) => !!v || " Description is required"], | 422 | descriptionRules: [(v) => !!v || " Description is required"], |
| 423 | classRules: [(v) => !!v || " Class Name is required"], | 423 | classRules: [(v) => !!v || " Class Name is required"], |
| 424 | fileRules: [(v) => !!v || " File is required"], | 424 | fileRules: [(v) => !!v || " File is required"], |
| 425 | headers: [ | 425 | headers: [ |
| 426 | { | 426 | { |
| 427 | text: "No", | 427 | text: "No", |
| 428 | align: "", | 428 | align: "", |
| 429 | sortable: false, | 429 | sortable: false, |
| 430 | value: "No", | 430 | value: "No", |
| 431 | }, | 431 | }, |
| 432 | { | 432 | { |
| 433 | text: "Title", | 433 | text: "Title", |
| 434 | value: "title", | 434 | value: "title", |
| 435 | sortable: false, | 435 | sortable: false, |
| 436 | align: "center", | 436 | align: "center", |
| 437 | }, | 437 | }, |
| 438 | { | 438 | { |
| 439 | text: "Description", | 439 | text: "Description", |
| 440 | value: "description", | 440 | value: "description", |
| 441 | sortable: false, | 441 | sortable: false, |
| 442 | align: "center", | 442 | align: "center", |
| 443 | }, | 443 | }, |
| 444 | { | 444 | { |
| 445 | text: "Date", | 445 | text: "Date", |
| 446 | value: "created", | 446 | value: "created", |
| 447 | sortable: false, | 447 | sortable: false, |
| 448 | align: "center", | 448 | align: "center", |
| 449 | }, | 449 | }, |
| 450 | { | 450 | { |
| 451 | text: "Uploader", | 451 | text: "Uploader", |
| 452 | value: "upload", | 452 | value: "upload", |
| 453 | sortable: false, | 453 | sortable: false, |
| 454 | align: "center", | 454 | align: "center", |
| 455 | }, | 455 | }, |
| 456 | { | 456 | { |
| 457 | text: "File", | 457 | text: "File", |
| 458 | value: "documentUrl", | 458 | value: "documentUrl", |
| 459 | sortable: false, | 459 | sortable: false, |
| 460 | align: "center", | 460 | align: "center", |
| 461 | }, | 461 | }, |
| 462 | { text: "Action", value: "", sortable: false, align: "center" }, | 462 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 463 | ], | 463 | ], |
| 464 | syllabusList: [], | 464 | syllabusList: [], |
| 465 | classList: [], | 465 | classList: [], |
| 466 | addSection: [], | 466 | addSection: [], |
| 467 | editedIndex: -1, | 467 | editedIndex: -1, |
| 468 | addSyllabus: {}, | 468 | addSyllabus: {}, |
| 469 | showSyllabus: {}, | 469 | showSyllabus: {}, |
| 470 | 470 | ||
| 471 | editedItem: { | 471 | editedItem: { |
| 472 | subjectName: "", | 472 | subjectName: "", |
| 473 | }, | 473 | }, |
| 474 | imageData: {}, | 474 | imageData: {}, |
| 475 | imageName: "", | 475 | imageName: "", |
| 476 | imageUrl: "", | 476 | imageUrl: "", |
| 477 | imageFile: "", | 477 | imageFile: "", |
| 478 | }), | 478 | }), |
| 479 | 479 | ||
| 480 | watch: { | 480 | watch: { |
| 481 | addSyllabusDialog: function (val) { | 481 | addSyllabusDialog: function (val) { |
| 482 | if (!val) { | 482 | if (!val) { |
| 483 | this.addSyllabus = []; | 483 | this.addSyllabus = []; |
| 484 | this.imageName = ""; | 484 | this.imageName = ""; |
| 485 | } | 485 | } |
| 486 | }, | 486 | }, |
| 487 | }, | 487 | }, |
| 488 | 488 | ||
| 489 | methods: { | 489 | methods: { |
| 490 | pickFile() { | 490 | pickFile() { |
| 491 | this.$refs.image.click(); | 491 | this.$refs.image.click(); |
| 492 | }, | 492 | }, |
| 493 | dates: function (date) { | 493 | dates: function (date) { |
| 494 | return moment(date).format("MMMM DD, YYYY"); | 494 | return moment(date).format("MMMM DD, YYYY"); |
| 495 | }, | 495 | }, |
| 496 | editItem(item) { | 496 | editItem(item) { |
| 497 | this.editedIndex = this.syllabusList; | 497 | this.editedIndex = this.syllabusList; |
| 498 | this.editedItem = Object.assign({}, item); | 498 | this.editedItem = Object.assign({}, item); |
| 499 | this.dialog = true; | 499 | this.dialog = true; |
| 500 | this.editSyllabusDialog = true; | 500 | this.editSyllabusDialog = true; |
| 501 | }, | 501 | }, |
| 502 | download(item) { | 502 | download(item) { |
| 503 | this.editedIndex = this.syllabusList; | 503 | this.editedIndex = this.syllabusList; |
| 504 | this.editedItem = Object.assign({}, item); | 504 | this.editedItem = Object.assign({}, item); |
| 505 | this.dialog1 = true; | 505 | this.dialog1 = true; |
| 506 | }, | 506 | }, |
| 507 | deleteItem(item) { | 507 | deleteItem(item) { |
| 508 | let deleteSyallabus = { | 508 | let deleteSyallabus = { |
| 509 | syallabusId: item._id, | 509 | syallabusId: item._id, |
| 510 | }; | 510 | }; |
| 511 | http() | 511 | http() |
| 512 | .delete( | 512 | .delete( |
| 513 | "/deleteSyallabus", | 513 | "/deleteSyallabus", |
| 514 | confirm("Are you sure you want to delete this?") && { | 514 | confirm("Are you sure you want to delete this?") && { |
| 515 | params: deleteSyallabus, | 515 | params: deleteSyallabus, |
| 516 | } | 516 | } |
| 517 | ) | 517 | ) |
| 518 | .then((response) => { | 518 | .then((response) => { |
| 519 | this.getSyallabusList(); | 519 | this.getSyallabusList(); |
| 520 | this.snackbar = true; | 520 | this.snackbar = true; |
| 521 | this.color = "green"; | 521 | this.color = "green"; |
| 522 | this.text = "Successfully delete Existing Syllabus"; | 522 | this.text = "Successfully delete Existing Syllabus"; |
| 523 | }) | 523 | }) |
| 524 | .catch((error) => { | 524 | .catch((error) => { |
| 525 | this.snackbar = true; | 525 | this.snackbar = true; |
| 526 | this.text = error.response.data.message; | 526 | this.text = error.response.data.message; |
| 527 | this.color = "error"; | 527 | this.color = "error"; |
| 528 | }); | 528 | }); |
| 529 | }, | 529 | }, |
| 530 | close() { | 530 | close() { |
| 531 | this.editSyllabusDialog = false; | 531 | this.editSyllabusDialog = false; |
| 532 | }, | 532 | }, |
| 533 | closeAddStudentModel() { | 533 | closeAddStudentModel() { |
| 534 | this.addSyllabusDialog = false; | 534 | this.addSyllabusDialog = false; |
| 535 | // this.syllabusList = []; | 535 | // this.syllabusList = []; |
| 536 | this.addSyllabus = []; | 536 | this.addSyllabus = []; |
| 537 | this.imageName = ""; | 537 | this.imageName = ""; |
| 538 | }, | 538 | }, |
| 539 | 539 | ||
| 540 | submit() { | 540 | submit() { |
| 541 | // var addSyllabus = { | 541 | // var addSyllabus = { |
| 542 | // classId: this.addSyllabus.classId, | 542 | // classId: this.addSyllabus.classId, |
| 543 | // title: this.addSyllabus.title, | 543 | // title: this.addSyllabus.title, |
| 544 | // description: this.addSyllabus.description, | 544 | // description: this.addSyllabus.description, |
| 545 | // upload: this.addSyllabus.upload, | 545 | // upload: this.addSyllabus.upload, |
| 546 | // fileType: this.addSyllabus.fileType | 546 | // fileType: this.addSyllabus.fileType |
| 547 | // }; | 547 | // }; |
| 548 | var signatures = { | 548 | var signatures = { |
| 549 | // JVBERi0: "other", | 549 | // JVBERi0: "other", |
| 550 | // iVBORw0KGgo: "image", | 550 | // iVBORw0KGgo: "image", |
| 551 | // UEsDBBQ: "other", | 551 | // UEsDBBQ: "other", |
| 552 | // "/": "image", | 552 | // "/": "image", |
| 553 | // AAABAA: "image", | 553 | // AAABAA: "image", |
| 554 | // IywiV2hhdC: "other", | 554 | // IywiV2hhdC: "other", |
| 555 | // bmFtZSxl: "other", | 555 | // bmFtZSxl: "other", |
| 556 | }; | 556 | }; |
| 557 | function detectMimeType(b64) { | 557 | function detectMimeType(b64) { |
| 558 | for (var s in signatures) { | 558 | for (var s in signatures) { |
| 559 | if (b64.indexOf(s) === 0) { | 559 | if (b64.indexOf(s) === 0) { |
| 560 | return signatures[s]; | 560 | return signatures[s]; |
| 561 | } | 561 | } |
| 562 | } | 562 | } |
| 563 | } | 563 | } |
| 564 | if (this.$refs.form.validate()) { | 564 | if (this.$refs.form.validate()) { |
| 565 | if (this.imageUrl) { | 565 | if (this.imageUrl) { |
| 566 | var str = this.imageUrl; | 566 | var str = this.imageUrl; |
| 567 | const [baseUrl, imageUrl] = str.split(/,/); | 567 | const [baseUrl, imageUrl] = str.split(/,/); |
| 568 | this.addSyllabus.upload = imageUrl; | 568 | this.addSyllabus.upload = imageUrl; |
| 569 | this.addSyllabus.fileType = detectMimeType(imageUrl); | 569 | this.addSyllabus.fileType = detectMimeType(imageUrl); |
| 570 | this.addSyllabus.fileName = this.imageName; | 570 | this.addSyllabus.fileName = this.imageName; |
| 571 | } | 571 | } |
| 572 | http() | 572 | http() |
| 573 | .post("/createSyallabus", this.addSyllabus) | 573 | .post("/createSyallabus", this.addSyllabus) |
| 574 | .then((response) => { | 574 | .then((response) => { |
| 575 | this.getSyallabusList(); | 575 | this.getSyallabusList(); |
| 576 | this.snackbar = true; | 576 | this.snackbar = true; |
| 577 | this.text = "Syllabus added successfully"; | 577 | this.text = "Syllabus added successfully"; |
| 578 | this.clear(); | 578 | this.clear(); |
| 579 | this.color = "green"; | 579 | this.color = "green"; |
| 580 | this.addSyllabusDialog = false; | 580 | this.addSyllabusDialog = false; |
| 581 | }) | 581 | }) |
| 582 | .catch((error) => { | 582 | .catch((error) => { |
| 583 | // console.log(error); | 583 | // console.log(error); |
| 584 | this.snackbar = true; | 584 | this.snackbar = true; |
| 585 | this.text = error.response.data.message; | 585 | this.text = error.response.data.message; |
| 586 | this.color = "error"; | 586 | this.color = "error"; |
| 587 | }); | 587 | }); |
| 588 | } | 588 | } |
| 589 | }, | 589 | }, |
| 590 | onFilePicked(e) { | 590 | onFilePicked(e) { |
| 591 | const files = e.target.files; | 591 | const files = e.target.files; |
| 592 | this.upload = e.target.files[0]; | 592 | this.upload = e.target.files[0]; |
| 593 | if (files[0] !== undefined) { | 593 | if (files[0] !== undefined) { |
| 594 | this.imageName = files[0].name; | 594 | this.imageName = files[0].name; |
| 595 | if (this.imageName.lastIndexOf(".") <= 0) { | 595 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 596 | return; | 596 | return; |
| 597 | } | 597 | } |
| 598 | const fr = new FileReader(); | 598 | const fr = new FileReader(); |
| 599 | fr.readAsDataURL(files[0]); | 599 | fr.readAsDataURL(files[0]); |
| 600 | fr.addEventListener("load", () => { | 600 | fr.addEventListener("load", () => { |
| 601 | this.imageUrl = fr.result; | 601 | this.imageUrl = fr.result; |
| 602 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 602 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 603 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 603 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 604 | }); | 604 | }); |
| 605 | } else { | 605 | } else { |
| 606 | this.imageName = ""; | 606 | this.imageName = ""; |
| 607 | this.imageFile = ""; | 607 | this.imageFile = ""; |
| 608 | this.imageUrl = ""; | 608 | this.imageUrl = ""; |
| 609 | } | 609 | } |
| 610 | }, | 610 | }, |
| 611 | clear() { | 611 | clear() { |
| 612 | this.$refs.form.reset(); | 612 | this.$refs.form.reset(); |
| 613 | }, | 613 | }, |
| 614 | save() { | 614 | save() { |
| 615 | if (this.$refs.formEditSyllabus.validate()) { | 615 | if (this.$refs.formEditSyllabus.validate()) { |
| 616 | let syllabusData = { | 616 | let syllabusData = { |
| 617 | syallabusId: this.editedItem._id, | 617 | syallabusId: this.editedItem._id, |
| 618 | classId: this.editedItem.classId._id, | 618 | classId: this.editedItem.classId._id, |
| 619 | // sectionId: this.editedItem.sectionId, | 619 | // sectionId: this.editedItem.sectionId, |
| 620 | title: this.editedItem.title, | 620 | title: this.editedItem.title, |
| 621 | description: this.editedItem.description, | 621 | description: this.editedItem.description, |
| 622 | upload: this.editedItem.upload, | 622 | upload: this.editedItem.upload, |
| 623 | fileType: this.editedItem.fileType, | 623 | fileType: this.editedItem.fileType, |
| 624 | fileName: this.imageName, | 624 | fileName: this.imageName, |
| 625 | }; | 625 | }; |
| 626 | this.editLoading = true; | 626 | this.editLoading = true; |
| 627 | var signatures = { | 627 | var signatures = { |
| 628 | // JVBERi0: "other", | 628 | // JVBERi0: "other", |
| 629 | // iVBORw0KGgo: "image", | 629 | // iVBORw0KGgo: "image", |
| 630 | // UEsDBBQ: "other", | 630 | // UEsDBBQ: "other", |
| 631 | // "/": "image", | 631 | // "/": "image", |
| 632 | // AAABAA: "image", | 632 | // AAABAA: "image", |
| 633 | // IywiV2hhdC: "other", | 633 | // IywiV2hhdC: "other", |
| 634 | }; | 634 | }; |
| 635 | function detectMimeType(b64) { | 635 | function detectMimeType(b64) { |
| 636 | for (var s in signatures) { | 636 | for (var s in signatures) { |
| 637 | if (b64.indexOf(s) === 0) { | 637 | if (b64.indexOf(s) === 0) { |
| 638 | return signatures[s]; | 638 | return signatures[s]; |
| 639 | } | 639 | } |
| 640 | } | 640 | } |
| 641 | } | 641 | } |
| 642 | if (this.imageUrl) { | 642 | if (this.imageUrl) { |
| 643 | var str = this.imageUrl; | 643 | var str = this.imageUrl; |
| 644 | const [baseUrl, imageUrl] = str.split(/,/); | 644 | const [baseUrl, imageUrl] = str.split(/,/); |
| 645 | syllabusData.upload = imageUrl; | 645 | syllabusData.upload = imageUrl; |
| 646 | syllabusData.fileType = detectMimeType(imageUrl); | 646 | syllabusData.fileType = detectMimeType(imageUrl); |
| 647 | } | 647 | } |
| 648 | http() | 648 | http() |
| 649 | .put("/updateSyallabus", syllabusData) | 649 | .put("/updateSyallabus", syllabusData) |
| 650 | .then((response) => { | 650 | .then((response) => { |
| 651 | this.snackbar = true; | 651 | this.snackbar = true; |
| 652 | this.text = "Successfully Edit Existing Syllabus"; | 652 | this.text = "Successfully Edit Existing Syllabus"; |
| 653 | this.color = "green"; | 653 | this.color = "green"; |
| 654 | this.editLoading = false; | 654 | this.editLoading = false; |
| 655 | this.editSyllabusDialog = false; | 655 | this.editSyllabusDialog = false; |
| 656 | http() | 656 | http() |
| 657 | .get( | 657 | .get( |
| 658 | "/getSyallabusList", | 658 | "/getSyallabusList", |
| 659 | { params: { classId: this.addSyllabus.classId } }, | 659 | { params: { classId: this.addSyllabus.classId } }, |
| 660 | { | 660 | { |
| 661 | headers: { Authorization: "Bearer " + this.token }, | 661 | headers: { Authorization: "Bearer " + this.token }, |
| 662 | } | 662 | } |
| 663 | ) | 663 | ) |
| 664 | .then((response) => { | 664 | .then((response) => { |
| 665 | this.syllabusList = response.data.data; | 665 | this.syllabusList = response.data.data; |
| 666 | this.getSyallabusList(); | 666 | this.getSyallabusList(); |
| 667 | this.snackbar = true; | 667 | this.snackbar = true; |
| 668 | this.color = "green"; | 668 | this.color = "green"; |
| 669 | this.close(); | 669 | this.close(); |
| 670 | }) | 670 | }) |
| 671 | .catch((err) => { | 671 | .catch((err) => { |
| 672 | // console.log("err====>", err); | 672 | // console.log("err====>", err); |
| 673 | this.text = error.response.data.message; | 673 | this.text = error.response.data.message; |
| 674 | this.color = "error"; | 674 | this.color = "error"; |
| 675 | }); | 675 | }); |
| 676 | }) | 676 | }) |
| 677 | .catch((error) => { | 677 | .catch((error) => { |
| 678 | this.editLoading = false; | 678 | this.editLoading = false; |
| 679 | }); | 679 | }); |
| 680 | } | 680 | } |
| 681 | }, | 681 | }, |
| 682 | getSyallabusList() { | 682 | getSyallabusList() { |
| 683 | this.showLoader = true; | 683 | this.showLoader = true; |
| 684 | http() | 684 | http() |
| 685 | .get( | 685 | .get( |
| 686 | "/getSyallabusList", | 686 | "/getSyallabusList", |
| 687 | { params: { classId: this.showSyllabus.classId } }, | 687 | { params: { classId: this.showSyllabus.classId } }, |
| 688 | { | 688 | { |
| 689 | headers: { Authorization: "Bearer " + this.token }, | 689 | headers: { Authorization: "Bearer " + this.token }, |
| 690 | } | 690 | } |
| 691 | ) | 691 | ) |
| 692 | .then((response) => { | 692 | .then((response) => { |
| 693 | this.syllabusList = response.data.data; | 693 | this.syllabusList = response.data.data; |
| 694 | this.showLoader = false; | 694 | this.showLoader = false; |
| 695 | }) | 695 | }) |
| 696 | .catch((err) => { | 696 | .catch((err) => { |
| 697 | this.showLoader = false; | 697 | this.showLoader = false; |
| 698 | }); | 698 | }); |
| 699 | }, | 699 | }, |
| 700 | getClass() { | 700 | getClass() { |
| 701 | http() | 701 | http() |
| 702 | .get("/getClassesList", { | 702 | .get("/getClassesList", { |
| 703 | headers: { Authorization: "Bearer " + this.token }, | 703 | headers: { Authorization: "Bearer " + this.token }, |
| 704 | }) | 704 | }) |
| 705 | .then((response) => { | 705 | .then((response) => { |
| 706 | this.classList = response.data.data; | 706 | this.classList = response.data.data; |
| 707 | }) | 707 | }) |
| 708 | .catch((error) => { | 708 | .catch((error) => { |
| 709 | if (error.response.status === 401) { | 709 | if (error.response.status === 401) { |
| 710 | this.$router.replace({ path: "/" }); | 710 | this.$router.replace({ path: "/" }); |
| 711 | this.$store.dispatch("setToken", null); | 711 | this.$store.dispatch("setToken", null); |
| 712 | this.$store.dispatch("Id", null); | 712 | this.$store.dispatch("Id", null); |
| 713 | } | 713 | } |
| 714 | }); | 714 | }); |
| 715 | }, | 715 | }, |
| 716 | getSections(_id) { | 716 | getSections(_id) { |
| 717 | var token = this.$store.state.token; | 717 | var token = this.$store.state.token; |
| 718 | this.showLoader = true; | 718 | this.showLoader = true; |
| 719 | http() | 719 | http() |
| 720 | .get( | 720 | .get( |
| 721 | "/getSectionsList", | 721 | "/getSectionsList", |
| 722 | { params: { classId: _id } }, | 722 | { params: { classId: _id } }, |
| 723 | { | 723 | { |
| 724 | headers: { Authorization: "Bearer " + token }, | 724 | headers: { Authorization: "Bearer " + token }, |
| 725 | } | 725 | } |
| 726 | ) | 726 | ) |
| 727 | .then((response) => { | 727 | .then((response) => { |
| 728 | this.addSection = response.data.data; | 728 | this.addSection = response.data.data; |
| 729 | this.showLoader = false; | 729 | this.showLoader = false; |
| 730 | }) | 730 | }) |
| 731 | .catch((err) => { | 731 | .catch((err) => { |
| 732 | this.showLoader = false; | 732 | this.showLoader = false; |
| 733 | }); | 733 | }); |
| 734 | }, | 734 | }, |
| 735 | displaySearch() { | 735 | displaySearch() { |
| 736 | (this.show = false), (this.showSearch = true); | 736 | (this.show = false), (this.showSearch = true); |
| 737 | }, | 737 | }, |
| 738 | closeSearch() { | 738 | closeSearch() { |
| 739 | this.showSearch = false; | 739 | this.showSearch = false; |
| 740 | this.show = true; | 740 | this.show = true; |
| 741 | this.search = ""; | 741 | this.search = ""; |
| 742 | }, | 742 | }, |
| 743 | 743 | ||
| 744 | async generatePDF2Canvas(item) { | 744 | async generatePDF2Canvas(item) { |
| 745 | // console.log("documentUrl", documentUrl); | 745 | // console.log("documentUrl", documentUrl); |
| 746 | // this.loadingPdf = true; | 746 | // this.loadingPdf = true; |
| 747 | // const el = this.$refs.printMe; | 747 | // const el = this.$refs.printMe; |
| 748 | // add option type to get the image version | 748 | // add option type to get the image version |
| 749 | // if not provided the promise will return | 749 | // if not provided the promise will return |
| 750 | // the canvas. | 750 | // the canvas. |
| 751 | // const options = { | 751 | // const options = { |
| 752 | // type: "dataURL" | 752 | // type: "dataURL" |
| 753 | // }; | 753 | // }; |
| 754 | // this.output = await this.$html2canvas(el, options); | 754 | // this.output = await this.$html2canvas(el, options); |
| 755 | // console.log("el,option", this.output); | 755 | // console.log("el,option", this.output); |
| 756 | // if (this.output) { | 756 | // if (this.output) { |
| 757 | // this.loadingPdf = false; | 757 | // this.loadingPdf = false; |
| 758 | // } | 758 | // } |
| 759 | // let doc = new jsPDF(); | 759 | // let doc = new jsPDF(); |
| 760 | // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); | 760 | // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); |
| 761 | // doc.save("File.pdf"); | 761 | // doc.save("File.pdf"); |
| 762 | 762 | ||
| 763 | // function download(documentUrl, filename) { | 763 | // function download(documentUrl, filename) { |
| 764 | // fetch(documentUrl).then(function(t) { | 764 | // fetch(documentUrl).then(function(t) { |
| 765 | // return t.blob().then(b => { | 765 | // return t.blob().then(b => { |
| 766 | // var a = document.createElement("a"); | 766 | // var a = document.createElement("a"); |
| 767 | // a.href = URL.createObjectURL(b); | 767 | // a.href = URL.createObjectURL(b); |
| 768 | // a.setAttribute("download", "filename"); | 768 | // a.setAttribute("download", "filename"); |
| 769 | // a.click(); | 769 | // a.click(); |
| 770 | // }); | 770 | // }); |
| 771 | // }); | 771 | // }); |
| 772 | // } | 772 | // } |
| 773 | var dataType = ""; | 773 | var dataType = ""; |
| 774 | var type = ""; | 774 | var type = ""; |
| 775 | if (item.fileType == "image") { | 775 | if (item.fileType == "image") { |
| 776 | dataType = "file.jpg"; | 776 | dataType = "file.jpg"; |
| 777 | } else if (item.fileType == "other") { | 777 | } else if (item.fileType == "other") { |
| 778 | dataType = "file.pdf"; | 778 | dataType = "file.pdf"; |
| 779 | type = "application/pdf"; | 779 | type = "application/pdf"; |
| 780 | } | 780 | } |
| 781 | var FileSaver = require("file-saver"); | 781 | var FileSaver = require("file-saver"); |
| 782 | FileSaver.saveAs(item.documentUrl, "image.jpg"); | 782 | FileSaver.saveAs(item.documentUrl, "image.jpg"); |
| 783 | 783 | ||
| 784 | // var blob = new Blob([item.documentUrl], { | 784 | // var blob = new Blob([item.documentUrl], { |
| 785 | // type: type | 785 | // type: type |
| 786 | // }); | 786 | // }); |
| 787 | // FileSaver.saveAs(blob, dataType); | 787 | // FileSaver.saveAs(blob, dataType); |
| 788 | // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); | 788 | // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); |
| 789 | // console.log("document", item.documentUrl); | 789 | // console.log("document", item.documentUrl); |
| 790 | // const link = document.createElement("a"); | 790 | // const link = document.createElement("a"); |
| 791 | // link.href = url; | 791 | // link.href = url; |
| 792 | // link.setAttribute("download", dataType); //or any other extension | 792 | // link.setAttribute("download", dataType); //or any other extension |
| 793 | // document.body.appendChild(link); | 793 | // document.body.appendChild(link); |
| 794 | // link.click(); | 794 | // link.click(); |
| 795 | 795 | ||
| 796 | // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); | 796 | // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); |
| 797 | // const link = document.createElement('a') | 797 | // const link = document.createElement('a') |
| 798 | // link.href = URL.createObjectURL(blob) | 798 | // link.href = URL.createObjectURL(blob) |
| 799 | // link.download = dataType | 799 | // link.download = dataType |
| 800 | // link.click() | 800 | // link.click() |
| 801 | // URL.revokeObjectURL(link.href) | 801 | // URL.revokeObjectURL(link.href) |
| 802 | }, | 802 | }, |
| 803 | }, | 803 | }, |
| 804 | mounted() { | 804 | mounted() { |
| 805 | this.token = this.$store.state.token; | 805 | this.token = this.$store.state.token; |
| 806 | this.role = this.$store.state.role; | 806 | this.role = this.$store.state.role; |
| 807 | this.getClass(); | 807 | this.getClass(); |
| 808 | }, | 808 | }, |
| 809 | }; | 809 | }; |
| 810 | </script> | 810 | </script> |
| 811 | 811 | ||
| 812 | <style scoped> | 812 | <style scoped> |
| 813 | a:hover :hover { | 813 | a:hover :hover { |
| 814 | text-decoration: underline !important; | 814 | text-decoration: underline !important; |
| 815 | color: blue; | 815 | color: blue; |
| 816 | } | 816 | } |
| 817 | </style> | 817 | </style> |
src/pages/Account/editInvoice.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <!-- ****** Edit multiple INVOICE ****** --> | 3 | <!-- ****** Edit multiple INVOICE ****** --> |
| 4 | 4 | ||
| 5 | <v-snackbar | 5 | <v-snackbar |
| 6 | :timeout="timeout" | 6 | :timeout="timeout" |
| 7 | :top="y === 'top'" | 7 | :top="y === 'top'" |
| 8 | :right="x === 'right'" | 8 | :right="x === 'right'" |
| 9 | :vertical="mode === 'vertical'" | 9 | :vertical="mode === 'vertical'" |
| 10 | v-model="snackbar" | 10 | v-model="snackbar" |
| 11 | color="success" | 11 | color="success" |
| 12 | >{{ text }}</v-snackbar> | 12 | >{{ text }}</v-snackbar> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-container fluid grid-list-md> | 14 | <v-container fluid grid-list-md> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12 md5 class="mt-4"> | 16 | <v-flex xs12 sm12 md5 class="mt-4"> |
| 17 | <v-card flat> | 17 | <v-card flat> |
| 18 | <v-toolbar dark class="card-styles" flat> | 18 | <v-toolbar dark class="card-styles" flat> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <v-toolbar-title> | 20 | <v-toolbar-title> |
| 21 | <h3>Invoice</h3> | 21 | <h3>Invoice</h3> |
| 22 | </v-toolbar-title> | 22 | </v-toolbar-title> |
| 23 | <v-spacer></v-spacer> | 23 | <v-spacer></v-spacer> |
| 24 | </v-toolbar> | 24 | </v-toolbar> |
| 25 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 25 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 26 | <v-layout> | 26 | <v-layout> |
| 27 | <v-flex xs4 class="pt-4 subheading"> | 27 | <v-flex xs4 class="pt-4 subheading"> |
| 28 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 28 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 29 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 29 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 30 | </v-flex> | 30 | </v-flex> |
| 31 | <v-flex xs6 class="ml-3"> | 31 | <v-flex xs6 class="ml-3"> |
| 32 | <v-select | 32 | <v-select |
| 33 | :items="addclass" | 33 | :items="addclass" |
| 34 | label="Select Class" | 34 | label="Select Class" |
| 35 | v-model="editData.classId" | 35 | v-model="editData.classId" |
| 36 | item-text="classNum" | 36 | item-text="classNum" |
| 37 | item-value="_id" | 37 | item-value="_id" |
| 38 | @change="getAllStudents(editData.classId)" | 38 | @change="getAllStudents(editData.classId)" |
| 39 | ></v-select> | 39 | ></v-select> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 class="pt-4 subheading"> | 43 | <v-flex xs4 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs6 class="ml-3"> | 47 | <v-flex xs6 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="studentList" | 49 | :items="studentList" |
| 50 | v-model="editData.studentId" | 50 | v-model="editData.studentId" |
| 51 | :label="editData.studentId ? editData.studentId.name: '-'" | 51 | :label="editData.studentId ? editData.studentId.name: '-'" |
| 52 | item-text="name" | 52 | item-text="name" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | @change="getStudentId(editData.studentId)" | 54 | @change="getStudentId(editData.studentId)" |
| 55 | ></v-select> | 55 | ></v-select> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs4 class="pt-4 subheading"> | 59 | <v-flex xs4 class="pt-4 subheading"> |
| 60 | <label class="right">Date:</label> | 60 | <label class="right">Date:</label> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | <v-flex xs6 class="ml-3"> | 62 | <v-flex xs6 class="ml-3"> |
| 63 | <v-menu | 63 | <v-menu |
| 64 | ref="menu1" | 64 | ref="menu1" |
| 65 | :close-on-content-click="false" | 65 | :close-on-content-click="false" |
| 66 | v-model="menu1" | 66 | v-model="menu1" |
| 67 | :nudge-right="40" | 67 | :nudge-right="40" |
| 68 | lazy | 68 | lazy |
| 69 | :return-value.sync="editData.date" | 69 | :return-value.sync="editData.date" |
| 70 | transition="scale-transition" | 70 | transition="scale-transition" |
| 71 | offset-y | 71 | offset-y |
| 72 | full-width | 72 | full-width |
| 73 | min-width="290px" | 73 | min-width="290px" |
| 74 | > | 74 | > |
| 75 | <v-text-field | 75 | <v-text-field |
| 76 | slot="activator" | 76 | slot="activator" |
| 77 | v-model="editData.date" | 77 | v-model="editData.date" |
| 78 | placeholder="Select date" | 78 | placeholder="Select date" |
| 79 | ></v-text-field> | 79 | ></v-text-field> |
| 80 | <v-date-picker | 80 | <v-date-picker |
| 81 | v-model="editData.date" | 81 | v-model="editData.date" |
| 82 | @input="$refs.menu1.save(editData.date)" | 82 | @input="$refs.menu1.save(editData.date)" |
| 83 | ></v-date-picker> | 83 | ></v-date-picker> |
| 84 | </v-menu> | 84 | </v-menu> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | <v-layout> | 87 | <v-layout> |
| 88 | <v-flex xs4 class="pt-4 subheading"> | 88 | <v-flex xs4 class="pt-4 subheading"> |
| 89 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> | 89 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> |
| 90 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> | 90 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | <v-flex xs6 class="ml-3"> | 92 | <v-flex xs6 class="ml-3"> |
| 93 | <v-select | 93 | <v-select |
| 94 | :items="paymentStatus" | 94 | :items="paymentStatus" |
| 95 | v-model="editData.paymentStatus" | 95 | v-model="editData.paymentStatus" |
| 96 | item-text="name" | 96 | item-text="name" |
| 97 | item-value="value" | 97 | item-value="value" |
| 98 | label="Select Payment Status" | 98 | label="Select Payment Status" |
| 99 | @change="getPayMethodList" | 99 | @change="getPayMethodList" |
| 100 | ></v-select> | 100 | ></v-select> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-layout v-show="showPayMethods"> | 103 | <v-layout v-show="showPayMethods"> |
| 104 | <v-flex xs4 class="pt-4 subheading"> | 104 | <v-flex xs4 class="pt-4 subheading"> |
| 105 | <label class="right">Payment Method:</label> | 105 | <label class="right">Payment Method:</label> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs6 class="ml-3"> | 107 | <v-flex xs6 class="ml-3"> |
| 108 | <v-select | 108 | <v-select |
| 109 | :items="paymentMethods" | 109 | :items="paymentMethods" |
| 110 | v-model="editData.paymentMethod" | 110 | v-model="editData.paymentMethod" |
| 111 | :rules="paymentMethodRules" | 111 | :rules="paymentMethodRules" |
| 112 | label="Select Payment Method" | 112 | label="Select Payment Method" |
| 113 | ></v-select> | 113 | ></v-select> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | <v-layout> | 116 | <v-layout> |
| 117 | <v-flex xs12 sm11> | 117 | <v-flex xs12 sm11> |
| 118 | <v-card-actions> | 118 | <v-card-actions> |
| 119 | <v-spacer></v-spacer> | 119 | <v-spacer></v-spacer> |
| 120 | <v-btn | 120 | <v-btn |
| 121 | @click="update(editData)" | 121 | @click="update(editData)" |
| 122 | round | 122 | round |
| 123 | dark | 123 | dark |
| 124 | :loading="loading" | 124 | :loading="loading" |
| 125 | class="add-button" | 125 | class="cancel-btn" |
| 126 | >Update</v-btn> | 126 | >Update</v-btn> |
| 127 | </v-card-actions> | 127 | </v-card-actions> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | </v-form> | 130 | </v-form> |
| 131 | </v-card> | 131 | </v-card> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | <v-flex xs12 sm12 md7 class="mt-4"> | 133 | <v-flex xs12 sm12 md7 class="mt-4"> |
| 134 | <v-card> | 134 | <v-card> |
| 135 | <v-toolbar dark class="card-styles" flat> | 135 | <v-toolbar dark class="card-styles" flat> |
| 136 | <v-spacer></v-spacer> | 136 | <v-spacer></v-spacer> |
| 137 | <v-toolbar-title> | 137 | <v-toolbar-title> |
| 138 | <h3>Fee Type List</h3> | 138 | <h3>Fee Type List</h3> |
| 139 | </v-toolbar-title> | 139 | </v-toolbar-title> |
| 140 | <v-spacer></v-spacer> | 140 | <v-spacer></v-spacer> |
| 141 | </v-toolbar> | 141 | </v-toolbar> |
| 142 | <v-layout wrap> | 142 | <v-layout wrap> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <v-layout wrap> | 144 | <v-layout wrap> |
| 145 | <v-flex xs12 sm2 class="mt-3"> | 145 | <v-flex xs12 sm2 class="mt-3"> |
| 146 | <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label> | 146 | <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label> |
| 147 | <label | 147 | <label |
| 148 | class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only" | 148 | class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only" |
| 149 | >Fee Type:</label> | 149 | >Fee Type:</label> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | <v-flex xs12 sm4> | 151 | <v-flex xs12 sm4> |
| 152 | <v-select | 152 | <v-select |
| 153 | :items="feeTypes" | 153 | :items="feeTypes" |
| 154 | v-model="feeType.feeTypeName" | 154 | v-model="feeType.feeTypeName" |
| 155 | item-text="feeType" | 155 | item-text="feeType" |
| 156 | item-value="feeType" | 156 | item-value="feeType" |
| 157 | label="Select Fee Type" | 157 | label="Select Fee Type" |
| 158 | class="px-2" | 158 | class="px-2" |
| 159 | ></v-select> | 159 | ></v-select> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs12 sm6> | 161 | <v-flex xs12 sm6> |
| 162 | <v-btn | 162 | <v-btn |
| 163 | dark | 163 | dark |
| 164 | class="right add-button hidden-sm-only hidden-xs-only" | 164 | class="right add-button hidden-sm-only hidden-xs-only" |
| 165 | color="open-dialog-button" | 165 | color="open-dialog-button" |
| 166 | @click="selectFeeType" | 166 | @click="selectFeeType" |
| 167 | >ADD</v-btn> | 167 | >ADD</v-btn> |
| 168 | <v-btn | 168 | <v-btn |
| 169 | dark | 169 | dark |
| 170 | class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only" | 170 | class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only" |
| 171 | color="open-dialog-button" | 171 | color="open-dialog-button" |
| 172 | @click="selectFeeType" | 172 | @click="selectFeeType" |
| 173 | >ADD</v-btn> | 173 | >ADD</v-btn> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | <table class="feeTypeTable tableRsponsive"> | 178 | <table class="feeTypeTable tableRsponsive"> |
| 179 | <tr class="info white--text"> | 179 | <tr class="info white--text"> |
| 180 | <th>#</th> | 180 | <th>#</th> |
| 181 | <th>Fee Type</th> | 181 | <th>Fee Type</th> |
| 182 | <th>Amount</th> | 182 | <th>Amount</th> |
| 183 | <th>Discount</th> | 183 | <th>Discount</th> |
| 184 | <th>Subtotal</th> | 184 | <th>Subtotal</th> |
| 185 | <th>Paid Amount</th> | 185 | <th>Paid Amount</th> |
| 186 | <th>Action</th> | 186 | <th>Action</th> |
| 187 | </tr> | 187 | </tr> |
| 188 | <tr | 188 | <tr |
| 189 | v-for="(feeType, index) in editData.feeType" | 189 | v-for="(feeType, index) in editData.feeType" |
| 190 | :key="index" | 190 | :key="index" |
| 191 | v-on:keyup="getAmmountDetails(feeType,editData.feeType)" | 191 | v-on:keyup="getAmmountDetails(feeType,editData.feeType)" |
| 192 | > | 192 | > |
| 193 | <td style="width:40px">{{ index + 1 }}</td> | 193 | <td style="width:40px">{{ index + 1 }}</td> |
| 194 | <td style="width:120px">{{ feeType.feeTypeName }}</td> | 194 | <td style="width:120px">{{ feeType.feeTypeName }}</td> |
| 195 | <td> | 195 | <td> |
| 196 | <v-text-field | 196 | <v-text-field |
| 197 | placeholder="fill your Amount" | 197 | placeholder="fill your Amount" |
| 198 | v-model="feeType.amount" | 198 | v-model="feeType.amount" |
| 199 | type="number" | 199 | type="number" |
| 200 | ></v-text-field> | 200 | ></v-text-field> |
| 201 | </td> | 201 | </td> |
| 202 | <td> | 202 | <td> |
| 203 | <v-text-field | 203 | <v-text-field |
| 204 | placeholder="fill your Discount" | 204 | placeholder="fill your Discount" |
| 205 | v-model="feeType.discount" | 205 | v-model="feeType.discount" |
| 206 | type="number" | 206 | type="number" |
| 207 | ></v-text-field> | 207 | ></v-text-field> |
| 208 | </td> | 208 | </td> |
| 209 | <td>{{ feeType.subTotal }}</td> | 209 | <td>{{ feeType.subTotal }}</td> |
| 210 | <td v-if="editData.paymentStatus === 'NOT_PAID'"> | 210 | <td v-if="editData.paymentStatus === 'NOT_PAID'"> |
| 211 | <v-text-field | 211 | <v-text-field |
| 212 | placeholder="fill your Paid Amount" | 212 | placeholder="fill your Paid Amount" |
| 213 | v-model="feeType.paidAmount" | 213 | v-model="feeType.paidAmount" |
| 214 | type="number" | 214 | type="number" |
| 215 | :disabled="disabled" | 215 | :disabled="disabled" |
| 216 | ></v-text-field> | 216 | ></v-text-field> |
| 217 | </td> | 217 | </td> |
| 218 | <td v-if="editData.paymentStatus != 'NOT_PAID'"> | 218 | <td v-if="editData.paymentStatus != 'NOT_PAID'"> |
| 219 | <v-text-field | 219 | <v-text-field |
| 220 | placeholder="fill your Paid Amount" | 220 | placeholder="fill your Paid Amount" |
| 221 | v-model="feeType.paidAmount" | 221 | v-model="feeType.paidAmount" |
| 222 | type="number" | 222 | type="number" |
| 223 | ></v-text-field> | 223 | ></v-text-field> |
| 224 | </td> | 224 | </td> |
| 225 | <td> | 225 | <td> |
| 226 | <v-icon | 226 | <v-icon |
| 227 | color="error" | 227 | color="error" |
| 228 | @click="deleteSelectFee(feeType,editData.feeType,index)" | 228 | @click="deleteSelectFee(feeType,editData.feeType,index)" |
| 229 | >delete</v-icon> | 229 | >delete</v-icon> |
| 230 | </td> | 230 | </td> |
| 231 | </tr> | 231 | </tr> |
| 232 | <tfoot v-if="feeType.amount != 0.00"> | 232 | <tfoot v-if="feeType.amount != 0.00"> |
| 233 | <tr> | 233 | <tr> |
| 234 | <td colspan="2">Total:</td> | 234 | <td colspan="2">Total:</td> |
| 235 | <td>{{ feeType.amount }}</td> | 235 | <td>{{ feeType.amount }}</td> |
| 236 | <td>{{ feeType.discount }}</td> | 236 | <td>{{ feeType.discount }}</td> |
| 237 | <td>{{ feeType.subTotal }}</td> | 237 | <td>{{ feeType.subTotal }}</td> |
| 238 | <td>{{ feeType.paidAmount }}</td> | 238 | <td>{{ feeType.paidAmount }}</td> |
| 239 | </tr> | 239 | </tr> |
| 240 | </tfoot> | 240 | </tfoot> |
| 241 | <tfoot v-else-if="feeType.amount == 0.00"> | 241 | <tfoot v-else-if="feeType.amount == 0.00"> |
| 242 | <tr> | 242 | <tr> |
| 243 | <td colspan="2">Total:</td> | 243 | <td colspan="2">Total:</td> |
| 244 | <td>{{ editData.totalAmount }}</td> | 244 | <td>{{ editData.totalAmount }}</td> |
| 245 | <td>{{ editData.totalDiscount }}</td> | 245 | <td>{{ editData.totalDiscount }}</td> |
| 246 | <td>{{ editData.totalSubTotal }}</td> | 246 | <td>{{ editData.totalSubTotal }}</td> |
| 247 | <td>{{ editData.totalPaidAmount }}</td> | 247 | <td>{{ editData.totalPaidAmount }}</td> |
| 248 | </tr> | 248 | </tr> |
| 249 | </tfoot> | 249 | </tfoot> |
| 250 | </table> | 250 | </table> |
| 251 | </v-card> | 251 | </v-card> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | </v-layout> | 253 | </v-layout> |
| 254 | </v-container> | 254 | </v-container> |
| 255 | </v-flex> | 255 | </v-flex> |
| 256 | <div class="loader" v-if="showLoader"> | 256 | <div class="loader" v-if="showLoader"> |
| 257 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 257 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 258 | </div> | 258 | </div> |
| 259 | </v-app> | 259 | </v-app> |
| 260 | </template> | 260 | </template> |
| 261 | 261 | ||
| 262 | <script> | 262 | <script> |
| 263 | import http from "@/Services/http.js"; | 263 | import http from "@/Services/http.js"; |
| 264 | import moment from "moment"; | 264 | import moment from "moment"; |
| 265 | 265 | ||
| 266 | export default { | 266 | export default { |
| 267 | props: ["editData"], | 267 | props: ["editData"], |
| 268 | data: () => ({ | 268 | data: () => ({ |
| 269 | snackbar: false, | 269 | snackbar: false, |
| 270 | showPayMethods: false, | 270 | showPayMethods: false, |
| 271 | y: "top", | 271 | y: "top", |
| 272 | x: "right", | 272 | x: "right", |
| 273 | mode: "", | 273 | mode: "", |
| 274 | timeout: 3000, | 274 | timeout: 3000, |
| 275 | text: "", | 275 | text: "", |
| 276 | showLoader: false, | 276 | showLoader: false, |
| 277 | loading: false, | 277 | loading: false, |
| 278 | date: null, | 278 | date: null, |
| 279 | search: "", | 279 | search: "", |
| 280 | // dialog: false, | 280 | // dialog: false, |
| 281 | // dialog1: false, | 281 | // dialog1: false, |
| 282 | valid: true, | 282 | valid: true, |
| 283 | validEdit: true, | 283 | validEdit: true, |
| 284 | // isActive: true, | 284 | // isActive: true, |
| 285 | // newActive: false, | 285 | // newActive: false, |
| 286 | showFeeType: false, | 286 | showFeeType: false, |
| 287 | disabled: true, | 287 | disabled: true, |
| 288 | details: [], | 288 | details: [], |
| 289 | feeTypes: [], | 289 | feeTypes: [], |
| 290 | menu1: false, | 290 | menu1: false, |
| 291 | // invoiceData: {}, | 291 | // invoiceData: {}, |
| 292 | paymentMethods: ["Cash", "Cheque"], | 292 | paymentMethods: ["Cash", "Cheque"], |
| 293 | feeType: { | 293 | feeType: { |
| 294 | amount: "0.00", | 294 | amount: "0.00", |
| 295 | discount: "0.00", | 295 | discount: "0.00", |
| 296 | paidAmount: "0.00", | 296 | paidAmount: "0.00", |
| 297 | subTotal: "0.00", | 297 | subTotal: "0.00", |
| 298 | feeTypeName: "", | 298 | feeTypeName: "", |
| 299 | }, | 299 | }, |
| 300 | feeTypeData: [], | 300 | feeTypeData: [], |
| 301 | pagination: { | 301 | pagination: { |
| 302 | rowsPerPage: 15, | 302 | rowsPerPage: 15, |
| 303 | }, | 303 | }, |
| 304 | token: "", | 304 | token: "", |
| 305 | editedItem: {}, | 305 | editedItem: {}, |
| 306 | invoiceParticularData: {}, | 306 | invoiceParticularData: {}, |
| 307 | addclass: [], | 307 | addclass: [], |
| 308 | studentList: [], | 308 | studentList: [], |
| 309 | paymentMethodRules: [], | 309 | paymentMethodRules: [], |
| 310 | paymentStatus: [ | 310 | paymentStatus: [ |
| 311 | { | 311 | { |
| 312 | name: "Not Paid", | 312 | name: "Not Paid", |
| 313 | value: "NOT_PAID", | 313 | value: "NOT_PAID", |
| 314 | }, | 314 | }, |
| 315 | { | 315 | { |
| 316 | name: "Partially Paid", | 316 | name: "Partially Paid", |
| 317 | value: "PARTIALLY_PAID", | 317 | value: "PARTIALLY_PAID", |
| 318 | }, | 318 | }, |
| 319 | { | 319 | { |
| 320 | name: "Fully Paid", | 320 | name: "Fully Paid", |
| 321 | value: "FULLY_PAID", | 321 | value: "FULLY_PAID", |
| 322 | }, | 322 | }, |
| 323 | ], | 323 | ], |
| 324 | editDataObj: {}, | 324 | editDataObj: {}, |
| 325 | }), | 325 | }), |
| 326 | // watch: { | 326 | // watch: { |
| 327 | // menu1(val) { | 327 | // menu1(val) { |
| 328 | // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 328 | // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 329 | // } | 329 | // } |
| 330 | // }, | 330 | // }, |
| 331 | methods: { | 331 | methods: { |
| 332 | save(date) { | 332 | save(date) { |
| 333 | this.$refs.menu1.save(date); | 333 | this.$refs.menu1.save(date); |
| 334 | }, | 334 | }, |
| 335 | dates: function (date) { | 335 | dates: function (date) { |
| 336 | return moment(date).format("MMMM DD, YYYY"); | 336 | return moment(date).format("MMMM DD, YYYY"); |
| 337 | }, | 337 | }, |
| 338 | update(editData) { | 338 | update(editData) { |
| 339 | // console.log("editData-----------", editData); | 339 | // console.log("editData-----------", editData); |
| 340 | if (editData.classId._id) { | 340 | if (editData.classId._id) { |
| 341 | this.editDataObj.classNum = editData.classId._id; | 341 | this.editDataObj.classNum = editData.classId._id; |
| 342 | } | 342 | } |
| 343 | if (editData.studentId._id) { | 343 | if (editData.studentId._id) { |
| 344 | this.editDataObj.studentId = editData.studentId._id; | 344 | this.editDataObj.studentId = editData.studentId._id; |
| 345 | } | 345 | } |
| 346 | let feeTypeId = ""; | 346 | let feeTypeId = ""; |
| 347 | for (let i = 0; i < this.feeTypes.length; i++) { | 347 | for (let i = 0; i < this.feeTypes.length; i++) { |
| 348 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { | 348 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { |
| 349 | feeTypeId = this.feeTypes[i]._id; | 349 | feeTypeId = this.feeTypes[i]._id; |
| 350 | } | 350 | } |
| 351 | } | 351 | } |
| 352 | if (this.$refs.form.validate()) { | 352 | if (this.$refs.form.validate()) { |
| 353 | let editInvoiceData = { | 353 | let editInvoiceData = { |
| 354 | invoiceId: editData._id, | 354 | invoiceId: editData._id, |
| 355 | classId: this.editDataObj.classNum, | 355 | classId: this.editDataObj.classNum, |
| 356 | studentId: this.editDataObj.studentId, | 356 | studentId: this.editDataObj.studentId, |
| 357 | date: editData.date, | 357 | date: editData.date, |
| 358 | paymentStatus: editData.paymentStatus, | 358 | paymentStatus: editData.paymentStatus, |
| 359 | paymentMethod: editData.paymentMethod, | 359 | paymentMethod: editData.paymentMethod, |
| 360 | feeType: editData.feeType, | 360 | feeType: editData.feeType, |
| 361 | totalAmount: this.feeType.amount, | 361 | totalAmount: this.feeType.amount, |
| 362 | totalDiscount: this.feeType.discount, | 362 | totalDiscount: this.feeType.discount, |
| 363 | totalSubTotal: this.feeType.subTotal, | 363 | totalSubTotal: this.feeType.subTotal, |
| 364 | totalPaidAmount: this.feeType.paidAmount, | 364 | totalPaidAmount: this.feeType.paidAmount, |
| 365 | }; | 365 | }; |
| 366 | // console.log(editInvoiceData, editInvoiceData); | 366 | // console.log(editInvoiceData, editInvoiceData); |
| 367 | if (feeTypeId == "") { | 367 | if (feeTypeId == "") { |
| 368 | delete editInvoiceData.feeType[0].feeTypeId; | 368 | delete editInvoiceData.feeType[0].feeTypeId; |
| 369 | } | 369 | } |
| 370 | if (editInvoiceData.paymentStatus == "NOT_PAID") { | 370 | if (editInvoiceData.paymentStatus == "NOT_PAID") { |
| 371 | delete editInvoiceData.paymentMethod; | 371 | delete editInvoiceData.paymentMethod; |
| 372 | } | 372 | } |
| 373 | if (this.feeType.paidAmount != "0.00") { | 373 | if (this.feeType.paidAmount != "0.00") { |
| 374 | if (this.feeType.subTotal == this.feeType.paidAmount) { | 374 | if (this.feeType.subTotal == this.feeType.paidAmount) { |
| 375 | editInvoiceData.paymentStatus = "FULLY_PAID"; | 375 | editInvoiceData.paymentStatus = "FULLY_PAID"; |
| 376 | // console.log("FULLY_PAID"); | 376 | // console.log("FULLY_PAID"); |
| 377 | } | 377 | } |
| 378 | if (editInvoiceData.totalPaidAmount) { | 378 | if (editInvoiceData.totalPaidAmount) { |
| 379 | if (this.feeType.subTotal != this.feeType.paidAmount) { | 379 | if (this.feeType.subTotal != this.feeType.paidAmount) { |
| 380 | editInvoiceData.paymentStatus = "PARTIALLY_PAID"; | 380 | editInvoiceData.paymentStatus = "PARTIALLY_PAID"; |
| 381 | // console.log("PARTIALLY_PAID"); | 381 | // console.log("PARTIALLY_PAID"); |
| 382 | } | 382 | } |
| 383 | } | 383 | } |
| 384 | } | 384 | } |
| 385 | if (editInvoiceData.totalSubTotal == "0.00") { | 385 | if (editInvoiceData.totalSubTotal == "0.00") { |
| 386 | editInvoiceData.paymentStatus = "FULLY_PAID"; | 386 | editInvoiceData.paymentStatus = "FULLY_PAID"; |
| 387 | } else if (editInvoiceData.totalSubTotal != "0.00") { | 387 | } else if (editInvoiceData.totalSubTotal != "0.00") { |
| 388 | if (this.feeType.paidAmount === "0.00") { | 388 | if (this.feeType.paidAmount === "0.00") { |
| 389 | editInvoiceData.paymentStatus = "NOT_PAID"; | 389 | editInvoiceData.paymentStatus = "NOT_PAID"; |
| 390 | } | 390 | } |
| 391 | } | 391 | } |
| 392 | // console.log("editInvoiceData", editInvoiceData); | 392 | // console.log("editInvoiceData", editInvoiceData); |
| 393 | 393 | ||
| 394 | http() | 394 | http() |
| 395 | .put("/updateInvoice", editInvoiceData) | 395 | .put("/updateInvoice", editInvoiceData) |
| 396 | .then((response) => { | 396 | .then((response) => { |
| 397 | // this.getInvoiceList(); | 397 | // this.getInvoiceList(); |
| 398 | this.snackbar = true; | 398 | this.snackbar = true; |
| 399 | this.text = "Edit Invoice successfully"; | 399 | this.text = "Edit Invoice successfully"; |
| 400 | this.loading = false; | 400 | this.loading = false; |
| 401 | color: "red"; | 401 | color: "red"; |
| 402 | this.$emit("update-editInvoice"); | 402 | this.$emit("update-editInvoice"); |
| 403 | }) | 403 | }) |
| 404 | .catch((error) => { | 404 | .catch((error) => { |
| 405 | // console.log(error); | 405 | // console.log(error); |
| 406 | this.snackbar = true; | 406 | this.snackbar = true; |
| 407 | this.text = error.response.data.message; | 407 | this.text = error.response.data.message; |
| 408 | color: "red"; | 408 | color: "red"; |
| 409 | this.loading = false; | 409 | this.loading = false; |
| 410 | }); | 410 | }); |
| 411 | } | 411 | } |
| 412 | }, | 412 | }, |
| 413 | clear() { | 413 | clear() { |
| 414 | this.$refs.form.reset(); | 414 | this.$refs.form.reset(); |
| 415 | }, | 415 | }, |
| 416 | selectFeeType() { | 416 | selectFeeType() { |
| 417 | this.showFeeType = true; | 417 | this.showFeeType = true; |
| 418 | this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName }); | 418 | this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName }); |
| 419 | }, | 419 | }, |
| 420 | deleteSelectFee: function (feeTyp, feeTypeList, index) { | 420 | deleteSelectFee: function (feeTyp, feeTypeList, index) { |
| 421 | this.editData.feeType.splice(index, 1); | 421 | this.editData.feeType.splice(index, 1); |
| 422 | this.getAmmountDetails(feeTyp, feeTypeList); | 422 | this.getAmmountDetails(feeTyp, feeTypeList); |
| 423 | if (this.feeTypeData.length == 0) { | 423 | if (this.feeTypeData.length == 0) { |
| 424 | this.feeType = { | 424 | this.feeType = { |
| 425 | amount: "0.00", | 425 | amount: "0.00", |
| 426 | discount: "0.00", | 426 | discount: "0.00", |
| 427 | paidAmount: "0.00", | 427 | paidAmount: "0.00", |
| 428 | subTotal: "0.00", | 428 | subTotal: "0.00", |
| 429 | feeTypeList: "", | 429 | feeTypeList: "", |
| 430 | }; | 430 | }; |
| 431 | } | 431 | } |
| 432 | }, | 432 | }, |
| 433 | getAllClasses() { | 433 | getAllClasses() { |
| 434 | http() | 434 | http() |
| 435 | .get("/getClassesList", { | 435 | .get("/getClassesList", { |
| 436 | headers: { Authorization: "Bearer " + this.token }, | 436 | headers: { Authorization: "Bearer " + this.token }, |
| 437 | }) | 437 | }) |
| 438 | .then((response) => { | 438 | .then((response) => { |
| 439 | this.addclass = response.data.data; | 439 | this.addclass = response.data.data; |
| 440 | }) | 440 | }) |
| 441 | .catch((error) => { | 441 | .catch((error) => { |
| 442 | // console.log("err====>", err); | 442 | // console.log("err====>", err); |
| 443 | this.showLoader = false; | 443 | this.showLoader = false; |
| 444 | if (error.response.status === 401) { | 444 | if (error.response.status === 401) { |
| 445 | this.$router.replace({ path: "/" }); | 445 | this.$router.replace({ path: "/" }); |
| 446 | this.$store.dispatch("setToken", null); | 446 | this.$store.dispatch("setToken", null); |
| 447 | this.$store.dispatch("Id", null); | 447 | this.$store.dispatch("Id", null); |
| 448 | this.$store.dispatch("Role", null); | 448 | this.$store.dispatch("Role", null); |
| 449 | } | 449 | } |
| 450 | }); | 450 | }); |
| 451 | }, | 451 | }, |
| 452 | getAllStudents(classId) { | 452 | getAllStudents(classId) { |
| 453 | // console.log("classId", classId); | 453 | // console.log("classId", classId); |
| 454 | this.editDataObj.classNum = classId; | 454 | this.editDataObj.classNum = classId; |
| 455 | this.editDataObj.studentId = ""; | 455 | this.editDataObj.studentId = ""; |
| 456 | this.studentList = []; | 456 | this.studentList = []; |
| 457 | this.showLoader = true; | 457 | this.showLoader = true; |
| 458 | http() | 458 | http() |
| 459 | .get("/getStudentsList", { | 459 | .get("/getStudentsList", { |
| 460 | params: { classId: classId }, | 460 | params: { classId: classId }, |
| 461 | headers: { Authorization: "Bearer " + this.token }, | 461 | headers: { Authorization: "Bearer " + this.token }, |
| 462 | }) | 462 | }) |
| 463 | .then((response) => { | 463 | .then((response) => { |
| 464 | for (let i = 0; i < response.data.data.length; i++) { | 464 | for (let i = 0; i < response.data.data.length; i++) { |
| 465 | this.studentList.push({ | 465 | this.studentList.push({ |
| 466 | name: response.data.data[i].name, | 466 | name: response.data.data[i].name, |
| 467 | _id: response.data.data[i]._id, | 467 | _id: response.data.data[i]._id, |
| 468 | }); | 468 | }); |
| 469 | } | 469 | } |
| 470 | this.showLoader = false; | 470 | this.showLoader = false; |
| 471 | }) | 471 | }) |
| 472 | .catch((err) => { | 472 | .catch((err) => { |
| 473 | // console.log("err====>", err); | 473 | // console.log("err====>", err); |
| 474 | this.showLoader = false; | 474 | this.showLoader = false; |
| 475 | }); | 475 | }); |
| 476 | }, | 476 | }, |
| 477 | getStudentId(studentId) { | 477 | getStudentId(studentId) { |
| 478 | // console.log("studentId", studentId); | 478 | // console.log("studentId", studentId); |
| 479 | this.editDataObj.studentId = studentId; | 479 | this.editDataObj.studentId = studentId; |
| 480 | }, | 480 | }, |
| 481 | getfeeType() { | 481 | getfeeType() { |
| 482 | http() | 482 | http() |
| 483 | .get("/getFeesList", { | 483 | .get("/getFeesList", { |
| 484 | headers: { Authorization: "Bearer " + this.token }, | 484 | headers: { Authorization: "Bearer " + this.token }, |
| 485 | }) | 485 | }) |
| 486 | .then((response) => { | 486 | .then((response) => { |
| 487 | this.feeTypes = response.data.data; | 487 | this.feeTypes = response.data.data; |
| 488 | }) | 488 | }) |
| 489 | .catch((err) => { | 489 | .catch((err) => { |
| 490 | // console.log("err====>", err); | 490 | // console.log("err====>", err); |
| 491 | }); | 491 | }); |
| 492 | }, | 492 | }, |
| 493 | getAmmountDetails(feeTyp, feeTypeList) { | 493 | getAmmountDetails(feeTyp, feeTypeList) { |
| 494 | this.feeTypeData = feeTypeList; | 494 | this.feeTypeData = feeTypeList; |
| 495 | let feeType = { | 495 | let feeType = { |
| 496 | amount: "", | 496 | amount: "", |
| 497 | discount: "", | 497 | discount: "", |
| 498 | subTotal: "", | 498 | subTotal: "", |
| 499 | subParticularTotal: "", | 499 | subParticularTotal: "", |
| 500 | paidAmount: "", | 500 | paidAmount: "", |
| 501 | }; | 501 | }; |
| 502 | for (let i = 0; i < this.feeTypeData.length; i++) { | 502 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 503 | // *********** AMOUNT *********** | 503 | // *********** AMOUNT *********** |
| 504 | if (this.feeTypeData[i].amount) { | 504 | if (this.feeTypeData[i].amount) { |
| 505 | feeType.amount = | 505 | feeType.amount = |
| 506 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 506 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 507 | this.feeType.amount = feeType.amount; | 507 | this.feeType.amount = feeType.amount; |
| 508 | this.feeType.subTotal = feeType.amount; | 508 | this.feeType.subTotal = feeType.amount; |
| 509 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; | 509 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; |
| 510 | } else if (this.feeTypeData[0].amount == "") { | 510 | } else if (this.feeTypeData[0].amount == "") { |
| 511 | this.feeType.amount = "0.00"; | 511 | this.feeType.amount = "0.00"; |
| 512 | this.feeTypeData[i].subTotal = "0.00"; | 512 | this.feeTypeData[i].subTotal = "0.00"; |
| 513 | this.feeType.subTotal = "0.00"; | 513 | this.feeType.subTotal = "0.00"; |
| 514 | } else if (this.feeTypeData[i].amount == "") { | 514 | } else if (this.feeTypeData[i].amount == "") { |
| 515 | this.feeType.amount = | 515 | this.feeType.amount = |
| 516 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 516 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 517 | this.feeTypeData[i].subTotal = | 517 | this.feeTypeData[i].subTotal = |
| 518 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 518 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 519 | this.feeType.subTotal = | 519 | this.feeType.subTotal = |
| 520 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 520 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 521 | } | 521 | } |
| 522 | // *********** DISCOUNT *********** | 522 | // *********** DISCOUNT *********** |
| 523 | if (this.feeTypeData[i].discount) { | 523 | if (this.feeTypeData[i].discount) { |
| 524 | if ( | 524 | if ( |
| 525 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount | 525 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount |
| 526 | ) { | 526 | ) { |
| 527 | feeType.discount = | 527 | feeType.discount = |
| 528 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 528 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 529 | this.feeType.discount = feeType.discount; | 529 | this.feeType.discount = feeType.discount; |
| 530 | feeType.subParticularTotal = | 530 | feeType.subParticularTotal = |
| 531 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 531 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 532 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( | 532 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( |
| 533 | 2 | 533 | 2 |
| 534 | ); | 534 | ); |
| 535 | } else if ( | 535 | } else if ( |
| 536 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount | 536 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount |
| 537 | ) { | 537 | ) { |
| 538 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; | 538 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; |
| 539 | feeType.discount = | 539 | feeType.discount = |
| 540 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 540 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 541 | this.feeType.discount = feeType.discount.toString(); | 541 | this.feeType.discount = feeType.discount.toString(); |
| 542 | feeType.subParticularTotal = | 542 | feeType.subParticularTotal = |
| 543 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 543 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 544 | this.feeTypeData[ | 544 | this.feeTypeData[ |
| 545 | i | 545 | i |
| 546 | ].subTotal = feeType.subParticularTotal.toString(); | 546 | ].subTotal = feeType.subParticularTotal.toString(); |
| 547 | } | 547 | } |
| 548 | } else if (this.feeTypeData[0].discount == "") { | 548 | } else if (this.feeTypeData[0].discount == "") { |
| 549 | this.feeType.discount = "0.00"; | 549 | this.feeType.discount = "0.00"; |
| 550 | } | 550 | } |
| 551 | 551 | ||
| 552 | // *********** SUBTOTAL *********** | 552 | // *********** SUBTOTAL *********** |
| 553 | if (this.feeTypeData[i].subTotal) { | 553 | if (this.feeTypeData[i].subTotal) { |
| 554 | feeType.subTotal = | 554 | feeType.subTotal = |
| 555 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | 555 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); |
| 556 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | 556 | this.feeType.subTotal = feeType.subTotal.toFixed(2); |
| 557 | } | 557 | } |
| 558 | 558 | ||
| 559 | // *********** PAID-AMOUNT *********** | 559 | // *********** PAID-AMOUNT *********** |
| 560 | if (this.feeTypeData[i].paidAmount) { | 560 | if (this.feeTypeData[i].paidAmount) { |
| 561 | feeType.paidAmount = | 561 | feeType.paidAmount = |
| 562 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 562 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 563 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | 563 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); |
| 564 | } else if (this.feeTypeData[0].paidAmount == "") { | 564 | } else if (this.feeTypeData[0].paidAmount == "") { |
| 565 | this.feeType.paidAmount = "0.00"; | 565 | this.feeType.paidAmount = "0.00"; |
| 566 | } else if (this.feeTypeData[i].paidAmount == "") { | 566 | } else if (this.feeTypeData[i].paidAmount == "") { |
| 567 | this.feeType.paidAmount = feeType.paidAmount = | 567 | this.feeType.paidAmount = feeType.paidAmount = |
| 568 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 568 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 569 | } | 569 | } |
| 570 | 570 | ||
| 571 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. | 571 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. |
| 572 | if (feeType.paidAmount > feeType.subTotal) { | 572 | if (feeType.paidAmount > feeType.subTotal) { |
| 573 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; | 573 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; |
| 574 | this.feeType.paidAmount = feeType.subTotal; | 574 | this.feeType.paidAmount = feeType.subTotal; |
| 575 | } | 575 | } |
| 576 | } | 576 | } |
| 577 | }, | 577 | }, |
| 578 | getPayMethodList() { | 578 | getPayMethodList() { |
| 579 | if (this.editData.paymentStatus == "PARTIALLY_PAID") { | 579 | if (this.editData.paymentStatus == "PARTIALLY_PAID") { |
| 580 | this.showPayMethods = true; | 580 | this.showPayMethods = true; |
| 581 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; | 581 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; |
| 582 | } else if (this.editData.paymentStatus == "FULLY_PAID") { | 582 | } else if (this.editData.paymentStatus == "FULLY_PAID") { |
| 583 | this.showPayMethods = true; | 583 | this.showPayMethods = true; |
| 584 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; | 584 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; |
| 585 | } else if (this.editData.paymentStatus == "NOT_PAID") { | 585 | } else if (this.editData.paymentStatus == "NOT_PAID") { |
| 586 | for (let i = 0; i < this.feeTypeData.length; i++) { | 586 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 587 | this.feeTypeData[i].paidAmount = "0.00"; | 587 | this.feeTypeData[i].paidAmount = "0.00"; |
| 588 | this.feeType.paidAmount = "0.00"; | 588 | this.feeType.paidAmount = "0.00"; |
| 589 | } | 589 | } |
| 590 | this.paymentMethodRules = ""; | 590 | this.paymentMethodRules = ""; |
| 591 | this.showPayMethods = false; | 591 | this.showPayMethods = false; |
| 592 | } else { | 592 | } else { |
| 593 | this.showPayMethods = false; | 593 | this.showPayMethods = false; |
| 594 | } | 594 | } |
| 595 | }, | 595 | }, |
| 596 | }, | 596 | }, |
| 597 | mounted() { | 597 | mounted() { |
| 598 | this.token = this.$store.state.token; | 598 | this.token = this.$store.state.token; |
| 599 | this.getAllClasses(); | 599 | this.getAllClasses(); |
| 600 | this.getfeeType(); | 600 | this.getfeeType(); |
| 601 | }, | 601 | }, |
| 602 | created() { | 602 | created() { |
| 603 | this.$root.$on("app:search", (search) => { | 603 | this.$root.$on("app:search", (search) => { |
| 604 | this.search = search; | 604 | this.search = search; |
| 605 | }); | 605 | }); |
| 606 | }, | 606 | }, |
| 607 | beforeDestroy() { | 607 | beforeDestroy() { |
| 608 | // dont forget to remove the listener | 608 | // dont forget to remove the listener |
| 609 | this.$root.$off("app:search"); | 609 | this.$root.$off("app:search"); |
| 610 | }, | 610 | }, |
| 611 | }; | 611 | }; |
| 612 | </script> | 612 | </script> |
| 613 | 613 | ||
| 614 | 614 | ||
| 615 | <style scoped> | 615 | <style scoped> |
| 616 | .active { | 616 | .active { |
| 617 | background-color: gray; | 617 | background-color: gray; |
| 618 | color: white !important; | 618 | color: white !important; |
| 619 | } | 619 | } |
| 620 | .activebtn { | 620 | .activebtn { |
| 621 | color: black !important; | 621 | color: black !important; |
| 622 | } | 622 | } |
| 623 | table { | 623 | table { |
| 624 | border-collapse: collapse; | 624 | border-collapse: collapse; |
| 625 | border: 1px solid #e2e7eb; | 625 | border: 1px solid #e2e7eb; |
| 626 | } | 626 | } |
| 627 | 627 | ||
| 628 | th, | 628 | th, |
| 629 | td { | 629 | td { |
| 630 | border: 1px solid #e2e7eb; | 630 | border: 1px solid #e2e7eb; |
| 631 | padding: 10px; | 631 | padding: 10px; |
| 632 | text-align: center; | 632 | text-align: center; |
| 633 | } | 633 | } |
| 634 | table.feeTypeTable { | 634 | table.feeTypeTable { |
| 635 | table-layout: auto !important; | 635 | table-layout: auto !important; |
| 636 | width: 100% !important; | 636 | width: 100% !important; |
| 637 | } | 637 | } |
| 638 | @media screen and (max-width: 380px) { | 638 | @media screen and (max-width: 380px) { |
| 639 | .tableRsponsive { | 639 | .tableRsponsive { |
| 640 | display: block; | 640 | display: block; |
| 641 | position: relative; | 641 | position: relative; |
| 642 | overflow: scroll; | 642 | overflow: scroll; |
| 643 | } | 643 | } |
| 644 | } | 644 | } |
| 645 | </style> | 645 | </style> |
src/pages/Account/expense.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT EXPENSE ****** --> | 3 | <!-- ****** EDIT EXPENSE ****** --> |
| 4 | <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable persistent> | 4 | <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Expense Profile</label> | 8 | <label class="title text-xs-center">Edit Expense Profile</label> |
| 9 | <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text style="height: 600px;"> | 12 | <v-card-text style="height: 600px;"> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl"> | 18 | <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl"> |
| 19 | <img src="/static/icon/user.png" /> | 19 | <img src="/static/icon/user.png" /> |
| 20 | </v-avatar> | 20 | </v-avatar> |
| 21 | <img | 21 | <img |
| 22 | :src="editedItem.fileUrl" | 22 | :src="editedItem.fileUrl" |
| 23 | v-else-if="editedItem.fileUrl && !imageUrl" | 23 | v-else-if="editedItem.fileUrl && !imageUrl" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="imageUrl" | 27 | v-if="imageUrl" |
| 28 | :src="imageUrl" | 28 | :src="imageUrl" |
| 29 | height="150" | 29 | height="150" |
| 30 | style="border-radius:50%; width:150px" | 30 | style="border-radius:50%; width:150px" |
| 31 | /> | 31 | /> |
| 32 | <input | 32 | <input |
| 33 | type="file" | 33 | type="file" |
| 34 | style="display:none" | 34 | style="display:none" |
| 35 | ref="image" | 35 | ref="image" |
| 36 | accept="image/*" | 36 | accept="image/*" |
| 37 | @change="onFilePicked" | 37 | @change="onFilePicked" |
| 38 | /> | 38 | /> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | <v-layout wrap> | 41 | <v-layout wrap> |
| 42 | <v-flex xs12 sm12> | 42 | <v-flex xs12 sm12> |
| 43 | <v-layout> | 43 | <v-layout> |
| 44 | <v-flex xs4 class="pt-4 subheading"> | 44 | <v-flex xs4 class="pt-4 subheading"> |
| 45 | <label class="right">Name:</label> | 45 | <label class="right">Name:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs7 class="ml-3"> | 47 | <v-flex xs7 class="ml-3"> |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | v-model="editedItem.name" | 49 | v-model="editedItem.name" |
| 50 | placeholder="fill your full Name" | 50 | placeholder="fill your full Name" |
| 51 | name="name" | 51 | name="name" |
| 52 | type="text" | 52 | type="text" |
| 53 | required | 53 | required |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | </v-flex> | 55 | </v-flex> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <v-layout wrap> | 59 | <v-layout wrap> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Date:</label> | 63 | <label class="right">Date:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-menu | 66 | <v-menu |
| 67 | ref="menu" | 67 | ref="menu" |
| 68 | :close-on-content-click="false" | 68 | :close-on-content-click="false" |
| 69 | v-model="menu3" | 69 | v-model="menu3" |
| 70 | :nudge-right="40" | 70 | :nudge-right="40" |
| 71 | lazy | 71 | lazy |
| 72 | transition="scale-transition" | 72 | transition="scale-transition" |
| 73 | offset-y | 73 | offset-y |
| 74 | full-width | 74 | full-width |
| 75 | min-width="290px" | 75 | min-width="290px" |
| 76 | > | 76 | > |
| 77 | <v-text-field | 77 | <v-text-field |
| 78 | slot="activator" | 78 | slot="activator" |
| 79 | v-model="editedItem.date" | 79 | v-model="editedItem.date" |
| 80 | placeholder="Select date" | 80 | placeholder="Select date" |
| 81 | ></v-text-field> | 81 | ></v-text-field> |
| 82 | <v-date-picker | 82 | <v-date-picker |
| 83 | ref="picker" | 83 | ref="picker" |
| 84 | v-model="editedItem.date" | 84 | v-model="editedItem.date" |
| 85 | @input="$refs.menu.save(editedItem.date)" | 85 | @input="$refs.menu.save(editedItem.date)" |
| 86 | ></v-date-picker> | 86 | ></v-date-picker> |
| 87 | </v-menu> | 87 | </v-menu> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-layout wrap> | 91 | <v-layout wrap> |
| 92 | <v-flex xs12 sm12> | 92 | <v-flex xs12 sm12> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs4 class="pt-4 subheading"> | 94 | <v-flex xs4 class="pt-4 subheading"> |
| 95 | <label class="right">Amount:</label> | 95 | <label class="right">Amount:</label> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs7 class="ml-3"> | 97 | <v-flex xs7 class="ml-3"> |
| 98 | <v-text-field v-model="editedItem.amount" required></v-text-field> | 98 | <v-text-field v-model="editedItem.amount" required></v-text-field> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | </v-layout> | 100 | </v-layout> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout wrap> | 104 | <v-layout wrap> |
| 105 | <v-flex xs4 class="pt-4 subheading"> | 105 | <v-flex xs4 class="pt-4 subheading"> |
| 106 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 106 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex xs7 class="ml-3"> | 109 | <v-flex xs7 class="ml-3"> |
| 110 | <v-text-field | 110 | <v-text-field |
| 111 | label="Select Image" | 111 | label="Select Image" |
| 112 | @click="pickFile" | 112 | @click="pickFile" |
| 113 | v-model="imageName" | 113 | v-model="imageName" |
| 114 | append-icon="attach_file" | 114 | append-icon="attach_file" |
| 115 | ></v-text-field> | 115 | ></v-text-field> |
| 116 | <input | 116 | <input |
| 117 | type="file" | 117 | type="file" |
| 118 | style="display:none" | 118 | style="display:none" |
| 119 | ref="image" | 119 | ref="image" |
| 120 | accept="image/*" | 120 | accept="image/*" |
| 121 | @change="onFilePicked" | 121 | @change="onFilePicked" |
| 122 | /> | 122 | /> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | </v-layout> | 124 | </v-layout> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | <v-flex xs12> | 126 | <v-flex xs12> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs4 class="pt-4 subheading"> | 128 | <v-flex xs4 class="pt-4 subheading"> |
| 129 | <label class="right">Note:</label> | 129 | <label class="right">Note:</label> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | <v-flex xs7 class="ml-3"> | 131 | <v-flex xs7 class="ml-3"> |
| 132 | <v-textarea | 132 | <v-textarea |
| 133 | name="input-7-1" | 133 | name="input-7-1" |
| 134 | v-model="editedItem.note" | 134 | v-model="editedItem.note" |
| 135 | placeholder="fill your Note" | 135 | placeholder="fill your Note" |
| 136 | type="text" | 136 | type="text" |
| 137 | :rules="noteRules" | 137 | :rules="noteRules" |
| 138 | multi-line | 138 | multi-line |
| 139 | required | 139 | required |
| 140 | ></v-textarea> | 140 | ></v-textarea> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | </v-layout> | 144 | </v-layout> |
| 145 | <v-layout> | 145 | <v-layout> |
| 146 | <v-flex xs12 sm12> | 146 | <v-flex xs12 sm12> |
| 147 | <v-card-actions> | 147 | <v-card-actions> |
| 148 | <v-spacer></v-spacer> | 148 | <v-spacer></v-spacer> |
| 149 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 149 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 150 | </v-card-actions> | 150 | </v-card-actions> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-card-text> | 153 | </v-card-text> |
| 154 | </v-card> | 154 | </v-card> |
| 155 | </v-dialog> | 155 | </v-dialog> |
| 156 | 156 | ||
| 157 | <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> | 157 | <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> |
| 158 | 158 | ||
| 159 | <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable persistent> | 159 | <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable persistent> |
| 160 | <v-card flat class="card-style pa-3" dark> | 160 | <v-card flat class="Card-style pa-3"> |
| 161 | <v-layout> | 161 | <v-layout> |
| 162 | <v-flex xs12> | 162 | <v-flex xs12> |
| 163 | <label class="title text-xs-center">View Expense</label> | 163 | <label class="title text-xs-center">View Expense</label> |
| 164 | <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> | 164 | <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | <v-card-text> | 167 | <v-card-text> |
| 168 | <v-container grid-list-md> | 168 | <v-container grid-list-md> |
| 169 | <v-layout wrap> | 169 | <v-layout wrap> |
| 170 | <v-flex> | 170 | <v-flex> |
| 171 | <v-flex align-center justify-center layout text-xs-center> | 171 | <v-flex align-center justify-center layout text-xs-center> |
| 172 | <v-avatar size="160px"> | 172 | <v-avatar size="160px"> |
| 173 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> | 173 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> |
| 174 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> | 174 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> |
| 175 | </v-avatar> | 175 | </v-avatar> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | <v-layout> | 177 | <v-layout> |
| 178 | <v-flex xs5 sm6> | 178 | <v-flex xs5 sm6> |
| 179 | <h5 class="right my-1"> | 179 | <h5 class="right my-1"> |
| 180 | <b>Name:</b> | 180 | <b>Name:</b> |
| 181 | </h5> | 181 | </h5> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | <v-flex sm6 xs8> | 183 | <v-flex sm6 xs8> |
| 184 | <h5 class="my-1">{{ editedItem.name }}</h5> | 184 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-flex xs5 sm6> | 188 | <v-flex xs5 sm6> |
| 189 | <h5 class="right my-1"> | 189 | <h5 class="right my-1"> |
| 190 | <b>Amount:</b> | 190 | <b>Amount:</b> |
| 191 | </h5> | 191 | </h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | <v-flex sm6 xs8> | 193 | <v-flex sm6 xs8> |
| 194 | <h5 class="my-1">{{ editedItem.amount }}</h5> | 194 | <h5 class="my-1">{{ editedItem.amount }}</h5> |
| 195 | </v-flex> | 195 | </v-flex> |
| 196 | </v-layout> | 196 | </v-layout> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-flex xs5 sm6> | 198 | <v-flex xs5 sm6> |
| 199 | <h5 class="right my-1"> | 199 | <h5 class="right my-1"> |
| 200 | <b>Date:</b> | 200 | <b>Date:</b> |
| 201 | </h5> | 201 | </h5> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | <v-flex sm6 xs8> | 203 | <v-flex sm6 xs8> |
| 204 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 204 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 205 | </v-flex> | 205 | </v-flex> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | <v-layout> | 207 | <v-layout> |
| 208 | <v-flex xs5 sm6> | 208 | <v-flex xs5 sm6> |
| 209 | <h5 class="right my-1"> | 209 | <h5 class="right my-1"> |
| 210 | <b>Note:</b> | 210 | <b>Note:</b> |
| 211 | </h5> | 211 | </h5> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | <v-flex sm6 xs8> | 213 | <v-flex sm6 xs8> |
| 214 | <h5 class="my-1">{{ editedItem.note }}</h5> | 214 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | </v-layout> | 216 | </v-layout> |
| 217 | </v-flex> | 217 | </v-flex> |
| 218 | </v-layout> | 218 | </v-layout> |
| 219 | </v-container> | 219 | </v-container> |
| 220 | </v-card-text> | 220 | </v-card-text> |
| 221 | </v-card> | 221 | </v-card> |
| 222 | </v-dialog> | 222 | </v-dialog> |
| 223 | <!-- ****** EXPENSE TABLE ****** --> | 223 | <!-- ****** EXPENSE TABLE ****** --> |
| 224 | <v-toolbar color="transparent" flat> | 224 | <v-toolbar color="transparent" flat> |
| 225 | <v-btn | 225 | <v-btn |
| 226 | fab | 226 | fab |
| 227 | dark | 227 | dark |
| 228 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 228 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 229 | small | 229 | small |
| 230 | @click="addExpenseDialog = true" | 230 | @click="addExpenseDialog = true" |
| 231 | > | 231 | > |
| 232 | <v-icon dark>add</v-icon> | 232 | <v-icon dark>add</v-icon> |
| 233 | </v-btn> | 233 | </v-btn> |
| 234 | <v-btn | 234 | <v-btn |
| 235 | round | 235 | round |
| 236 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 236 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 237 | dark | 237 | dark |
| 238 | @click="addExpenseDialog = true" | 238 | @click="addExpenseDialog = true" |
| 239 | > | 239 | > |
| 240 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense | 240 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense |
| 241 | </v-btn> | 241 | </v-btn> |
| 242 | <v-spacer></v-spacer> | 242 | <v-spacer></v-spacer> |
| 243 | <v-card-title class="body-1" v-show="show"> | 243 | <v-card-title class="body-1" v-show="show"> |
| 244 | <v-btn icon large flat @click="displaySearch"> | 244 | <v-btn icon large flat @click="displaySearch"> |
| 245 | <v-avatar size="27"> | 245 | <v-avatar size="27"> |
| 246 | <img src="/static/icon/search.png" alt="icon" /> | 246 | <img src="/static/icon/search.png" alt="icon" /> |
| 247 | </v-avatar> | 247 | </v-avatar> |
| 248 | </v-btn> | 248 | </v-btn> |
| 249 | </v-card-title> | 249 | </v-card-title> |
| 250 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 250 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-text-field | 252 | <v-text-field |
| 253 | autofocus | 253 | autofocus |
| 254 | v-model="search" | 254 | v-model="search" |
| 255 | label="Search" | 255 | label="Search" |
| 256 | prepend-inner-icon="search" | 256 | prepend-inner-icon="search" |
| 257 | color="primary" | 257 | color="primary" |
| 258 | ></v-text-field> | 258 | ></v-text-field> |
| 259 | <v-icon @click="closeSearch" color="error">close</v-icon> | 259 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 260 | </v-layout> | 260 | </v-layout> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | </v-toolbar> | 262 | </v-toolbar> |
| 263 | <v-data-table | 263 | <v-data-table |
| 264 | :headers="headers" | 264 | :headers="headers" |
| 265 | :items="expenseList" | 265 | :items="expenseList" |
| 266 | :pagination.sync="pagination" | 266 | :pagination.sync="pagination" |
| 267 | :search="search" | 267 | :search="search" |
| 268 | > | 268 | > |
| 269 | <template slot="items" slot-scope="props"> | 269 | <template slot="items" slot-scope="props"> |
| 270 | <tr class="tr"> | 270 | <tr class="tr"> |
| 271 | <td class="td td-row">{{ props.index + 1}}</td> | 271 | <td class="td td-row">{{ props.index + 1}}</td> |
| 272 | <td class="text-xs-center td td-row"> | 272 | <td class="text-xs-center td td-row"> |
| 273 | <v-avatar> | 273 | <v-avatar> |
| 274 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> | 274 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> |
| 275 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> | 275 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> |
| 276 | </v-avatar> | 276 | </v-avatar> |
| 277 | </td> | 277 | </td> |
| 278 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 278 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 279 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 279 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 280 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> | 280 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> |
| 281 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> | 281 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> |
| 282 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 282 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 283 | <td class="text-xs-center td td-row"> | 283 | <td class="text-xs-center td td-row"> |
| 284 | <span> | 284 | <span> |
| 285 | <v-tooltip top> | 285 | <v-tooltip top> |
| 286 | <img | 286 | <img |
| 287 | slot="activator" | 287 | slot="activator" |
| 288 | style="cursor:pointer; width:25px; height:25px; " | 288 | style="cursor:pointer; width:25px; height:25px; " |
| 289 | class="mr-3" | 289 | class="mr-3" |
| 290 | @click="profile(props.item)" | 290 | @click="profile(props.item)" |
| 291 | src="/static/icon/view.png" | 291 | src="/static/icon/view.png" |
| 292 | /> | 292 | /> |
| 293 | <span>View</span> | 293 | <span>View</span> |
| 294 | </v-tooltip> | 294 | </v-tooltip> |
| 295 | <v-tooltip top> | 295 | <v-tooltip top> |
| 296 | <img | 296 | <img |
| 297 | slot="activator" | 297 | slot="activator" |
| 298 | style="cursor:pointer; width:20px; height:18px; " | 298 | style="cursor:pointer; width:20px; height:18px; " |
| 299 | class="mr-3" | 299 | class="mr-3" |
| 300 | @click="editItem(props.item)" | 300 | @click="editItem(props.item)" |
| 301 | src="/static/icon/edit.png" | 301 | src="/static/icon/edit.png" |
| 302 | /> | 302 | /> |
| 303 | <span>Edit</span> | 303 | <span>Edit</span> |
| 304 | </v-tooltip> | 304 | </v-tooltip> |
| 305 | <v-tooltip top> | 305 | <v-tooltip top> |
| 306 | <img | 306 | <img |
| 307 | slot="activator" | 307 | slot="activator" |
| 308 | style="cursor:pointer; width:20px; height:20px; " | 308 | style="cursor:pointer; width:20px; height:20px; " |
| 309 | @click="deleteItem(props.item)" | 309 | @click="deleteItem(props.item)" |
| 310 | src="/static/icon/delete.png" | 310 | src="/static/icon/delete.png" |
| 311 | /> | 311 | /> |
| 312 | <span>Delete</span> | 312 | <span>Delete</span> |
| 313 | </v-tooltip> | 313 | </v-tooltip> |
| 314 | </span> | 314 | </span> |
| 315 | </td> | 315 | </td> |
| 316 | </tr> | 316 | </tr> |
| 317 | </template> | 317 | </template> |
| 318 | <v-alert | 318 | <v-alert |
| 319 | slot="no-results" | 319 | slot="no-results" |
| 320 | :value="true" | 320 | :value="true" |
| 321 | color="error" | 321 | color="error" |
| 322 | icon="warning" | 322 | icon="warning" |
| 323 | >Your search for "{{ search }}" found no results.</v-alert> | 323 | >Your search for "{{ search }}" found no results.</v-alert> |
| 324 | </v-data-table> | 324 | </v-data-table> |
| 325 | 325 | ||
| 326 | <!-- ****** Add Expense Data ****** --> | 326 | <!-- ****** Add Expense Data ****** --> |
| 327 | <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog" persistent> | 327 | <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog" persistent> |
| 328 | <v-card flat class="card-style pa-2" dark> | 328 | <v-card flat class="Card-style pa-2"> |
| 329 | <v-layout> | 329 | <v-layout> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <label class="title text-xs-center">Add Expense</label> | 331 | <label class="title text-xs-center">Add Expense</label> |
| 332 | <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> | 332 | <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | </v-layout> | 334 | </v-layout> |
| 335 | <v-flex xs12 sm12> | 335 | <v-flex xs12 sm12> |
| 336 | <v-form ref="form" v-model="valid" lazy-validation> | 336 | <v-form ref="form" v-model="valid" lazy-validation> |
| 337 | <v-container fluid> | 337 | <v-container fluid> |
| 338 | <v-layout> | 338 | <v-layout> |
| 339 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 339 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 340 | <v-avatar size="80px"> | 340 | <v-avatar size="80px"> |
| 341 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 341 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 342 | </v-avatar> | 342 | </v-avatar> |
| 343 | <img | 343 | <img |
| 344 | :src="imageUrl" | 344 | :src="imageUrl" |
| 345 | height="150" | 345 | height="150" |
| 346 | v-if="imageUrl" | 346 | v-if="imageUrl" |
| 347 | style="border-radius:50%; width:150px" | 347 | style="border-radius:50%; width:150px" |
| 348 | /> | 348 | /> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | </v-layout> | 350 | </v-layout> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs12 sm12> | 352 | <v-flex xs12 sm12> |
| 353 | <v-layout> | 353 | <v-layout> |
| 354 | <v-flex xs4 class="pt-4 subheading"> | 354 | <v-flex xs4 class="pt-4 subheading"> |
| 355 | <label class="right">Name:</label> | 355 | <label class="right">Name:</label> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | <v-flex xs8 sm6 class="ml-3"> | 357 | <v-flex xs8 sm6 class="ml-3"> |
| 358 | <v-text-field | 358 | <v-text-field |
| 359 | v-model="addExpense.name" | 359 | v-model="addExpense.name" |
| 360 | placeholder="fill your full Name" | 360 | placeholder="fill your full Name" |
| 361 | name="name" | 361 | name="name" |
| 362 | type="text" | 362 | type="text" |
| 363 | :rules="nameRules" | 363 | :rules="nameRules" |
| 364 | required | 364 | required |
| 365 | ></v-text-field> | 365 | ></v-text-field> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-layout> | 369 | </v-layout> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex xs12 sm12> | 371 | <v-flex xs12 sm12> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs4 class="pt-4 subheading"> | 373 | <v-flex xs4 class="pt-4 subheading"> |
| 374 | <label class="right">Amount:</label> | 374 | <label class="right">Amount:</label> |
| 375 | </v-flex> | 375 | </v-flex> |
| 376 | <v-flex xs8 sm6 class="ml-3"> | 376 | <v-flex xs8 sm6 class="ml-3"> |
| 377 | <v-text-field | 377 | <v-text-field |
| 378 | v-model="addExpense.amount" | 378 | v-model="addExpense.amount" |
| 379 | placeholder="fill your Amount" | 379 | placeholder="fill your Amount" |
| 380 | name="name" | 380 | name="name" |
| 381 | type="text" | 381 | type="text" |
| 382 | :rules="amountRules" | 382 | :rules="amountRules" |
| 383 | required | 383 | required |
| 384 | ></v-text-field> | 384 | ></v-text-field> |
| 385 | </v-flex> | 385 | </v-flex> |
| 386 | </v-layout> | 386 | </v-layout> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | <v-layout> | 389 | <v-layout> |
| 390 | <v-flex xs12 sm12> | 390 | <v-flex xs12 sm12> |
| 391 | <v-layout> | 391 | <v-layout> |
| 392 | <v-flex xs4 class="pt-4 subheading"> | 392 | <v-flex xs4 class="pt-4 subheading"> |
| 393 | <label class="right">Date</label> | 393 | <label class="right">Date</label> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | <v-flex xs8 sm6 class="ml-3"> | 395 | <v-flex xs8 sm6 class="ml-3"> |
| 396 | <v-menu | 396 | <v-menu |
| 397 | ref="menu1" | 397 | ref="menu1" |
| 398 | :close-on-content-click="false" | 398 | :close-on-content-click="false" |
| 399 | v-model="menu1" | 399 | v-model="menu1" |
| 400 | :nudge-right="40" | 400 | :nudge-right="40" |
| 401 | lazy | 401 | lazy |
| 402 | transition="scale-transition" | 402 | transition="scale-transition" |
| 403 | offset-y | 403 | offset-y |
| 404 | full-width | 404 | full-width |
| 405 | min-width="290px" | 405 | min-width="290px" |
| 406 | > | 406 | > |
| 407 | <v-text-field | 407 | <v-text-field |
| 408 | slot="activator" | 408 | slot="activator" |
| 409 | :rules="joinDateRules" | 409 | :rules="joinDateRules" |
| 410 | v-model="addExpense.date" | 410 | v-model="addExpense.date" |
| 411 | placeholder="Select date" | 411 | placeholder="Select date" |
| 412 | ></v-text-field> | 412 | ></v-text-field> |
| 413 | <v-date-picker | 413 | <v-date-picker |
| 414 | ref="picker" | 414 | ref="picker" |
| 415 | v-model="addExpense.date" | 415 | v-model="addExpense.date" |
| 416 | @input="$refs.menu1.save(addExpense.date)" | 416 | @input="$refs.menu1.save(addExpense.date)" |
| 417 | ></v-date-picker> | 417 | ></v-date-picker> |
| 418 | </v-menu> | 418 | </v-menu> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | </v-layout> | 420 | </v-layout> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | </v-layout> | 422 | </v-layout> |
| 423 | <v-layout> | 423 | <v-layout> |
| 424 | <v-flex xs12 sm12> | 424 | <v-flex xs12 sm12> |
| 425 | <v-layout> | 425 | <v-layout> |
| 426 | <v-flex xs4 class="pt-4 subheading"> | 426 | <v-flex xs4 class="pt-4 subheading"> |
| 427 | <label class="right">File:</label> | 427 | <label class="right">File:</label> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex xs8 sm6 class="ml-3"> | 429 | <v-flex xs8 sm6 class="ml-3"> |
| 430 | <v-text-field | 430 | <v-text-field |
| 431 | label="Select file" | 431 | label="Select file" |
| 432 | @click="pickFile" | 432 | @click="pickFile" |
| 433 | v-model="imageName" | 433 | v-model="imageName" |
| 434 | append-icon="attach_file" | 434 | append-icon="attach_file" |
| 435 | ></v-text-field> | 435 | ></v-text-field> |
| 436 | <input | 436 | <input |
| 437 | type="file" | 437 | type="file" |
| 438 | style="display:none" | 438 | style="display:none" |
| 439 | ref="image" | 439 | ref="image" |
| 440 | accept="image/*" | 440 | accept="image/*" |
| 441 | @change="onFilePicked" | 441 | @change="onFilePicked" |
| 442 | /> | 442 | /> |
| 443 | </v-flex> | 443 | </v-flex> |
| 444 | </v-layout> | 444 | </v-layout> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | </v-layout> | 446 | </v-layout> |
| 447 | <v-layout> | 447 | <v-layout> |
| 448 | <v-flex xs12 sm12> | 448 | <v-flex xs12 sm12> |
| 449 | <v-layout> | 449 | <v-layout> |
| 450 | <v-flex xs4 class="pt-4 subheading"> | 450 | <v-flex xs4 class="pt-4 subheading"> |
| 451 | <label class="right">Note:</label> | 451 | <label class="right">Note:</label> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | <v-flex xs8 sm6 class="ml-3"> | 453 | <v-flex xs8 sm6 class="ml-3"> |
| 454 | <v-textarea | 454 | <v-textarea |
| 455 | name="input-7-1" | 455 | name="input-7-1" |
| 456 | v-model="addExpense.note" | 456 | v-model="addExpense.note" |
| 457 | placeholder="fill your Note" | 457 | placeholder="fill your Note" |
| 458 | type="text" | 458 | type="text" |
| 459 | multi-line | 459 | multi-line |
| 460 | required | 460 | required |
| 461 | ></v-textarea> | 461 | ></v-textarea> |
| 462 | </v-flex> | 462 | </v-flex> |
| 463 | </v-layout> | 463 | </v-layout> |
| 464 | </v-flex> | 464 | </v-flex> |
| 465 | </v-layout> | 465 | </v-layout> |
| 466 | <v-layout> | 466 | <v-layout> |
| 467 | <v-flex xs11> | 467 | <v-flex xs11> |
| 468 | <v-layout> | 468 | <v-layout> |
| 469 | <v-spacer></v-spacer> | 469 | <v-spacer></v-spacer> |
| 470 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 470 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 471 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 471 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 472 | </v-layout> | 472 | </v-layout> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | </v-container> | 475 | </v-container> |
| 476 | </v-form> | 476 | </v-form> |
| 477 | </v-flex> | 477 | </v-flex> |
| 478 | </v-card> | 478 | </v-card> |
| 479 | </v-dialog> | 479 | </v-dialog> |
| 480 | <div class="loader" v-if="showLoader"> | 480 | <div class="loader" v-if="showLoader"> |
| 481 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 481 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 482 | </div> | 482 | </div> |
| 483 | <v-snackbar | 483 | <v-snackbar |
| 484 | :timeout="timeout" | 484 | :timeout="timeout" |
| 485 | :top="y === 'top'" | 485 | :top="y === 'top'" |
| 486 | :right="x === 'right'" | 486 | :right="x === 'right'" |
| 487 | :vertical="mode === 'vertical'" | 487 | :vertical="mode === 'vertical'" |
| 488 | v-model="snackbar" | 488 | v-model="snackbar" |
| 489 | :color="color" | 489 | :color="color" |
| 490 | >{{ text }}</v-snackbar> | 490 | >{{ text }}</v-snackbar> |
| 491 | </v-container> | 491 | </v-container> |
| 492 | </template> | 492 | </template> |
| 493 | 493 | ||
| 494 | <script> | 494 | <script> |
| 495 | import http from "@/Services/http.js"; | 495 | import http from "@/Services/http.js"; |
| 496 | import moment from "moment"; | 496 | import moment from "moment"; |
| 497 | 497 | ||
| 498 | export default { | 498 | export default { |
| 499 | data: () => ({ | 499 | data: () => ({ |
| 500 | component: "report-generate", | 500 | component: "report-generate", |
| 501 | snackbar: false, | 501 | snackbar: false, |
| 502 | y: "top", | 502 | y: "top", |
| 503 | x: "right", | 503 | x: "right", |
| 504 | mode: "", | 504 | mode: "", |
| 505 | timeout: 5000, | 505 | timeout: 5000, |
| 506 | text: "", | 506 | text: "", |
| 507 | color: "", | 507 | color: "", |
| 508 | showLoader: false, | 508 | showLoader: false, |
| 509 | loading: false, | 509 | loading: false, |
| 510 | date: null, | 510 | date: null, |
| 511 | search: "", | 511 | search: "", |
| 512 | menu: false, | 512 | menu: false, |
| 513 | menu1: false, | 513 | menu1: false, |
| 514 | menu2: false, | 514 | menu2: false, |
| 515 | menu3: false, | 515 | menu3: false, |
| 516 | editExpenseDialog: false, | 516 | editExpenseDialog: false, |
| 517 | viewExpenseDialog: false, | 517 | viewExpenseDialog: false, |
| 518 | valid: true, | 518 | valid: true, |
| 519 | show: true, | 519 | show: true, |
| 520 | addExpenseDialog: false, | 520 | addExpenseDialog: false, |
| 521 | showSearch: false, | 521 | showSearch: false, |
| 522 | pagination: { | 522 | pagination: { |
| 523 | rowsPerPage: 10, | 523 | rowsPerPage: 10, |
| 524 | }, | 524 | }, |
| 525 | imageData: {}, | 525 | imageData: {}, |
| 526 | token: "", | 526 | token: "", |
| 527 | imageName: "", | 527 | imageName: "", |
| 528 | imageUrl: "", | 528 | imageUrl: "", |
| 529 | imageFile: "", | 529 | imageFile: "", |
| 530 | nameRules: [(v) => !!v || " Full Name is required"], | 530 | nameRules: [(v) => !!v || " Full Name is required"], |
| 531 | amountRules: [(v) => !!v || "Amount is required"], | 531 | amountRules: [(v) => !!v || "Amount is required"], |
| 532 | noteRules: [(v) => !!v || "Note Name is required"], | 532 | noteRules: [(v) => !!v || "Note Name is required"], |
| 533 | joinDateRules: [(v) => !!v || "Date is required"], | 533 | joinDateRules: [(v) => !!v || "Date is required"], |
| 534 | errorMessages: "", | 534 | errorMessages: "", |
| 535 | headers: [ | 535 | headers: [ |
| 536 | { | 536 | { |
| 537 | text: "No", | 537 | text: "No", |
| 538 | align: "center", | 538 | align: "center", |
| 539 | sortable: false, | 539 | sortable: false, |
| 540 | value: "No", | 540 | value: "No", |
| 541 | }, | 541 | }, |
| 542 | { | 542 | { |
| 543 | text: "Profile Pic", | 543 | text: "Profile Pic", |
| 544 | value: "profilePicUrl", | 544 | value: "profilePicUrl", |
| 545 | sortable: false, | 545 | sortable: false, |
| 546 | align: "center", | 546 | align: "center", |
| 547 | }, | 547 | }, |
| 548 | { text: "Name", value: "name", sortable: false, align: "center" }, | 548 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 549 | { text: "Date", value: "date", sortable: false, align: "center" }, | 549 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 550 | { text: "User", value: "user", sortable: false, align: "center" }, | 550 | { text: "User", value: "user", sortable: false, align: "center" }, |
| 551 | { text: "Amount", value: "amount", sortable: false, align: "center" }, | 551 | { text: "Amount", value: "amount", sortable: false, align: "center" }, |
| 552 | { text: "Note", value: "note", sortable: false, align: "center" }, | 552 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 553 | { text: "Action", value: "", sortable: false, align: "center" }, | 553 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 554 | ], | 554 | ], |
| 555 | expenseList: [], | 555 | expenseList: [], |
| 556 | editedIndex: -1, | 556 | editedIndex: -1, |
| 557 | upload: "", | 557 | upload: "", |
| 558 | editedItem: { | 558 | editedItem: { |
| 559 | role: "TEACHER", | 559 | role: "TEACHER", |
| 560 | name: "", | 560 | name: "", |
| 561 | email: "", | 561 | email: "", |
| 562 | date: null, | 562 | date: null, |
| 563 | city: "", | 563 | city: "", |
| 564 | pincode: "", | 564 | pincode: "", |
| 565 | country: "", | 565 | country: "", |
| 566 | permanentAddress: "", | 566 | permanentAddress: "", |
| 567 | presentAddress: "", | 567 | presentAddress: "", |
| 568 | mobileNo: "", | 568 | mobileNo: "", |
| 569 | state: "", | 569 | state: "", |
| 570 | joinDate: null, | 570 | joinDate: null, |
| 571 | }, | 571 | }, |
| 572 | addExpense: {}, | 572 | addExpense: {}, |
| 573 | }), | 573 | }), |
| 574 | watch: { | 574 | watch: { |
| 575 | menu(val) { | 575 | menu(val) { |
| 576 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 576 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 577 | }, | 577 | }, |
| 578 | menu1(val) { | 578 | menu1(val) { |
| 579 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 579 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 580 | }, | 580 | }, |
| 581 | addExpenseDialog: function (val) { | 581 | addExpenseDialog: function (val) { |
| 582 | if (!val) { | 582 | if (!val) { |
| 583 | this.addExpense = []; | 583 | this.addExpense = []; |
| 584 | this.menu1 = false; | 584 | this.menu1 = false; |
| 585 | this.imageName = ""; | 585 | this.imageName = ""; |
| 586 | this.imageFile = ""; | 586 | this.imageFile = ""; |
| 587 | this.imageUrl = ""; | 587 | this.imageUrl = ""; |
| 588 | } | 588 | } |
| 589 | }, | 589 | }, |
| 590 | }, | 590 | }, |
| 591 | methods: { | 591 | methods: { |
| 592 | save(date) { | 592 | save(date) { |
| 593 | this.$refs.menu.save(date); | 593 | this.$refs.menu.save(date); |
| 594 | }, | 594 | }, |
| 595 | save(date) { | 595 | save(date) { |
| 596 | this.$refs.menu1.save(date); | 596 | this.$refs.menu1.save(date); |
| 597 | }, | 597 | }, |
| 598 | pickFile() { | 598 | pickFile() { |
| 599 | this.$refs.image.click(); | 599 | this.$refs.image.click(); |
| 600 | }, | 600 | }, |
| 601 | dates: function (date) { | 601 | dates: function (date) { |
| 602 | return moment(date).format("MMMM DD, YYYY"); | 602 | return moment(date).format("MMMM DD, YYYY"); |
| 603 | }, | 603 | }, |
| 604 | onFilePicked(e) { | 604 | onFilePicked(e) { |
| 605 | // console.log(e) | 605 | // console.log(e) |
| 606 | const files = e.target.files; | 606 | const files = e.target.files; |
| 607 | this.upload = e.target.files[0]; | 607 | this.upload = e.target.files[0]; |
| 608 | // console.log("imageData-upload========>", this.upload); | 608 | // console.log("imageData-upload========>", this.upload); |
| 609 | if (files[0] !== undefined) { | 609 | if (files[0] !== undefined) { |
| 610 | this.imageName = files[0].name; | 610 | this.imageName = files[0].name; |
| 611 | if (this.imageName.lastIndexOf(".") <= 0) { | 611 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 612 | return; | 612 | return; |
| 613 | } | 613 | } |
| 614 | const fr = new FileReader(); | 614 | const fr = new FileReader(); |
| 615 | fr.readAsDataURL(files[0]); | 615 | fr.readAsDataURL(files[0]); |
| 616 | fr.addEventListener("load", () => { | 616 | fr.addEventListener("load", () => { |
| 617 | this.imageUrl = fr.result; | 617 | this.imageUrl = fr.result; |
| 618 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 618 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 619 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 619 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 620 | // console.log("upload=======>", this.imageData.imageUrl); | 620 | // console.log("upload=======>", this.imageData.imageUrl); |
| 621 | // console.log("imageFile", this.imageUrl); | 621 | // console.log("imageFile", this.imageUrl); |
| 622 | }); | 622 | }); |
| 623 | } else { | 623 | } else { |
| 624 | this.imageName = ""; | 624 | this.imageName = ""; |
| 625 | this.imageFile = ""; | 625 | this.imageFile = ""; |
| 626 | this.imageUrl = ""; | 626 | this.imageUrl = ""; |
| 627 | } | 627 | } |
| 628 | }, | 628 | }, |
| 629 | getExpenseList() { | 629 | getExpenseList() { |
| 630 | http() | 630 | http() |
| 631 | .get("/getExpensesList", { | 631 | .get("/getExpensesList", { |
| 632 | params: { schoolId: this.$store.state.schoolId }, | 632 | params: { schoolId: this.$store.state.schoolId }, |
| 633 | headers: { Authorization: "Bearer " + this.token }, | 633 | headers: { Authorization: "Bearer " + this.token }, |
| 634 | }) | 634 | }) |
| 635 | .then((response) => { | 635 | .then((response) => { |
| 636 | this.expenseList = response.data.data; | 636 | this.expenseList = response.data.data; |
| 637 | this.showLoader = false; | 637 | this.showLoader = false; |
| 638 | // console.log("getTeacherList=====>",this.expenseList) | 638 | // console.log("getTeacherList=====>",this.expenseList) |
| 639 | }) | 639 | }) |
| 640 | .catch((error) => { | 640 | .catch((error) => { |
| 641 | this.showLoader = false; | 641 | this.showLoader = false; |
| 642 | // if (error.response.status === 401) { | 642 | // if (error.response.status === 401) { |
| 643 | // this.$router.replace({ path: "/" }); | 643 | // this.$router.replace({ path: "/" }); |
| 644 | // this.$store.dispatch("setToken", null); | 644 | // this.$store.dispatch("setToken", null); |
| 645 | // this.$store.dispatch("Id", null); | 645 | // this.$store.dispatch("Id", null); |
| 646 | // } | 646 | // } |
| 647 | }); | 647 | }); |
| 648 | }, | 648 | }, |
| 649 | editItem(item) { | 649 | editItem(item) { |
| 650 | this.editedIndex = this.expenseList.indexOf(item); | 650 | this.editedIndex = this.expenseList.indexOf(item); |
| 651 | this.editedItem = Object.assign({}, item); | 651 | this.editedItem = Object.assign({}, item); |
| 652 | this.editedItem.date = | 652 | this.editedItem.date = |
| 653 | this.editedItem.date != undefined | 653 | this.editedItem.date != undefined |
| 654 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 654 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 655 | : (this.editedItem.date = ""); | 655 | : (this.editedItem.date = ""); |
| 656 | 656 | ||
| 657 | this.editExpenseDialog = true; | 657 | this.editExpenseDialog = true; |
| 658 | }, | 658 | }, |
| 659 | profile(item) { | 659 | profile(item) { |
| 660 | this.editedIndex = this.expenseList.indexOf(item); | 660 | this.editedIndex = this.expenseList.indexOf(item); |
| 661 | this.editedItem = Object.assign({}, item); | 661 | this.editedItem = Object.assign({}, item); |
| 662 | this.viewExpenseDialog = true; | 662 | this.viewExpenseDialog = true; |
| 663 | }, | 663 | }, |
| 664 | deleteItem(item) { | 664 | deleteItem(item) { |
| 665 | let deleteExpense = { | 665 | let deleteExpense = { |
| 666 | expenseId: item._id, | 666 | expenseId: item._id, |
| 667 | }; | 667 | }; |
| 668 | // console.log("deleteUers",deleteTeachers) | 668 | // console.log("deleteUers",deleteTeachers) |
| 669 | http() | 669 | http() |
| 670 | .delete( | 670 | .delete( |
| 671 | "/deleteExpense", | 671 | "/deleteExpense", |
| 672 | confirm("Are you sure you want to delete this?") && { | 672 | confirm("Are you sure you want to delete this?") && { |
| 673 | params: deleteExpense, | 673 | params: deleteExpense, |
| 674 | } | 674 | } |
| 675 | ) | 675 | ) |
| 676 | .then((response) => { | 676 | .then((response) => { |
| 677 | // console.log("deleteUers",deleteTeachers) | 677 | // console.log("deleteUers",deleteTeachers) |
| 678 | this.snackbar = true; | 678 | this.snackbar = true; |
| 679 | this.text = response.data.message; | 679 | this.text = response.data.message; |
| 680 | this.color = "green"; | 680 | this.color = "green"; |
| 681 | this.getExpenseList(); | 681 | this.getExpenseList(); |
| 682 | }) | 682 | }) |
| 683 | .catch((error) => { | 683 | .catch((error) => { |
| 684 | this.snackbar = true; | 684 | this.snackbar = true; |
| 685 | this.text = error.response.data.message; | 685 | this.text = error.response.data.message; |
| 686 | this.color = "error"; | 686 | this.color = "error"; |
| 687 | }); | 687 | }); |
| 688 | }, | 688 | }, |
| 689 | close() { | 689 | close() { |
| 690 | this.editExpenseDialog = false; | 690 | this.editExpenseDialog = false; |
| 691 | }, | 691 | }, |
| 692 | closeAddExpenseModel() { | 692 | closeAddExpenseModel() { |
| 693 | this.addExpenseDialog = false; | 693 | this.addExpenseDialog = false; |
| 694 | this.addExpense = []; | 694 | this.addExpense = []; |
| 695 | this.menu1 = false; | 695 | this.menu1 = false; |
| 696 | this.imageName = ""; | 696 | this.imageName = ""; |
| 697 | this.imageFile = ""; | 697 | this.imageFile = ""; |
| 698 | this.imageUrl = ""; | 698 | this.imageUrl = ""; |
| 699 | }, | 699 | }, |
| 700 | submit() { | 700 | submit() { |
| 701 | if (this.$refs.form.validate()) { | 701 | if (this.$refs.form.validate()) { |
| 702 | if (this.imageUrl) { | 702 | if (this.imageUrl) { |
| 703 | var str = this.imageUrl; | 703 | var str = this.imageUrl; |
| 704 | const [baseUrl, imageUrl] = str.split(/,/); | 704 | const [baseUrl, imageUrl] = str.split(/,/); |
| 705 | this.addExpense.upload = imageUrl; | 705 | this.addExpense.upload = imageUrl; |
| 706 | } | 706 | } |
| 707 | this.loading = true; | 707 | this.loading = true; |
| 708 | // this.addExpense = this.$store.state.schoolId; | 708 | // this.addExpense = this.$store.state.schoolId; |
| 709 | http() | 709 | http() |
| 710 | .post("/createExpense", this.addExpense) | 710 | .post("/createExpense", this.addExpense) |
| 711 | .then((response) => { | 711 | .then((response) => { |
| 712 | this.getExpenseList(); | 712 | this.getExpenseList(); |
| 713 | this.snackbar = true; | 713 | this.snackbar = true; |
| 714 | this.text = response.data.message; | 714 | this.text = response.data.message; |
| 715 | this.color = "green"; | 715 | this.color = "green"; |
| 716 | this.clear(); | 716 | this.clear(); |
| 717 | this.imageUrl = ""; | 717 | this.imageUrl = ""; |
| 718 | this.loading = false; | 718 | this.loading = false; |
| 719 | this.addExpenseDialog = false; | 719 | this.addExpenseDialog = false; |
| 720 | }) | 720 | }) |
| 721 | .catch((error) => { | 721 | .catch((error) => { |
| 722 | // console.log(error); | 722 | // console.log(error); |
| 723 | this.snackbar = true; | 723 | this.snackbar = true; |
| 724 | this.color = "error"; | 724 | this.color = "error"; |
| 725 | this.text = error.response.data.message; | 725 | this.text = error.response.data.message; |
| 726 | this.loading = false; | 726 | this.loading = false; |
| 727 | }); | 727 | }); |
| 728 | } | 728 | } |
| 729 | }, | 729 | }, |
| 730 | clear() { | 730 | clear() { |
| 731 | this.$refs.form.reset(); | 731 | this.$refs.form.reset(); |
| 732 | }, | 732 | }, |
| 733 | save() { | 733 | save() { |
| 734 | this.loading = true; | 734 | this.loading = true; |
| 735 | this.editedItem.expenseId = this.editedItem._id; | 735 | this.editedItem.expenseId = this.editedItem._id; |
| 736 | if (this.imageUrl) { | 736 | if (this.imageUrl) { |
| 737 | var str = this.imageUrl; | 737 | var str = this.imageUrl; |
| 738 | const [baseUrl, imageUrl] = str.split(/,/); | 738 | const [baseUrl, imageUrl] = str.split(/,/); |
| 739 | this.editedItem.upload = imageUrl; | 739 | this.editedItem.upload = imageUrl; |
| 740 | } | 740 | } |
| 741 | http() | 741 | http() |
| 742 | .put("/updateExpense", this.editedItem) | 742 | .put("/updateExpense", this.editedItem) |
| 743 | .then((response) => { | 743 | .then((response) => { |
| 744 | this.snackbar = true; | 744 | this.snackbar = true; |
| 745 | this.text = response.data.message; | 745 | this.text = response.data.message; |
| 746 | this.color = "green"; | 746 | this.color = "green"; |
| 747 | this.loading = false; | 747 | this.loading = false; |
| 748 | this.getExpenseList(); | 748 | this.getExpenseList(); |
| 749 | this.close(); | 749 | this.close(); |
| 750 | }) | 750 | }) |
| 751 | .catch((error) => { | 751 | .catch((error) => { |
| 752 | this.snackbar = true; | 752 | this.snackbar = true; |
| 753 | this.text = error.response.data.message; | 753 | this.text = error.response.data.message; |
| 754 | this.color = "error"; | 754 | this.color = "error"; |
| 755 | }); | 755 | }); |
| 756 | }, | 756 | }, |
| 757 | displaySearch() { | 757 | displaySearch() { |
| 758 | (this.show = false), (this.showSearch = true); | 758 | (this.show = false), (this.showSearch = true); |
| 759 | }, | 759 | }, |
| 760 | closeSearch() { | 760 | closeSearch() { |
| 761 | this.showSearch = false; | 761 | this.showSearch = false; |
| 762 | this.show = true; | 762 | this.show = true; |
| 763 | this.search = ""; | 763 | this.search = ""; |
| 764 | }, | 764 | }, |
| 765 | }, | 765 | }, |
| 766 | mounted() { | 766 | mounted() { |
| 767 | this.token = this.$store.state.token; | 767 | this.token = this.$store.state.token; |
| 768 | this.getExpenseList(); | 768 | this.getExpenseList(); |
| 769 | }, | 769 | }, |
| 770 | }; | 770 | }; |
| 771 | </script> | 771 | </script> |
src/pages/Account/feeTypes.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT SECTION ****** --> | 3 | <!-- ****** EDIT SECTION ****** --> |
| 4 | <v-dialog v-model="editFeeTypeDialog" max-width="600px" persistent> | 4 | <v-dialog v-model="editFeeTypeDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Fee Type</label> | 8 | <label class="title text-xs-center">Edit Fee Type</label> |
| 9 | <v-icon size="24" class="right" @click="editFeeTypeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editFeeTypeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-layout wrap justify-center> | 13 | <v-layout wrap justify-center> |
| 14 | <v-flex xs12 sm11> | 14 | <v-flex xs12 sm11> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Fee Type:</label> | 17 | <label class="right">Fee Type:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8> | 19 | <v-flex xs8> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | class="ml-3" | 21 | class="ml-3" |
| 22 | v-model="editedItem.feeType" | 22 | v-model="editedItem.feeType" |
| 23 | placeholder="fill your Fee Type" | 23 | placeholder="fill your Fee Type" |
| 24 | required | 24 | required |
| 25 | ></v-text-field> | 25 | ></v-text-field> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | </v-layout> | 27 | </v-layout> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs4 class="pt-4 subheading"> | 29 | <v-flex xs4 class="pt-4 subheading"> |
| 30 | <label class="right">Note:</label> | 30 | <label class="right">Note:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8> | 32 | <v-flex xs8> |
| 33 | <v-textarea | 33 | <v-textarea |
| 34 | name="input-7-1" | 34 | name="input-7-1" |
| 35 | class="ml-3" | 35 | class="ml-3" |
| 36 | v-model="editedItem.note" | 36 | v-model="editedItem.note" |
| 37 | placeholder="fill your Note" | 37 | placeholder="fill your Note" |
| 38 | multi-line | 38 | multi-line |
| 39 | required | 39 | required |
| 40 | ></v-textarea> | 40 | ></v-textarea> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | </v-layout> | 42 | </v-layout> |
| 43 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 43 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 44 | <v-spacer></v-spacer> | 44 | <v-spacer></v-spacer> |
| 45 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 45 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 46 | </v-card-actions> | 46 | </v-card-actions> |
| 47 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 47 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 48 | <v-spacer></v-spacer> | 48 | <v-spacer></v-spacer> |
| 49 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 49 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 50 | <v-spacer></v-spacer> | 50 | <v-spacer></v-spacer> |
| 51 | </v-card-actions> | 51 | </v-card-actions> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-container> | 54 | </v-container> |
| 55 | </v-card> | 55 | </v-card> |
| 56 | </v-dialog> | 56 | </v-dialog> |
| 57 | 57 | ||
| 58 | <!-- ****** PROFILE VIEW FEE TYPE DATA ****** --> | 58 | <!-- ****** PROFILE VIEW FEE TYPE DATA ****** --> |
| 59 | 59 | ||
| 60 | <v-dialog v-model="viewFeeTypeDialog" max-width="400px" persistent> | 60 | <v-dialog v-model="viewFeeTypeDialog" max-width="400px" persistent> |
| 61 | <v-card flat class="card-style pa-3" dark> | 61 | <v-card flat class="Card-style pa-3"> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs12> | 63 | <v-flex xs12> |
| 64 | <label class="title text-xs-center">View Fee Type</label> | 64 | <label class="title text-xs-center">View Fee Type</label> |
| 65 | <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon> | 65 | <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | </v-layout> | 67 | </v-layout> |
| 68 | <v-container grid-list-md> | 68 | <v-container grid-list-md> |
| 69 | <v-layout wrap> | 69 | <v-layout wrap> |
| 70 | <v-flex> | 70 | <v-flex> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs5 sm6> | 72 | <v-flex xs5 sm6> |
| 73 | <h5 class="right my-1"> | 73 | <h5 class="right my-1"> |
| 74 | <b>Fee Type:</b> | 74 | <b>Fee Type:</b> |
| 75 | </h5> | 75 | </h5> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex sm6 xs8> | 77 | <v-flex sm6 xs8> |
| 78 | <h5 class="my-1">{{ editedItem.feeType }}</h5> | 78 | <h5 class="my-1">{{ editedItem.feeType }}</h5> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | <v-layout> | 81 | <v-layout> |
| 82 | <v-flex xs5 sm6> | 82 | <v-flex xs5 sm6> |
| 83 | <h5 class="right my-1"> | 83 | <h5 class="right my-1"> |
| 84 | <b>Note:</b> | 84 | <b>Note:</b> |
| 85 | </h5> | 85 | </h5> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | <v-flex sm6 xs8> | 87 | <v-flex sm6 xs8> |
| 88 | <h5 class="my-1">{{ editedItem.note }}</h5> | 88 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | </v-layout> | 92 | </v-layout> |
| 93 | </v-container> | 93 | </v-container> |
| 94 | </v-card> | 94 | </v-card> |
| 95 | </v-dialog> | 95 | </v-dialog> |
| 96 | 96 | ||
| 97 | <!-- ****** EXISTING-FEETYPE TABLE ****** --> | 97 | <!-- ****** EXISTING-FEETYPE TABLE ****** --> |
| 98 | <v-toolbar color="transparent" flat> | 98 | <v-toolbar color="transparent" flat> |
| 99 | <v-btn | 99 | <v-btn |
| 100 | fab | 100 | fab |
| 101 | dark | 101 | dark |
| 102 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 102 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 103 | small | 103 | small |
| 104 | @click="addFeeTypeDialog = true" | 104 | @click="addFeeTypeDialog = true" |
| 105 | > | 105 | > |
| 106 | <v-icon dark>add</v-icon> | 106 | <v-icon dark>add</v-icon> |
| 107 | </v-btn> | 107 | </v-btn> |
| 108 | <v-btn | 108 | <v-btn |
| 109 | round | 109 | round |
| 110 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 110 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 111 | dark | 111 | dark |
| 112 | @click="addFeeTypeDialog = true" | 112 | @click="addFeeTypeDialog = true" |
| 113 | > | 113 | > |
| 114 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type | 114 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type |
| 115 | </v-btn> | 115 | </v-btn> |
| 116 | <v-spacer></v-spacer> | 116 | <v-spacer></v-spacer> |
| 117 | <v-card-title class="body-1" v-show="show"> | 117 | <v-card-title class="body-1" v-show="show"> |
| 118 | <v-btn icon large flat @click="displaySearch"> | 118 | <v-btn icon large flat @click="displaySearch"> |
| 119 | <v-avatar size="27"> | 119 | <v-avatar size="27"> |
| 120 | <img src="/static/icon/search.png" alt="icon" /> | 120 | <img src="/static/icon/search.png" alt="icon" /> |
| 121 | </v-avatar> | 121 | </v-avatar> |
| 122 | </v-btn> | 122 | </v-btn> |
| 123 | </v-card-title> | 123 | </v-card-title> |
| 124 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 124 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-text-field | 126 | <v-text-field |
| 127 | autofocus | 127 | autofocus |
| 128 | v-model="search" | 128 | v-model="search" |
| 129 | label="Search" | 129 | label="Search" |
| 130 | prepend-inner-icon="search" | 130 | prepend-inner-icon="search" |
| 131 | color="primary" | 131 | color="primary" |
| 132 | ></v-text-field> | 132 | ></v-text-field> |
| 133 | <v-icon @click="closeSearch" color="error">close</v-icon> | 133 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-toolbar> | 136 | </v-toolbar> |
| 137 | <v-data-table | 137 | <v-data-table |
| 138 | :headers="headers" | 138 | :headers="headers" |
| 139 | :items="feeTypeList" | 139 | :items="feeTypeList" |
| 140 | :pagination.sync="pagination" | 140 | :pagination.sync="pagination" |
| 141 | :search="search" | 141 | :search="search" |
| 142 | > | 142 | > |
| 143 | <template slot="items" slot-scope="props"> | 143 | <template slot="items" slot-scope="props"> |
| 144 | <tr class="tr"> | 144 | <tr class="tr"> |
| 145 | <td class="td td-row">{{ props.index + 1}}</td> | 145 | <td class="td td-row">{{ props.index + 1}}</td> |
| 146 | <td class="text-xs-center td td-row">{{ props.item.feeType }}</td> | 146 | <td class="text-xs-center td td-row">{{ props.item.feeType }}</td> |
| 147 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 147 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 148 | <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> | 148 | <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> |
| 149 | 149 | ||
| 150 | <td class="text-xs-center td td-row"> | 150 | <td class="text-xs-center td td-row"> |
| 151 | <!-- <span> --> | 151 | <!-- <span> --> |
| 152 | <v-tooltip top> | 152 | <v-tooltip top> |
| 153 | <img | 153 | <img |
| 154 | slot="activator" | 154 | slot="activator" |
| 155 | style="cursor:pointer; width:25px; height:25px; " | 155 | style="cursor:pointer; width:25px; height:25px; " |
| 156 | class="mr-3" | 156 | class="mr-3" |
| 157 | @click="profile(props.item)" | 157 | @click="profile(props.item)" |
| 158 | src="/static/icon/view.png" | 158 | src="/static/icon/view.png" |
| 159 | /> | 159 | /> |
| 160 | <span>View</span> | 160 | <span>View</span> |
| 161 | </v-tooltip> | 161 | </v-tooltip> |
| 162 | <v-tooltip top> | 162 | <v-tooltip top> |
| 163 | <img | 163 | <img |
| 164 | slot="activator" | 164 | slot="activator" |
| 165 | style="cursor:pointer; width:20px; height:18px; " | 165 | style="cursor:pointer; width:20px; height:18px; " |
| 166 | class="mr-3" | 166 | class="mr-3" |
| 167 | @click="editItem(props.item)" | 167 | @click="editItem(props.item)" |
| 168 | src="/static/icon/edit.png" | 168 | src="/static/icon/edit.png" |
| 169 | /> | 169 | /> |
| 170 | <span>Edit</span> | 170 | <span>Edit</span> |
| 171 | </v-tooltip> | 171 | </v-tooltip> |
| 172 | <v-tooltip top> | 172 | <v-tooltip top> |
| 173 | <img | 173 | <img |
| 174 | slot="activator" | 174 | slot="activator" |
| 175 | style="cursor:pointer; width:20px; height:20px; " | 175 | style="cursor:pointer; width:20px; height:20px; " |
| 176 | @click="deleteItem(props.item)" | 176 | @click="deleteItem(props.item)" |
| 177 | class="mr-3" | 177 | class="mr-3" |
| 178 | src="/static/icon/delete.png" | 178 | src="/static/icon/delete.png" |
| 179 | /> | 179 | /> |
| 180 | <span>Delete</span> | 180 | <span>Delete</span> |
| 181 | </v-tooltip> | 181 | </v-tooltip> |
| 182 | <!-- </span> --> | 182 | <!-- </span> --> |
| 183 | </td> | 183 | </td> |
| 184 | </tr> | 184 | </tr> |
| 185 | </template> | 185 | </template> |
| 186 | <v-alert | 186 | <v-alert |
| 187 | slot="no-results" | 187 | slot="no-results" |
| 188 | :value="true" | 188 | :value="true" |
| 189 | color="error" | 189 | color="error" |
| 190 | icon="warning" | 190 | icon="warning" |
| 191 | >Your search for "{{ search }}" found no results.</v-alert> | 191 | >Your search for "{{ search }}" found no results.</v-alert> |
| 192 | </v-data-table> | 192 | </v-data-table> |
| 193 | 193 | ||
| 194 | <!-- ****** ADD Fee Type ****** --> | 194 | <!-- ****** ADD Fee Type ****** --> |
| 195 | <v-dialog v-model="addFeeTypeDialog" max-width="500px" v-if="addFeeTypeDialog" persistent> | 195 | <v-dialog v-model="addFeeTypeDialog" max-width="500px" v-if="addFeeTypeDialog" persistent> |
| 196 | <v-card flat class="card-style pa-2" dark> | 196 | <v-card flat class="Card-style pa-2"> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-flex xs12> | 198 | <v-flex xs12> |
| 199 | <label class="title text-xs-center">Add Fee Type</label> | 199 | <label class="title text-xs-center">Add Fee Type</label> |
| 200 | <v-icon size="24" class="right" @click="closeAddFeeTypeModel">cancel</v-icon> | 200 | <v-icon size="24" class="right" @click="closeAddFeeTypeModel">cancel</v-icon> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | <v-container fluid fill-height> | 203 | <v-container fluid fill-height> |
| 204 | <v-layout align-center> | 204 | <v-layout align-center> |
| 205 | <v-flex xs12 class="mt-4"> | 205 | <v-flex xs12 class="mt-4"> |
| 206 | <v-form ref="form" v-model="valid" lazy-validation> | 206 | <v-form ref="form" v-model="valid" lazy-validation> |
| 207 | <v-layout> | 207 | <v-layout> |
| 208 | <v-flex xs4 class="pt-4 subheading"> | 208 | <v-flex xs4 class="pt-4 subheading"> |
| 209 | <label class="right">Fee Type:</label> | 209 | <label class="right">Fee Type:</label> |
| 210 | </v-flex> | 210 | </v-flex> |
| 211 | <v-flex xs7 class="ml-3"> | 211 | <v-flex xs7 class="ml-3"> |
| 212 | <v-text-field | 212 | <v-text-field |
| 213 | v-model="feeTypeData.feeType" | 213 | v-model="feeTypeData.feeType" |
| 214 | placeholder="fill your Fee Type" | 214 | placeholder="fill your Fee Type" |
| 215 | type="text" | 215 | type="text" |
| 216 | :rules="feetTypeRules" | 216 | :rules="feetTypeRules" |
| 217 | required | 217 | required |
| 218 | ></v-text-field> | 218 | ></v-text-field> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-layout> | 221 | <v-layout> |
| 222 | <v-flex xs4 class="pt-4 subheading"> | 222 | <v-flex xs4 class="pt-4 subheading"> |
| 223 | <label class="right">Note:</label> | 223 | <label class="right">Note:</label> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | <v-flex xs7 class="ml-3"> | 225 | <v-flex xs7 class="ml-3"> |
| 226 | <v-textarea | 226 | <v-textarea |
| 227 | name="input-7-1" | 227 | name="input-7-1" |
| 228 | v-model="feeTypeData.note" | 228 | v-model="feeTypeData.note" |
| 229 | placeholder="fill your Note" | 229 | placeholder="fill your Note" |
| 230 | type="text" | 230 | type="text" |
| 231 | multi-line | 231 | multi-line |
| 232 | required | 232 | required |
| 233 | ></v-textarea> | 233 | ></v-textarea> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | <!-- <v-layout> | 236 | <!-- <v-layout> |
| 237 | <v-flex xs4 class="pt-4 subheading"> | 237 | <v-flex xs4 class="pt-4 subheading"> |
| 238 | <label class="right">Monthly:</label> | 238 | <label class="right">Monthly:</label> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex xs6 class="ml-3"> | 240 | <v-flex xs6 class="ml-3"> |
| 241 | <v-checkbox | 241 | <v-checkbox |
| 242 | v-model="feeTypeData.monthly" | 242 | v-model="feeTypeData.monthly" |
| 243 | :rules="monthlyRules" | 243 | :rules="monthlyRules" |
| 244 | multi-line | 244 | multi-line |
| 245 | required | 245 | required |
| 246 | ></v-checkbox> | 246 | ></v-checkbox> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | </v-layout>--> | 248 | </v-layout>--> |
| 249 | <v-layout> | 249 | <v-layout> |
| 250 | <v-flex xs12> | 250 | <v-flex xs12> |
| 251 | <v-card-actions> | 251 | <v-card-actions> |
| 252 | <v-spacer></v-spacer> | 252 | <v-spacer></v-spacer> |
| 253 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 253 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 254 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 254 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 255 | </v-card-actions> | 255 | </v-card-actions> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-form> | 258 | </v-form> |
| 259 | </v-flex> | 259 | </v-flex> |
| 260 | </v-layout> | 260 | </v-layout> |
| 261 | </v-container> | 261 | </v-container> |
| 262 | </v-card> | 262 | </v-card> |
| 263 | </v-dialog> | 263 | </v-dialog> |
| 264 | <div class="loader" v-if="showLoader"> | 264 | <div class="loader" v-if="showLoader"> |
| 265 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 265 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 266 | </div> | 266 | </div> |
| 267 | <v-snackbar | 267 | <v-snackbar |
| 268 | :timeout="timeout" | 268 | :timeout="timeout" |
| 269 | :top="y === 'top'" | 269 | :top="y === 'top'" |
| 270 | :right="x === 'right'" | 270 | :right="x === 'right'" |
| 271 | :vertical="mode === 'vertical'" | 271 | :vertical="mode === 'vertical'" |
| 272 | v-model="snackbar" | 272 | v-model="snackbar" |
| 273 | :color="color" | 273 | :color="color" |
| 274 | >{{ text }}</v-snackbar> | 274 | >{{ text }}</v-snackbar> |
| 275 | </v-container> | 275 | </v-container> |
| 276 | </template> | 276 | </template> |
| 277 | 277 | ||
| 278 | <script> | 278 | <script> |
| 279 | import http from "@/Services/http.js"; | 279 | import http from "@/Services/http.js"; |
| 280 | 280 | ||
| 281 | export default { | 281 | export default { |
| 282 | data: () => ({ | 282 | data: () => ({ |
| 283 | snackbar: false, | 283 | snackbar: false, |
| 284 | y: "top", | 284 | y: "top", |
| 285 | x: "right", | 285 | x: "right", |
| 286 | mode: "", | 286 | mode: "", |
| 287 | timeout: 5000, | 287 | timeout: 5000, |
| 288 | text: "", | 288 | text: "", |
| 289 | color: "", | 289 | color: "", |
| 290 | showLoader: false, | 290 | showLoader: false, |
| 291 | loading: false, | 291 | loading: false, |
| 292 | date: null, | 292 | date: null, |
| 293 | search: "", | 293 | search: "", |
| 294 | editFeeTypeDialog: false, | 294 | editFeeTypeDialog: false, |
| 295 | viewFeeTypeDialog: false, | 295 | viewFeeTypeDialog: false, |
| 296 | valid: true, | 296 | valid: true, |
| 297 | show: true, | 297 | show: true, |
| 298 | showSearch: false, | 298 | showSearch: false, |
| 299 | addFeeTypeDialog: false, | 299 | addFeeTypeDialog: false, |
| 300 | validEdit: true, | 300 | validEdit: true, |
| 301 | pagination: { | 301 | pagination: { |
| 302 | rowsPerPage: 10, | 302 | rowsPerPage: 10, |
| 303 | }, | 303 | }, |
| 304 | feetTypeRules: [(v) => !!v || " Fee Type Name is required"], | 304 | feetTypeRules: [(v) => !!v || " Fee Type Name is required"], |
| 305 | monthlyRules: [(v) => !!v || " Select Monthly"], | 305 | monthlyRules: [(v) => !!v || " Select Monthly"], |
| 306 | noteRules: [(v) => !!v || " Note is required"], | 306 | noteRules: [(v) => !!v || " Note is required"], |
| 307 | headers: [ | 307 | headers: [ |
| 308 | { | 308 | { |
| 309 | text: "No", | 309 | text: "No", |
| 310 | align: "", | 310 | align: "", |
| 311 | sortable: false, | 311 | sortable: false, |
| 312 | value: "No", | 312 | value: "No", |
| 313 | }, | 313 | }, |
| 314 | { | 314 | { |
| 315 | text: "fee Type", | 315 | text: "fee Type", |
| 316 | value: "feeType", | 316 | value: "feeType", |
| 317 | sortable: false, | 317 | sortable: false, |
| 318 | align: "center", | 318 | align: "center", |
| 319 | }, | 319 | }, |
| 320 | { text: "Note", value: "note", sortable: false, align: "center" }, | 320 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 321 | // { text: "Session", value: "session", sortable: false, align: "center" }, | 321 | // { text: "Session", value: "session", sortable: false, align: "center" }, |
| 322 | { text: "Action", value: "", sortable: false, align: "center" }, | 322 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 323 | ], | 323 | ], |
| 324 | feeTypeList: [], | 324 | feeTypeList: [], |
| 325 | select: "", | 325 | select: "", |
| 326 | token: "", | 326 | token: "", |
| 327 | editedItem: {}, | 327 | editedItem: {}, |
| 328 | feeTypeData: {}, | 328 | feeTypeData: {}, |
| 329 | }), | 329 | }), |
| 330 | watch: { | 330 | watch: { |
| 331 | addFeeTypeDialog: function (val) { | 331 | addFeeTypeDialog: function (val) { |
| 332 | if (!val) { | 332 | if (!val) { |
| 333 | this.feeTypeData = []; | 333 | this.feeTypeData = []; |
| 334 | } | 334 | } |
| 335 | }, | 335 | }, |
| 336 | }, | 336 | }, |
| 337 | methods: { | 337 | methods: { |
| 338 | getFeeTypeList() { | 338 | getFeeTypeList() { |
| 339 | this.showLoader = true; | 339 | this.showLoader = true; |
| 340 | http() | 340 | http() |
| 341 | .get("/getFeesList", { | 341 | .get("/getFeesList", { |
| 342 | params: { schoolId: this.$store.state.schoolId }, | 342 | params: { schoolId: this.$store.state.schoolId }, |
| 343 | headers: { Authorization: "Bearer " + this.token }, | 343 | headers: { Authorization: "Bearer " + this.token }, |
| 344 | }) | 344 | }) |
| 345 | .then((response) => { | 345 | .then((response) => { |
| 346 | this.feeTypeList = response.data.data; | 346 | this.feeTypeList = response.data.data; |
| 347 | this.showLoader = false; | 347 | this.showLoader = false; |
| 348 | }) | 348 | }) |
| 349 | .catch((error) => { | 349 | .catch((error) => { |
| 350 | this.showLoader = false; | 350 | this.showLoader = false; |
| 351 | if (error.response.status === 401) { | 351 | if (error.response.status === 401) { |
| 352 | this.$router.replace({ path: "/" }); | 352 | this.$router.replace({ path: "/" }); |
| 353 | this.$store.dispatch("setToken", null); | 353 | this.$store.dispatch("setToken", null); |
| 354 | this.$store.dispatch("Id", null); | 354 | this.$store.dispatch("Id", null); |
| 355 | this.$store.dispatch("Role", null); | 355 | this.$store.dispatch("Role", null); |
| 356 | } | 356 | } |
| 357 | }); | 357 | }); |
| 358 | }, | 358 | }, |
| 359 | editItem(item) { | 359 | editItem(item) { |
| 360 | this.editedIndex = this.feeTypeList.indexOf(item); | 360 | this.editedIndex = this.feeTypeList.indexOf(item); |
| 361 | this.editedItem = Object.assign({}, item); | 361 | this.editedItem = Object.assign({}, item); |
| 362 | this.editFeeTypeDialog = true; | 362 | this.editFeeTypeDialog = true; |
| 363 | }, | 363 | }, |
| 364 | profile(item) { | 364 | profile(item) { |
| 365 | this.editedIndex = this.feeTypeList.indexOf(item); | 365 | this.editedIndex = this.feeTypeList.indexOf(item); |
| 366 | this.editedItem = Object.assign({}, item); | 366 | this.editedItem = Object.assign({}, item); |
| 367 | this.viewFeeTypeDialog = true; | 367 | this.viewFeeTypeDialog = true; |
| 368 | }, | 368 | }, |
| 369 | deleteItem(item) { | 369 | deleteItem(item) { |
| 370 | let deleteFeeType = { | 370 | let deleteFeeType = { |
| 371 | feeId: item._id, | 371 | feeId: item._id, |
| 372 | }; | 372 | }; |
| 373 | http() | 373 | http() |
| 374 | .delete( | 374 | .delete( |
| 375 | "/deleteFee", | 375 | "/deleteFee", |
| 376 | confirm("Are you sure you want to delete this?") && { | 376 | confirm("Are you sure you want to delete this?") && { |
| 377 | params: deleteFeeType, | 377 | params: deleteFeeType, |
| 378 | } | 378 | } |
| 379 | ) | 379 | ) |
| 380 | .then((response) => { | 380 | .then((response) => { |
| 381 | this.snackbar = true; | 381 | this.snackbar = true; |
| 382 | this.text = response.data.message; | 382 | this.text = response.data.message; |
| 383 | this.color = "green"; | 383 | this.color = "green"; |
| 384 | this.getFeeTypeList(); | 384 | this.getFeeTypeList(); |
| 385 | }) | 385 | }) |
| 386 | .catch((error) => { | 386 | .catch((error) => { |
| 387 | this.snackbar = true; | 387 | this.snackbar = true; |
| 388 | this.color = "error"; | 388 | this.color = "error"; |
| 389 | this.text = error.response.data.message; | 389 | this.text = error.response.data.message; |
| 390 | }); | 390 | }); |
| 391 | }, | 391 | }, |
| 392 | close() { | 392 | close() { |
| 393 | this.dialog = false; | 393 | this.dialog = false; |
| 394 | }, | 394 | }, |
| 395 | close1() { | 395 | close1() { |
| 396 | this.dialog1 = false; | 396 | this.dialog1 = false; |
| 397 | }, | 397 | }, |
| 398 | close2() { | 398 | close2() { |
| 399 | this.dialog2 = false; | 399 | this.dialog2 = false; |
| 400 | }, | 400 | }, |
| 401 | closeAddFeeTypeModel() { | 401 | closeAddFeeTypeModel() { |
| 402 | this.addFeeTypeDialog = false; | 402 | this.addFeeTypeDialog = false; |
| 403 | this.feeTypeData = []; | 403 | this.feeTypeData = []; |
| 404 | }, | 404 | }, |
| 405 | submit() { | 405 | submit() { |
| 406 | if (this.$refs.form.validate()) { | 406 | if (this.$refs.form.validate()) { |
| 407 | this.loading = true; | 407 | this.loading = true; |
| 408 | this.schoolId = this.$store.state.schoolId; | 408 | this.schoolId = this.$store.state.schoolId; |
| 409 | http() | 409 | http() |
| 410 | .post("/createFee", this.feeTypeData) | 410 | .post("/createFee", this.feeTypeData) |
| 411 | .then((response) => { | 411 | .then((response) => { |
| 412 | this.getFeeTypeList(); | 412 | this.getFeeTypeList(); |
| 413 | this.snackbar = true; | 413 | this.snackbar = true; |
| 414 | this.text = response.data.message; | 414 | this.text = response.data.message; |
| 415 | this.color = "green"; | 415 | this.color = "green"; |
| 416 | this.clear(); | 416 | this.clear(); |
| 417 | this.addFeeTypeDialog = false; | 417 | this.addFeeTypeDialog = false; |
| 418 | this.loading = false; | 418 | this.loading = false; |
| 419 | }) | 419 | }) |
| 420 | .catch((error) => { | 420 | .catch((error) => { |
| 421 | // console.log(error); | 421 | // console.log(error); |
| 422 | this.snackbar = true; | 422 | this.snackbar = true; |
| 423 | this.color = "error"; | 423 | this.color = "error"; |
| 424 | this.text = error.response.data.message; | 424 | this.text = error.response.data.message; |
| 425 | this.loading = false; | 425 | this.loading = false; |
| 426 | }); | 426 | }); |
| 427 | } | 427 | } |
| 428 | }, | 428 | }, |
| 429 | clear() { | 429 | clear() { |
| 430 | this.$refs.form.reset(); | 430 | this.$refs.form.reset(); |
| 431 | }, | 431 | }, |
| 432 | save() { | 432 | save() { |
| 433 | this.editedItem.feeId = this.editedItem._id; | 433 | this.editedItem.feeId = this.editedItem._id; |
| 434 | http() | 434 | http() |
| 435 | .put("/updateFee", this.editedItem) | 435 | .put("/updateFee", this.editedItem) |
| 436 | .then((response) => { | 436 | .then((response) => { |
| 437 | this.snackbar = true; | 437 | this.snackbar = true; |
| 438 | this.text = response.data.message; | 438 | this.text = response.data.message; |
| 439 | this.color = "green"; | 439 | this.color = "green"; |
| 440 | this.getFeeTypeList(); | 440 | this.getFeeTypeList(); |
| 441 | this.editFeeTypeDialog = false; | 441 | this.editFeeTypeDialog = false; |
| 442 | this.close(); | 442 | this.close(); |
| 443 | }) | 443 | }) |
| 444 | .catch((error) => { | 444 | .catch((error) => { |
| 445 | this.snackbar = true; | 445 | this.snackbar = true; |
| 446 | this.color = "error"; | 446 | this.color = "error"; |
| 447 | this.text = error.response.data.message; | 447 | this.text = error.response.data.message; |
| 448 | }); | 448 | }); |
| 449 | }, | 449 | }, |
| 450 | displaySearch() { | 450 | displaySearch() { |
| 451 | (this.show = false), (this.showSearch = true); | 451 | (this.show = false), (this.showSearch = true); |
| 452 | }, | 452 | }, |
| 453 | closeSearch() { | 453 | closeSearch() { |
| 454 | this.showSearch = false; | 454 | this.showSearch = false; |
| 455 | this.show = true; | 455 | this.show = true; |
| 456 | this.search = ""; | 456 | this.search = ""; |
| 457 | }, | 457 | }, |
| 458 | }, | 458 | }, |
| 459 | mounted() { | 459 | mounted() { |
| 460 | this.token = this.$store.state.token; | 460 | this.token = this.$store.state.token; |
| 461 | this.getFeeTypeList(); | 461 | this.getFeeTypeList(); |
| 462 | }, | 462 | }, |
| 463 | }; | 463 | }; |
| 464 | </script> | 464 | </script> |
src/pages/Account/income.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Income DETAILS ****** --> | 3 | <!-- ****** EDIT Income DETAILS ****** --> |
| 4 | <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable persistent> | 4 | <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Income</label> | 8 | <label class="title text-xs-center">Edit Income</label> |
| 9 | <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="160px"> | 18 | <v-avatar size="160px"> |
| 19 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> | 19 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> |
| 20 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> | 20 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> |
| 21 | <img | 21 | <img |
| 22 | v-if="imageUrl" | 22 | v-if="imageUrl" |
| 23 | :src="imageUrl" | 23 | :src="imageUrl" |
| 24 | height="150" | 24 | height="150" |
| 25 | style="border-radius:50%; width:200px" | 25 | style="border-radius:50%; width:200px" |
| 26 | /> | 26 | /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | <input | 28 | <input |
| 29 | type="file" | 29 | type="file" |
| 30 | style="display:none" | 30 | style="display:none" |
| 31 | ref="image" | 31 | ref="image" |
| 32 | accept="image/*" | 32 | accept="image/*" |
| 33 | @change="onFilePicked" | 33 | @change="onFilePicked" |
| 34 | /> | 34 | /> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-layout> | 36 | </v-layout> |
| 37 | <v-layout wrap> | 37 | <v-layout wrap> |
| 38 | <v-flex xs12 sm12> | 38 | <v-flex xs12 sm12> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right">Name:</label> | 41 | <label class="right">Name:</label> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs8 sm6 class="ml-3"> | 43 | <v-flex xs8 sm6 class="ml-3"> |
| 44 | <v-text-field | 44 | <v-text-field |
| 45 | v-model="editedItem.name" | 45 | v-model="editedItem.name" |
| 46 | placeholder="fill your full Name" | 46 | placeholder="fill your full Name" |
| 47 | name="name" | 47 | name="name" |
| 48 | type="text" | 48 | type="text" |
| 49 | required | 49 | required |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-layout wrap> | 55 | <v-layout wrap> |
| 56 | <v-flex xs12> | 56 | <v-flex xs12> |
| 57 | <v-layout> | 57 | <v-layout> |
| 58 | <v-flex xs4 class="pt-4 subheading"> | 58 | <v-flex xs4 class="pt-4 subheading"> |
| 59 | <label class="right">Date:</label> | 59 | <label class="right">Date:</label> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs8 sm6 class="ml-3"> | 61 | <v-flex xs8 sm6 class="ml-3"> |
| 62 | <v-menu | 62 | <v-menu |
| 63 | ref="menu" | 63 | ref="menu" |
| 64 | :close-on-content-click="false" | 64 | :close-on-content-click="false" |
| 65 | v-model="menu3" | 65 | v-model="menu3" |
| 66 | :nudge-right="40" | 66 | :nudge-right="40" |
| 67 | lazy | 67 | lazy |
| 68 | transition="scale-transition" | 68 | transition="scale-transition" |
| 69 | offset-y | 69 | offset-y |
| 70 | full-width | 70 | full-width |
| 71 | min-width="290px" | 71 | min-width="290px" |
| 72 | > | 72 | > |
| 73 | <v-text-field | 73 | <v-text-field |
| 74 | slot="activator" | 74 | slot="activator" |
| 75 | v-model="editedItem.date" | 75 | v-model="editedItem.date" |
| 76 | placeholder="Select date" | 76 | placeholder="Select date" |
| 77 | ></v-text-field> | 77 | ></v-text-field> |
| 78 | <v-date-picker | 78 | <v-date-picker |
| 79 | ref="picker" | 79 | ref="picker" |
| 80 | v-model="editedItem.date" | 80 | v-model="editedItem.date" |
| 81 | @input="$refs.menu.save(editedItem.date)" | 81 | @input="$refs.menu.save(editedItem.date)" |
| 82 | ></v-date-picker> | 82 | ></v-date-picker> |
| 83 | </v-menu> | 83 | </v-menu> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | <v-layout wrap> | 87 | <v-layout wrap> |
| 88 | <v-flex xs12 sm12> | 88 | <v-flex xs12 sm12> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs4 class="pt-4 subheading"> | 90 | <v-flex xs4 class="pt-4 subheading"> |
| 91 | <label class="right">Amount:</label> | 91 | <label class="right">Amount:</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs8 sm6 class="ml-3"> | 93 | <v-flex xs8 sm6 class="ml-3"> |
| 94 | <v-text-field v-model="editedItem.amount" required></v-text-field> | 94 | <v-text-field v-model="editedItem.amount" required></v-text-field> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | <v-flex xs12> | 99 | <v-flex xs12> |
| 100 | <v-layout> | 100 | <v-layout> |
| 101 | <v-flex xs4 class="pt-4 subheading"> | 101 | <v-flex xs4 class="pt-4 subheading"> |
| 102 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 102 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs8 sm6 class="ml-3"> | 105 | <v-flex xs8 sm6 class="ml-3"> |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | label="Select Image" | 107 | label="Select Image" |
| 108 | @click="pickFile" | 108 | @click="pickFile" |
| 109 | v-model="imageName" | 109 | v-model="imageName" |
| 110 | append-icon="attach_file" | 110 | append-icon="attach_file" |
| 111 | ></v-text-field> | 111 | ></v-text-field> |
| 112 | <input | 112 | <input |
| 113 | type="file" | 113 | type="file" |
| 114 | style="display:none" | 114 | style="display:none" |
| 115 | ref="image" | 115 | ref="image" |
| 116 | accept="image/*" | 116 | accept="image/*" |
| 117 | @change="onFilePicked" | 117 | @change="onFilePicked" |
| 118 | /> | 118 | /> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | <v-flex xs12> | 122 | <v-flex xs12> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-flex xs4 class="pt-4 subheading"> | 124 | <v-flex xs4 class="pt-4 subheading"> |
| 125 | <label class="right">Note:</label> | 125 | <label class="right">Note:</label> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | <v-flex xs8 sm6 class="ml-3"> | 127 | <v-flex xs8 sm6 class="ml-3"> |
| 128 | <v-textarea | 128 | <v-textarea |
| 129 | name="input-7-1" | 129 | name="input-7-1" |
| 130 | v-model="editedItem.note" | 130 | v-model="editedItem.note" |
| 131 | placeholder="fill your Note" | 131 | placeholder="fill your Note" |
| 132 | type="text" | 132 | type="text" |
| 133 | :rules="noteRules" | 133 | :rules="noteRules" |
| 134 | multi-line | 134 | multi-line |
| 135 | required | 135 | required |
| 136 | ></v-textarea> | 136 | ></v-textarea> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs12> | 142 | <v-flex xs12> |
| 143 | <v-card-actions> | 143 | <v-card-actions> |
| 144 | <v-spacer></v-spacer> | 144 | <v-spacer></v-spacer> |
| 145 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 145 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 146 | <v-spacer></v-spacer> | 146 | <v-spacer></v-spacer> |
| 147 | </v-card-actions> | 147 | </v-card-actions> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | </v-card-text> | 150 | </v-card-text> |
| 151 | </v-card> | 151 | </v-card> |
| 152 | </v-dialog> | 152 | </v-dialog> |
| 153 | 153 | ||
| 154 | <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> | 154 | <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> |
| 155 | <v-dialog v-model="profileIncomeDialog" max-width="400px" persistent> | 155 | <v-dialog v-model="profileIncomeDialog" max-width="400px" persistent> |
| 156 | <v-card flat class="card-style pa-3" dark> | 156 | <v-card flat class="Card-style pa-3"> |
| 157 | <v-layout> | 157 | <v-layout> |
| 158 | <v-flex xs12> | 158 | <v-flex xs12> |
| 159 | <label class="title text-xs-center">View Income</label> | 159 | <label class="title text-xs-center">View Income</label> |
| 160 | <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> | 160 | <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | <v-card-text> | 163 | <v-card-text> |
| 164 | <v-container grid-list-md> | 164 | <v-container grid-list-md> |
| 165 | <v-layout wrap> | 165 | <v-layout wrap> |
| 166 | <v-flex> | 166 | <v-flex> |
| 167 | <v-flex align-center justify-center layout text-xs-center> | 167 | <v-flex align-center justify-center layout text-xs-center> |
| 168 | <v-avatar size="80px" v-if="!editedItem.fileUrl"> | 168 | <v-avatar size="80px" v-if="!editedItem.fileUrl"> |
| 169 | <img src="/static/icon/user.png" /> | 169 | <img src="/static/icon/user.png" /> |
| 170 | </v-avatar> | 170 | </v-avatar> |
| 171 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> | 171 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-layout> | 173 | <v-layout> |
| 174 | <v-flex xs5 sm6> | 174 | <v-flex xs5 sm6> |
| 175 | <h5 class="right my-1"> | 175 | <h5 class="right my-1"> |
| 176 | <b>Name:</b> | 176 | <b>Name:</b> |
| 177 | </h5> | 177 | </h5> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | <v-flex sm6 xs8> | 179 | <v-flex sm6 xs8> |
| 180 | <h5 class="my-1">{{ editedItem.name }}</h5> | 180 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | <v-layout> | 183 | <v-layout> |
| 184 | <v-flex xs5 sm6> | 184 | <v-flex xs5 sm6> |
| 185 | <h5 class="right my-1"> | 185 | <h5 class="right my-1"> |
| 186 | <b>Amount:</b> | 186 | <b>Amount:</b> |
| 187 | </h5> | 187 | </h5> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | <v-flex sm6 xs8> | 189 | <v-flex sm6 xs8> |
| 190 | <h5 class="my-1">{{ editedItem.amount }}</h5> | 190 | <h5 class="my-1">{{ editedItem.amount }}</h5> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | <v-layout> | 193 | <v-layout> |
| 194 | <v-flex xs5 sm6> | 194 | <v-flex xs5 sm6> |
| 195 | <h5 class="right my-1"> | 195 | <h5 class="right my-1"> |
| 196 | <b>Date:</b> | 196 | <b>Date:</b> |
| 197 | </h5> | 197 | </h5> |
| 198 | </v-flex> | 198 | </v-flex> |
| 199 | <v-flex sm6 xs8> | 199 | <v-flex sm6 xs8> |
| 200 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 200 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | <v-layout> | 203 | <v-layout> |
| 204 | <v-flex xs5 sm6> | 204 | <v-flex xs5 sm6> |
| 205 | <h5 class="right my-1"> | 205 | <h5 class="right my-1"> |
| 206 | <b>Note:</b> | 206 | <b>Note:</b> |
| 207 | </h5> | 207 | </h5> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-flex sm6 xs8> | 209 | <v-flex sm6 xs8> |
| 210 | <h5 class="my-1">{{ editedItem.note }}</h5> | 210 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | </v-container> | 215 | </v-container> |
| 216 | </v-card-text> | 216 | </v-card-text> |
| 217 | </v-card> | 217 | </v-card> |
| 218 | </v-dialog> | 218 | </v-dialog> |
| 219 | <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> | 219 | <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> |
| 220 | 220 | ||
| 221 | <v-toolbar color="transparent" flat> | 221 | <v-toolbar color="transparent" flat> |
| 222 | <v-btn | 222 | <v-btn |
| 223 | fab | 223 | fab |
| 224 | dark | 224 | dark |
| 225 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 225 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 226 | small | 226 | small |
| 227 | @click="addIncomeDialog = true" | 227 | @click="addIncomeDialog = true" |
| 228 | > | 228 | > |
| 229 | <v-icon dark>add</v-icon> | 229 | <v-icon dark>add</v-icon> |
| 230 | </v-btn> | 230 | </v-btn> |
| 231 | <v-btn | 231 | <v-btn |
| 232 | round | 232 | round |
| 233 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 233 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 234 | dark | 234 | dark |
| 235 | @click="addIncomeDialog = true" | 235 | @click="addIncomeDialog = true" |
| 236 | > | 236 | > |
| 237 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income | 237 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income |
| 238 | </v-btn> | 238 | </v-btn> |
| 239 | <v-spacer></v-spacer> | 239 | <v-spacer></v-spacer> |
| 240 | <v-card-title class="body-1" v-show="show"> | 240 | <v-card-title class="body-1" v-show="show"> |
| 241 | <v-btn icon large flat @click="displaySearch"> | 241 | <v-btn icon large flat @click="displaySearch"> |
| 242 | <v-avatar size="27"> | 242 | <v-avatar size="27"> |
| 243 | <img src="/static/icon/search.png" alt="icon" /> | 243 | <img src="/static/icon/search.png" alt="icon" /> |
| 244 | </v-avatar> | 244 | </v-avatar> |
| 245 | </v-btn> | 245 | </v-btn> |
| 246 | </v-card-title> | 246 | </v-card-title> |
| 247 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 247 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-text-field | 249 | <v-text-field |
| 250 | autofocus | 250 | autofocus |
| 251 | v-model="search" | 251 | v-model="search" |
| 252 | label="Search" | 252 | label="Search" |
| 253 | prepend-inner-icon="search" | 253 | prepend-inner-icon="search" |
| 254 | color="primary" | 254 | color="primary" |
| 255 | ></v-text-field> | 255 | ></v-text-field> |
| 256 | <v-icon @click="closeSearch" color="error">close</v-icon> | 256 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-toolbar> | 259 | </v-toolbar> |
| 260 | <v-data-table | 260 | <v-data-table |
| 261 | :headers="headers" | 261 | :headers="headers" |
| 262 | :items="incomeList" | 262 | :items="incomeList" |
| 263 | :pagination.sync="pagination" | 263 | :pagination.sync="pagination" |
| 264 | :search="search" | 264 | :search="search" |
| 265 | > | 265 | > |
| 266 | <template slot="items" slot-scope="props"> | 266 | <template slot="items" slot-scope="props"> |
| 267 | <tr class="tr"> | 267 | <tr class="tr"> |
| 268 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> | 268 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> |
| 269 | <td class="text-xs-center td td-row"> | 269 | <td class="text-xs-center td td-row"> |
| 270 | <v-avatar class="40"> | 270 | <v-avatar class="40"> |
| 271 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> | 271 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> |
| 272 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> | 272 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> |
| 273 | </v-avatar> | 273 | </v-avatar> |
| 274 | </td> | 274 | </td> |
| 275 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 275 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 276 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 276 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 277 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> | 277 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> |
| 278 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> | 278 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> |
| 279 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 279 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 280 | <td class="text-xs-center td td-row"> | 280 | <td class="text-xs-center td td-row"> |
| 281 | <span> | 281 | <span> |
| 282 | <v-tooltip top> | 282 | <v-tooltip top> |
| 283 | <img | 283 | <img |
| 284 | slot="activator" | 284 | slot="activator" |
| 285 | style="cursor:pointer; width:25px; height:25px; " | 285 | style="cursor:pointer; width:25px; height:25px; " |
| 286 | class="mr-3" | 286 | class="mr-3" |
| 287 | @click="profile(props.item)" | 287 | @click="profile(props.item)" |
| 288 | src="/static/icon/view.png" | 288 | src="/static/icon/view.png" |
| 289 | /> | 289 | /> |
| 290 | <span>View</span> | 290 | <span>View</span> |
| 291 | </v-tooltip> | 291 | </v-tooltip> |
| 292 | <v-tooltip top> | 292 | <v-tooltip top> |
| 293 | <img | 293 | <img |
| 294 | slot="activator" | 294 | slot="activator" |
| 295 | style="cursor:pointer; width:20px; height:18px; " | 295 | style="cursor:pointer; width:20px; height:18px; " |
| 296 | class="mr-3" | 296 | class="mr-3" |
| 297 | @click="editItem(props.item)" | 297 | @click="editItem(props.item)" |
| 298 | src="/static/icon/edit.png" | 298 | src="/static/icon/edit.png" |
| 299 | /> | 299 | /> |
| 300 | <span>Edit</span> | 300 | <span>Edit</span> |
| 301 | </v-tooltip> | 301 | </v-tooltip> |
| 302 | <v-tooltip top> | 302 | <v-tooltip top> |
| 303 | <img | 303 | <img |
| 304 | slot="activator" | 304 | slot="activator" |
| 305 | style="cursor:pointer; width:20px; height:20px; " | 305 | style="cursor:pointer; width:20px; height:20px; " |
| 306 | @click="deleteItem(props.item)" | 306 | @click="deleteItem(props.item)" |
| 307 | src="/static/icon/delete.png" | 307 | src="/static/icon/delete.png" |
| 308 | /> | 308 | /> |
| 309 | <span>Delete</span> | 309 | <span>Delete</span> |
| 310 | </v-tooltip> | 310 | </v-tooltip> |
| 311 | </span> | 311 | </span> |
| 312 | </td> | 312 | </td> |
| 313 | </tr> | 313 | </tr> |
| 314 | </template> | 314 | </template> |
| 315 | <v-alert | 315 | <v-alert |
| 316 | slot="no-results" | 316 | slot="no-results" |
| 317 | :value="true" | 317 | :value="true" |
| 318 | color="error" | 318 | color="error" |
| 319 | icon="warning" | 319 | icon="warning" |
| 320 | >Your search for "{{ search }}" found no results.</v-alert> | 320 | >Your search for "{{ search }}" found no results.</v-alert> |
| 321 | </v-data-table> | 321 | </v-data-table> |
| 322 | 322 | ||
| 323 | <!-- ****** Add Income Data****** --> | 323 | <!-- ****** Add Income Data****** --> |
| 324 | <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog" persistent> | 324 | <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog" persistent> |
| 325 | <v-card flat class="card-style pa-2" dark> | 325 | <v-card flat class="Card-style pa-2"> |
| 326 | <v-layout> | 326 | <v-layout> |
| 327 | <v-flex xs12> | 327 | <v-flex xs12> |
| 328 | <label class="title text-xs-center">Add Income</label> | 328 | <label class="title text-xs-center">Add Income</label> |
| 329 | <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> | 329 | <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | </v-layout> | 331 | </v-layout> |
| 332 | <v-form ref="form" v-model="valid" lazy-validation> | 332 | <v-form ref="form" v-model="valid" lazy-validation> |
| 333 | <v-container fluid> | 333 | <v-container fluid> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 335 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 336 | <v-avatar size="80px"> | 336 | <v-avatar size="80px"> |
| 337 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 337 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 338 | </v-avatar> | 338 | </v-avatar> |
| 339 | <img | 339 | <img |
| 340 | :src="imageUrl" | 340 | :src="imageUrl" |
| 341 | height="150" | 341 | height="150" |
| 342 | v-if="imageUrl" | 342 | v-if="imageUrl" |
| 343 | style="border-radius:50%; width:200px" | 343 | style="border-radius:50%; width:200px" |
| 344 | /> | 344 | /> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | <v-layout> | 347 | <v-layout> |
| 348 | <v-flex xs12 sm12> | 348 | <v-flex xs12 sm12> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs4 class="pt-4 subheading"> | 350 | <v-flex xs4 class="pt-4 subheading"> |
| 351 | <label class="right">Name:</label> | 351 | <label class="right">Name:</label> |
| 352 | </v-flex> | 352 | </v-flex> |
| 353 | <v-flex xs8 sm6 class="ml-3"> | 353 | <v-flex xs8 sm6 class="ml-3"> |
| 354 | <v-text-field | 354 | <v-text-field |
| 355 | v-model="addIncome.name" | 355 | v-model="addIncome.name" |
| 356 | placeholder="fill your full Name" | 356 | placeholder="fill your full Name" |
| 357 | name="name" | 357 | name="name" |
| 358 | type="text" | 358 | type="text" |
| 359 | :rules="nameRules" | 359 | :rules="nameRules" |
| 360 | required | 360 | required |
| 361 | ></v-text-field> | 361 | ></v-text-field> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | </v-layout> | 365 | </v-layout> |
| 366 | <v-layout> | 366 | <v-layout> |
| 367 | <v-flex xs12 sm12> | 367 | <v-flex xs12 sm12> |
| 368 | <v-layout> | 368 | <v-layout> |
| 369 | <v-flex xs4 class="pt-4 subheading"> | 369 | <v-flex xs4 class="pt-4 subheading"> |
| 370 | <label class="right">Amount:</label> | 370 | <label class="right">Amount:</label> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | <v-flex xs8 sm6 class="ml-3"> | 372 | <v-flex xs8 sm6 class="ml-3"> |
| 373 | <v-text-field | 373 | <v-text-field |
| 374 | v-model="addIncome.amount" | 374 | v-model="addIncome.amount" |
| 375 | placeholder="fill your Amount" | 375 | placeholder="fill your Amount" |
| 376 | name="name" | 376 | name="name" |
| 377 | type="text" | 377 | type="text" |
| 378 | :rules="amountRules" | 378 | :rules="amountRules" |
| 379 | required | 379 | required |
| 380 | ></v-text-field> | 380 | ></v-text-field> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | </v-layout> | 384 | </v-layout> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs12 sm12> | 386 | <v-flex xs12 sm12> |
| 387 | <v-layout> | 387 | <v-layout> |
| 388 | <v-flex xs4 class="pt-4 subheading"> | 388 | <v-flex xs4 class="pt-4 subheading"> |
| 389 | <label class="right">Date</label> | 389 | <label class="right">Date</label> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | <v-flex xs8 sm6 class="ml-3"> | 391 | <v-flex xs8 sm6 class="ml-3"> |
| 392 | <v-menu | 392 | <v-menu |
| 393 | ref="menu1" | 393 | ref="menu1" |
| 394 | :close-on-content-click="false" | 394 | :close-on-content-click="false" |
| 395 | v-model="menu1" | 395 | v-model="menu1" |
| 396 | :nudge-right="40" | 396 | :nudge-right="40" |
| 397 | lazy | 397 | lazy |
| 398 | transition="scale-transition" | 398 | transition="scale-transition" |
| 399 | offset-y | 399 | offset-y |
| 400 | full-width | 400 | full-width |
| 401 | min-width="290px" | 401 | min-width="290px" |
| 402 | > | 402 | > |
| 403 | <v-text-field | 403 | <v-text-field |
| 404 | slot="activator" | 404 | slot="activator" |
| 405 | :rules="joinDateRules" | 405 | :rules="joinDateRules" |
| 406 | v-model="addIncome.date" | 406 | v-model="addIncome.date" |
| 407 | placeholder="Select date" | 407 | placeholder="Select date" |
| 408 | ></v-text-field> | 408 | ></v-text-field> |
| 409 | <v-date-picker | 409 | <v-date-picker |
| 410 | ref="picker" | 410 | ref="picker" |
| 411 | v-model="addIncome.date" | 411 | v-model="addIncome.date" |
| 412 | @input="$refs.menu1.save(addIncome.date)" | 412 | @input="$refs.menu1.save(addIncome.date)" |
| 413 | ></v-date-picker> | 413 | ></v-date-picker> |
| 414 | </v-menu> | 414 | </v-menu> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | </v-layout> | 416 | </v-layout> |
| 417 | </v-flex> | 417 | </v-flex> |
| 418 | </v-layout> | 418 | </v-layout> |
| 419 | <v-layout> | 419 | <v-layout> |
| 420 | <v-flex xs12 sm12> | 420 | <v-flex xs12 sm12> |
| 421 | <v-layout> | 421 | <v-layout> |
| 422 | <v-flex xs4 class="pt-4 subheading"> | 422 | <v-flex xs4 class="pt-4 subheading"> |
| 423 | <label class="right">File:</label> | 423 | <label class="right">File:</label> |
| 424 | </v-flex> | 424 | </v-flex> |
| 425 | <v-flex xs8 sm6 class="ml-3"> | 425 | <v-flex xs8 sm6 class="ml-3"> |
| 426 | <v-text-field | 426 | <v-text-field |
| 427 | label="Select file" | 427 | label="Select file" |
| 428 | @click="pickFile" | 428 | @click="pickFile" |
| 429 | v-model="imageName" | 429 | v-model="imageName" |
| 430 | append-icon="attach_file" | 430 | append-icon="attach_file" |
| 431 | ></v-text-field> | 431 | ></v-text-field> |
| 432 | <input | 432 | <input |
| 433 | type="file" | 433 | type="file" |
| 434 | style="display:none" | 434 | style="display:none" |
| 435 | ref="image" | 435 | ref="image" |
| 436 | accept="image/*" | 436 | accept="image/*" |
| 437 | @change="onFilePicked" | 437 | @change="onFilePicked" |
| 438 | /> | 438 | /> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | </v-layout> | 442 | </v-layout> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs12 sm12> | 444 | <v-flex xs12 sm12> |
| 445 | <v-layout> | 445 | <v-layout> |
| 446 | <v-flex xs4 class="pt-4 subheading"> | 446 | <v-flex xs4 class="pt-4 subheading"> |
| 447 | <label class="right">Note:</label> | 447 | <label class="right">Note:</label> |
| 448 | </v-flex> | 448 | </v-flex> |
| 449 | <v-flex xs8 sm6 class="ml-3"> | 449 | <v-flex xs8 sm6 class="ml-3"> |
| 450 | <v-textarea | 450 | <v-textarea |
| 451 | name="input-7-1" | 451 | name="input-7-1" |
| 452 | v-model="addIncome.note" | 452 | v-model="addIncome.note" |
| 453 | placeholder="fill your Note" | 453 | placeholder="fill your Note" |
| 454 | type="text" | 454 | type="text" |
| 455 | multi-line | 455 | multi-line |
| 456 | required | 456 | required |
| 457 | ></v-textarea> | 457 | ></v-textarea> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | </v-layout> | 459 | </v-layout> |
| 460 | </v-flex> | 460 | </v-flex> |
| 461 | </v-layout> | 461 | </v-layout> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs12 sm11> | 463 | <v-flex xs12 sm11> |
| 464 | <v-layout> | 464 | <v-layout> |
| 465 | <v-spacer></v-spacer> | 465 | <v-spacer></v-spacer> |
| 466 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 466 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 467 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 467 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 468 | </v-layout> | 468 | </v-layout> |
| 469 | </v-flex> | 469 | </v-flex> |
| 470 | </v-layout> | 470 | </v-layout> |
| 471 | </v-container> | 471 | </v-container> |
| 472 | </v-form> | 472 | </v-form> |
| 473 | </v-card> | 473 | </v-card> |
| 474 | </v-dialog> | 474 | </v-dialog> |
| 475 | <div class="loader" v-if="showLoader"> | 475 | <div class="loader" v-if="showLoader"> |
| 476 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 476 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 477 | </div> | 477 | </div> |
| 478 | </v-container> | 478 | </v-container> |
| 479 | </template> | 479 | </template> |
| 480 | 480 | ||
| 481 | <script> | 481 | <script> |
| 482 | import http from "@/Services/http.js"; | 482 | import http from "@/Services/http.js"; |
| 483 | import Util from "@/util"; | 483 | import Util from "@/util"; |
| 484 | import moment from "moment"; | 484 | import moment from "moment"; |
| 485 | 485 | ||
| 486 | export default { | 486 | export default { |
| 487 | data: () => ({ | 487 | data: () => ({ |
| 488 | component: "report-generate", | 488 | component: "report-generate", |
| 489 | snackbar: false, | 489 | snackbar: false, |
| 490 | y: "top", | 490 | y: "top", |
| 491 | x: "right", | 491 | x: "right", |
| 492 | mode: "", | 492 | mode: "", |
| 493 | timeout: 3000, | 493 | timeout: 3000, |
| 494 | text: "", | 494 | text: "", |
| 495 | show: true, | 495 | show: true, |
| 496 | showSearch: false, | 496 | showSearch: false, |
| 497 | showLoader: false, | 497 | showLoader: false, |
| 498 | loading: false, | 498 | loading: false, |
| 499 | date: null, | 499 | date: null, |
| 500 | search: "", | 500 | search: "", |
| 501 | addIncomeDialog: false, | 501 | addIncomeDialog: false, |
| 502 | menu: false, | 502 | menu: false, |
| 503 | menu1: false, | 503 | menu1: false, |
| 504 | menu2: false, | 504 | menu2: false, |
| 505 | menu3: false, | 505 | menu3: false, |
| 506 | editIncomeDialog: false, | 506 | editIncomeDialog: false, |
| 507 | profileIncomeDialog: false, | 507 | profileIncomeDialog: false, |
| 508 | valid: true, | 508 | valid: true, |
| 509 | pagination: { | 509 | pagination: { |
| 510 | rowsPerPage: 10, | 510 | rowsPerPage: 10, |
| 511 | }, | 511 | }, |
| 512 | imageData: {}, | 512 | imageData: {}, |
| 513 | imageName: "", | 513 | imageName: "", |
| 514 | imageUrl: "", | 514 | imageUrl: "", |
| 515 | imageFile: "", | 515 | imageFile: "", |
| 516 | nameRules: [(v) => !!v || " Full Name is required"], | 516 | nameRules: [(v) => !!v || " Full Name is required"], |
| 517 | amountRules: [(v) => !!v || "Amount is required"], | 517 | amountRules: [(v) => !!v || "Amount is required"], |
| 518 | noteRules: [(v) => !!v || "Note Name is required"], | 518 | noteRules: [(v) => !!v || "Note Name is required"], |
| 519 | joinDateRules: [(v) => !!v || "Date is required"], | 519 | joinDateRules: [(v) => !!v || "Date is required"], |
| 520 | errorMessages: "", | 520 | errorMessages: "", |
| 521 | headers: [ | 521 | headers: [ |
| 522 | { | 522 | { |
| 523 | text: "No", | 523 | text: "No", |
| 524 | align: "", | 524 | align: "", |
| 525 | sortable: false, | 525 | sortable: false, |
| 526 | value: "No", | 526 | value: "No", |
| 527 | }, | 527 | }, |
| 528 | { | 528 | { |
| 529 | text: "Profile Pic", | 529 | text: "Profile Pic", |
| 530 | value: "profilePicUrl", | 530 | value: "profilePicUrl", |
| 531 | sortable: false, | 531 | sortable: false, |
| 532 | align: "center", | 532 | align: "center", |
| 533 | }, | 533 | }, |
| 534 | { text: "Name", value: "name", sortable: false, align: "center" }, | 534 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 535 | { text: "Date", value: "date", sortable: false, align: "center" }, | 535 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 536 | { text: "User", value: "user", sortable: false, align: "center" }, | 536 | { text: "User", value: "user", sortable: false, align: "center" }, |
| 537 | { text: "Amount", value: "amount", sortable: false, align: "center" }, | 537 | { text: "Amount", value: "amount", sortable: false, align: "center" }, |
| 538 | { text: "Note", value: "note", sortable: false, align: "center" }, | 538 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 539 | { text: "Action", value: "", sortable: false, align: "center" }, | 539 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 540 | ], | 540 | ], |
| 541 | incomeList: [], | 541 | incomeList: [], |
| 542 | editedIndex: -1, | 542 | editedIndex: -1, |
| 543 | upload: "", | 543 | upload: "", |
| 544 | editedItem: {}, | 544 | editedItem: {}, |
| 545 | addIncome: {}, | 545 | addIncome: {}, |
| 546 | }), | 546 | }), |
| 547 | watch: { | 547 | watch: { |
| 548 | menu(val) { | 548 | menu(val) { |
| 549 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 549 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 550 | }, | 550 | }, |
| 551 | menu1(val) { | 551 | menu1(val) { |
| 552 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 552 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 553 | }, | 553 | }, |
| 554 | addIncomeDialog: function (val) { | 554 | addIncomeDialog: function (val) { |
| 555 | if (!val) { | 555 | if (!val) { |
| 556 | this.addIncome = []; | 556 | this.addIncome = []; |
| 557 | this.menu1 = false; | 557 | this.menu1 = false; |
| 558 | this.imageName = ""; | 558 | this.imageName = ""; |
| 559 | this.imageUrl = ""; | 559 | this.imageUrl = ""; |
| 560 | this.imageFile = ""; | 560 | this.imageFile = ""; |
| 561 | } | 561 | } |
| 562 | }, | 562 | }, |
| 563 | }, | 563 | }, |
| 564 | methods: { | 564 | methods: { |
| 565 | save(date) { | 565 | save(date) { |
| 566 | this.$refs.menu.save(date); | 566 | this.$refs.menu.save(date); |
| 567 | }, | 567 | }, |
| 568 | save(date) { | 568 | save(date) { |
| 569 | this.$refs.menu1.save(date); | 569 | this.$refs.menu1.save(date); |
| 570 | }, | 570 | }, |
| 571 | pickFile() { | 571 | pickFile() { |
| 572 | this.$refs.image.click(); | 572 | this.$refs.image.click(); |
| 573 | }, | 573 | }, |
| 574 | onFilePicked(e) { | 574 | onFilePicked(e) { |
| 575 | // console.log(e) | 575 | // console.log(e) |
| 576 | const files = e.target.files; | 576 | const files = e.target.files; |
| 577 | this.upload = e.target.files[0]; | 577 | this.upload = e.target.files[0]; |
| 578 | // console.log("imageData-upload========>", this.upload); | 578 | // console.log("imageData-upload========>", this.upload); |
| 579 | if (files[0] !== undefined) { | 579 | if (files[0] !== undefined) { |
| 580 | this.imageName = files[0].name; | 580 | this.imageName = files[0].name; |
| 581 | if (this.imageName.lastIndexOf(".") <= 0) { | 581 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 582 | return; | 582 | return; |
| 583 | } | 583 | } |
| 584 | const fr = new FileReader(); | 584 | const fr = new FileReader(); |
| 585 | fr.readAsDataURL(files[0]); | 585 | fr.readAsDataURL(files[0]); |
| 586 | fr.addEventListener("load", () => { | 586 | fr.addEventListener("load", () => { |
| 587 | this.imageUrl = fr.result; | 587 | this.imageUrl = fr.result; |
| 588 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 588 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 589 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 589 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 590 | // console.log("upload=======>", this.imageData.imageUrl); | 590 | // console.log("upload=======>", this.imageData.imageUrl); |
| 591 | // console.log("imageFile", this.imageUrl); | 591 | // console.log("imageFile", this.imageUrl); |
| 592 | }); | 592 | }); |
| 593 | } else { | 593 | } else { |
| 594 | this.imageName = ""; | 594 | this.imageName = ""; |
| 595 | this.imageFile = ""; | 595 | this.imageFile = ""; |
| 596 | this.imageUrl = ""; | 596 | this.imageUrl = ""; |
| 597 | } | 597 | } |
| 598 | }, | 598 | }, |
| 599 | dates: function (date) { | 599 | dates: function (date) { |
| 600 | return moment(date).format("MMMM DD, YYYY"); | 600 | return moment(date).format("MMMM DD, YYYY"); |
| 601 | }, | 601 | }, |
| 602 | getIncomeList() { | 602 | getIncomeList() { |
| 603 | this.showLoader = true; | 603 | this.showLoader = true; |
| 604 | var token = this.$store.state.token; | 604 | var token = this.$store.state.token; |
| 605 | http() | 605 | http() |
| 606 | .get("/getIncomesList", { | 606 | .get("/getIncomesList", { |
| 607 | params: { schoolId: this.$store.state.schoolId }, | 607 | params: { schoolId: this.$store.state.schoolId }, |
| 608 | headers: { Authorization: "Bearer " + token }, | 608 | headers: { Authorization: "Bearer " + token }, |
| 609 | }) | 609 | }) |
| 610 | .then((response) => { | 610 | .then((response) => { |
| 611 | this.incomeList = response.data.data; | 611 | this.incomeList = response.data.data; |
| 612 | this.showLoader = false; | 612 | this.showLoader = false; |
| 613 | // console.log("getTeacherList=====>",this.incomeList) | 613 | // console.log("getTeacherList=====>",this.incomeList) |
| 614 | }) | 614 | }) |
| 615 | .catch((error) => { | 615 | .catch((error) => { |
| 616 | this.showLoader = false; | 616 | this.showLoader = false; |
| 617 | if (error.response.status === 401) { | 617 | if (error.response.status === 401) { |
| 618 | this.$router.replace({ path: "/" }); | 618 | this.$router.replace({ path: "/" }); |
| 619 | this.$store.dispatch("setToken", null); | 619 | this.$store.dispatch("setToken", null); |
| 620 | this.$store.dispatch("Id", null); | 620 | this.$store.dispatch("Id", null); |
| 621 | } | 621 | } |
| 622 | }); | 622 | }); |
| 623 | }, | 623 | }, |
| 624 | editItem(item) { | 624 | editItem(item) { |
| 625 | this.editedIndex = this.incomeList.indexOf(item); | 625 | this.editedIndex = this.incomeList.indexOf(item); |
| 626 | this.editedItem = Object.assign({}, item); | 626 | this.editedItem = Object.assign({}, item); |
| 627 | this.editedItem.date = | 627 | this.editedItem.date = |
| 628 | this.editedItem.date != undefined | 628 | this.editedItem.date != undefined |
| 629 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 629 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 630 | : (this.editedItem.date = ""); | 630 | : (this.editedItem.date = ""); |
| 631 | 631 | ||
| 632 | this.editIncomeDialog = true; | 632 | this.editIncomeDialog = true; |
| 633 | }, | 633 | }, |
| 634 | profile(item) { | 634 | profile(item) { |
| 635 | this.editedIndex = this.incomeList.indexOf(item); | 635 | this.editedIndex = this.incomeList.indexOf(item); |
| 636 | this.editedItem = Object.assign({}, item); | 636 | this.editedItem = Object.assign({}, item); |
| 637 | this.profileIncomeDialog = true; | 637 | this.profileIncomeDialog = true; |
| 638 | }, | 638 | }, |
| 639 | deleteItem(item) { | 639 | deleteItem(item) { |
| 640 | let deleteIncome = { | 640 | let deleteIncome = { |
| 641 | incomeId: item._id, | 641 | incomeId: item._id, |
| 642 | }; | 642 | }; |
| 643 | http() | 643 | http() |
| 644 | .delete( | 644 | .delete( |
| 645 | "/deleteIncome", | 645 | "/deleteIncome", |
| 646 | confirm("Are you sure you want to delete this?") && { | 646 | confirm("Are you sure you want to delete this?") && { |
| 647 | params: deleteIncome, | 647 | params: deleteIncome, |
| 648 | } | 648 | } |
| 649 | ) | 649 | ) |
| 650 | .then((response) => { | 650 | .then((response) => { |
| 651 | // console.log("deleteUers",deleteTeachers) | 651 | // console.log("deleteUers",deleteTeachers) |
| 652 | if ((this.snackbar = true)) { | 652 | if ((this.snackbar = true)) { |
| 653 | this.text = "Successfully delete Existing Income"; | 653 | this.text = "Successfully delete Existing Income"; |
| 654 | } | 654 | } |
| 655 | this.getIncomeList(); | 655 | this.getIncomeList(); |
| 656 | }) | 656 | }) |
| 657 | .catch((error) => { | 657 | .catch((error) => { |
| 658 | // console.log(error); | 658 | // console.log(error); |
| 659 | }); | 659 | }); |
| 660 | }, | 660 | }, |
| 661 | close() { | 661 | close() { |
| 662 | this.editIncomeDialog = false; | 662 | this.editIncomeDialog = false; |
| 663 | }, | 663 | }, |
| 664 | close1() { | 664 | close1() { |
| 665 | this.dialog1 = false; | 665 | this.dialog1 = false; |
| 666 | }, | 666 | }, |
| 667 | closeAddIncomeModel() { | 667 | closeAddIncomeModel() { |
| 668 | this.addIncomeDialog = false; | 668 | this.addIncomeDialog = false; |
| 669 | this.addIncome = []; | 669 | this.addIncome = []; |
| 670 | this.menu1 = false; | 670 | this.menu1 = false; |
| 671 | this.imageName = ""; | 671 | this.imageName = ""; |
| 672 | this.imageUrl = ""; | 672 | this.imageUrl = ""; |
| 673 | this.imageFile = ""; | 673 | this.imageFile = ""; |
| 674 | }, | 674 | }, |
| 675 | submit() { | 675 | submit() { |
| 676 | if (this.$refs.form.validate()) { | 676 | if (this.$refs.form.validate()) { |
| 677 | if (this.imageUrl) { | 677 | if (this.imageUrl) { |
| 678 | var str = this.imageUrl; | 678 | var str = this.imageUrl; |
| 679 | const [baseUrl, imageUrl] = str.split(/,/); | 679 | const [baseUrl, imageUrl] = str.split(/,/); |
| 680 | this.addIncome.upload = imageUrl; | 680 | this.addIncome.upload = imageUrl; |
| 681 | } | 681 | } |
| 682 | this.loading = true; | 682 | this.loading = true; |
| 683 | // this.addIncome = this.$store.state.schoolId; | 683 | // this.addIncome = this.$store.state.schoolId; |
| 684 | http() | 684 | http() |
| 685 | .post("/createIncome", this.addIncome) | 685 | .post("/createIncome", this.addIncome) |
| 686 | .then((response) => { | 686 | .then((response) => { |
| 687 | this.getIncomeList(); | 687 | this.getIncomeList(); |
| 688 | this.snackbar = true; | 688 | this.snackbar = true; |
| 689 | this.text = response.data.message; | 689 | this.text = response.data.message; |
| 690 | this.color = "green"; | 690 | this.color = "green"; |
| 691 | this.addIncomeDialog = false; | 691 | this.addIncomeDialog = false; |
| 692 | this.clear(); | 692 | this.clear(); |
| 693 | this.loading = false; | 693 | this.loading = false; |
| 694 | }) | 694 | }) |
| 695 | .catch((error) => { | 695 | .catch((error) => { |
| 696 | // console.log(error); | 696 | // console.log(error); |
| 697 | this.loading = false; | 697 | this.loading = false; |
| 698 | this.snackbar = true; | 698 | this.snackbar = true; |
| 699 | this.color = "error"; | 699 | this.color = "error"; |
| 700 | this.text = error.response.data.message; | 700 | this.text = error.response.data.message; |
| 701 | }); | 701 | }); |
| 702 | } | 702 | } |
| 703 | }, | 703 | }, |
| 704 | clear() { | 704 | clear() { |
| 705 | this.$refs.form.reset(); | 705 | this.$refs.form.reset(); |
| 706 | }, | 706 | }, |
| 707 | save() { | 707 | save() { |
| 708 | this.loading = true; | 708 | this.loading = true; |
| 709 | this.editedItem.incomeId = this.editedItem._id; | 709 | this.editedItem.incomeId = this.editedItem._id; |
| 710 | if (this.imageUrl) { | 710 | if (this.imageUrl) { |
| 711 | var str = this.imageUrl; | 711 | var str = this.imageUrl; |
| 712 | const [baseUrl, imageUrl] = str.split(/,/); | 712 | const [baseUrl, imageUrl] = str.split(/,/); |
| 713 | this.editedItem.upload = imageUrl; | 713 | this.editedItem.upload = imageUrl; |
| 714 | } | 714 | } |
| 715 | http() | 715 | http() |
| 716 | .put("/updateIncome", this.editedItem) | 716 | .put("/updateIncome", this.editedItem) |
| 717 | .then((response) => { | 717 | .then((response) => { |
| 718 | this.snackbar = true; | 718 | this.snackbar = true; |
| 719 | this.text = response.data.message; | 719 | this.text = response.data.message; |
| 720 | this.color = "green"; | 720 | this.color = "green"; |
| 721 | this.loading = false; | 721 | this.loading = false; |
| 722 | this.getIncomeList(); | 722 | this.getIncomeList(); |
| 723 | this.close(); | 723 | this.close(); |
| 724 | }) | 724 | }) |
| 725 | .catch((error) => { | 725 | .catch((error) => { |
| 726 | this.loading = false; | 726 | this.loading = false; |
| 727 | this.snackbar = true; | 727 | this.snackbar = true; |
| 728 | this.color = "error"; | 728 | this.color = "error"; |
| 729 | this.loading = false; | 729 | this.loading = false; |
| 730 | }); | 730 | }); |
| 731 | }, | 731 | }, |
| 732 | 732 | ||
| 733 | displaySearch() { | 733 | displaySearch() { |
| 734 | (this.show = false), (this.showSearch = true); | 734 | (this.show = false), (this.showSearch = true); |
| 735 | }, | 735 | }, |
| 736 | closeSearch() { | 736 | closeSearch() { |
| 737 | this.showSearch = false; | 737 | this.showSearch = false; |
| 738 | this.show = true; | 738 | this.show = true; |
| 739 | this.search = ""; | 739 | this.search = ""; |
| 740 | }, | 740 | }, |
| 741 | }, | 741 | }, |
| 742 | mounted() { | 742 | mounted() { |
| 743 | this.getIncomeList(); | 743 | this.getIncomeList(); |
| 744 | }, | 744 | }, |
| 745 | }; | 745 | }; |
| 746 | </script> | 746 | </script> |
src/pages/Account/invoice.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit INVOICE ****** --> | 3 | <!-- ****** Edit INVOICE ****** --> |
| 4 | <v-dialog v-model="editInvoiceDialog" persistent> | 4 | <v-dialog v-model="editInvoiceDialog" persistent> |
| 5 | <v-card flat class="text-xs-center white--text"> | 5 | <v-card flat class="text-xs-center"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12 class="card-styles pa-2"> | 7 | <v-flex xs12 class="Card-style pa-2"> |
| 8 | <label class="title text-xs-center">Edit Invoice</label> | 8 | <label class="title text-xs-center">Edit Invoice</label> |
| 9 | <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editInvoiceDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> | 12 | <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> |
| 13 | </v-card> | 13 | </v-card> |
| 14 | </v-dialog> | 14 | </v-dialog> |
| 15 | 15 | ||
| 16 | <!-- ****PAYMENT INVOICE DIALOG --> | 16 | <!-- ****PAYMENT INVOICE DIALOG --> |
| 17 | <v-dialog v-model="paymentInvoiceDialog" persistent> | 17 | <v-dialog v-model="paymentInvoiceDialog" persistent> |
| 18 | <v-card flat class="text-xs-center white--text"> | 18 | <v-card flat class="text-xs-center"> |
| 19 | <v-layout> | 19 | <v-layout> |
| 20 | <v-flex xs12 class="card-styles pa-2"> | 20 | <v-flex xs12 class="Card-style pa-2"> |
| 21 | <label class="title text-xs-center">Payment Template</label> | 21 | <label class="title text-xs-center">Payment Template</label> |
| 22 | <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon> | 22 | <v-icon size="24" class="right" @click="paymentInvoiceDialog = false">cancel</v-icon> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> | 25 | <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> |
| 26 | </v-card> | 26 | </v-card> |
| 27 | </v-dialog> | 27 | </v-dialog> |
| 28 | 28 | ||
| 29 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> | 29 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> |
| 30 | 30 | ||
| 31 | <v-dialog v-model="dialog1" max-width="800px" persistent> | 31 | <v-dialog v-model="dialog1" max-width="800px" persistent> |
| 32 | <v-card flat class="text-xs-center white--text"> | 32 | <v-card flat class="text-xs-center"> |
| 33 | <v-layout> | 33 | <v-layout> |
| 34 | <v-flex xs12 class="card-style pa-2"> | 34 | <v-flex xs12 class="Card-style pa-2"> |
| 35 | <label class="title text-xs-center">View Payments</label> | 35 | <label class="title text-xs-center">View Payments</label> |
| 36 | <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon> | 36 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | <table class="feeTypeTable tableRsponsive"> | 39 | <table class="feeTypeTable tableRsponsive"> |
| 40 | <tr style="color: black"> | 40 | <tr style="color: black"> |
| 41 | <th>#</th> | 41 | <th>#</th> |
| 42 | <th>Date</th> | 42 | <th>Date</th> |
| 43 | <th>Paid By</th> | 43 | <th>Paid By</th> |
| 44 | <th>Payment Amount</th> | 44 | <th>Payment Amount</th> |
| 45 | <th>Weaver</th> | 45 | <th>Weaver</th> |
| 46 | <th>Action</th> | 46 | <th>Action</th> |
| 47 | </tr> | 47 | </tr> |
| 48 | <tr v-if="editedItem.paymentStatus != 'NOT_PAID'"> | 48 | <tr v-if="editedItem.paymentStatus != 'NOT_PAID'"> |
| 49 | <td style="width:40px ; color:black" class="tdFeeType">1</td> | 49 | <td style="width:40px ; color:black" class="tdFeeType">1</td> |
| 50 | <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> | 50 | <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> |
| 51 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> | 51 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> |
| 52 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> | 52 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> |
| 53 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> | 53 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> |
| 54 | <td class="text-xs-center td td-row"> | 54 | <td class="text-xs-center td td-row"> |
| 55 | <router-link | 55 | <router-link |
| 56 | :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" | 56 | :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" |
| 57 | > | 57 | > |
| 58 | <v-tooltip top> | 58 | <v-tooltip top> |
| 59 | <img | 59 | <img |
| 60 | slot="activator" | 60 | slot="activator" |
| 61 | style="cursor:pointer; width:25px; height:25px; " | 61 | style="cursor:pointer; width:25px; height:25px; " |
| 62 | class="mr-3" | 62 | class="mr-3" |
| 63 | src="/static/icon/view.png" | 63 | src="/static/icon/view.png" |
| 64 | /> | 64 | /> |
| 65 | <span>View</span> | 65 | <span>View</span> |
| 66 | </v-tooltip> | 66 | </v-tooltip> |
| 67 | </router-link> | 67 | </router-link> |
| 68 | <v-tooltip top> | 68 | <v-tooltip top> |
| 69 | <img | 69 | <img |
| 70 | slot="activator" | 70 | slot="activator" |
| 71 | style="cursor:pointer;width:20px; height:20px; " | 71 | style="cursor:pointer;width:20px; height:20px; " |
| 72 | class="mr-3" | 72 | class="mr-3" |
| 73 | @click="deletePayment(editedItem)" | 73 | @click="deletePayment(editedItem)" |
| 74 | src="/static/icon/delete.png" | 74 | src="/static/icon/delete.png" |
| 75 | /> | 75 | /> |
| 76 | <span>Delete</span> | 76 | <span>Delete</span> |
| 77 | </v-tooltip> | 77 | </v-tooltip> |
| 78 | </td> | 78 | </td> |
| 79 | </tr> | 79 | </tr> |
| 80 | <tr v-if="editedItem.paymentStatus == 'NOT_PAID'"> | 80 | <tr v-if="editedItem.paymentStatus == 'NOT_PAID'"> |
| 81 | <td style="width:40px ; color:black" class="tdFeeType'">-</td> | 81 | <td style="width:40px ; color:black" class="tdFeeType'">-</td> |
| 82 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 82 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 83 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 83 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 84 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 84 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 85 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 85 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 86 | <td class="text-xs-center td td-row"></td> | 86 | <td class="text-xs-center td td-row"></td> |
| 87 | </tr> | 87 | </tr> |
| 88 | </table> | 88 | </table> |
| 89 | </v-card> | 89 | </v-card> |
| 90 | </v-dialog> | 90 | </v-dialog> |
| 91 | 91 | ||
| 92 | <!-- ****** Invoice Table ****** --> | 92 | <!-- ****** Invoice Table ****** --> |
| 93 | <v-toolbar color="transparent" flat> | 93 | <v-toolbar color="transparent" flat> |
| 94 | <v-btn | 94 | <v-btn |
| 95 | fab | 95 | fab |
| 96 | dark | 96 | dark |
| 97 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 97 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 98 | small | 98 | small |
| 99 | @click="addInvoiceDialog = true" | 99 | @click="addInvoiceDialog = true" |
| 100 | > | 100 | > |
| 101 | <v-icon dark>add</v-icon> | 101 | <v-icon dark>add</v-icon> |
| 102 | </v-btn> | 102 | </v-btn> |
| 103 | <v-btn | 103 | <v-btn |
| 104 | round | 104 | round |
| 105 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 105 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 106 | dark | 106 | dark |
| 107 | @click="addInvoiceDialog = true" | 107 | @click="addInvoiceDialog = true" |
| 108 | > | 108 | > |
| 109 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice | 109 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice |
| 110 | </v-btn> | 110 | </v-btn> |
| 111 | <v-spacer></v-spacer> | 111 | <v-spacer></v-spacer> |
| 112 | <v-card-title class="body-1" v-show="show"> | 112 | <v-card-title class="body-1" v-show="show"> |
| 113 | <v-btn icon large flat @click="displaySearch"> | 113 | <v-btn icon large flat @click="displaySearch"> |
| 114 | <v-avatar size="27"> | 114 | <v-avatar size="27"> |
| 115 | <img src="/static/icon/search.png" alt="icon" /> | 115 | <img src="/static/icon/search.png" alt="icon" /> |
| 116 | </v-avatar> | 116 | </v-avatar> |
| 117 | </v-btn> | 117 | </v-btn> |
| 118 | </v-card-title> | 118 | </v-card-title> |
| 119 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 119 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 120 | <v-layout> | 120 | <v-layout> |
| 121 | <v-text-field | 121 | <v-text-field |
| 122 | autofocus | 122 | autofocus |
| 123 | v-model="search" | 123 | v-model="search" |
| 124 | label="Search" | 124 | label="Search" |
| 125 | prepend-inner-icon="search" | 125 | prepend-inner-icon="search" |
| 126 | color="primary" | 126 | color="primary" |
| 127 | ></v-text-field> | 127 | ></v-text-field> |
| 128 | <v-icon @click="closeSearch" color="error">close</v-icon> | 128 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-toolbar> | 131 | </v-toolbar> |
| 132 | <v-data-table | 132 | <v-data-table |
| 133 | :headers="headers" | 133 | :headers="headers" |
| 134 | :items="invoiceList" | 134 | :items="invoiceList" |
| 135 | :pagination.sync="pagination" | 135 | :pagination.sync="pagination" |
| 136 | :search="search" | 136 | :search="search" |
| 137 | > | 137 | > |
| 138 | <template slot="items" slot-scope="props"> | 138 | <template slot="items" slot-scope="props"> |
| 139 | <tr class="tr"> | 139 | <tr class="tr"> |
| 140 | <td class="td td-row">{{ props.index + 1 }}</td> | 140 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 141 | <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> | 141 | <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> |
| 142 | <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> | 142 | <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> |
| 143 | <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> | 143 | <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> |
| 144 | <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> | 144 | <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> |
| 145 | <td | 145 | <td |
| 146 | class="text-xs-center td td-row" | 146 | class="text-xs-center td td-row" |
| 147 | >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> | 147 | >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> |
| 148 | <td | 148 | <td |
| 149 | class="text-xs-center td td-row" | 149 | class="text-xs-center td td-row" |
| 150 | >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> | 150 | >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> |
| 151 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> | 151 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> |
| 152 | <span | 152 | <span |
| 153 | class="red lighten-1 py-1 px-2 white--text paymentStatus" | 153 | class="red lighten-1 py-1 px-2 white--text paymentStatus" |
| 154 | >{{ props.item.paymentStatus }}</span> | 154 | >{{ props.item.paymentStatus }}</span> |
| 155 | </td> | 155 | </td> |
| 156 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> | 156 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> |
| 157 | <span | 157 | <span |
| 158 | class="green lighten-1 py-1 px-2 white--text paymentStatus" | 158 | class="green lighten-1 py-1 px-2 white--text paymentStatus" |
| 159 | >{{ props.item.paymentStatus }}</span> | 159 | >{{ props.item.paymentStatus }}</span> |
| 160 | </td> | 160 | </td> |
| 161 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> | 161 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> |
| 162 | <span | 162 | <span |
| 163 | class="yellow darken-3 py-1 px-2 white--text paymentStatus" | 163 | class="yellow darken-3 py-1 px-2 white--text paymentStatus" |
| 164 | >{{ props.item.paymentStatus }}</span> | 164 | >{{ props.item.paymentStatus }}</span> |
| 165 | </td> | 165 | </td> |
| 166 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 166 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 167 | <td class="text-xs-center td td-row"> | 167 | <td class="text-xs-center td td-row"> |
| 168 | <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> | 168 | <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> |
| 169 | <v-tooltip top> | 169 | <v-tooltip top> |
| 170 | <img | 170 | <img |
| 171 | slot="activator" | 171 | slot="activator" |
| 172 | style="cursor:pointer; width:25px; height:25px; " | 172 | style="cursor:pointer; width:25px; height:25px; " |
| 173 | class="mr-3" | 173 | class="mr-3" |
| 174 | src="/static/icon/view.png" | 174 | src="/static/icon/view.png" |
| 175 | /> | 175 | /> |
| 176 | <span>View</span> | 176 | <span>View</span> |
| 177 | </v-tooltip> | 177 | </v-tooltip> |
| 178 | </router-link> | 178 | </router-link> |
| 179 | <span v-if="props.item.paymentStatus === 'NOT_PAID'"> | 179 | <span v-if="props.item.paymentStatus === 'NOT_PAID'"> |
| 180 | <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> | 180 | <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> |
| 181 | <v-tooltip top> | 181 | <v-tooltip top> |
| 182 | <img | 182 | <img |
| 183 | slot="activator" | 183 | slot="activator" |
| 184 | style="cursor:pointer; width:20px; height:18px; " | 184 | style="cursor:pointer; width:20px; height:18px; " |
| 185 | class="mr-3" | 185 | class="mr-3" |
| 186 | @click="editItem(props.item)" | 186 | @click="editItem(props.item)" |
| 187 | src="/static/icon/edit.png" | 187 | src="/static/icon/edit.png" |
| 188 | /> | 188 | /> |
| 189 | <span>Edit</span> | 189 | <span>Edit</span> |
| 190 | </v-tooltip> | 190 | </v-tooltip> |
| 191 | </router-link>--> | 191 | </router-link>--> |
| 192 | <v-tooltip top> | 192 | <v-tooltip top> |
| 193 | <img | 193 | <img |
| 194 | slot="activator" | 194 | slot="activator" |
| 195 | style="cursor:pointer; width:20px; height:18px; " | 195 | style="cursor:pointer; width:20px; height:18px; " |
| 196 | class="mr-3" | 196 | class="mr-3" |
| 197 | @click="editItem(props.item)" | 197 | @click="editItem(props.item)" |
| 198 | src="/static/icon/edit.png" | 198 | src="/static/icon/edit.png" |
| 199 | /> | 199 | /> |
| 200 | <span>Edit</span> | 200 | <span>Edit</span> |
| 201 | </v-tooltip> | 201 | </v-tooltip> |
| 202 | <v-tooltip top> | 202 | <v-tooltip top> |
| 203 | <img | 203 | <img |
| 204 | slot="activator" | 204 | slot="activator" |
| 205 | style="cursor:pointer;width:20px; height:20px; " | 205 | style="cursor:pointer;width:20px; height:20px; " |
| 206 | class="mr-3" | 206 | class="mr-3" |
| 207 | @click="deleteItem(props.item)" | 207 | @click="deleteItem(props.item)" |
| 208 | src="/static/icon/delete.png" | 208 | src="/static/icon/delete.png" |
| 209 | /> | 209 | /> |
| 210 | <span>Delete</span> | 210 | <span>Delete</span> |
| 211 | </v-tooltip> | 211 | </v-tooltip> |
| 212 | <v-tooltip top> | 212 | <v-tooltip top> |
| 213 | <img | 213 | <img |
| 214 | slot="activator" | 214 | slot="activator" |
| 215 | style="cursor:pointer; width:20px; height:18px; " | 215 | style="cursor:pointer; width:20px; height:18px; " |
| 216 | class="mr-3" | 216 | class="mr-3" |
| 217 | @click="paymentItem(props.item)" | 217 | @click="paymentItem(props.item)" |
| 218 | src="/static/schoolIcons/Account.png" | 218 | src="/static/schoolIcons/Account.png" |
| 219 | /> | 219 | /> |
| 220 | <span>Payment</span> | 220 | <span>Payment</span> |
| 221 | </v-tooltip> | 221 | </v-tooltip> |
| 222 | </span> | 222 | </span> |
| 223 | <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> | 223 | <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> |
| 224 | <v-tooltip top> | 224 | <v-tooltip top> |
| 225 | <img | 225 | <img |
| 226 | slot="activator" | 226 | slot="activator" |
| 227 | style="cursor:pointer; width:20px; height:18px; " | 227 | style="cursor:pointer; width:20px; height:18px; " |
| 228 | class="mr-3" | 228 | class="mr-3" |
| 229 | @click="paymentItem(props.item)" | 229 | @click="paymentItem(props.item)" |
| 230 | src="/static/schoolIcons/Account.png" | 230 | src="/static/schoolIcons/Account.png" |
| 231 | /> | 231 | /> |
| 232 | <span>Payment</span> | 232 | <span>Payment</span> |
| 233 | </v-tooltip> | 233 | </v-tooltip> |
| 234 | </span> | 234 | </span> |
| 235 | <v-tooltip top> | 235 | <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:18px; height:17px;" | 238 | style="cursor:pointer; width:18px; height:17px;" |
| 239 | @click="profile(props.item)" | 239 | @click="profile(props.item)" |
| 240 | src="/static/icon/eye1.png" | 240 | src="/static/icon/eye1.png" |
| 241 | /> | 241 | /> |
| 242 | <span>View Payment</span> | 242 | <span>View Payment</span> |
| 243 | </v-tooltip> | 243 | </v-tooltip> |
| 244 | </td> | 244 | </td> |
| 245 | </tr> | 245 | </tr> |
| 246 | </template> | 246 | </template> |
| 247 | <v-alert | 247 | <v-alert |
| 248 | slot="no-results" | 248 | slot="no-results" |
| 249 | :value="true" | 249 | :value="true" |
| 250 | color="error" | 250 | color="error" |
| 251 | icon="warning" | 251 | icon="warning" |
| 252 | >Your search for "{{ search }}" found no results.</v-alert> | 252 | >Your search for "{{ search }}" found no results.</v-alert> |
| 253 | </v-data-table> | 253 | </v-data-table> |
| 254 | 254 | ||
| 255 | <!-- ****** ADD INVOICE ****** --> | 255 | <!-- ****** ADD INVOICE ****** --> |
| 256 | <v-snackbar | 256 | <v-snackbar |
| 257 | :timeout="timeout" | 257 | :timeout="timeout" |
| 258 | :top="y === 'top'" | 258 | :top="y === 'top'" |
| 259 | :right="x === 'right'" | 259 | :right="x === 'right'" |
| 260 | :vertical="mode === 'vertical'" | 260 | :vertical="mode === 'vertical'" |
| 261 | v-model="snackbar" | 261 | v-model="snackbar" |
| 262 | :color="color" | 262 | :color="color" |
| 263 | >{{ text }}</v-snackbar> | 263 | >{{ text }}</v-snackbar> |
| 264 | <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog" persistent> | 264 | <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog" persistent> |
| 265 | <v-card flat class="text-xs-center white--text"> | 265 | <v-card flat class="text-xs-center"> |
| 266 | <v-layout> | 266 | <v-layout> |
| 267 | <v-flex xs12 class="card-styles pa-2"> | 267 | <v-flex xs12 class="Card-style pa-2"> |
| 268 | <label class="title text-xs-center">Add Invoice</label> | 268 | <label class="title text-xs-center">Add Invoice</label> |
| 269 | <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon> | 269 | <v-icon size="24" class="right" @click="closeAddInvoiceModel">cancel</v-icon> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | </v-layout> | 271 | </v-layout> |
| 272 | <v-flex xs12 sm12> | 272 | <v-flex xs12 sm12> |
| 273 | <v-container fluid grid-list-md> | 273 | <v-container fluid grid-list-md> |
| 274 | <v-layout wrap> | 274 | <v-layout wrap> |
| 275 | <v-flex xs12 sm12 md5> | 275 | <v-flex xs12 sm12 md5> |
| 276 | <v-card flat> | 276 | <v-card flat> |
| 277 | <v-toolbar dark class="card-styles" flat> | 277 | <v-toolbar dark class="card-styles" flat> |
| 278 | <v-spacer></v-spacer> | 278 | <v-spacer></v-spacer> |
| 279 | <h3>Invoice</h3> | 279 | <h3>Invoice</h3> |
| 280 | <v-spacer></v-spacer> | 280 | <v-spacer></v-spacer> |
| 281 | </v-toolbar> | 281 | </v-toolbar> |
| 282 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 282 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 283 | <v-layout> | 283 | <v-layout> |
| 284 | <v-flex xs4 class="pt-4 subheading"> | 284 | <v-flex xs4 class="pt-4 subheading"> |
| 285 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 285 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 286 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 286 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 287 | </v-flex> | 287 | </v-flex> |
| 288 | <v-flex xs6 class="ml-3"> | 288 | <v-flex xs6 class="ml-3"> |
| 289 | <v-select | 289 | <v-select |
| 290 | :items="addclass" | 290 | :items="addclass" |
| 291 | label="Select Class" | 291 | label="Select Class" |
| 292 | v-model="invoiceData.classNum" | 292 | v-model="invoiceData.classNum" |
| 293 | item-text="classNum" | 293 | item-text="classNum" |
| 294 | item-value="_id" | 294 | item-value="_id" |
| 295 | @change="getAllStudents()" | 295 | @change="getAllStudents()" |
| 296 | :rules="classRules" | 296 | :rules="classRules" |
| 297 | required | 297 | required |
| 298 | ></v-select> | 298 | ></v-select> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | </v-layout> | 300 | </v-layout> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-flex xs4 class="pt-4 subheading"> | 302 | <v-flex xs4 class="pt-4 subheading"> |
| 303 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> | 303 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> |
| 304 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> | 304 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | <v-flex xs6 class="ml-3"> | 306 | <v-flex xs6 class="ml-3"> |
| 307 | <v-select | 307 | <v-select |
| 308 | :items="studentList" | 308 | :items="studentList" |
| 309 | label="Select Student" | 309 | label="Select Student" |
| 310 | v-model="invoiceData.studentId" | 310 | v-model="invoiceData.studentId" |
| 311 | item-text="name" | 311 | item-text="name" |
| 312 | item-value="_id" | 312 | item-value="_id" |
| 313 | :rules="inchargeRules" | 313 | :rules="inchargeRules" |
| 314 | @change="selectAllStudent()" | 314 | @change="selectAllStudent()" |
| 315 | required | 315 | required |
| 316 | ></v-select> | 316 | ></v-select> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | </v-layout> | 318 | </v-layout> |
| 319 | <v-layout> | 319 | <v-layout> |
| 320 | <v-flex xs4 class="pt-4 subheading"> | 320 | <v-flex xs4 class="pt-4 subheading"> |
| 321 | <label class="right">Date:</label> | 321 | <label class="right">Date:</label> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | <v-flex xs6 class="ml-3"> | 323 | <v-flex xs6 class="ml-3"> |
| 324 | <v-menu | 324 | <v-menu |
| 325 | ref="menu1" | 325 | ref="menu1" |
| 326 | :close-on-content-click="false" | 326 | :close-on-content-click="false" |
| 327 | v-model="menu1" | 327 | v-model="menu1" |
| 328 | :nudge-right="40" | 328 | :nudge-right="40" |
| 329 | lazy | 329 | lazy |
| 330 | :return-value.sync="invoiceData.date" | 330 | :return-value.sync="invoiceData.date" |
| 331 | transition="scale-transition" | 331 | transition="scale-transition" |
| 332 | offset-y | 332 | offset-y |
| 333 | full-width | 333 | full-width |
| 334 | min-width="290px" | 334 | min-width="290px" |
| 335 | > | 335 | > |
| 336 | <v-text-field | 336 | <v-text-field |
| 337 | slot="activator" | 337 | slot="activator" |
| 338 | :rules="dateRules" | 338 | :rules="dateRules" |
| 339 | v-model="invoiceData.date" | 339 | v-model="invoiceData.date" |
| 340 | placeholder="Select date" | 340 | placeholder="Select date" |
| 341 | ></v-text-field> | 341 | ></v-text-field> |
| 342 | <v-date-picker | 342 | <v-date-picker |
| 343 | v-model="invoiceData.date" | 343 | v-model="invoiceData.date" |
| 344 | @input="$refs.menu1.save(invoiceData.date)" | 344 | @input="$refs.menu1.save(invoiceData.date)" |
| 345 | ></v-date-picker> | 345 | ></v-date-picker> |
| 346 | </v-menu> | 346 | </v-menu> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs4 class="pt-4 subheading"> | 350 | <v-flex xs4 class="pt-4 subheading"> |
| 351 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> | 351 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> |
| 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> | 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | <v-flex xs6 class="ml-3"> | 354 | <v-flex xs6 class="ml-3"> |
| 355 | <v-select | 355 | <v-select |
| 356 | :items="paymentStatus" | 356 | :items="paymentStatus" |
| 357 | v-model="invoiceData.paymentStatus" | 357 | v-model="invoiceData.paymentStatus" |
| 358 | item-text="name" | 358 | item-text="name" |
| 359 | item-value="value" | 359 | item-value="value" |
| 360 | label="Select Payment Status" | 360 | label="Select Payment Status" |
| 361 | @change="getPayMethodList" | 361 | @change="getPayMethodList" |
| 362 | :rules="paymentStatusRules" | 362 | :rules="paymentStatusRules" |
| 363 | required | 363 | required |
| 364 | ></v-select> | 364 | ></v-select> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | </v-layout> | 366 | </v-layout> |
| 367 | <v-layout v-show="showPayMethods"> | 367 | <v-layout v-show="showPayMethods"> |
| 368 | <v-flex xs4 class="pt-4 subheading"> | 368 | <v-flex xs4 class="pt-4 subheading"> |
| 369 | <label class="right">Payment Method:</label> | 369 | <label class="right">Payment Method:</label> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | <v-flex xs6 class="ml-3"> | 371 | <v-flex xs6 class="ml-3"> |
| 372 | <v-select | 372 | <v-select |
| 373 | :items="paymentMethods" | 373 | :items="paymentMethods" |
| 374 | v-model="invoiceData.paymentMethod" | 374 | v-model="invoiceData.paymentMethod" |
| 375 | :rules="paymentMethodRules" | 375 | :rules="paymentMethodRules" |
| 376 | label="Select Payment Method" | 376 | label="Select Payment Method" |
| 377 | required | 377 | required |
| 378 | ></v-select> | 378 | ></v-select> |
| 379 | </v-flex> | 379 | </v-flex> |
| 380 | </v-layout> | 380 | </v-layout> |
| 381 | <v-layout> | 381 | <v-layout> |
| 382 | <v-flex xs12 sm11> | 382 | <v-flex xs12 sm11> |
| 383 | <v-card-actions> | 383 | <v-card-actions> |
| 384 | <v-spacer></v-spacer> | 384 | <v-spacer></v-spacer> |
| 385 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 385 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 386 | <v-btn | 386 | <v-btn |
| 387 | @click="submit" | 387 | @click="submit" |
| 388 | round | 388 | round |
| 389 | dark | 389 | dark |
| 390 | :loading="loading" | 390 | :loading="loading" |
| 391 | class="add-button" | 391 | class="add-button" |
| 392 | >Add</v-btn> | 392 | >Add</v-btn> |
| 393 | </v-card-actions> | 393 | </v-card-actions> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | </v-layout> | 395 | </v-layout> |
| 396 | </v-form> | 396 | </v-form> |
| 397 | </v-card> | 397 | </v-card> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex xs12 sm12 md7> | 399 | <v-flex xs12 sm12 md7> |
| 400 | <v-card> | 400 | <v-card> |
| 401 | <v-toolbar dark class="card-styles" flat> | 401 | <v-toolbar dark class="card-styles" flat> |
| 402 | <v-spacer></v-spacer> | 402 | <v-spacer></v-spacer> |
| 403 | <h3>Fee Type List</h3> | 403 | <h3>Fee Type List</h3> |
| 404 | <v-spacer></v-spacer> | 404 | <v-spacer></v-spacer> |
| 405 | </v-toolbar> | 405 | </v-toolbar> |
| 406 | <v-layout> | 406 | <v-layout> |
| 407 | <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> | 407 | <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 408 | <label class="right title">Fee Type:</label> | 408 | <label class="right title">Fee Type:</label> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs8 sm4> | 410 | <v-flex xs8 sm4> |
| 411 | <v-select | 411 | <v-select |
| 412 | :items="feeTypes" | 412 | :items="feeTypes" |
| 413 | v-model="feeType.feeTypeName" | 413 | v-model="feeType.feeTypeName" |
| 414 | item-text="feeType" | 414 | item-text="feeType" |
| 415 | item-value="feeType" | 415 | item-value="feeType" |
| 416 | label="Select Fee Type" | 416 | label="Select Fee Type" |
| 417 | required | 417 | required |
| 418 | ></v-select> | 418 | ></v-select> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-flex xs4 sm6> | 420 | <v-flex xs4 sm6> |
| 421 | <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn> | 421 | <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | </v-layout> | 423 | </v-layout> |
| 424 | <table class="feeTypeTable tableRsponsive"> | 424 | <table class="feeTypeTable tableRsponsive"> |
| 425 | <tr class="info white--text"> | 425 | <tr class="info white--text"> |
| 426 | <th>#</th> | 426 | <th>#</th> |
| 427 | <th>Fee Type</th> | 427 | <th>Fee Type</th> |
| 428 | <th>Amount</th> | 428 | <th>Amount</th> |
| 429 | <th>Discount</th> | 429 | <th>Discount</th> |
| 430 | <th>Subtotal</th> | 430 | <th>Subtotal</th> |
| 431 | <th>Paid Amount</th> | 431 | <th>Paid Amount</th> |
| 432 | <th>Action</th> | 432 | <th>Action</th> |
| 433 | </tr> | 433 | </tr> |
| 434 | <tr | 434 | <tr |
| 435 | v-show="showFeeType" | 435 | v-show="showFeeType" |
| 436 | v-for="(feeType, index) in feeTypeData" | 436 | v-for="(feeType, index) in feeTypeData" |
| 437 | :key="index" | 437 | :key="index" |
| 438 | v-on:keyup="getAmmountDetails(feeType)" | 438 | v-on:keyup="getAmmountDetails(feeType)" |
| 439 | > | 439 | > |
| 440 | <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> | 440 | <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> |
| 441 | <td | 441 | <td |
| 442 | style="width:120px" | 442 | style="width:120px" |
| 443 | class="tdFeeType" | 443 | class="tdFeeType" |
| 444 | :rules="feeTypeNameRules" | 444 | :rules="feeTypeNameRules" |
| 445 | >{{ feeType.feeTypeName }}</td> | 445 | >{{ feeType.feeTypeName }}</td> |
| 446 | <td class="tdFeeType"> | 446 | <td class="tdFeeType"> |
| 447 | <v-text-field | 447 | <v-text-field |
| 448 | placeholder="fill your Amount" | 448 | placeholder="fill your Amount" |
| 449 | v-model="feeType.amount" | 449 | v-model="feeType.amount" |
| 450 | type="number" | 450 | type="number" |
| 451 | :rules="amountRules" | 451 | :rules="amountRules" |
| 452 | required | 452 | required |
| 453 | ></v-text-field> | 453 | ></v-text-field> |
| 454 | </td> | 454 | </td> |
| 455 | <td class="tdFeeType"> | 455 | <td class="tdFeeType"> |
| 456 | <v-text-field | 456 | <v-text-field |
| 457 | placeholder="fill your Discount" | 457 | placeholder="fill your Discount" |
| 458 | v-model="feeType.discount" | 458 | v-model="feeType.discount" |
| 459 | type="number" | 459 | type="number" |
| 460 | :rules="discountRules" | 460 | :rules="discountRules" |
| 461 | required | 461 | required |
| 462 | ></v-text-field> | 462 | ></v-text-field> |
| 463 | </td> | 463 | </td> |
| 464 | <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> | 464 | <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> |
| 465 | <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> | 465 | <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> |
| 466 | <v-text-field | 466 | <v-text-field |
| 467 | placeholder="fill your Paid Amount" | 467 | placeholder="fill your Paid Amount" |
| 468 | v-model="feeType.paidAmount" | 468 | v-model="feeType.paidAmount" |
| 469 | type="number" | 469 | type="number" |
| 470 | :disabled="disabled" | 470 | :disabled="disabled" |
| 471 | ></v-text-field> | 471 | ></v-text-field> |
| 472 | </td> | 472 | </td> |
| 473 | <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> | 473 | <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> |
| 474 | <v-text-field | 474 | <v-text-field |
| 475 | placeholder="fill your Paid Amount" | 475 | placeholder="fill your Paid Amount" |
| 476 | v-model="feeType.paidAmount" | 476 | v-model="feeType.paidAmount" |
| 477 | type="number" | 477 | type="number" |
| 478 | :disabled="disabled" | 478 | :disabled="disabled" |
| 479 | ></v-text-field> | 479 | ></v-text-field> |
| 480 | </td> | 480 | </td> |
| 481 | <td | 481 | <td |
| 482 | class="tdFeeType" | 482 | class="tdFeeType" |
| 483 | v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" | 483 | v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" |
| 484 | > | 484 | > |
| 485 | <v-text-field | 485 | <v-text-field |
| 486 | placeholder="fill your Paid Amount" | 486 | placeholder="fill your Paid Amount" |
| 487 | v-model="feeType.paidAmount" | 487 | v-model="feeType.paidAmount" |
| 488 | type="number" | 488 | type="number" |
| 489 | ></v-text-field> | 489 | ></v-text-field> |
| 490 | </td> | 490 | </td> |
| 491 | <td class="tdFeeType"> | 491 | <td class="tdFeeType"> |
| 492 | <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon> | 492 | <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon> |
| 493 | </td> | 493 | </td> |
| 494 | </tr> | 494 | </tr> |
| 495 | <tfoot> | 495 | <tfoot> |
| 496 | <tr> | 496 | <tr> |
| 497 | <td colspan="2" class="tdFeeType">Total:</td> | 497 | <td colspan="2" class="tdFeeType">Total:</td> |
| 498 | <td class="tdFeeType">{{ feeType.amount }}</td> | 498 | <td class="tdFeeType">{{ feeType.amount }}</td> |
| 499 | <td class="tdFeeType">{{ feeType.discount }}</td> | 499 | <td class="tdFeeType">{{ feeType.discount }}</td> |
| 500 | <td class="tdFeeType">{{ feeType.subTotal }}</td> | 500 | <td class="tdFeeType">{{ feeType.subTotal }}</td> |
| 501 | <td class="tdFeeType">{{ feeType.paidAmount }}</td> | 501 | <td class="tdFeeType">{{ feeType.paidAmount }}</td> |
| 502 | <!-- <td class="tdFeeType"> | 502 | <!-- <td class="tdFeeType"> |
| 503 | <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> | 503 | <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> |
| 504 | </td>--> | 504 | </td>--> |
| 505 | </tr> | 505 | </tr> |
| 506 | </tfoot> | 506 | </tfoot> |
| 507 | </table> | 507 | </table> |
| 508 | </v-card> | 508 | </v-card> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | </v-layout> | 510 | </v-layout> |
| 511 | </v-container> | 511 | </v-container> |
| 512 | </v-flex> | 512 | </v-flex> |
| 513 | </v-card> | 513 | </v-card> |
| 514 | </v-dialog> | 514 | </v-dialog> |
| 515 | <div class="loader" v-if="showLoader"> | 515 | <div class="loader" v-if="showLoader"> |
| 516 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 516 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 517 | </div> | 517 | </div> |
| 518 | </v-container> | 518 | </v-container> |
| 519 | </template> | 519 | </template> |
| 520 | 520 | ||
| 521 | <script> | 521 | <script> |
| 522 | import http from "@/Services/http.js"; | 522 | import http from "@/Services/http.js"; |
| 523 | import editInvoice from "./editInvoice"; | 523 | import editInvoice from "./editInvoice"; |
| 524 | import paymentTemplate from "./paymentTemplate.vue"; | 524 | import paymentTemplate from "./paymentTemplate.vue"; |
| 525 | import moment from "moment"; | 525 | import moment from "moment"; |
| 526 | 526 | ||
| 527 | export default { | 527 | export default { |
| 528 | components: { | 528 | components: { |
| 529 | editInvoice: editInvoice, | 529 | editInvoice: editInvoice, |
| 530 | paymentTemplate: paymentTemplate, | 530 | paymentTemplate: paymentTemplate, |
| 531 | }, | 531 | }, |
| 532 | data: () => ({ | 532 | data: () => ({ |
| 533 | snackbar: false, | 533 | snackbar: false, |
| 534 | showPayMethods: false, | 534 | showPayMethods: false, |
| 535 | y: "top", | 535 | y: "top", |
| 536 | x: "right", | 536 | x: "right", |
| 537 | mode: "", | 537 | mode: "", |
| 538 | timeout: 5000, | 538 | timeout: 5000, |
| 539 | text: "", | 539 | text: "", |
| 540 | color: "", | 540 | color: "", |
| 541 | show: true, | 541 | show: true, |
| 542 | showSearch: false, | 542 | showSearch: false, |
| 543 | showLoader: false, | 543 | showLoader: false, |
| 544 | loading: false, | 544 | loading: false, |
| 545 | date: null, | 545 | date: null, |
| 546 | search: "", | 546 | search: "", |
| 547 | dialog: false, | 547 | dialog: false, |
| 548 | dialog1: false, | 548 | dialog1: false, |
| 549 | valid: true, | 549 | valid: true, |
| 550 | validEdit: true, | 550 | validEdit: true, |
| 551 | isActive: true, | 551 | isActive: true, |
| 552 | newActive: false, | 552 | newActive: false, |
| 553 | showFeeType: true, | 553 | showFeeType: true, |
| 554 | addInvoiceDialog: false, | 554 | addInvoiceDialog: false, |
| 555 | editInvoiceDialog: false, | 555 | editInvoiceDialog: false, |
| 556 | paymentInvoiceDialog: false, | 556 | paymentInvoiceDialog: false, |
| 557 | disabled: true, | 557 | disabled: true, |
| 558 | details: [], | 558 | details: [], |
| 559 | feeTypes: [], | 559 | feeTypes: [], |
| 560 | invoiceData: [], | 560 | invoiceData: [], |
| 561 | editData: [], | 561 | editData: [], |
| 562 | invoiceList: [], | 562 | invoiceList: [], |
| 563 | editPayment: { | 563 | editPayment: { |
| 564 | studentId: { | 564 | studentId: { |
| 565 | name: "", | 565 | name: "", |
| 566 | rollNo: "", | 566 | rollNo: "", |
| 567 | }, | 567 | }, |
| 568 | classId: { | 568 | classId: { |
| 569 | classNum: "", | 569 | classNum: "", |
| 570 | }, | 570 | }, |
| 571 | }, | 571 | }, |
| 572 | menu1: false, | 572 | menu1: false, |
| 573 | paymentMethods: ["Cash", "Cheque"], | 573 | paymentMethods: ["Cash", "Cheque"], |
| 574 | feeType: { | 574 | feeType: { |
| 575 | amount: "0.00", | 575 | amount: "0.00", |
| 576 | discount: "0.00", | 576 | discount: "0.00", |
| 577 | subTotal: "0.00", | 577 | subTotal: "0.00", |
| 578 | paidAmount: "0.00", | 578 | paidAmount: "0.00", |
| 579 | feeTypeName: "", | 579 | feeTypeName: "", |
| 580 | }, | 580 | }, |
| 581 | 581 | ||
| 582 | feeTypeData: [], | 582 | feeTypeData: [], |
| 583 | editFeeTypeData: [], | 583 | editFeeTypeData: [], |
| 584 | paymentFeeTypeData: [], | 584 | paymentFeeTypeData: [], |
| 585 | pagination: { | 585 | pagination: { |
| 586 | rowsPerPage: 10, | 586 | rowsPerPage: 10, |
| 587 | }, | 587 | }, |
| 588 | classRules: [(v) => !!v || " Class Name is required"], | 588 | classRules: [(v) => !!v || " Class Name is required"], |
| 589 | inchargeRules: [(v) => !!v || "Student Name is required"], | 589 | inchargeRules: [(v) => !!v || "Student Name is required"], |
| 590 | dateRules: [(v) => !!v || " Date is required"], | 590 | dateRules: [(v) => !!v || " Date is required"], |
| 591 | paymentStatusRules: [(v) => !!v || "Payment Status is required"], | 591 | paymentStatusRules: [(v) => !!v || "Payment Status is required"], |
| 592 | paymentMethodsRules: [(v) => !!v || "payment Method is required"], | 592 | paymentMethodsRules: [(v) => !!v || "payment Method is required"], |
| 593 | feeTypeRules: [(v) => !!v || "Fee Type is required"], | 593 | feeTypeRules: [(v) => !!v || "Fee Type is required"], |
| 594 | feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"], | 594 | feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"], |
| 595 | amountRules: [(v) => !!v || "Amount is required"], | 595 | amountRules: [(v) => !!v || "Amount is required"], |
| 596 | discountRules: [(v) => !!v || "Discount is required"], | 596 | discountRules: [(v) => !!v || "Discount is required"], |
| 597 | subtotalRules: [(v) => !!v || "Subtotal is required"], | 597 | subtotalRules: [(v) => !!v || "Subtotal is required"], |
| 598 | paymentRules: [(v) => !!v || "Payment is required"], | 598 | paymentRules: [(v) => !!v || "Payment is required"], |
| 599 | paidAmountRules: [(v) => !!v || "Paid Amount is required"], | 599 | paidAmountRules: [(v) => !!v || "Paid Amount is required"], |
| 600 | paymentMethodRules: [], | 600 | paymentMethodRules: [], |
| 601 | headers: [ | 601 | headers: [ |
| 602 | { | 602 | { |
| 603 | text: "No", | 603 | text: "No", |
| 604 | align: "", | 604 | align: "", |
| 605 | sortable: false, | 605 | sortable: false, |
| 606 | value: "No", | 606 | value: "No", |
| 607 | }, | 607 | }, |
| 608 | { | 608 | { |
| 609 | text: "Student", | 609 | text: "Student", |
| 610 | value: "name", | 610 | value: "name", |
| 611 | sortable: false, | 611 | sortable: false, |
| 612 | align: "center", | 612 | align: "center", |
| 613 | }, | 613 | }, |
| 614 | { text: "Class", value: "class", sortable: false, align: "center" }, | 614 | { text: "Class", value: "class", sortable: false, align: "center" }, |
| 615 | { text: "Total", value: "subtotal", sortable: false, align: "center" }, | 615 | { text: "Total", value: "subtotal", sortable: false, align: "center" }, |
| 616 | { | 616 | { |
| 617 | text: "Discount", | 617 | text: "Discount", |
| 618 | value: "discount", | 618 | value: "discount", |
| 619 | sortable: false, | 619 | sortable: false, |
| 620 | align: "center", | 620 | align: "center", |
| 621 | }, | 621 | }, |
| 622 | { | 622 | { |
| 623 | text: "Paid Amount", | 623 | text: "Paid Amount", |
| 624 | value: "paidAmount", | 624 | value: "paidAmount", |
| 625 | sortable: false, | 625 | sortable: false, |
| 626 | align: "center", | 626 | align: "center", |
| 627 | }, | 627 | }, |
| 628 | { | 628 | { |
| 629 | text: "Balance", | 629 | text: "Balance", |
| 630 | value: "Balance", | 630 | value: "Balance", |
| 631 | sortable: false, | 631 | sortable: false, |
| 632 | align: "center", | 632 | align: "center", |
| 633 | }, | 633 | }, |
| 634 | { | 634 | { |
| 635 | text: "Status", | 635 | text: "Status", |
| 636 | value: "paymentStatus", | 636 | value: "paymentStatus", |
| 637 | sortable: false, | 637 | sortable: false, |
| 638 | align: "center", | 638 | align: "center", |
| 639 | }, | 639 | }, |
| 640 | { | 640 | { |
| 641 | text: "Date", | 641 | text: "Date", |
| 642 | value: "date", | 642 | value: "date", |
| 643 | sortable: false, | 643 | sortable: false, |
| 644 | align: "center", | 644 | align: "center", |
| 645 | }, | 645 | }, |
| 646 | { text: "Action", value: "", sortable: false, align: "center" }, | 646 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 647 | ], | 647 | ], |
| 648 | 648 | ||
| 649 | studentId: { | 649 | studentId: { |
| 650 | name: "", | 650 | name: "", |
| 651 | }, | 651 | }, |
| 652 | token: "", | 652 | token: "", |
| 653 | editedItem: {}, | 653 | editedItem: {}, |
| 654 | invoiceData: { | 654 | invoiceData: { |
| 655 | paymentStatus: "", | 655 | paymentStatus: "", |
| 656 | students: [], | 656 | students: [], |
| 657 | }, | 657 | }, |
| 658 | addclass: [], | 658 | addclass: [], |
| 659 | studentList: [], | 659 | studentList: [], |
| 660 | paymentStatus: [ | 660 | paymentStatus: [ |
| 661 | { | 661 | { |
| 662 | name: "Not Paid", | 662 | name: "Not Paid", |
| 663 | value: "NOT_PAID", | 663 | value: "NOT_PAID", |
| 664 | }, | 664 | }, |
| 665 | { | 665 | { |
| 666 | name: "Partially Paid", | 666 | name: "Partially Paid", |
| 667 | value: "PARTIALLY_PAID", | 667 | value: "PARTIALLY_PAID", |
| 668 | }, | 668 | }, |
| 669 | { | 669 | { |
| 670 | name: "Fully Paid", | 670 | name: "Fully Paid", |
| 671 | value: "FULLY_PAID", | 671 | value: "FULLY_PAID", |
| 672 | }, | 672 | }, |
| 673 | ], | 673 | ], |
| 674 | }), | 674 | }), |
| 675 | watch: { | 675 | watch: { |
| 676 | addInvoiceDialog: function (val) { | 676 | addInvoiceDialog: function (val) { |
| 677 | if (!val) { | 677 | if (!val) { |
| 678 | this.invoiceData = []; | 678 | this.invoiceData = []; |
| 679 | this.menu1 = false; | 679 | this.menu1 = false; |
| 680 | this.feeType = []; | 680 | this.feeType = []; |
| 681 | this.feeTypeData = []; | 681 | this.feeTypeData = []; |
| 682 | } | 682 | } |
| 683 | }, | 683 | }, |
| 684 | }, | 684 | }, |
| 685 | methods: { | 685 | methods: { |
| 686 | save(date) { | 686 | save(date) { |
| 687 | this.$refs.menu1.save(date); | 687 | this.$refs.menu1.save(date); |
| 688 | }, | 688 | }, |
| 689 | dates: function (date) { | 689 | dates: function (date) { |
| 690 | return moment(date).format("MMMM DD, YYYY"); | 690 | return moment(date).format("MMMM DD, YYYY"); |
| 691 | }, | 691 | }, |
| 692 | profile(item) { | 692 | profile(item) { |
| 693 | // console.log("item", item); | 693 | // console.log("item", item); |
| 694 | this.editedIndex = this.invoiceList.indexOf(item); | 694 | this.editedIndex = this.invoiceList.indexOf(item); |
| 695 | this.editedItem = Object.assign({}, item); | 695 | this.editedItem = Object.assign({}, item); |
| 696 | this.dialog1 = true; | 696 | this.dialog1 = true; |
| 697 | }, | 697 | }, |
| 698 | editItem(item) { | 698 | editItem(item) { |
| 699 | this.editedIndex = this.invoiceList.indexOf(item); | 699 | this.editedIndex = this.invoiceList.indexOf(item); |
| 700 | this.editData = Object.assign({}, item); | 700 | this.editData = Object.assign({}, item); |
| 701 | this.editData.date = this.editData.date.slice(0, 10); | 701 | this.editData.date = this.editData.date.slice(0, 10); |
| 702 | // console.log("invoiceData", this.editData); | 702 | // console.log("invoiceData", this.editData); |
| 703 | this.editFeeTypeData = this.editData.feeType; | 703 | this.editFeeTypeData = this.editData.feeType; |
| 704 | this.editInvoiceDialog = true; | 704 | this.editInvoiceDialog = true; |
| 705 | }, | 705 | }, |
| 706 | paymentItem(item) { | 706 | paymentItem(item) { |
| 707 | // console.log("item", item); | 707 | // console.log("item", item); |
| 708 | this.editedIndex = this.invoiceList.indexOf(item); | 708 | this.editedIndex = this.invoiceList.indexOf(item); |
| 709 | this.editPayment = Object.assign({}, item); | 709 | this.editPayment = Object.assign({}, item); |
| 710 | this.editPayment.date = this.editPayment.date.slice(0, 10); | 710 | this.editPayment.date = this.editPayment.date.slice(0, 10); |
| 711 | if (this.editPayment.paymentStatus == "NOT_PAID") { | 711 | if (this.editPayment.paymentStatus == "NOT_PAID") { |
| 712 | for (let i = 0; i < this.editPayment.feeType.length; i++) { | 712 | for (let i = 0; i < this.editPayment.feeType.length; i++) { |
| 713 | this.editPayment.feeType[i].paidAmount = "0.00"; | 713 | this.editPayment.feeType[i].paidAmount = "0.00"; |
| 714 | } | 714 | } |
| 715 | } | 715 | } |
| 716 | // console.log("this.editPayment", this.editPayment); | 716 | // console.log("this.editPayment", this.editPayment); |
| 717 | this.paymentFeeTypeData = this.editPayment.feeType; | 717 | this.paymentFeeTypeData = this.editPayment.feeType; |
| 718 | this.paymentInvoiceDialog = true; | 718 | this.paymentInvoiceDialog = true; |
| 719 | }, | 719 | }, |
| 720 | deleteItem(item) { | 720 | deleteItem(item) { |
| 721 | let deleteInvoice = { | 721 | let deleteInvoice = { |
| 722 | invoiceId: item._id, | 722 | invoiceId: item._id, |
| 723 | }; | 723 | }; |
| 724 | http() | 724 | http() |
| 725 | .delete( | 725 | .delete( |
| 726 | "/deleteInvoice", | 726 | "/deleteInvoice", |
| 727 | confirm("Are you sure you want to delete this?") && { | 727 | confirm("Are you sure you want to delete this?") && { |
| 728 | params: deleteInvoice, | 728 | params: deleteInvoice, |
| 729 | } | 729 | } |
| 730 | ) | 730 | ) |
| 731 | .then((response) => { | 731 | .then((response) => { |
| 732 | this.snackbar = true; | 732 | this.snackbar = true; |
| 733 | this.text = "Successfully delete Existing Invoice"; | 733 | this.text = "Successfully delete Existing Invoice"; |
| 734 | this.color = "green"; | 734 | this.color = "green"; |
| 735 | this.dialog1 = false; | 735 | this.dialog1 = false; |
| 736 | this.getInvoiceList(); | 736 | this.getInvoiceList(); |
| 737 | }) | 737 | }) |
| 738 | .catch((error) => { | 738 | .catch((error) => { |
| 739 | // console.log(error); | 739 | // console.log(error); |
| 740 | }); | 740 | }); |
| 741 | }, | 741 | }, |
| 742 | deletePayment(editedItem) { | 742 | deletePayment(editedItem) { |
| 743 | let deleteInvoice = { | 743 | let deleteInvoice = { |
| 744 | invoiceId: editedItem._id, | 744 | invoiceId: editedItem._id, |
| 745 | }; | 745 | }; |
| 746 | http() | 746 | http() |
| 747 | .put( | 747 | .put( |
| 748 | "/removePayment", | 748 | "/removePayment", |
| 749 | deleteInvoice, | 749 | deleteInvoice, |
| 750 | confirm("Are you sure you want to delete this?") && { | 750 | confirm("Are you sure you want to delete this?") && { |
| 751 | headers: { | 751 | headers: { |
| 752 | Authorization: "Bearer " + this.token, | 752 | Authorization: "Bearer " + this.token, |
| 753 | }, | 753 | }, |
| 754 | } | 754 | } |
| 755 | ) | 755 | ) |
| 756 | .then((response) => { | 756 | .then((response) => { |
| 757 | this.snackbar = true; | 757 | this.snackbar = true; |
| 758 | this.text = "Successfully delete Existing Invoice"; | 758 | this.text = "Successfully delete Existing Invoice"; |
| 759 | this.color = "green"; | 759 | this.color = "green"; |
| 760 | this.dialog1 = false; | 760 | this.dialog1 = false; |
| 761 | this.getInvoiceList(); | 761 | this.getInvoiceList(); |
| 762 | }) | 762 | }) |
| 763 | .catch((error) => { | 763 | .catch((error) => { |
| 764 | // console.log(error); | 764 | // console.log(error); |
| 765 | }); | 765 | }); |
| 766 | }, | 766 | }, |
| 767 | close() { | 767 | close() { |
| 768 | this.dialog = false; | 768 | this.dialog = false; |
| 769 | }, | 769 | }, |
| 770 | closeAddInvoiceModel() { | 770 | closeAddInvoiceModel() { |
| 771 | this.addInvoiceDialog = false; | 771 | this.addInvoiceDialog = false; |
| 772 | this.invoiceData = []; | 772 | this.invoiceData = []; |
| 773 | this.menu1 = false; | 773 | this.menu1 = false; |
| 774 | this.feeType = []; | 774 | this.feeType = []; |
| 775 | this.feeTypeData = []; | 775 | this.feeTypeData = []; |
| 776 | }, | 776 | }, |
| 777 | // totalAmount() { | 777 | // totalAmount() { |
| 778 | // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); | 778 | // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); |
| 779 | // // console.log( | 779 | // // console.log( |
| 780 | // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", | 780 | // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", |
| 781 | // // this.feeType.subTotal | 781 | // // this.feeType.subTotal |
| 782 | // // ); | 782 | // // ); |
| 783 | 783 | ||
| 784 | // if (this.feeType.paidAmount < this.feeType.subTotal) { | 784 | // if (this.feeType.paidAmount < this.feeType.subTotal) { |
| 785 | // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); | 785 | // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); |
| 786 | 786 | ||
| 787 | // this.feeType.paidAmount = this.feeType.subTotal; | 787 | // this.feeType.paidAmount = this.feeType.subTotal; |
| 788 | // console.log( | 788 | // console.log( |
| 789 | // "this.feeType.paidAmount BBBBBBBBBBB", | 789 | // "this.feeType.paidAmount BBBBBBBBBBB", |
| 790 | // this.feeType.paidAmount | 790 | // this.feeType.paidAmount |
| 791 | // ); | 791 | // ); |
| 792 | // } | 792 | // } |
| 793 | // }, | 793 | // }, |
| 794 | submit() { | 794 | submit() { |
| 795 | let feeTypeId = ""; | 795 | let feeTypeId = ""; |
| 796 | for (let i = 0; i < this.feeTypes.length; i++) { | 796 | for (let i = 0; i < this.feeTypes.length; i++) { |
| 797 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { | 797 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { |
| 798 | feeTypeId = this.feeTypes[i]._id; | 798 | feeTypeId = this.feeTypes[i]._id; |
| 799 | } | 799 | } |
| 800 | } | 800 | } |
| 801 | if (this.$refs.form.validate()) { | 801 | if (this.$refs.form.validate()) { |
| 802 | let invoiceData = { | 802 | let invoiceData = { |
| 803 | classId: this.invoiceData.classNum, | 803 | classId: this.invoiceData.classNum, |
| 804 | students: this.invoiceData.students, | 804 | students: this.invoiceData.students, |
| 805 | date: this.invoiceData.date, | 805 | date: this.invoiceData.date, |
| 806 | paymentStatus: this.invoiceData.paymentStatus, | 806 | paymentStatus: this.invoiceData.paymentStatus, |
| 807 | paymentMethod: this.invoiceData.paymentMethod, | 807 | paymentMethod: this.invoiceData.paymentMethod, |
| 808 | feeType: this.feeTypeData, | 808 | feeType: this.feeTypeData, |
| 809 | totalAmount: this.feeType.amount.toString(), | 809 | totalAmount: this.feeType.amount.toString(), |
| 810 | totalDiscount: this.feeType.discount.toString(), | 810 | totalDiscount: this.feeType.discount.toString(), |
| 811 | totalSubTotal: this.feeType.subTotal.toString(), | 811 | totalSubTotal: this.feeType.subTotal.toString(), |
| 812 | totalPaidAmount: this.feeType.paidAmount, | 812 | totalPaidAmount: this.feeType.paidAmount, |
| 813 | }; | 813 | }; |
| 814 | 814 | ||
| 815 | if (invoiceData.paymentStatus == "NOT_PAID") { | 815 | if (invoiceData.paymentStatus == "NOT_PAID") { |
| 816 | delete invoiceData.paymentMethod; | 816 | delete invoiceData.paymentMethod; |
| 817 | } | 817 | } |
| 818 | if (this.feeType.paidAmount != "0.00") { | 818 | if (this.feeType.paidAmount != "0.00") { |
| 819 | if (this.feeType.subTotal == this.feeType.paidAmount) { | 819 | if (this.feeType.subTotal == this.feeType.paidAmount) { |
| 820 | invoiceData.paymentStatus = "FULLY_PAID"; | 820 | invoiceData.paymentStatus = "FULLY_PAID"; |
| 821 | // console.log("FULLY_PAID"); | 821 | // console.log("FULLY_PAID"); |
| 822 | } | 822 | } |
| 823 | if (invoiceData.totalPaidAmount) { | 823 | if (invoiceData.totalPaidAmount) { |
| 824 | if (this.feeType.subTotal != this.feeType.paidAmount) { | 824 | if (this.feeType.subTotal != this.feeType.paidAmount) { |
| 825 | invoiceData.paymentStatus = "PARTIALLY_PAID"; | 825 | invoiceData.paymentStatus = "PARTIALLY_PAID"; |
| 826 | // console.log("PARTIALLY_PAID"); | 826 | // console.log("PARTIALLY_PAID"); |
| 827 | } | 827 | } |
| 828 | } | 828 | } |
| 829 | } | 829 | } |
| 830 | 830 | ||
| 831 | if (invoiceData.totalSubTotal == "0.00") { | 831 | if (invoiceData.totalSubTotal == "0.00") { |
| 832 | invoiceData.paymentStatus = "FULLY_PAID"; | 832 | invoiceData.paymentStatus = "FULLY_PAID"; |
| 833 | } else if (invoiceData.totalSubTotal != "0.00") { | 833 | } else if (invoiceData.totalSubTotal != "0.00") { |
| 834 | if (this.feeType.paidAmount === "0.00") { | 834 | if (this.feeType.paidAmount === "0.00") { |
| 835 | invoiceData.paymentStatus = "NOT_PAID"; | 835 | invoiceData.paymentStatus = "NOT_PAID"; |
| 836 | delete invoiceData.paymentMethod; | 836 | delete invoiceData.paymentMethod; |
| 837 | } | 837 | } |
| 838 | } | 838 | } |
| 839 | http() | 839 | http() |
| 840 | .post("/createInvoice", invoiceData) | 840 | .post("/createInvoice", invoiceData) |
| 841 | .then((response) => { | 841 | .then((response) => { |
| 842 | this.getInvoiceList(); | 842 | this.getInvoiceList(); |
| 843 | this.snackbar = true; | 843 | this.snackbar = true; |
| 844 | this.text = "New Invoice added successfully"; | 844 | this.text = "New Invoice added successfully"; |
| 845 | this.color = "green"; | 845 | this.color = "green"; |
| 846 | this.clear(); | 846 | this.clear(); |
| 847 | this.feeTypeData = []; | 847 | this.feeTypeData = []; |
| 848 | if (this.feeTypeData.length == 0) { | 848 | if (this.feeTypeData.length == 0) { |
| 849 | this.feeType = { | 849 | this.feeType = { |
| 850 | amount: "0.00", | 850 | amount: "0.00", |
| 851 | discount: "0.00", | 851 | discount: "0.00", |
| 852 | paidAmount: "0.00", | 852 | paidAmount: "0.00", |
| 853 | subTotal: "0.00", | 853 | subTotal: "0.00", |
| 854 | feeTypeList: "", | 854 | feeTypeList: "", |
| 855 | }; | 855 | }; |
| 856 | } | 856 | } |
| 857 | this.loading = false; | 857 | this.loading = false; |
| 858 | this.addInvoiceDialog = false; | 858 | this.addInvoiceDialog = false; |
| 859 | }) | 859 | }) |
| 860 | .catch((error) => { | 860 | .catch((error) => { |
| 861 | this.snackbar = true; | 861 | this.snackbar = true; |
| 862 | this.text = error.response.data.errors[0].messages[0]; | 862 | this.text = error.response.data.errors[0].messages[0]; |
| 863 | this.color = "error"; | 863 | this.color = "error"; |
| 864 | this.loading = false; | 864 | this.loading = false; |
| 865 | }); | 865 | }); |
| 866 | } | 866 | } |
| 867 | }, | 867 | }, |
| 868 | clear() { | 868 | clear() { |
| 869 | this.$refs.form.reset(); | 869 | this.$refs.form.reset(); |
| 870 | }, | 870 | }, |
| 871 | getInvoiceList() { | 871 | getInvoiceList() { |
| 872 | this.showLoader = true; | 872 | this.showLoader = true; |
| 873 | http() | 873 | http() |
| 874 | .get("/getInvoicesList", { | 874 | .get("/getInvoicesList", { |
| 875 | params: { schoolId: this.$store.state.schoolId }, | 875 | params: { schoolId: this.$store.state.schoolId }, |
| 876 | headers: { Authorization: "Bearer " + this.token }, | 876 | headers: { Authorization: "Bearer " + this.token }, |
| 877 | }) | 877 | }) |
| 878 | .then((response) => { | 878 | .then((response) => { |
| 879 | this.invoiceList = response.data.data; | 879 | this.invoiceList = response.data.data; |
| 880 | this.showLoader = false; | 880 | this.showLoader = false; |
| 881 | }) | 881 | }) |
| 882 | .catch((error) => { | 882 | .catch((error) => { |
| 883 | // console.log("err====>", err); | 883 | // console.log("err====>", err); |
| 884 | this.showLoader = false; | 884 | this.showLoader = false; |
| 885 | if (error.response.status === 401) { | 885 | if (error.response.status === 401) { |
| 886 | this.$router.replace({ path: "/" }); | 886 | this.$router.replace({ path: "/" }); |
| 887 | this.$store.dispatch("setToken", null); | 887 | this.$store.dispatch("setToken", null); |
| 888 | this.$store.dispatch("Id", null); | 888 | this.$store.dispatch("Id", null); |
| 889 | } | 889 | } |
| 890 | }); | 890 | }); |
| 891 | }, | 891 | }, |
| 892 | selectFeeType() { | 892 | selectFeeType() { |
| 893 | this.showFeeType = true; | 893 | this.showFeeType = true; |
| 894 | this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); | 894 | this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); |
| 895 | }, | 895 | }, |
| 896 | deleteSelectFee: function (index, feeTyp) { | 896 | deleteSelectFee: function (index, feeTyp) { |
| 897 | // console.log("---index----", index); | 897 | // console.log("---index----", index); |
| 898 | this.feeTypeData.splice(index, 1); | 898 | this.feeTypeData.splice(index, 1); |
| 899 | this.getAmmountDetails(feeTyp); | 899 | this.getAmmountDetails(feeTyp); |
| 900 | if (this.feeTypeData.length == 0) { | 900 | if (this.feeTypeData.length == 0) { |
| 901 | this.feeType = { | 901 | this.feeType = { |
| 902 | amount: "0.00", | 902 | amount: "0.00", |
| 903 | discount: "0.00", | 903 | discount: "0.00", |
| 904 | paidAmount: "0.00", | 904 | paidAmount: "0.00", |
| 905 | subTotal: "0.00", | 905 | subTotal: "0.00", |
| 906 | feeTypeName: "", | 906 | feeTypeName: "", |
| 907 | }; | 907 | }; |
| 908 | } | 908 | } |
| 909 | }, | 909 | }, |
| 910 | getAllClasses() { | 910 | getAllClasses() { |
| 911 | http() | 911 | http() |
| 912 | .get("/getClassesList", { | 912 | .get("/getClassesList", { |
| 913 | params: { schoolId: this.$store.state.schoolId }, | 913 | params: { schoolId: this.$store.state.schoolId }, |
| 914 | headers: { Authorization: "Bearer " + this.token }, | 914 | headers: { Authorization: "Bearer " + this.token }, |
| 915 | }) | 915 | }) |
| 916 | .then((response) => { | 916 | .then((response) => { |
| 917 | this.addclass = response.data.data; | 917 | this.addclass = response.data.data; |
| 918 | }) | 918 | }) |
| 919 | .catch((err) => { | 919 | .catch((err) => { |
| 920 | // console.log("err====>", err); | 920 | // console.log("err====>", err); |
| 921 | // this.$router.replace({ path: "/" }); | 921 | // this.$router.replace({ path: "/" }); |
| 922 | }); | 922 | }); |
| 923 | }, | 923 | }, |
| 924 | getAllStudents() { | 924 | getAllStudents() { |
| 925 | this.showLoader = true; | 925 | this.showLoader = true; |
| 926 | http() | 926 | http() |
| 927 | .get("/getStudentsList", { | 927 | .get("/getStudentsList", { |
| 928 | params: { | 928 | params: { |
| 929 | classId: this.invoiceData.classNum, | 929 | classId: this.invoiceData.classNum, |
| 930 | schoolId: this.$store.state.schoolId, | 930 | schoolId: this.$store.state.schoolId, |
| 931 | }, | 931 | }, |
| 932 | headers: { Authorization: "Bearer " + this.token }, | 932 | headers: { Authorization: "Bearer " + this.token }, |
| 933 | }) | 933 | }) |
| 934 | .then((response) => { | 934 | .then((response) => { |
| 935 | this.studentList = response.data.data.filter((item) => item.status); | 935 | this.studentList = response.data.data.filter((item) => item.status); |
| 936 | this.studentList.unshift({ | 936 | this.studentList.unshift({ |
| 937 | name: "Select All", | 937 | name: "Select All", |
| 938 | _id: "Select All", | 938 | _id: "Select All", |
| 939 | }); | 939 | }); |
| 940 | // console.log("=======studentist====", this.studentList); | 940 | // console.log("=======studentist====", this.studentList); |
| 941 | this.showLoader = false; | 941 | this.showLoader = false; |
| 942 | }) | 942 | }) |
| 943 | .catch((err) => { | 943 | .catch((err) => { |
| 944 | this.showLoader = false; | 944 | this.showLoader = false; |
| 945 | // console.log("err====>", err); | 945 | // console.log("err====>", err); |
| 946 | // this.$router.replace({ path: "/" }); | 946 | // this.$router.replace({ path: "/" }); |
| 947 | }); | 947 | }); |
| 948 | }, | 948 | }, |
| 949 | getfeeType() { | 949 | getfeeType() { |
| 950 | http() | 950 | http() |
| 951 | .get("/getFeesList", { | 951 | .get("/getFeesList", { |
| 952 | params: { | 952 | params: { |
| 953 | schoolId: this.$store.state.schoolId, | 953 | schoolId: this.$store.state.schoolId, |
| 954 | }, | 954 | }, |
| 955 | headers: { Authorization: "Bearer " + this.token }, | 955 | headers: { Authorization: "Bearer " + this.token }, |
| 956 | }) | 956 | }) |
| 957 | .then((response) => { | 957 | .then((response) => { |
| 958 | this.feeTypes = response.data.data; | 958 | this.feeTypes = response.data.data; |
| 959 | }) | 959 | }) |
| 960 | .catch((err) => { | 960 | .catch((err) => { |
| 961 | // console.log("err====>", err); | 961 | // console.log("err====>", err); |
| 962 | // this.$router.replace({ path: "/" }); | 962 | // this.$router.replace({ path: "/" }); |
| 963 | }); | 963 | }); |
| 964 | }, | 964 | }, |
| 965 | 965 | ||
| 966 | getAmmountDetails(feeTyp) { | 966 | getAmmountDetails(feeTyp) { |
| 967 | let feeType = { | 967 | let feeType = { |
| 968 | amount: "0.00", | 968 | amount: "0.00", |
| 969 | discount: "0.00", | 969 | discount: "0.00", |
| 970 | subTotal: "0.00", | 970 | subTotal: "0.00", |
| 971 | subParticularTotal: "0.00", | 971 | subParticularTotal: "0.00", |
| 972 | paidAmount: "", | 972 | paidAmount: "", |
| 973 | }; | 973 | }; |
| 974 | for (let i = 0; i < this.feeTypeData.length; i++) { | 974 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 975 | // *********** AMOUNT *********** | 975 | // *********** AMOUNT *********** |
| 976 | if (this.feeTypeData[i].amount) { | 976 | if (this.feeTypeData[i].amount) { |
| 977 | feeType.amount = | 977 | feeType.amount = |
| 978 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 978 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 979 | this.feeType.amount = feeType.amount; | 979 | this.feeType.amount = feeType.amount; |
| 980 | this.feeType.subTotal = feeType.amount; | 980 | this.feeType.subTotal = feeType.amount; |
| 981 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; | 981 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; |
| 982 | } else if (this.feeTypeData[0].amount == "") { | 982 | } else if (this.feeTypeData[0].amount == "") { |
| 983 | this.feeType.amount = "0.00"; | 983 | this.feeType.amount = "0.00"; |
| 984 | this.feeTypeData[i].subTotal = "0.00"; | 984 | this.feeTypeData[i].subTotal = "0.00"; |
| 985 | this.feeType.subTotal = "0.00"; | 985 | this.feeType.subTotal = "0.00"; |
| 986 | } else if (this.feeTypeData[i].amount == "") { | 986 | } else if (this.feeTypeData[i].amount == "") { |
| 987 | this.feeType.amount = | 987 | this.feeType.amount = |
| 988 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 988 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 989 | this.feeTypeData[i].subTotal = | 989 | this.feeTypeData[i].subTotal = |
| 990 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 990 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 991 | this.feeType.subTotal = | 991 | this.feeType.subTotal = |
| 992 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 992 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 993 | } | 993 | } |
| 994 | // *********** DISCOUNT *********** | 994 | // *********** DISCOUNT *********** |
| 995 | if (this.feeTypeData[i].discount) { | 995 | if (this.feeTypeData[i].discount) { |
| 996 | if ( | 996 | if ( |
| 997 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount | 997 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount |
| 998 | ) { | 998 | ) { |
| 999 | feeType.discount = | 999 | feeType.discount = |
| 1000 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 1000 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 1001 | this.feeType.discount = feeType.discount; | 1001 | this.feeType.discount = feeType.discount; |
| 1002 | feeType.subParticularTotal = | 1002 | feeType.subParticularTotal = |
| 1003 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 1003 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 1004 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( | 1004 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( |
| 1005 | 2 | 1005 | 2 |
| 1006 | ); | 1006 | ); |
| 1007 | } else if ( | 1007 | } else if ( |
| 1008 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount | 1008 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount |
| 1009 | ) { | 1009 | ) { |
| 1010 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; | 1010 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; |
| 1011 | feeType.discount = | 1011 | feeType.discount = |
| 1012 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 1012 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 1013 | this.feeType.discount = feeType.discount.toString(); | 1013 | this.feeType.discount = feeType.discount.toString(); |
| 1014 | feeType.subParticularTotal = | 1014 | feeType.subParticularTotal = |
| 1015 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 1015 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 1016 | this.feeTypeData[ | 1016 | this.feeTypeData[ |
| 1017 | i | 1017 | i |
| 1018 | ].subTotal = feeType.subParticularTotal.toString(); | 1018 | ].subTotal = feeType.subParticularTotal.toString(); |
| 1019 | } | 1019 | } |
| 1020 | } else if (this.feeTypeData[0].discount == "") { | 1020 | } else if (this.feeTypeData[0].discount == "") { |
| 1021 | this.feeType.discount = "0.00"; | 1021 | this.feeType.discount = "0.00"; |
| 1022 | } | 1022 | } |
| 1023 | // else if (this.feeTypeData[i].discount == "") { | 1023 | // else if (this.feeTypeData[i].discount == "") { |
| 1024 | // this.feeType.discount = | 1024 | // this.feeType.discount = |
| 1025 | // Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 1025 | // Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 1026 | // } | 1026 | // } |
| 1027 | 1027 | ||
| 1028 | // *********** SUBTOTAL *********** | 1028 | // *********** SUBTOTAL *********** |
| 1029 | if (this.feeTypeData[i].subTotal) { | 1029 | if (this.feeTypeData[i].subTotal) { |
| 1030 | feeType.subTotal = | 1030 | feeType.subTotal = |
| 1031 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | 1031 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); |
| 1032 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | 1032 | this.feeType.subTotal = feeType.subTotal.toFixed(2); |
| 1033 | } | 1033 | } |
| 1034 | 1034 | ||
| 1035 | // *********** PAID-AMOUNT *********** | 1035 | // *********** PAID-AMOUNT *********** |
| 1036 | if (this.feeTypeData[i].paidAmount) { | 1036 | if (this.feeTypeData[i].paidAmount) { |
| 1037 | feeType.paidAmount = | 1037 | feeType.paidAmount = |
| 1038 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 1038 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 1039 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | 1039 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); |
| 1040 | } else if (this.feeTypeData[0].paidAmount == "") { | 1040 | } else if (this.feeTypeData[0].paidAmount == "") { |
| 1041 | this.feeType.paidAmount = "0.00"; | 1041 | this.feeType.paidAmount = "0.00"; |
| 1042 | } else if (this.feeTypeData[i].paidAmount == "") { | 1042 | } else if (this.feeTypeData[i].paidAmount == "") { |
| 1043 | this.feeType.paidAmount = feeType.paidAmount = | 1043 | this.feeType.paidAmount = feeType.paidAmount = |
| 1044 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 1044 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 1045 | } | 1045 | } |
| 1046 | 1046 | ||
| 1047 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. | 1047 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. |
| 1048 | if (feeType.paidAmount > feeType.subTotal) { | 1048 | if (feeType.paidAmount > feeType.subTotal) { |
| 1049 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; | 1049 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; |
| 1050 | this.feeType.paidAmount = feeType.subTotal; | 1050 | this.feeType.paidAmount = feeType.subTotal; |
| 1051 | } | 1051 | } |
| 1052 | } | 1052 | } |
| 1053 | }, | 1053 | }, |
| 1054 | getPayMethodList() { | 1054 | getPayMethodList() { |
| 1055 | if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { | 1055 | if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { |
| 1056 | this.showPayMethods = true; | 1056 | this.showPayMethods = true; |
| 1057 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; | 1057 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; |
| 1058 | } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { | 1058 | } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { |
| 1059 | this.showPayMethods = true; | 1059 | this.showPayMethods = true; |
| 1060 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; | 1060 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; |
| 1061 | } else if (this.invoiceData.paymentStatus == "NOT_PAID") { | 1061 | } else if (this.invoiceData.paymentStatus == "NOT_PAID") { |
| 1062 | for (let i = 0; i < this.feeTypeData.length; i++) { | 1062 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 1063 | this.feeTypeData[i].paidAmount = "0.00"; | 1063 | this.feeTypeData[i].paidAmount = "0.00"; |
| 1064 | this.feeType.paidAmount = "0.00"; | 1064 | this.feeType.paidAmount = "0.00"; |
| 1065 | } | 1065 | } |
| 1066 | this.paymentMethodRules = ""; | 1066 | this.paymentMethodRules = ""; |
| 1067 | this.showPayMethods = false; | 1067 | this.showPayMethods = false; |
| 1068 | } else { | 1068 | } else { |
| 1069 | this.showPayMethods = false; | 1069 | this.showPayMethods = false; |
| 1070 | } | 1070 | } |
| 1071 | }, | 1071 | }, |
| 1072 | selectAllStudent() { | 1072 | selectAllStudent() { |
| 1073 | this.invoiceData.students = []; | 1073 | this.invoiceData.students = []; |
| 1074 | if (this.invoiceData.studentId === "Select All") { | 1074 | if (this.invoiceData.studentId === "Select All") { |
| 1075 | for (let i = 1; i < this.studentList.length; i++) { | 1075 | for (let i = 1; i < this.studentList.length; i++) { |
| 1076 | this.invoiceData.students.push(this.studentList[i]._id); | 1076 | this.invoiceData.students.push(this.studentList[i]._id); |
| 1077 | // console.log("data", this.invoiceData.students); | 1077 | // console.log("data", this.invoiceData.students); |
| 1078 | // data.push(this.studentList[i]._id); | 1078 | // data.push(this.studentList[i]._id); |
| 1079 | // console.log("data", data); | 1079 | // console.log("data", data); |
| 1080 | } | 1080 | } |
| 1081 | } else { | 1081 | } else { |
| 1082 | this.invoiceData.students.push(this.invoiceData.studentId); | 1082 | this.invoiceData.students.push(this.invoiceData.studentId); |
| 1083 | } | 1083 | } |
| 1084 | }, | 1084 | }, |
| 1085 | displaySearch() { | 1085 | displaySearch() { |
| 1086 | this.show = false; | 1086 | this.show = false; |
| 1087 | this.showSearch = true; | 1087 | this.showSearch = true; |
| 1088 | }, | 1088 | }, |
| 1089 | closeSearch() { | 1089 | closeSearch() { |
| 1090 | this.showSearch = false; | 1090 | this.showSearch = false; |
| 1091 | this.show = true; | 1091 | this.show = true; |
| 1092 | this.search = ""; | 1092 | this.search = ""; |
| 1093 | }, | 1093 | }, |
| 1094 | updateDoneInvoice() { | 1094 | updateDoneInvoice() { |
| 1095 | this.editInvoiceDialog = false; | 1095 | this.editInvoiceDialog = false; |
| 1096 | this.getInvoiceList(); | 1096 | this.getInvoiceList(); |
| 1097 | }, | 1097 | }, |
| 1098 | updatePayment() { | 1098 | updatePayment() { |
| 1099 | this.paymentInvoiceDialog = false; | 1099 | this.paymentInvoiceDialog = false; |
| 1100 | this.getInvoiceList(); | 1100 | this.getInvoiceList(); |
| 1101 | this.snackbar = true; | 1101 | this.snackbar = true; |
| 1102 | this.text = "Payment added successfully"; | 1102 | this.text = "Payment added successfully"; |
| 1103 | this.color = "green"; | 1103 | this.color = "green"; |
| 1104 | }, | 1104 | }, |
| 1105 | }, | 1105 | }, |
| 1106 | mounted() { | 1106 | mounted() { |
| 1107 | this.token = this.$store.state.token; | 1107 | this.token = this.$store.state.token; |
| 1108 | this.getInvoiceList(); | 1108 | this.getInvoiceList(); |
| 1109 | this.getAllClasses(); | 1109 | this.getAllClasses(); |
| 1110 | this.getfeeType(); | 1110 | this.getfeeType(); |
| 1111 | this.getAllStudents(); | 1111 | this.getAllStudents(); |
| 1112 | }, | 1112 | }, |
| 1113 | }; | 1113 | }; |
| 1114 | </script> | 1114 | </script> |
| 1115 | 1115 | ||
| 1116 | 1116 | ||
| 1117 | <style scoped> | 1117 | <style scoped> |
| 1118 | table { | 1118 | table { |
| 1119 | border-collapse: collapse; | 1119 | border-collapse: collapse; |
| 1120 | border: 1px solid #e2e7eb; | 1120 | border: 1px solid #e2e7eb; |
| 1121 | } | 1121 | } |
| 1122 | 1122 | ||
| 1123 | th, | 1123 | th, |
| 1124 | .tdFeeType { | 1124 | .tdFeeType { |
| 1125 | border: 1px solid #e2e7eb; | 1125 | border: 1px solid #e2e7eb; |
| 1126 | padding: 10px; | 1126 | padding: 10px; |
| 1127 | text-align: center; | 1127 | text-align: center; |
| 1128 | } | 1128 | } |
| 1129 | table.feeTypeTable { | 1129 | table.feeTypeTable { |
| 1130 | table-layout: auto !important; | 1130 | table-layout: auto !important; |
| 1131 | width: 100% !important; | 1131 | width: 100% !important; |
| 1132 | } | 1132 | } |
| 1133 | .card-style { | 1133 | .card-style { |
| 1134 | background: #7f62f8 !important; | 1134 | background: #7f62f8 !important; |
| 1135 | border-color: #7f62f8 !important; | 1135 | border-color: #7f62f8 !important; |
| 1136 | border-radius: 12px; | 1136 | border-radius: 12px; |
| 1137 | text-align: center !important; | 1137 | text-align: center !important; |
| 1138 | padding-top: 10px !important; | 1138 | padding-top: 10px !important; |
| 1139 | } | 1139 | } |
| 1140 | .add-button { | 1140 | /* .add-button { |
| 1141 | background: #feb83c !important; | 1141 | background: #feb83c !important; |
| 1142 | border-color: #feb83c !important; | 1142 | border-color: #feb83c !important; |
| 1143 | text-transform: none !important; | 1143 | text-transform: none !important; |
| 1144 | -webkit-box-shadow: none !important; | 1144 | -webkit-box-shadow: none !important; |
| 1145 | box-shadow: none !important; | 1145 | box-shadow: none !important; |
| 1146 | } | 1146 | } |
| 1147 | .clear-button { | 1147 | .clear-button { |
| 1148 | background: #fa7676 !important; | 1148 | background: #fa7676 !important; |
| 1149 | border-color: #fa7676 !important; | 1149 | border-color: #fa7676 !important; |
| 1150 | text-transform: none !important; | 1150 | text-transform: none !important; |
| 1151 | -webkit-box-shadow: none !important; | 1151 | -webkit-box-shadow: none !important; |
| 1152 | box-shadow: none !important; | 1152 | box-shadow: none !important; |
| 1153 | } | 1153 | } */ |
| 1154 | .card-styles { | 1154 | .card-styles { |
| 1155 | background: #7f62f8 !important; | 1155 | background: #7f62f8 !important; |
| 1156 | border-color: #7f62f8 !important; | 1156 | border-color: #7f62f8 !important; |
| 1157 | } | 1157 | } |
| 1158 | .v-card__actions .v-btn { | 1158 | .v-card__actions .v-btn { |
| 1159 | margin: 0 15px !important; | 1159 | margin: 0 15px !important; |
| 1160 | min-width: 96px !important; | 1160 | min-width: 96px !important; |
| 1161 | } | 1161 | } |
| 1162 | </style> | 1162 | </style> |
src/pages/Account/paymentHistory.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Payment History ****** --> | 3 | <!-- ****** Edit Payment History ****** --> |
| 4 | <v-dialog v-model="editPaymentDialog" max-width="400px" persistent> | 4 | <v-dialog v-model="editPaymentDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Payment History</label> | 8 | <label class="title text-xs-center">Edit Payment History</label> |
| 9 | <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs3 class="pt-4 subheading"> | 16 | <v-flex xs3 class="pt-4 subheading"> |
| 17 | <label class="right">Amount:</label> | 17 | <label class="right">Amount:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm7 class="ml-3"> | 19 | <v-flex xs8 sm7 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.paidAmount" | 21 | v-model="editedItem.paidAmount" |
| 22 | placeholder="please fill this field" | 22 | placeholder="please fill this field" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs3 class="pt-4 subheading"> | 29 | <v-flex xs3 class="pt-4 subheading"> |
| 30 | <label class="right">Method:</label> | 30 | <label class="right">Method:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm7 class="ml-3"> | 32 | <v-flex xs8 sm7 class="ml-3"> |
| 33 | <v-select | 33 | <v-select |
| 34 | :items="paymentMethod" | 34 | :items="paymentMethod" |
| 35 | v-model="editedItem.paymentMethod" | 35 | v-model="editedItem.paymentMethod" |
| 36 | label="please fill this field" | 36 | label="please fill this field" |
| 37 | required | 37 | required |
| 38 | ></v-select> | 38 | ></v-select> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn> | 46 | <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn> |
| 47 | <v-spacer></v-spacer> | 47 | <v-spacer></v-spacer> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-container> | 51 | </v-container> |
| 52 | </v-form> | 52 | </v-form> |
| 53 | </v-card> | 53 | </v-card> |
| 54 | </v-dialog> | 54 | </v-dialog> |
| 55 | 55 | ||
| 56 | <!-- ****** PAYMENT HISTORY TABLE ****** --> | 56 | <!-- ****** PAYMENT HISTORY TABLE ****** --> |
| 57 | <v-toolbar color="transparent" flat> | 57 | <v-toolbar color="transparent" flat> |
| 58 | <v-spacer></v-spacer> | 58 | <v-spacer></v-spacer> |
| 59 | <v-card-title class="body-1" v-show="show"> | 59 | <v-card-title class="body-1" v-show="show"> |
| 60 | <v-btn icon large flat @click="displaySearch"> | 60 | <v-btn icon large flat @click="displaySearch"> |
| 61 | <v-avatar size="27"> | 61 | <v-avatar size="27"> |
| 62 | <img src="/static/icon/search.png" alt="icon" /> | 62 | <img src="/static/icon/search.png" alt="icon" /> |
| 63 | </v-avatar> | 63 | </v-avatar> |
| 64 | </v-btn> | 64 | </v-btn> |
| 65 | </v-card-title> | 65 | </v-card-title> |
| 66 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 66 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 67 | <v-layout> | 67 | <v-layout> |
| 68 | <v-text-field | 68 | <v-text-field |
| 69 | autofocus | 69 | autofocus |
| 70 | v-model="search" | 70 | v-model="search" |
| 71 | label="Search" | 71 | label="Search" |
| 72 | prepend-inner-icon="search" | 72 | prepend-inner-icon="search" |
| 73 | color="primary" | 73 | color="primary" |
| 74 | ></v-text-field> | 74 | ></v-text-field> |
| 75 | <v-icon @click="closeSearch" color="error">close</v-icon> | 75 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 76 | </v-layout> | 76 | </v-layout> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-toolbar> | 78 | </v-toolbar> |
| 79 | <v-data-table | 79 | <v-data-table |
| 80 | :headers="headers" | 80 | :headers="headers" |
| 81 | :items="paymentHistory" | 81 | :items="paymentHistory" |
| 82 | :pagination.sync="pagination" | 82 | :pagination.sync="pagination" |
| 83 | :search="search" | 83 | :search="search" |
| 84 | > | 84 | > |
| 85 | <template slot="items" slot-scope="props"> | 85 | <template slot="items" slot-scope="props"> |
| 86 | <tr class="tr"> | 86 | <tr class="tr"> |
| 87 | <td class="td td-row">{{ props.index + 1 }}</td> | 87 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 88 | <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> | 88 | <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> |
| 89 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> | 89 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> |
| 90 | <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td> | 90 | <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td> |
| 91 | <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> | 91 | <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> |
| 92 | <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td> | 92 | <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td> |
| 93 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 93 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 94 | <td class="td td-row text-xs-center"> | 94 | <td class="td td-row text-xs-center"> |
| 95 | <span> | 95 | <span> |
| 96 | <v-tooltip top> | 96 | <v-tooltip top> |
| 97 | <img | 97 | <img |
| 98 | slot="activator" | 98 | slot="activator" |
| 99 | style="cursor:pointer; width:20px; height:18px;" | 99 | style="cursor:pointer; width:20px; height:18px;" |
| 100 | class="mr-3" | 100 | class="mr-3" |
| 101 | @click="editItem(props.item)" | 101 | @click="editItem(props.item)" |
| 102 | src="/static/icon/edit.png" | 102 | src="/static/icon/edit.png" |
| 103 | /> | 103 | /> |
| 104 | <span>Edit</span> | 104 | <span>Edit</span> |
| 105 | </v-tooltip> | 105 | </v-tooltip> |
| 106 | <v-tooltip top> | 106 | <v-tooltip top> |
| 107 | <img | 107 | <img |
| 108 | slot="activator" | 108 | slot="activator" |
| 109 | style="cursor:pointer;width:20px; height:20px;" | 109 | style="cursor:pointer;width:20px; height:20px;" |
| 110 | class="mr-3" | 110 | class="mr-3" |
| 111 | @click="deleteItem(props.item)" | 111 | @click="deleteItem(props.item)" |
| 112 | src="/static/icon/delete.png" | 112 | src="/static/icon/delete.png" |
| 113 | /> | 113 | /> |
| 114 | <span>Delete</span> | 114 | <span>Delete</span> |
| 115 | </v-tooltip> | 115 | </v-tooltip> |
| 116 | </span> | 116 | </span> |
| 117 | </td> | 117 | </td> |
| 118 | </tr> | 118 | </tr> |
| 119 | </template> | 119 | </template> |
| 120 | <v-alert | 120 | <v-alert |
| 121 | slot="no-results" | 121 | slot="no-results" |
| 122 | :value="true" | 122 | :value="true" |
| 123 | color="error" | 123 | color="error" |
| 124 | icon="warning" | 124 | icon="warning" |
| 125 | >Your search for "{{ search }}" found no results.</v-alert> | 125 | >Your search for "{{ search }}" found no results.</v-alert> |
| 126 | </v-data-table> | 126 | </v-data-table> |
| 127 | <div class="loader" v-if="showLoader"> | 127 | <div class="loader" v-if="showLoader"> |
| 128 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 128 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 129 | </div> | 129 | </div> |
| 130 | <v-snackbar | 130 | <v-snackbar |
| 131 | :timeout="timeout" | 131 | :timeout="timeout" |
| 132 | :top="y === 'top'" | 132 | :top="y === 'top'" |
| 133 | :right="x === 'right'" | 133 | :right="x === 'right'" |
| 134 | :vertical="mode === 'vertical'" | 134 | :vertical="mode === 'vertical'" |
| 135 | v-model="snackbar" | 135 | v-model="snackbar" |
| 136 | :color="color" | 136 | :color="color" |
| 137 | >{{ text }}</v-snackbar> | 137 | >{{ text }}</v-snackbar> |
| 138 | </v-container> | 138 | </v-container> |
| 139 | </template> | 139 | </template> |
| 140 | 140 | ||
| 141 | <script> | 141 | <script> |
| 142 | import http from "@/Services/http.js"; | 142 | import http from "@/Services/http.js"; |
| 143 | import moment from "moment"; | 143 | import moment from "moment"; |
| 144 | 144 | ||
| 145 | export default { | 145 | export default { |
| 146 | data: () => ({ | 146 | data: () => ({ |
| 147 | snackbar: false, | 147 | snackbar: false, |
| 148 | showLoader: false, | 148 | showLoader: false, |
| 149 | search: "", | 149 | search: "", |
| 150 | show: true, | 150 | show: true, |
| 151 | showSearch: false, | 151 | showSearch: false, |
| 152 | pagination: { | 152 | pagination: { |
| 153 | rowsPerPage: 10, | 153 | rowsPerPage: 10, |
| 154 | }, | 154 | }, |
| 155 | paymentMethod: ["Cash", "Cheque"], | 155 | paymentMethod: ["Cash", "Cheque"], |
| 156 | headers: [ | 156 | headers: [ |
| 157 | { | 157 | { |
| 158 | text: "No", | 158 | text: "No", |
| 159 | align: "", | 159 | align: "", |
| 160 | sortable: false, | 160 | sortable: false, |
| 161 | value: "No", | 161 | value: "No", |
| 162 | }, | 162 | }, |
| 163 | { | 163 | { |
| 164 | text: "Student", | 164 | text: "Student", |
| 165 | value: "name", | 165 | value: "name", |
| 166 | sortable: false, | 166 | sortable: false, |
| 167 | align: "center", | 167 | align: "center", |
| 168 | }, | 168 | }, |
| 169 | { text: "Class", value: "class", sortable: false, align: "center" }, | 169 | { text: "Class", value: "class", sortable: false, align: "center" }, |
| 170 | { | 170 | { |
| 171 | text: "Fee Type", | 171 | text: "Fee Type", |
| 172 | value: "feeTypeName", | 172 | value: "feeTypeName", |
| 173 | sortable: false, | 173 | sortable: false, |
| 174 | align: "center", | 174 | align: "center", |
| 175 | }, | 175 | }, |
| 176 | { | 176 | { |
| 177 | text: "Method", | 177 | text: "Method", |
| 178 | value: "paymentMethod", | 178 | value: "paymentMethod", |
| 179 | sortable: false, | 179 | sortable: false, |
| 180 | align: "center", | 180 | align: "center", |
| 181 | }, | 181 | }, |
| 182 | { | 182 | { |
| 183 | text: "Paid Amount", | 183 | text: "Paid Amount", |
| 184 | value: "totalPaidAmount", | 184 | value: "totalPaidAmount", |
| 185 | sortable: false, | 185 | sortable: false, |
| 186 | align: "center", | 186 | align: "center", |
| 187 | }, | 187 | }, |
| 188 | { | 188 | { |
| 189 | text: "Date", | 189 | text: "Date", |
| 190 | value: "date", | 190 | value: "date", |
| 191 | sortable: false, | 191 | sortable: false, |
| 192 | align: "center", | 192 | align: "center", |
| 193 | }, | 193 | }, |
| 194 | { text: "Action", value: "", sortable: false, align: "center" }, | 194 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 195 | ], | 195 | ], |
| 196 | paymentHistory: [], | 196 | paymentHistory: [], |
| 197 | addPaymentHistoryDialog: "", | 197 | addPaymentHistoryDialog: "", |
| 198 | editPaymentDialog: false, | 198 | editPaymentDialog: false, |
| 199 | editedItem: {}, | 199 | editedItem: {}, |
| 200 | y: "top", | 200 | y: "top", |
| 201 | x: "right", | 201 | x: "right", |
| 202 | mode: "", | 202 | mode: "", |
| 203 | timeout: 5000, | 203 | timeout: 5000, |
| 204 | text: "", | 204 | text: "", |
| 205 | color: "", | 205 | color: "", |
| 206 | snackbar: false, | 206 | snackbar: false, |
| 207 | }), | 207 | }), |
| 208 | methods: { | 208 | methods: { |
| 209 | editItem(item) { | 209 | editItem(item) { |
| 210 | this.editedIndex = this.paymentHistory.indexOf(item); | 210 | this.editedIndex = this.paymentHistory.indexOf(item); |
| 211 | this.editedItem = Object.assign({}, item); | 211 | this.editedItem = Object.assign({}, item); |
| 212 | this.editedItem.paidAmount = this.editedItem.feeType.paidAmount; | 212 | this.editedItem.paidAmount = this.editedItem.feeType.paidAmount; |
| 213 | this.editPaymentDialog = true; | 213 | this.editPaymentDialog = true; |
| 214 | }, | 214 | }, |
| 215 | deleteItem(item) { | 215 | deleteItem(item) { |
| 216 | let deleteGrade = { | 216 | let deleteGrade = { |
| 217 | invoiceId: item._id, | 217 | invoiceId: item._id, |
| 218 | feeTypeId: item.feeType._id, | 218 | feeTypeId: item.feeType._id, |
| 219 | }; | 219 | }; |
| 220 | http() | 220 | http() |
| 221 | .put( | 221 | .put( |
| 222 | "/deleteFeeType", | 222 | "/deleteFeeType", |
| 223 | confirm("Are you sure you want to delete this?") && deleteGrade, | 223 | confirm("Are you sure you want to delete this?") && deleteGrade, |
| 224 | { | 224 | { |
| 225 | headers: { | 225 | headers: { |
| 226 | Authorization: "Bearer " + this.token, | 226 | Authorization: "Bearer " + this.token, |
| 227 | }, | 227 | }, |
| 228 | } | 228 | } |
| 229 | ) | 229 | ) |
| 230 | .then((response) => { | 230 | .then((response) => { |
| 231 | this.snackbar = true; | 231 | this.snackbar = true; |
| 232 | // this.text = "Successfully Delete Salary "; | 232 | // this.text = "Successfully Delete Salary "; |
| 233 | this.text = response.data.message; | 233 | this.text = response.data.message; |
| 234 | this.color = "green"; | 234 | this.color = "green"; |
| 235 | this.getPaymentHistory(); | 235 | this.getPaymentHistory(); |
| 236 | }) | 236 | }) |
| 237 | .catch((error) => { | 237 | .catch((error) => { |
| 238 | // console.log("error", error); | 238 | // console.log("error", error); |
| 239 | this.snackbar = true; | 239 | this.snackbar = true; |
| 240 | this.text = error.response.data.message; | 240 | this.text = error.response.data.message; |
| 241 | this.color = "red"; | 241 | this.color = "red"; |
| 242 | }); | 242 | }); |
| 243 | }, | 243 | }, |
| 244 | 244 | ||
| 245 | dates: function (date) { | 245 | dates: function (date) { |
| 246 | return moment(date).format("MMMM DD, YYYY"); | 246 | return moment(date).format("MMMM DD, YYYY"); |
| 247 | }, | 247 | }, |
| 248 | getPaymentHistory() { | 248 | getPaymentHistory() { |
| 249 | this.showLoader = true; | 249 | this.showLoader = true; |
| 250 | var token = this.$store.state.token; | 250 | var token = this.$store.state.token; |
| 251 | http() | 251 | http() |
| 252 | .get("/getPaymentHistory", { | 252 | .get("/getPaymentHistory", { |
| 253 | params: { | 253 | params: { |
| 254 | paymentStatus: "FULLY_PAID", | 254 | paymentStatus: "FULLY_PAID", |
| 255 | schoolId: this.$store.state.schoolId, | 255 | schoolId: this.$store.state.schoolId, |
| 256 | }, | 256 | }, |
| 257 | headers: { Authorization: "Bearer " + token }, | 257 | headers: { Authorization: "Bearer " + token }, |
| 258 | }) | 258 | }) |
| 259 | .then((response) => { | 259 | .then((response) => { |
| 260 | this.paymentHistory = response.data.data; | 260 | this.paymentHistory = response.data.data; |
| 261 | this.showLoader = false; | 261 | this.showLoader = false; |
| 262 | }) | 262 | }) |
| 263 | .catch((error) => { | 263 | .catch((error) => { |
| 264 | this.showLoader = false; | 264 | this.showLoader = false; |
| 265 | if (error.response.status === 401) { | 265 | if (error.response.status === 401) { |
| 266 | this.$router.replace({ path: "/" }); | 266 | this.$router.replace({ path: "/" }); |
| 267 | this.$store.dispatch("setToken", null); | 267 | this.$store.dispatch("setToken", null); |
| 268 | this.$store.dispatch("Id", null); | 268 | this.$store.dispatch("Id", null); |
| 269 | this.$store.dispatch("Role", null); | 269 | this.$store.dispatch("Role", null); |
| 270 | } | 270 | } |
| 271 | }); | 271 | }); |
| 272 | }, | 272 | }, |
| 273 | save() { | 273 | save() { |
| 274 | var updatePayment = { | 274 | var updatePayment = { |
| 275 | invoiceId: this.editedItem._id, | 275 | invoiceId: this.editedItem._id, |
| 276 | feeTypeId: this.editedItem.feeType._id, | 276 | feeTypeId: this.editedItem.feeType._id, |
| 277 | paidAmount: this.editedItem.paidAmount, | 277 | paidAmount: this.editedItem.paidAmount, |
| 278 | paymentMethod: this.editedItem.paymentMethod, | 278 | paymentMethod: this.editedItem.paymentMethod, |
| 279 | }; | 279 | }; |
| 280 | http() | 280 | http() |
| 281 | .put("/updateFeeType", updatePayment, { | 281 | .put("/updateFeeType", updatePayment, { |
| 282 | headers: { | 282 | headers: { |
| 283 | Authorization: "Bearer " + this.token, | 283 | Authorization: "Bearer " + this.token, |
| 284 | }, | 284 | }, |
| 285 | }) | 285 | }) |
| 286 | .then((response) => { | 286 | .then((response) => { |
| 287 | this.getPaymentHistory(); | 287 | this.getPaymentHistory(); |
| 288 | this.snackbar = true; | 288 | this.snackbar = true; |
| 289 | this.text = response.data.message; | 289 | this.text = response.data.message; |
| 290 | this.color = "green"; | 290 | this.color = "green"; |
| 291 | this.editPaymentDialog = false; | 291 | this.editPaymentDialog = false; |
| 292 | }) | 292 | }) |
| 293 | .catch((error) => { | 293 | .catch((error) => { |
| 294 | // console.log("error", error.response); | 294 | // console.log("error", error.response); |
| 295 | this.snackbar = true; | 295 | this.snackbar = true; |
| 296 | this.text = error.response.data.message; | 296 | this.text = error.response.data.message; |
| 297 | this.color = "red"; | 297 | this.color = "red"; |
| 298 | }); | 298 | }); |
| 299 | }, | 299 | }, |
| 300 | displaySearch() { | 300 | displaySearch() { |
| 301 | this.show = false; | 301 | this.show = false; |
| 302 | this.showSearch = true; | 302 | this.showSearch = true; |
| 303 | }, | 303 | }, |
| 304 | closeSearch() { | 304 | closeSearch() { |
| 305 | this.showSearch = false; | 305 | this.showSearch = false; |
| 306 | this.show = true; | 306 | this.show = true; |
| 307 | this.search = ""; | 307 | this.search = ""; |
| 308 | }, | 308 | }, |
| 309 | }, | 309 | }, |
| 310 | mounted() { | 310 | mounted() { |
| 311 | this.token = this.$store.state.token; | 311 | this.token = this.$store.state.token; |
| 312 | this.getPaymentHistory(); | 312 | this.getPaymentHistory(); |
| 313 | }, | 313 | }, |
| 314 | }; | 314 | }; |
| 315 | </script> | 315 | </script> |
src/pages/Account/paymentTemplate.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <!-- ****** Edit multiple INVOICE ****** --> | 3 | <!-- ****** Edit multiple INVOICE ****** --> |
| 4 | 4 | ||
| 5 | <v-snackbar | 5 | <v-snackbar |
| 6 | :timeout="timeout" | 6 | :timeout="timeout" |
| 7 | :top="y === 'top'" | 7 | :top="y === 'top'" |
| 8 | :right="x === 'right'" | 8 | :right="x === 'right'" |
| 9 | :vertical="mode === 'vertical'" | 9 | :vertical="mode === 'vertical'" |
| 10 | v-model="snackbar" | 10 | v-model="snackbar" |
| 11 | color="success" | 11 | color="success" |
| 12 | >{{ text }}</v-snackbar> | 12 | >{{ text }}</v-snackbar> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-container fluid grid-list-md> | 14 | <v-container fluid grid-list-md> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12 md4> | 16 | <v-flex xs12 sm12 md4> |
| 17 | <v-card flat class="mb-4"> | 17 | <v-card flat class="mb-4"> |
| 18 | <v-toolbar dark class="card-styles" flat> | 18 | <v-toolbar dark class="card-styles" flat> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <h3>Profile</h3> | 20 | <h3>Profile</h3> |
| 21 | <v-spacer></v-spacer> | 21 | <v-spacer></v-spacer> |
| 22 | </v-toolbar> | 22 | </v-toolbar> |
| 23 | <!-- Profile User--> | 23 | <!-- Profile User--> |
| 24 | <v-card-text> | 24 | <v-card-text> |
| 25 | <v-container> | 25 | <v-container> |
| 26 | <v-layout wrap> | 26 | <v-layout wrap> |
| 27 | <v-flex xs12> | 27 | <v-flex xs12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex | 29 | <v-flex |
| 30 | xs12 | 30 | xs12 |
| 31 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 31 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 32 | > | 32 | > |
| 33 | <v-avatar size="80px"> | 33 | <v-avatar size="80px"> |
| 34 | <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" /> | 34 | <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" /> |
| 35 | <img | 35 | <img |
| 36 | :src="editPayment.profilePicUrl" | 36 | :src="editPayment.profilePicUrl" |
| 37 | v-else-if="editPayment.profilePicUrl" | 37 | v-else-if="editPayment.profilePicUrl" |
| 38 | /> | 38 | /> |
| 39 | </v-avatar> | 39 | </v-avatar> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs12 sm12> | 43 | <v-flex xs12 sm12> |
| 44 | <h3 class="text-xs-center"> | 44 | <h3 class="text-xs-center"> |
| 45 | <b>{{ editPayment.studentId.name }}</b> | 45 | <b>{{ editPayment.studentId.name }}</b> |
| 46 | </h3> | 46 | </h3> |
| 47 | <p class="text-xs-center grey--text">Student</p> | 47 | <p class="text-xs-center grey--text">Student</p> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | </v-layout> | 49 | </v-layout> |
| 50 | <v-layout style="border: 1px solid lightgrey;"> | 50 | <v-layout style="border: 1px solid lightgrey;"> |
| 51 | <v-flex xs6 sm6 class="pa-0"> | 51 | <v-flex xs6 sm6 class="pa-0"> |
| 52 | <h4 class="right"> | 52 | <h4 class="right"> |
| 53 | <b>Roll No :</b> | 53 | <b>Roll No :</b> |
| 54 | </h4> | 54 | </h4> |
| 55 | </v-flex> | 55 | </v-flex> |
| 56 | <v-flex sm6 xs6 class="pa-0"> | 56 | <v-flex sm6 xs6 class="pa-0"> |
| 57 | <h4>{{ editPayment.studentId.rollNo }}</h4> | 57 | <h4>{{ editPayment.studentId.rollNo }}</h4> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | <v-layout style="border: 1px solid lightgrey;"> | 60 | <v-layout style="border: 1px solid lightgrey;"> |
| 61 | <v-flex xs6 sm6 class="pa-0"> | 61 | <v-flex xs6 sm6 class="pa-0"> |
| 62 | <h4 class="right"> | 62 | <h4 class="right"> |
| 63 | <b>Class :</b> | 63 | <b>Class :</b> |
| 64 | </h4> | 64 | </h4> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex sm6 xs6 class="pa-0"> | 66 | <v-flex sm6 xs6 class="pa-0"> |
| 67 | <h4>{{ editPayment.classId.classNum }}</h4> | 67 | <h4>{{ editPayment.classId.classNum }}</h4> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-layout> | 71 | </v-layout> |
| 72 | </v-container> | 72 | </v-container> |
| 73 | </v-card-text> | 73 | </v-card-text> |
| 74 | </v-card> | 74 | </v-card> |
| 75 | <!-- Account Fee Type List User--> | 75 | <!-- Account Fee Type List User--> |
| 76 | <v-card flat> | 76 | <v-card flat> |
| 77 | <v-toolbar dark class="card-styles" flat> | 77 | <v-toolbar dark class="card-styles" flat> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-toolbar-title> | 79 | <v-toolbar-title> |
| 80 | <h3>Invoice</h3> | 80 | <h3>Invoice</h3> |
| 81 | </v-toolbar-title> | 81 | </v-toolbar-title> |
| 82 | <v-spacer></v-spacer> | 82 | <v-spacer></v-spacer> |
| 83 | </v-toolbar> | 83 | </v-toolbar> |
| 84 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 84 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 85 | <v-layout> | 85 | <v-layout> |
| 86 | <v-flex xs4 class="pt-4 subheading"> | 86 | <v-flex xs4 class="pt-4 subheading"> |
| 87 | <label class="right">Payment Method:</label> | 87 | <label class="right">Payment Method:</label> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | <v-flex xs7 class="ml-3"> | 89 | <v-flex xs7 class="ml-3"> |
| 90 | <v-select | 90 | <v-select |
| 91 | :items="paymentMethods" | 91 | :items="paymentMethods" |
| 92 | v-model="editPayment.paymentMethod" | 92 | v-model="editPayment.paymentMethod" |
| 93 | label="Select Payment Method" | 93 | label="Select Payment Method" |
| 94 | ></v-select> | 94 | ></v-select> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | <v-card-actions> | 97 | <v-card-actions> |
| 98 | <v-spacer class="hidden-xs-only"></v-spacer> | 98 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 99 | <v-btn | 99 | <v-btn |
| 100 | color="open-dialog-button" | 100 | color="open-dialog-button" |
| 101 | round | ||
| 101 | dark | 102 | dark |
| 102 | class="right add-button" | 103 | class="right add-button" |
| 103 | @click="update(editPayment)" | 104 | @click="update(editPayment)" |
| 104 | >Add Payment</v-btn> | 105 | >Add Payment</v-btn> |
| 105 | </v-card-actions> | 106 | </v-card-actions> |
| 106 | </v-form> | 107 | </v-form> |
| 107 | </v-card> | 108 | </v-card> |
| 108 | </v-flex> | 109 | </v-flex> |
| 109 | <v-flex xs12 sm12 md8> | 110 | <v-flex xs12 sm12 md8> |
| 110 | <v-card> | 111 | <v-card> |
| 111 | <v-toolbar dark class="card-styles" flat> | 112 | <v-toolbar dark class="card-styles" flat> |
| 112 | <v-spacer></v-spacer> | 113 | <v-spacer></v-spacer> |
| 113 | <v-toolbar-title> | 114 | <v-toolbar-title> |
| 114 | <h3>Fee Type List</h3> | 115 | <h3>Fee Type List</h3> |
| 115 | </v-toolbar-title> | 116 | </v-toolbar-title> |
| 116 | <v-spacer></v-spacer> | 117 | <v-spacer></v-spacer> |
| 117 | </v-toolbar> | 118 | </v-toolbar> |
| 118 | <table class="feeTypeTable tableRsponsive"> | 119 | <table class="feeTypeTable tableRsponsive"> |
| 119 | <tr class="info white--text"> | 120 | <tr class="info white--text"> |
| 120 | <th>#</th> | 121 | <th>#</th> |
| 121 | <th>Fee Type</th> | 122 | <th>Fee Type</th> |
| 122 | <th>Amount</th> | 123 | <th>Amount</th> |
| 123 | <th>Discount</th> | 124 | <th>Discount</th> |
| 124 | <th>Subtotal</th> | 125 | <th>Subtotal</th> |
| 125 | <th>Paid Amount</th> | 126 | <th>Paid Amount</th> |
| 126 | <th>Action</th> | 127 | <th>Action</th> |
| 127 | </tr> | 128 | </tr> |
| 128 | <tr | 129 | <tr |
| 129 | v-for="(feeType, index) in editPayment.feeType" | 130 | v-for="(feeType, index) in editPayment.feeType" |
| 130 | :key="index" | 131 | :key="index" |
| 131 | v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)" | 132 | v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)" |
| 132 | > | 133 | > |
| 133 | <td style="width:40px">{{ index + 1 }}</td> | 134 | <td style="width:40px">{{ index + 1 }}</td> |
| 134 | <td style="width:120px">{{ feeType.feeTypeName }}</td> | 135 | <td style="width:120px">{{ feeType.feeTypeName }}</td> |
| 135 | <td> | 136 | <td> |
| 136 | <v-text-field | 137 | <v-text-field |
| 137 | placeholder="fill your Amount" | 138 | placeholder="fill your Amount" |
| 138 | v-model="feeType.amount" | 139 | v-model="feeType.amount" |
| 139 | type="number" | 140 | type="number" |
| 140 | ></v-text-field> | 141 | ></v-text-field> |
| 141 | </td> | 142 | </td> |
| 142 | <td> | 143 | <td> |
| 143 | <v-text-field | 144 | <v-text-field |
| 144 | placeholder="fill your Discount" | 145 | placeholder="fill your Discount" |
| 145 | v-model="feeType.discount" | 146 | v-model="feeType.discount" |
| 146 | type="number" | 147 | type="number" |
| 147 | ></v-text-field> | 148 | ></v-text-field> |
| 148 | </td> | 149 | </td> |
| 149 | <td>{{ feeType.subTotal }}</td> | 150 | <td>{{ feeType.subTotal }}</td> |
| 150 | <td> | 151 | <td> |
| 151 | <v-text-field | 152 | <v-text-field |
| 152 | placeholder="fill your Paid Amount" | 153 | placeholder="fill your Paid Amount" |
| 153 | v-model="feeType.paidAmount" | 154 | v-model="feeType.paidAmount" |
| 154 | type="number" | 155 | type="number" |
| 155 | ></v-text-field> | 156 | ></v-text-field> |
| 156 | </td> | 157 | </td> |
| 157 | <td v-if="!editPayment.feeType"> | 158 | <td v-if="!editPayment.feeType"> |
| 158 | <v-icon | 159 | <v-icon |
| 159 | color="error" | 160 | color="error" |
| 160 | @click="deleteSelectFee(feeType,editPayment.feeType,index)" | 161 | @click="deleteSelectFee(feeType,editPayment.feeType,index)" |
| 161 | >delete</v-icon> | 162 | >delete</v-icon> |
| 162 | </td> | 163 | </td> |
| 163 | </tr> | 164 | </tr> |
| 164 | <tfoot v-if="feeType.amount != 0.00"> | 165 | <tfoot v-if="feeType.amount != 0.00"> |
| 165 | <tr> | 166 | <tr> |
| 166 | <td colspan="2">Total:</td> | 167 | <td colspan="2">Total:</td> |
| 167 | <td>{{ feeType.amount }}</td> | 168 | <td>{{ feeType.amount }}</td> |
| 168 | <td>{{ feeType.discount }}</td> | 169 | <td>{{ feeType.discount }}</td> |
| 169 | <td>{{ feeType.subTotal }}</td> | 170 | <td>{{ feeType.subTotal }}</td> |
| 170 | <td>{{ feeType.paidAmount }}</td> | 171 | <td>{{ feeType.paidAmount }}</td> |
| 171 | </tr> | 172 | </tr> |
| 172 | </tfoot> | 173 | </tfoot> |
| 173 | <tfoot v-else-if="feeType.amount == 0.00"> | 174 | <tfoot v-else-if="feeType.amount == 0.00"> |
| 174 | <tr> | 175 | <tr> |
| 175 | <td colspan="2">Total:</td> | 176 | <td colspan="2">Total:</td> |
| 176 | <td>{{ editPayment.totalAmount }}</td> | 177 | <td>{{ editPayment.totalAmount }}</td> |
| 177 | <td>{{ editPayment.totalDiscount }}</td> | 178 | <td>{{ editPayment.totalDiscount }}</td> |
| 178 | <td>{{ editPayment.totalSubTotal }}</td> | 179 | <td>{{ editPayment.totalSubTotal }}</td> |
| 179 | <td>{{ editPayment.totalPaidAmount }}</td> | 180 | <td>{{ editPayment.totalPaidAmount }}</td> |
| 180 | </tr> | 181 | </tr> |
| 181 | </tfoot> | 182 | </tfoot> |
| 182 | </table> | 183 | </table> |
| 183 | </v-card> | 184 | </v-card> |
| 184 | </v-flex> | 185 | </v-flex> |
| 185 | </v-layout> | 186 | </v-layout> |
| 186 | </v-container> | 187 | </v-container> |
| 187 | </v-flex> | 188 | </v-flex> |
| 188 | <div class="loader" v-if="showLoader"> | 189 | <div class="loader" v-if="showLoader"> |
| 189 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 190 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 190 | </div> | 191 | </div> |
| 191 | </v-app> | 192 | </v-app> |
| 192 | </template> | 193 | </template> |
| 193 | 194 | ||
| 194 | <script> | 195 | <script> |
| 195 | import http from "@/Services/http.js"; | 196 | import http from "@/Services/http.js"; |
| 196 | import moment from "moment"; | 197 | import moment from "moment"; |
| 197 | 198 | ||
| 198 | export default { | 199 | export default { |
| 199 | props: ["editPayment"], | 200 | props: ["editPayment"], |
| 200 | data: () => ({ | 201 | data: () => ({ |
| 201 | snackbar: false, | 202 | snackbar: false, |
| 202 | // showPayMethods: false, | 203 | // showPayMethods: false, |
| 203 | y: "top", | 204 | y: "top", |
| 204 | x: "right", | 205 | x: "right", |
| 205 | mode: "", | 206 | mode: "", |
| 206 | timeout: 3000, | 207 | timeout: 3000, |
| 207 | text: "", | 208 | text: "", |
| 208 | showLoader: false, | 209 | showLoader: false, |
| 209 | loading: false, | 210 | loading: false, |
| 210 | date: null, | 211 | date: null, |
| 211 | search: "", | 212 | search: "", |
| 212 | // dialog: false, | 213 | // dialog: false, |
| 213 | // dialog1: false, | 214 | // dialog1: false, |
| 214 | valid: true, | 215 | valid: true, |
| 215 | validEdit: true, | 216 | validEdit: true, |
| 216 | // isActive: true, | 217 | // isActive: true, |
| 217 | // newActive: false, | 218 | // newActive: false, |
| 218 | showFeeType: false, | 219 | showFeeType: false, |
| 219 | disabled: true, | 220 | disabled: true, |
| 220 | details: [], | 221 | details: [], |
| 221 | feeTypes: [], | 222 | feeTypes: [], |
| 222 | menu1: false, | 223 | menu1: false, |
| 223 | // invoiceData: {}, | 224 | // invoiceData: {}, |
| 224 | paymentMethods: ["Cash", "Cheque"], | 225 | paymentMethods: ["Cash", "Cheque"], |
| 225 | feeType: { | 226 | feeType: { |
| 226 | amount: "0.00", | 227 | amount: "0.00", |
| 227 | discount: "0.00", | 228 | discount: "0.00", |
| 228 | paidAmount: "0.00", | 229 | paidAmount: "0.00", |
| 229 | subTotal: "0.00", | 230 | subTotal: "0.00", |
| 230 | feeTypeName: "", | 231 | feeTypeName: "", |
| 231 | }, | 232 | }, |
| 232 | feeTypeData: [], | 233 | feeTypeData: [], |
| 233 | pagination: { | 234 | pagination: { |
| 234 | rowsPerPage: 15, | 235 | rowsPerPage: 15, |
| 235 | }, | 236 | }, |
| 236 | token: "", | 237 | token: "", |
| 237 | editedItem: {}, | 238 | editedItem: {}, |
| 238 | invoiceParticularData: {}, | 239 | invoiceParticularData: {}, |
| 239 | addclass: [], | 240 | addclass: [], |
| 240 | studentList: [], | 241 | studentList: [], |
| 241 | paymentStatus: [ | 242 | paymentStatus: [ |
| 242 | { | 243 | { |
| 243 | name: "Not Paid", | 244 | name: "Not Paid", |
| 244 | value: "NOT_PAID", | 245 | value: "NOT_PAID", |
| 245 | }, | 246 | }, |
| 246 | { | 247 | { |
| 247 | name: "Partially Paid", | 248 | name: "Partially Paid", |
| 248 | value: "PARTIALLY_PAID", | 249 | value: "PARTIALLY_PAID", |
| 249 | }, | 250 | }, |
| 250 | { | 251 | { |
| 251 | name: "Fully Paid", | 252 | name: "Fully Paid", |
| 252 | value: "FULLY_PAID", | 253 | value: "FULLY_PAID", |
| 253 | }, | 254 | }, |
| 254 | ], | 255 | ], |
| 255 | }), | 256 | }), |
| 256 | // watch: { | 257 | // watch: { |
| 257 | // menu1(val) { | 258 | // menu1(val) { |
| 258 | // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 259 | // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 259 | // } | 260 | // } |
| 260 | // }, | 261 | // }, |
| 261 | methods: { | 262 | methods: { |
| 262 | save(date) { | 263 | save(date) { |
| 263 | this.$refs.menu1.save(date); | 264 | this.$refs.menu1.save(date); |
| 264 | }, | 265 | }, |
| 265 | dates: function (date) { | 266 | dates: function (date) { |
| 266 | return moment(date).format("MMMM DD, YYYY"); | 267 | return moment(date).format("MMMM DD, YYYY"); |
| 267 | }, | 268 | }, |
| 268 | update(editPayment) { | 269 | update(editPayment) { |
| 269 | // console.log("editPayment-----------", editPayment); | 270 | // console.log("editPayment-----------", editPayment); |
| 270 | let feeTypeId = ""; | 271 | let feeTypeId = ""; |
| 271 | for (let i = 0; i < this.feeTypes.length; i++) { | 272 | for (let i = 0; i < this.feeTypes.length; i++) { |
| 272 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { | 273 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { |
| 273 | feeTypeId = this.feeTypes[i]._id; | 274 | feeTypeId = this.feeTypes[i]._id; |
| 274 | } | 275 | } |
| 275 | } | 276 | } |
| 276 | // console.log(editPayment); | 277 | // console.log(editPayment); |
| 277 | let editInvoiceData = { | 278 | let editInvoiceData = { |
| 278 | invoiceId: editPayment._id, | 279 | invoiceId: editPayment._id, |
| 279 | classId: editPayment.classNum, | 280 | classId: editPayment.classNum, |
| 280 | studentId: editPayment.sectionId, | 281 | studentId: editPayment.sectionId, |
| 281 | date: editPayment.date, | 282 | date: editPayment.date, |
| 282 | paymentStatus: editPayment.paymentStatus, | 283 | paymentStatus: editPayment.paymentStatus, |
| 283 | paymentMethod: editPayment.paymentMethod, | 284 | paymentMethod: editPayment.paymentMethod, |
| 284 | feeType: editPayment.feeType, | 285 | feeType: editPayment.feeType, |
| 285 | totalAmount: this.feeType.amount.toString(), | 286 | totalAmount: this.feeType.amount.toString(), |
| 286 | totalDiscount: this.feeType.discount.toString(), | 287 | totalDiscount: this.feeType.discount.toString(), |
| 287 | totalSubTotal: this.feeType.subTotal.toString(), | 288 | totalSubTotal: this.feeType.subTotal.toString(), |
| 288 | totalPaidAmount: this.feeType.paidAmount, | 289 | totalPaidAmount: this.feeType.paidAmount, |
| 289 | }; | 290 | }; |
| 290 | if (feeTypeId == "") { | 291 | if (feeTypeId == "") { |
| 291 | delete editInvoiceData.feeType[0].feeTypeId; | 292 | delete editInvoiceData.feeType[0].feeTypeId; |
| 292 | } | 293 | } |
| 293 | if (editInvoiceData.paymentStatus == "NOT_PAID") { | 294 | if (editInvoiceData.paymentStatus == "NOT_PAID") { |
| 294 | delete editInvoiceData.paymentMethod; | 295 | delete editInvoiceData.paymentMethod; |
| 295 | } | 296 | } |
| 296 | if (editInvoiceData.totalPaidAmount == "0") { | 297 | if (editInvoiceData.totalPaidAmount == "0") { |
| 297 | if (editInvoiceData.paymentStatus == "NOT_PAID") { | 298 | if (editInvoiceData.paymentStatus == "NOT_PAID") { |
| 298 | delete editInvoiceData.totalPaidAmount; | 299 | delete editInvoiceData.totalPaidAmount; |
| 299 | } | 300 | } |
| 300 | } | 301 | } |
| 301 | if (editInvoiceData.totalPaidAmount != "0.00") { | 302 | if (editInvoiceData.totalPaidAmount != "0.00") { |
| 302 | if (this.feeType.subTotal == this.feeType.paidAmount) { | 303 | if (this.feeType.subTotal == this.feeType.paidAmount) { |
| 303 | editInvoiceData.paymentStatus = "FULLY_PAID"; | 304 | editInvoiceData.paymentStatus = "FULLY_PAID"; |
| 304 | } | 305 | } |
| 305 | if (editInvoiceData.totalPaidAmount) { | 306 | if (editInvoiceData.totalPaidAmount) { |
| 306 | if (this.feeType.subTotal != this.feeType.paidAmount) { | 307 | if (this.feeType.subTotal != this.feeType.paidAmount) { |
| 307 | editInvoiceData.paymentStatus = "PARTIALLY_PAID"; | 308 | editInvoiceData.paymentStatus = "PARTIALLY_PAID"; |
| 308 | // console.log("PARTIALLY_PAID"); | 309 | // console.log("PARTIALLY_PAID"); |
| 309 | } | 310 | } |
| 310 | } | 311 | } |
| 311 | } | 312 | } |
| 312 | 313 | ||
| 313 | if (editInvoiceData.totalSubTotal == "0.00") { | 314 | if (editInvoiceData.totalSubTotal == "0.00") { |
| 314 | editInvoiceData.paymentStatus = "FULLY_PAID"; | 315 | editInvoiceData.paymentStatus = "FULLY_PAID"; |
| 315 | } else if (editInvoiceData.totalSubTotal != "0.00") { | 316 | } else if (editInvoiceData.totalSubTotal != "0.00") { |
| 316 | if (this.feeType.paidAmount === "0.00") { | 317 | if (this.feeType.paidAmount === "0.00") { |
| 317 | editInvoiceData.paymentStatus = "NOT_PAID"; | 318 | editInvoiceData.paymentStatus = "NOT_PAID"; |
| 318 | } | 319 | } |
| 319 | } | 320 | } |
| 320 | http() | 321 | http() |
| 321 | .put("/updateInvoice", editInvoiceData) | 322 | .put("/updateInvoice", editInvoiceData) |
| 322 | .then((response) => { | 323 | .then((response) => { |
| 323 | // this.getInvoiceList(); | 324 | // this.getInvoiceList(); |
| 324 | this.snackbar = true; | 325 | this.snackbar = true; |
| 325 | this.text = "Payment added successfully"; | 326 | this.text = "Payment added successfully"; |
| 326 | this.loading = false; | 327 | this.loading = false; |
| 327 | this.$emit("update-Payment"); | 328 | this.$emit("update-Payment"); |
| 328 | }) | 329 | }) |
| 329 | .catch((error) => { | 330 | .catch((error) => { |
| 330 | // console.log(error); | 331 | // console.log(error); |
| 331 | this.snackbar = true; | 332 | this.snackbar = true; |
| 332 | this.text = error.response.data.message; | 333 | this.text = error.response.data.message; |
| 333 | this.loading = false; | 334 | this.loading = false; |
| 334 | }); | 335 | }); |
| 335 | }, | 336 | }, |
| 336 | clear() { | 337 | clear() { |
| 337 | this.$refs.form.reset(); | 338 | this.$refs.form.reset(); |
| 338 | }, | 339 | }, |
| 339 | deleteSelectFee: function (feeTyp, feeTypeList, index) { | 340 | deleteSelectFee: function (feeTyp, feeTypeList, index) { |
| 340 | this.editPayment.feeType.splice(index, 1); | 341 | this.editPayment.feeType.splice(index, 1); |
| 341 | this.getAmmountDetails(feeTyp, feeTypeList); | 342 | this.getAmmountDetails(feeTyp, feeTypeList); |
| 342 | if (this.feeTypeData.length == 0) { | 343 | if (this.feeTypeData.length == 0) { |
| 343 | this.feeType = { | 344 | this.feeType = { |
| 344 | amount: "0.00", | 345 | amount: "0.00", |
| 345 | discount: "0.00", | 346 | discount: "0.00", |
| 346 | paidAmount: "0.00", | 347 | paidAmount: "0.00", |
| 347 | subTotal: "0.00", | 348 | subTotal: "0.00", |
| 348 | feeTypeList: "", | 349 | feeTypeList: "", |
| 349 | }; | 350 | }; |
| 350 | } | 351 | } |
| 351 | }, | 352 | }, |
| 352 | getAllClasses() { | 353 | getAllClasses() { |
| 353 | http() | 354 | http() |
| 354 | .get("/getClassesList", { | 355 | .get("/getClassesList", { |
| 355 | headers: { Authorization: "Bearer " + this.token }, | 356 | headers: { Authorization: "Bearer " + this.token }, |
| 356 | }) | 357 | }) |
| 357 | .then((response) => { | 358 | .then((response) => { |
| 358 | this.addclass = response.data.data; | 359 | this.addclass = response.data.data; |
| 359 | this.getAllStudents(); | 360 | this.getAllStudents(); |
| 360 | }) | 361 | }) |
| 361 | .catch((error) => { | 362 | .catch((error) => { |
| 362 | // console.log("err====>", err); | 363 | // console.log("err====>", err); |
| 363 | this.showLoader = false; | 364 | this.showLoader = false; |
| 364 | if (error.response.status === 401) { | 365 | if (error.response.status === 401) { |
| 365 | this.$router.replace({ path: "/" }); | 366 | this.$router.replace({ path: "/" }); |
| 366 | this.$store.dispatch("setToken", null); | 367 | this.$store.dispatch("setToken", null); |
| 367 | this.$store.dispatch("Id", null); | 368 | this.$store.dispatch("Id", null); |
| 368 | this.$store.dispatch("Role", null); | 369 | this.$store.dispatch("Role", null); |
| 369 | } | 370 | } |
| 370 | }); | 371 | }); |
| 371 | }, | 372 | }, |
| 372 | getAllStudents() { | 373 | getAllStudents() { |
| 373 | http() | 374 | http() |
| 374 | .get("/getStudentsList", { | 375 | .get("/getStudentsList", { |
| 375 | params: { classId: this.editPayment.classNum }, | 376 | params: { classId: this.editPayment.classNum }, |
| 376 | headers: { Authorization: "Bearer " + this.token }, | 377 | headers: { Authorization: "Bearer " + this.token }, |
| 377 | }) | 378 | }) |
| 378 | .then((response) => { | 379 | .then((response) => { |
| 379 | this.studentList = response.data.data; | 380 | this.studentList = response.data.data; |
| 380 | }) | 381 | }) |
| 381 | .catch((err) => { | 382 | .catch((err) => { |
| 382 | // console.log("err====>", err); | 383 | // console.log("err====>", err); |
| 383 | }); | 384 | }); |
| 384 | }, | 385 | }, |
| 385 | getfeeType() { | 386 | getfeeType() { |
| 386 | http() | 387 | http() |
| 387 | .get("/getFeesList", { | 388 | .get("/getFeesList", { |
| 388 | headers: { Authorization: "Bearer " + this.token }, | 389 | headers: { Authorization: "Bearer " + this.token }, |
| 389 | }) | 390 | }) |
| 390 | .then((response) => { | 391 | .then((response) => { |
| 391 | this.feeTypes = response.data.data; | 392 | this.feeTypes = response.data.data; |
| 392 | }) | 393 | }) |
| 393 | .catch((err) => { | 394 | .catch((err) => { |
| 394 | // console.log("err====>", err); | 395 | // console.log("err====>", err); |
| 395 | }); | 396 | }); |
| 396 | }, | 397 | }, |
| 397 | getAmmountDetails(feeTyp, feeTypeList) { | 398 | getAmmountDetails(feeTyp, feeTypeList) { |
| 398 | this.feeTypeData = feeTypeList; | 399 | this.feeTypeData = feeTypeList; |
| 399 | let feeType = { | 400 | let feeType = { |
| 400 | amount: "", | 401 | amount: "", |
| 401 | discount: "", | 402 | discount: "", |
| 402 | subTotal: "", | 403 | subTotal: "", |
| 403 | subParticularTotal: "", | 404 | subParticularTotal: "", |
| 404 | paidAmount: "", | 405 | paidAmount: "", |
| 405 | }; | 406 | }; |
| 406 | for (let i = 0; i < this.feeTypeData.length; i++) { | 407 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 407 | // *********** AMOUNT *********** | 408 | // *********** AMOUNT *********** |
| 408 | if (this.feeTypeData[i].amount) { | 409 | if (this.feeTypeData[i].amount) { |
| 409 | feeType.amount = | 410 | feeType.amount = |
| 410 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 411 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 411 | this.feeType.amount = feeType.amount; | 412 | this.feeType.amount = feeType.amount; |
| 412 | this.feeType.subTotal = feeType.amount; | 413 | this.feeType.subTotal = feeType.amount; |
| 413 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; | 414 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; |
| 414 | } else if (this.feeTypeData[0].amount == "") { | 415 | } else if (this.feeTypeData[0].amount == "") { |
| 415 | this.feeType.amount = "0.00"; | 416 | this.feeType.amount = "0.00"; |
| 416 | this.feeTypeData[i].subTotal = "0.00"; | 417 | this.feeTypeData[i].subTotal = "0.00"; |
| 417 | this.feeType.subTotal = "0.00"; | 418 | this.feeType.subTotal = "0.00"; |
| 418 | } else if (this.feeTypeData[i].amount == "") { | 419 | } else if (this.feeTypeData[i].amount == "") { |
| 419 | this.feeType.amount = | 420 | this.feeType.amount = |
| 420 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 421 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 421 | this.feeTypeData[i].subTotal = | 422 | this.feeTypeData[i].subTotal = |
| 422 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 423 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 423 | this.feeType.subTotal = | 424 | this.feeType.subTotal = |
| 424 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 425 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 425 | } | 426 | } |
| 426 | // *********** DISCOUNT *********** | 427 | // *********** DISCOUNT *********** |
| 427 | if (this.feeTypeData[i].discount) { | 428 | if (this.feeTypeData[i].discount) { |
| 428 | if ( | 429 | if ( |
| 429 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount | 430 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount |
| 430 | ) { | 431 | ) { |
| 431 | feeType.discount = | 432 | feeType.discount = |
| 432 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 433 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 433 | this.feeType.discount = feeType.discount; | 434 | this.feeType.discount = feeType.discount; |
| 434 | feeType.subParticularTotal = | 435 | feeType.subParticularTotal = |
| 435 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 436 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 436 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( | 437 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( |
| 437 | 2 | 438 | 2 |
| 438 | ); | 439 | ); |
| 439 | } else if ( | 440 | } else if ( |
| 440 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount | 441 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount |
| 441 | ) { | 442 | ) { |
| 442 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; | 443 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; |
| 443 | feeType.discount = | 444 | feeType.discount = |
| 444 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 445 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 445 | this.feeType.discount = feeType.discount.toString(); | 446 | this.feeType.discount = feeType.discount.toString(); |
| 446 | feeType.subParticularTotal = | 447 | feeType.subParticularTotal = |
| 447 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 448 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 448 | this.feeTypeData[ | 449 | this.feeTypeData[ |
| 449 | i | 450 | i |
| 450 | ].subTotal = feeType.subParticularTotal.toString(); | 451 | ].subTotal = feeType.subParticularTotal.toString(); |
| 451 | } | 452 | } |
| 452 | } else if (this.feeTypeData[0].discount == "") { | 453 | } else if (this.feeTypeData[0].discount == "") { |
| 453 | this.feeType.discount = "0.00"; | 454 | this.feeType.discount = "0.00"; |
| 454 | } | 455 | } |
| 455 | 456 | ||
| 456 | // *********** SUBTOTAL *********** | 457 | // *********** SUBTOTAL *********** |
| 457 | if (this.feeTypeData[i].subTotal) { | 458 | if (this.feeTypeData[i].subTotal) { |
| 458 | feeType.subTotal = | 459 | feeType.subTotal = |
| 459 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | 460 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); |
| 460 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | 461 | this.feeType.subTotal = feeType.subTotal.toFixed(2); |
| 461 | } | 462 | } |
| 462 | 463 | ||
| 463 | // *********** PAID-AMOUNT *********** | 464 | // *********** PAID-AMOUNT *********** |
| 464 | if (this.feeTypeData[i].paidAmount) { | 465 | if (this.feeTypeData[i].paidAmount) { |
| 465 | feeType.paidAmount = | 466 | feeType.paidAmount = |
| 466 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 467 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 467 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | 468 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); |
| 468 | } else if (this.feeTypeData[0].paidAmount == "") { | 469 | } else if (this.feeTypeData[0].paidAmount == "") { |
| 469 | this.feeType.paidAmount = "0.00"; | 470 | this.feeType.paidAmount = "0.00"; |
| 470 | } else if (this.feeTypeData[i].paidAmount == "") { | 471 | } else if (this.feeTypeData[i].paidAmount == "") { |
| 471 | this.feeType.paidAmount = feeType.paidAmount = | 472 | this.feeType.paidAmount = feeType.paidAmount = |
| 472 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 473 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 473 | } | 474 | } |
| 474 | 475 | ||
| 475 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. | 476 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. |
| 476 | if (feeType.paidAmount > feeType.subTotal) { | 477 | if (feeType.paidAmount > feeType.subTotal) { |
| 477 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; | 478 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; |
| 478 | this.feeType.paidAmount = feeType.subTotal; | 479 | this.feeType.paidAmount = feeType.subTotal; |
| 479 | } | 480 | } |
| 480 | } | 481 | } |
| 481 | }, | 482 | }, |
| 482 | // getPayMethodList() { | 483 | // getPayMethodList() { |
| 483 | // if (this.editPayment.paymentStatus == "PARTIALLY_PAID") { | 484 | // if (this.editPayment.paymentStatus == "PARTIALLY_PAID") { |
| 484 | // this.showPayMethods = true; | 485 | // this.showPayMethods = true; |
| 485 | // } else if (this.editPayment.paymentStatus == "FULLY_PAID") { | 486 | // } else if (this.editPayment.paymentStatus == "FULLY_PAID") { |
| 486 | // this.showPayMethods = true; | 487 | // this.showPayMethods = true; |
| 487 | // } else { | 488 | // } else { |
| 488 | // this.showPayMethods = false; | 489 | // this.showPayMethods = false; |
| 489 | // } | 490 | // } |
| 490 | // } | 491 | // } |
| 491 | }, | 492 | }, |
| 492 | mounted() { | 493 | mounted() { |
| 493 | this.token = this.$store.state.token; | 494 | this.token = this.$store.state.token; |
| 494 | this.getAllClasses(); | 495 | this.getAllClasses(); |
| 495 | this.getfeeType(); | 496 | this.getfeeType(); |
| 496 | }, | 497 | }, |
| 497 | created() { | 498 | created() { |
| 498 | this.$root.$on("app:search", (search) => { | 499 | this.$root.$on("app:search", (search) => { |
| 499 | this.search = search; | 500 | this.search = search; |
| 500 | }); | 501 | }); |
| 501 | }, | 502 | }, |
| 502 | beforeDestroy() { | 503 | beforeDestroy() { |
| 503 | // dont forget to remove the listener | 504 | // dont forget to remove the listener |
| 504 | this.$root.$off("app:search"); | 505 | this.$root.$off("app:search"); |
| 505 | }, | 506 | }, |
| 506 | }; | 507 | }; |
| 507 | </script> | 508 | </script> |
| 508 | 509 | ||
| 509 | 510 | ||
| 510 | <style scoped> | 511 | <style scoped> |
| 511 | .active { | 512 | .active { |
| 512 | background-color: gray; | 513 | background-color: gray; |
| 513 | color: white !important; | 514 | color: white !important; |
| 514 | } | 515 | } |
| 515 | .activebtn { | 516 | .activebtn { |
| 516 | color: black !important; | 517 | color: black !important; |
| 517 | } | 518 | } |
| 518 | table { | 519 | table { |
| 519 | border-collapse: collapse; | 520 | border-collapse: collapse; |
| 520 | border: 1px solid #e2e7eb; | 521 | border: 1px solid #e2e7eb; |
| 521 | } | 522 | } |
| 522 | 523 | ||
| 523 | th, | 524 | th, |
| 524 | td { | 525 | td { |
| 525 | border: 1px solid #e2e7eb; | 526 | border: 1px solid #e2e7eb; |
| 526 | padding: 10px; | 527 | padding: 10px; |
| 527 | text-align: center; | 528 | text-align: center; |
| 528 | } | 529 | } |
| 529 | table.feeTypeTable { | 530 | table.feeTypeTable { |
| 530 | table-layout: auto !important; | 531 | table-layout: auto !important; |
| 531 | width: 100% !important; | 532 | width: 100% !important; |
| 532 | } | 533 | } |
| 533 | @media screen and (max-width: 380px) { | 534 | @media screen and (max-width: 380px) { |
| 534 | .tableRsponsive { | 535 | .tableRsponsive { |
| 535 | display: block; | 536 | display: block; |
| 536 | position: relative; | 537 | position: relative; |
| 537 | overflow: scroll; | 538 | overflow: scroll; |
| 538 | } | 539 | } |
| 539 | } | 540 | } |
| 540 | </style> | 541 | </style> |
src/pages/Account/viewInvoice.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <!-- ****** Edit INVOICE ****** --> | 3 | <!-- ****** Edit INVOICE ****** --> |
| 4 | <v-container fluid grid-list-md> | 4 | <v-container fluid grid-list-md> |
| 5 | <v-flex xs12 sm12> | 5 | <v-flex xs12 sm12> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12 sm12 md10 class="mx-auto"> | 7 | <v-flex xs12 sm12 md10 class="mx-auto"> |
| 8 | <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()"> | 8 | <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()"> |
| 9 | 9 | ||
| 10 | <v-icon size="18" right dark>print</v-icon> | 10 | <v-icon size="18" right dark>print</v-icon> |
| 11 | </v-btn> | 11 | </v-btn> |
| 12 | </v-flex> | 12 | </v-flex> |
| 13 | </v-layout> | 13 | </v-layout> |
| 14 | <v-layout wrap> | 14 | <v-layout wrap> |
| 15 | <!-- ****** TABLE DATA MARK ****** --> | 15 | <!-- ****** TABLE DATA MARK ****** --> |
| 16 | <v-flex xs12 sm12 md10 lg10 class="mx-auto" id="printMe"> | 16 | <v-flex xs12 sm12 md10 lg10 class="mx-auto" id="printMe"> |
| 17 | <v-card | 17 | <v-card |
| 18 | style=" | 18 | style=" |
| 19 | background-color: #fff; | 19 | background-color: #fff; |
| 20 | border-color: #fff; | 20 | border-color: #fff; |
| 21 | color: rgba(0,0,0,0.87); | 21 | color: rgba(0,0,0,0.87); |
| 22 | border: 1px solid rgb(226, 231, 235); | 22 | border: 1px solid rgb(226, 231, 235); |
| 23 | -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16); | 23 | -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16); |
| 24 | box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);" | 24 | box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);" |
| 25 | > | 25 | > |
| 26 | <!-- <v-layout wrap> --> | 26 | <!-- <v-layout wrap> --> |
| 27 | <v-layout wrap> | 27 | <v-layout wrap> |
| 28 | <v-flex xs12 sm12 md12> | 28 | <v-flex xs12 sm12 md12> |
| 29 | <div | 29 | <div |
| 30 | style=" | 30 | style=" |
| 31 | border-bottom: 1px solid #ddd; | 31 | border-bottom: 1px solid #ddd; |
| 32 | overflow: hidden; | 32 | overflow: hidden; |
| 33 | vertical-align: middle; | 33 | vertical-align: middle; |
| 34 | margin: 10px; | 34 | margin: 10px; |
| 35 | padding-bottom: 10px;" | 35 | padding-bottom: 10px;" |
| 36 | > | 36 | > |
| 37 | <v-flex xs12 sm12 md12> | 37 | <v-flex xs12 sm12 md12> |
| 38 | <v-layout> | 38 | <v-layout> |
| 39 | <div class="school-logo"> | 39 | <div class="school-logo"> |
| 40 | <v-avatar size="100"> | 40 | <v-avatar size="100"> |
| 41 | <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> | 41 | <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> |
| 42 | <img | 42 | <img |
| 43 | src="/static/schoolIcons/INTRACK_White.png" | 43 | src="/static/schoolIcons/INTRACK_White.png" |
| 44 | v-else-if="!userData.schoolLogoUrl" | 44 | v-else-if="!userData.schoolLogoUrl" |
| 45 | /> | 45 | /> |
| 46 | </v-avatar> | 46 | </v-avatar> |
| 47 | </div> | 47 | </div> |
| 48 | <div class="school-name"> | 48 | <div class="school-name"> |
| 49 | <h2>{{ userData.name }}</h2> | 49 | <h2>{{ userData.name }}</h2> |
| 50 | </div> | 50 | </div> |
| 51 | </v-layout> | 51 | </v-layout> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </div> | 53 | </div> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | <!-- Profile School --> | 55 | <!-- Profile School --> |
| 56 | <v-layout> | 56 | <v-layout> |
| 57 | <!-- school info --> | 57 | <!-- school info --> |
| 58 | <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; "> | 58 | <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; "> |
| 59 | <v-layout wrap> | 59 | <v-layout wrap> |
| 60 | <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> | 60 | <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> |
| 61 | <span style="font-size: 16px; color: #707478;">From</span> | 61 | <span style="font-size: 16px; color: #707478;">From</span> |
| 62 | <br /> | 62 | <br /> |
| 63 | <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p> | 63 | <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p> |
| 64 | <p | 64 | <p |
| 65 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" | 65 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" |
| 66 | >{{ userData.address }}</p> | 66 | >{{ userData.address }}</p> |
| 67 | <p | 67 | <p |
| 68 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" | 68 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" |
| 69 | >Phone : {{ userData.mobile }}</p> | 69 | >Phone : {{ userData.mobile }}</p> |
| 70 | <p | 70 | <p |
| 71 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" | 71 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" |
| 72 | >Email : {{ userData.email }}</p> | 72 | >Email : {{ userData.email }}</p> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | <!-- student info --> | 74 | <!-- student info --> |
| 75 | <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> | 75 | <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> |
| 76 | <span style="font-size: 16px; color: #707478;">To</span> | 76 | <span style="font-size: 16px; color: #707478;">To</span> |
| 77 | <br /> | 77 | <br /> |
| 78 | <p | 78 | <p |
| 79 | style="font-size:20px;margin-bottom: 16px;" | 79 | style="font-size:20px;margin-bottom: 16px;" |
| 80 | >{{ invoiceParticularData.studentId.name }}</p> | 80 | >{{ invoiceParticularData.studentId.name }}</p> |
| 81 | <p | 81 | <p |
| 82 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" | 82 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" |
| 83 | >Class : {{ invoiceParticularData.classId.classNum }}</p> | 83 | >Class : {{ invoiceParticularData.classId.classNum }}</p> |
| 84 | <p | 84 | <p |
| 85 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" | 85 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" |
| 86 | >Roll : {{ invoiceParticularData.studentId.rollNo }}</p> | 86 | >Roll : {{ invoiceParticularData.studentId.rollNo }}</p> |
| 87 | <p | 87 | <p |
| 88 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" | 88 | style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" |
| 89 | >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p> | 89 | >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> | 91 | <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> |
| 92 | <br /> | 92 | <br /> |
| 93 | <p | 93 | <p |
| 94 | style="font-size: 15px;margin:0px;margin-bottom:8px;" | 94 | style="font-size: 15px;margin:0px;margin-bottom:8px;" |
| 95 | >Invoice #{{ invoiceParticularData.invoiceNumber }}</p> | 95 | >Invoice #{{ invoiceParticularData.invoiceNumber }}</p> |
| 96 | <br /> | 96 | <br /> |
| 97 | <p style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"> | 97 | <p style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"> |
| 98 | Status : | 98 | Status : |
| 99 | <span | 99 | <span |
| 100 | :style="invoiceParticularData.paymentStatus == 'FULLY_PAID' ? 'color:green' : '' || | 100 | :style="invoiceParticularData.paymentStatus == 'FULLY_PAID' ? 'color:green' : '' || |
| 101 | invoiceParticularData.paymentStatus == 'PARTIALLY_PAID' ? 'color:#f39c12 !important' : '' || | 101 | invoiceParticularData.paymentStatus == 'PARTIALLY_PAID' ? 'color:#f39c12 !important' : '' || |
| 102 | invoiceParticularData.paymentStatus == 'NOT_PAID' ? 'color:red !important' : '' " | 102 | invoiceParticularData.paymentStatus == 'NOT_PAID' ? 'color:red !important' : '' " |
| 103 | >{{ invoiceParticularData.paymentStatus }}</span> | 103 | >{{ invoiceParticularData.paymentStatus }}</span> |
| 104 | </p> | 104 | </p> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | </v-layout> | 109 | </v-layout> |
| 110 | <table | 110 | <table |
| 111 | class="tableRsponsive" | 111 | class="tableRsponsive" |
| 112 | style=" | 112 | style=" |
| 113 | table-layout: auto !important; | 113 | table-layout: auto !important; |
| 114 | width: 100% !important; | 114 | width: 100% !important; |
| 115 | border-collapse: collapse; | 115 | border-collapse: collapse; |
| 116 | border: 1px solid #e2e7eb;" | 116 | border: 1px solid #e2e7eb;" |
| 117 | > | 117 | > |
| 118 | <tr | 118 | <tr |
| 119 | class="white--text" | 119 | class="white--text" |
| 120 | style=" | 120 | style=" |
| 121 | background: #827bfa !important; | 121 | background: #827bfa !important; |
| 122 | border-color: #827bfa !important;" | 122 | border-color: #827bfa !important;" |
| 123 | > | 123 | > |
| 124 | <th | 124 | <th |
| 125 | style=" | 125 | style=" |
| 126 | border: 1px solid #e2e7eb; | 126 | border: 1px solid #e2e7eb; |
| 127 | padding: 10px; | 127 | padding: 10px; |
| 128 | text-align: center;" | 128 | text-align: center;" |
| 129 | >#</th> | 129 | >#</th> |
| 130 | <th | 130 | <th |
| 131 | style=" | 131 | style=" |
| 132 | border: 1px solid #e2e7eb; | 132 | border: 1px solid #e2e7eb; |
| 133 | padding: 10px; | 133 | padding: 10px; |
| 134 | text-align: center;" | 134 | text-align: center;" |
| 135 | >Fee Type</th> | 135 | >Fee Type</th> |
| 136 | <th | 136 | <th |
| 137 | style=" | 137 | style=" |
| 138 | border: 1px solid #e2e7eb; | 138 | border: 1px solid #e2e7eb; |
| 139 | padding: 10px; | 139 | padding: 10px; |
| 140 | text-align: center;" | 140 | text-align: center;" |
| 141 | >Amount</th> | 141 | >Amount</th> |
| 142 | <th | 142 | <th |
| 143 | style=" | 143 | style=" |
| 144 | border: 1px solid #e2e7eb; | 144 | border: 1px solid #e2e7eb; |
| 145 | padding: 10px; | 145 | padding: 10px; |
| 146 | text-align: center;" | 146 | text-align: center;" |
| 147 | >Discount</th> | 147 | >Discount</th> |
| 148 | <th | 148 | <th |
| 149 | style=" | 149 | style=" |
| 150 | border: 1px solid #e2e7eb; | 150 | border: 1px solid #e2e7eb; |
| 151 | padding: 10px; | 151 | padding: 10px; |
| 152 | text-align: center;" | 152 | text-align: center;" |
| 153 | >Subtotal</th> | 153 | >Subtotal</th> |
| 154 | </tr> | 154 | </tr> |
| 155 | <tr | 155 | <tr |
| 156 | v-for="(feeType, index) in feeTypeData" | 156 | v-for="(feeType, index) in feeTypeData" |
| 157 | :key="index" | 157 | :key="index" |
| 158 | v-on:keyup="getAmmountDetails(feeType)" | 158 | v-on:keyup="getAmmountDetails(feeType)" |
| 159 | > | 159 | > |
| 160 | <td | 160 | <td |
| 161 | style="width:40px; | 161 | style="width:40px; |
| 162 | border: 1px solid #e2e7eb; | 162 | border: 1px solid #e2e7eb; |
| 163 | padding: 10px; | 163 | padding: 10px; |
| 164 | text-align: center;" | 164 | text-align: center;" |
| 165 | >{{ index + 1 }}</td> | 165 | >{{ index + 1 }}</td> |
| 166 | <td | 166 | <td |
| 167 | style=" | 167 | style=" |
| 168 | width:120px; | 168 | width:120px; |
| 169 | border: 1px solid #e2e7eb; | 169 | border: 1px solid #e2e7eb; |
| 170 | padding: 10px; | 170 | padding: 10px; |
| 171 | text-align: center;" | 171 | text-align: center;" |
| 172 | >{{ feeType.feeTypeName }}</td> | 172 | >{{ feeType.feeTypeName }}</td> |
| 173 | <td | 173 | <td |
| 174 | style="width:120px; | 174 | style="width:120px; |
| 175 | border: 1px solid #e2e7eb; | 175 | border: 1px solid #e2e7eb; |
| 176 | padding: 10px; | 176 | padding: 10px; |
| 177 | text-align: center;" | 177 | text-align: center;" |
| 178 | >{{ feeType.amount }}</td> | 178 | >{{ feeType.amount }}</td> |
| 179 | <td | 179 | <td |
| 180 | style="width:120px; | 180 | style="width:120px; |
| 181 | border: 1px solid #e2e7eb; | 181 | border: 1px solid #e2e7eb; |
| 182 | padding: 10px; | 182 | padding: 10px; |
| 183 | text-align: center;" | 183 | text-align: center;" |
| 184 | >{{ feeType.amount-feeType.subTotal }}</td> | 184 | >{{ feeType.amount-feeType.subTotal }}</td> |
| 185 | <td | 185 | <td |
| 186 | style="width:120px; | 186 | style="width:120px; |
| 187 | border: 1px solid #e2e7eb; | 187 | border: 1px solid #e2e7eb; |
| 188 | padding: 10px; | 188 | padding: 10px; |
| 189 | text-align: center;" | 189 | text-align: center;" |
| 190 | >{{ feeType.subTotal }}</td> | 190 | >{{ feeType.subTotal }}</td> |
| 191 | </tr> | 191 | </tr> |
| 192 | <tfoot> | 192 | <tfoot> |
| 193 | <tr> | 193 | <tr> |
| 194 | <td | 194 | <td |
| 195 | colspan="4" | 195 | colspan="4" |
| 196 | style=" | 196 | style=" |
| 197 | border: 1px solid #e2e7eb; | 197 | border: 1px solid #e2e7eb; |
| 198 | padding: 10px; | 198 | padding: 10px; |
| 199 | text-align: center;" | 199 | text-align: center;" |
| 200 | > | 200 | > |
| 201 | <span style="float:right">Total Amount (RS) :</span> | 201 | <span style="float:right">Total Amount (RS) :</span> |
| 202 | </td> | 202 | </td> |
| 203 | <td | 203 | <td |
| 204 | style=" | 204 | style=" |
| 205 | border: 1px solid #e2e7eb; | 205 | border: 1px solid #e2e7eb; |
| 206 | padding: 10px; | 206 | padding: 10px; |
| 207 | text-align: center;" | 207 | text-align: center;" |
| 208 | >{{ feeType.subTotal }}</td> | 208 | >{{ feeType.subTotal }}</td> |
| 209 | </tr> | 209 | </tr> |
| 210 | <tr> | 210 | <tr> |
| 211 | <td | 211 | <td |
| 212 | colspan="4" | 212 | colspan="4" |
| 213 | style=" | 213 | style=" |
| 214 | border: 1px solid #e2e7eb; | 214 | border: 1px solid #e2e7eb; |
| 215 | padding: 10px; | 215 | padding: 10px; |
| 216 | text-align: center;" | 216 | text-align: center;" |
| 217 | > | 217 | > |
| 218 | <span style="float:right">Paid (RS) :</span> | 218 | <span style="float:right">Paid (RS) :</span> |
| 219 | </td> | 219 | </td> |
| 220 | <td | 220 | <td |
| 221 | style=" | 221 | style=" |
| 222 | border: 1px solid #e2e7eb; | 222 | border: 1px solid #e2e7eb; |
| 223 | padding: 10px; | 223 | padding: 10px; |
| 224 | text-align: center;" | 224 | text-align: center;" |
| 225 | >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> | 225 | >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> |
| 226 | </tr> | 226 | </tr> |
| 227 | <tr> | 227 | <tr> |
| 228 | <td | 228 | <td |
| 229 | colspan="4" | 229 | colspan="4" |
| 230 | style=" | 230 | style=" |
| 231 | border: 1px solid #e2e7eb; | 231 | border: 1px solid #e2e7eb; |
| 232 | padding: 10px; | 232 | padding: 10px; |
| 233 | text-align: center;" | 233 | text-align: center;" |
| 234 | > | 234 | > |
| 235 | <span style="float:right">Discount :</span> | 235 | <span style="float:right">Discount :</span> |
| 236 | </td> | 236 | </td> |
| 237 | <td | 237 | <td |
| 238 | style=" | 238 | style=" |
| 239 | border: 1px solid #e2e7eb; | 239 | border: 1px solid #e2e7eb; |
| 240 | padding: 10px; | 240 | padding: 10px; |
| 241 | text-align: center;" | 241 | text-align: center;" |
| 242 | >{{ feeType.discount}}</td> | 242 | >{{ feeType.discount}}</td> |
| 243 | </tr> | 243 | </tr> |
| 244 | <tr> | 244 | <tr> |
| 245 | <td | 245 | <td |
| 246 | colspan="4" | 246 | colspan="4" |
| 247 | style=" | 247 | style=" |
| 248 | border: 1px solid #e2e7eb; | 248 | border: 1px solid #e2e7eb; |
| 249 | padding: 10px; | 249 | padding: 10px; |
| 250 | text-align: center;" | 250 | text-align: center;" |
| 251 | > | 251 | > |
| 252 | <span style="float:right">Balance (RS) :</span> | 252 | <span style="float:right">Balance (RS) :</span> |
| 253 | </td> | 253 | </td> |
| 254 | <td | 254 | <td |
| 255 | style=" | 255 | style=" |
| 256 | border: 1px solid #e2e7eb; | 256 | border: 1px solid #e2e7eb; |
| 257 | padding: 10px; | 257 | padding: 10px; |
| 258 | text-align: center;" | 258 | text-align: center;" |
| 259 | >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> | 259 | >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> |
| 260 | </tr> | 260 | </tr> |
| 261 | </tfoot> | 261 | </tfoot> |
| 262 | </table> | 262 | </table> |
| 263 | <v-layout> | 263 | <v-layout> |
| 264 | <v-flex xs12> | 264 | <v-flex xs12> |
| 265 | <v-card | 265 | <v-card |
| 266 | style=" | 266 | style=" |
| 267 | position:relative; | 267 | position:relative; |
| 268 | float:right !important; | 268 | float:right !important; |
| 269 | margin:10px 0px; | 269 | margin:10px 0px; |
| 270 | -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; | 270 | -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; |
| 271 | box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" | 271 | box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" |
| 272 | > | 272 | > |
| 273 | <div | 273 | <div |
| 274 | style=" | 274 | style=" |
| 275 | min-height: 20px; | 275 | min-height: 20px; |
| 276 | padding: 9px; | 276 | padding: 9px; |
| 277 | margin-bottom: 20px; | 277 | margin-bottom: 20px; |
| 278 | background-color: #f0f3f5; | 278 | background-color: #f0f3f5; |
| 279 | border: 1px solid #E2E7EB; | 279 | border: 1px solid #E2E7EB; |
| 280 | border-radius: 3px;" | 280 | border-radius: 3px;" |
| 281 | > | 281 | > |
| 282 | <p | 282 | <p |
| 283 | style=" | 283 | style=" |
| 284 | margin: 0 0 10px; | 284 | margin: 0 0 10px; |
| 285 | font-size: 12px;" | 285 | font-size: 12px;" |
| 286 | > | 286 | > |
| 287 | Create By : Admin | 287 | Create By : Admin |
| 288 | <br /> | 288 | <br /> |
| 289 | Date : {{ dates(invoiceParticularData.created) }} | 289 | Date : {{ dates(invoiceParticularData.created) }} |
| 290 | </p> | 290 | </p> |
| 291 | </div> | 291 | </div> |
| 292 | </v-card> | 292 | </v-card> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | </v-layout> | 294 | </v-layout> |
| 295 | </v-card> | 295 | </v-card> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | </v-container> | 299 | </v-container> |
| 300 | <div class="loader" v-if="showLoader"> | 300 | <div class="loader" v-if="showLoader"> |
| 301 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 301 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 302 | </div> | 302 | </div> |
| 303 | </v-app> | 303 | </v-app> |
| 304 | </template> | 304 | </template> |
| 305 | 305 | ||
| 306 | <script> | 306 | <script> |
| 307 | import http from "@/Services/http.js"; | 307 | import http from "@/Services/http.js"; |
| 308 | import moment from "moment"; | 308 | import moment from "moment"; |
| 309 | 309 | ||
| 310 | export default { | 310 | export default { |
| 311 | data: () => ({ | 311 | data: () => ({ |
| 312 | showLoader: false, | 312 | showLoader: false, |
| 313 | feeTypes: [], | 313 | feeTypes: [], |
| 314 | filterData: [], | 314 | filterData: [], |
| 315 | invoiceData: {}, | 315 | invoiceData: {}, |
| 316 | feeType: { | 316 | feeType: { |
| 317 | amount: "", | 317 | amount: "", |
| 318 | discount: "", | 318 | discount: "", |
| 319 | totalPaidAmount: "", | 319 | totalPaidAmount: "", |
| 320 | subTotal: "", | 320 | subTotal: "", |
| 321 | feeTypeName: "", | 321 | feeTypeName: "", |
| 322 | }, | 322 | }, |
| 323 | feeTypeData: [], | 323 | feeTypeData: [], |
| 324 | token: "", | 324 | token: "", |
| 325 | invoiceParticularData: { | 325 | invoiceParticularData: { |
| 326 | studentId: { | 326 | studentId: { |
| 327 | name: "", | 327 | name: "", |
| 328 | }, | 328 | }, |
| 329 | classId: { | 329 | classId: { |
| 330 | classNum: "", | 330 | classNum: "", |
| 331 | }, | 331 | }, |
| 332 | }, | 332 | }, |
| 333 | userData: { | 333 | userData: { |
| 334 | name: "", | 334 | name: "", |
| 335 | }, | 335 | }, |
| 336 | }), | 336 | }), |
| 337 | 337 | ||
| 338 | methods: { | 338 | methods: { |
| 339 | dates: function (date) { | 339 | dates: function (date) { |
| 340 | return moment(date).format("MMMM DD, YYYY"); | 340 | return moment(date).format("MMMM DD, YYYY"); |
| 341 | }, | 341 | }, |
| 342 | getInvoiceList() { | 342 | getInvoiceList() { |
| 343 | http() | 343 | http() |
| 344 | .get("/getParticularInvoice", { | 344 | .get("/getParticularInvoice", { |
| 345 | params: { | 345 | params: { |
| 346 | invoiceId: this.$route.params.viewInvoiceId, | 346 | invoiceId: this.$route.params.viewInvoiceId, |
| 347 | schoolId: this.$store.state.schoolId, | 347 | schoolId: this.$store.state.schoolId, |
| 348 | }, | 348 | }, |
| 349 | headers: { Authorization: "Bearer " + this.token }, | 349 | headers: { Authorization: "Bearer " + this.token }, |
| 350 | }) | 350 | }) |
| 351 | .then((response) => { | 351 | .then((response) => { |
| 352 | this.invoiceParticularData = response.data.data; | 352 | this.invoiceParticularData = response.data.data; |
| 353 | this.invoiceData = this.invoiceParticularData; | 353 | this.invoiceData = this.invoiceParticularData; |
| 354 | this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); | 354 | this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); |
| 355 | this.feeTypeData = this.invoiceParticularData.feeType; | 355 | this.feeTypeData = this.invoiceParticularData.feeType; |
| 356 | (this.feeType.amount = response.data.data.totalAmount), | 356 | (this.feeType.amount = response.data.data.totalAmount), |
| 357 | (this.feeType.discount = response.data.data.totalDiscount), | 357 | (this.feeType.discount = response.data.data.totalDiscount), |
| 358 | (this.feeType.subTotal = response.data.data.totalSubTotal), | 358 | (this.feeType.subTotal = response.data.data.totalSubTotal), |
| 359 | (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); | 359 | (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); |
| 360 | this.showLoader = false; | 360 | this.showLoader = false; |
| 361 | }) | 361 | }) |
| 362 | .catch((error) => { | 362 | .catch((error) => { |
| 363 | this.showLoader = false; | 363 | this.showLoader = false; |
| 364 | if (error.response.status === 401) { | 364 | if (error.response.status === 401) { |
| 365 | this.$router.replace({ path: "/" }); | 365 | this.$router.replace({ path: "/" }); |
| 366 | this.$store.dispatch("setToken", null); | 366 | this.$store.dispatch("setToken", null); |
| 367 | this.$store.dispatch("Id", null); | 367 | this.$store.dispatch("Id", null); |
| 368 | this.$store.dispatch("Role", null); | 368 | this.$store.dispatch("Role", null); |
| 369 | } | 369 | } |
| 370 | }); | 370 | }); |
| 371 | }, | 371 | }, |
| 372 | getfeeType() { | 372 | getfeeType() { |
| 373 | http() | 373 | http() |
| 374 | .get("/getFeesList", { | 374 | .get("/getFeesList", { |
| 375 | params: { schoolId: this.$store.state.schoolId }, | 375 | params: { schoolId: this.$store.state.schoolId }, |
| 376 | headers: { Authorization: "Bearer " + this.token }, | 376 | headers: { Authorization: "Bearer " + this.token }, |
| 377 | }) | 377 | }) |
| 378 | .then((response) => { | 378 | .then((response) => { |
| 379 | this.feeTypes = response.data.data; | 379 | this.feeTypes = response.data.data; |
| 380 | }) | 380 | }) |
| 381 | .catch((err) => { | 381 | .catch((err) => { |
| 382 | // console.log("err====>", err); | 382 | // console.log("err====>", err); |
| 383 | }); | 383 | }); |
| 384 | }, | 384 | }, |
| 385 | getAmmountDetails(feeTyp) { | 385 | getAmmountDetails(feeTyp) { |
| 386 | let feeType = { | 386 | let feeType = { |
| 387 | subTotal: "", | 387 | subTotal: "", |
| 388 | subParticularTotal: "", | 388 | subParticularTotal: "", |
| 389 | paidAmount: "", | 389 | paidAmount: "", |
| 390 | }; | 390 | }; |
| 391 | // *********** SUBTOTAL *********** | 391 | // *********** SUBTOTAL *********** |
| 392 | feeType.subTotal = | 392 | feeType.subTotal = |
| 393 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | 393 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); |
| 394 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | 394 | this.feeType.subTotal = feeType.subTotal.toFixed(2); |
| 395 | // *********** PAID-AMOUNT *********** | 395 | // *********** PAID-AMOUNT *********** |
| 396 | feeType.paidAmount = | 396 | feeType.paidAmount = |
| 397 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 397 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 398 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | 398 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); |
| 399 | }, | 399 | }, |
| 400 | printInvoice() { | 400 | printInvoice() { |
| 401 | // Pass the element id here | 401 | // Pass the element id here |
| 402 | this.$htmlToPaper("printMe"); | 402 | this.$htmlToPaper("printMe"); |
| 403 | }, | 403 | }, |
| 404 | getUserData() { | 404 | getUserData() { |
| 405 | http() | 405 | http() |
| 406 | .get("/getParticularUserDetail") | 406 | .get("/getParticularUserDetail") |
| 407 | .then((response) => { | 407 | .then((response) => { |
| 408 | this.userData = response.data.data; | 408 | this.userData = response.data.data; |
| 409 | }) | 409 | }) |
| 410 | .catch((error) => { | 410 | .catch((error) => { |
| 411 | if (error.response.status === 401) { | 411 | if (error.response.status === 401) { |
| 412 | this.$router.replace({ path: "/" }); | 412 | this.$router.replace({ path: "/" }); |
| 413 | this.$store.dispatch("setToken", null); | 413 | this.$store.dispatch("setToken", null); |
| 414 | this.$store.dispatch("Id", null); | 414 | this.$store.dispatch("Id", null); |
| 415 | } | 415 | } |
| 416 | }); | 416 | }); |
| 417 | }, | 417 | }, |
| 418 | }, | 418 | }, |
| 419 | mounted() { | 419 | mounted() { |
| 420 | this.token = this.$store.state.token; | 420 | this.token = this.$store.state.token; |
| 421 | this.getInvoiceList(); | 421 | this.getInvoiceList(); |
| 422 | this.getfeeType(); | 422 | this.getfeeType(); |
| 423 | this.getUserData(); | 423 | this.getUserData(); |
| 424 | }, | 424 | }, |
| 425 | created() { | 425 | created() { |
| 426 | this.$root.$on("app:search", (search) => { | 426 | this.$root.$on("app:search", (search) => { |
| 427 | this.search = search; | 427 | this.search = search; |
| 428 | }); | 428 | }); |
| 429 | }, | 429 | }, |
| 430 | beforeDestroy() { | 430 | beforeDestroy() { |
| 431 | // dont forget to remove the listener | 431 | // dont forget to remove the listener |
| 432 | this.$root.$off("app:search"); | 432 | this.$root.$off("app:search"); |
| 433 | }, | 433 | }, |
| 434 | }; | 434 | }; |
| 435 | </script> | 435 | </script> |
| 436 | 436 | ||
| 437 | 437 | ||
| 438 | <style> | 438 | <style> |
| 439 | /* table { | 439 | /* table { |
| 440 | border-collapse: collapse; | 440 | border-collapse: collapse; |
| 441 | border: 1px solid #e2e7eb; | 441 | border: 1px solid #e2e7eb; |
| 442 | } */ | 442 | } */ |
| 443 | .open-dialog-button { | 443 | .open-dialog-button { |
| 444 | background: #827bfa !important; | 444 | background: #827bfa !important; |
| 445 | border-color: #827bfa !important; | 445 | border-color: #827bfa !important; |
| 446 | text-transform: none !important; | 446 | text-transform: none !important; |
| 447 | } | 447 | } |
| 448 | .center { | 448 | .center { |
| 449 | text-align: center !important; | 449 | text-align: center !important; |
| 450 | } | 450 | } |
| 451 | .card-style { | 451 | .card-style { |
| 452 | background: #7f62f8 !important; | 452 | background: #7f62f8 !important; |
| 453 | border-color: #7f62f8 !important; | 453 | border-color: #7f62f8 !important; |
| 454 | border-radius: 12px; | 454 | border-radius: 12px; |
| 455 | text-align: center !important; | 455 | text-align: center !important; |
| 456 | padding-top: 10px !important; | 456 | padding-top: 10px !important; |
| 457 | } | 457 | } |
| 458 | .add-button { | 458 | /* .add-button { |
| 459 | background: #feb83c !important; | 459 | background: #feb83c !important; |
| 460 | border-color: #feb83c !important; | 460 | border-color: #feb83c !important; |
| 461 | text-transform: none !important; | 461 | text-transform: none !important; |
| 462 | -webkit-box-shadow: none !important; | 462 | -webkit-box-shadow: none !important; |
| 463 | box-shadow: none !important; | 463 | box-shadow: none !important; |
| 464 | } | 464 | } |
| 465 | .clear-button { | 465 | .clear-button { |
| 466 | background: #fa7676 !important; | 466 | background: #fa7676 !important; |
| 467 | border-color: #fa7676 !important; | 467 | border-color: #fa7676 !important; |
| 468 | text-transform: none !important; | 468 | text-transform: none !important; |
| 469 | -webkit-box-shadow: none !important; | 469 | -webkit-box-shadow: none !important; |
| 470 | box-shadow: none !important; | 470 | box-shadow: none !important; |
| 471 | } | 471 | } */ |
| 472 | .card-styles { | 472 | .card-styles { |
| 473 | background: #7f62f8 !important; | 473 | background: #7f62f8 !important; |
| 474 | border-color: #7f62f8 !important; | 474 | border-color: #7f62f8 !important; |
| 475 | } | 475 | } |
| 476 | .v-card__actions .v-btn { | 476 | .v-card__actions .v-btn { |
| 477 | margin: 0 15px !important; | 477 | margin: 0 15px !important; |
| 478 | min-width: 96px !important; | 478 | min-width: 96px !important; |
| 479 | } | 479 | } |
| 480 | /* th, | 480 | /* th, |
| 481 | td { | 481 | td { |
| 482 | border: 1px solid #e2e7eb; | 482 | border: 1px solid #e2e7eb; |
| 483 | padding: 10px; | 483 | padding: 10px; |
| 484 | text-align: center; | 484 | text-align: center; |
| 485 | } */ | 485 | } */ |
| 486 | table.feeTypeTable { | 486 | table.feeTypeTable { |
| 487 | table-layout: auto !important; | 487 | table-layout: auto !important; |
| 488 | width: 100% !important; | 488 | width: 100% !important; |
| 489 | } | 489 | } |
| 490 | @media screen and (max-width: 380px) { | 490 | @media screen and (max-width: 380px) { |
| 491 | .tableRsponsive { | 491 | .tableRsponsive { |
| 492 | display: block; | 492 | display: block; |
| 493 | position: relative; | 493 | position: relative; |
| 494 | overflow: scroll; | 494 | overflow: scroll; |
| 495 | } | 495 | } |
| 496 | } | 496 | } |
| 497 | </style> | 497 | </style> |
src/pages/Administrator/academicYear.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ACADEMIC YEAR ****** --> | 3 | <!-- ****** EDIT ACADEMIC YEAR ****** --> |
| 4 | <v-dialog v-model="editAcademinYearDialog" max-width="600px" persistent > | 4 | <v-dialog v-model="editAcademinYearDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Academic Year</label> | 8 | <label class="title text-xs-center">Edit Academic Year</label> |
| 9 | <v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 class="pt-4 subheading"> | 15 | <v-flex xs4 class="pt-4 subheading"> |
| 16 | <label class="right">Year:</label> | 16 | <label class="right">Year:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm7 class="ml-3"> | 18 | <v-flex xs8 sm7 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.year" | 20 | v-model="editedItem.year" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Year Title:</label> | 31 | <label class="right">Year Title:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 sm7 class="ml-3"> | 33 | <v-flex xs8 sm7 class="ml-3"> |
| 34 | <v-text-field | 34 | <v-text-field |
| 35 | v-model="editedItem.yearTitle" | 35 | v-model="editedItem.yearTitle" |
| 36 | placeholder="fill your Year Title" | 36 | placeholder="fill your Year Title" |
| 37 | name="name" | 37 | name="name" |
| 38 | type="text" | 38 | type="text" |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs12 sm12> | 43 | <v-flex xs12 sm12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 class="pt-4 subheading"> | 45 | <v-flex xs4 class="pt-4 subheading"> |
| 46 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> | 46 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> |
| 47 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> | 47 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs8 sm7 class="ml-3"> | 49 | <v-flex xs8 sm7 class="ml-3"> |
| 50 | <v-menu | 50 | <v-menu |
| 51 | ref="menu" | 51 | ref="menu" |
| 52 | :close-on-content-click="false" | 52 | :close-on-content-click="false" |
| 53 | v-model="menu" | 53 | v-model="menu" |
| 54 | :nudge-right="40" | 54 | :nudge-right="40" |
| 55 | lazy | 55 | lazy |
| 56 | transition="scale-transition" | 56 | transition="scale-transition" |
| 57 | offset-y | 57 | offset-y |
| 58 | full-width | 58 | full-width |
| 59 | min-width="290px" | 59 | min-width="290px" |
| 60 | > | 60 | > |
| 61 | <v-text-field | 61 | <v-text-field |
| 62 | slot="activator" | 62 | slot="activator" |
| 63 | v-model="editedItem.startingDate" | 63 | v-model="editedItem.startingDate" |
| 64 | placeholder="Select date" | 64 | placeholder="Select date" |
| 65 | ></v-text-field> | 65 | ></v-text-field> |
| 66 | <v-date-picker | 66 | <v-date-picker |
| 67 | color="info" | 67 | color="info" |
| 68 | ref="picker" | 68 | ref="picker" |
| 69 | v-model="editedItem.startingDate" | 69 | v-model="editedItem.startingDate" |
| 70 | @input="$refs.menu.save(editedItem.startingDate)" | 70 | @input="$refs.menu.save(editedItem.startingDate)" |
| 71 | ></v-date-picker> | 71 | ></v-date-picker> |
| 72 | </v-menu> | 72 | </v-menu> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <v-flex xs12 sm12> | 76 | <v-flex xs12 sm12> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-flex xs4 class="pt-4 subheading"> | 78 | <v-flex xs4 class="pt-4 subheading"> |
| 79 | <label class="right hidden-xs-only hidden-sm-only">Ending Date:</label> | 79 | <label class="right hidden-xs-only hidden-sm-only">Ending Date:</label> |
| 80 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label> | 80 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs8 sm7 class="ml-3"> | 82 | <v-flex xs8 sm7 class="ml-3"> |
| 83 | <v-menu | 83 | <v-menu |
| 84 | ref="menuEndDate" | 84 | ref="menuEndDate" |
| 85 | :close-on-content-click="false" | 85 | :close-on-content-click="false" |
| 86 | v-model="menuEndDate" | 86 | v-model="menuEndDate" |
| 87 | :nudge-right="40" | 87 | :nudge-right="40" |
| 88 | lazy | 88 | lazy |
| 89 | transition="scale-transition" | 89 | transition="scale-transition" |
| 90 | offset-y | 90 | offset-y |
| 91 | full-width | 91 | full-width |
| 92 | min-width="290px" | 92 | min-width="290px" |
| 93 | > | 93 | > |
| 94 | <v-text-field | 94 | <v-text-field |
| 95 | slot="activator" | 95 | slot="activator" |
| 96 | v-model="editedItem.endingDate" | 96 | v-model="editedItem.endingDate" |
| 97 | placeholder="Select date" | 97 | placeholder="Select date" |
| 98 | ></v-text-field> | 98 | ></v-text-field> |
| 99 | <v-date-picker | 99 | <v-date-picker |
| 100 | color="info" | 100 | color="info" |
| 101 | ref="picker" | 101 | ref="picker" |
| 102 | v-model="editedItem.endingDate" | 102 | v-model="editedItem.endingDate" |
| 103 | @input="$refs.menuEndDate.save(editedItem.endingDate)" | 103 | @input="$refs.menuEndDate.save(editedItem.endingDate)" |
| 104 | ></v-date-picker> | 104 | ></v-date-picker> |
| 105 | </v-menu> | 105 | </v-menu> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | </v-layout> | 107 | </v-layout> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12> | 110 | <v-flex xs12> |
| 111 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 111 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 112 | <v-spacer></v-spacer> | 112 | <v-spacer></v-spacer> |
| 113 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 113 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | </v-card-actions> | 115 | </v-card-actions> |
| 116 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 116 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 117 | <v-spacer></v-spacer> | 117 | <v-spacer></v-spacer> |
| 118 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 118 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 119 | <v-spacer></v-spacer> | 119 | <v-spacer></v-spacer> |
| 120 | </v-card-actions> | 120 | </v-card-actions> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | </v-container> | 123 | </v-container> |
| 124 | </v-card> | 124 | </v-card> |
| 125 | </v-dialog> | 125 | </v-dialog> |
| 126 | <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> | 126 | <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> |
| 127 | <v-dialog v-model="viewAcademinYearDialog" max-width="500px" persistent> | 127 | <v-dialog v-model="viewAcademinYearDialog" max-width="500px" persistent> |
| 128 | <v-card flat class="card-style pa-3" dark> | 128 | <v-card flat class="Card-style pa-3"> |
| 129 | <v-layout> | 129 | <v-layout> |
| 130 | <v-flex xs12> | 130 | <v-flex xs12> |
| 131 | <label class="title text-xs-center">View Academic Year</label> | 131 | <label class="title text-xs-center">View Academic Year</label> |
| 132 | <v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon> | 132 | <v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | <v-card-text> | 135 | <v-card-text> |
| 136 | <v-container grid-list-md> | 136 | <v-container grid-list-md> |
| 137 | <v-layout wrap> | 137 | <v-layout wrap> |
| 138 | <v-flex> | 138 | <v-flex> |
| 139 | <v-layout> | 139 | <v-layout> |
| 140 | <v-flex xs5 sm6> | 140 | <v-flex xs5 sm6> |
| 141 | <h5 class="right my-1"> | 141 | <h5 class="right my-1"> |
| 142 | <b>Title:</b> | 142 | <b>Title:</b> |
| 143 | </h5> | 143 | </h5> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex sm6 xs7> | 145 | <v-flex sm6 xs7> |
| 146 | <h5 class="my-1">{{ editedItem.year }}</h5> | 146 | <h5 class="my-1">{{ editedItem.year }}</h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | <v-layout> | 149 | <v-layout> |
| 150 | <v-flex xs5 sm6> | 150 | <v-flex xs5 sm6> |
| 151 | <h5 class="right my-1"> | 151 | <h5 class="right my-1"> |
| 152 | <b>Year Title:</b> | 152 | <b>Year Title:</b> |
| 153 | </h5> | 153 | </h5> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | <v-flex sm6 xs7> | 155 | <v-flex sm6 xs7> |
| 156 | <h5 class="my-1">{{ editedItem.yearTitle }}</h5> | 156 | <h5 class="my-1">{{ editedItem.yearTitle }}</h5> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | </v-layout> | 158 | </v-layout> |
| 159 | <v-layout> | 159 | <v-layout> |
| 160 | <v-flex xs5 sm6> | 160 | <v-flex xs5 sm6> |
| 161 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 161 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 162 | <b>Starting Date:</b> | 162 | <b>Starting Date:</b> |
| 163 | </h5> | 163 | </h5> |
| 164 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> | 164 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> |
| 165 | <b>StartingDate:</b> | 165 | <b>StartingDate:</b> |
| 166 | </h5> | 166 | </h5> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | <v-flex sm6 xs7> | 168 | <v-flex sm6 xs7> |
| 169 | <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5> | 169 | <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | <v-layout> | 172 | <v-layout> |
| 173 | <v-flex xs5 sm6> | 173 | <v-flex xs5 sm6> |
| 174 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 174 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 175 | <b>Ending Date:</b> | 175 | <b>Ending Date:</b> |
| 176 | </h5> | 176 | </h5> |
| 177 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> | 177 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> |
| 178 | <b>EndingDate:</b> | 178 | <b>EndingDate:</b> |
| 179 | </h5> | 179 | </h5> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | <v-flex sm6 xs7> | 181 | <v-flex sm6 xs7> |
| 182 | <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5> | 182 | <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | </v-layout> | 184 | </v-layout> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | </v-container> | 187 | </v-container> |
| 188 | </v-card-text> | 188 | </v-card-text> |
| 189 | </v-card> | 189 | </v-card> |
| 190 | </v-dialog> | 190 | </v-dialog> |
| 191 | <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> | 191 | <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> |
| 192 | <v-toolbar color="transparent" flat> | 192 | <v-toolbar color="transparent" flat> |
| 193 | <v-btn | 193 | <v-btn |
| 194 | fab | 194 | fab |
| 195 | dark | 195 | dark |
| 196 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 196 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 197 | small | 197 | small |
| 198 | @click="addAcademicYearDialog = true" | 198 | @click="addAcademicYearDialog = true" |
| 199 | > | 199 | > |
| 200 | <v-icon dark>add</v-icon> | 200 | <v-icon dark>add</v-icon> |
| 201 | </v-btn> | 201 | </v-btn> |
| 202 | <v-btn | 202 | <v-btn |
| 203 | round | 203 | round |
| 204 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 204 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 205 | dark | 205 | dark |
| 206 | @click="addAcademicYearDialog = true" | 206 | @click="addAcademicYearDialog = true" |
| 207 | > | 207 | > |
| 208 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year | 208 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year |
| 209 | </v-btn> | 209 | </v-btn> |
| 210 | <v-spacer></v-spacer> | 210 | <v-spacer></v-spacer> |
| 211 | <v-card-title class="body-1" v-show="show"> | 211 | <v-card-title class="body-1" v-show="show"> |
| 212 | <v-btn icon large flat @click="displaySearch"> | 212 | <v-btn icon large flat @click="displaySearch"> |
| 213 | <v-avatar size="27"> | 213 | <v-avatar size="27"> |
| 214 | <img src="/static/icon/search.png" alt="icon" /> | 214 | <img src="/static/icon/search.png" alt="icon" /> |
| 215 | </v-avatar> | 215 | </v-avatar> |
| 216 | </v-btn> | 216 | </v-btn> |
| 217 | </v-card-title> | 217 | </v-card-title> |
| 218 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 218 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-text-field | 220 | <v-text-field |
| 221 | autofocus | 221 | autofocus |
| 222 | v-model="search" | 222 | v-model="search" |
| 223 | label="Search" | 223 | label="Search" |
| 224 | prepend-inner-icon="search" | 224 | prepend-inner-icon="search" |
| 225 | color="primary" | 225 | color="primary" |
| 226 | ></v-text-field> | 226 | ></v-text-field> |
| 227 | <v-icon @click="closeSearch" color="error">close</v-icon> | 227 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 228 | </v-layout> | 228 | </v-layout> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-toolbar> | 230 | </v-toolbar> |
| 231 | <v-data-table | 231 | <v-data-table |
| 232 | :headers="headers" | 232 | :headers="headers" |
| 233 | :items="getAcademicYearList" | 233 | :items="getAcademicYearList" |
| 234 | :pagination.sync="pagination" | 234 | :pagination.sync="pagination" |
| 235 | :search="search" | 235 | :search="search" |
| 236 | > | 236 | > |
| 237 | <template slot="items" slot-scope="props"> | 237 | <template slot="items" slot-scope="props"> |
| 238 | <tr class="tr"> | 238 | <tr class="tr"> |
| 239 | <td class="td td-row">{{ props.index + 1}}</td> | 239 | <td class="td td-row">{{ props.index + 1}}</td> |
| 240 | <td class="td td-row text-xs-center">{{ props.item.year}}</td> | 240 | <td class="td td-row text-xs-center">{{ props.item.year}}</td> |
| 241 | <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td> | 241 | <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td> |
| 242 | <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td> | 242 | <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td> |
| 243 | <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td> | 243 | <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td> |
| 244 | <td class="td td-row text-xs-center"> | 244 | <td class="td td-row text-xs-center"> |
| 245 | <span> | 245 | <span> |
| 246 | <v-tooltip top> | 246 | <v-tooltip top> |
| 247 | <img | 247 | <img |
| 248 | slot="activator" | 248 | slot="activator" |
| 249 | style="cursor:pointer; width:25px; height:25px; " | 249 | style="cursor:pointer; width:25px; height:25px; " |
| 250 | class="mr-3" | 250 | class="mr-3" |
| 251 | @click="profile(props.item)" | 251 | @click="profile(props.item)" |
| 252 | src="/static/icon/view.png" | 252 | src="/static/icon/view.png" |
| 253 | /> | 253 | /> |
| 254 | <span>View</span> | 254 | <span>View</span> |
| 255 | </v-tooltip> | 255 | </v-tooltip> |
| 256 | <v-tooltip top> | 256 | <v-tooltip top> |
| 257 | <img | 257 | <img |
| 258 | slot="activator" | 258 | slot="activator" |
| 259 | style="cursor:pointer; width:20px; height:18px; " | 259 | style="cursor:pointer; width:20px; height:18px; " |
| 260 | class="mr-3" | 260 | class="mr-3" |
| 261 | @click="editItem(props.item)" | 261 | @click="editItem(props.item)" |
| 262 | src="/static/icon/edit.png" | 262 | src="/static/icon/edit.png" |
| 263 | /> | 263 | /> |
| 264 | <span>Edit</span> | 264 | <span>Edit</span> |
| 265 | </v-tooltip> | 265 | </v-tooltip> |
| 266 | <v-tooltip top> | 266 | <v-tooltip top> |
| 267 | <img | 267 | <img |
| 268 | slot="activator" | 268 | slot="activator" |
| 269 | style="cursor:pointer; width:20px; height:20px; " | 269 | style="cursor:pointer; width:20px; height:20px; " |
| 270 | @click="deleteItem(props.item)" | 270 | @click="deleteItem(props.item)" |
| 271 | class="mr-3" | 271 | class="mr-3" |
| 272 | src="/static/icon/delete.png" | 272 | src="/static/icon/delete.png" |
| 273 | /> | 273 | /> |
| 274 | <span>Delete</span> | 274 | <span>Delete</span> |
| 275 | </v-tooltip> | 275 | </v-tooltip> |
| 276 | </span> | 276 | </span> |
| 277 | </td> | 277 | </td> |
| 278 | </tr> | 278 | </tr> |
| 279 | </template> | 279 | </template> |
| 280 | <v-alert | 280 | <v-alert |
| 281 | slot="no-results" | 281 | slot="no-results" |
| 282 | :value="true" | 282 | :value="true" |
| 283 | color="error" | 283 | color="error" |
| 284 | icon="warning" | 284 | icon="warning" |
| 285 | >Your search for "{{ search }}" found no results.</v-alert> | 285 | >Your search for "{{ search }}" found no results.</v-alert> |
| 286 | </v-data-table> | 286 | </v-data-table> |
| 287 | <!-- ****** ADD ACADEMIC YEAR ****** --> | 287 | <!-- ****** ADD ACADEMIC YEAR ****** --> |
| 288 | <v-dialog v-model="addAcademicYearDialog" max-width="600px" v-if="addAcademicYearDialog" persistent> | 288 | <v-dialog |
| 289 | <v-card flat class="card-style pa-2" dark> | 289 | v-model="addAcademicYearDialog" |
| 290 | max-width="600px" | ||
| 291 | v-if="addAcademicYearDialog" | ||
| 292 | persistent | ||
| 293 | > | ||
| 294 | <v-card flat class="Card-style pa-2"> | ||
| 290 | <v-layout> | 295 | <v-layout> |
| 291 | <v-flex xs12> | 296 | <v-flex xs12> |
| 292 | <label class="title text-xs-center">Add Academic Year</label> | 297 | <label class="title text-xs-center">Add Academic Year</label> |
| 293 | <v-icon size="24" class="right" @click="closeAddAcademicYearModel">cancel</v-icon> | 298 | <v-icon size="24" class="right" @click="closeAddAcademicYearModel">cancel</v-icon> |
| 294 | </v-flex> | 299 | </v-flex> |
| 295 | </v-layout> | 300 | </v-layout> |
| 296 | <v-form ref="form" v-model="valid" lazy-validation> | 301 | <v-form ref="form" v-model="valid" lazy-validation> |
| 297 | <v-container fluid> | 302 | <v-container fluid> |
| 298 | <v-flex xs12> | 303 | <v-flex xs12> |
| 299 | <v-layout> | 304 | <v-layout> |
| 300 | <v-flex xs5 sm4 class="pt-4 subheading"> | 305 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 301 | <label class="right">Year:</label> | 306 | <label class="right">Year:</label> |
| 302 | </v-flex> | 307 | </v-flex> |
| 303 | <v-flex xs7 class="ml-3"> | 308 | <v-flex xs7 class="ml-3"> |
| 304 | <v-text-field | 309 | <v-text-field |
| 305 | v-model="addAcademicYear.year" | 310 | v-model="addAcademicYear.year" |
| 306 | placeholder="fill Year (2019-2020)" | 311 | placeholder="fill Year (2019-2020)" |
| 307 | type="text" | 312 | type="text" |
| 308 | :rules="yearRules" | 313 | :rules="yearRules" |
| 309 | required | 314 | required |
| 310 | ></v-text-field> | 315 | ></v-text-field> |
| 311 | </v-flex> | 316 | </v-flex> |
| 312 | </v-layout> | 317 | </v-layout> |
| 313 | </v-flex> | 318 | </v-flex> |
| 314 | <v-flex xs12> | 319 | <v-flex xs12> |
| 315 | <v-layout> | 320 | <v-layout> |
| 316 | <v-flex xs5 sm4 class="pt-4 subheading"> | 321 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 317 | <label class="right">Year Title:</label> | 322 | <label class="right">Year Title:</label> |
| 318 | </v-flex> | 323 | </v-flex> |
| 319 | <v-flex xs7 class="ml-3"> | 324 | <v-flex xs7 class="ml-3"> |
| 320 | <v-text-field | 325 | <v-text-field |
| 321 | placeholder="fill your Year Title" | 326 | placeholder="fill your Year Title" |
| 322 | :rules="yearTitleRules" | 327 | :rules="yearTitleRules" |
| 323 | v-model="addAcademicYear.yearTitle" | 328 | v-model="addAcademicYear.yearTitle" |
| 324 | type="text" | 329 | type="text" |
| 325 | required | 330 | required |
| 326 | ></v-text-field> | 331 | ></v-text-field> |
| 327 | </v-flex> | 332 | </v-flex> |
| 328 | </v-layout> | 333 | </v-layout> |
| 329 | </v-flex> | 334 | </v-flex> |
| 330 | <v-flex xs12> | 335 | <v-flex xs12> |
| 331 | <v-layout> | 336 | <v-layout> |
| 332 | <v-flex xs5 sm4 class="pt-4 subheading"> | 337 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 333 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> | 338 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> |
| 334 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> | 339 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> |
| 335 | </v-flex> | 340 | </v-flex> |
| 336 | <v-flex xs7 class="ml-3"> | 341 | <v-flex xs7 class="ml-3"> |
| 337 | <v-menu | 342 | <v-menu |
| 338 | ref="menuStart" | 343 | ref="menuStart" |
| 339 | :close-on-content-click="false" | 344 | :close-on-content-click="false" |
| 340 | v-model="menuStart" | 345 | v-model="menuStart" |
| 341 | :nudge-right="40" | 346 | :nudge-right="40" |
| 342 | :return-value.sync="addAcademicYear.startingDate" | 347 | :return-value.sync="addAcademicYear.startingDate" |
| 343 | app | 348 | app |
| 344 | lazy | 349 | lazy |
| 345 | transition="scale-transition" | 350 | transition="scale-transition" |
| 346 | offset-y | 351 | offset-y |
| 347 | full-width | 352 | full-width |
| 348 | min-width="290px" | 353 | min-width="290px" |
| 349 | > | 354 | > |
| 350 | <v-text-field | 355 | <v-text-field |
| 351 | slot="activator" | 356 | slot="activator" |
| 352 | :rules="startDateRules" | 357 | :rules="startDateRules" |
| 353 | v-model="addAcademicYear.startingDate" | 358 | v-model="addAcademicYear.startingDate" |
| 354 | append-icon="event" | 359 | append-icon="event" |
| 355 | placeholder="Select starting date" | 360 | placeholder="Select starting date" |
| 356 | ></v-text-field> | 361 | ></v-text-field> |
| 357 | <v-date-picker | 362 | <v-date-picker |
| 358 | color="info" | 363 | color="info" |
| 359 | v-model="addAcademicYear.startingDate" | 364 | v-model="addAcademicYear.startingDate" |
| 360 | @input="$refs.menuStart.save(addAcademicYear.startingDate)" | 365 | @input="$refs.menuStart.save(addAcademicYear.startingDate)" |
| 361 | ></v-date-picker> | 366 | ></v-date-picker> |
| 362 | </v-menu> | 367 | </v-menu> |
| 363 | </v-flex> | 368 | </v-flex> |
| 364 | </v-layout> | 369 | </v-layout> |
| 365 | </v-flex> | 370 | </v-flex> |
| 366 | <v-flex xs12> | 371 | <v-flex xs12> |
| 367 | <v-layout> | 372 | <v-layout> |
| 368 | <v-flex xs5 sm4 class="pt-4 subheading"> | 373 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 369 | <label class="right">Ending Date:</label> | 374 | <label class="right">Ending Date:</label> |
| 370 | </v-flex> | 375 | </v-flex> |
| 371 | <v-flex xs7 class="ml-3"> | 376 | <v-flex xs7 class="ml-3"> |
| 372 | <v-menu | 377 | <v-menu |
| 373 | ref="menu1" | 378 | ref="menu1" |
| 374 | :close-on-content-click="false" | 379 | :close-on-content-click="false" |
| 375 | v-model="menu1" | 380 | v-model="menu1" |
| 376 | :nudge-right="40" | 381 | :nudge-right="40" |
| 377 | :return-value.sync="addAcademicYear.endingDate" | 382 | :return-value.sync="addAcademicYear.endingDate" |
| 378 | app | 383 | app |
| 379 | lazy | 384 | lazy |
| 380 | transition="scale-transition" | 385 | transition="scale-transition" |
| 381 | offset-y | 386 | offset-y |
| 382 | full-width | 387 | full-width |
| 383 | min-width="290px" | 388 | min-width="290px" |
| 384 | > | 389 | > |
| 385 | <v-text-field | 390 | <v-text-field |
| 386 | slot="activator" | 391 | slot="activator" |
| 387 | :rules="endDateRules" | 392 | :rules="endDateRules" |
| 388 | v-model="addAcademicYear.endingDate" | 393 | v-model="addAcademicYear.endingDate" |
| 389 | append-icon="event" | 394 | append-icon="event" |
| 390 | placeholder="Select ending date" | 395 | placeholder="Select ending date" |
| 391 | ></v-text-field> | 396 | ></v-text-field> |
| 392 | <v-date-picker | 397 | <v-date-picker |
| 393 | color="info" | 398 | color="info" |
| 394 | v-model="addAcademicYear.endingDate" | 399 | v-model="addAcademicYear.endingDate" |
| 395 | @input="$refs.menu1.save(addAcademicYear.endingDate)" | 400 | @input="$refs.menu1.save(addAcademicYear.endingDate)" |
| 396 | ></v-date-picker> | 401 | ></v-date-picker> |
| 397 | </v-menu> | 402 | </v-menu> |
| 398 | </v-flex> | 403 | </v-flex> |
| 399 | </v-layout> | 404 | </v-layout> |
| 400 | </v-flex> | 405 | </v-flex> |
| 401 | <v-layout> | 406 | <v-layout> |
| 402 | <v-flex xs12> | 407 | <v-flex xs12> |
| 403 | <v-layout> | 408 | <v-layout> |
| 404 | <v-spacer></v-spacer> | 409 | <v-spacer></v-spacer> |
| 405 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 410 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 406 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 411 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 407 | </v-layout> | 412 | </v-layout> |
| 408 | </v-flex> | 413 | </v-flex> |
| 409 | </v-layout> | 414 | </v-layout> |
| 410 | </v-container> | 415 | </v-container> |
| 411 | </v-form> | 416 | </v-form> |
| 412 | </v-card> | 417 | </v-card> |
| 413 | </v-dialog> | 418 | </v-dialog> |
| 414 | <div class="loader" v-if="showLoader"> | 419 | <div class="loader" v-if="showLoader"> |
| 415 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 420 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 416 | </div> | 421 | </div> |
| 417 | <v-snackbar | 422 | <v-snackbar |
| 418 | :timeout="timeout" | 423 | :timeout="timeout" |
| 419 | :top="y === 'top'" | 424 | :top="y === 'top'" |
| 420 | :right="x === 'right'" | 425 | :right="x === 'right'" |
| 421 | :vertical="mode === 'vertical'" | 426 | :vertical="mode === 'vertical'" |
| 422 | v-model="snackbar" | 427 | v-model="snackbar" |
| 423 | :color="color" | 428 | :color="color" |
| 424 | >{{ text }}</v-snackbar> | 429 | >{{ text }}</v-snackbar> |
| 425 | </v-container> | 430 | </v-container> |
| 426 | </template> | 431 | </template> |
| 427 | 432 | ||
| 428 | <script> | 433 | <script> |
| 429 | import http from "@/Services/http.js"; | 434 | import http from "@/Services/http.js"; |
| 430 | import Util from "@/util"; | 435 | import Util from "@/util"; |
| 431 | import moment from "moment"; | 436 | import moment from "moment"; |
| 432 | 437 | ||
| 433 | export default { | 438 | export default { |
| 434 | data: () => ({ | 439 | data: () => ({ |
| 435 | snackbar: false, | 440 | snackbar: false, |
| 436 | y: "top", | 441 | y: "top", |
| 437 | x: "right", | 442 | x: "right", |
| 438 | mode: "", | 443 | mode: "", |
| 439 | timeout: 5000, | 444 | timeout: 5000, |
| 440 | text: "", | 445 | text: "", |
| 441 | color: "", | 446 | color: "", |
| 442 | loading: false, | 447 | loading: false, |
| 443 | date: null, | 448 | date: null, |
| 444 | show: true, | 449 | show: true, |
| 445 | showSearch: false, | 450 | showSearch: false, |
| 446 | search: "", | 451 | search: "", |
| 447 | showLoader: false, | 452 | showLoader: false, |
| 448 | addAcademicYearDialog: false, | 453 | addAcademicYearDialog: false, |
| 449 | editAcademinYearDialog: false, | 454 | editAcademinYearDialog: false, |
| 450 | viewAcademinYearDialog: false, | 455 | viewAcademinYearDialog: false, |
| 451 | valid: true, | 456 | valid: true, |
| 452 | pagination: { | 457 | pagination: { |
| 453 | rowsPerPage: 10, | 458 | rowsPerPage: 10, |
| 454 | }, | 459 | }, |
| 455 | date: null, | 460 | date: null, |
| 456 | menu1: false, | 461 | menu1: false, |
| 457 | menu: false, | 462 | menu: false, |
| 458 | menuStart: false, | 463 | menuStart: false, |
| 459 | menuEndDate: false, | 464 | menuEndDate: false, |
| 460 | yearRules: [(v) => !!v || "Year is required"], | 465 | yearRules: [(v) => !!v || "Year is required"], |
| 461 | yearTitleRules: [(v) => !!v || "Year Title is required"], | 466 | yearTitleRules: [(v) => !!v || "Year Title is required"], |
| 462 | startDateRules: [(v) => !!v || "startDate is required"], | 467 | startDateRules: [(v) => !!v || "startDate is required"], |
| 463 | endDateRules: [(v) => !!v || "endDate is required"], | 468 | endDateRules: [(v) => !!v || "endDate is required"], |
| 464 | headers: [ | 469 | headers: [ |
| 465 | { | 470 | { |
| 466 | text: "No", | 471 | text: "No", |
| 467 | align: "center", | 472 | align: "center", |
| 468 | sortable: false, | 473 | sortable: false, |
| 469 | value: "No", | 474 | value: "No", |
| 470 | }, | 475 | }, |
| 471 | { text: "Year", value: "year", sortable: false, align: "center" }, | 476 | { text: "Year", value: "year", sortable: false, align: "center" }, |
| 472 | { | 477 | { |
| 473 | text: "Year Title", | 478 | text: "Year Title", |
| 474 | value: "yearTitle", | 479 | value: "yearTitle", |
| 475 | sortable: false, | 480 | sortable: false, |
| 476 | align: "center", | 481 | align: "center", |
| 477 | }, | 482 | }, |
| 478 | 483 | ||
| 479 | { | 484 | { |
| 480 | text: "Starting Date", | 485 | text: "Starting Date", |
| 481 | value: "startingDate", | 486 | value: "startingDate", |
| 482 | sortable: false, | 487 | sortable: false, |
| 483 | align: "center", | 488 | align: "center", |
| 484 | }, | 489 | }, |
| 485 | { | 490 | { |
| 486 | text: "Ending Date", | 491 | text: "Ending Date", |
| 487 | value: "endingDate", | 492 | value: "endingDate", |
| 488 | sortable: false, | 493 | sortable: false, |
| 489 | align: "center", | 494 | align: "center", |
| 490 | }, | 495 | }, |
| 491 | { text: "Action", value: "", sortable: false, align: "center" }, | 496 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 492 | ], | 497 | ], |
| 493 | getAcademicYearList: [], | 498 | getAcademicYearList: [], |
| 494 | editedIndex: -1, | 499 | editedIndex: -1, |
| 495 | addAcademicYear: {}, | 500 | addAcademicYear: {}, |
| 496 | editedItem: {}, | 501 | editedItem: {}, |
| 497 | token: "", | 502 | token: "", |
| 498 | }), | 503 | }), |
| 499 | watch: { | 504 | watch: { |
| 500 | addAcademicYearDialog: function (val) { | 505 | addAcademicYearDialog: function (val) { |
| 501 | if (!val) { | 506 | if (!val) { |
| 502 | this.addAcademicYear = []; | 507 | this.addAcademicYear = []; |
| 503 | } | 508 | } |
| 504 | }, | 509 | }, |
| 505 | }, | 510 | }, |
| 506 | methods: { | 511 | methods: { |
| 507 | dates: function (date) { | 512 | dates: function (date) { |
| 508 | return moment(date).format("MMMM DD, YYYY"); | 513 | return moment(date).format("MMMM DD, YYYY"); |
| 509 | }, | 514 | }, |
| 510 | getAcademicYear() { | 515 | getAcademicYear() { |
| 511 | this.showLoader = true; | 516 | this.showLoader = true; |
| 512 | http() | 517 | http() |
| 513 | .get("/getAcademicsList", { | 518 | .get("/getAcademicsList", { |
| 514 | headers: { Authorization: "Bearer " + this.token }, | 519 | headers: { Authorization: "Bearer " + this.token }, |
| 515 | }) | 520 | }) |
| 516 | .then((response) => { | 521 | .then((response) => { |
| 517 | this.getAcademicYearList = response.data.data; | 522 | this.getAcademicYearList = response.data.data; |
| 518 | this.showLoader = false; | 523 | this.showLoader = false; |
| 519 | }) | 524 | }) |
| 520 | .catch((error) => { | 525 | .catch((error) => { |
| 521 | this.showLoader = false; | 526 | this.showLoader = false; |
| 522 | if (error.response.status === 401) { | 527 | if (error.response.status === 401) { |
| 523 | this.$router.replace({ path: "/" }); | 528 | this.$router.replace({ path: "/" }); |
| 524 | this.$store.dispatch("setToken", null); | 529 | this.$store.dispatch("setToken", null); |
| 525 | this.$store.dispatch("Id", null); | 530 | this.$store.dispatch("Id", null); |
| 526 | } | 531 | } |
| 527 | }); | 532 | }); |
| 528 | }, | 533 | }, |
| 529 | editItem(item) { | 534 | editItem(item) { |
| 530 | this.editedIndex = this.getAcademicYearList.indexOf(item); | 535 | this.editedIndex = this.getAcademicYearList.indexOf(item); |
| 531 | this.editedItem = Object.assign({}, item); | 536 | this.editedItem = Object.assign({}, item); |
| 532 | this.editedItem.schoolEventId = item._id; | 537 | this.editedItem.schoolEventId = item._id; |
| 533 | this.editAcademinYearDialog = true; | 538 | this.editAcademinYearDialog = true; |
| 534 | }, | 539 | }, |
| 535 | profile(item) { | 540 | profile(item) { |
| 536 | this.editedIndex = this.getAcademicYearList.indexOf(item); | 541 | this.editedIndex = this.getAcademicYearList.indexOf(item); |
| 537 | this.editedItem = Object.assign({}, item); | 542 | this.editedItem = Object.assign({}, item); |
| 538 | this.viewAcademinYearDialog = true; | 543 | this.viewAcademinYearDialog = true; |
| 539 | }, | 544 | }, |
| 540 | 545 | ||
| 541 | deleteItem(item) { | 546 | deleteItem(item) { |
| 542 | let deleteAcademic = { | 547 | let deleteAcademic = { |
| 543 | academicId: item._id, | 548 | academicId: item._id, |
| 544 | }; | 549 | }; |
| 545 | http() | 550 | http() |
| 546 | .delete( | 551 | .delete( |
| 547 | "/deleteAcademic", | 552 | "/deleteAcademic", |
| 548 | confirm("Are you sure you want to delete this?") && { | 553 | confirm("Are you sure you want to delete this?") && { |
| 549 | params: deleteAcademic, | 554 | params: deleteAcademic, |
| 550 | } | 555 | } |
| 551 | ) | 556 | ) |
| 552 | .then((response) => { | 557 | .then((response) => { |
| 553 | this.snackbar = true; | 558 | this.snackbar = true; |
| 554 | this.text = response.data.message; | 559 | this.text = response.data.message; |
| 555 | this.color = "green"; | 560 | this.color = "green"; |
| 556 | this.getAcademicYear(); | 561 | this.getAcademicYear(); |
| 557 | }) | 562 | }) |
| 558 | .catch((error) => { | 563 | .catch((error) => { |
| 559 | this.snackbar = true; | 564 | this.snackbar = true; |
| 560 | this.text = error.response.data.message; | 565 | this.text = error.response.data.message; |
| 561 | this.color = "error"; | 566 | this.color = "error"; |
| 562 | }); | 567 | }); |
| 563 | }, | 568 | }, |
| 564 | close() { | 569 | close() { |
| 565 | this.editAcademinYearDialog = false; | 570 | this.editAcademinYearDialog = false; |
| 566 | }, | 571 | }, |
| 567 | closeAddAcademicYearModel() { | 572 | closeAddAcademicYearModel() { |
| 568 | this.addAcademicYearDialog = false; | 573 | this.addAcademicYearDialog = false; |
| 569 | this.addAcademicYear = []; | 574 | this.addAcademicYear = []; |
| 570 | }, | 575 | }, |
| 571 | submit() { | 576 | submit() { |
| 572 | if (this.$refs.form.validate()) { | 577 | if (this.$refs.form.validate()) { |
| 573 | this.loading = true; | 578 | this.loading = true; |
| 574 | http() | 579 | http() |
| 575 | .post("/createAcademic", this.addAcademicYear) | 580 | .post("/createAcademic", this.addAcademicYear) |
| 576 | .then((response) => { | 581 | .then((response) => { |
| 577 | this.snackbar = true; | 582 | this.snackbar = true; |
| 578 | this.text = response.data.message; | 583 | this.text = response.data.message; |
| 579 | this.color = "green"; | 584 | this.color = "green"; |
| 580 | this.getAcademicYear(); | 585 | this.getAcademicYear(); |
| 581 | this.clear(); | 586 | this.clear(); |
| 582 | this.loading = false; | 587 | this.loading = false; |
| 583 | this.addAcademicYearDialog = false; | 588 | this.addAcademicYearDialog = false; |
| 584 | }) | 589 | }) |
| 585 | .catch((error) => { | 590 | .catch((error) => { |
| 586 | this.snackbar = true; | 591 | this.snackbar = true; |
| 587 | this.text = error.response.data.message; | 592 | this.text = error.response.data.message; |
| 588 | this.color = "error"; | 593 | this.color = "error"; |
| 589 | this.loading = false; | 594 | this.loading = false; |
| 590 | }); | 595 | }); |
| 591 | } | 596 | } |
| 592 | }, | 597 | }, |
| 593 | clear() { | 598 | clear() { |
| 594 | this.$refs.form.reset(); | 599 | this.$refs.form.reset(); |
| 595 | }, | 600 | }, |
| 596 | save() { | 601 | save() { |
| 597 | this.editedItem.academicId = this.editedItem._id; | 602 | this.editedItem.academicId = this.editedItem._id; |
| 598 | http() | 603 | http() |
| 599 | .put("/updateAcademic", this.editedItem, { | 604 | .put("/updateAcademic", this.editedItem, { |
| 600 | headers: { Authorization: "Bearer " + this.token }, | 605 | headers: { Authorization: "Bearer " + this.token }, |
| 601 | }) | 606 | }) |
| 602 | .then((response) => { | 607 | .then((response) => { |
| 603 | this.snackbar = true; | 608 | this.snackbar = true; |
| 604 | this.text = response.data.message; | 609 | this.text = response.data.message; |
| 605 | this.color = "green"; | 610 | this.color = "green"; |
| 606 | this.getAcademicYear(); | 611 | this.getAcademicYear(); |
| 607 | this.close(); | 612 | this.close(); |
| 608 | }) | 613 | }) |
| 609 | .catch((error) => { | 614 | .catch((error) => { |
| 610 | this.snackbar = true; | 615 | this.snackbar = true; |
| 611 | this.text = error.response.data.message; | 616 | this.text = error.response.data.message; |
| 612 | this.color = "error"; | 617 | this.color = "error"; |
| 613 | }); | 618 | }); |
| 614 | }, | 619 | }, |
| 615 | displaySearch() { | 620 | displaySearch() { |
| 616 | (this.show = false), (this.showSearch = true); | 621 | (this.show = false), (this.showSearch = true); |
| 617 | }, | 622 | }, |
| 618 | closeSearch() { | 623 | closeSearch() { |
| 619 | this.showSearch = false; | 624 | this.showSearch = false; |
| 620 | this.show = true; | 625 | this.show = true; |
| 621 | this.search = ""; | 626 | this.search = ""; |
| 622 | }, | 627 | }, |
| 623 | }, | 628 | }, |
| 624 | mounted() { | 629 | mounted() { |
| 625 | this.token = this.$store.state.token; | 630 | this.token = this.$store.state.token; |
| 626 | this.getAcademicYear(); | 631 | this.getAcademicYear(); |
| 627 | }, | 632 | }, |
| 628 | }; | 633 | }; |
| 629 | </script> | 634 | </script> |
src/pages/Annoucement/annoucement.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS COURSES DETAILS ****** --> | 3 | <!-- ****** EDITS COURSES DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> | 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Annoucement</label> | 8 | <label class="title text-xs-center">Edit Annoucement</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> |
| 18 | <img src="/static/icon/user.png" /> | 18 | <img src="/static/icon/user.png" /> |
| 19 | </v-avatar> | 19 | </v-avatar> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.attachementUrl" | 21 | :src="editedItem.attachementUrl" |
| 22 | v-else-if="editedItem.attachementUrl && !editImageUrl" | 22 | v-else-if="editedItem.attachementUrl && !editImageUrl" |
| 23 | height="150" | 23 | height="150" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="editImageUrl" | 27 | v-if="editImageUrl" |
| 28 | :src="editImageUrl" | 28 | :src="editImageUrl" |
| 29 | style="border-radius:50%; width:150px;height:150px" | 29 | style="border-radius:50%; width:150px;height:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display: none" | 33 | style="display: none" |
| 34 | ref="editDataImage" | 34 | ref="editDataImage" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onEditFilePicked" | 36 | @change="onEditFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 sm5 class="pt-4 subheading"> | 43 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 sm7 class="ml-3"> | 47 | <v-flex xs8 sm7 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="addclass" | 49 | :items="addclass" |
| 50 | label="Select Class" | 50 | label="Select Class" |
| 51 | v-model="editedItem.select" | 51 | v-model="editedItem.select" |
| 52 | item-text="classNum" | 52 | item-text="classNum" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | name="Select Class" | 54 | name="Select Class" |
| 55 | required | 55 | required |
| 56 | ></v-select> | 56 | ></v-select> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs4 sm5 class="pt-4 subheading"> | 60 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm7 class="ml-3"> | 64 | <v-flex xs8 sm7 class="ml-3"> |
| 65 | <v-select | 65 | <v-select |
| 66 | :items="courseData" | 66 | :items="courseData" |
| 67 | item-text="courseName" | 67 | item-text="courseName" |
| 68 | item-value="_id" | 68 | item-value="_id" |
| 69 | v-model="editedItem.courseName" | 69 | v-model="editedItem.courseName" |
| 70 | placeholder="fill your Course name" | 70 | placeholder="fill your Course name" |
| 71 | type="text" | 71 | type="text" |
| 72 | :rules="courseRules" | 72 | :rules="courseRules" |
| 73 | required | 73 | required |
| 74 | ></v-select> | 74 | ></v-select> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | </v-layout> | 76 | </v-layout> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-flex xs4 sm5 class="pt-4 subheading"> | 78 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 79 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> | 79 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> |
| 80 | <label | 80 | <label |
| 81 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 81 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 82 | >DiscussionType:</label> | 82 | >DiscussionType:</label> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | <v-flex xs8 sm7 class="ml-3"> | 84 | <v-flex xs8 sm7 class="ml-3"> |
| 85 | <v-text-field | 85 | <v-text-field |
| 86 | v-model="editedItem.discussionType" | 86 | v-model="editedItem.discussionType" |
| 87 | placeholder="fill your Course Name" | 87 | placeholder="fill your Course Name" |
| 88 | type="text" | 88 | type="text" |
| 89 | required | 89 | required |
| 90 | ></v-text-field> | 90 | ></v-text-field> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | </v-layout> | 92 | </v-layout> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs4 sm5 class="pt-4 subheading"> | 94 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 95 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 95 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 96 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 96 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | <v-flex xs8 sm7 class="ml-3"> | 98 | <v-flex xs8 sm7 class="ml-3"> |
| 99 | <v-text-field | 99 | <v-text-field |
| 100 | label="Select Image" | 100 | label="Select Image" |
| 101 | @click="pickEditFile" | 101 | @click="pickEditFile" |
| 102 | v-model="editImageName" | 102 | v-model="editImageName" |
| 103 | append-icon="attach_file" | 103 | append-icon="attach_file" |
| 104 | ></v-text-field> | 104 | ></v-text-field> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12 sm12 class="px-0 mx-0"> | 110 | <v-flex xs12 sm12 class="px-0 mx-0"> |
| 111 | <v-layout class="right"> | 111 | <v-layout class="right"> |
| 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-form> | 117 | </v-form> |
| 118 | </v-card-text> | 118 | </v-card-text> |
| 119 | </v-card> | 119 | </v-card> |
| 120 | </v-dialog> | 120 | </v-dialog> |
| 121 | 121 | ||
| 122 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 122 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 123 | 123 | ||
| 124 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> | 124 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> |
| 125 | <v-card flat class="card-style pa-3" dark> | 125 | <v-card flat class="Card-style pa-3"> |
| 126 | <v-layout> | 126 | <v-layout> |
| 127 | <v-flex xs12> | 127 | <v-flex xs12> |
| 128 | <label class="title text-xs-center">View Annoucement</label> | 128 | <label class="title text-xs-center">View Annoucement</label> |
| 129 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 129 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-card-text> | 132 | <v-card-text> |
| 133 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 133 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 134 | <v-avatar size="100px"> | 134 | <v-avatar size="100px"> |
| 135 | <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" /> | 135 | <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" /> |
| 136 | <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" /> | 136 | <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" /> |
| 137 | </v-avatar> | 137 | </v-avatar> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-container grid-list-md> | 139 | <v-container grid-list-md> |
| 140 | <v-layout wrap> | 140 | <v-layout wrap> |
| 141 | <v-flex xs12> | 141 | <v-flex xs12> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs6 sm6> | 143 | <v-flex xs6 sm6> |
| 144 | <h5 class="right my-1"> | 144 | <h5 class="right my-1"> |
| 145 | <b>Discussion Type :</b> | 145 | <b>Discussion Type :</b> |
| 146 | </h5> | 146 | </h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | <v-flex sm6 xs6> | 148 | <v-flex sm6 xs6> |
| 149 | <h5 class="my-1 left">{{ editedItem.discussionType }}</h5> | 149 | <h5 class="my-1 left">{{ editedItem.discussionType }}</h5> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-layout> | 153 | </v-layout> |
| 154 | </v-container> | 154 | </v-container> |
| 155 | </v-card-text> | 155 | </v-card-text> |
| 156 | </v-card> | 156 | </v-card> |
| 157 | </v-dialog> | 157 | </v-dialog> |
| 158 | 158 | ||
| 159 | <!-- ****** Annoucement TABLE ****** --> | 159 | <!-- ****** Annoucement TABLE ****** --> |
| 160 | <v-toolbar color="transparent" flat> | 160 | <v-toolbar color="transparent" flat> |
| 161 | <v-btn | 161 | <v-btn |
| 162 | fab | 162 | fab |
| 163 | dark | 163 | dark |
| 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 165 | small | 165 | small |
| 166 | @click="addAnnoucementDialog = true" | 166 | @click="addAnnoucementDialog = true" |
| 167 | > | 167 | > |
| 168 | <v-icon dark>add</v-icon> | 168 | <v-icon dark>add</v-icon> |
| 169 | </v-btn> | 169 | </v-btn> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 173 | dark | 173 | dark |
| 174 | @click="addAnnoucementDialog = true" | 174 | @click="addAnnoucementDialog = true" |
| 175 | > | 175 | > |
| 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement | 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement |
| 177 | </v-btn> | 177 | </v-btn> |
| 178 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 178 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 179 | <v-flex md13 lg12> | 179 | <v-flex md13 lg12> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex lg6 md12> | 181 | <v-flex lg6 md12> |
| 182 | <v-layout> | 182 | <v-layout> |
| 183 | <v-select | 183 | <v-select |
| 184 | :items="addclass" | 184 | :items="addclass" |
| 185 | label="Select Class" | 185 | label="Select Class" |
| 186 | v-model="selectAnnoucement.classId" | 186 | v-model="selectAnnoucement.classId" |
| 187 | item-text="classNum" | 187 | item-text="classNum" |
| 188 | item-value="_id" | 188 | item-value="_id" |
| 189 | name="Select Class" | 189 | name="Select Class" |
| 190 | :rules="classRules" | 190 | :rules="classRules" |
| 191 | required | 191 | required |
| 192 | class="ml-2" | 192 | class="ml-2" |
| 193 | @change="getCourses(selectAnnoucement.classId)" | 193 | @change="getCourses(selectAnnoucement.classId)" |
| 194 | ></v-select> | 194 | ></v-select> |
| 195 | <v-select | 195 | <v-select |
| 196 | :items="courseData" | 196 | :items="courseData" |
| 197 | label="Select Course" | 197 | label="Select Course" |
| 198 | v-model="selectAnnoucement.courseId" | 198 | v-model="selectAnnoucement.courseId" |
| 199 | item-text="courseName" | 199 | item-text="courseName" |
| 200 | item-value="_id" | 200 | item-value="_id" |
| 201 | :rules="courseRules" | 201 | :rules="courseRules" |
| 202 | required | 202 | required |
| 203 | class="ml-4" | 203 | class="ml-4" |
| 204 | ></v-select> | 204 | ></v-select> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | </v-card-actions> | 209 | </v-card-actions> |
| 210 | <v-spacer></v-spacer> | 210 | <v-spacer></v-spacer> |
| 211 | <v-btn | 211 | <v-btn |
| 212 | @click="getAnnoucementes()" | 212 | @click="getAnnoucementes()" |
| 213 | round | 213 | round |
| 214 | dark | 214 | dark |
| 215 | :loading="loading" | 215 | :loading="loading" |
| 216 | class="open-dialog-button hidden-xs-only hidden-sm-only" | 216 | class="open-dialog-button hidden-xs-only hidden-sm-only" |
| 217 | >Find</v-btn> | 217 | >Find</v-btn> |
| 218 | <v-card-title class="body-1" v-show="show"> | 218 | <v-card-title class="body-1" v-show="show"> |
| 219 | <v-btn icon large flat @click="displaySearch"> | 219 | <v-btn icon large flat @click="displaySearch"> |
| 220 | <v-avatar size="27"> | 220 | <v-avatar size="27"> |
| 221 | <img src="/static/icon/search.png" alt="icon" /> | 221 | <img src="/static/icon/search.png" alt="icon" /> |
| 222 | </v-avatar> | 222 | </v-avatar> |
| 223 | </v-btn> | 223 | </v-btn> |
| 224 | </v-card-title> | 224 | </v-card-title> |
| 225 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> | 225 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-text-field | 227 | <v-text-field |
| 228 | autofocus | 228 | autofocus |
| 229 | v-model="search" | 229 | v-model="search" |
| 230 | label="Search" | 230 | label="Search" |
| 231 | prepend-inner-icon="search" | 231 | prepend-inner-icon="search" |
| 232 | color="primary" | 232 | color="primary" |
| 233 | ></v-text-field> | 233 | ></v-text-field> |
| 234 | <v-icon @click="closeSearch" color="error">close</v-icon> | 234 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | </v-toolbar> | 237 | </v-toolbar> |
| 238 | <v-card flat class="elevation-0 transparent"> | 238 | <v-card flat class="elevation-0 transparent"> |
| 239 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 239 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 240 | <v-layout> | 240 | <v-layout> |
| 241 | <v-flex xs12> | 241 | <v-flex xs12> |
| 242 | <v-select | 242 | <v-select |
| 243 | :items="addclass" | 243 | :items="addclass" |
| 244 | label="Select Class" | 244 | label="Select Class" |
| 245 | v-model="selectAnnoucement.select" | 245 | v-model="selectAnnoucement.select" |
| 246 | item-text="classNum" | 246 | item-text="classNum" |
| 247 | item-value="_id" | 247 | item-value="_id" |
| 248 | name="Select Class" | 248 | name="Select Class" |
| 249 | :rules="classRules" | 249 | :rules="classRules" |
| 250 | class="px-2" | 250 | class="px-2" |
| 251 | ></v-select> | 251 | ></v-select> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | </v-layout> | 253 | </v-layout> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs5 class="mx-auto mb-2"> | 255 | <v-flex xs5 class="mx-auto mb-2"> |
| 256 | <v-btn | 256 | <v-btn |
| 257 | @click="getAnnoucementes()" | 257 | @click="getAnnoucementes()" |
| 258 | block | 258 | block |
| 259 | round | 259 | round |
| 260 | dark | 260 | dark |
| 261 | :loading="loading" | 261 | :loading="loading" |
| 262 | class="add-button" | 262 | class="add-button" |
| 263 | >Find</v-btn> | 263 | >Find</v-btn> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | </v-layout> | 265 | </v-layout> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-card> | 267 | </v-card> |
| 268 | <v-data-table | 268 | <v-data-table |
| 269 | :headers="headers" | 269 | :headers="headers" |
| 270 | :items="annoucementData" | 270 | :items="annoucementData" |
| 271 | :pagination.sync="pagination" | 271 | :pagination.sync="pagination" |
| 272 | :search="search" | 272 | :search="search" |
| 273 | > | 273 | > |
| 274 | <template slot="items" slot-scope="props"> | 274 | <template slot="items" slot-scope="props"> |
| 275 | <tr class="tr row-click" @click="rowAnnoucement(props.item._id)"> | 275 | <tr class="tr row-click" @click="rowAnnoucement(props.item._id)"> |
| 276 | <td class="text-xs-center td td-row"> | 276 | <td class="text-xs-center td td-row"> |
| 277 | <v-avatar size="40"> | 277 | <v-avatar size="40"> |
| 278 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> | 278 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> |
| 279 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> | 279 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> |
| 280 | </v-avatar> | 280 | </v-avatar> |
| 281 | </td> | 281 | </td> |
| 282 | <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> | 282 | <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> |
| 283 | <td class="text-xs-center td td-row"> | 283 | <td class="text-xs-center td td-row"> |
| 284 | <span> | 284 | <span> |
| 285 | <v-tooltip top> | 285 | <v-tooltip top> |
| 286 | <img | 286 | <img |
| 287 | slot="activator" | 287 | slot="activator" |
| 288 | style="cursor:pointer; width:25px; height:25px; " | 288 | style="cursor:pointer; width:25px; height:25px; " |
| 289 | class="mr-3" | 289 | class="mr-3" |
| 290 | @click="profile(props.item)" | 290 | @click="profile(props.item)" |
| 291 | src="/static/icon/view.png" | 291 | src="/static/icon/view.png" |
| 292 | /> | 292 | /> |
| 293 | <span>View</span> | 293 | <span>View</span> |
| 294 | </v-tooltip> | 294 | </v-tooltip> |
| 295 | <v-tooltip top> | 295 | <v-tooltip top> |
| 296 | <img | 296 | <img |
| 297 | slot="activator" | 297 | slot="activator" |
| 298 | style="cursor:pointer; width:20px; height:18px; " | 298 | style="cursor:pointer; width:20px; height:18px; " |
| 299 | class="mr-3" | 299 | class="mr-3" |
| 300 | @click="editItem(props.item)" | 300 | @click="editItem(props.item)" |
| 301 | src="/static/icon/edit.png" | 301 | src="/static/icon/edit.png" |
| 302 | /> | 302 | /> |
| 303 | <span>Edit</span> | 303 | <span>Edit</span> |
| 304 | </v-tooltip> | 304 | </v-tooltip> |
| 305 | <v-tooltip top> | 305 | <v-tooltip top> |
| 306 | <img | 306 | <img |
| 307 | slot="activator" | 307 | slot="activator" |
| 308 | style="cursor:pointer; width:20px; height:20px; " | 308 | style="cursor:pointer; width:20px; height:20px; " |
| 309 | class="mr-3" | 309 | class="mr-3" |
| 310 | @click="deleteItem(props.item)" | 310 | @click="deleteItem(props.item)" |
| 311 | src="/static/icon/delete.png" | 311 | src="/static/icon/delete.png" |
| 312 | /> | 312 | /> |
| 313 | <span>Delete</span> | 313 | <span>Delete</span> |
| 314 | </v-tooltip> | 314 | </v-tooltip> |
| 315 | </span> | 315 | </span> |
| 316 | </td> | 316 | </td> |
| 317 | </tr> | 317 | </tr> |
| 318 | </template> | 318 | </template> |
| 319 | <v-alert | 319 | <v-alert |
| 320 | slot="no-results" | 320 | slot="no-results" |
| 321 | :value="true" | 321 | :value="true" |
| 322 | color="error" | 322 | color="error" |
| 323 | icon="warning" | 323 | icon="warning" |
| 324 | >Your search for "{{ search }}" found no results.</v-alert> | 324 | >Your search for "{{ search }}" found no results.</v-alert> |
| 325 | </v-data-table> | 325 | </v-data-table> |
| 326 | <!-- ****** Add Annoucement DETAILS******--> | 326 | <!-- ****** Add Annoucement DETAILS******--> |
| 327 | <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog" persistent> | 327 | <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog" persistent> |
| 328 | <v-card flat class="card-style pa-2" dark> | 328 | <v-card flat class="Card-style pa-2"> |
| 329 | <v-layout> | 329 | <v-layout> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <label class="title text-xs-center">Add Annoucement</label> | 331 | <label class="title text-xs-center">Add Annoucement</label> |
| 332 | <v-icon | 332 | <v-icon |
| 333 | size="24" | 333 | size="24" |
| 334 | class="right" | 334 | class="right" |
| 335 | @click="$refs.form.reset();addAnnoucementDialog = false" | 335 | @click="$refs.form.reset();addAnnoucementDialog = false" |
| 336 | >cancel</v-icon> | 336 | >cancel</v-icon> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | </v-layout> | 338 | </v-layout> |
| 339 | <v-container fluid> | 339 | <v-container fluid> |
| 340 | <v-layout align-center> | 340 | <v-layout align-center> |
| 341 | <v-flex xs12> | 341 | <v-flex xs12> |
| 342 | <v-flex xs12 sm12> | 342 | <v-flex xs12 sm12> |
| 343 | <v-form ref="form" v-model="valid" lazy-validation> | 343 | <v-form ref="form" v-model="valid" lazy-validation> |
| 344 | <v-layout> | 344 | <v-layout> |
| 345 | <v-flex | 345 | <v-flex |
| 346 | xs12 | 346 | xs12 |
| 347 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 347 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 348 | > | 348 | > |
| 349 | <v-avatar size="100px" v-if="!imageUrl"> | 349 | <v-avatar size="100px" v-if="!imageUrl"> |
| 350 | <img src="/static/icon/user.png" /> | 350 | <img src="/static/icon/user.png" /> |
| 351 | </v-avatar> | 351 | </v-avatar> |
| 352 | <input | 352 | <input |
| 353 | type="file" | 353 | type="file" |
| 354 | style="display: none" | 354 | style="display: none" |
| 355 | ref="image" | 355 | ref="image" |
| 356 | accept="image/*" | 356 | accept="image/*" |
| 357 | @change="onFilePicked" | 357 | @change="onFilePicked" |
| 358 | /> | 358 | /> |
| 359 | <img | 359 | <img |
| 360 | :src="imageData.imageUrl" | 360 | :src="imageData.imageUrl" |
| 361 | height="150" | 361 | height="150" |
| 362 | width="150" | 362 | width="150" |
| 363 | v-if="imageUrl" | 363 | v-if="imageUrl" |
| 364 | style="border-radius:50%; width:200px" | 364 | style="border-radius:50%; width:200px" |
| 365 | /> | 365 | /> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | <v-layout wrap> | 368 | <v-layout wrap> |
| 369 | <v-flex xs12 sm12> | 369 | <v-flex xs12 sm12> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex x4 sm4 class="pt-4 subheading"> | 371 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 372 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 372 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 373 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 373 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 374 | </v-flex> | 374 | </v-flex> |
| 375 | <v-flex xs8 sm8 class="ml-3"> | 375 | <v-flex xs8 sm8 class="ml-3"> |
| 376 | <v-select | 376 | <v-select |
| 377 | :items="addclass" | 377 | :items="addclass" |
| 378 | label="Select Class" | 378 | label="Select Class" |
| 379 | v-model="addAnnoucement.select" | 379 | v-model="addAnnoucement.select" |
| 380 | item-text="classNum" | 380 | item-text="classNum" |
| 381 | item-value="_id" | 381 | item-value="_id" |
| 382 | name="Select Class" | 382 | name="Select Class" |
| 383 | :rules="classRules" | 383 | :rules="classRules" |
| 384 | @change="getCourses(addAnnoucement.select)" | 384 | @change="getCourses(addAnnoucement.select)" |
| 385 | required | 385 | required |
| 386 | ></v-select> | 386 | ></v-select> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | <v-layout wrap> | 391 | <v-layout wrap> |
| 392 | <v-flex xs12 sm12> | 392 | <v-flex xs12 sm12> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs4 sm4 class="pt-4 subheading"> | 394 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 395 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 395 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 396 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 396 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | <v-flex xs8 sm8 class="ml-3"> | 398 | <v-flex xs8 sm8 class="ml-3"> |
| 399 | <v-select | 399 | <v-select |
| 400 | :items="courseData" | 400 | :items="courseData" |
| 401 | item-text="courseName" | 401 | item-text="courseName" |
| 402 | item-value="_id" | 402 | item-value="_id" |
| 403 | v-model="addAnnoucement.courseName" | 403 | v-model="addAnnoucement.courseName" |
| 404 | placeholder="fill your Course name" | 404 | placeholder="fill your Course name" |
| 405 | type="text" | 405 | type="text" |
| 406 | :rules="courseRules" | 406 | :rules="courseRules" |
| 407 | required | 407 | required |
| 408 | ></v-select> | 408 | ></v-select> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | </v-layout> | 410 | </v-layout> |
| 411 | </v-flex> | 411 | </v-flex> |
| 412 | <v-flex xs12 sm12> | 412 | <v-flex xs12 sm12> |
| 413 | <v-layout> | 413 | <v-layout> |
| 414 | <v-flex xs4 sm4 class="pt-4 subheading"> | 414 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 415 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> | 415 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> |
| 416 | <label | 416 | <label |
| 417 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 417 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 418 | >DiscussionType:</label> | 418 | >DiscussionType:</label> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-flex xs8 sm8 class="ml-3"> | 420 | <v-flex xs8 sm8 class="ml-3"> |
| 421 | <v-text-field | 421 | <v-text-field |
| 422 | v-model="addAnnoucement.discussionType" | 422 | v-model="addAnnoucement.discussionType" |
| 423 | placeholder="fill your Course name" | 423 | placeholder="fill your Course name" |
| 424 | type="text" | 424 | type="text" |
| 425 | :rules="courseRules" | 425 | :rules="courseRules" |
| 426 | required | 426 | required |
| 427 | ></v-text-field> | 427 | ></v-text-field> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | </v-layout> | 429 | </v-layout> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | <v-flex xs12 sm12> | 431 | <v-flex xs12 sm12> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs4 class="pt-4 subheading"> | 433 | <v-flex xs4 class="pt-4 subheading"> |
| 434 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 434 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 435 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> | 435 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> |
| 436 | </v-flex> | 436 | </v-flex> |
| 437 | <v-flex xs8 class="ml-3"> | 437 | <v-flex xs8 class="ml-3"> |
| 438 | <v-text-field | 438 | <v-text-field |
| 439 | label="Select Image" | 439 | label="Select Image" |
| 440 | @click="pickFile" | 440 | @click="pickFile" |
| 441 | v-model="imageName" | 441 | v-model="imageName" |
| 442 | append-icon="attach_file" | 442 | append-icon="attach_file" |
| 443 | ></v-text-field> | 443 | ></v-text-field> |
| 444 | </v-flex> | 444 | </v-flex> |
| 445 | </v-layout> | 445 | </v-layout> |
| 446 | </v-flex> | 446 | </v-flex> |
| 447 | </v-layout> | 447 | </v-layout> |
| 448 | <v-layout> | 448 | <v-layout> |
| 449 | <v-flex xs12 sm12> | 449 | <v-flex xs12 sm12> |
| 450 | <v-layout class="right"> | 450 | <v-layout class="right"> |
| 451 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 451 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 452 | </v-layout> | 452 | </v-layout> |
| 453 | </v-flex> | 453 | </v-flex> |
| 454 | </v-layout> | 454 | </v-layout> |
| 455 | </v-form> | 455 | </v-form> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | </v-container> | 459 | </v-container> |
| 460 | </v-card> | 460 | </v-card> |
| 461 | </v-dialog> | 461 | </v-dialog> |
| 462 | <v-snackbar | 462 | <v-snackbar |
| 463 | :timeout="timeout" | 463 | :timeout="timeout" |
| 464 | :top="y === 'top'" | 464 | :top="y === 'top'" |
| 465 | :right="x === 'right'" | 465 | :right="x === 'right'" |
| 466 | :vertical="mode === 'vertical'" | 466 | :vertical="mode === 'vertical'" |
| 467 | v-model="snackbar" | 467 | v-model="snackbar" |
| 468 | :color="color" | 468 | :color="color" |
| 469 | >{{ text }}</v-snackbar> | 469 | >{{ text }}</v-snackbar> |
| 470 | <div class="loader" v-if="showLoader"> | 470 | <div class="loader" v-if="showLoader"> |
| 471 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 471 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 472 | </div> | 472 | </div> |
| 473 | </v-container> | 473 | </v-container> |
| 474 | </template> | 474 | </template> |
| 475 | 475 | ||
| 476 | <script> | 476 | <script> |
| 477 | import http from "@/Services/http.js"; | 477 | import http from "@/Services/http.js"; |
| 478 | import moment from "moment"; | 478 | import moment from "moment"; |
| 479 | import countryList from "@/script/country.js"; | 479 | import countryList from "@/script/country.js"; |
| 480 | import parent from "@/script/parents.js"; | 480 | import parent from "@/script/parents.js"; |
| 481 | 481 | ||
| 482 | export default { | 482 | export default { |
| 483 | data: () => ({ | 483 | data: () => ({ |
| 484 | showNext: false, | 484 | showNext: false, |
| 485 | snackbar: false, | 485 | snackbar: false, |
| 486 | y: "top", | 486 | y: "top", |
| 487 | x: "right", | 487 | x: "right", |
| 488 | role: "", | 488 | role: "", |
| 489 | mode: "", | 489 | mode: "", |
| 490 | append: "", | 490 | append: "", |
| 491 | timeout: 3000, | 491 | timeout: 3000, |
| 492 | text: "", | 492 | text: "", |
| 493 | show: true, | 493 | show: true, |
| 494 | color: "", | 494 | color: "", |
| 495 | showSearch: false, | 495 | showSearch: false, |
| 496 | showLoader: false, | 496 | showLoader: false, |
| 497 | loading: false, | 497 | loading: false, |
| 498 | editLoading: false, | 498 | editLoading: false, |
| 499 | date: null, | 499 | date: null, |
| 500 | search: "", | 500 | search: "", |
| 501 | menu: false, | 501 | menu: false, |
| 502 | menu1: false, | 502 | menu1: false, |
| 503 | editStudentDialog: false, | 503 | editStudentDialog: false, |
| 504 | profileStudentDialog: false, | 504 | profileStudentDialog: false, |
| 505 | addAnnoucementDialog: false, | 505 | addAnnoucementDialog: false, |
| 506 | valid: true, | 506 | valid: true, |
| 507 | addclass: [], | 507 | addclass: [], |
| 508 | addSection: [], | 508 | addSection: [], |
| 509 | pagination: { | 509 | pagination: { |
| 510 | rowsPerPage: 10, | 510 | rowsPerPage: 10, |
| 511 | }, | 511 | }, |
| 512 | imageData: {}, | 512 | imageData: {}, |
| 513 | imageName: "", | 513 | imageName: "", |
| 514 | imageUrl: "", | 514 | imageUrl: "", |
| 515 | imageFile: "", | 515 | imageFile: "", |
| 516 | editImageName: "", | 516 | editImageName: "", |
| 517 | editImageUrl: "", | 517 | editImageUrl: "", |
| 518 | courseRules: [(v) => !!v || " Course Name is required"], | 518 | courseRules: [(v) => !!v || " Course Name is required"], |
| 519 | classRules: [(v) => !!v || " Class Name is required"], | 519 | classRules: [(v) => !!v || " Class Name is required"], |
| 520 | sectionRules: [(v) => !!v || "Section Name is required"], | 520 | sectionRules: [(v) => !!v || "Section Name is required"], |
| 521 | errorMessages: "", | 521 | errorMessages: "", |
| 522 | headers: [ | 522 | headers: [ |
| 523 | { | 523 | { |
| 524 | text: "Image", | 524 | text: "Image", |
| 525 | value: "attachementUrl", | 525 | value: "attachementUrl", |
| 526 | sortable: false, | 526 | sortable: false, |
| 527 | align: "center", | 527 | align: "center", |
| 528 | }, | 528 | }, |
| 529 | { | 529 | { |
| 530 | text: "Discussion Type", | 530 | text: "Discussion Type", |
| 531 | value: "discussionType", | 531 | value: "discussionType", |
| 532 | sortable: false, | 532 | sortable: false, |
| 533 | align: "center", | 533 | align: "center", |
| 534 | }, | 534 | }, |
| 535 | { text: "Action", value: "", sortable: false, align: "center" }, | 535 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 536 | ], | 536 | ], |
| 537 | courseData: [], | 537 | courseData: [], |
| 538 | editedIndex: -1, | 538 | editedIndex: -1, |
| 539 | addAnnoucement: { | 539 | addAnnoucement: { |
| 540 | select: "", | 540 | select: "", |
| 541 | }, | 541 | }, |
| 542 | selectAnnoucement: {}, | 542 | selectAnnoucement: {}, |
| 543 | editedItem: {}, | 543 | editedItem: {}, |
| 544 | annoucementData: [], | 544 | annoucementData: [], |
| 545 | }), | 545 | }), |
| 546 | watch: { | 546 | watch: { |
| 547 | addAnnoucementDialog: function (val) { | 547 | addAnnoucementDialog: function (val) { |
| 548 | if (!val) { | 548 | if (!val) { |
| 549 | this.addAnnoucement = []; | 549 | this.addAnnoucement = []; |
| 550 | this.imageName = ""; | 550 | this.imageName = ""; |
| 551 | this.imageFile = ""; | 551 | this.imageFile = ""; |
| 552 | this.imageUrl = ""; | 552 | this.imageUrl = ""; |
| 553 | } | 553 | } |
| 554 | }, | 554 | }, |
| 555 | }, | 555 | }, |
| 556 | methods: { | 556 | methods: { |
| 557 | getCourses(selectCourseId) { | 557 | getCourses(selectCourseId) { |
| 558 | this.showLoader = true; | 558 | this.showLoader = true; |
| 559 | http() | 559 | http() |
| 560 | .get("/getCourseesList", { | 560 | .get("/getCourseesList", { |
| 561 | params: { | 561 | params: { |
| 562 | classId: selectCourseId, | 562 | classId: selectCourseId, |
| 563 | }, | 563 | }, |
| 564 | }) | 564 | }) |
| 565 | .then((response) => { | 565 | .then((response) => { |
| 566 | this.courseData = response.data.data; | 566 | this.courseData = response.data.data; |
| 567 | this.showLoader = false; | 567 | this.showLoader = false; |
| 568 | }) | 568 | }) |
| 569 | .catch((err) => { | 569 | .catch((err) => { |
| 570 | // console.log("err====>", err); | 570 | // console.log("err====>", err); |
| 571 | this.showLoader = false; | 571 | this.showLoader = false; |
| 572 | this.snackbar = true; | 572 | this.snackbar = true; |
| 573 | this.color = "error"; | 573 | this.color = "error"; |
| 574 | this.text = error.response.data.message; | 574 | this.text = error.response.data.message; |
| 575 | }); | 575 | }); |
| 576 | }, | 576 | }, |
| 577 | getAnnoucementes() { | 577 | getAnnoucementes() { |
| 578 | this.showLoader = true; | 578 | this.showLoader = true; |
| 579 | http() | 579 | http() |
| 580 | .get("/getAnnoucementesList", { | 580 | .get("/getAnnoucementesList", { |
| 581 | params: { | 581 | params: { |
| 582 | courseId: this.selectAnnoucement.courseId, | 582 | courseId: this.selectAnnoucement.courseId, |
| 583 | classId: this.selectAnnoucement.classId, | 583 | classId: this.selectAnnoucement.classId, |
| 584 | }, | 584 | }, |
| 585 | }) | 585 | }) |
| 586 | .then((response) => { | 586 | .then((response) => { |
| 587 | this.annoucementData = response.data.data; | 587 | this.annoucementData = response.data.data; |
| 588 | this.showLoader = false; | 588 | this.showLoader = false; |
| 589 | }) | 589 | }) |
| 590 | .catch((err) => { | 590 | .catch((err) => { |
| 591 | // console.log("err====>", err); | 591 | // console.log("err====>", err); |
| 592 | this.showLoader = false; | 592 | this.showLoader = false; |
| 593 | this.snackbar = true; | 593 | this.snackbar = true; |
| 594 | this.color = "error"; | 594 | this.color = "error"; |
| 595 | this.text = error.response.data.message; | 595 | this.text = error.response.data.message; |
| 596 | }); | 596 | }); |
| 597 | }, | 597 | }, |
| 598 | // getSections(_id) { | 598 | // getSections(_id) { |
| 599 | // var token = this.$store.state.token; | 599 | // var token = this.$store.state.token; |
| 600 | // this.showLoader = true; | 600 | // this.showLoader = true; |
| 601 | // http() | 601 | // http() |
| 602 | // .get( | 602 | // .get( |
| 603 | // "/getSectionsList", | 603 | // "/getSectionsList", |
| 604 | // { params: { classId: _id } }, | 604 | // { params: { classId: _id } }, |
| 605 | // { | 605 | // { |
| 606 | // headers: { Authorization: "Bearer " + token } | 606 | // headers: { Authorization: "Bearer " + token } |
| 607 | // } | 607 | // } |
| 608 | // ) | 608 | // ) |
| 609 | // .then(response => { | 609 | // .then(response => { |
| 610 | // this.addSection = response.data.data; | 610 | // this.addSection = response.data.data; |
| 611 | // this.showLoader = false; | 611 | // this.showLoader = false; |
| 612 | // }) | 612 | // }) |
| 613 | // .catch(err => { | 613 | // .catch(err => { |
| 614 | // this.showLoader = false; | 614 | // this.showLoader = false; |
| 615 | // }); | 615 | // }); |
| 616 | // }, | 616 | // }, |
| 617 | pickFile() { | 617 | pickFile() { |
| 618 | this.$refs.image.click(); | 618 | this.$refs.image.click(); |
| 619 | }, | 619 | }, |
| 620 | pickEditFile() { | 620 | pickEditFile() { |
| 621 | this.$refs.editDataImage.click(); | 621 | this.$refs.editDataImage.click(); |
| 622 | }, | 622 | }, |
| 623 | dates: function (date) { | 623 | dates: function (date) { |
| 624 | return moment(date).format("MMMM DD, YYYY"); | 624 | return moment(date).format("MMMM DD, YYYY"); |
| 625 | return date; | 625 | return date; |
| 626 | }, | 626 | }, |
| 627 | onFilePicked(e) { | 627 | onFilePicked(e) { |
| 628 | // console.log(e) | 628 | // console.log(e) |
| 629 | const files = e.target.files; | 629 | const files = e.target.files; |
| 630 | this.imageData.upload = e.target.files[0]; | 630 | this.imageData.upload = e.target.files[0]; |
| 631 | if (files[0] !== undefined) { | 631 | if (files[0] !== undefined) { |
| 632 | this.imageName = files[0].name; | 632 | this.imageName = files[0].name; |
| 633 | if (this.imageName.lastIndexOf(".") <= 0) { | 633 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 634 | return; | 634 | return; |
| 635 | } | 635 | } |
| 636 | const fr = new FileReader(); | 636 | const fr = new FileReader(); |
| 637 | fr.readAsDataURL(files[0]); | 637 | fr.readAsDataURL(files[0]); |
| 638 | fr.addEventListener("load", () => { | 638 | fr.addEventListener("load", () => { |
| 639 | this.imageUrl = fr.result; | 639 | this.imageUrl = fr.result; |
| 640 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 640 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 641 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 641 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 642 | }); | 642 | }); |
| 643 | } else { | 643 | } else { |
| 644 | this.imageName = ""; | 644 | this.imageName = ""; |
| 645 | this.imageFile = ""; | 645 | this.imageFile = ""; |
| 646 | this.imageUrl = ""; | 646 | this.imageUrl = ""; |
| 647 | } | 647 | } |
| 648 | }, | 648 | }, |
| 649 | onEditFilePicked(e) { | 649 | onEditFilePicked(e) { |
| 650 | // console.log(e); | 650 | // console.log(e); |
| 651 | const files = e.target.files; | 651 | const files = e.target.files; |
| 652 | if (files[0] !== undefined) { | 652 | if (files[0] !== undefined) { |
| 653 | this.editImageName = files[0].name; | 653 | this.editImageName = files[0].name; |
| 654 | if (this.editImageName.lastIndexOf(".") <= 0) { | 654 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 655 | return; | 655 | return; |
| 656 | } | 656 | } |
| 657 | const fr = new FileReader(); | 657 | const fr = new FileReader(); |
| 658 | fr.readAsDataURL(files[0]); | 658 | fr.readAsDataURL(files[0]); |
| 659 | fr.addEventListener("load", () => { | 659 | fr.addEventListener("load", () => { |
| 660 | this.editImageUrl = fr.result; | 660 | this.editImageUrl = fr.result; |
| 661 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 661 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 662 | }); | 662 | }); |
| 663 | } else { | 663 | } else { |
| 664 | this.editImageName = ""; | 664 | this.editImageName = ""; |
| 665 | this.editiImageFile = ""; | 665 | this.editiImageFile = ""; |
| 666 | } | 666 | } |
| 667 | }, | 667 | }, |
| 668 | editItem(item) { | 668 | editItem(item) { |
| 669 | this.editedIndex = this.courseData.indexOf(item); | 669 | this.editedIndex = this.courseData.indexOf(item); |
| 670 | this.editedItem = Object.assign({}, item); | 670 | this.editedItem = Object.assign({}, item); |
| 671 | this.editStudentDialog = true; | 671 | this.editStudentDialog = true; |
| 672 | }, | 672 | }, |
| 673 | profile(item) { | 673 | profile(item) { |
| 674 | this.editedIndex = this.courseData.indexOf(item); | 674 | this.editedIndex = this.courseData.indexOf(item); |
| 675 | this.editedItem = Object.assign({}, item); | 675 | this.editedItem = Object.assign({}, item); |
| 676 | this.profileStudentDialog = true; | 676 | this.profileStudentDialog = true; |
| 677 | }, | 677 | }, |
| 678 | deleteItem(item) { | 678 | deleteItem(item) { |
| 679 | let deleteAnnoucement = { | 679 | let deleteAnnoucement = { |
| 680 | annoucementId: item._id, | 680 | annoucementId: item._id, |
| 681 | }; | 681 | }; |
| 682 | http() | 682 | http() |
| 683 | .delete( | 683 | .delete( |
| 684 | "/deleteAnnoucement", | 684 | "/deleteAnnoucement", |
| 685 | confirm("Are you sure you want to delete this?") && { | 685 | confirm("Are you sure you want to delete this?") && { |
| 686 | params: deleteAnnoucement, | 686 | params: deleteAnnoucement, |
| 687 | } | 687 | } |
| 688 | ) | 688 | ) |
| 689 | .then((response) => { | 689 | .then((response) => { |
| 690 | this.snackbar = true; | 690 | this.snackbar = true; |
| 691 | this.text = response.data.message; | 691 | this.text = response.data.message; |
| 692 | this.color = "green"; | 692 | this.color = "green"; |
| 693 | this.getAnnoucementes(); | 693 | this.getAnnoucementes(); |
| 694 | }) | 694 | }) |
| 695 | .catch((error) => { | 695 | .catch((error) => { |
| 696 | this.snackbar = true; | 696 | this.snackbar = true; |
| 697 | this.text = error.response.data.message; | 697 | this.text = error.response.data.message; |
| 698 | this.color = "error"; | 698 | this.color = "error"; |
| 699 | }); | 699 | }); |
| 700 | }, | 700 | }, |
| 701 | close() { | 701 | close() { |
| 702 | this.editStudentDialog = false; | 702 | this.editStudentDialog = false; |
| 703 | }, | 703 | }, |
| 704 | closeStudentProfile() { | 704 | closeStudentProfile() { |
| 705 | this.profileStudentDialog = false; | 705 | this.profileStudentDialog = false; |
| 706 | }, | 706 | }, |
| 707 | rowAnnoucement(id) { | 707 | rowAnnoucement(id) { |
| 708 | this.$router.push({ | 708 | this.$router.push({ |
| 709 | name: "Annoucement Forum", | 709 | name: "Annoucement Forum", |
| 710 | params: { annoucementId: id }, | 710 | params: { annoucementId: id }, |
| 711 | }); | 711 | }); |
| 712 | }, | 712 | }, |
| 713 | submit() { | 713 | submit() { |
| 714 | if (this.$refs.form.validate()) { | 714 | if (this.$refs.form.validate()) { |
| 715 | let addCourse = { | 715 | let addCourse = { |
| 716 | classId: this.addAnnoucement.select, | 716 | classId: this.addAnnoucement.select, |
| 717 | sectionId: this.addAnnoucement.selectSection, | 717 | sectionId: this.addAnnoucement.selectSection, |
| 718 | discussionType: this.addAnnoucement.discussionType, | 718 | discussionType: this.addAnnoucement.discussionType, |
| 719 | courseId: this.addAnnoucement.courseName, | 719 | courseId: this.addAnnoucement.courseName, |
| 720 | }; | 720 | }; |
| 721 | if (this.imageUrl) { | 721 | if (this.imageUrl) { |
| 722 | var str = this.imageUrl; | 722 | var str = this.imageUrl; |
| 723 | const [baseUrl, imageUrl] = str.split(/,/); | 723 | const [baseUrl, imageUrl] = str.split(/,/); |
| 724 | addCourse.upload = imageUrl; | 724 | addCourse.upload = imageUrl; |
| 725 | } | 725 | } |
| 726 | this.loading = true; | 726 | this.loading = true; |
| 727 | http() | 727 | http() |
| 728 | .post("/createAnnoucement", addCourse) | 728 | .post("/createAnnoucement", addCourse) |
| 729 | .then((response) => { | 729 | .then((response) => { |
| 730 | this.snackbar = true; | 730 | this.snackbar = true; |
| 731 | this.text = "New Annoucement added successfully"; | 731 | this.text = "New Annoucement added successfully"; |
| 732 | this.color = "green"; | 732 | this.color = "green"; |
| 733 | this.addAnnoucementDialog = false; | 733 | this.addAnnoucementDialog = false; |
| 734 | this.clear(); | 734 | this.clear(); |
| 735 | this.loading = false; | 735 | this.loading = false; |
| 736 | }) | 736 | }) |
| 737 | .catch((error) => { | 737 | .catch((error) => { |
| 738 | this.snackbar = true; | 738 | this.snackbar = true; |
| 739 | this.text = error.response.data.message; | 739 | this.text = error.response.data.message; |
| 740 | this.color = "error"; | 740 | this.color = "error"; |
| 741 | this.loading = false; | 741 | this.loading = false; |
| 742 | }); | 742 | }); |
| 743 | } | 743 | } |
| 744 | }, | 744 | }, |
| 745 | clear() { | 745 | clear() { |
| 746 | this.$refs.form.reset(); | 746 | this.$refs.form.reset(); |
| 747 | this.imageUrl = ""; | 747 | this.imageUrl = ""; |
| 748 | }, | 748 | }, |
| 749 | save() { | 749 | save() { |
| 750 | let editAnnoucement = { | 750 | let editAnnoucement = { |
| 751 | annoucementId: this.editedItem._id, | 751 | annoucementId: this.editedItem._id, |
| 752 | discussionType: this.editedItem.discussionType, | 752 | discussionType: this.editedItem.discussionType, |
| 753 | classId: this.editedItem.select, | 753 | classId: this.editedItem.select, |
| 754 | courseId: this.editedItem.courseName, | 754 | courseId: this.editedItem.courseName, |
| 755 | }; | 755 | }; |
| 756 | if (this.editImageUrl) { | 756 | if (this.editImageUrl) { |
| 757 | var str = this.editImageUrl; | 757 | var str = this.editImageUrl; |
| 758 | const [baseUrl, editImageUrl] = str.split(/,/); | 758 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 759 | editAnnoucement.upload = editImageUrl; | 759 | editAnnoucement.upload = editImageUrl; |
| 760 | } | 760 | } |
| 761 | this.editLoading = true; | 761 | this.editLoading = true; |
| 762 | http() | 762 | http() |
| 763 | .put("/updateAnnoucement", editAnnoucement) | 763 | .put("/updateAnnoucement", editAnnoucement) |
| 764 | .then((response) => { | 764 | .then((response) => { |
| 765 | this.snackbar = true; | 765 | this.snackbar = true; |
| 766 | this.text = response.data.message; | 766 | this.text = response.data.message; |
| 767 | this.color = "green"; | 767 | this.color = "green"; |
| 768 | this.imageUrl = ""; | 768 | this.imageUrl = ""; |
| 769 | this.getAnnoucementes(); | 769 | this.getAnnoucementes(); |
| 770 | this.close(); | 770 | this.close(); |
| 771 | this.editLoading = false; | 771 | this.editLoading = false; |
| 772 | }) | 772 | }) |
| 773 | .catch((error) => { | 773 | .catch((error) => { |
| 774 | this.snackbar = true; | 774 | this.snackbar = true; |
| 775 | this.text = error.response.data.statusText; | 775 | this.text = error.response.data.statusText; |
| 776 | this.color = "error"; | 776 | this.color = "error"; |
| 777 | this.editLoading = false; | 777 | this.editLoading = false; |
| 778 | }); | 778 | }); |
| 779 | }, | 779 | }, |
| 780 | displaySearch() { | 780 | displaySearch() { |
| 781 | this.show = false; | 781 | this.show = false; |
| 782 | this.showSearch = true; | 782 | this.showSearch = true; |
| 783 | }, | 783 | }, |
| 784 | closeSearch() { | 784 | closeSearch() { |
| 785 | this.showSearch = false; | 785 | this.showSearch = false; |
| 786 | this.show = true; | 786 | this.show = true; |
| 787 | this.search = ""; | 787 | this.search = ""; |
| 788 | }, | 788 | }, |
| 789 | }, | 789 | }, |
| 790 | mounted() { | 790 | mounted() { |
| 791 | var token = this.$store.state.token; | 791 | var token = this.$store.state.token; |
| 792 | http() | 792 | http() |
| 793 | .get("/getClassesList", { | 793 | .get("/getClassesList", { |
| 794 | headers: { Authorization: "Bearer " + token }, | 794 | headers: { Authorization: "Bearer " + token }, |
| 795 | }) | 795 | }) |
| 796 | .then((response) => { | 796 | .then((response) => { |
| 797 | this.addclass = response.data.data; | 797 | this.addclass = response.data.data; |
| 798 | }) | 798 | }) |
| 799 | .catch((error) => { | 799 | .catch((error) => { |
| 800 | this.showLoader = false; | 800 | this.showLoader = false; |
| 801 | if (error.response.status === 401) { | 801 | if (error.response.status === 401) { |
| 802 | this.$router.replace({ path: "/" }); | 802 | this.$router.replace({ path: "/" }); |
| 803 | this.$store.dispatch("setToken", null); | 803 | this.$store.dispatch("setToken", null); |
| 804 | this.$store.dispatch("Id", null); | 804 | this.$store.dispatch("Id", null); |
| 805 | this.$store.dispatch("Role", null); | 805 | this.$store.dispatch("Role", null); |
| 806 | } | 806 | } |
| 807 | }); | 807 | }); |
| 808 | }, | 808 | }, |
| 809 | }; | 809 | }; |
| 810 | </script> | 810 | </script> |
| 811 | <style> | 811 | <style> |
| 812 | .row-click { | 812 | .row-click { |
| 813 | cursor: pointer; | 813 | cursor: pointer; |
| 814 | } | 814 | } |
| 815 | </style> | 815 | </style> |
src/pages/Attendence/teacherAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** ATTENDENCE TACHERS TABLE ****** --> | 3 | <!-- ****** ATTENDENCE TACHERS TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addTeacherAttendenceDialog = true" | 10 | @click="addTeacherAttendenceDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | v-if="role != 'TEACHER' " | 15 | v-if="role != 'TEACHER' " |
| 16 | round | 16 | round |
| 17 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 17 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 18 | dark | 18 | dark |
| 19 | @click="addTeacherAttendenceDialog = true" | 19 | @click="addTeacherAttendenceDialog = true" |
| 20 | > | 20 | > |
| 21 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence | 21 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence |
| 22 | </v-btn> | 22 | </v-btn> |
| 23 | <v-spacer></v-spacer> | 23 | <v-spacer></v-spacer> |
| 24 | <v-card-title class="body-1" v-show="show"> | 24 | <v-card-title class="body-1" v-show="show"> |
| 25 | <v-btn icon large flat @click="displaySearch"> | 25 | <v-btn icon large flat @click="displaySearch"> |
| 26 | <v-avatar size="27"> | 26 | <v-avatar size="27"> |
| 27 | <img src="/static/icon/search.png" alt="icon" /> | 27 | <img src="/static/icon/search.png" alt="icon" /> |
| 28 | </v-avatar> | 28 | </v-avatar> |
| 29 | </v-btn> | 29 | </v-btn> |
| 30 | </v-card-title> | 30 | </v-card-title> |
| 31 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 31 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 32 | <v-layout> | 32 | <v-layout> |
| 33 | <v-text-field | 33 | <v-text-field |
| 34 | autofocus | 34 | autofocus |
| 35 | v-model="search" | 35 | v-model="search" |
| 36 | label="Search" | 36 | label="Search" |
| 37 | prepend-inner-icon="search" | 37 | prepend-inner-icon="search" |
| 38 | color="primary" | 38 | color="primary" |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | <v-icon @click="closeSearch" color="error">close</v-icon> | 40 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-toolbar> | 43 | </v-toolbar> |
| 44 | <v-data-table | 44 | <v-data-table |
| 45 | :headers="headers" | 45 | :headers="headers" |
| 46 | :items="teachersData" | 46 | :items="teachersData" |
| 47 | :pagination.sync="pagination" | 47 | :pagination.sync="pagination" |
| 48 | :search="search" | 48 | :search="search" |
| 49 | > | 49 | > |
| 50 | <template slot="items" slot-scope="props"> | 50 | <template slot="items" slot-scope="props"> |
| 51 | <tr class="tr"> | 51 | <tr class="tr"> |
| 52 | <td class="td td-row">{{ props.index + 1}}</td> | 52 | <td class="td td-row">{{ props.index + 1}}</td> |
| 53 | <td class="text-xs-center td td-row"> | 53 | <td class="text-xs-center td td-row"> |
| 54 | <v-avatar size="40"> | 54 | <v-avatar size="40"> |
| 55 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 55 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 56 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 56 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 57 | </v-avatar> | 57 | </v-avatar> |
| 58 | </td> | 58 | </td> |
| 59 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 59 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 60 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 60 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 61 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> | 61 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> |
| 62 | <td class="text-xs-center td td-row"> | 62 | <td class="text-xs-center td td-row"> |
| 63 | <router-link | 63 | <router-link |
| 64 | :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }" | 64 | :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }" |
| 65 | > | 65 | > |
| 66 | <span> | 66 | <span> |
| 67 | <v-tooltip top> | 67 | <v-tooltip top> |
| 68 | <img | 68 | <img |
| 69 | slot="activator" | 69 | slot="activator" |
| 70 | style="cursor:pointer; width:25px; height:25px; " | 70 | style="cursor:pointer; width:25px; height:25px; " |
| 71 | src="/static/icon/view.png" | 71 | src="/static/icon/view.png" |
| 72 | /> | 72 | /> |
| 73 | <span>View</span> | 73 | <span>View</span> |
| 74 | </v-tooltip> | 74 | </v-tooltip> |
| 75 | </span> | 75 | </span> |
| 76 | </router-link> | 76 | </router-link> |
| 77 | </td> | 77 | </td> |
| 78 | </tr> | 78 | </tr> |
| 79 | </template> | 79 | </template> |
| 80 | <v-alert | 80 | <v-alert |
| 81 | slot="no-results" | 81 | slot="no-results" |
| 82 | :value="true" | 82 | :value="true" |
| 83 | color="error" | 83 | color="error" |
| 84 | icon="warning" | 84 | icon="warning" |
| 85 | >Your search for "{{ search }}" found no results.</v-alert> | 85 | >Your search for "{{ search }}" found no results.</v-alert> |
| 86 | </v-data-table> | 86 | </v-data-table> |
| 87 | <!-- ****** Add Teachers Attendece****** --> | 87 | <!-- ****** Add Teachers Attendece****** --> |
| 88 | <v-dialog v-model="addTeacherAttendenceDialog" width="1600" v-if="addTeacherAttendenceDialog" persistent> | 88 | <v-dialog |
| 89 | v-model="addTeacherAttendenceDialog" | ||
| 90 | width="1600" | ||
| 91 | v-if="addTeacherAttendenceDialog" | ||
| 92 | persistent | ||
| 93 | > | ||
| 89 | <v-card flat class="pa-2"> | 94 | <v-card flat class="pa-2"> |
| 90 | <v-layout> | 95 | <v-layout> |
| 91 | <v-flex xs12> | 96 | <v-flex xs12> |
| 92 | <label class="title text-xs-center">Add Teacher Attendence</label> | 97 | <label class="title text-xs-center">Add Teacher Attendence</label> |
| 93 | <v-icon | 98 | <v-icon |
| 94 | size="24" | 99 | size="24" |
| 95 | class="right" | 100 | class="right" |
| 96 | @click="$refs.form.reset();addTeacherAttendenceDialog = false" | 101 | @click="$refs.form.reset();addTeacherAttendenceDialog = false" |
| 97 | >cancel</v-icon> | 102 | >cancel</v-icon> |
| 98 | </v-flex> | 103 | </v-flex> |
| 99 | </v-layout> | 104 | </v-layout> |
| 100 | <v-flex xs12 class="mt-4"> | 105 | <v-flex xs12 class="mt-4"> |
| 101 | <v-form ref="form" v-model="valid" lazy-validation> | 106 | <v-form ref="form" v-model="valid" lazy-validation> |
| 102 | <v-layout wrap> | 107 | <v-layout wrap> |
| 103 | <v-flex xs12 class="px-4"> | 108 | <v-flex xs12 class="px-4"> |
| 104 | <v-layout> | 109 | <v-layout> |
| 105 | <v-flex xs6 sm6 lg3 md4> | 110 | <v-flex xs6 sm6 lg3 md4> |
| 106 | <v-menu | 111 | <v-menu |
| 107 | ref="menu" | 112 | ref="menu" |
| 108 | :close-on-content-click="false" | 113 | :close-on-content-click="false" |
| 109 | v-model="menu" | 114 | v-model="menu" |
| 110 | :nudge-right="40" | 115 | :nudge-right="40" |
| 111 | lazy | 116 | lazy |
| 112 | transition="scale-transition" | 117 | transition="scale-transition" |
| 113 | offset-y | 118 | offset-y |
| 114 | full-width | 119 | full-width |
| 115 | min-width="290px" | 120 | min-width="290px" |
| 116 | > | 121 | > |
| 117 | <v-text-field | 122 | <v-text-field |
| 118 | slot="activator" | 123 | slot="activator" |
| 119 | v-model="date" | 124 | v-model="date" |
| 120 | label="Select Date" | 125 | label="Select Date" |
| 121 | append-icon="event" | 126 | append-icon="event" |
| 122 | :rules="dataValid" | 127 | :rules="dataValid" |
| 123 | readonly | 128 | readonly |
| 124 | ></v-text-field> | 129 | ></v-text-field> |
| 125 | <v-date-picker | 130 | <v-date-picker |
| 126 | ref="picker" | 131 | ref="picker" |
| 127 | v-model="date" | 132 | v-model="date" |
| 128 | :max="new Date().toISOString().substr(0, 10)" | 133 | :max="new Date().toISOString().substr(0, 10)" |
| 129 | min="1950-01-01" | 134 | min="1950-01-01" |
| 130 | @change="save" | 135 | @change="save" |
| 131 | ></v-date-picker> | 136 | ></v-date-picker> |
| 132 | </v-menu> | 137 | </v-menu> |
| 133 | </v-flex> | 138 | </v-flex> |
| 134 | <v-flex xs6 sm6 lg9 md8> | 139 | <v-flex xs6 sm6 lg9 md8> |
| 135 | <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn> | 140 | <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn> |
| 136 | </v-flex> | 141 | </v-flex> |
| 137 | </v-layout> | 142 | </v-layout> |
| 138 | </v-flex> | 143 | </v-flex> |
| 139 | </v-layout> | 144 | </v-layout> |
| 140 | </v-form> | 145 | </v-form> |
| 141 | </v-flex> | 146 | </v-flex> |
| 142 | <v-flex xs12 v-show="attendeceTable" class> | 147 | <v-flex xs12 v-show="attendeceTable" class> |
| 143 | <v-data-table | 148 | <v-data-table |
| 144 | :headers="headers" | 149 | :headers="headers" |
| 145 | :items="teachersData" | 150 | :items="teachersData" |
| 146 | :pagination.sync="pagination" | 151 | :pagination.sync="pagination" |
| 147 | :search="search" | 152 | :search="search" |
| 148 | > | 153 | > |
| 149 | <template slot="items" slot-scope="props"> | 154 | <template slot="items" slot-scope="props"> |
| 150 | <tr class="tr"> | 155 | <tr class="tr"> |
| 151 | <td class="td td-row">{{ props.index + 1}}</td> | 156 | <td class="td td-row">{{ props.index + 1}}</td> |
| 152 | <td class="text-xs-center td td-row"> | 157 | <td class="text-xs-center td td-row"> |
| 153 | <v-avatar size="40"> | 158 | <v-avatar size="40"> |
| 154 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 159 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 155 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 160 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 156 | </v-avatar> | 161 | </v-avatar> |
| 157 | </td> | 162 | </td> |
| 158 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 163 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 159 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 164 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 160 | <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td> | 165 | <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td> |
| 161 | <td class="text-xs-center td td-row"> | 166 | <td class="text-xs-center td td-row"> |
| 162 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> | 167 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> |
| 163 | <v-radio | 168 | <v-radio |
| 164 | v-for="attendences in attendenceType" | 169 | v-for="attendences in attendenceType" |
| 165 | :key="attendences.value" | 170 | :key="attendences.value" |
| 166 | :label="`${attendences.label}`" | 171 | :label="`${attendences.label}`" |
| 167 | :value="attendences.value" | 172 | :value="attendences.value" |
| 168 | ></v-radio> | 173 | ></v-radio> |
| 169 | </v-radio-group> | 174 | </v-radio-group> |
| 170 | </td> | 175 | </td> |
| 171 | </tr> | 176 | </tr> |
| 172 | </template> | 177 | </template> |
| 173 | </v-data-table> | 178 | </v-data-table> |
| 174 | <v-flex xs12> | 179 | <v-flex xs12> |
| 175 | <v-card-actions> | 180 | <v-card-actions> |
| 176 | <v-spacer></v-spacer> | 181 | <v-spacer></v-spacer> |
| 177 | <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn> | 182 | <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn> |
| 178 | </v-card-actions> | 183 | </v-card-actions> |
| 179 | </v-flex> | 184 | </v-flex> |
| 180 | </v-flex> | 185 | </v-flex> |
| 181 | </v-card> | 186 | </v-card> |
| 182 | </v-dialog> | 187 | </v-dialog> |
| 183 | <v-snackbar | 188 | <v-snackbar |
| 184 | :timeout="timeout" | 189 | :timeout="timeout" |
| 185 | :top="y === 'top'" | 190 | :top="y === 'top'" |
| 186 | :right="x === 'right'" | 191 | :right="x === 'right'" |
| 187 | :vertical="mode === 'vertical'" | 192 | :vertical="mode === 'vertical'" |
| 188 | v-model="snackbar" | 193 | v-model="snackbar" |
| 189 | color="success" | 194 | color="success" |
| 190 | >{{ text }}</v-snackbar> | 195 | >{{ text }}</v-snackbar> |
| 191 | <div class="loader" v-if="showLoader"> | 196 | <div class="loader" v-if="showLoader"> |
| 192 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 197 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 193 | </div> | 198 | </div> |
| 194 | </v-container> | 199 | </v-container> |
| 195 | </template> | 200 | </template> |
| 196 | 201 | ||
| 197 | <script> | 202 | <script> |
| 198 | import http from "@/Services/http.js"; | 203 | import http from "@/Services/http.js"; |
| 199 | import moment from "moment"; | 204 | import moment from "moment"; |
| 200 | 205 | ||
| 201 | export default { | 206 | export default { |
| 202 | data: () => ({ | 207 | data: () => ({ |
| 203 | snackbar: false, | 208 | snackbar: false, |
| 204 | y: "top", | 209 | y: "top", |
| 205 | x: "right", | 210 | x: "right", |
| 206 | role: "", | 211 | role: "", |
| 207 | mode: "", | 212 | mode: "", |
| 208 | timeout: 5000, | 213 | timeout: 5000, |
| 209 | text: "", | 214 | text: "", |
| 210 | date: null, | 215 | date: null, |
| 211 | menu: false, | 216 | menu: false, |
| 212 | show: true, | 217 | show: true, |
| 213 | showSearch: false, | 218 | showSearch: false, |
| 214 | addTeacherAttendenceDialog: false, | 219 | addTeacherAttendenceDialog: false, |
| 215 | attendeceTable: false, | 220 | attendeceTable: false, |
| 216 | showLoader: false, | 221 | showLoader: false, |
| 217 | loading: false, | 222 | loading: false, |
| 218 | search: "", | 223 | search: "", |
| 219 | valid: true, | 224 | valid: true, |
| 220 | isActive: true, | 225 | isActive: true, |
| 221 | newActive: false, | 226 | newActive: false, |
| 222 | dataValid: [(v) => !!v || "Date is required"], | 227 | dataValid: [(v) => !!v || "Date is required"], |
| 223 | attendenceType: [ | 228 | attendenceType: [ |
| 224 | { | 229 | { |
| 225 | label: "Present", | 230 | label: "Present", |
| 226 | value: "present", | 231 | value: "present", |
| 227 | }, | 232 | }, |
| 228 | { | 233 | { |
| 229 | label: "Late Present With Excuset", | 234 | label: "Late Present With Excuset", |
| 230 | value: "latePresentWithExcuse", | 235 | value: "latePresentWithExcuse", |
| 231 | }, | 236 | }, |
| 232 | { | 237 | { |
| 233 | label: "Late Present", | 238 | label: "Late Present", |
| 234 | value: "latePresent", | 239 | value: "latePresent", |
| 235 | }, | 240 | }, |
| 236 | { | 241 | { |
| 237 | label: "Absent", | 242 | label: "Absent", |
| 238 | value: "absent", | 243 | value: "absent", |
| 239 | }, | 244 | }, |
| 240 | ], | 245 | ], |
| 241 | pagination: { | 246 | pagination: { |
| 242 | rowsPerPage: 8, | 247 | rowsPerPage: 8, |
| 243 | }, | 248 | }, |
| 244 | headers: [ | 249 | headers: [ |
| 245 | { | 250 | { |
| 246 | text: "No", | 251 | text: "No", |
| 247 | align: "", | 252 | align: "", |
| 248 | sortable: false, | 253 | sortable: false, |
| 249 | value: "No", | 254 | value: "No", |
| 250 | }, | 255 | }, |
| 251 | { | 256 | { |
| 252 | text: "Profile Pic", | 257 | text: "Profile Pic", |
| 253 | value: "profilePicUrl", | 258 | value: "profilePicUrl", |
| 254 | sortable: false, | 259 | sortable: false, |
| 255 | align: "center", | 260 | align: "center", |
| 256 | }, | 261 | }, |
| 257 | { text: "Name", value: "name", sortable: false, align: "center" }, | 262 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 258 | { text: "Email", value: "email", sortable: false, align: "center" }, | 263 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 259 | { | 264 | { |
| 260 | text: "Mobile No", | 265 | text: "Mobile No", |
| 261 | value: "mobileNo", | 266 | value: "mobileNo", |
| 262 | sortable: false, | 267 | sortable: false, |
| 263 | align: "center", | 268 | align: "center", |
| 264 | }, | 269 | }, |
| 265 | { text: "Attendance", value: "", sortable: false, align: "center" }, | 270 | { text: "Attendance", value: "", sortable: false, align: "center" }, |
| 266 | ], | 271 | ], |
| 267 | desserts: [], | 272 | desserts: [], |
| 268 | teachersData: [], | 273 | teachersData: [], |
| 269 | addTeachers: {}, | 274 | addTeachers: {}, |
| 270 | }), | 275 | }), |
| 271 | watch: { | 276 | watch: { |
| 272 | menu(val) { | 277 | menu(val) { |
| 273 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY")); | 278 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY")); |
| 274 | }, | 279 | }, |
| 275 | addTeacherAttendenceDialog: function (val) { | 280 | addTeacherAttendenceDialog: function (val) { |
| 276 | if (!val) { | 281 | if (!val) { |
| 277 | // this.teachersData = []; | 282 | // this.teachersData = []; |
| 278 | this.date = null; | 283 | this.date = null; |
| 279 | this.menu = false; | 284 | this.menu = false; |
| 280 | } | 285 | } |
| 281 | }, | 286 | }, |
| 282 | }, | 287 | }, |
| 283 | methods: { | 288 | methods: { |
| 284 | save(date) { | 289 | save(date) { |
| 285 | this.$refs.menu.save(date); | 290 | this.$refs.menu.save(date); |
| 286 | }, | 291 | }, |
| 287 | showTable() { | 292 | showTable() { |
| 288 | this.attendeceTable = true; | 293 | this.attendeceTable = true; |
| 289 | this.getTeacherList(); | 294 | this.getTeacherList(); |
| 290 | }, | 295 | }, |
| 291 | getTeacherList() { | 296 | getTeacherList() { |
| 292 | this.showLoader = true; | 297 | this.showLoader = true; |
| 293 | var token = this.$store.state.token; | 298 | var token = this.$store.state.token; |
| 294 | http() | 299 | http() |
| 295 | .get("/getTeachersList", { | 300 | .get("/getTeachersList", { |
| 296 | headers: { Authorization: "Bearer " + token }, | 301 | headers: { Authorization: "Bearer " + token }, |
| 297 | }) | 302 | }) |
| 298 | .then((response) => { | 303 | .then((response) => { |
| 299 | this.teachersData = response.data.data; | 304 | this.teachersData = response.data.data; |
| 300 | // this.desserts = response.data.data; | 305 | // this.desserts = response.data.data; |
| 301 | var attendence = ""; | 306 | var attendence = ""; |
| 302 | for (let i = 0; i < this.teachersData.length; i++) { | 307 | for (let i = 0; i < this.teachersData.length; i++) { |
| 303 | this.teachersData[i].attendence = "present"; | 308 | this.teachersData[i].attendence = "present"; |
| 304 | } | 309 | } |
| 305 | this.showLoader = false; | 310 | this.showLoader = false; |
| 306 | // console.log("getTeacherList=====>",this.desserts) | 311 | // console.log("getTeacherList=====>",this.desserts) |
| 307 | // console.log("getTeacherList=====>",this.teachersData) | 312 | // console.log("getTeacherList=====>",this.teachersData) |
| 308 | }) | 313 | }) |
| 309 | .catch((error) => { | 314 | .catch((error) => { |
| 310 | this.showLoader = false; | 315 | this.showLoader = false; |
| 311 | if (error.response.status === 401) { | 316 | if (error.response.status === 401) { |
| 312 | this.$router.replace({ path: "/" }); | 317 | this.$router.replace({ path: "/" }); |
| 313 | this.$store.dispatch("setToken", null); | 318 | this.$store.dispatch("setToken", null); |
| 314 | this.$store.dispatch("Id", null); | 319 | this.$store.dispatch("Id", null); |
| 315 | } | 320 | } |
| 316 | }); | 321 | }); |
| 317 | }, | 322 | }, |
| 318 | submit() { | 323 | submit() { |
| 319 | var teachersAttendence = []; | 324 | var teachersAttendence = []; |
| 320 | for (var j = 0; j < this.teachersData.length; j++) { | 325 | for (var j = 0; j < this.teachersData.length; j++) { |
| 321 | teachersAttendence.push({ | 326 | teachersAttendence.push({ |
| 322 | teacherId: this.teachersData[j]._id, | 327 | teacherId: this.teachersData[j]._id, |
| 323 | attendanceType: this.teachersData[j].attendence, | 328 | attendanceType: this.teachersData[j].attendence, |
| 324 | }); | 329 | }); |
| 325 | } | 330 | } |
| 326 | if (this.$refs.form.validate()) { | 331 | if (this.$refs.form.validate()) { |
| 327 | let attendanceData = { | 332 | let attendanceData = { |
| 328 | date: this.date, | 333 | date: this.date, |
| 329 | teachers: teachersAttendence, | 334 | teachers: teachersAttendence, |
| 330 | }; | 335 | }; |
| 331 | http() | 336 | http() |
| 332 | .post("/createTeacherAttendance", attendanceData) | 337 | .post("/createTeacherAttendance", attendanceData) |
| 333 | .then((response) => { | 338 | .then((response) => { |
| 334 | this.snackbar = true; | 339 | this.snackbar = true; |
| 335 | this.text = response.data.message; | 340 | this.text = response.data.message; |
| 336 | this.addTeacherAttendenceDialog = false; | 341 | this.addTeacherAttendenceDialog = false; |
| 337 | this.clear(); | 342 | this.clear(); |
| 338 | }) | 343 | }) |
| 339 | .catch((error) => { | 344 | .catch((error) => { |
| 340 | this.snackbar = true; | 345 | this.snackbar = true; |
| 341 | this.text = error.response.data.message; | 346 | this.text = error.response.data.message; |
| 342 | }); | 347 | }); |
| 343 | } | 348 | } |
| 344 | }, | 349 | }, |
| 345 | clear() { | 350 | clear() { |
| 346 | this.$refs.form.reset(); | 351 | this.$refs.form.reset(); |
| 347 | this.imageUrl = ""; | 352 | this.imageUrl = ""; |
| 348 | }, | 353 | }, |
| 349 | 354 | ||
| 350 | displaySearch() { | 355 | displaySearch() { |
| 351 | (this.show = false), (this.showSearch = true); | 356 | (this.show = false), (this.showSearch = true); |
| 352 | }, | 357 | }, |
| 353 | closeSearch() { | 358 | closeSearch() { |
| 354 | this.showSearch = false; | 359 | this.showSearch = false; |
| 355 | this.show = true; | 360 | this.show = true; |
| 356 | this.search = ""; | 361 | this.search = ""; |
| 357 | }, | 362 | }, |
| 358 | }, | 363 | }, |
| 359 | mounted() { | 364 | mounted() { |
| 360 | this.getTeacherList(); | 365 | this.getTeacherList(); |
| 361 | this.role = this.$store.state.role; | 366 | this.role = this.$store.state.role; |
| 362 | }, | 367 | }, |
| 363 | }; | 368 | }; |
| 364 | </script> | 369 | </script> |
src/pages/Class/addclass.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ClASS ****** --> | 3 | <!-- ****** EDIT ClASS ****** --> |
| 4 | <v-dialog v-model="editClassDialog" max-width="400px" persistent> | 4 | <v-dialog v-model="editClassDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Class</label> | 8 | <label class="title text-xs-center">Edit Class</label> |
| 9 | <v-icon size="24" class="right" @click="editClassDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editClassDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-layout justify-center> | 13 | <v-layout justify-center> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-flex xs12> | 15 | <v-flex xs12> |
| 16 | <v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field> | 16 | <v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-card-actions> | 18 | <v-card-actions> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 20 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 21 | <v-spacer></v-spacer> | 21 | <v-spacer></v-spacer> |
| 22 | </v-card-actions> | 22 | </v-card-actions> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | </v-container> | 25 | </v-container> |
| 26 | </v-card> | 26 | </v-card> |
| 27 | </v-dialog> | 27 | </v-dialog> |
| 28 | 28 | ||
| 29 | <!-- ****** PROFILE VIEW STUDENTS ****** --> | 29 | <!-- ****** PROFILE VIEW STUDENTS ****** --> |
| 30 | <v-dialog v-model="profileClassDialog" max-width="400px" persistent> | 30 | <v-dialog v-model="profileClassDialog" max-width="400px" persistent> |
| 31 | <v-card flat class="card-style pa-3" dark> | 31 | <v-card flat class="Card-style pa-3"> |
| 32 | <v-layout> | 32 | <v-layout> |
| 33 | <v-flex xs12> | 33 | <v-flex xs12> |
| 34 | <label class="title text-xs-center">View Class</label> | 34 | <label class="title text-xs-center">View Class</label> |
| 35 | <v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon> | 35 | <v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | </v-layout> | 37 | </v-layout> |
| 38 | <v-card-text> | 38 | <v-card-text> |
| 39 | <v-container grid-list-md> | 39 | <v-container grid-list-md> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs6 sm6> | 41 | <v-flex xs6 sm6> |
| 42 | <h5 class="right my-1 subheading"> | 42 | <h5 class="right my-1 subheading"> |
| 43 | <b>Class Name:</b> | 43 | <b>Class Name:</b> |
| 44 | </h5> | 44 | </h5> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex sm6 xs6> | 46 | <v-flex sm6 xs6> |
| 47 | <h5 class="my-1">{{ editedItem.classNum }}</h5> | 47 | <h5 class="my-1">{{ editedItem.classNum }}</h5> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | </v-layout> | 49 | </v-layout> |
| 50 | </v-container> | 50 | </v-container> |
| 51 | </v-card-text> | 51 | </v-card-text> |
| 52 | </v-card> | 52 | </v-card> |
| 53 | </v-dialog> | 53 | </v-dialog> |
| 54 | 54 | ||
| 55 | <!-- ****** Class Table ****** --> | 55 | <!-- ****** Class Table ****** --> |
| 56 | 56 | ||
| 57 | <v-toolbar color="transparent" flat> | 57 | <v-toolbar color="transparent" flat> |
| 58 | <v-btn | 58 | <v-btn |
| 59 | fab | 59 | fab |
| 60 | dark | 60 | dark |
| 61 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 61 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 62 | small | 62 | small |
| 63 | @click="addClassDialog = true" | 63 | @click="addClassDialog = true" |
| 64 | > | 64 | > |
| 65 | <v-icon dark>add</v-icon> | 65 | <v-icon dark>add</v-icon> |
| 66 | </v-btn> | 66 | </v-btn> |
| 67 | <v-btn | 67 | <v-btn |
| 68 | round | 68 | round |
| 69 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 69 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 70 | dark | 70 | dark |
| 71 | @click="addClassDialog = true" | 71 | @click="addClassDialog = true" |
| 72 | > | 72 | > |
| 73 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Class | 73 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Class |
| 74 | </v-btn> | 74 | </v-btn> |
| 75 | <v-spacer></v-spacer> | 75 | <v-spacer></v-spacer> |
| 76 | <v-card-title class="body-1" v-show="show"> | 76 | <v-card-title class="body-1" v-show="show"> |
| 77 | <v-btn icon large flat @click="displaySearch"> | 77 | <v-btn icon large flat @click="displaySearch"> |
| 78 | <v-avatar size="27"> | 78 | <v-avatar size="27"> |
| 79 | <img src="/static/icon/search.png" alt="icon" /> | 79 | <img src="/static/icon/search.png" alt="icon" /> |
| 80 | </v-avatar> | 80 | </v-avatar> |
| 81 | </v-btn> | 81 | </v-btn> |
| 82 | </v-card-title> | 82 | </v-card-title> |
| 83 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 83 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 84 | <v-layout> | 84 | <v-layout> |
| 85 | <v-text-field | 85 | <v-text-field |
| 86 | autofocus | 86 | autofocus |
| 87 | v-model="search" | 87 | v-model="search" |
| 88 | label="Search" | 88 | label="Search" |
| 89 | prepend-inner-icon="search" | 89 | prepend-inner-icon="search" |
| 90 | color="primary" | 90 | color="primary" |
| 91 | ></v-text-field> | 91 | ></v-text-field> |
| 92 | <v-icon @click="closeSearch" color="error">close</v-icon> | 92 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-toolbar> | 95 | </v-toolbar> |
| 96 | <v-data-table | 96 | <v-data-table |
| 97 | :headers="headers" | 97 | :headers="headers" |
| 98 | :items="classList" | 98 | :items="classList" |
| 99 | :pagination.sync="pagination" | 99 | :pagination.sync="pagination" |
| 100 | :search="search" | 100 | :search="search" |
| 101 | > | 101 | > |
| 102 | <template slot="items" slot-scope="props"> | 102 | <template slot="items" slot-scope="props"> |
| 103 | <tr class="tr"> | 103 | <tr class="tr"> |
| 104 | <td class="td td-row">{{ props.index + 1 }}</td> | 104 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 105 | <td class="text-xs-center td td-row">{{ props.item.classNum}}</td> | 105 | <td class="text-xs-center td td-row">{{ props.item.classNum}}</td> |
| 106 | <td class="text-xs-center td td-row"> | 106 | <td class="text-xs-center td td-row"> |
| 107 | <span> | 107 | <span> |
| 108 | <v-tooltip top> | 108 | <v-tooltip top> |
| 109 | <img | 109 | <img |
| 110 | slot="activator" | 110 | slot="activator" |
| 111 | style="cursor:pointer; width:25px; height:25px; " | 111 | style="cursor:pointer; width:25px; height:25px; " |
| 112 | class="mr-3" | 112 | class="mr-3" |
| 113 | @click="profile(props.item)" | 113 | @click="profile(props.item)" |
| 114 | src="/static/icon/view.png" | 114 | src="/static/icon/view.png" |
| 115 | /> | 115 | /> |
| 116 | <span>View</span> | 116 | <span>View</span> |
| 117 | </v-tooltip> | 117 | </v-tooltip> |
| 118 | <v-tooltip top> | 118 | <v-tooltip top> |
| 119 | <img | 119 | <img |
| 120 | slot="activator" | 120 | slot="activator" |
| 121 | style="cursor:pointer; width:20px; height:18px; " | 121 | style="cursor:pointer; width:20px; height:18px; " |
| 122 | class="mr-3" | 122 | class="mr-3" |
| 123 | @click="editItem(props.item)" | 123 | @click="editItem(props.item)" |
| 124 | src="/static/icon/edit.png" | 124 | src="/static/icon/edit.png" |
| 125 | /> | 125 | /> |
| 126 | <span>Edit</span> | 126 | <span>Edit</span> |
| 127 | </v-tooltip> | 127 | </v-tooltip> |
| 128 | <!-- <v-tooltip top> | 128 | <!-- <v-tooltip top> |
| 129 | <img | 129 | <img |
| 130 | slot="activator" | 130 | slot="activator" |
| 131 | style="cursor:pointer; width:20px; height:20px; " | 131 | style="cursor:pointer; width:20px; height:20px; " |
| 132 | @click="deleteItem(props.item)" | 132 | @click="deleteItem(props.item)" |
| 133 | src="/static/icon/delete.png" | 133 | src="/static/icon/delete.png" |
| 134 | /> | 134 | /> |
| 135 | <span>Delete</span> | 135 | <span>Delete</span> |
| 136 | </v-tooltip>--> | 136 | </v-tooltip>--> |
| 137 | </span> | 137 | </span> |
| 138 | </td> | 138 | </td> |
| 139 | </tr> | 139 | </tr> |
| 140 | </template> | 140 | </template> |
| 141 | <v-alert | 141 | <v-alert |
| 142 | slot="no-results" | 142 | slot="no-results" |
| 143 | :value="true" | 143 | :value="true" |
| 144 | color="error" | 144 | color="error" |
| 145 | icon="warning" | 145 | icon="warning" |
| 146 | >Your search for "{{ search }}" found no results.</v-alert> | 146 | >Your search for "{{ search }}" found no results.</v-alert> |
| 147 | </v-data-table> | 147 | </v-data-table> |
| 148 | 148 | ||
| 149 | <!-- DIALOG BOX - ADD Class --> | 149 | <!-- DIALOG BOX - ADD Class --> |
| 150 | <v-dialog v-model="addClassDialog" max-width="400px" v-if="addClassDialog" persistent> | 150 | <v-dialog v-model="addClassDialog" max-width="400px" v-if="addClassDialog" persistent> |
| 151 | <v-card flat class="card-style pa-2" dark> | 151 | <v-card flat class="Card-style pa-2"> |
| 152 | <v-layout> | 152 | <v-layout> |
| 153 | <v-flex xs12> | 153 | <v-flex xs12> |
| 154 | <label class="title text-xs-center">Add Class</label> | 154 | <label class="title text-xs-center">Add Class</label> |
| 155 | <v-icon | 155 | <v-icon |
| 156 | size="24" | 156 | size="24" |
| 157 | class="right" | 157 | class="right" |
| 158 | @click="$refs.form.reset();addClassDialog = false" | 158 | @click="$refs.form.reset();addClassDialog = false" |
| 159 | >cancel</v-icon> | 159 | >cancel</v-icon> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | <v-container fluid fill-height> | 162 | <v-container fluid fill-height> |
| 163 | <v-layout align-center> | 163 | <v-layout align-center> |
| 164 | <v-flex xs12> | 164 | <v-flex xs12> |
| 165 | <v-form ref="form" v-model="valid" lazy-validation> | 165 | <v-form ref="form" v-model="valid" lazy-validation> |
| 166 | <v-flex xs12 class="headline text-xs-center"> | 166 | <v-flex xs12 class="headline text-xs-center"> |
| 167 | <label>Class</label> | 167 | <label>Class</label> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | <v-flex xs12> | 169 | <v-flex xs12> |
| 170 | <v-text-field | 170 | <v-text-field |
| 171 | v-model="addclasses.classNum" | 171 | v-model="addclasses.classNum" |
| 172 | placeholder="fill your class Name" | 172 | placeholder="fill your class Name" |
| 173 | type="text" | 173 | type="text" |
| 174 | :rules="nameRules" | 174 | :rules="nameRules" |
| 175 | required | 175 | required |
| 176 | ></v-text-field> | 176 | ></v-text-field> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | <v-layout> | 178 | <v-layout> |
| 179 | <v-flex xs12 sm12> | 179 | <v-flex xs12 sm12> |
| 180 | <v-card-actions> | 180 | <v-card-actions> |
| 181 | <v-spacer></v-spacer> | 181 | <v-spacer></v-spacer> |
| 182 | <v-btn | 182 | <v-btn |
| 183 | @click="submit" | 183 | @click="submit" |
| 184 | class="add-button" | 184 | class="add-button" |
| 185 | round | 185 | round |
| 186 | dark | 186 | dark |
| 187 | :loading="loading" | 187 | :loading="loading" |
| 188 | >Add Class</v-btn> | 188 | >Add Class</v-btn> |
| 189 | <v-spacer></v-spacer> | 189 | <v-spacer></v-spacer> |
| 190 | </v-card-actions> | 190 | </v-card-actions> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | </v-form> | 193 | </v-form> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | </v-container> | 196 | </v-container> |
| 197 | </v-card> | 197 | </v-card> |
| 198 | </v-dialog> | 198 | </v-dialog> |
| 199 | <div class="loader" v-if="showLoader"> | 199 | <div class="loader" v-if="showLoader"> |
| 200 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 200 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 201 | </div> | 201 | </div> |
| 202 | <v-snackbar | 202 | <v-snackbar |
| 203 | :timeout="timeout" | 203 | :timeout="timeout" |
| 204 | :top="y === 'top'" | 204 | :top="y === 'top'" |
| 205 | :right="x === 'right'" | 205 | :right="x === 'right'" |
| 206 | :vertical="mode === 'vertical'" | 206 | :vertical="mode === 'vertical'" |
| 207 | v-model="snackbar" | 207 | v-model="snackbar" |
| 208 | :color="color" | 208 | :color="color" |
| 209 | >{{ text }}</v-snackbar> | 209 | >{{ text }}</v-snackbar> |
| 210 | </v-container> | 210 | </v-container> |
| 211 | </template> | 211 | </template> |
| 212 | 212 | ||
| 213 | <script> | 213 | <script> |
| 214 | import http from "@/Services/http.js"; | 214 | import http from "@/Services/http.js"; |
| 215 | 215 | ||
| 216 | export default { | 216 | export default { |
| 217 | data: () => ({ | 217 | data: () => ({ |
| 218 | snackbar: false, | 218 | snackbar: false, |
| 219 | y: "top", | 219 | y: "top", |
| 220 | x: "right", | 220 | x: "right", |
| 221 | mode: "", | 221 | mode: "", |
| 222 | timeout: 5000, | 222 | timeout: 5000, |
| 223 | text: "", | 223 | text: "", |
| 224 | color: "", | 224 | color: "", |
| 225 | show: true, | 225 | show: true, |
| 226 | showSearch: false, | 226 | showSearch: false, |
| 227 | showLoader: false, | 227 | showLoader: false, |
| 228 | loading: false, | 228 | loading: false, |
| 229 | addClassDialog: false, | 229 | addClassDialog: false, |
| 230 | search: "", | 230 | search: "", |
| 231 | editClassDialog: false, | 231 | editClassDialog: false, |
| 232 | profileClassDialog: false, | 232 | profileClassDialog: false, |
| 233 | valid: true, | 233 | valid: true, |
| 234 | pagination: { | 234 | pagination: { |
| 235 | rowsPerPage: 10, | 235 | rowsPerPage: 10, |
| 236 | }, | 236 | }, |
| 237 | nameRules: [(v) => !!v || " Class Name is required"], | 237 | nameRules: [(v) => !!v || " Class Name is required"], |
| 238 | headers: [ | 238 | headers: [ |
| 239 | { | 239 | { |
| 240 | text: "No", | 240 | text: "No", |
| 241 | align: "left", | 241 | align: "left", |
| 242 | sortable: false, | 242 | sortable: false, |
| 243 | value: "No", | 243 | value: "No", |
| 244 | }, | 244 | }, |
| 245 | { text: "Class No", value: "classNum", sortable: false, align: "center" }, | 245 | { text: "Class No", value: "classNum", sortable: false, align: "center" }, |
| 246 | 246 | ||
| 247 | { text: "Action", value: "", sortable: false, align: "center" }, | 247 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 248 | ], | 248 | ], |
| 249 | classList: [], | 249 | classList: [], |
| 250 | editedIndex: -1, | 250 | editedIndex: -1, |
| 251 | editedItem: { | 251 | editedItem: { |
| 252 | classNum: "", | 252 | classNum: "", |
| 253 | }, | 253 | }, |
| 254 | addclasses: { | 254 | addclasses: { |
| 255 | classNum: "", | 255 | classNum: "", |
| 256 | }, | 256 | }, |
| 257 | }), | 257 | }), |
| 258 | watch: { | 258 | watch: { |
| 259 | addClassDialog: function (val) { | 259 | addClassDialog: function (val) { |
| 260 | if (!val) { | 260 | if (!val) { |
| 261 | this.addclasses = []; | 261 | this.addclasses = []; |
| 262 | } | 262 | } |
| 263 | }, | 263 | }, |
| 264 | }, | 264 | }, |
| 265 | methods: { | 265 | methods: { |
| 266 | getClassList() { | 266 | getClassList() { |
| 267 | this.showLoader = true; | 267 | this.showLoader = true; |
| 268 | var token = this.$store.state.token; | 268 | var token = this.$store.state.token; |
| 269 | http() | 269 | http() |
| 270 | .get("/getClassesList") | 270 | .get("/getClassesList") |
| 271 | .then((response) => { | 271 | .then((response) => { |
| 272 | this.classList = response.data.data; | 272 | this.classList = response.data.data; |
| 273 | this.showLoader = false; | 273 | this.showLoader = false; |
| 274 | }) | 274 | }) |
| 275 | .catch((error) => { | 275 | .catch((error) => { |
| 276 | this.showLoader = false; | 276 | this.showLoader = false; |
| 277 | if (error.response.status === 401) { | 277 | if (error.response.status === 401) { |
| 278 | this.$router.replace({ path: "/" }); | 278 | this.$router.replace({ path: "/" }); |
| 279 | this.$store.dispatch("setToken", null); | 279 | this.$store.dispatch("setToken", null); |
| 280 | this.$store.dispatch("Id", null); | 280 | this.$store.dispatch("Id", null); |
| 281 | } | 281 | } |
| 282 | }); | 282 | }); |
| 283 | }, | 283 | }, |
| 284 | editItem(item) { | 284 | editItem(item) { |
| 285 | this.editedIndex = this.classList.indexOf(item); | 285 | this.editedIndex = this.classList.indexOf(item); |
| 286 | this.editedItem = Object.assign({}, item); | 286 | this.editedItem = Object.assign({}, item); |
| 287 | this.editClassDialog = true; | 287 | this.editClassDialog = true; |
| 288 | }, | 288 | }, |
| 289 | profile(item) { | 289 | profile(item) { |
| 290 | this.editedIndex = this.classList.indexOf(item); | 290 | this.editedIndex = this.classList.indexOf(item); |
| 291 | this.editedItem = Object.assign({}, item); | 291 | this.editedItem = Object.assign({}, item); |
| 292 | this.profileClassDialog = true; | 292 | this.profileClassDialog = true; |
| 293 | }, | 293 | }, |
| 294 | deleteItem(item) { | 294 | deleteItem(item) { |
| 295 | let deleteStudent = { | 295 | let deleteStudent = { |
| 296 | classId: item._id, | 296 | classId: item._id, |
| 297 | }; | 297 | }; |
| 298 | http() | 298 | http() |
| 299 | .delete( | 299 | .delete( |
| 300 | "/deleteClass", | 300 | "/deleteClass", |
| 301 | confirm("Are you sure you want to delete this?") && { | 301 | confirm("Are you sure you want to delete this?") && { |
| 302 | params: deleteStudent, | 302 | params: deleteStudent, |
| 303 | } | 303 | } |
| 304 | ) | 304 | ) |
| 305 | .then((response) => { | 305 | .then((response) => { |
| 306 | this.snackbar = true; | 306 | this.snackbar = true; |
| 307 | this.text = response.data.message; | 307 | this.text = response.data.message; |
| 308 | this.color = "green"; | 308 | this.color = "green"; |
| 309 | this.getClassList(); | 309 | this.getClassList(); |
| 310 | }) | 310 | }) |
| 311 | .catch((error) => { | 311 | .catch((error) => { |
| 312 | this.snackbar = true; | 312 | this.snackbar = true; |
| 313 | this.color = "error"; | 313 | this.color = "error"; |
| 314 | this.text = error.response.data.message; | 314 | this.text = error.response.data.message; |
| 315 | }); | 315 | }); |
| 316 | }, | 316 | }, |
| 317 | close() { | 317 | close() { |
| 318 | this.editClassDialog = false; | 318 | this.editClassDialog = false; |
| 319 | }, | 319 | }, |
| 320 | closeProfile() { | 320 | closeProfile() { |
| 321 | this.profileClassDialog = false; | 321 | this.profileClassDialog = false; |
| 322 | }, | 322 | }, |
| 323 | submit() { | 323 | submit() { |
| 324 | if (this.$refs.form.validate()) { | 324 | if (this.$refs.form.validate()) { |
| 325 | let addClass = { | 325 | let addClass = { |
| 326 | classNum: this.addclasses.classNum, | 326 | classNum: this.addclasses.classNum, |
| 327 | }; | 327 | }; |
| 328 | this.loading = true; | 328 | this.loading = true; |
| 329 | http() | 329 | http() |
| 330 | .post("/createClass", addClass) | 330 | .post("/createClass", addClass) |
| 331 | .then((response) => { | 331 | .then((response) => { |
| 332 | this.getClassList(); | 332 | this.getClassList(); |
| 333 | this.snackbar = true; | 333 | this.snackbar = true; |
| 334 | this.text = response.data.message; | 334 | this.text = response.data.message; |
| 335 | this.color = "green"; | 335 | this.color = "green"; |
| 336 | // this.clear(); | 336 | // this.clear(); |
| 337 | this.loading = false; | 337 | this.loading = false; |
| 338 | this.$refs.form.reset(); | 338 | this.$refs.form.reset(); |
| 339 | this.addClassDialog = false; | 339 | this.addClassDialog = false; |
| 340 | }) | 340 | }) |
| 341 | .catch((error) => { | 341 | .catch((error) => { |
| 342 | this.loading = false; | 342 | this.loading = false; |
| 343 | this.snackbar = true; | 343 | this.snackbar = true; |
| 344 | this.color = "error"; | 344 | this.color = "error"; |
| 345 | this.text = error.response.data.message; | 345 | this.text = error.response.data.message; |
| 346 | }); | 346 | }); |
| 347 | } | 347 | } |
| 348 | }, | 348 | }, |
| 349 | clear() { | 349 | clear() { |
| 350 | this.$refs.form.reset(); | 350 | this.$refs.form.reset(); |
| 351 | }, | 351 | }, |
| 352 | save() { | 352 | save() { |
| 353 | let editClass = { | 353 | let editClass = { |
| 354 | classId: this.editedItem._id, | 354 | classId: this.editedItem._id, |
| 355 | classNum: this.editedItem.classNum, | 355 | classNum: this.editedItem.classNum, |
| 356 | }; | 356 | }; |
| 357 | http() | 357 | http() |
| 358 | .put("/updateClass", editClass) | 358 | .put("/updateClass", editClass) |
| 359 | .then((response) => { | 359 | .then((response) => { |
| 360 | this.snackbar = true; | 360 | this.snackbar = true; |
| 361 | this.text = response.data.message; | 361 | this.text = response.data.message; |
| 362 | this.color = "green"; | 362 | this.color = "green"; |
| 363 | this.getClassList(); | 363 | this.getClassList(); |
| 364 | this.close(); | 364 | this.close(); |
| 365 | }) | 365 | }) |
| 366 | .catch((error) => { | 366 | .catch((error) => { |
| 367 | this.snackbar = true; | 367 | this.snackbar = true; |
| 368 | this.text = error.response.data.message; | 368 | this.text = error.response.data.message; |
| 369 | this.color = "error"; | 369 | this.color = "error"; |
| 370 | // console.log(error); | 370 | // console.log(error); |
| 371 | }); | 371 | }); |
| 372 | }, | 372 | }, |
| 373 | displaySearch() { | 373 | displaySearch() { |
| 374 | (this.show = false), (this.showSearch = true); | 374 | (this.show = false), (this.showSearch = true); |
| 375 | }, | 375 | }, |
| 376 | closeSearch() { | 376 | closeSearch() { |
| 377 | this.showSearch = false; | 377 | this.showSearch = false; |
| 378 | this.show = true; | 378 | this.show = true; |
| 379 | this.search = ""; | 379 | this.search = ""; |
| 380 | }, | 380 | }, |
| 381 | }, | 381 | }, |
| 382 | mounted() { | 382 | mounted() { |
| 383 | this.getClassList(); | 383 | this.getClassList(); |
| 384 | }, | 384 | }, |
| 385 | // created() { | 385 | // created() { |
| 386 | // this.$root.$on("app:search", search => { | 386 | // this.$root.$on("app:search", search => { |
| 387 | // this.search = search; | 387 | // this.search = search; |
| 388 | // }); | 388 | // }); |
| 389 | // }, | 389 | // }, |
| 390 | // beforeDestroy() { | 390 | // beforeDestroy() { |
| 391 | // // dont forget to remove the listener | 391 | // // dont forget to remove the listener |
| 392 | // this.$root.$off("app:search"); | 392 | // this.$root.$off("app:search"); |
| 393 | // } | 393 | // } |
| 394 | }; | 394 | }; |
| 395 | </script> | ||
| 396 | <style> | ||
| 397 | </style> |
src/pages/Course/course.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS COURSES DETAILS ****** --> | 3 | <!-- ****** EDITS COURSES DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> | 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Course</label> | 8 | <label class="title text-xs-center">Edit Course</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl"> |
| 18 | <img src="/static/icon/user.png" /> | 18 | <img src="/static/icon/user.png" /> |
| 19 | </v-avatar> | 19 | </v-avatar> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.courseImageUrl" | 21 | :src="editedItem.courseImageUrl" |
| 22 | v-else-if="editedItem.courseImageUrl && !editImageUrl" | 22 | v-else-if="editedItem.courseImageUrl && !editImageUrl" |
| 23 | height="150" | 23 | height="150" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="editImageUrl" | 27 | v-if="editImageUrl" |
| 28 | :src="editImageUrl" | 28 | :src="editImageUrl" |
| 29 | style="border-radius:50%; width:150px;height:150px" | 29 | style="border-radius:50%; width:150px;height:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display: none" | 33 | style="display: none" |
| 34 | ref="editDataImage" | 34 | ref="editDataImage" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onEditFilePicked" | 36 | @change="onEditFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 sm5 class="pt-4 subheading"> | 43 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 sm7 class="ml-3"> | 47 | <v-flex xs8 sm7 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="addclass" | 49 | :items="addclass" |
| 50 | label="Select Class" | 50 | label="Select Class" |
| 51 | v-model="editedItem.select" | 51 | v-model="editedItem.select" |
| 52 | item-text="classNum" | 52 | item-text="classNum" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | name="Select Class" | 54 | name="Select Class" |
| 55 | required | 55 | required |
| 56 | ></v-select> | 56 | ></v-select> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs4 sm5 class="pt-4 subheading"> | 60 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm7 class="ml-3"> | 64 | <v-flex xs8 sm7 class="ml-3"> |
| 65 | <v-text-field | 65 | <v-text-field |
| 66 | v-model="editedItem.courseName" | 66 | v-model="editedItem.courseName" |
| 67 | placeholder="fill your Course Name" | 67 | placeholder="fill your Course Name" |
| 68 | type="text" | 68 | type="text" |
| 69 | required | 69 | required |
| 70 | ></v-text-field> | 70 | ></v-text-field> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 sm5 class="pt-4 subheading"> | 74 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 75 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 75 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 sm7 class="ml-3"> | 78 | <v-flex xs8 sm7 class="ml-3"> |
| 79 | <v-text-field | 79 | <v-text-field |
| 80 | label="Select Image" | 80 | label="Select Image" |
| 81 | @click="pickEditFile" | 81 | @click="pickEditFile" |
| 82 | v-model="editImageName" | 82 | v-model="editImageName" |
| 83 | append-icon="attach_file" | 83 | append-icon="attach_file" |
| 84 | ></v-text-field> | 84 | ></v-text-field> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | </v-layout> | 88 | </v-layout> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs12 sm12 class="px-0 mx-0"> | 90 | <v-flex xs12 sm12 class="px-0 mx-0"> |
| 91 | <v-layout class="right"> | 91 | <v-layout class="right"> |
| 92 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 92 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-container> | 96 | </v-container> |
| 97 | </v-form> | 97 | </v-form> |
| 98 | </v-card-text> | 98 | </v-card-text> |
| 99 | </v-card> | 99 | </v-card> |
| 100 | </v-dialog> | 100 | </v-dialog> |
| 101 | 101 | ||
| 102 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 102 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 103 | 103 | ||
| 104 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> | 104 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> |
| 105 | <v-card flat class="card-style pa-3" dark> | 105 | <v-card flat class="Card-style pa-3"> |
| 106 | <v-layout> | 106 | <v-layout> |
| 107 | <v-flex xs12> | 107 | <v-flex xs12> |
| 108 | <label class="title text-xs-center">View Course</label> | 108 | <label class="title text-xs-center">View Course</label> |
| 109 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 109 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | <v-card-text> | 112 | <v-card-text> |
| 113 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 113 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 114 | <v-avatar size="100px"> | 114 | <v-avatar size="100px"> |
| 115 | <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> | 115 | <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> |
| 116 | <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> | 116 | <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> |
| 117 | </v-avatar> | 117 | </v-avatar> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-container grid-list-md> | 119 | <v-container grid-list-md> |
| 120 | <v-layout wrap> | 120 | <v-layout wrap> |
| 121 | <v-flex xs12> | 121 | <v-flex xs12> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs6 sm6> | 123 | <v-flex xs6 sm6> |
| 124 | <h5 class="right my-1"> | 124 | <h5 class="right my-1"> |
| 125 | <b>Course :</b> | 125 | <b>Course :</b> |
| 126 | </h5> | 126 | </h5> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm6 xs6> | 128 | <v-flex sm6 xs6> |
| 129 | <h5 class="my-1 left">{{ editedItem.courseName }}</h5> | 129 | <h5 class="my-1 left">{{ editedItem.courseName }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-container> | 134 | </v-container> |
| 135 | </v-card-text> | 135 | </v-card-text> |
| 136 | </v-card> | 136 | </v-card> |
| 137 | </v-dialog> | 137 | </v-dialog> |
| 138 | 138 | ||
| 139 | <!-- ****** STUDENTS TABLE ****** --> | 139 | <!-- ****** STUDENTS TABLE ****** --> |
| 140 | <v-toolbar color="transparent" flat> | 140 | <v-toolbar color="transparent" flat> |
| 141 | <v-btn | 141 | <v-btn |
| 142 | fab | 142 | fab |
| 143 | dark | 143 | dark |
| 144 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 144 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 145 | small | 145 | small |
| 146 | @click="addCourseDialog = true" | 146 | @click="addCourseDialog = true" |
| 147 | > | 147 | > |
| 148 | <v-icon dark>add</v-icon> | 148 | <v-icon dark>add</v-icon> |
| 149 | </v-btn> | 149 | </v-btn> |
| 150 | <v-btn | 150 | <v-btn |
| 151 | round | 151 | round |
| 152 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 152 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 153 | dark | 153 | dark |
| 154 | @click="addCourseDialog = true" | 154 | @click="addCourseDialog = true" |
| 155 | > | 155 | > |
| 156 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course | 156 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course |
| 157 | </v-btn> | 157 | </v-btn> |
| 158 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 158 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 159 | <v-flex md13 lg12> | 159 | <v-flex md13 lg12> |
| 160 | <v-layout> | 160 | <v-layout> |
| 161 | <v-flex lg6 md6> | 161 | <v-flex lg6 md6> |
| 162 | <v-select | 162 | <v-select |
| 163 | :items="addclass" | 163 | :items="addclass" |
| 164 | label="Select Class" | 164 | label="Select Class" |
| 165 | v-model="selectStudents.select" | 165 | v-model="selectStudents.select" |
| 166 | item-text="classNum" | 166 | item-text="classNum" |
| 167 | item-value="_id" | 167 | item-value="_id" |
| 168 | name="Select Class" | 168 | name="Select Class" |
| 169 | :rules="classRules" | 169 | :rules="classRules" |
| 170 | required | 170 | required |
| 171 | class="ml-2" | 171 | class="ml-2" |
| 172 | ></v-select> | 172 | ></v-select> |
| 173 | </v-flex> | 173 | </v-flex> |
| 174 | </v-layout> | 174 | </v-layout> |
| 175 | </v-flex> | 175 | </v-flex> |
| 176 | </v-card-actions> | 176 | </v-card-actions> |
| 177 | <v-spacer></v-spacer> | 177 | <v-spacer></v-spacer> |
| 178 | <v-btn | 178 | <v-btn |
| 179 | @click="getCourses()" | 179 | @click="getCourses()" |
| 180 | round | 180 | round |
| 181 | dark | 181 | dark |
| 182 | :loading="loading" | 182 | :loading="loading" |
| 183 | class="open-dialog-button hidden-xs-only hidden-sm-only" | 183 | class="open-dialog-button hidden-xs-only hidden-sm-only" |
| 184 | >Find</v-btn> | 184 | >Find</v-btn> |
| 185 | <v-card-title class="body-1" v-show="show"> | 185 | <v-card-title class="body-1" v-show="show"> |
| 186 | <v-btn icon large flat @click="displaySearch"> | 186 | <v-btn icon large flat @click="displaySearch"> |
| 187 | <v-avatar size="27"> | 187 | <v-avatar size="27"> |
| 188 | <img src="/static/icon/search.png" alt="icon" /> | 188 | <img src="/static/icon/search.png" alt="icon" /> |
| 189 | </v-avatar> | 189 | </v-avatar> |
| 190 | </v-btn> | 190 | </v-btn> |
| 191 | </v-card-title> | 191 | </v-card-title> |
| 192 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> | 192 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> |
| 193 | <v-layout> | 193 | <v-layout> |
| 194 | <v-text-field | 194 | <v-text-field |
| 195 | autofocus | 195 | autofocus |
| 196 | v-model="search" | 196 | v-model="search" |
| 197 | label="Search" | 197 | label="Search" |
| 198 | prepend-inner-icon="search" | 198 | prepend-inner-icon="search" |
| 199 | color="primary" | 199 | color="primary" |
| 200 | ></v-text-field> | 200 | ></v-text-field> |
| 201 | <v-icon @click="closeSearch" color="error">close</v-icon> | 201 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-toolbar> | 204 | </v-toolbar> |
| 205 | <v-card flat class="elevation-0 transparent"> | 205 | <v-card flat class="elevation-0 transparent"> |
| 206 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 206 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 207 | <v-layout> | 207 | <v-layout> |
| 208 | <!-- <v-flex xs4> | 208 | <!-- <v-flex xs4> |
| 209 | <label class="right mt-4">Select Class:</label> | 209 | <label class="right mt-4">Select Class:</label> |
| 210 | </v-flex>--> | 210 | </v-flex>--> |
| 211 | <v-flex xs12> | 211 | <v-flex xs12> |
| 212 | <v-select | 212 | <v-select |
| 213 | :items="addclass" | 213 | :items="addclass" |
| 214 | label="Select Class" | 214 | label="Select Class" |
| 215 | v-model="selectStudents.select" | 215 | v-model="selectStudents.select" |
| 216 | item-text="classNum" | 216 | item-text="classNum" |
| 217 | item-value="_id" | 217 | item-value="_id" |
| 218 | name="Select Class" | 218 | name="Select Class" |
| 219 | :rules="classRules" | 219 | :rules="classRules" |
| 220 | class="px-2" | 220 | class="px-2" |
| 221 | ></v-select> | 221 | ></v-select> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | </v-layout> | 223 | </v-layout> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs5 class="mx-auto mb-2"> | 225 | <v-flex xs5 class="mx-auto mb-2"> |
| 226 | <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn> | 226 | <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn> |
| 227 | </v-flex> | 227 | </v-flex> |
| 228 | </v-layout> | 228 | </v-layout> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-card> | 230 | </v-card> |
| 231 | <v-data-table | 231 | <v-data-table |
| 232 | :headers="headers" | 232 | :headers="headers" |
| 233 | :items="courseData" | 233 | :items="courseData" |
| 234 | :pagination.sync="pagination" | 234 | :pagination.sync="pagination" |
| 235 | :search="search" | 235 | :search="search" |
| 236 | > | 236 | > |
| 237 | <template slot="items" slot-scope="props"> | 237 | <template slot="items" slot-scope="props"> |
| 238 | <tr class="tr"> | 238 | <tr class="tr"> |
| 239 | <td class="text-xs-center td td-row"> | 239 | <td class="text-xs-center td td-row"> |
| 240 | <v-avatar size="40"> | 240 | <v-avatar size="40"> |
| 241 | <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" /> | 241 | <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" /> |
| 242 | <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" /> | 242 | <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" /> |
| 243 | </v-avatar> | 243 | </v-avatar> |
| 244 | </td> | 244 | </td> |
| 245 | <td class="text-xs-center td td-row">{{ props.item.courseName}}</td> | 245 | <td class="text-xs-center td td-row">{{ props.item.courseName}}</td> |
| 246 | <td class="text-xs-center td td-row"> | 246 | <td class="text-xs-center td td-row"> |
| 247 | <span> | 247 | <span> |
| 248 | <v-tooltip top> | 248 | <v-tooltip top> |
| 249 | <img | 249 | <img |
| 250 | slot="activator" | 250 | slot="activator" |
| 251 | style="cursor:pointer; width:25px; height:25px; " | 251 | style="cursor:pointer; width:25px; height:25px; " |
| 252 | class="mr-3" | 252 | class="mr-3" |
| 253 | @click="profile(props.item)" | 253 | @click="profile(props.item)" |
| 254 | src="/static/icon/view.png" | 254 | src="/static/icon/view.png" |
| 255 | /> | 255 | /> |
| 256 | <span>View</span> | 256 | <span>View</span> |
| 257 | </v-tooltip> | 257 | </v-tooltip> |
| 258 | <v-tooltip top> | 258 | <v-tooltip top> |
| 259 | <img | 259 | <img |
| 260 | slot="activator" | 260 | slot="activator" |
| 261 | style="cursor:pointer; width:20px; height:18px; " | 261 | style="cursor:pointer; width:20px; height:18px; " |
| 262 | class="mr-3" | 262 | class="mr-3" |
| 263 | @click="editItem(props.item)" | 263 | @click="editItem(props.item)" |
| 264 | src="/static/icon/edit.png" | 264 | src="/static/icon/edit.png" |
| 265 | /> | 265 | /> |
| 266 | <span>Edit</span> | 266 | <span>Edit</span> |
| 267 | </v-tooltip> | 267 | </v-tooltip> |
| 268 | <v-tooltip top> | 268 | <v-tooltip top> |
| 269 | <img | 269 | <img |
| 270 | slot="activator" | 270 | slot="activator" |
| 271 | style="cursor:pointer; width:20px; height:20px; " | 271 | style="cursor:pointer; width:20px; height:20px; " |
| 272 | class="mr-3" | 272 | class="mr-3" |
| 273 | @click="deleteItem(props.item)" | 273 | @click="deleteItem(props.item)" |
| 274 | src="/static/icon/delete.png" | 274 | src="/static/icon/delete.png" |
| 275 | /> | 275 | /> |
| 276 | <span>Delete</span> | 276 | <span>Delete</span> |
| 277 | </v-tooltip> | 277 | </v-tooltip> |
| 278 | </span> | 278 | </span> |
| 279 | </td> | 279 | </td> |
| 280 | </tr> | 280 | </tr> |
| 281 | </template> | 281 | </template> |
| 282 | <v-alert | 282 | <v-alert |
| 283 | slot="no-results" | 283 | slot="no-results" |
| 284 | :value="true" | 284 | :value="true" |
| 285 | color="error" | 285 | color="error" |
| 286 | icon="warning" | 286 | icon="warning" |
| 287 | >Your search for "{{ search }}" found no results.</v-alert> | 287 | >Your search for "{{ search }}" found no results.</v-alert> |
| 288 | </v-data-table> | 288 | </v-data-table> |
| 289 | <!-- ****** Add CourseS DETAILS****** --> | 289 | <!-- ****** Add CourseS DETAILS****** --> |
| 290 | <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog" persistent> | 290 | <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog" persistent> |
| 291 | <v-card flat class="card-style pa-2" dark> | 291 | <v-card flat class="Card-style pa-2"> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs12> | 293 | <v-flex xs12> |
| 294 | <label class="title text-xs-center">Add Course</label> | 294 | <label class="title text-xs-center">Add Course</label> |
| 295 | <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon> | 295 | <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-container fluid> | 298 | <v-container fluid> |
| 299 | <v-layout align-center> | 299 | <v-layout align-center> |
| 300 | <v-flex xs12> | 300 | <v-flex xs12> |
| 301 | <v-flex xs12 sm12> | 301 | <v-flex xs12 sm12> |
| 302 | <v-form ref="form" v-model="valid" lazy-validation> | 302 | <v-form ref="form" v-model="valid" lazy-validation> |
| 303 | <v-layout> | 303 | <v-layout> |
| 304 | <v-flex | 304 | <v-flex |
| 305 | xs12 | 305 | xs12 |
| 306 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 306 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 307 | > | 307 | > |
| 308 | <v-avatar size="100px" v-if="!imageUrl"> | 308 | <v-avatar size="100px" v-if="!imageUrl"> |
| 309 | <img src="/static/icon/user.png" /> | 309 | <img src="/static/icon/user.png" /> |
| 310 | </v-avatar> | 310 | </v-avatar> |
| 311 | <input | 311 | <input |
| 312 | type="file" | 312 | type="file" |
| 313 | style="display: none" | 313 | style="display: none" |
| 314 | ref="image" | 314 | ref="image" |
| 315 | accept="image/*" | 315 | accept="image/*" |
| 316 | @change="onFilePicked" | 316 | @change="onFilePicked" |
| 317 | /> | 317 | /> |
| 318 | <img | 318 | <img |
| 319 | :src="imageData.imageUrl" | 319 | :src="imageData.imageUrl" |
| 320 | height="150" | 320 | height="150" |
| 321 | v-if="imageUrl" | 321 | v-if="imageUrl" |
| 322 | style="border-radius:50%; width:200px" | 322 | style="border-radius:50%; width:200px" |
| 323 | /> | 323 | /> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | <v-layout wrap> | 326 | <v-layout wrap> |
| 327 | <v-flex xs12 sm12> | 327 | <v-flex xs12 sm12> |
| 328 | <v-layout> | 328 | <v-layout> |
| 329 | <v-flex x4 sm4 class="pt-4 subheading"> | 329 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 330 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 330 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 331 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 331 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | <v-flex xs8 sm8 class="ml-3"> | 333 | <v-flex xs8 sm8 class="ml-3"> |
| 334 | <v-select | 334 | <v-select |
| 335 | :items="addclass" | 335 | :items="addclass" |
| 336 | label="Select Class" | 336 | label="Select Class" |
| 337 | v-model="addCourses.select" | 337 | v-model="addCourses.select" |
| 338 | item-text="classNum" | 338 | item-text="classNum" |
| 339 | item-value="_id" | 339 | item-value="_id" |
| 340 | name="Select Class" | 340 | name="Select Class" |
| 341 | :rules="classRules" | 341 | :rules="classRules" |
| 342 | @change="getSections(addCourses.select)" | 342 | @change="getSections(addCourses.select)" |
| 343 | required | 343 | required |
| 344 | ></v-select> | 344 | ></v-select> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | <v-layout wrap> | 349 | <v-layout wrap> |
| 350 | <v-flex xs12 sm12> | 350 | <v-flex xs12 sm12> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs4 sm4 class="pt-4 subheading"> | 352 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 353 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 353 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 354 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 354 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | <v-flex xs8 sm8 class="ml-3"> | 356 | <v-flex xs8 sm8 class="ml-3"> |
| 357 | <v-text-field | 357 | <v-text-field |
| 358 | v-model="addCourses.courseName" | 358 | v-model="addCourses.courseName" |
| 359 | placeholder="fill your Course name" | 359 | placeholder="fill your Course name" |
| 360 | type="text" | 360 | type="text" |
| 361 | :rules="courseRules" | 361 | :rules="courseRules" |
| 362 | required | 362 | required |
| 363 | ></v-text-field> | 363 | ></v-text-field> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | </v-layout> | 365 | </v-layout> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | <v-flex xs12 sm12> | 367 | <v-flex xs12 sm12> |
| 368 | <v-layout> | 368 | <v-layout> |
| 369 | <v-flex xs4 class="pt-4 subheading"> | 369 | <v-flex xs4 class="pt-4 subheading"> |
| 370 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 370 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 371 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> | 371 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | <v-flex xs8 class="ml-3"> | 373 | <v-flex xs8 class="ml-3"> |
| 374 | <v-text-field | 374 | <v-text-field |
| 375 | label="Select Image" | 375 | label="Select Image" |
| 376 | @click="pickFile" | 376 | @click="pickFile" |
| 377 | v-model="imageName" | 377 | v-model="imageName" |
| 378 | append-icon="attach_file" | 378 | append-icon="attach_file" |
| 379 | ></v-text-field> | 379 | ></v-text-field> |
| 380 | </v-flex> | 380 | </v-flex> |
| 381 | </v-layout> | 381 | </v-layout> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | </v-layout> | 383 | </v-layout> |
| 384 | <v-layout> | 384 | <v-layout> |
| 385 | <v-flex xs12 sm12> | 385 | <v-flex xs12 sm12> |
| 386 | <v-layout class="right"> | 386 | <v-layout class="right"> |
| 387 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 387 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | </v-form> | 391 | </v-form> |
| 392 | </v-flex> | 392 | </v-flex> |
| 393 | </v-flex> | 393 | </v-flex> |
| 394 | </v-layout> | 394 | </v-layout> |
| 395 | </v-container> | 395 | </v-container> |
| 396 | </v-card> | 396 | </v-card> |
| 397 | </v-dialog> | 397 | </v-dialog> |
| 398 | <v-snackbar | 398 | <v-snackbar |
| 399 | :timeout="timeout" | 399 | :timeout="timeout" |
| 400 | :top="y === 'top'" | 400 | :top="y === 'top'" |
| 401 | :right="x === 'right'" | 401 | :right="x === 'right'" |
| 402 | :vertical="mode === 'vertical'" | 402 | :vertical="mode === 'vertical'" |
| 403 | v-model="snackbar" | 403 | v-model="snackbar" |
| 404 | :color="color" | 404 | :color="color" |
| 405 | >{{ text }}</v-snackbar> | 405 | >{{ text }}</v-snackbar> |
| 406 | <div class="loader" v-if="showLoader"> | 406 | <div class="loader" v-if="showLoader"> |
| 407 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 407 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 408 | </div> | 408 | </div> |
| 409 | </v-container> | 409 | </v-container> |
| 410 | </template> | 410 | </template> |
| 411 | 411 | ||
| 412 | <script> | 412 | <script> |
| 413 | import http from "@/Services/http.js"; | 413 | import http from "@/Services/http.js"; |
| 414 | import moment from "moment"; | 414 | import moment from "moment"; |
| 415 | import countryList from "@/script/country.js"; | 415 | import countryList from "@/script/country.js"; |
| 416 | import parent from "@/script/parents.js"; | 416 | import parent from "@/script/parents.js"; |
| 417 | 417 | ||
| 418 | export default { | 418 | export default { |
| 419 | data: () => ({ | 419 | data: () => ({ |
| 420 | showNext: false, | 420 | showNext: false, |
| 421 | snackbar: false, | 421 | snackbar: false, |
| 422 | y: "top", | 422 | y: "top", |
| 423 | x: "right", | 423 | x: "right", |
| 424 | role: "", | 424 | role: "", |
| 425 | mode: "", | 425 | mode: "", |
| 426 | append: "", | 426 | append: "", |
| 427 | timeout: 3000, | 427 | timeout: 3000, |
| 428 | text: "", | 428 | text: "", |
| 429 | show: true, | 429 | show: true, |
| 430 | color: "", | 430 | color: "", |
| 431 | showSearch: false, | 431 | showSearch: false, |
| 432 | showLoader: false, | 432 | showLoader: false, |
| 433 | loading: false, | 433 | loading: false, |
| 434 | editLoading: false, | 434 | editLoading: false, |
| 435 | date: null, | 435 | date: null, |
| 436 | search: "", | 436 | search: "", |
| 437 | menu: false, | 437 | menu: false, |
| 438 | menu1: false, | 438 | menu1: false, |
| 439 | editStudentDialog: false, | 439 | editStudentDialog: false, |
| 440 | profileStudentDialog: false, | 440 | profileStudentDialog: false, |
| 441 | addCourseDialog: false, | 441 | addCourseDialog: false, |
| 442 | valid: true, | 442 | valid: true, |
| 443 | addclass: [], | 443 | addclass: [], |
| 444 | addSection: [], | 444 | addSection: [], |
| 445 | pagination: { | 445 | pagination: { |
| 446 | rowsPerPage: 10, | 446 | rowsPerPage: 10, |
| 447 | }, | 447 | }, |
| 448 | imageData: {}, | 448 | imageData: {}, |
| 449 | imageName: "", | 449 | imageName: "", |
| 450 | imageUrl: "", | 450 | imageUrl: "", |
| 451 | imageFile: "", | 451 | imageFile: "", |
| 452 | editImageName: "", | 452 | editImageName: "", |
| 453 | editImageUrl: "", | 453 | editImageUrl: "", |
| 454 | courseRules: [(v) => !!v || " Course Name is required"], | 454 | courseRules: [(v) => !!v || " Course Name is required"], |
| 455 | classRules: [(v) => !!v || " Class Name is required"], | 455 | classRules: [(v) => !!v || " Class Name is required"], |
| 456 | sectionRules: [(v) => !!v || " Section Name is required"], | 456 | sectionRules: [(v) => !!v || " Section Name is required"], |
| 457 | errorMessages: "", | 457 | errorMessages: "", |
| 458 | headers: [ | 458 | headers: [ |
| 459 | { | 459 | { |
| 460 | text: "Image", | 460 | text: "Image", |
| 461 | value: "courseImageUrl", | 461 | value: "courseImageUrl", |
| 462 | sortable: false, | 462 | sortable: false, |
| 463 | align: "center", | 463 | align: "center", |
| 464 | }, | 464 | }, |
| 465 | { | 465 | { |
| 466 | text: "Course", | 466 | text: "Course", |
| 467 | value: "course", | 467 | value: "course", |
| 468 | sortable: false, | 468 | sortable: false, |
| 469 | align: "center", | 469 | align: "center", |
| 470 | }, | 470 | }, |
| 471 | { text: "Action", value: "", sortable: false, align: "center" }, | 471 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 472 | ], | 472 | ], |
| 473 | courseData: [], | 473 | courseData: [], |
| 474 | editedIndex: -1, | 474 | editedIndex: -1, |
| 475 | addCourses: {}, | 475 | addCourses: {}, |
| 476 | selectStudents: { | 476 | selectStudents: { |
| 477 | select: "", | 477 | select: "", |
| 478 | selectSection: "", | 478 | selectSection: "", |
| 479 | }, | 479 | }, |
| 480 | editedItem: {}, | 480 | editedItem: {}, |
| 481 | }), | 481 | }), |
| 482 | watch: { | 482 | watch: { |
| 483 | addCourseDialog: function (val) { | 483 | addCourseDialog: function (val) { |
| 484 | if (!val) { | 484 | if (!val) { |
| 485 | this.addCourses = []; | 485 | this.addCourses = []; |
| 486 | this.imageName = ""; | 486 | this.imageName = ""; |
| 487 | this.imageFile = ""; | 487 | this.imageFile = ""; |
| 488 | this.imageUrl = ""; | 488 | this.imageUrl = ""; |
| 489 | } | 489 | } |
| 490 | }, | 490 | }, |
| 491 | }, | 491 | }, |
| 492 | methods: { | 492 | methods: { |
| 493 | getCourses() { | 493 | getCourses() { |
| 494 | this.showLoader = true; | 494 | this.showLoader = true; |
| 495 | http() | 495 | http() |
| 496 | .get("/getCourseesList", { | 496 | .get("/getCourseesList", { |
| 497 | params: { | 497 | params: { |
| 498 | classId: this.selectStudents.select, | 498 | classId: this.selectStudents.select, |
| 499 | }, | 499 | }, |
| 500 | }) | 500 | }) |
| 501 | .then((response) => { | 501 | .then((response) => { |
| 502 | this.courseData = response.data.data; | 502 | this.courseData = response.data.data; |
| 503 | this.showLoader = false; | 503 | this.showLoader = false; |
| 504 | }) | 504 | }) |
| 505 | .catch((err) => { | 505 | .catch((err) => { |
| 506 | // console.log("err====>", err); | 506 | // console.log("err====>", err); |
| 507 | this.showLoader = false; | 507 | this.showLoader = false; |
| 508 | this.snackbar = true; | 508 | this.snackbar = true; |
| 509 | this.color = "error"; | 509 | this.color = "error"; |
| 510 | this.text = error.response.data.message; | 510 | this.text = error.response.data.message; |
| 511 | }); | 511 | }); |
| 512 | }, | 512 | }, |
| 513 | getSections(_id) { | 513 | getSections(_id) { |
| 514 | var token = this.$store.state.token; | 514 | var token = this.$store.state.token; |
| 515 | this.showLoader = true; | 515 | this.showLoader = true; |
| 516 | http() | 516 | http() |
| 517 | .get( | 517 | .get( |
| 518 | "/getSectionsList", | 518 | "/getSectionsList", |
| 519 | { params: { classId: _id } }, | 519 | { params: { classId: _id } }, |
| 520 | { | 520 | { |
| 521 | headers: { Authorization: "Bearer " + token }, | 521 | headers: { Authorization: "Bearer " + token }, |
| 522 | } | 522 | } |
| 523 | ) | 523 | ) |
| 524 | .then((response) => { | 524 | .then((response) => { |
| 525 | this.addSection = response.data.data; | 525 | this.addSection = response.data.data; |
| 526 | this.showLoader = false; | 526 | this.showLoader = false; |
| 527 | }) | 527 | }) |
| 528 | .catch((err) => { | 528 | .catch((err) => { |
| 529 | this.showLoader = false; | 529 | this.showLoader = false; |
| 530 | }); | 530 | }); |
| 531 | }, | 531 | }, |
| 532 | pickFile() { | 532 | pickFile() { |
| 533 | this.$refs.image.click(); | 533 | this.$refs.image.click(); |
| 534 | }, | 534 | }, |
| 535 | pickEditFile() { | 535 | pickEditFile() { |
| 536 | this.$refs.editDataImage.click(); | 536 | this.$refs.editDataImage.click(); |
| 537 | }, | 537 | }, |
| 538 | dates: function (date) { | 538 | dates: function (date) { |
| 539 | return moment(date).format("MMMM DD, YYYY"); | 539 | return moment(date).format("MMMM DD, YYYY"); |
| 540 | return date; | 540 | return date; |
| 541 | }, | 541 | }, |
| 542 | onFilePicked(e) { | 542 | onFilePicked(e) { |
| 543 | // console.log(e) | 543 | // console.log(e) |
| 544 | const files = e.target.files; | 544 | const files = e.target.files; |
| 545 | this.imageData.upload = e.target.files[0]; | 545 | this.imageData.upload = e.target.files[0]; |
| 546 | if (files[0] !== undefined) { | 546 | if (files[0] !== undefined) { |
| 547 | this.imageName = files[0].name; | 547 | this.imageName = files[0].name; |
| 548 | if (this.imageName.lastIndexOf(".") <= 0) { | 548 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 549 | return; | 549 | return; |
| 550 | } | 550 | } |
| 551 | const fr = new FileReader(); | 551 | const fr = new FileReader(); |
| 552 | fr.readAsDataURL(files[0]); | 552 | fr.readAsDataURL(files[0]); |
| 553 | fr.addEventListener("load", () => { | 553 | fr.addEventListener("load", () => { |
| 554 | this.imageUrl = fr.result; | 554 | this.imageUrl = fr.result; |
| 555 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 555 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 556 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 556 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 557 | }); | 557 | }); |
| 558 | } else { | 558 | } else { |
| 559 | this.imageName = ""; | 559 | this.imageName = ""; |
| 560 | this.imageFile = ""; | 560 | this.imageFile = ""; |
| 561 | this.imageUrl = ""; | 561 | this.imageUrl = ""; |
| 562 | } | 562 | } |
| 563 | }, | 563 | }, |
| 564 | onEditFilePicked(e) { | 564 | onEditFilePicked(e) { |
| 565 | // console.log(e); | 565 | // console.log(e); |
| 566 | const files = e.target.files; | 566 | const files = e.target.files; |
| 567 | if (files[0] !== undefined) { | 567 | if (files[0] !== undefined) { |
| 568 | this.editImageName = files[0].name; | 568 | this.editImageName = files[0].name; |
| 569 | // console.log("this.editImageName", this.editImageName); | 569 | // console.log("this.editImageName", this.editImageName); |
| 570 | 570 | ||
| 571 | if (this.editImageName.lastIndexOf(".") <= 0) { | 571 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 572 | return; | 572 | return; |
| 573 | } | 573 | } |
| 574 | const fr = new FileReader(); | 574 | const fr = new FileReader(); |
| 575 | fr.readAsDataURL(files[0]); | 575 | fr.readAsDataURL(files[0]); |
| 576 | fr.addEventListener("load", () => { | 576 | fr.addEventListener("load", () => { |
| 577 | this.editImageUrl = fr.result; | 577 | this.editImageUrl = fr.result; |
| 578 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 578 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 579 | }); | 579 | }); |
| 580 | } else { | 580 | } else { |
| 581 | this.editImageName = ""; | 581 | this.editImageName = ""; |
| 582 | this.editiImageFile = ""; | 582 | this.editiImageFile = ""; |
| 583 | } | 583 | } |
| 584 | }, | 584 | }, |
| 585 | editItem(item) { | 585 | editItem(item) { |
| 586 | this.editedIndex = this.courseData.indexOf(item); | 586 | this.editedIndex = this.courseData.indexOf(item); |
| 587 | this.editedItem = Object.assign({}, item); | 587 | this.editedItem = Object.assign({}, item); |
| 588 | this.editStudentDialog = true; | 588 | this.editStudentDialog = true; |
| 589 | }, | 589 | }, |
| 590 | profile(item) { | 590 | profile(item) { |
| 591 | this.editedIndex = this.courseData.indexOf(item); | 591 | this.editedIndex = this.courseData.indexOf(item); |
| 592 | this.editedItem = Object.assign({}, item); | 592 | this.editedItem = Object.assign({}, item); |
| 593 | this.profileStudentDialog = true; | 593 | this.profileStudentDialog = true; |
| 594 | }, | 594 | }, |
| 595 | deleteItem(item) { | 595 | deleteItem(item) { |
| 596 | let deleteCourse = { | 596 | let deleteCourse = { |
| 597 | courseId: item._id, | 597 | courseId: item._id, |
| 598 | }; | 598 | }; |
| 599 | http() | 599 | http() |
| 600 | .delete( | 600 | .delete( |
| 601 | "/deleteCourse", | 601 | "/deleteCourse", |
| 602 | confirm("Are you sure you want to delete this?") && { | 602 | confirm("Are you sure you want to delete this?") && { |
| 603 | params: deleteCourse, | 603 | params: deleteCourse, |
| 604 | } | 604 | } |
| 605 | ) | 605 | ) |
| 606 | .then((response) => { | 606 | .then((response) => { |
| 607 | this.snackbar = true; | 607 | this.snackbar = true; |
| 608 | this.text = response.data.message; | 608 | this.text = response.data.message; |
| 609 | this.color = "green"; | 609 | this.color = "green"; |
| 610 | this.getCourses(); | 610 | this.getCourses(); |
| 611 | }) | 611 | }) |
| 612 | .catch((error) => { | 612 | .catch((error) => { |
| 613 | this.snackbar = true; | 613 | this.snackbar = true; |
| 614 | this.text = error.response.data.message; | 614 | this.text = error.response.data.message; |
| 615 | this.color = "error"; | 615 | this.color = "error"; |
| 616 | }); | 616 | }); |
| 617 | }, | 617 | }, |
| 618 | close() { | 618 | close() { |
| 619 | this.editStudentDialog = false; | 619 | this.editStudentDialog = false; |
| 620 | }, | 620 | }, |
| 621 | closeStudentProfile() { | 621 | closeStudentProfile() { |
| 622 | this.profileStudentDialog = false; | 622 | this.profileStudentDialog = false; |
| 623 | }, | 623 | }, |
| 624 | closeAddCourseModel() { | 624 | closeAddCourseModel() { |
| 625 | this.addCourseDialog = false; | 625 | this.addCourseDialog = false; |
| 626 | // this.courseData = []; | 626 | // this.courseData = []; |
| 627 | this.addCourses = []; | 627 | this.addCourses = []; |
| 628 | this.imageName = ""; | 628 | this.imageName = ""; |
| 629 | this.imageFile = ""; | 629 | this.imageFile = ""; |
| 630 | this.imageUrl = ""; | 630 | this.imageUrl = ""; |
| 631 | }, | 631 | }, |
| 632 | submit() { | 632 | submit() { |
| 633 | if (this.$refs.form.validate()) { | 633 | if (this.$refs.form.validate()) { |
| 634 | let addCourse = { | 634 | let addCourse = { |
| 635 | classId: this.addCourses.select, | 635 | classId: this.addCourses.select, |
| 636 | sectionId: this.addCourses.selectSection, | 636 | sectionId: this.addCourses.selectSection, |
| 637 | courseName: this.addCourses.courseName, | 637 | courseName: this.addCourses.courseName, |
| 638 | }; | 638 | }; |
| 639 | if (this.imageUrl) { | 639 | if (this.imageUrl) { |
| 640 | var str = this.imageUrl; | 640 | var str = this.imageUrl; |
| 641 | const [baseUrl, imageUrl] = str.split(/,/); | 641 | const [baseUrl, imageUrl] = str.split(/,/); |
| 642 | addCourse.upload = imageUrl; | 642 | addCourse.upload = imageUrl; |
| 643 | } | 643 | } |
| 644 | this.loading = true; | 644 | this.loading = true; |
| 645 | http() | 645 | http() |
| 646 | .post("/createCourse", addCourse) | 646 | .post("/createCourse", addCourse) |
| 647 | .then((response) => { | 647 | .then((response) => { |
| 648 | this.snackbar = true; | 648 | this.snackbar = true; |
| 649 | this.text = "New Course added successfully"; | 649 | this.text = "New Course added successfully"; |
| 650 | this.color = "green"; | 650 | this.color = "green"; |
| 651 | this.addCourseDialog = false; | 651 | this.addCourseDialog = false; |
| 652 | this.clear(); | 652 | this.clear(); |
| 653 | this.loading = false; | 653 | this.loading = false; |
| 654 | }) | 654 | }) |
| 655 | .catch((error) => { | 655 | .catch((error) => { |
| 656 | this.snackbar = true; | 656 | this.snackbar = true; |
| 657 | this.text = error.response.data.message; | 657 | this.text = error.response.data.message; |
| 658 | this.color = "error"; | 658 | this.color = "error"; |
| 659 | this.loading = false; | 659 | this.loading = false; |
| 660 | }); | 660 | }); |
| 661 | } | 661 | } |
| 662 | }, | 662 | }, |
| 663 | clear() { | 663 | clear() { |
| 664 | this.$refs.form.reset(); | 664 | this.$refs.form.reset(); |
| 665 | this.imageUrl = ""; | 665 | this.imageUrl = ""; |
| 666 | }, | 666 | }, |
| 667 | save() { | 667 | save() { |
| 668 | let editCourse = { | 668 | let editCourse = { |
| 669 | courseId: this.editedItem._id, | 669 | courseId: this.editedItem._id, |
| 670 | courseName: this.editedItem.courseName, | 670 | courseName: this.editedItem.courseName, |
| 671 | classId: this.editedItem.select, | 671 | classId: this.editedItem.select, |
| 672 | }; | 672 | }; |
| 673 | if (this.editImageUrl) { | 673 | if (this.editImageUrl) { |
| 674 | var str = this.editImageUrl; | 674 | var str = this.editImageUrl; |
| 675 | const [baseUrl, editImageUrl] = str.split(/,/); | 675 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 676 | editCourse.upload = editImageUrl; | 676 | editCourse.upload = editImageUrl; |
| 677 | } | 677 | } |
| 678 | this.editLoading = true; | 678 | this.editLoading = true; |
| 679 | http() | 679 | http() |
| 680 | .put("/updateCourse", editCourse) | 680 | .put("/updateCourse", editCourse) |
| 681 | .then((response) => { | 681 | .then((response) => { |
| 682 | this.snackbar = true; | 682 | this.snackbar = true; |
| 683 | this.text = response.data.message; | 683 | this.text = response.data.message; |
| 684 | this.color = "green"; | 684 | this.color = "green"; |
| 685 | this.imageUrl = ""; | 685 | this.imageUrl = ""; |
| 686 | this.getCourses(); | 686 | this.getCourses(); |
| 687 | this.close(); | 687 | this.close(); |
| 688 | this.editLoading = false; | 688 | this.editLoading = false; |
| 689 | }) | 689 | }) |
| 690 | .catch((error) => { | 690 | .catch((error) => { |
| 691 | this.snackbar = true; | 691 | this.snackbar = true; |
| 692 | this.text = error.response.data.statusText; | 692 | this.text = error.response.data.statusText; |
| 693 | this.color = "error"; | 693 | this.color = "error"; |
| 694 | this.editLoading = false; | 694 | this.editLoading = false; |
| 695 | }); | 695 | }); |
| 696 | }, | 696 | }, |
| 697 | displaySearch() { | 697 | displaySearch() { |
| 698 | this.show = false; | 698 | this.show = false; |
| 699 | this.showSearch = true; | 699 | this.showSearch = true; |
| 700 | }, | 700 | }, |
| 701 | closeSearch() { | 701 | closeSearch() { |
| 702 | this.showSearch = false; | 702 | this.showSearch = false; |
| 703 | this.show = true; | 703 | this.show = true; |
| 704 | this.search = ""; | 704 | this.search = ""; |
| 705 | }, | 705 | }, |
| 706 | }, | 706 | }, |
| 707 | mounted() { | 707 | mounted() { |
| 708 | var token = this.$store.state.token; | 708 | var token = this.$store.state.token; |
| 709 | http() | 709 | http() |
| 710 | .get("/getClassesList", { | 710 | .get("/getClassesList", { |
| 711 | headers: { Authorization: "Bearer " + token }, | 711 | headers: { Authorization: "Bearer " + token }, |
| 712 | }) | 712 | }) |
| 713 | .then((response) => { | 713 | .then((response) => { |
| 714 | this.addclass = response.data.data; | 714 | this.addclass = response.data.data; |
| 715 | }) | 715 | }) |
| 716 | .catch((error) => { | 716 | .catch((error) => { |
| 717 | this.showLoader = false; | 717 | this.showLoader = false; |
| 718 | if (error.response.status === 401) { | 718 | if (error.response.status === 401) { |
| 719 | this.$router.replace({ path: "/" }); | 719 | this.$router.replace({ path: "/" }); |
| 720 | this.$store.dispatch("setToken", null); | 720 | this.$store.dispatch("setToken", null); |
| 721 | this.$store.dispatch("Id", null); | 721 | this.$store.dispatch("Id", null); |
| 722 | this.$store.dispatch("Role", null); | 722 | this.$store.dispatch("Role", null); |
| 723 | } | 723 | } |
| 724 | }); | 724 | }); |
| 725 | }, | 725 | }, |
| 726 | }; | 726 | }; |
| 727 | </script> | 727 | </script> |
| 728 | <style scoped> | 728 | <style scoped> |
| 729 | .active { | 729 | .active { |
| 730 | background-color: gray; | 730 | background-color: gray; |
| 731 | color: white !important; | 731 | color: white !important; |
| 732 | } | 732 | } |
| 733 | .activebtn { | 733 | .activebtn { |
| 734 | color: black !important; | 734 | color: black !important; |
| 735 | } | 735 | } |
| 736 | </style> | 736 | </style> |
src/pages/Course/courseDetail.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Chapter detail ****** --> | 3 | <!-- ****** Edit Chapter detail ****** --> |
| 4 | <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent> | 4 | <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent> |
| 5 | <v-card class="card-style pa-2" dark> | 5 | <v-card class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Chapter</label> | 8 | <label class="title text-xs-center">Edit Chapter</label> |
| 9 | <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout wrap> | 13 | <v-layout wrap> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Select Class:</label> | 17 | <label class="right">Select Class:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm6 class="ml-3"> | 19 | <v-flex xs8 sm6 class="ml-3"> |
| 20 | <v-select | 20 | <v-select |
| 21 | small | 21 | small |
| 22 | :items="addclass" | 22 | :items="addclass" |
| 23 | label="Select Class" | 23 | label="Select Class" |
| 24 | v-model="editedCourse.classId" | 24 | v-model="editedCourse.classId" |
| 25 | item-text="classNum" | 25 | item-text="classNum" |
| 26 | item-value="_id" | 26 | item-value="_id" |
| 27 | name="Select Class" | 27 | name="Select Class" |
| 28 | @change="getCourses(editedCourse.classId)" | 28 | @change="getCourses(editedCourse.classId)" |
| 29 | class="mr-2" | 29 | class="mr-2" |
| 30 | required | 30 | required |
| 31 | ></v-select> | 31 | ></v-select> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs12 sm12> | 35 | <v-flex xs12 sm12> |
| 36 | <v-layout> | 36 | <v-layout> |
| 37 | <v-flex xs4 class="pt-4 subheading"> | 37 | <v-flex xs4 class="pt-4 subheading"> |
| 38 | <label class="right">Select Course:</label> | 38 | <label class="right">Select Course:</label> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex xs8 sm6 class="ml-3"> | 40 | <v-flex xs8 sm6 class="ml-3"> |
| 41 | <v-select | 41 | <v-select |
| 42 | :items="courseData" | 42 | :items="courseData" |
| 43 | label="Select Course" | 43 | label="Select Course" |
| 44 | v-model="editedCourse.courseId" | 44 | v-model="editedCourse.courseId" |
| 45 | item-text="courseName" | 45 | item-text="courseName" |
| 46 | item-value="_id" | 46 | item-value="_id" |
| 47 | required | 47 | required |
| 48 | class="ml-2" | 48 | class="ml-2" |
| 49 | ></v-select> | 49 | ></v-select> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | </v-layout> | 51 | </v-layout> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | <v-layout> | 54 | <v-layout> |
| 55 | <v-flex xs12 sm12 md11 lg11> | 55 | <v-flex xs12 sm12 md11 lg11> |
| 56 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 56 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 57 | <v-spacer></v-spacer> | 57 | <v-spacer></v-spacer> |
| 58 | <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn> | 58 | <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn> |
| 59 | </v-card-actions> | 59 | </v-card-actions> |
| 60 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 60 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 61 | <v-spacer></v-spacer> | 61 | <v-spacer></v-spacer> |
| 62 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 62 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 63 | <v-spacer></v-spacer> | 63 | <v-spacer></v-spacer> |
| 64 | </v-card-actions> | 64 | </v-card-actions> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | </v-layout> | 66 | </v-layout> |
| 67 | </v-card-text> | 67 | </v-card-text> |
| 68 | </v-card> | 68 | </v-card> |
| 69 | </v-dialog> | 69 | </v-dialog> |
| 70 | <!-- DIALOG BOX - EDIT CHAPTER--> | 70 | <!-- DIALOG BOX - EDIT CHAPTER--> |
| 71 | <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent> | 71 | <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent> |
| 72 | <v-card class="card-style pa-2" dark> | 72 | <v-card class="Card-style pa-2"> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs12> | 74 | <v-flex xs12> |
| 75 | <label class="title text-xs-center">Edit Chapter</label> | 75 | <label class="title text-xs-center">Edit Chapter</label> |
| 76 | <v-icon | 76 | <v-icon |
| 77 | size="24" | 77 | size="24" |
| 78 | class="right" | 78 | class="right" |
| 79 | @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' " | 79 | @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' " |
| 80 | >cancel</v-icon> | 80 | >cancel</v-icon> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | <v-card-text> | 83 | <v-card-text> |
| 84 | <v-layout wrap> | 84 | <v-layout wrap> |
| 85 | <!-- CHAPTER NAME --> | 85 | <!-- CHAPTER NAME --> |
| 86 | <v-flex xs12 sm12> | 86 | <v-flex xs12 sm12> |
| 87 | <v-layout> | 87 | <v-layout> |
| 88 | <v-flex xs4 class="pt-4 subheading"> | 88 | <v-flex xs4 class="pt-4 subheading"> |
| 89 | <label class="right">Chapter Name:</label> | 89 | <label class="right">Chapter Name:</label> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs8 sm6 class="ml-3"> | 91 | <v-flex xs8 sm6 class="ml-3"> |
| 92 | <v-text-field | 92 | <v-text-field |
| 93 | v-model="editChapter.chapterName" | 93 | v-model="editChapter.chapterName" |
| 94 | placeholder="fill your Title" | 94 | placeholder="fill your Title" |
| 95 | type="text" | 95 | type="text" |
| 96 | required | 96 | required |
| 97 | ></v-text-field> | 97 | ></v-text-field> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | <!-- DESCRIPTION --> | 101 | <!-- DESCRIPTION --> |
| 102 | <v-flex xs12 sm12> | 102 | <v-flex xs12 sm12> |
| 103 | <v-layout> | 103 | <v-layout> |
| 104 | <v-flex xs4 class="pt-4 subheading"> | 104 | <v-flex xs4 class="pt-4 subheading"> |
| 105 | <label class="right">Description:</label> | 105 | <label class="right">Description:</label> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs8 sm6 class="ml-3"> | 107 | <v-flex xs8 sm6 class="ml-3"> |
| 108 | <v-text-field | 108 | <v-text-field |
| 109 | placeholder="fill your Description" | 109 | placeholder="fill your Description" |
| 110 | v-model="editChapter.description" | 110 | v-model="editChapter.description" |
| 111 | type="text" | 111 | type="text" |
| 112 | required | 112 | required |
| 113 | ></v-text-field> | 113 | ></v-text-field> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | <!-- UPLOAD PPT --> | 117 | <!-- UPLOAD PPT --> |
| 118 | <!-- <v-flex xs12> | 118 | <!-- <v-flex xs12> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 class="pt-4 subheading"> | 120 | <v-flex xs4 class="pt-4 subheading"> |
| 121 | <label class="right">Upload PPT:</label> | 121 | <label class="right">Upload PPT:</label> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs8 sm6 class="ml-3"> | 123 | <v-flex xs8 sm6 class="ml-3"> |
| 124 | <UploadFiles | 124 | <UploadFiles |
| 125 | @fileSelected="fileSelected($event,'uploadPPT')" | 125 | @fileSelected="fileSelected($event,'uploadPPT')" |
| 126 | label="Add PPT" | 126 | label="Add PPT" |
| 127 | reference="EditPpt" | 127 | reference="EditPpt" |
| 128 | id="editPptInput" | 128 | id="editPptInput" |
| 129 | :trigger="trigger" | 129 | :trigger="trigger" |
| 130 | ></UploadFiles> | 130 | ></UploadFiles> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex>--> | 133 | </v-flex>--> |
| 134 | <!-- UPLOAD PDF --> | 134 | <!-- UPLOAD PDF --> |
| 135 | <v-flex xs12> | 135 | <v-flex xs12> |
| 136 | <v-layout> | 136 | <v-layout> |
| 137 | <v-flex xs4 class="pt-4 subheading"> | 137 | <v-flex xs4 class="pt-4 subheading"> |
| 138 | <label class="right">Upload PDF:</label> | 138 | <label class="right">Upload PDF:</label> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs8 sm6 class="ml-3"> | 140 | <v-flex xs8 sm6 class="ml-3"> |
| 141 | <UploadPdf | 141 | <UploadPdf |
| 142 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" | 142 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" |
| 143 | label="Add PDF" | 143 | label="Add PDF" |
| 144 | reference="editPdf" | 144 | reference="editPdf" |
| 145 | id="editPdfInput" | 145 | id="editPdfInput" |
| 146 | :emptyPdf="emptyPdf" | 146 | :emptyPdf="emptyPdf" |
| 147 | ></UploadPdf> | 147 | ></UploadPdf> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> | 152 | <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> |
| 153 | <v-layout | 153 | <v-layout |
| 154 | wrap | 154 | wrap |
| 155 | v-for="(editChapterPoint,index) in editChapter.chapterPoints" | 155 | v-for="(editChapterPoint,index) in editChapter.chapterPoints" |
| 156 | :key="index" | 156 | :key="index" |
| 157 | > | 157 | > |
| 158 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 158 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 159 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> | 159 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> |
| 160 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> | 160 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | <v-layout> | 162 | <v-layout> |
| 163 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> | 163 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> |
| 164 | <v-text-field :value="editChapterPoint" type="text" required></v-text-field> | 164 | <v-text-field :value="editChapterPoint" type="text" required></v-text-field> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs2 class="pt-4"> | 166 | <v-flex xs2 class="pt-4"> |
| 167 | <v-icon @click="deleteUrl(index)">cancel</v-icon> | 167 | <v-icon @click="deleteUrl(index)">cancel</v-icon> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-layout> | 169 | </v-layout> |
| 170 | </v-layout> | 170 | </v-layout> |
| 171 | </v-flex>--> | 171 | </v-flex>--> |
| 172 | <v-flex xs12> | 172 | <v-flex xs12> |
| 173 | <div v-for="(updateImage,index) in updates" :key="index"> | 173 | <div v-for="(updateImage,index) in updates" :key="index"> |
| 174 | <v-layout wrap> | 174 | <v-layout wrap> |
| 175 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 175 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 176 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> | 176 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> |
| 177 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> | 177 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | <v-layout> | 179 | <v-layout> |
| 180 | <v-flex xs10 sm12 md9 class="ml-3"> | 180 | <v-flex xs10 sm12 md9 class="ml-3"> |
| 181 | <v-text-field | 181 | <v-text-field |
| 182 | v-model="updateImage.value" | 182 | v-model="updateImage.value" |
| 183 | placeholder="Upload new Chapter Points" | 183 | placeholder="Upload new Chapter Points" |
| 184 | required | 184 | required |
| 185 | ></v-text-field> | 185 | ></v-text-field> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | <v-flex xs2 class="pt-4"> | 187 | <v-flex xs2 class="pt-4"> |
| 188 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> | 188 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> |
| 189 | <v-icon @click="update">add_circle</v-icon> | 189 | <v-icon @click="update">add_circle</v-icon> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | </v-layout> | 191 | </v-layout> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | </div> | 193 | </div> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | <v-layout> | 195 | <v-layout> |
| 196 | <v-flex xs12 sm12 md11 lg11> | 196 | <v-flex xs12 sm12 md11 lg11> |
| 197 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 197 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 198 | <v-spacer></v-spacer> | 198 | <v-spacer></v-spacer> |
| 199 | <v-btn | 199 | <v-btn |
| 200 | round | 200 | round |
| 201 | dark | 201 | dark |
| 202 | @click="saveChapter" | 202 | @click="saveChapter" |
| 203 | :loading="editLoading" | 203 | :loading="editLoading" |
| 204 | class="add-button mr-4" | 204 | class="add-button mr-4" |
| 205 | >Save</v-btn> | 205 | >Save</v-btn> |
| 206 | </v-card-actions> | 206 | </v-card-actions> |
| 207 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 207 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 208 | <v-spacer></v-spacer> | 208 | <v-spacer></v-spacer> |
| 209 | <v-btn | 209 | <v-btn |
| 210 | round | 210 | round |
| 211 | dark | 211 | dark |
| 212 | @click="saveChapter" | 212 | @click="saveChapter" |
| 213 | :loading="editLoading" | 213 | :loading="editLoading" |
| 214 | class="add-button" | 214 | class="add-button" |
| 215 | >Save</v-btn> | 215 | >Save</v-btn> |
| 216 | <v-spacer></v-spacer> | 216 | <v-spacer></v-spacer> |
| 217 | </v-card-actions> | 217 | </v-card-actions> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | </v-layout> | 219 | </v-layout> |
| 220 | </v-card-text> | 220 | </v-card-text> |
| 221 | </v-card> | 221 | </v-card> |
| 222 | </v-dialog> | 222 | </v-dialog> |
| 223 | <!-- ADD NEW CHAPTER--> | 223 | <!-- ADD NEW CHAPTER--> |
| 224 | <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent> | 224 | <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent> |
| 225 | <v-card class="card-style pa-2" dark> | 225 | <v-card class="Card-style pa-2"> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-flex xs12> | 227 | <v-flex xs12> |
| 228 | <label class="title text-xs-center">Add Chapter Detail</label> | 228 | <label class="title text-xs-center">Add Chapter Detail</label> |
| 229 | <v-icon | 229 | <v-icon |
| 230 | size="24" | 230 | size="24" |
| 231 | class="right" | 231 | class="right" |
| 232 | @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' " | 232 | @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' " |
| 233 | >cancel</v-icon> | 233 | >cancel</v-icon> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | <v-card-text> | 236 | <v-card-text> |
| 237 | <v-layout wrap> | 237 | <v-layout wrap> |
| 238 | <v-flex xs12 sm12> | 238 | <v-flex xs12 sm12> |
| 239 | <v-layout> | 239 | <v-layout> |
| 240 | <v-flex xs4 class="pt-4 subheading"> | 240 | <v-flex xs4 class="pt-4 subheading"> |
| 241 | <label class="right">Chapter Name:</label> | 241 | <label class="right">Chapter Name:</label> |
| 242 | </v-flex> | 242 | </v-flex> |
| 243 | <v-flex xs8 sm6 class="ml-3"> | 243 | <v-flex xs8 sm6 class="ml-3"> |
| 244 | <v-text-field | 244 | <v-text-field |
| 245 | v-model="addChapterItem.chapterName" | 245 | v-model="addChapterItem.chapterName" |
| 246 | placeholder="fill your Title" | 246 | placeholder="fill your Title" |
| 247 | type="text" | 247 | type="text" |
| 248 | required | 248 | required |
| 249 | ></v-text-field> | 249 | ></v-text-field> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs12 sm12> | 253 | <v-flex xs12 sm12> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs4 class="pt-4 subheading"> | 255 | <v-flex xs4 class="pt-4 subheading"> |
| 256 | <label class="right">Description:</label> | 256 | <label class="right">Description:</label> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | <v-flex xs8 sm6 class="ml-3"> | 258 | <v-flex xs8 sm6 class="ml-3"> |
| 259 | <v-text-field | 259 | <v-text-field |
| 260 | placeholder="fill your Description" | 260 | placeholder="fill your Description" |
| 261 | v-model="addChapterItem.description" | 261 | v-model="addChapterItem.description" |
| 262 | type="text" | 262 | type="text" |
| 263 | required | 263 | required |
| 264 | ></v-text-field> | 264 | ></v-text-field> |
| 265 | </v-flex> | 265 | </v-flex> |
| 266 | </v-layout> | 266 | </v-layout> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | <!-- UPLOAD PPT --> | 268 | <!-- UPLOAD PPT --> |
| 269 | <!-- <v-flex xs12> | 269 | <!-- <v-flex xs12> |
| 270 | <v-layout> | 270 | <v-layout> |
| 271 | <v-flex xs4 class="pt-4 subheading"> | 271 | <v-flex xs4 class="pt-4 subheading"> |
| 272 | <label class="right">Upload PPT:</label> | 272 | <label class="right">Upload PPT:</label> |
| 273 | </v-flex> | 273 | </v-flex> |
| 274 | <v-flex xs8 sm6 class="ml-3"> | 274 | <v-flex xs8 sm6 class="ml-3"> |
| 275 | <UploadFiles | 275 | <UploadFiles |
| 276 | @fileSelected="fileSelected($event,'uploadPPT')" | 276 | @fileSelected="fileSelected($event,'uploadPPT')" |
| 277 | label="Add PPT" | 277 | label="Add PPT" |
| 278 | reference="newChapterPpt" | 278 | reference="newChapterPpt" |
| 279 | id="newChapterPptInput" | 279 | id="newChapterPptInput" |
| 280 | :trigger="trigger" | 280 | :trigger="trigger" |
| 281 | ></UploadFiles> | 281 | ></UploadFiles> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | </v-layout> | 283 | </v-layout> |
| 284 | </v-flex>--> | 284 | </v-flex>--> |
| 285 | <!-- UPLOAD PDF --> | 285 | <!-- UPLOAD PDF --> |
| 286 | <v-flex xs12> | 286 | <v-flex xs12> |
| 287 | <v-layout> | 287 | <v-layout> |
| 288 | <v-flex xs4 class="pt-4 subheading"> | 288 | <v-flex xs4 class="pt-4 subheading"> |
| 289 | <label class="right">Upload PDF:</label> | 289 | <label class="right">Upload PDF:</label> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs8 sm6 class="ml-3"> | 291 | <v-flex xs8 sm6 class="ml-3"> |
| 292 | <UploadPdf | 292 | <UploadPdf |
| 293 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" | 293 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" |
| 294 | label="Add PDF" | 294 | label="Add PDF" |
| 295 | reference="newChapterPdf" | 295 | reference="newChapterPdf" |
| 296 | id="newChapterPdfInput" | 296 | id="newChapterPdfInput" |
| 297 | :emptyPdf="emptyPdf" | 297 | :emptyPdf="emptyPdf" |
| 298 | ></UploadPdf> | 298 | ></UploadPdf> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | </v-layout> | 300 | </v-layout> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> | 304 | <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs4 class="pt-4 subheading"> | 306 | <v-flex xs4 class="pt-4 subheading"> |
| 307 | <label class="right">Chapter Points:</label> | 307 | <label class="right">Chapter Points:</label> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <v-flex xs8 sm8 md6 class="ml-3"> | 309 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 310 | <v-text-field | 310 | <v-text-field |
| 311 | placeholder="fill your Chapter Points" | 311 | placeholder="fill your Chapter Points" |
| 312 | v-model="chapterPoints.value" | 312 | v-model="chapterPoints.value" |
| 313 | type="text" | 313 | type="text" |
| 314 | name="link" | 314 | name="link" |
| 315 | required | 315 | required |
| 316 | ></v-text-field> | 316 | ></v-text-field> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | <v-flex xs2 class="pt-4"> | 318 | <v-flex xs2 class="pt-4"> |
| 319 | <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> | 319 | <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> |
| 320 | <v-icon @click="addChapterPoint()">add_circle</v-icon> | 320 | <v-icon @click="addChapterPoint()">add_circle</v-icon> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | </div> | 323 | </div> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | <v-layout> | 325 | <v-layout> |
| 326 | <v-flex xs12 sm12 md11 lg11> | 326 | <v-flex xs12 sm12 md11 lg11> |
| 327 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 327 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 328 | <v-spacer></v-spacer> | 328 | <v-spacer></v-spacer> |
| 329 | <v-btn | 329 | <v-btn |
| 330 | round | 330 | round |
| 331 | dark | 331 | dark |
| 332 | @click="submitChapter" | 332 | @click="submitChapter" |
| 333 | :loading="editLoading" | 333 | :loading="editLoading" |
| 334 | class="add-button mr-4" | 334 | class="add-button mr-4" |
| 335 | >Submit</v-btn> | 335 | >Submit</v-btn> |
| 336 | </v-card-actions> | 336 | </v-card-actions> |
| 337 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 337 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 338 | <v-spacer></v-spacer> | 338 | <v-spacer></v-spacer> |
| 339 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 339 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 340 | <v-spacer></v-spacer> | 340 | <v-spacer></v-spacer> |
| 341 | </v-card-actions> | 341 | </v-card-actions> |
| 342 | </v-flex> | 342 | </v-flex> |
| 343 | </v-layout> | 343 | </v-layout> |
| 344 | </v-card-text> | 344 | </v-card-text> |
| 345 | </v-card> | 345 | </v-card> |
| 346 | </v-dialog> | 346 | </v-dialog> |
| 347 | 347 | ||
| 348 | <!-- ****** PROFILE Gallery ****** --> | 348 | <!-- ****** PROFILE Gallery ****** --> |
| 349 | 349 | ||
| 350 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> | 350 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> |
| 351 | <v-card flat class="card-style pa-3" dark> | 351 | <v-card flat class="Card-style pa-3"> |
| 352 | <v-layout> | 352 | <v-layout> |
| 353 | <v-flex xs12> | 353 | <v-flex xs12> |
| 354 | <label class="title text-xs-center">View Course Detail</label> | 354 | <label class="title text-xs-center">View Course Detail</label> |
| 355 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> | 355 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | </v-layout> | 357 | </v-layout> |
| 358 | <v-card-text> | 358 | <v-card-text> |
| 359 | <v-container grid-list-md> | 359 | <v-container grid-list-md> |
| 360 | <v-layout wrap> | 360 | <v-layout wrap> |
| 361 | <v-flex xs12> | 361 | <v-flex xs12> |
| 362 | <v-layout> | 362 | <v-layout> |
| 363 | <v-flex xs4 sm6> | 363 | <v-flex xs4 sm6> |
| 364 | <h5 class="right my-1"> | 364 | <h5 class="right my-1"> |
| 365 | <b>Chapter Name:</b> | 365 | <b>Chapter Name:</b> |
| 366 | </h5> | 366 | </h5> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | <v-flex sm6 xs8> | 368 | <v-flex sm6 xs8> |
| 369 | <h5 class="my-1">{{ editedItem.chapterName }}</h5> | 369 | <h5 class="my-1">{{ editedItem.chapterName }}</h5> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs4 sm6> | 373 | <v-flex xs4 sm6> |
| 374 | <h5 class="right my-1"> | 374 | <h5 class="right my-1"> |
| 375 | <b>Description:</b> | 375 | <b>Description:</b> |
| 376 | </h5> | 376 | </h5> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex sm6 xs8> | 378 | <v-flex sm6 xs8> |
| 379 | <h5 class="my-1">{{ editedItem.description }}</h5> | 379 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 380 | </v-flex> | 380 | </v-flex> |
| 381 | </v-layout> | 381 | </v-layout> |
| 382 | <v-layout> | 382 | <v-layout> |
| 383 | <v-flex xs5 sm6> | 383 | <v-flex xs5 sm6> |
| 384 | <h5 class="right my-1"> | 384 | <h5 class="right my-1"> |
| 385 | <b>Chapter Points:</b> | 385 | <b>Chapter Points:</b> |
| 386 | </h5> | 386 | </h5> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | <v-flex sm6 xs8> | 388 | <v-flex sm6 xs8> |
| 389 | <h5 class="my-1"> | 389 | <h5 class="my-1"> |
| 390 | <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> | 390 | <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> |
| 391 | <li>{{ chapterPoint}}</li> | 391 | <li>{{ chapterPoint}}</li> |
| 392 | </ul> | 392 | </ul> |
| 393 | </h5> | 393 | </h5> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | </v-layout> | 395 | </v-layout> |
| 396 | <!-- LINK TO PDF --> | 396 | <!-- LINK TO PDF --> |
| 397 | <!-- <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''"> | 397 | <!-- <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''"> |
| 398 | <v-flex xs6> | 398 | <v-flex xs6> |
| 399 | <div style="width: 100%;"> | 399 | <div style="width: 100%;"> |
| 400 | <a | 400 | <a |
| 401 | :href="editedItem.pdfFileUrl" | 401 | :href="editedItem.pdfFileUrl" |
| 402 | target="_blank" | 402 | target="_blank" |
| 403 | style="text-decoration: none!important;" | 403 | style="text-decoration: none!important;" |
| 404 | > | 404 | > |
| 405 | <v-btn flat block> | 405 | <v-btn flat block> |
| 406 | <span> | 406 | <span> |
| 407 | <h5> | 407 | <h5> |
| 408 | <b>Open PDF</b> | 408 | <b>Open PDF</b> |
| 409 | </h5> | 409 | </h5> |
| 410 | </span> | 410 | </span> |
| 411 | </v-btn> | 411 | </v-btn> |
| 412 | </a> | 412 | </a> |
| 413 | </div> | 413 | </div> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-layout>--> | 415 | </v-layout>--> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | </v-container> | 418 | </v-container> |
| 419 | </v-card-text> | 419 | </v-card-text> |
| 420 | </v-card> | 420 | </v-card> |
| 421 | </v-dialog> | 421 | </v-dialog> |
| 422 | 422 | ||
| 423 | <!-- ****** Course Detail TABLE ****** --> | 423 | <!-- ****** Course Detail TABLE ****** --> |
| 424 | <v-toolbar color="transparent" flat> | 424 | <v-toolbar color="transparent" flat> |
| 425 | <!-- <v-flex xs1> | 425 | <!-- <v-flex xs1> |
| 426 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> | 426 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> |
| 427 | <v-icon size="20">add</v-icon> | 427 | <v-icon size="20">add</v-icon> |
| 428 | <span class="hidden-sm-and-down">Add Course Detail</span> | 428 | <span class="hidden-sm-and-down">Add Course Detail</span> |
| 429 | <span class="hidden-md-and-up">Add</span> | 429 | <span class="hidden-md-and-up">Add</span> |
| 430 | </v-btn> | 430 | </v-btn> |
| 431 | </v-flex>--> | 431 | </v-flex>--> |
| 432 | <v-btn | 432 | <v-btn |
| 433 | fab | 433 | fab |
| 434 | dark | 434 | dark |
| 435 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 435 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 436 | small | 436 | small |
| 437 | @click="addCourseDetailDialog = true" | 437 | @click="addCourseDetailDialog = true" |
| 438 | > | 438 | > |
| 439 | <v-icon dark>add</v-icon> | 439 | <v-icon dark>add</v-icon> |
| 440 | </v-btn> | 440 | </v-btn> |
| 441 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 441 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 442 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> | 442 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> |
| 443 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail | 443 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail |
| 444 | </v-btn> | 444 | </v-btn> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | <v-spacer></v-spacer> | 446 | <v-spacer></v-spacer> |
| 447 | <v-flex xs12 sm4 md2> | 447 | <v-flex xs12 sm4 md2> |
| 448 | <v-select | 448 | <v-select |
| 449 | :items="addclass" | 449 | :items="addclass" |
| 450 | label="Select Class" | 450 | label="Select Class" |
| 451 | v-model="getCourse.classId" | 451 | v-model="getCourse.classId" |
| 452 | item-text="classNum" | 452 | item-text="classNum" |
| 453 | item-value="_id" | 453 | item-value="_id" |
| 454 | name="Select Class" | 454 | name="Select Class" |
| 455 | @change="getCourses(getCourse.classId)" | 455 | @change="getCourses(getCourse.classId)" |
| 456 | required | 456 | required |
| 457 | ></v-select> | 457 | ></v-select> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | <v-flex xs12 sm4 md2 class="ml-2"> | 459 | <v-flex xs12 sm4 md2 class="ml-2"> |
| 460 | <v-select | 460 | <v-select |
| 461 | :items="courseData" | 461 | :items="courseData" |
| 462 | label="Select Course" | 462 | label="Select Course" |
| 463 | v-model="getCourse.courseId" | 463 | v-model="getCourse.courseId" |
| 464 | item-text="courseName" | 464 | item-text="courseName" |
| 465 | item-value="_id" | 465 | item-value="_id" |
| 466 | required | 466 | required |
| 467 | @change="getCourseDetailsList(getCourse.courseId)" | 467 | @change="getCourseDetailsList(getCourse.courseId)" |
| 468 | ></v-select> | 468 | ></v-select> |
| 469 | </v-flex> | 469 | </v-flex> |
| 470 | 470 | ||
| 471 | <v-flex xs12 sm1 v-if="show"> | 471 | <v-flex xs12 sm1 v-if="show"> |
| 472 | <v-btn icon large flat @click="show = false;showSearch = true;"> | 472 | <v-btn icon large flat @click="show = false;showSearch = true;"> |
| 473 | <v-avatar size="27"> | 473 | <v-avatar size="27"> |
| 474 | <img src="/static/icon/search.png" alt="icon" /> | 474 | <img src="/static/icon/search.png" alt="icon" /> |
| 475 | </v-avatar> | 475 | </v-avatar> |
| 476 | </v-btn> | 476 | </v-btn> |
| 477 | </v-flex> | 477 | </v-flex> |
| 478 | 478 | ||
| 479 | <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2"> | 479 | <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2"> |
| 480 | <div style="display: inline-block;width: 70%;"> | 480 | <div style="display: inline-block;width: 70%;"> |
| 481 | <v-text-field | 481 | <v-text-field |
| 482 | autofocus | 482 | autofocus |
| 483 | v-model="search" | 483 | v-model="search" |
| 484 | label="Search" | 484 | label="Search" |
| 485 | prepend-inner-icon="search" | 485 | prepend-inner-icon="search" |
| 486 | color="primary" | 486 | color="primary" |
| 487 | ></v-text-field> | 487 | ></v-text-field> |
| 488 | </div> | 488 | </div> |
| 489 | <div style="display: inline-block;"> | 489 | <div style="display: inline-block;"> |
| 490 | <v-icon @click="closeSearch" color="error">close</v-icon> | 490 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 491 | </div> | 491 | </div> |
| 492 | </v-flex> | 492 | </v-flex> |
| 493 | </v-toolbar> | 493 | </v-toolbar> |
| 494 | 494 | ||
| 495 | <v-data-table | 495 | <v-data-table |
| 496 | :headers="headers" | 496 | :headers="headers" |
| 497 | :items="CourseDetailsList" | 497 | :items="CourseDetailsList" |
| 498 | :pagination.sync="pagination" | 498 | :pagination.sync="pagination" |
| 499 | :search="search" | 499 | :search="search" |
| 500 | item-key="_id" | 500 | item-key="_id" |
| 501 | > | 501 | > |
| 502 | <template slot="items" slot-scope="props"> | 502 | <template slot="items" slot-scope="props"> |
| 503 | <tr class="tr" @click="courseTableRow(props.item._id)"> | 503 | <tr class="tr" @click="courseTableRow(props.item._id)"> |
| 504 | <td class="td td-row">{{ props.index + 1}}</td> | 504 | <td class="td td-row">{{ props.index + 1}}</td> |
| 505 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> | 505 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> |
| 506 | <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> | 506 | <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> |
| 507 | <td class="td td-row text-xs-center"> | 507 | <td class="td td-row text-xs-center"> |
| 508 | <div style="vertical-align: top;"> | 508 | <div style="vertical-align: top;"> |
| 509 | <v-tooltip top> | 509 | <v-tooltip top> |
| 510 | <v-icon | 510 | <v-icon |
| 511 | slot="activator" | 511 | slot="activator" |
| 512 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " | 512 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " |
| 513 | class="mr-3" | 513 | class="mr-3" |
| 514 | @click="addChapters(props.item)" | 514 | @click="addChapters(props.item)" |
| 515 | >add_circle_outline</v-icon> | 515 | >add_circle_outline</v-icon> |
| 516 | <span>Add</span> | 516 | <span>Add</span> |
| 517 | </v-tooltip> | 517 | </v-tooltip> |
| 518 | <v-tooltip top> | 518 | <v-tooltip top> |
| 519 | <img | 519 | <img |
| 520 | slot="activator" | 520 | slot="activator" |
| 521 | style="cursor:pointer; width:25px; height:25px; " | 521 | style="cursor:pointer; width:25px; height:25px; " |
| 522 | class="mr-3" | 522 | class="mr-3" |
| 523 | @click="props.expanded = !props.expanded" | 523 | @click="props.expanded = !props.expanded" |
| 524 | src="/static/icon/view.png" | 524 | src="/static/icon/view.png" |
| 525 | /> | 525 | /> |
| 526 | <span>View</span> | 526 | <span>View</span> |
| 527 | </v-tooltip> | 527 | </v-tooltip> |
| 528 | <v-tooltip top> | 528 | <v-tooltip top> |
| 529 | <img | 529 | <img |
| 530 | slot="activator" | 530 | slot="activator" |
| 531 | style="cursor:pointer; width:20px; height:18px; " | 531 | style="cursor:pointer; width:20px; height:18px; " |
| 532 | class="mr-3" | 532 | class="mr-3" |
| 533 | @click="editItem(props.item)" | 533 | @click="editItem(props.item)" |
| 534 | src="/static/icon/edit.png" | 534 | src="/static/icon/edit.png" |
| 535 | /> | 535 | /> |
| 536 | <span>Edit</span> | 536 | <span>Edit</span> |
| 537 | </v-tooltip> | 537 | </v-tooltip> |
| 538 | <v-tooltip top> | 538 | <v-tooltip top> |
| 539 | <img | 539 | <img |
| 540 | slot="activator" | 540 | slot="activator" |
| 541 | style="cursor:pointer; width:20px; height:20px; " | 541 | style="cursor:pointer; width:20px; height:20px; " |
| 542 | class="mr-3" | 542 | class="mr-3" |
| 543 | @click="deleteItem(props.item)" | 543 | @click="deleteItem(props.item)" |
| 544 | src="/static/icon/delete.png" | 544 | src="/static/icon/delete.png" |
| 545 | /> | 545 | /> |
| 546 | <span>Delete</span> | 546 | <span>Delete</span> |
| 547 | </v-tooltip> | 547 | </v-tooltip> |
| 548 | </div> | 548 | </div> |
| 549 | </td> | 549 | </td> |
| 550 | </tr> | 550 | </tr> |
| 551 | </template> | 551 | </template> |
| 552 | <!-- CHAPTERS IN A COURSE --> | 552 | <!-- CHAPTERS IN A COURSE --> |
| 553 | <template slot="expand"> | 553 | <template slot="expand"> |
| 554 | <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> | 554 | <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> |
| 555 | <template slot="items" slot-scope="props"> | 555 | <template slot="items" slot-scope="props"> |
| 556 | <tr class="tr" @click="props.expanded = !props.expanded"> | 556 | <tr class="tr" @click="props.expanded = !props.expanded"> |
| 557 | <td class="td td-row">{{ props.index + 1}}</td> | 557 | <td class="td td-row">{{ props.index + 1}}</td> |
| 558 | <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> | 558 | <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> |
| 559 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> | 559 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> |
| 560 | <td class="text-xs-center td td-row"> | 560 | <td class="text-xs-center td td-row"> |
| 561 | <v-tooltip top> | 561 | <v-tooltip top> |
| 562 | <v-icon | 562 | <v-icon |
| 563 | slot="activator" | 563 | slot="activator" |
| 564 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " | 564 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " |
| 565 | class="mr-3" | 565 | class="mr-3" |
| 566 | @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" | 566 | @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" |
| 567 | >video_call</v-icon> | 567 | >video_call</v-icon> |
| 568 | <span>Live Session</span> | 568 | <span>Live Session</span> |
| 569 | </v-tooltip> | 569 | </v-tooltip> |
| 570 | <v-tooltip top> | 570 | <v-tooltip top> |
| 571 | <img | 571 | <img |
| 572 | slot="activator" | 572 | slot="activator" |
| 573 | style="cursor:pointer; width:25px; height:25px; " | 573 | style="cursor:pointer; width:25px; height:25px; " |
| 574 | class="mr-3" | 574 | class="mr-3" |
| 575 | @click="profile(props.item)" | 575 | @click="profile(props.item)" |
| 576 | src="/static/icon/view.png" | 576 | src="/static/icon/view.png" |
| 577 | /> | 577 | /> |
| 578 | <span>View</span> | 578 | <span>View</span> |
| 579 | </v-tooltip> | 579 | </v-tooltip> |
| 580 | <v-tooltip top> | 580 | <v-tooltip top> |
| 581 | <img | 581 | <img |
| 582 | slot="activator" | 582 | slot="activator" |
| 583 | style="cursor:pointer; width:20px; height:18px; " | 583 | style="cursor:pointer; width:20px; height:18px; " |
| 584 | class="mr-3" | 584 | class="mr-3" |
| 585 | @click="editChapterItem(props.item)" | 585 | @click="editChapterItem(props.item)" |
| 586 | src="/static/icon/edit.png" | 586 | src="/static/icon/edit.png" |
| 587 | /> | 587 | /> |
| 588 | <span>Edit</span> | 588 | <span>Edit</span> |
| 589 | </v-tooltip> | 589 | </v-tooltip> |
| 590 | <v-tooltip top> | 590 | <v-tooltip top> |
| 591 | <img | 591 | <img |
| 592 | slot="activator" | 592 | slot="activator" |
| 593 | style="cursor:pointer; width:20px; height:20px; " | 593 | style="cursor:pointer; width:20px; height:20px; " |
| 594 | class="mr-3" | 594 | class="mr-3" |
| 595 | @click="deleteChapters(props.item)" | 595 | @click="deleteChapters(props.item)" |
| 596 | src="/static/icon/delete.png" | 596 | src="/static/icon/delete.png" |
| 597 | /> | 597 | /> |
| 598 | <span>Delete Chapter</span> | 598 | <span>Delete Chapter</span> |
| 599 | </v-tooltip> | 599 | </v-tooltip> |
| 600 | <v-tooltip top> | 600 | <v-tooltip top> |
| 601 | <img | 601 | <img |
| 602 | slot="activator" | 602 | slot="activator" |
| 603 | style="cursor:pointer; width:20px; height:20px; " | 603 | style="cursor:pointer; width:20px; height:20px; " |
| 604 | class="mr-3" | 604 | class="mr-3" |
| 605 | src="/static/icon/dashboard icons-34.png" | 605 | src="/static/icon/dashboard icons-34.png" |
| 606 | @click="openLink(props.item.pdfFileUrl)" | 606 | @click="openLink(props.item.pdfFileUrl)" |
| 607 | /> | 607 | /> |
| 608 | <span> | 608 | <span> |
| 609 | <h5>{{props.item.fileName}}</h5> | 609 | <h5>{{props.item.fileName}}</h5> |
| 610 | </span> | 610 | </span> |
| 611 | </v-tooltip> | 611 | </v-tooltip> |
| 612 | </td> | 612 | </td> |
| 613 | </tr> | 613 | </tr> |
| 614 | </template> | 614 | </template> |
| 615 | </v-data-table> | 615 | </v-data-table> |
| 616 | </template> | 616 | </template> |
| 617 | 617 | ||
| 618 | <v-alert | 618 | <v-alert |
| 619 | slot="no-results" | 619 | slot="no-results" |
| 620 | :value="true" | 620 | :value="true" |
| 621 | color="error" | 621 | color="error" |
| 622 | icon="warning" | 622 | icon="warning" |
| 623 | >Your search for "{{ search }}" found no results.</v-alert> | 623 | >Your search for "{{ search }}" found no results.</v-alert> |
| 624 | </v-data-table> | 624 | </v-data-table> |
| 625 | <!-- ****** ADD Course Detail ****** --> | 625 | <!-- ****** ADD Course Detail ****** --> |
| 626 | <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> | 626 | <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> |
| 627 | <v-card flat class="card-style pa-2" dark> | 627 | <v-card flat class="Card-style pa-2"> |
| 628 | <v-layout> | 628 | <v-layout> |
| 629 | <v-flex xs12> | 629 | <v-flex xs12> |
| 630 | <label class="title text-xs-center">Add Course Details</label> | 630 | <label class="title text-xs-center">Add Course Details</label> |
| 631 | <v-icon | 631 | <v-icon |
| 632 | size="24" | 632 | size="24" |
| 633 | class="right" | 633 | class="right" |
| 634 | @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' " | 634 | @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' " |
| 635 | >cancel</v-icon> | 635 | >cancel</v-icon> |
| 636 | </v-flex> | 636 | </v-flex> |
| 637 | </v-layout> | 637 | </v-layout> |
| 638 | <v-form ref="form" v-model="valid" lazy-validation> | 638 | <v-form ref="form" v-model="valid" lazy-validation> |
| 639 | <v-container fluid> | 639 | <v-container fluid> |
| 640 | <v-flex xs12> | 640 | <v-flex xs12> |
| 641 | <v-layout> | 641 | <v-layout> |
| 642 | <v-flex xs4 class="pt-4 subheading"> | 642 | <v-flex xs4 class="pt-4 subheading"> |
| 643 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 643 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 644 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 644 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 645 | </v-flex> | 645 | </v-flex> |
| 646 | <v-flex xs8 sm8 md7 class="ml-3"> | 646 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 647 | <v-select | 647 | <v-select |
| 648 | :items="addclass" | 648 | :items="addclass" |
| 649 | label="Select Class" | 649 | label="Select Class" |
| 650 | v-model="addCourseDetail.classId" | 650 | v-model="addCourseDetail.classId" |
| 651 | item-text="classNum" | 651 | item-text="classNum" |
| 652 | item-value="_id" | 652 | item-value="_id" |
| 653 | name="Select Class" | 653 | name="Select Class" |
| 654 | :rules="clsssRules" | 654 | :rules="clsssRules" |
| 655 | @change="getCourses(addCourseDetail.classId)" | 655 | @change="getCourses(addCourseDetail.classId)" |
| 656 | required | 656 | required |
| 657 | ></v-select> | 657 | ></v-select> |
| 658 | </v-flex> | 658 | </v-flex> |
| 659 | </v-layout> | 659 | </v-layout> |
| 660 | </v-flex> | 660 | </v-flex> |
| 661 | <v-flex xs12> | 661 | <v-flex xs12> |
| 662 | <v-layout> | 662 | <v-layout> |
| 663 | <v-flex xs4 class="pt-4 subheading"> | 663 | <v-flex xs4 class="pt-4 subheading"> |
| 664 | <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> | 664 | <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> |
| 665 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 665 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 666 | </v-flex> | 666 | </v-flex> |
| 667 | <v-flex xs8 sm8 md7 class="ml-3"> | 667 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 668 | <v-select | 668 | <v-select |
| 669 | :items="courseData" | 669 | :items="courseData" |
| 670 | label="Select Course" | 670 | label="Select Course" |
| 671 | v-model="addCourseDetail.courseId" | 671 | v-model="addCourseDetail.courseId" |
| 672 | item-text="courseName" | 672 | item-text="courseName" |
| 673 | item-value="_id" | 673 | item-value="_id" |
| 674 | :rules="courseRules" | 674 | :rules="courseRules" |
| 675 | required | 675 | required |
| 676 | ></v-select> | 676 | ></v-select> |
| 677 | </v-flex> | 677 | </v-flex> |
| 678 | </v-layout> | 678 | </v-layout> |
| 679 | </v-flex> | 679 | </v-flex> |
| 680 | <v-flex xs12> | 680 | <v-flex xs12> |
| 681 | <v-layout> | 681 | <v-layout> |
| 682 | <v-flex xs4 class="pt-4 subheading"> | 682 | <v-flex xs4 class="pt-4 subheading"> |
| 683 | <label class="right">Chapter Name:</label> | 683 | <label class="right">Chapter Name:</label> |
| 684 | </v-flex> | 684 | </v-flex> |
| 685 | <v-flex xs8 sm8 md7 class="ml-3"> | 685 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 686 | <v-text-field | 686 | <v-text-field |
| 687 | v-model="addCourseDetail.chapterName" | 687 | v-model="addCourseDetail.chapterName" |
| 688 | placeholder="fill your Title" | 688 | placeholder="fill your Title" |
| 689 | name="name" | 689 | name="name" |
| 690 | type="text" | 690 | type="text" |
| 691 | :rules="chapterNameRules" | 691 | :rules="chapterNameRules" |
| 692 | required | 692 | required |
| 693 | ></v-text-field> | 693 | ></v-text-field> |
| 694 | </v-flex> | 694 | </v-flex> |
| 695 | </v-layout> | 695 | </v-layout> |
| 696 | </v-flex> | 696 | </v-flex> |
| 697 | <!-- DESCRIPTION --> | 697 | <!-- DESCRIPTION --> |
| 698 | <v-flex xs12> | 698 | <v-flex xs12> |
| 699 | <v-layout> | 699 | <v-layout> |
| 700 | <v-flex xs4 class="pt-4 subheading"> | 700 | <v-flex xs4 class="pt-4 subheading"> |
| 701 | <label class="right">Description:</label> | 701 | <label class="right">Description:</label> |
| 702 | </v-flex> | 702 | </v-flex> |
| 703 | <v-flex xs8 sm8 md7 class="ml-3"> | 703 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 704 | <v-text-field | 704 | <v-text-field |
| 705 | placeholder="fill your Description" | 705 | placeholder="fill your Description" |
| 706 | :rules="descriptionRules" | 706 | :rules="descriptionRules" |
| 707 | v-model="addCourseDetail.description" | 707 | v-model="addCourseDetail.description" |
| 708 | type="text" | 708 | type="text" |
| 709 | name="email" | 709 | name="email" |
| 710 | required | 710 | required |
| 711 | ></v-text-field> | 711 | ></v-text-field> |
| 712 | </v-flex> | 712 | </v-flex> |
| 713 | </v-layout> | 713 | </v-layout> |
| 714 | </v-flex> | 714 | </v-flex> |
| 715 | <!-- UPLOAD PPT --> | 715 | <!-- UPLOAD PPT --> |
| 716 | <!-- <v-flex xs12> | 716 | <!-- <v-flex xs12> |
| 717 | <v-layout> | 717 | <v-layout> |
| 718 | <v-flex xs4 class="pt-4 subheading"> | 718 | <v-flex xs4 class="pt-4 subheading"> |
| 719 | <label class="right">Upload PPT:</label> | 719 | <label class="right">Upload PPT:</label> |
| 720 | </v-flex> | 720 | </v-flex> |
| 721 | <v-flex xs8 sm8 md7 class="ml-3"> | 721 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 722 | <UploadFiles | 722 | <UploadFiles |
| 723 | @fileSelected="fileSelected($event,'uploadPPT')" | 723 | @fileSelected="fileSelected($event,'uploadPPT')" |
| 724 | label="Add PPT" | 724 | label="Add PPT" |
| 725 | reference="newCoursePpt" | 725 | reference="newCoursePpt" |
| 726 | id="newCoursePptInput" | 726 | id="newCoursePptInput" |
| 727 | :trigger="trigger" | 727 | :trigger="trigger" |
| 728 | ></UploadFiles> | 728 | ></UploadFiles> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | </v-layout> | 730 | </v-layout> |
| 731 | </v-flex>--> | 731 | </v-flex>--> |
| 732 | <!-- UPLOAD PDF --> | 732 | <!-- UPLOAD PDF --> |
| 733 | <v-flex xs12> | 733 | <v-flex xs12> |
| 734 | <v-layout> | 734 | <v-layout> |
| 735 | <v-flex xs4 class="pt-4 subheading"> | 735 | <v-flex xs4 class="pt-4 subheading"> |
| 736 | <label class="right">Upload PDF:</label> | 736 | <label class="right">Upload PDF:</label> |
| 737 | </v-flex> | 737 | </v-flex> |
| 738 | <v-flex xs8 sm8 md7 class="ml-3"> | 738 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 739 | <UploadPdf | 739 | <UploadPdf |
| 740 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" | 740 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" |
| 741 | label="Add PDF" | 741 | label="Add PDF" |
| 742 | reference="newCoursePdf" | 742 | reference="newCoursePdf" |
| 743 | id="newCoursePdfInput" | 743 | id="newCoursePdfInput" |
| 744 | :emptyPdf="emptyPdf" | 744 | :emptyPdf="emptyPdf" |
| 745 | ></UploadPdf> | 745 | ></UploadPdf> |
| 746 | </v-flex> | 746 | </v-flex> |
| 747 | </v-layout> | 747 | </v-layout> |
| 748 | </v-flex> | 748 | </v-flex> |
| 749 | <v-layout> | 749 | <v-layout> |
| 750 | <v-flex xs12> | 750 | <v-flex xs12> |
| 751 | <div v-for="(chapterPoints,index) in finds" :key="index"> | 751 | <div v-for="(chapterPoints,index) in finds" :key="index"> |
| 752 | <v-layout> | 752 | <v-layout> |
| 753 | <v-flex xs4 class="pt-4 subheading"> | 753 | <v-flex xs4 class="pt-4 subheading"> |
| 754 | <label class="right">Chapter Points:</label> | 754 | <label class="right">Chapter Points:</label> |
| 755 | </v-flex> | 755 | </v-flex> |
| 756 | <v-flex xs8 sm8 md6 class="ml-3"> | 756 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 757 | <v-text-field | 757 | <v-text-field |
| 758 | placeholder="fill your Chapter Points" | 758 | placeholder="fill your Chapter Points" |
| 759 | v-model="chapterPoints.value" | 759 | v-model="chapterPoints.value" |
| 760 | type="text" | 760 | type="text" |
| 761 | required | 761 | required |
| 762 | ></v-text-field> | 762 | ></v-text-field> |
| 763 | </v-flex> | 763 | </v-flex> |
| 764 | <v-flex xs2 class="pt-4"> | 764 | <v-flex xs2 class="pt-4"> |
| 765 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> | 765 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> |
| 766 | <v-icon @click="addFind">add_circle</v-icon> | 766 | <v-icon @click="addFind">add_circle</v-icon> |
| 767 | </v-flex> | 767 | </v-flex> |
| 768 | </v-layout> | 768 | </v-layout> |
| 769 | </div> | 769 | </div> |
| 770 | </v-flex> | 770 | </v-flex> |
| 771 | </v-layout> | 771 | </v-layout> |
| 772 | <v-layout> | 772 | <v-layout> |
| 773 | <v-flex xs12 sm12> | 773 | <v-flex xs12 sm12> |
| 774 | <v-layout class="right"> | 774 | <v-layout class="right"> |
| 775 | <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn> | 775 | <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn> |
| 776 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 776 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 777 | </v-layout> | 777 | </v-layout> |
| 778 | </v-flex> | 778 | </v-flex> |
| 779 | </v-layout> | 779 | </v-layout> |
| 780 | </v-container> | 780 | </v-container> |
| 781 | </v-form> | 781 | </v-form> |
| 782 | </v-card> | 782 | </v-card> |
| 783 | </v-dialog> | 783 | </v-dialog> |
| 784 | <v-snackbar | 784 | <v-snackbar |
| 785 | :timeout="timeout" | 785 | :timeout="timeout" |
| 786 | :top="y === 'top'" | 786 | :top="y === 'top'" |
| 787 | :right="x === 'right'" | 787 | :right="x === 'right'" |
| 788 | :vertical="mode === 'vertical'" | 788 | :vertical="mode === 'vertical'" |
| 789 | v-model="snackbar" | 789 | v-model="snackbar" |
| 790 | :color="color" | 790 | :color="color" |
| 791 | >{{ text }}</v-snackbar> | 791 | >{{ text }}</v-snackbar> |
| 792 | <div class="loader" v-if="showLoader"> | 792 | <div class="loader" v-if="showLoader"> |
| 793 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 793 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 794 | </div> | 794 | </div> |
| 795 | </v-container> | 795 | </v-container> |
| 796 | </template> | 796 | </template> |
| 797 | 797 | ||
| 798 | <script> | 798 | <script> |
| 799 | import http from "@/Services/http.js"; | 799 | import http from "@/Services/http.js"; |
| 800 | import UploadFiles from "@/pages/Common/UploadFiles.vue"; | 800 | import UploadFiles from "@/pages/Common/UploadFiles.vue"; |
| 801 | import UploadPdf from "@/pages/Common/UploadPdf.vue"; | 801 | import UploadPdf from "@/pages/Common/UploadPdf.vue"; |
| 802 | import AllApiCalls from "@/Services/AllApiCalls.js"; | 802 | import AllApiCalls from "@/Services/AllApiCalls.js"; |
| 803 | 803 | ||
| 804 | export default { | 804 | export default { |
| 805 | mixins: [AllApiCalls], | 805 | mixins: [AllApiCalls], |
| 806 | components: { | 806 | components: { |
| 807 | UploadFiles, | 807 | UploadFiles, |
| 808 | UploadPdf, | 808 | UploadPdf, |
| 809 | }, | 809 | }, |
| 810 | data: () => ({ | 810 | data: () => ({ |
| 811 | snackbar: false, | 811 | snackbar: false, |
| 812 | y: "top", | 812 | y: "top", |
| 813 | x: "right", | 813 | x: "right", |
| 814 | mode: "", | 814 | mode: "", |
| 815 | timeout: 3000, | 815 | timeout: 3000, |
| 816 | text: "", | 816 | text: "", |
| 817 | loading: false, | 817 | loading: false, |
| 818 | color: "", | 818 | color: "", |
| 819 | date: null, | 819 | date: null, |
| 820 | search: "", | 820 | search: "", |
| 821 | show: true, | 821 | show: true, |
| 822 | addCourseDetailDialog: false, | 822 | addCourseDetailDialog: false, |
| 823 | showSearch: false, | 823 | showSearch: false, |
| 824 | showLoader: false, | 824 | showLoader: false, |
| 825 | editCourseDetailDialog: false, | 825 | editCourseDetailDialog: false, |
| 826 | editChapterDetailDialog: false, | 826 | editChapterDetailDialog: false, |
| 827 | viewProfileGallery: false, | 827 | viewProfileGallery: false, |
| 828 | valid: true, | 828 | valid: true, |
| 829 | editLoading: false, | 829 | editLoading: false, |
| 830 | addclass: [], | 830 | addclass: [], |
| 831 | courseData: [], | 831 | courseData: [], |
| 832 | addSection: [], | 832 | addSection: [], |
| 833 | getCourse: {}, | 833 | getCourse: {}, |
| 834 | finds: [{ value: "" }], | 834 | finds: [{ value: "" }], |
| 835 | findsChapterPoint: [{ value: "" }], | 835 | findsChapterPoint: [{ value: "" }], |
| 836 | updates: [], | 836 | updates: [], |
| 837 | youTubeLink: {}, | 837 | youTubeLink: {}, |
| 838 | addCourseDetail: { | 838 | addCourseDetail: { |
| 839 | chapters: [ | 839 | chapters: [ |
| 840 | { | 840 | { |
| 841 | chapterName: "", | 841 | chapterName: "", |
| 842 | description: "", | 842 | description: "", |
| 843 | chapterPoints: [], | 843 | chapterPoints: [], |
| 844 | }, | 844 | }, |
| 845 | ], | 845 | ], |
| 846 | }, | 846 | }, |
| 847 | chapters: [], | 847 | chapters: [], |
| 848 | pagination: { | 848 | pagination: { |
| 849 | rowsPerPage: 10, | 849 | rowsPerPage: 10, |
| 850 | }, | 850 | }, |
| 851 | editFiles: [], | 851 | editFiles: [], |
| 852 | files: [], | 852 | files: [], |
| 853 | courseData: [], | 853 | courseData: [], |
| 854 | token: "", | 854 | token: "", |
| 855 | courseId: "", | 855 | courseId: "", |
| 856 | clsssRules: [(v) => !!v || " Class is required"], | 856 | clsssRules: [(v) => !!v || " Class is required"], |
| 857 | courseRules: [(v) => !!v || " Course is required"], | 857 | courseRules: [(v) => !!v || " Course is required"], |
| 858 | chapterNameRules: [(v) => !!v || " Tilte is required"], | 858 | chapterNameRules: [(v) => !!v || " Tilte is required"], |
| 859 | descriptionRules: [(v) => !!v || " Description is required"], | 859 | descriptionRules: [(v) => !!v || " Description is required"], |
| 860 | headers: [ | 860 | headers: [ |
| 861 | { | 861 | { |
| 862 | align: "", | 862 | align: "", |
| 863 | text: "No", | 863 | text: "No", |
| 864 | sortable: false, | 864 | sortable: false, |
| 865 | value: "index", | 865 | value: "index", |
| 866 | }, | 866 | }, |
| 867 | { | 867 | { |
| 868 | text: "Class Name", | 868 | text: "Class Name", |
| 869 | value: "classNum", | 869 | value: "classNum", |
| 870 | sortable: false, | 870 | sortable: false, |
| 871 | align: "center", | 871 | align: "center", |
| 872 | }, | 872 | }, |
| 873 | { | 873 | { |
| 874 | text: "Course Name", | 874 | text: "Course Name", |
| 875 | value: "courseName", | 875 | value: "courseName", |
| 876 | sortable: false, | 876 | sortable: false, |
| 877 | align: "center", | 877 | align: "center", |
| 878 | }, | 878 | }, |
| 879 | { text: "Action", value: "", sortable: false, align: "center" }, | 879 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 880 | ], | 880 | ], |
| 881 | CourseDetailsList: [], | 881 | CourseDetailsList: [], |
| 882 | editedIndex: -1, | 882 | editedIndex: -1, |
| 883 | editedItem: {}, | 883 | editedItem: {}, |
| 884 | editedCourse: {}, | 884 | editedCourse: {}, |
| 885 | editChapter: { | 885 | editChapter: { |
| 886 | chapterPoints: [], | 886 | chapterPoints: [], |
| 887 | }, | 887 | }, |
| 888 | index: "", | 888 | index: "", |
| 889 | addChapterItem: {}, | 889 | addChapterItem: {}, |
| 890 | addChapterItemObj: {}, | 890 | addChapterItemObj: {}, |
| 891 | addChapterDialog: false, | 891 | addChapterDialog: false, |
| 892 | showData: false, | 892 | showData: false, |
| 893 | }), | 893 | }), |
| 894 | methods: { | 894 | methods: { |
| 895 | openLink(url) { | 895 | openLink(url) { |
| 896 | window.open(url, "_blank"); | 896 | window.open(url, "_blank"); |
| 897 | }, | 897 | }, |
| 898 | getCourses(classId) { | 898 | getCourses(classId) { |
| 899 | this.showLoader = true; | 899 | this.showLoader = true; |
| 900 | this.CourseDetailsList = []; | 900 | this.CourseDetailsList = []; |
| 901 | this.getCourse.courseId = ""; | 901 | this.getCourse.courseId = ""; |
| 902 | http() | 902 | http() |
| 903 | .get("/getCourseesList", { | 903 | .get("/getCourseesList", { |
| 904 | params: { | 904 | params: { |
| 905 | classId: classId, | 905 | classId: classId, |
| 906 | }, | 906 | }, |
| 907 | }) | 907 | }) |
| 908 | .then((response) => { | 908 | .then((response) => { |
| 909 | this.editChapter.courseId = ""; | 909 | this.editChapter.courseId = ""; |
| 910 | this.courseData = response.data.data; | 910 | this.courseData = response.data.data; |
| 911 | // console.log("this.courseData", this.courseData); | 911 | // console.log("this.courseData", this.courseData); |
| 912 | this.showLoader = false; | 912 | this.showLoader = false; |
| 913 | }) | 913 | }) |
| 914 | .catch((err) => { | 914 | .catch((err) => { |
| 915 | // console.log("err====>", err); | 915 | // console.log("err====>", err); |
| 916 | this.showLoader = false; | 916 | this.showLoader = false; |
| 917 | this.snackbar = true; | 917 | this.snackbar = true; |
| 918 | this.color = "error"; | 918 | this.color = "error"; |
| 919 | this.text = error.response.data.message; | 919 | this.text = error.response.data.message; |
| 920 | }); | 920 | }); |
| 921 | }, | 921 | }, |
| 922 | getCourseDetailsList() { | 922 | getCourseDetailsList() { |
| 923 | this.showLoader = true; | 923 | this.showLoader = true; |
| 924 | http() | 924 | http() |
| 925 | .get("/getParticularCourseDetail", { | 925 | .get("/getParticularCourseDetail", { |
| 926 | params: { | 926 | params: { |
| 927 | courseId: this.getCourse.courseId, | 927 | courseId: this.getCourse.courseId, |
| 928 | }, | 928 | }, |
| 929 | }) | 929 | }) |
| 930 | .then((response) => { | 930 | .then((response) => { |
| 931 | this.CourseDetailsList = response.data.data; | 931 | this.CourseDetailsList = response.data.data; |
| 932 | if (this.CourseDetailsList.length === 0) { | 932 | if (this.CourseDetailsList.length === 0) { |
| 933 | this.showLoader = false; | 933 | this.showLoader = false; |
| 934 | this.snackbar = true; | 934 | this.snackbar = true; |
| 935 | this.text = "Data not found!"; | 935 | this.text = "Data not found!"; |
| 936 | this.color = "error"; | 936 | this.color = "error"; |
| 937 | return; | 937 | return; |
| 938 | } | 938 | } |
| 939 | this.showData = true; | 939 | this.showData = true; |
| 940 | if (response.data.data[0]) { | 940 | if (response.data.data[0]) { |
| 941 | this.chapters = response.data.data[0].chapters; | 941 | this.chapters = response.data.data[0].chapters; |
| 942 | } | 942 | } |
| 943 | this.showLoader = false; | 943 | this.showLoader = false; |
| 944 | }) | 944 | }) |
| 945 | .catch((error) => { | 945 | .catch((error) => { |
| 946 | // console.log("err====>", err); | 946 | // console.log("err====>", err); |
| 947 | this.showLoader = false; | 947 | this.showLoader = false; |
| 948 | if (error.response.status === 401) { | 948 | if (error.response.status === 401) { |
| 949 | this.$router.replace({ path: "/" }); | 949 | this.$router.replace({ path: "/" }); |
| 950 | this.$store.dispatch("setToken", null); | 950 | this.$store.dispatch("setToken", null); |
| 951 | this.$store.dispatch("Id", null); | 951 | this.$store.dispatch("Id", null); |
| 952 | } | 952 | } |
| 953 | }); | 953 | }); |
| 954 | }, | 954 | }, |
| 955 | courseTableRow(id) { | 955 | courseTableRow(id) { |
| 956 | this.courseId = id; | 956 | this.courseId = id; |
| 957 | }, | 957 | }, |
| 958 | addChapters(item) { | 958 | addChapters(item) { |
| 959 | this.editedIndex = this.CourseDetailsList.indexOf(item); | 959 | this.editedIndex = this.CourseDetailsList.indexOf(item); |
| 960 | this.addChapterItemObj = Object.assign({}, item); | 960 | this.addChapterItemObj = Object.assign({}, item); |
| 961 | this.addChapterItem.courseDetailId = this.addChapterItemObj._id; | 961 | this.addChapterItem.courseDetailId = this.addChapterItemObj._id; |
| 962 | this.addChapterDialog = true; | 962 | this.addChapterDialog = true; |
| 963 | }, | 963 | }, |
| 964 | submitChapter() { | 964 | submitChapter() { |
| 965 | // console.log("addChapterItem", this.addChapterItem); | 965 | // console.log("addChapterItem", this.addChapterItem); |
| 966 | this.addChapterItem.chapterPoints = []; | 966 | this.addChapterItem.chapterPoints = []; |
| 967 | for (let i = 0; i < this.findsChapterPoint.length; i++) { | 967 | for (let i = 0; i < this.findsChapterPoint.length; i++) { |
| 968 | this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); | 968 | this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); |
| 969 | } | 969 | } |
| 970 | this.addChapterItem.uploadPdf = this.pdfFile; | 970 | this.addChapterItem.uploadPdf = this.pdfFile; |
| 971 | this.addChapterItem.uploadPpt = this.pptFile; | 971 | this.addChapterItem.uploadPpt = this.pptFile; |
| 972 | this.addChapterItem.fileName = this.pdfFileName; | 972 | this.addChapterItem.fileName = this.pdfFileName; |
| 973 | this.loading = true; | 973 | this.loading = true; |
| 974 | http() | 974 | http() |
| 975 | .put("/addChapters", this.addChapterItem) | 975 | .put("/addChapters", this.addChapterItem) |
| 976 | .then((response) => { | 976 | .then((response) => { |
| 977 | this.addChapterDialog = false; | 977 | this.addChapterDialog = false; |
| 978 | this.loading = false; | 978 | this.loading = false; |
| 979 | this.snackbar = true; | 979 | this.snackbar = true; |
| 980 | this.text = response.data.message; | 980 | this.text = response.data.message; |
| 981 | this.color = "green"; | 981 | this.color = "green"; |
| 982 | this.addChapterItem = {}; | 982 | this.addChapterItem = {}; |
| 983 | this.removeChapterPoint(); | 983 | this.removeChapterPoint(); |
| 984 | this.getCourseDetailsList(); | 984 | this.getCourseDetailsList(); |
| 985 | }) | 985 | }) |
| 986 | .catch((error) => { | 986 | .catch((error) => { |
| 987 | this.snackbar = true; | 987 | this.snackbar = true; |
| 988 | this.text = error.response.data.message; | 988 | this.text = error.response.data.message; |
| 989 | this.color = "error"; | 989 | this.color = "error"; |
| 990 | this.loading = false; | 990 | this.loading = false; |
| 991 | }); | 991 | }); |
| 992 | }, | 992 | }, |
| 993 | profile(item) { | 993 | profile(item) { |
| 994 | // console.log("chaper - ", item); | 994 | // console.log("chaper - ", item); |
| 995 | this.editedIndex = this.chapters.indexOf(item); | 995 | this.editedIndex = this.chapters.indexOf(item); |
| 996 | this.editedItem = Object.assign({}, item); | 996 | this.editedItem = Object.assign({}, item); |
| 997 | this.viewProfileGallery = true; | 997 | this.viewProfileGallery = true; |
| 998 | }, | 998 | }, |
| 999 | editItem(item) { | 999 | editItem(item) { |
| 1000 | this.editedIndex = this.CourseDetailsList.indexOf(item); | 1000 | this.editedIndex = this.CourseDetailsList.indexOf(item); |
| 1001 | this.editedCourse = Object.assign({}, item); | 1001 | this.editedCourse = Object.assign({}, item); |
| 1002 | this.editCourseDetailDialog = true; | 1002 | this.editCourseDetailDialog = true; |
| 1003 | }, | 1003 | }, |
| 1004 | editChapterItem(item) { | 1004 | editChapterItem(item) { |
| 1005 | this.editedIndex = this.chapters.indexOf(item); | 1005 | this.editedIndex = this.chapters.indexOf(item); |
| 1006 | this.editChapter = Object.assign({}, item); | 1006 | this.editChapter = Object.assign({}, item); |
| 1007 | this.updates = []; | 1007 | this.updates = []; |
| 1008 | for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { | 1008 | for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { |
| 1009 | this.updates.push({ value: this.editChapter.chapterPoints[i] }); | 1009 | this.updates.push({ value: this.editChapter.chapterPoints[i] }); |
| 1010 | } | 1010 | } |
| 1011 | this.editChapterDetailDialog = true; | 1011 | this.editChapterDetailDialog = true; |
| 1012 | }, | 1012 | }, |
| 1013 | deleteItem(item) { | 1013 | deleteItem(item) { |
| 1014 | let deleteGallery = { | 1014 | let deleteGallery = { |
| 1015 | courseDetailId: item._id, | 1015 | courseDetailId: item._id, |
| 1016 | }; | 1016 | }; |
| 1017 | http() | 1017 | http() |
| 1018 | .delete( | 1018 | .delete( |
| 1019 | "/deleteCourseDetail", | 1019 | "/deleteCourseDetail", |
| 1020 | confirm("Are you sure you want to delete this?") && { | 1020 | confirm("Are you sure you want to delete this?") && { |
| 1021 | params: deleteGallery, | 1021 | params: deleteGallery, |
| 1022 | headers: { | 1022 | headers: { |
| 1023 | Authorization: "Bearer " + this.token, | 1023 | Authorization: "Bearer " + this.token, |
| 1024 | }, | 1024 | }, |
| 1025 | } | 1025 | } |
| 1026 | ) | 1026 | ) |
| 1027 | .then((response) => { | 1027 | .then((response) => { |
| 1028 | this.snackbar = true; | 1028 | this.snackbar = true; |
| 1029 | this.text = "Successfully delete Course Details"; | 1029 | this.text = "Successfully delete Course Details"; |
| 1030 | this.color = "green"; | 1030 | this.color = "green"; |
| 1031 | this.getCourseDetailsList(); | 1031 | this.getCourseDetailsList(); |
| 1032 | }) | 1032 | }) |
| 1033 | .catch((error) => { | 1033 | .catch((error) => { |
| 1034 | // console.log(error); | 1034 | // console.log(error); |
| 1035 | this.snackbar = true; | 1035 | this.snackbar = true; |
| 1036 | this.text = error.response.data.message; | 1036 | this.text = error.response.data.message; |
| 1037 | this.color = "error"; | 1037 | this.color = "error"; |
| 1038 | }); | 1038 | }); |
| 1039 | }, | 1039 | }, |
| 1040 | deleteChapters(item) { | 1040 | deleteChapters(item) { |
| 1041 | // console.log("item", item); | 1041 | // console.log("item", item); |
| 1042 | let deleteChapters = { | 1042 | let deleteChapters = { |
| 1043 | courseDetailId: this.courseId, | 1043 | courseDetailId: this.courseId, |
| 1044 | chapterId: item._id, | 1044 | chapterId: item._id, |
| 1045 | }; | 1045 | }; |
| 1046 | http() | 1046 | http() |
| 1047 | .put( | 1047 | .put( |
| 1048 | "/deleteChapters", | 1048 | "/deleteChapters", |
| 1049 | confirm("Are you sure you want to delete this?") && deleteChapters | 1049 | confirm("Are you sure you want to delete this?") && deleteChapters |
| 1050 | ) | 1050 | ) |
| 1051 | .then((response) => { | 1051 | .then((response) => { |
| 1052 | this.snackbar = true; | 1052 | this.snackbar = true; |
| 1053 | this.text = "Successfully delete Chapters"; | 1053 | this.text = "Successfully delete Chapters"; |
| 1054 | this.color = "green"; | 1054 | this.color = "green"; |
| 1055 | this.getCourseDetailsList(); | 1055 | this.getCourseDetailsList(); |
| 1056 | }) | 1056 | }) |
| 1057 | .catch((error) => { | 1057 | .catch((error) => { |
| 1058 | // console.log(error); | 1058 | // console.log(error); |
| 1059 | this.snackbar = true; | 1059 | this.snackbar = true; |
| 1060 | this.text = error.response.data.message; | 1060 | this.text = error.response.data.message; |
| 1061 | this.color = "error"; | 1061 | this.color = "error"; |
| 1062 | }); | 1062 | }); |
| 1063 | }, | 1063 | }, |
| 1064 | close() { | 1064 | close() { |
| 1065 | this.editCourseDetailDialog = false; | 1065 | this.editCourseDetailDialog = false; |
| 1066 | }, | 1066 | }, |
| 1067 | closeProfileGallery() { | 1067 | closeProfileGallery() { |
| 1068 | this.viewProfileGallery = false; | 1068 | this.viewProfileGallery = false; |
| 1069 | }, | 1069 | }, |
| 1070 | submit() { | 1070 | submit() { |
| 1071 | let chapters = []; | 1071 | let chapters = []; |
| 1072 | var chapterPoints = []; | 1072 | var chapterPoints = []; |
| 1073 | for (let i = 0; i < this.finds.length; i++) { | 1073 | for (let i = 0; i < this.finds.length; i++) { |
| 1074 | chapterPoints.push(this.finds[i].value); | 1074 | chapterPoints.push(this.finds[i].value); |
| 1075 | // console.log("this.finds[i].value", this.finds[i].value); | 1075 | // console.log("this.finds[i].value", this.finds[i].value); |
| 1076 | chapters = [ | 1076 | chapters = [ |
| 1077 | { | 1077 | { |
| 1078 | chapterName: this.addCourseDetail.chapterName, | 1078 | chapterName: this.addCourseDetail.chapterName, |
| 1079 | description: this.addCourseDetail.description, | 1079 | description: this.addCourseDetail.description, |
| 1080 | chapterPoints: chapterPoints, | 1080 | chapterPoints: chapterPoints, |
| 1081 | uploadPdf: this.pdfFile, | 1081 | uploadPdf: this.pdfFile, |
| 1082 | uploadPpt: this.pptFile, | 1082 | uploadPpt: this.pptFile, |
| 1083 | fileName: this.pdfFileName, | 1083 | fileName: this.pdfFileName, |
| 1084 | }, | 1084 | }, |
| 1085 | ]; | 1085 | ]; |
| 1086 | } | 1086 | } |
| 1087 | if (this.$refs.form.validate()) { | 1087 | if (this.$refs.form.validate()) { |
| 1088 | // console.log("this.addCourseDetail", this.addCourseDetail); | 1088 | // console.log("this.addCourseDetail", this.addCourseDetail); |
| 1089 | var courseDetailsData = { | 1089 | var courseDetailsData = { |
| 1090 | classId: this.addCourseDetail.classId, | 1090 | classId: this.addCourseDetail.classId, |
| 1091 | courseId: this.addCourseDetail.courseId, | 1091 | courseId: this.addCourseDetail.courseId, |
| 1092 | chapters: chapters, | 1092 | chapters: chapters, |
| 1093 | }; | 1093 | }; |
| 1094 | this.loading = true; | 1094 | this.loading = true; |
| 1095 | http() | 1095 | http() |
| 1096 | .post("/createCourseDetail", courseDetailsData) | 1096 | .post("/createCourseDetail", courseDetailsData) |
| 1097 | .then((response) => { | 1097 | .then((response) => { |
| 1098 | this.addCourseDetailDialog = false; | 1098 | this.addCourseDetailDialog = false; |
| 1099 | this.loading = false; | 1099 | this.loading = false; |
| 1100 | this.snackbar = true; | 1100 | this.snackbar = true; |
| 1101 | this.text = response.data.message; | 1101 | this.text = response.data.message; |
| 1102 | this.color = "green"; | 1102 | this.color = "green"; |
| 1103 | // this.clear(); | 1103 | // this.clear(); |
| 1104 | this.trigger = "reset"; | 1104 | this.trigger = "reset"; |
| 1105 | this.emptyPdf = "reset"; | 1105 | this.emptyPdf = "reset"; |
| 1106 | http() | 1106 | http() |
| 1107 | .get("/getParticularCourseDetail", { | 1107 | .get("/getParticularCourseDetail", { |
| 1108 | params: { | 1108 | params: { |
| 1109 | courseId: this.addCourseDetail.courseId, | 1109 | courseId: this.addCourseDetail.courseId, |
| 1110 | }, | 1110 | }, |
| 1111 | }) | 1111 | }) |
| 1112 | .then((response) => { | 1112 | .then((response) => { |
| 1113 | this.CourseDetailsList = response.data.data; | 1113 | this.CourseDetailsList = response.data.data; |
| 1114 | if (this.CourseDetailsList.length === 0) { | 1114 | if (this.CourseDetailsList.length === 0) { |
| 1115 | this.showLoader = false; | 1115 | this.showLoader = false; |
| 1116 | this.snackbar = true; | 1116 | this.snackbar = true; |
| 1117 | this.text = "Data not found!"; | 1117 | this.text = "Data not found!"; |
| 1118 | this.color = "error"; | 1118 | this.color = "error"; |
| 1119 | return; | 1119 | return; |
| 1120 | } | 1120 | } |
| 1121 | this.showData = true; | 1121 | this.showData = true; |
| 1122 | if (response.data.data[0]) { | 1122 | if (response.data.data[0]) { |
| 1123 | this.chapters = response.data.data[0].chapters; | 1123 | this.chapters = response.data.data[0].chapters; |
| 1124 | } | 1124 | } |
| 1125 | this.showLoader = false; | 1125 | this.showLoader = false; |
| 1126 | }) | 1126 | }) |
| 1127 | .catch((error) => { | 1127 | .catch((error) => { |
| 1128 | // console.log("err====>", err); | 1128 | // console.log("err====>", err); |
| 1129 | this.showLoader = false; | 1129 | this.showLoader = false; |
| 1130 | if (error.response.status === 401) { | 1130 | if (error.response.status === 401) { |
| 1131 | this.$router.replace({ path: "/" }); | 1131 | this.$router.replace({ path: "/" }); |
| 1132 | this.$store.dispatch("setToken", null); | 1132 | this.$store.dispatch("setToken", null); |
| 1133 | this.$store.dispatch("Id", null); | 1133 | this.$store.dispatch("Id", null); |
| 1134 | } | 1134 | } |
| 1135 | }); | 1135 | }); |
| 1136 | this.removeAddFind(); | 1136 | this.removeAddFind(); |
| 1137 | }) | 1137 | }) |
| 1138 | .catch((error) => { | 1138 | .catch((error) => { |
| 1139 | this.snackbar = true; | 1139 | this.snackbar = true; |
| 1140 | this.text = error.response.data.message; | 1140 | this.text = error.response.data.message; |
| 1141 | this.color = "error"; | 1141 | this.color = "error"; |
| 1142 | this.loading = false; | 1142 | this.loading = false; |
| 1143 | }); | 1143 | }); |
| 1144 | } | 1144 | } |
| 1145 | }, | 1145 | }, |
| 1146 | clear() { | 1146 | clear() { |
| 1147 | this.$refs.form.reset(); | 1147 | this.$refs.form.reset(); |
| 1148 | }, | 1148 | }, |
| 1149 | saveChapter() { | 1149 | saveChapter() { |
| 1150 | this.editedItem.courseDetailId = this.editedItem._id; | 1150 | this.editedItem.courseDetailId = this.editedItem._id; |
| 1151 | // console.log("this.updates", this.updates); | 1151 | // console.log("this.updates", this.updates); |
| 1152 | var chapterPoints = []; | 1152 | var chapterPoints = []; |
| 1153 | for (let i = 0; i < this.updates.length; i++) { | 1153 | for (let i = 0; i < this.updates.length; i++) { |
| 1154 | chapterPoints.push(this.updates[i].value); | 1154 | chapterPoints.push(this.updates[i].value); |
| 1155 | } | 1155 | } |
| 1156 | var updateData = { | 1156 | var updateData = { |
| 1157 | courseDetailId: this.courseId, | 1157 | courseDetailId: this.courseId, |
| 1158 | chapterId: this.editChapter._id, | 1158 | chapterId: this.editChapter._id, |
| 1159 | chapterName: this.editChapter.chapterName, | 1159 | chapterName: this.editChapter.chapterName, |
| 1160 | description: this.editChapter.description, | 1160 | description: this.editChapter.description, |
| 1161 | chapterPoints: chapterPoints, | 1161 | chapterPoints: chapterPoints, |
| 1162 | uploadPdf: this.pdfFile, | 1162 | uploadPdf: this.pdfFile, |
| 1163 | uploadPpt: this.pptFile, | 1163 | uploadPpt: this.pptFile, |
| 1164 | fileName: this.pdfFileName, | 1164 | fileName: this.pdfFileName, |
| 1165 | }; | 1165 | }; |
| 1166 | this.editLoading = true; | 1166 | this.editLoading = true; |
| 1167 | http() | 1167 | http() |
| 1168 | .put("/updateChapters", updateData) | 1168 | .put("/updateChapters", updateData) |
| 1169 | .then((response) => { | 1169 | .then((response) => { |
| 1170 | this.editChapterDetailDialog = false; | 1170 | this.editChapterDetailDialog = false; |
| 1171 | this.snackbar = true; | 1171 | this.snackbar = true; |
| 1172 | this.text = response.data.message; | 1172 | this.text = response.data.message; |
| 1173 | this.color = "green"; | 1173 | this.color = "green"; |
| 1174 | this.editLoading = false; | 1174 | this.editLoading = false; |
| 1175 | // this.removeUpdatePoints(); | 1175 | // this.removeUpdatePoints(); |
| 1176 | this.trigger = "reset"; | 1176 | this.trigger = "reset"; |
| 1177 | this.emptyPdf = "reset"; | 1177 | this.emptyPdf = "reset"; |
| 1178 | http() | 1178 | http() |
| 1179 | .get("/getParticularCourseDetail", { | 1179 | .get("/getParticularCourseDetail", { |
| 1180 | params: { | 1180 | params: { |
| 1181 | courseId: this.getCourse.courseId, | 1181 | courseId: this.getCourse.courseId, |
| 1182 | }, | 1182 | }, |
| 1183 | }) | 1183 | }) |
| 1184 | .then((response) => { | 1184 | .then((response) => { |
| 1185 | this.CourseDetailsList = response.data.data; | 1185 | this.CourseDetailsList = response.data.data; |
| 1186 | if (this.CourseDetailsList.length === 0) { | 1186 | if (this.CourseDetailsList.length === 0) { |
| 1187 | this.showLoader = false; | 1187 | this.showLoader = false; |
| 1188 | this.snackbar = true; | 1188 | this.snackbar = true; |
| 1189 | this.text = "Data not found!"; | 1189 | this.text = "Data not found!"; |
| 1190 | this.color = "error"; | 1190 | this.color = "error"; |
| 1191 | return; | 1191 | return; |
| 1192 | } | 1192 | } |
| 1193 | this.showData = true; | 1193 | this.showData = true; |
| 1194 | if (response.data.data[0]) { | 1194 | if (response.data.data[0]) { |
| 1195 | this.chapters = response.data.data[0].chapters; | 1195 | this.chapters = response.data.data[0].chapters; |
| 1196 | } | 1196 | } |
| 1197 | this.showLoader = false; | 1197 | this.showLoader = false; |
| 1198 | }) | 1198 | }) |
| 1199 | .catch((error) => { | 1199 | .catch((error) => { |
| 1200 | // console.log("err====>", err); | 1200 | // console.log("err====>", err); |
| 1201 | this.showLoader = false; | 1201 | this.showLoader = false; |
| 1202 | if (error.response.status === 401) { | 1202 | if (error.response.status === 401) { |
| 1203 | this.$router.replace({ path: "/" }); | 1203 | this.$router.replace({ path: "/" }); |
| 1204 | this.$store.dispatch("setToken", null); | 1204 | this.$store.dispatch("setToken", null); |
| 1205 | this.$store.dispatch("Id", null); | 1205 | this.$store.dispatch("Id", null); |
| 1206 | } | 1206 | } |
| 1207 | }); | 1207 | }); |
| 1208 | }) | 1208 | }) |
| 1209 | .catch((error) => { | 1209 | .catch((error) => { |
| 1210 | this.editLoading = false; | 1210 | this.editLoading = false; |
| 1211 | this.snackbar = true; | 1211 | this.snackbar = true; |
| 1212 | this.text = error.response.data.message; | 1212 | this.text = error.response.data.message; |
| 1213 | this.color = "error"; | 1213 | this.color = "error"; |
| 1214 | }); | 1214 | }); |
| 1215 | }, | 1215 | }, |
| 1216 | save() { | 1216 | save() { |
| 1217 | var updateData = { | 1217 | var updateData = { |
| 1218 | courseDetailId: this.editedCourse._id, | 1218 | courseDetailId: this.editedCourse._id, |
| 1219 | courseId: this.editedCourse.courseId._id, | 1219 | courseId: this.editedCourse.courseId._id, |
| 1220 | classId: this.editedCourse.classId._id, | 1220 | classId: this.editedCourse.classId._id, |
| 1221 | }; | 1221 | }; |
| 1222 | this.editLoading = true; | 1222 | this.editLoading = true; |
| 1223 | http() | 1223 | http() |
| 1224 | .put("/updateCourseDetail", updateData) | 1224 | .put("/updateCourseDetail", updateData) |
| 1225 | .then((response) => { | 1225 | .then((response) => { |
| 1226 | this.getCourseDetailsList(); | 1226 | this.getCourseDetailsList(); |
| 1227 | this.editCourseDetailDialog = false; | 1227 | this.editCourseDetailDialog = false; |
| 1228 | this.snackbar = true; | 1228 | this.snackbar = true; |
| 1229 | this.text = response.data.message; | 1229 | this.text = response.data.message; |
| 1230 | this.color = "green"; | 1230 | this.color = "green"; |
| 1231 | this.editLoading = false; | 1231 | this.editLoading = false; |
| 1232 | // this.editChapterPointName = ""; | 1232 | // this.editChapterPointName = ""; |
| 1233 | this.editFiles = []; | 1233 | this.editFiles = []; |
| 1234 | }) | 1234 | }) |
| 1235 | .catch((error) => { | 1235 | .catch((error) => { |
| 1236 | this.editLoading = false; | 1236 | this.editLoading = false; |
| 1237 | this.snackbar = true; | 1237 | this.snackbar = true; |
| 1238 | this.text = error.response.data.message; | 1238 | this.text = error.response.data.message; |
| 1239 | this.color = "error"; | 1239 | this.color = "error"; |
| 1240 | }); | 1240 | }); |
| 1241 | }, | 1241 | }, |
| 1242 | getAllClasses() { | 1242 | getAllClasses() { |
| 1243 | http() | 1243 | http() |
| 1244 | .get("/getClassesList", { | 1244 | .get("/getClassesList", { |
| 1245 | headers: { Authorization: "Bearer " + this.token }, | 1245 | headers: { Authorization: "Bearer " + this.token }, |
| 1246 | }) | 1246 | }) |
| 1247 | .then((response) => { | 1247 | .then((response) => { |
| 1248 | this.addclass = response.data.data; | 1248 | this.addclass = response.data.data; |
| 1249 | }) | 1249 | }) |
| 1250 | .catch((err) => { | 1250 | .catch((err) => { |
| 1251 | // console.log("err====>", err); | 1251 | // console.log("err====>", err); |
| 1252 | }); | 1252 | }); |
| 1253 | }, | 1253 | }, |
| 1254 | removeChapterPoint: function () { | 1254 | removeChapterPoint: function () { |
| 1255 | this.findsChapterPoint = [{ value: "" }]; | 1255 | this.findsChapterPoint = [{ value: "" }]; |
| 1256 | }, | 1256 | }, |
| 1257 | removeAddFind: function () { | 1257 | removeAddFind: function () { |
| 1258 | this.finds = [{ value: "" }]; | 1258 | this.finds = [{ value: "" }]; |
| 1259 | }, | 1259 | }, |
| 1260 | addFind: function () { | 1260 | addFind: function () { |
| 1261 | this.finds.push({ value: "" }); | 1261 | this.finds.push({ value: "" }); |
| 1262 | }, | 1262 | }, |
| 1263 | addChapterPoint: function () { | 1263 | addChapterPoint: function () { |
| 1264 | this.findsChapterPoint.push({ value: "" }); | 1264 | this.findsChapterPoint.push({ value: "" }); |
| 1265 | }, | 1265 | }, |
| 1266 | update: function () { | 1266 | update: function () { |
| 1267 | this.updates.push({ value: "" }); | 1267 | this.updates.push({ value: "" }); |
| 1268 | }, | 1268 | }, |
| 1269 | // removeUpdatePoints: function() { | 1269 | // removeUpdatePoints: function() { |
| 1270 | // this.updates = [{ value: "" }]; | 1270 | // this.updates = [{ value: "" }]; |
| 1271 | // }, | 1271 | // }, |
| 1272 | deleteFind: function (index) { | 1272 | deleteFind: function (index) { |
| 1273 | this.finds.splice(index, 1); | 1273 | this.finds.splice(index, 1); |
| 1274 | if (index === 0) this.addFind(); | 1274 | if (index === 0) this.addFind(); |
| 1275 | }, | 1275 | }, |
| 1276 | deleteChapterPoint: function (index) { | 1276 | deleteChapterPoint: function (index) { |
| 1277 | this.findsChapterPoint.splice(index, 1); | 1277 | this.findsChapterPoint.splice(index, 1); |
| 1278 | if (index === 0) this.addChapterPoint(); | 1278 | if (index === 0) this.addChapterPoint(); |
| 1279 | }, | 1279 | }, |
| 1280 | deleteUpdate: function (index) { | 1280 | deleteUpdate: function (index) { |
| 1281 | this.updates.splice(index, 1); | 1281 | this.updates.splice(index, 1); |
| 1282 | if (index === 0) this.update(); | 1282 | if (index === 0) this.update(); |
| 1283 | }, | 1283 | }, |
| 1284 | deleteUrl: function (index, youTubelinkId, id) { | 1284 | deleteUrl: function (index, youTubelinkId, id) { |
| 1285 | this.editChapter.chapterPoints.splice(index, 1); | 1285 | this.editChapter.chapterPoints.splice(index, 1); |
| 1286 | if (index === 0) this.update(); | 1286 | if (index === 0) this.update(); |
| 1287 | }, | 1287 | }, |
| 1288 | displaySearch() { | 1288 | displaySearch() { |
| 1289 | this.show = false; | 1289 | this.show = false; |
| 1290 | this.showSearch = true; | 1290 | this.showSearch = true; |
| 1291 | }, | 1291 | }, |
| 1292 | closeSearch() { | 1292 | closeSearch() { |
| 1293 | this.showSearch = false; | 1293 | this.showSearch = false; |
| 1294 | this.show = true; | 1294 | this.show = true; |
| 1295 | this.search = ""; | 1295 | this.search = ""; |
| 1296 | }, | 1296 | }, |
| 1297 | }, | 1297 | }, |
| 1298 | mounted() { | 1298 | mounted() { |
| 1299 | this.token = this.$store.state.token; | 1299 | this.token = this.$store.state.token; |
| 1300 | this.getAllClasses(); | 1300 | this.getAllClasses(); |
| 1301 | }, | 1301 | }, |
| 1302 | }; | 1302 | }; |
| 1303 | </script> | 1303 | </script> |
src/pages/Course/courseDiscussion.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-dialog v-model="editDialog" max-width="600px" scrollable persistent> | 3 | <v-dialog v-model="editDialog" max-width="600px" scrollable persistent> |
| 4 | <v-card flat class="card-style pa-2" dark> | 4 | <v-card flat class="Card-style pa-2"> |
| 5 | <v-layout> | 5 | <v-layout> |
| 6 | <v-flex xs12> | 6 | <v-flex xs12> |
| 7 | <label class="title text-xs-center">Edit Course Discussion</label> | 7 | <label class="title text-xs-center">Edit Course Discussion</label> |
| 8 | <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon> | 8 | <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | </v-layout> | 10 | </v-layout> |
| 11 | <v-card-text> | 11 | <v-card-text> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 16 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> | 16 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> |
| 17 | <img src="/static/icon/user.png" /> | 17 | <img src="/static/icon/user.png" /> |
| 18 | </v-avatar> | 18 | </v-avatar> |
| 19 | <img | 19 | <img |
| 20 | :src="editedItem.attachementUrl" | 20 | :src="editedItem.attachementUrl" |
| 21 | v-else-if="editedItem.attachementUrl && !editImageUrl" | 21 | v-else-if="editedItem.attachementUrl && !editImageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | style="border-radius:50%; width:150px" | 23 | style="border-radius:50%; width:150px" |
| 24 | /> | 24 | /> |
| 25 | <img | 25 | <img |
| 26 | v-if="editImageUrl" | 26 | v-if="editImageUrl" |
| 27 | :src="editImageUrl" | 27 | :src="editImageUrl" |
| 28 | style="border-radius:50%; width:150px;height:150px" | 28 | style="border-radius:50%; width:150px;height:150px" |
| 29 | /> | 29 | /> |
| 30 | <input | 30 | <input |
| 31 | type="file" | 31 | type="file" |
| 32 | style="display: none" | 32 | style="display: none" |
| 33 | ref="editDataImage" | 33 | ref="editDataImage" |
| 34 | accept="image/*" | 34 | accept="image/*" |
| 35 | @change="onEditFilePicked" | 35 | @change="onEditFilePicked" |
| 36 | /> | 36 | /> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | <v-layout wrap> | 39 | <v-layout wrap> |
| 40 | <v-flex xs12 sm12> | 40 | <v-flex xs12 sm12> |
| 41 | <v-layout> | 41 | <v-layout> |
| 42 | <v-flex xs4 sm5 class="pt-4 subheading"> | 42 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 43 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 43 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 44 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 44 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex xs8 sm7 class="ml-3"> | 46 | <v-flex xs8 sm7 class="ml-3"> |
| 47 | <v-select | 47 | <v-select |
| 48 | :items="addclass" | 48 | :items="addclass" |
| 49 | v-model="editedItem.classId" | 49 | v-model="editedItem.classId" |
| 50 | item-text="classNum" | 50 | item-text="classNum" |
| 51 | item-value="_id" | 51 | item-value="_id" |
| 52 | name="Select Class" | 52 | name="Select Class" |
| 53 | required | 53 | required |
| 54 | @change="editGetCourses(editedItem.classId)" | 54 | @change="editGetCourses(editedItem.classId)" |
| 55 | ></v-select> | 55 | ></v-select> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs12 sm12> | 59 | <v-flex xs12 sm12> |
| 60 | <v-layout> | 60 | <v-layout> |
| 61 | <v-flex xs4 sm5 class="pt-4 subheading"> | 61 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 62 | <label class="right">Select Course:</label> | 62 | <label class="right">Select Course:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm7 class="ml-3"> | 64 | <v-flex xs8 sm7 class="ml-3"> |
| 65 | <v-select | 65 | <v-select |
| 66 | :items="editCourseData" | 66 | :items="editCourseData" |
| 67 | label="Select Course" | 67 | label="Select Course" |
| 68 | v-model="editedItem.courseId" | 68 | v-model="editedItem.courseId" |
| 69 | item-text="courseName" | 69 | item-text="courseName" |
| 70 | item-value="_id" | 70 | item-value="_id" |
| 71 | required | 71 | required |
| 72 | class="ml-2" | 72 | class="ml-2" |
| 73 | ></v-select> | 73 | ></v-select> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | </v-layout> | 77 | </v-layout> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs4 sm5 class="pt-4 subheading"> | 79 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 80 | <label class="right">Subject:</label> | 80 | <label class="right">Subject:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs8 sm7 class="ml-3"> | 82 | <v-flex xs8 sm7 class="ml-3"> |
| 83 | <v-text-field v-model="editedItem.subject" type="text" required></v-text-field> | 83 | <v-text-field v-model="editedItem.subject" type="text" required></v-text-field> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 sm5 class="pt-4 subheading"> | 87 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 88 | <label class="right">Description:</label> | 88 | <label class="right">Description:</label> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | <v-flex xs8 sm7 class="ml-3"> | 90 | <v-flex xs8 sm7 class="ml-3"> |
| 91 | <v-text-field v-model="editedItem.description" type="text" required></v-text-field> | 91 | <v-text-field v-model="editedItem.description" type="text" required></v-text-field> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 sm5 class="pt-4 subheading"> | 95 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 96 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 96 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-flex xs8 sm7 class="ml-3"> | 99 | <v-flex xs8 sm7 class="ml-3"> |
| 100 | <v-text-field | 100 | <v-text-field |
| 101 | @click="pickEditFile" | 101 | @click="pickEditFile" |
| 102 | v-model="editImageName" | 102 | v-model="editImageName" |
| 103 | append-icon="attach_file" | 103 | append-icon="attach_file" |
| 104 | ></v-text-field> | 104 | ></v-text-field> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12 sm12 class="px-0 mx-0"> | 110 | <v-flex xs12 sm12 class="px-0 mx-0"> |
| 111 | <v-layout class="right"> | 111 | <v-layout class="right"> |
| 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-form> | 117 | </v-form> |
| 118 | </v-card-text> | 118 | </v-card-text> |
| 119 | </v-card> | 119 | </v-card> |
| 120 | </v-dialog> | 120 | </v-dialog> |
| 121 | <!-- ****** DIsCUSIION TABLE ****** --> | 121 | <!-- ****** DIsCUSIION TABLE ****** --> |
| 122 | <v-toolbar color="transparent" flat> | 122 | <v-toolbar color="transparent" flat> |
| 123 | <v-spacer></v-spacer> | 123 | <v-spacer></v-spacer> |
| 124 | <v-flex xs12 sm4 md2> | 124 | <v-flex xs12 sm4 md2> |
| 125 | <v-select | 125 | <v-select |
| 126 | small | 126 | small |
| 127 | :items="addclass" | 127 | :items="addclass" |
| 128 | label="Select Class" | 128 | label="Select Class" |
| 129 | v-model="getSelectedData.classId" | 129 | v-model="getSelectedData.classId" |
| 130 | item-text="classNum" | 130 | item-text="classNum" |
| 131 | item-value="_id" | 131 | item-value="_id" |
| 132 | name="Select Class" | 132 | name="Select Class" |
| 133 | @change="getCourses(getSelectedData.classId)" | 133 | @change="getCourses(getSelectedData.classId)" |
| 134 | class="mr-2" | 134 | class="mr-2" |
| 135 | required | 135 | required |
| 136 | ></v-select> | 136 | ></v-select> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <v-flex xs12 sm4 md2> | 138 | <v-flex xs12 sm4 md2> |
| 139 | <v-select | 139 | <v-select |
| 140 | :items="courseData" | 140 | :items="courseData" |
| 141 | label="Select Course" | 141 | label="Select Course" |
| 142 | v-model="getSelectedData.courseId" | 142 | v-model="getSelectedData.courseId" |
| 143 | item-text="courseName" | 143 | item-text="courseName" |
| 144 | item-value="_id" | 144 | item-value="_id" |
| 145 | required | 145 | required |
| 146 | class="ml-2" | 146 | class="ml-2" |
| 147 | @change="getCourseDiscussionTable(getSelectedData.courseId)" | 147 | @change="getCourseDiscussionTable(getSelectedData.courseId)" |
| 148 | ></v-select> | 148 | ></v-select> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-card-title class="body-1" v-show="show"> | 150 | <v-card-title class="body-1" v-show="show"> |
| 151 | <v-btn icon large flat @click="displaySearch"> | 151 | <v-btn icon large flat @click="displaySearch"> |
| 152 | <v-avatar size="27"> | 152 | <v-avatar size="27"> |
| 153 | <img src="/static/icon/search.png" alt="icon" /> | 153 | <img src="/static/icon/search.png" alt="icon" /> |
| 154 | </v-avatar> | 154 | </v-avatar> |
| 155 | </v-btn> | 155 | </v-btn> |
| 156 | </v-card-title> | 156 | </v-card-title> |
| 157 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 157 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 158 | <v-layout> | 158 | <v-layout> |
| 159 | <v-text-field | 159 | <v-text-field |
| 160 | autofocus | 160 | autofocus |
| 161 | v-model="search" | 161 | v-model="search" |
| 162 | label="Search" | 162 | label="Search" |
| 163 | prepend-inner-icon="search" | 163 | prepend-inner-icon="search" |
| 164 | color="primary" | 164 | color="primary" |
| 165 | ></v-text-field> | 165 | ></v-text-field> |
| 166 | <v-icon @click="closeSearch" color="error">close</v-icon> | 166 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 167 | </v-layout> | 167 | </v-layout> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-toolbar> | 169 | </v-toolbar> |
| 170 | <v-data-table | 170 | <v-data-table |
| 171 | :headers="headers" | 171 | :headers="headers" |
| 172 | :items="courseDiscussionData" | 172 | :items="courseDiscussionData" |
| 173 | :pagination.sync="pagination" | 173 | :pagination.sync="pagination" |
| 174 | :search="search" | 174 | :search="search" |
| 175 | > | 175 | > |
| 176 | <template slot="items" slot-scope="props"> | 176 | <template slot="items" slot-scope="props"> |
| 177 | <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)"> | 177 | <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)"> |
| 178 | <td class="text-xs-center td td-row"> | 178 | <td class="text-xs-center td td-row"> |
| 179 | <v-avatar size="40"> | 179 | <v-avatar size="40"> |
| 180 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> | 180 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> |
| 181 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> | 181 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> |
| 182 | </v-avatar> | 182 | </v-avatar> |
| 183 | </td> | 183 | </td> |
| 184 | <td class="text-xs-center td td-row">{{ props.item.subject }}</td> | 184 | <td class="text-xs-center td td-row">{{ props.item.subject }}</td> |
| 185 | <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td> | 185 | <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td> |
| 186 | <td class="text-xs-center td td-row">-</td> | 186 | <td class="text-xs-center td td-row">-</td> |
| 187 | <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</td> | 187 | <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</td> |
| 188 | <td class="text-xs-center td td-row"> | 188 | <td class="text-xs-center td td-row"> |
| 189 | <span> | 189 | <span> |
| 190 | <v-tooltip top> | 190 | <v-tooltip top> |
| 191 | <img | 191 | <img |
| 192 | slot="activator" | 192 | slot="activator" |
| 193 | style="cursor:pointer; width:20px; height:18px; " | 193 | style="cursor:pointer; width:20px; height:18px; " |
| 194 | class="mr-3" | 194 | class="mr-3" |
| 195 | @click="editItem(props.item)" | 195 | @click="editItem(props.item)" |
| 196 | src="/static/icon/edit.png" | 196 | src="/static/icon/edit.png" |
| 197 | /> | 197 | /> |
| 198 | <span>Edit</span> | 198 | <span>Edit</span> |
| 199 | </v-tooltip> | 199 | </v-tooltip> |
| 200 | <v-tooltip top> | 200 | <v-tooltip top> |
| 201 | <img | 201 | <img |
| 202 | slot="activator" | 202 | slot="activator" |
| 203 | style="cursor:pointer; width:20px; height:20px; " | 203 | style="cursor:pointer; width:20px; height:20px; " |
| 204 | class="mr-3" | 204 | class="mr-3" |
| 205 | @click="deleteItem(props.item)" | 205 | @click="deleteItem(props.item)" |
| 206 | src="/static/icon/delete.png" | 206 | src="/static/icon/delete.png" |
| 207 | /> | 207 | /> |
| 208 | <span>Delete</span> | 208 | <span>Delete</span> |
| 209 | </v-tooltip> | 209 | </v-tooltip> |
| 210 | </span> | 210 | </span> |
| 211 | </td> | 211 | </td> |
| 212 | </tr> | 212 | </tr> |
| 213 | </template> | 213 | </template> |
| 214 | <v-alert | 214 | <v-alert |
| 215 | slot="no-results" | 215 | slot="no-results" |
| 216 | :value="true" | 216 | :value="true" |
| 217 | color="error" | 217 | color="error" |
| 218 | icon="warning" | 218 | icon="warning" |
| 219 | >Your search for "{{ search }}" found no results.</v-alert> | 219 | >Your search for "{{ search }}" found no results.</v-alert> |
| 220 | </v-data-table> | 220 | </v-data-table> |
| 221 | <v-snackbar | 221 | <v-snackbar |
| 222 | :timeout="timeout" | 222 | :timeout="timeout" |
| 223 | :top="y === 'top'" | 223 | :top="y === 'top'" |
| 224 | :right="x === 'right'" | 224 | :right="x === 'right'" |
| 225 | :vertical="mode === 'vertical'" | 225 | :vertical="mode === 'vertical'" |
| 226 | v-model="snackbar" | 226 | v-model="snackbar" |
| 227 | :color="color" | 227 | :color="color" |
| 228 | >{{ text }}</v-snackbar> | 228 | >{{ text }}</v-snackbar> |
| 229 | <div class="loader" v-if="showLoader"> | 229 | <div class="loader" v-if="showLoader"> |
| 230 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 230 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 231 | </div> | 231 | </div> |
| 232 | </v-container> | 232 | </v-container> |
| 233 | </template> | 233 | </template> |
| 234 | 234 | ||
| 235 | <script> | 235 | <script> |
| 236 | import http from "@/Services/http.js"; | 236 | import http from "@/Services/http.js"; |
| 237 | import moment from "moment"; | 237 | import moment from "moment"; |
| 238 | 238 | ||
| 239 | export default { | 239 | export default { |
| 240 | data: () => ({ | 240 | data: () => ({ |
| 241 | snackbar: false, | 241 | snackbar: false, |
| 242 | y: "top", | 242 | y: "top", |
| 243 | x: "right", | 243 | x: "right", |
| 244 | mode: "", | 244 | mode: "", |
| 245 | timeout: 3000, | 245 | timeout: 3000, |
| 246 | text: "", | 246 | text: "", |
| 247 | color: "", | 247 | color: "", |
| 248 | show: true, | 248 | show: true, |
| 249 | showSearch: false, | 249 | showSearch: false, |
| 250 | showLoader: false, | 250 | showLoader: false, |
| 251 | loading: false, | 251 | loading: false, |
| 252 | date: null, | 252 | date: null, |
| 253 | search: "", | 253 | search: "", |
| 254 | addclass: [], | 254 | addclass: [], |
| 255 | pagination: { | 255 | pagination: { |
| 256 | rowsPerPage: 10, | 256 | rowsPerPage: 10, |
| 257 | }, | 257 | }, |
| 258 | headers: [ | 258 | headers: [ |
| 259 | { | 259 | { |
| 260 | text: "Image", | 260 | text: "Image", |
| 261 | value: "subjattachementUrlect", | 261 | value: "subjattachementUrlect", |
| 262 | sortable: false, | 262 | sortable: false, |
| 263 | align: "center", | 263 | align: "center", |
| 264 | }, | 264 | }, |
| 265 | { | 265 | { |
| 266 | text: "Discussion", | 266 | text: "Discussion", |
| 267 | value: "subject", | 267 | value: "subject", |
| 268 | sortable: false, | 268 | sortable: false, |
| 269 | align: "center", | 269 | align: "center", |
| 270 | }, | 270 | }, |
| 271 | { text: "Started", value: "studentId", sortable: false, align: "center" }, | 271 | { text: "Started", value: "studentId", sortable: false, align: "center" }, |
| 272 | { | 272 | { |
| 273 | text: "Last Post", | 273 | text: "Last Post", |
| 274 | value: "forumThread", | 274 | value: "forumThread", |
| 275 | sortable: false, | 275 | sortable: false, |
| 276 | align: "center", | 276 | align: "center", |
| 277 | }, | 277 | }, |
| 278 | { text: "replies", value: "email", sortable: false, align: "center" }, | 278 | { text: "replies", value: "email", sortable: false, align: "center" }, |
| 279 | { text: "Action", value: "", sortable: false, align: "center" }, | 279 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 280 | ], | 280 | ], |
| 281 | token: "", | 281 | token: "", |
| 282 | selectStudents: { | 282 | selectStudents: { |
| 283 | select: "", | 283 | select: "", |
| 284 | selectSection: "", | 284 | selectSection: "", |
| 285 | }, | 285 | }, |
| 286 | 286 | ||
| 287 | role: "", | 287 | role: "", |
| 288 | schoolRole: "", | 288 | schoolRole: "", |
| 289 | menu: false, | 289 | menu: false, |
| 290 | valid: true, | 290 | valid: true, |
| 291 | 291 | ||
| 292 | getSelectedData: {}, | 292 | getSelectedData: {}, |
| 293 | courseDiscussionData: [], | 293 | courseDiscussionData: [], |
| 294 | courseData: [], | 294 | courseData: [], |
| 295 | editCourseData: [], | 295 | editCourseData: [], |
| 296 | addSection: [], | 296 | addSection: [], |
| 297 | editedItem: {}, | 297 | editedItem: {}, |
| 298 | editDialog: false, | 298 | editDialog: false, |
| 299 | editedIndex: -1, | 299 | editedIndex: -1, |
| 300 | editiImageFile: "", | 300 | editiImageFile: "", |
| 301 | editImageName: "", | 301 | editImageName: "", |
| 302 | editImageUrl: "", | 302 | editImageUrl: "", |
| 303 | editLoading: false, | 303 | editLoading: false, |
| 304 | showData: false, | 304 | showData: false, |
| 305 | }), | 305 | }), |
| 306 | methods: { | 306 | methods: { |
| 307 | // save(date) { | 307 | // save(date) { |
| 308 | // this.$refs.menu.save(date); | 308 | // this.$refs.menu.save(date); |
| 309 | // }, | 309 | // }, |
| 310 | pickEditFile() { | 310 | pickEditFile() { |
| 311 | this.$refs.editDataImage.click(); | 311 | this.$refs.editDataImage.click(); |
| 312 | }, | 312 | }, |
| 313 | onEditFilePicked(e) { | 313 | onEditFilePicked(e) { |
| 314 | // console.log(e); | 314 | // console.log(e); |
| 315 | const files = e.target.files; | 315 | const files = e.target.files; |
| 316 | if (files[0] !== undefined) { | 316 | if (files[0] !== undefined) { |
| 317 | this.editImageName = files[0].name; | 317 | this.editImageName = files[0].name; |
| 318 | // console.log("this.editImageName", this.editImageName); | 318 | // console.log("this.editImageName", this.editImageName); |
| 319 | 319 | ||
| 320 | if (this.editImageName.lastIndexOf(".") <= 0) { | 320 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 321 | return; | 321 | return; |
| 322 | } | 322 | } |
| 323 | const fr = new FileReader(); | 323 | const fr = new FileReader(); |
| 324 | fr.readAsDataURL(files[0]); | 324 | fr.readAsDataURL(files[0]); |
| 325 | fr.addEventListener("load", () => { | 325 | fr.addEventListener("load", () => { |
| 326 | this.editImageUrl = fr.result; | 326 | this.editImageUrl = fr.result; |
| 327 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 327 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 328 | }); | 328 | }); |
| 329 | } else { | 329 | } else { |
| 330 | this.editImageName = ""; | 330 | this.editImageName = ""; |
| 331 | this.editiImageFile = ""; | 331 | this.editiImageFile = ""; |
| 332 | } | 332 | } |
| 333 | }, | 333 | }, |
| 334 | getAllClass() { | 334 | getAllClass() { |
| 335 | http() | 335 | http() |
| 336 | .get("/getClassesList", { | 336 | .get("/getClassesList", { |
| 337 | headers: { Authorization: "Bearer " + this.token }, | 337 | headers: { Authorization: "Bearer " + this.token }, |
| 338 | }) | 338 | }) |
| 339 | .then((response) => { | 339 | .then((response) => { |
| 340 | this.addclass = response.data.data; | 340 | this.addclass = response.data.data; |
| 341 | }) | 341 | }) |
| 342 | .catch((error) => { | 342 | .catch((error) => { |
| 343 | // console.log("err====>", err); | 343 | // console.log("err====>", err); |
| 344 | // this.$router.replace({ path: "/" }); | 344 | // this.$router.replace({ path: "/" }); |
| 345 | }); | 345 | }); |
| 346 | }, | 346 | }, |
| 347 | getCourses(classId) { | 347 | getCourses(classId) { |
| 348 | this.showLoader = true; | 348 | this.showLoader = true; |
| 349 | http() | 349 | http() |
| 350 | .get("/getCourseesList", { | 350 | .get("/getCourseesList", { |
| 351 | params: { | 351 | params: { |
| 352 | classId: classId, | 352 | classId: classId, |
| 353 | }, | 353 | }, |
| 354 | }) | 354 | }) |
| 355 | .then((response) => { | 355 | .then((response) => { |
| 356 | this.courseData = response.data.data; | 356 | this.courseData = response.data.data; |
| 357 | this.showLoader = false; | 357 | this.showLoader = false; |
| 358 | }) | 358 | }) |
| 359 | .catch((err) => { | 359 | .catch((err) => { |
| 360 | // console.log("err====>", err); | 360 | // console.log("err====>", err); |
| 361 | this.showLoader = false; | 361 | this.showLoader = false; |
| 362 | this.snackbar = true; | 362 | this.snackbar = true; |
| 363 | this.color = "error"; | 363 | this.color = "error"; |
| 364 | this.text = error.response.data.message; | 364 | this.text = error.response.data.message; |
| 365 | }); | 365 | }); |
| 366 | }, | 366 | }, |
| 367 | editGetCourses(classId) { | 367 | editGetCourses(classId) { |
| 368 | this.showLoader = true; | 368 | this.showLoader = true; |
| 369 | http() | 369 | http() |
| 370 | .get("/getCourseesList", { | 370 | .get("/getCourseesList", { |
| 371 | params: { | 371 | params: { |
| 372 | classId: classId, | 372 | classId: classId, |
| 373 | }, | 373 | }, |
| 374 | }) | 374 | }) |
| 375 | .then((response) => { | 375 | .then((response) => { |
| 376 | this.editCourseData = response.data.data; | 376 | this.editCourseData = response.data.data; |
| 377 | this.showLoader = false; | 377 | this.showLoader = false; |
| 378 | }) | 378 | }) |
| 379 | .catch((err) => { | 379 | .catch((err) => { |
| 380 | // console.log("err====>", err); | 380 | // console.log("err====>", err); |
| 381 | this.showLoader = false; | 381 | this.showLoader = false; |
| 382 | this.snackbar = true; | 382 | this.snackbar = true; |
| 383 | this.color = "error"; | 383 | this.color = "error"; |
| 384 | this.text = error.response.data.message; | 384 | this.text = error.response.data.message; |
| 385 | }); | 385 | }); |
| 386 | }, | 386 | }, |
| 387 | getCourseDiscussionTable(id) { | 387 | getCourseDiscussionTable(id) { |
| 388 | // console.log("id", this.getSelectedData.courseId); | 388 | // console.log("id", this.getSelectedData.courseId); |
| 389 | this.showLoader = true; | 389 | this.showLoader = true; |
| 390 | http() | 390 | http() |
| 391 | .get("/getCourseDiscussionesList", { | 391 | .get("/getCourseDiscussionesList", { |
| 392 | params: { | 392 | params: { |
| 393 | classId: this.getSelectedData.classId, | 393 | classId: this.getSelectedData.classId, |
| 394 | courseId: id, | 394 | courseId: id, |
| 395 | }, | 395 | }, |
| 396 | }) | 396 | }) |
| 397 | .then((response) => { | 397 | .then((response) => { |
| 398 | // console.log("response", response.data.data); | 398 | // console.log("response", response.data.data); |
| 399 | this.courseDiscussionData = response.data.data; | 399 | this.courseDiscussionData = response.data.data; |
| 400 | if (this.courseDiscussionData.length === 0) { | 400 | if (this.courseDiscussionData.length === 0) { |
| 401 | this.showLoader = false; | 401 | this.showLoader = false; |
| 402 | this.snackbar = true; | 402 | this.snackbar = true; |
| 403 | this.text = "Data not found!"; | 403 | this.text = "Data not found!"; |
| 404 | this.color = "error"; | 404 | this.color = "error"; |
| 405 | return; | 405 | return; |
| 406 | } | 406 | } |
| 407 | this.showData = true; | 407 | this.showData = true; |
| 408 | this.showLoader = false; | 408 | this.showLoader = false; |
| 409 | }) | 409 | }) |
| 410 | .catch((error) => { | 410 | .catch((error) => { |
| 411 | // console.log("err====>", error); | 411 | // console.log("err====>", error); |
| 412 | this.showLoader = false; | 412 | this.showLoader = false; |
| 413 | this.snackbar = true; | 413 | this.snackbar = true; |
| 414 | this.color = "error"; | 414 | this.color = "error"; |
| 415 | this.text = error.response.data.message; | 415 | this.text = error.response.data.message; |
| 416 | }); | 416 | }); |
| 417 | }, | 417 | }, |
| 418 | rowCourseDiscussion(id) { | 418 | rowCourseDiscussion(id) { |
| 419 | this.$router.push({ | 419 | this.$router.push({ |
| 420 | name: "Course Discussiones Fourm", | 420 | name: "Course Discussiones Fourm", |
| 421 | params: { discussionId: id }, | 421 | params: { discussionId: id }, |
| 422 | }); | 422 | }); |
| 423 | }, | 423 | }, |
| 424 | editItem(item) { | 424 | editItem(item) { |
| 425 | this.editedIndex = this.courseDiscussionData.indexOf(item); | 425 | this.editedIndex = this.courseDiscussionData.indexOf(item); |
| 426 | this.editedItem = Object.assign({}, item); | 426 | this.editedItem = Object.assign({}, item); |
| 427 | this.editDialog = true; | 427 | this.editDialog = true; |
| 428 | }, | 428 | }, |
| 429 | save() { | 429 | save() { |
| 430 | // console.log("this.editedItem", this.editedItem); | 430 | // console.log("this.editedItem", this.editedItem); |
| 431 | let editCourseDiscuss = { | 431 | let editCourseDiscuss = { |
| 432 | courseDiscussionId: this.editedItem._id, | 432 | courseDiscussionId: this.editedItem._id, |
| 433 | courseId: this.editedItem.courseId, | 433 | courseId: this.editedItem.courseId, |
| 434 | studentId: this.editedItem.studentId._id, | 434 | studentId: this.editedItem.studentId._id, |
| 435 | subject: this.editedItem.subject, | 435 | subject: this.editedItem.subject, |
| 436 | description: this.editedItem.description, | 436 | description: this.editedItem.description, |
| 437 | }; | 437 | }; |
| 438 | if (this.editedItem.classId._id) { | 438 | if (this.editedItem.classId._id) { |
| 439 | editCourseDiscuss.classId = this.editedItem.classId._id; | 439 | editCourseDiscuss.classId = this.editedItem.classId._id; |
| 440 | } | 440 | } |
| 441 | if (!this.editedItem.classId._id) { | 441 | if (!this.editedItem.classId._id) { |
| 442 | editCourseDiscuss.classId = this.editedItem.classId; | 442 | editCourseDiscuss.classId = this.editedItem.classId; |
| 443 | } | 443 | } |
| 444 | if (this.editImageUrl) { | 444 | if (this.editImageUrl) { |
| 445 | var str = this.editImageUrl; | 445 | var str = this.editImageUrl; |
| 446 | const [baseUrl, editImageUrl] = str.split(/,/); | 446 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 447 | editCourse.upload = editImageUrl; | 447 | editCourse.upload = editImageUrl; |
| 448 | } | 448 | } |
| 449 | this.editLoading = true; | 449 | this.editLoading = true; |
| 450 | http() | 450 | http() |
| 451 | .put("/updateCourseDiscussion", editCourseDiscuss) | 451 | .put("/updateCourseDiscussion", editCourseDiscuss) |
| 452 | .then((response) => { | 452 | .then((response) => { |
| 453 | this.snackbar = true; | 453 | this.snackbar = true; |
| 454 | this.text = response.data.message; | 454 | this.text = response.data.message; |
| 455 | this.color = "green"; | 455 | this.color = "green"; |
| 456 | this.imageUrl = ""; | 456 | this.imageUrl = ""; |
| 457 | this.getCourseDiscussionTable(); | 457 | this.getCourseDiscussionTable(); |
| 458 | this.editDialog = false; | 458 | this.editDialog = false; |
| 459 | this.editLoading = false; | 459 | this.editLoading = false; |
| 460 | }) | 460 | }) |
| 461 | .catch((error) => { | 461 | .catch((error) => { |
| 462 | this.editLoading = false; | 462 | this.editLoading = false; |
| 463 | this.snackbar = true; | 463 | this.snackbar = true; |
| 464 | this.text = error.response.data.statusText; | 464 | this.text = error.response.data.statusText; |
| 465 | this.color = "error"; | 465 | this.color = "error"; |
| 466 | }); | 466 | }); |
| 467 | }, | 467 | }, |
| 468 | deleteItem(item) { | 468 | deleteItem(item) { |
| 469 | let deleteCourseDiscussion = { | 469 | let deleteCourseDiscussion = { |
| 470 | courseDiscussionId: item._id, | 470 | courseDiscussionId: item._id, |
| 471 | }; | 471 | }; |
| 472 | http() | 472 | http() |
| 473 | .delete( | 473 | .delete( |
| 474 | "/deleteCourseDiscussion", | 474 | "/deleteCourseDiscussion", |
| 475 | confirm("Are you sure you want to delete this?") && { | 475 | confirm("Are you sure you want to delete this?") && { |
| 476 | params: deleteCourseDiscussion, | 476 | params: deleteCourseDiscussion, |
| 477 | } | 477 | } |
| 478 | ) | 478 | ) |
| 479 | .then((response) => { | 479 | .then((response) => { |
| 480 | this.snackbar = true; | 480 | this.snackbar = true; |
| 481 | this.text = response.data.message; | 481 | this.text = response.data.message; |
| 482 | this.color = "green"; | 482 | this.color = "green"; |
| 483 | this.getCourseDiscussionTable(); | 483 | this.getCourseDiscussionTable(); |
| 484 | }) | 484 | }) |
| 485 | .catch((error) => { | 485 | .catch((error) => { |
| 486 | this.snackbar = true; | 486 | this.snackbar = true; |
| 487 | this.text = error.response.data.message; | 487 | this.text = error.response.data.message; |
| 488 | this.color = "error"; | 488 | this.color = "error"; |
| 489 | }); | 489 | }); |
| 490 | }, | 490 | }, |
| 491 | displaySearch() { | 491 | displaySearch() { |
| 492 | this.show = false; | 492 | this.show = false; |
| 493 | this.showSearch = true; | 493 | this.showSearch = true; |
| 494 | }, | 494 | }, |
| 495 | closeSearch() { | 495 | closeSearch() { |
| 496 | this.showSearch = false; | 496 | this.showSearch = false; |
| 497 | this.show = true; | 497 | this.show = true; |
| 498 | this.search = ""; | 498 | this.search = ""; |
| 499 | }, | 499 | }, |
| 500 | }, | 500 | }, |
| 501 | mounted() { | 501 | mounted() { |
| 502 | // this.getStudentList(); | 502 | // this.getStudentList(); |
| 503 | this.token = this.$store.state.token; | 503 | this.token = this.$store.state.token; |
| 504 | this.role = this.$store.state.role; | 504 | this.role = this.$store.state.role; |
| 505 | this.getAllClass(); | 505 | this.getAllClass(); |
| 506 | }, | 506 | }, |
| 507 | }; | 507 | }; |
| 508 | </script> | 508 | </script> |
| 509 | 509 | ||
| 510 | <style> | 510 | <style> |
| 511 | .row-click { | 511 | .row-click { |
| 512 | cursor: pointer !important; | 512 | cursor: pointer !important; |
| 513 | } | 513 | } |
| 514 | </style> | 514 | </style> |
src/pages/Exam/exam.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT EXAM ****** --> | 3 | <!-- ****** EDIT EXAM ****** --> |
| 4 | <v-dialog v-model="editExamDialog" max-width="600px" scrollable persistent> | 4 | <v-dialog v-model="editExamDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Exam</label> | 8 | <label class="title text-xs-center">Edit Exam</label> |
| 9 | <v-icon size="24" class="right" @click="editExamDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExamDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12> | 16 | <v-flex xs12 sm12> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right">Exam Name:</label> | 19 | <label class="right">Exam Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-text-field | 22 | <v-text-field |
| 23 | placeholder="fill your Serial Number" | 23 | placeholder="fill your Serial Number" |
| 24 | v-model="editedItem.examName" | 24 | v-model="editedItem.examName" |
| 25 | type="text" | 25 | type="text" |
| 26 | ></v-text-field> | 26 | ></v-text-field> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Date:</label> | 33 | <label class="right">Date:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 class="ml-3"> | 35 | <v-flex xs7 class="ml-3"> |
| 36 | <v-menu | 36 | <v-menu |
| 37 | ref="menu1" | 37 | ref="menu1" |
| 38 | :close-on-content-click="false" | 38 | :close-on-content-click="false" |
| 39 | v-model="menu1" | 39 | v-model="menu1" |
| 40 | :nudge-right="40" | 40 | :nudge-right="40" |
| 41 | :return-value.sync="menu1" | 41 | :return-value.sync="menu1" |
| 42 | lazy | 42 | lazy |
| 43 | transition="scale-transition" | 43 | transition="scale-transition" |
| 44 | offset-y | 44 | offset-y |
| 45 | full-width | 45 | full-width |
| 46 | min-width="290px" | 46 | min-width="290px" |
| 47 | > | 47 | > |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | slot="activator" | 49 | slot="activator" |
| 50 | v-model="editedItem.date" | 50 | v-model="editedItem.date" |
| 51 | label="Select Date" | 51 | label="Select Date" |
| 52 | append-icon="event" | 52 | append-icon="event" |
| 53 | readonly | 53 | readonly |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> | 55 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> |
| 56 | </v-menu> | 56 | </v-menu> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Note:</label> | 63 | <label class="right">Note:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Serial Number" | 67 | placeholder="fill your Serial Number" |
| 68 | v-model="editedItem.note" | 68 | v-model="editedItem.note" |
| 69 | type="text" | 69 | type="text" |
| 70 | ></v-text-field> | 70 | ></v-text-field> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs12> | 76 | <v-flex xs12> |
| 77 | <v-card-actions> | 77 | <v-card-actions> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 80 | </v-card-actions> | 80 | </v-card-actions> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | </v-container> | 83 | </v-container> |
| 84 | </v-form> | 84 | </v-form> |
| 85 | </v-card-text> | 85 | </v-card-text> |
| 86 | </v-card> | 86 | </v-card> |
| 87 | </v-dialog> | 87 | </v-dialog> |
| 88 | 88 | ||
| 89 | <!-- ****** PROFILE VIEW PARTICULAR EXAM ****** --> | 89 | <!-- ****** PROFILE VIEW PARTICULAR EXAM ****** --> |
| 90 | 90 | ||
| 91 | <v-dialog v-model="profileExamDialog" max-width="500px" persistent> | 91 | <v-dialog v-model="profileExamDialog" max-width="500px" persistent> |
| 92 | <v-card flat class="card-style pa-3" dark> | 92 | <v-card flat class="Card-style pa-3"> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs12> | 94 | <v-flex xs12> |
| 95 | <label class="title text-xs-center">View Exam</label> | 95 | <label class="title text-xs-center">View Exam</label> |
| 96 | <v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon> | 96 | <v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | <v-card-text> | 99 | <v-card-text> |
| 100 | <v-container grid-list-md> | 100 | <v-container grid-list-md> |
| 101 | <v-layout wrap> | 101 | <v-layout wrap> |
| 102 | <v-flex> | 102 | <v-flex> |
| 103 | <v-layout> | 103 | <v-layout> |
| 104 | <v-flex xs6 sm4> | 104 | <v-flex xs6 sm4> |
| 105 | <h5 class="right my-1"> | 105 | <h5 class="right my-1"> |
| 106 | <b>Exam Name:</b> | 106 | <b>Exam Name:</b> |
| 107 | </h5> | 107 | </h5> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex sm8 xs6> | 109 | <v-flex sm8 xs6> |
| 110 | <h5 class="my-1">{{ editedItem.examName }}</h5> | 110 | <h5 class="my-1">{{ editedItem.examName }}</h5> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs6 sm4> | 114 | <v-flex xs6 sm4> |
| 115 | <h5 class="right my-1"> | 115 | <h5 class="right my-1"> |
| 116 | <b>Date:</b> | 116 | <b>Date:</b> |
| 117 | </h5> | 117 | </h5> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-flex sm8 xs6> | 119 | <v-flex sm8 xs6> |
| 120 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 120 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-flex xs6 sm4> | 124 | <v-flex xs6 sm4> |
| 125 | <h5 class="right my-1"> | 125 | <h5 class="right my-1"> |
| 126 | <b>Note:</b> | 126 | <b>Note:</b> |
| 127 | </h5> | 127 | </h5> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | <v-flex sm8 xs6> | 129 | <v-flex sm8 xs6> |
| 130 | <h5 class="my-1">{{ editedItem.note }}</h5> | 130 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | </v-container> | 135 | </v-container> |
| 136 | </v-card-text> | 136 | </v-card-text> |
| 137 | </v-card> | 137 | </v-card> |
| 138 | </v-dialog> | 138 | </v-dialog> |
| 139 | <!-- ****** EXAM TABLE****** --> | 139 | <!-- ****** EXAM TABLE****** --> |
| 140 | 140 | ||
| 141 | <v-toolbar color="transparent" flat> | 141 | <v-toolbar color="transparent" flat> |
| 142 | <v-btn | 142 | <v-btn |
| 143 | fab | 143 | fab |
| 144 | dark | 144 | dark |
| 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 146 | small | 146 | small |
| 147 | @click="addExamDialog = true" | 147 | @click="addExamDialog = true" |
| 148 | > | 148 | > |
| 149 | <v-icon dark>add</v-icon> | 149 | <v-icon dark>add</v-icon> |
| 150 | </v-btn> | 150 | </v-btn> |
| 151 | <v-btn | 151 | <v-btn |
| 152 | round | 152 | round |
| 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 154 | dark | 154 | dark |
| 155 | @click="addExamDialog = true" | 155 | @click="addExamDialog = true" |
| 156 | > | 156 | > |
| 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam | 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam |
| 158 | </v-btn> | 158 | </v-btn> |
| 159 | <v-spacer></v-spacer> | 159 | <v-spacer></v-spacer> |
| 160 | <v-card-title class="body-1" v-show="show"> | 160 | <v-card-title class="body-1" v-show="show"> |
| 161 | <v-btn icon large flat @click="displaySearch"> | 161 | <v-btn icon large flat @click="displaySearch"> |
| 162 | <v-avatar size="27"> | 162 | <v-avatar size="27"> |
| 163 | <img src="/static/icon/search.png" alt="icon" /> | 163 | <img src="/static/icon/search.png" alt="icon" /> |
| 164 | </v-avatar> | 164 | </v-avatar> |
| 165 | </v-btn> | 165 | </v-btn> |
| 166 | </v-card-title> | 166 | </v-card-title> |
| 167 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 167 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-text-field | 169 | <v-text-field |
| 170 | autofocus | 170 | autofocus |
| 171 | v-model="search" | 171 | v-model="search" |
| 172 | label="Search" | 172 | label="Search" |
| 173 | prepend-inner-icon="search" | 173 | prepend-inner-icon="search" |
| 174 | color="primary" | 174 | color="primary" |
| 175 | ></v-text-field> | 175 | ></v-text-field> |
| 176 | <v-icon @click="closeSearch" color="error">close</v-icon> | 176 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | </v-toolbar> | 179 | </v-toolbar> |
| 180 | <v-data-table | 180 | <v-data-table |
| 181 | :headers="headers" | 181 | :headers="headers" |
| 182 | :items="examData" | 182 | :items="examData" |
| 183 | :pagination.sync="pagination" | 183 | :pagination.sync="pagination" |
| 184 | :search="search" | 184 | :search="search" |
| 185 | > | 185 | > |
| 186 | <template slot="items" slot-scope="props"> | 186 | <template slot="items" slot-scope="props"> |
| 187 | <tr class="tr"> | 187 | <tr class="tr"> |
| 188 | <td class="td td-row">{{ props.index + 1}}</td> | 188 | <td class="td td-row">{{ props.index + 1}}</td> |
| 189 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> | 189 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> |
| 190 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 190 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 191 | <td class="td td-row text-xs-center">{{ props.item.note}}</td> | 191 | <td class="td td-row text-xs-center">{{ props.item.note}}</td> |
| 192 | <td class="td td-row text-xs-center"> | 192 | <td class="td td-row text-xs-center"> |
| 193 | <span> | 193 | <span> |
| 194 | <v-tooltip top> | 194 | <v-tooltip top> |
| 195 | <img | 195 | <img |
| 196 | slot="activator" | 196 | slot="activator" |
| 197 | style="cursor:pointer; width:25px; height:25px; " | 197 | style="cursor:pointer; width:25px; height:25px; " |
| 198 | class="mr-3" | 198 | class="mr-3" |
| 199 | @click="profile(props.item)" | 199 | @click="profile(props.item)" |
| 200 | src="/static/icon/view.png" | 200 | src="/static/icon/view.png" |
| 201 | /> | 201 | /> |
| 202 | <span>View</span> | 202 | <span>View</span> |
| 203 | </v-tooltip> | 203 | </v-tooltip> |
| 204 | <v-tooltip top> | 204 | <v-tooltip top> |
| 205 | <img | 205 | <img |
| 206 | slot="activator" | 206 | slot="activator" |
| 207 | style="cursor:pointer; width:20px; height:18px; " | 207 | style="cursor:pointer; width:20px; height:18px; " |
| 208 | class="mr-3" | 208 | class="mr-3" |
| 209 | @click="editItem(props.item)" | 209 | @click="editItem(props.item)" |
| 210 | src="/static/icon/edit.png" | 210 | src="/static/icon/edit.png" |
| 211 | /> | 211 | /> |
| 212 | <span>Edit</span> | 212 | <span>Edit</span> |
| 213 | </v-tooltip> | 213 | </v-tooltip> |
| 214 | <v-tooltip top> | 214 | <v-tooltip top> |
| 215 | <img | 215 | <img |
| 216 | slot="activator" | 216 | slot="activator" |
| 217 | style="cursor:pointer; width:20px; height:20px; " | 217 | style="cursor:pointer; width:20px; height:20px; " |
| 218 | class="mr-3" | 218 | class="mr-3" |
| 219 | @click="deleteItem(props.item)" | 219 | @click="deleteItem(props.item)" |
| 220 | src="/static/icon/delete.png" | 220 | src="/static/icon/delete.png" |
| 221 | /> | 221 | /> |
| 222 | <span>Delete</span> | 222 | <span>Delete</span> |
| 223 | </v-tooltip> | 223 | </v-tooltip> |
| 224 | </span> | 224 | </span> |
| 225 | </td> | 225 | </td> |
| 226 | </tr> | 226 | </tr> |
| 227 | </template> | 227 | </template> |
| 228 | <v-alert | 228 | <v-alert |
| 229 | slot="no-results" | 229 | slot="no-results" |
| 230 | :value="true" | 230 | :value="true" |
| 231 | color="error" | 231 | color="error" |
| 232 | icon="warning" | 232 | icon="warning" |
| 233 | >Your search for "{{ search }}" found no results.</v-alert> | 233 | >Your search for "{{ search }}" found no results.</v-alert> |
| 234 | </v-data-table> | 234 | </v-data-table> |
| 235 | 235 | ||
| 236 | <!-- ****** ADD EXAM ****** --> | 236 | <!-- ****** ADD EXAM ****** --> |
| 237 | <v-dialog v-model="addExamDialog" max-width="500px" v-if="addExamDialog" persistent> | 237 | <v-dialog v-model="addExamDialog" max-width="500px" v-if="addExamDialog" persistent> |
| 238 | <v-card flat class="card-style pa-2" dark> | 238 | <v-card flat class="Card-style pa-2"> |
| 239 | <v-layout> | 239 | <v-layout> |
| 240 | <v-flex xs12> | 240 | <v-flex xs12> |
| 241 | <label class="title text-xs-center">Add Exam</label> | 241 | <label class="title text-xs-center">Add Exam</label> |
| 242 | <v-icon size="24" class="right" @click="$refs.form.reset();addExamDialog = false">cancel</v-icon> | 242 | <v-icon size="24" class="right" @click="$refs.form.reset();addExamDialog = false">cancel</v-icon> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | </v-layout> | 244 | </v-layout> |
| 245 | <v-form ref="form" v-model="valid" lazy-validation> | 245 | <v-form ref="form" v-model="valid" lazy-validation> |
| 246 | <v-container fluid> | 246 | <v-container fluid> |
| 247 | <v-flex xs12> | 247 | <v-flex xs12> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs4 class="pt-4 subheading"> | 249 | <v-flex xs4 class="pt-4 subheading"> |
| 250 | <label class="right hidden-xs-only">Exam Name:</label> | 250 | <label class="right hidden-xs-only">Exam Name:</label> |
| 251 | <label | 251 | <label |
| 252 | class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" | 252 | class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" |
| 253 | >ExamName:</label> | 253 | >ExamName:</label> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | <v-flex xs8 sm7 class="ml-3"> | 255 | <v-flex xs8 sm7 class="ml-3"> |
| 256 | <v-text-field | 256 | <v-text-field |
| 257 | placeholder="fill your Exam Name" | 257 | placeholder="fill your Exam Name" |
| 258 | :rules="authorRules" | 258 | :rules="authorRules" |
| 259 | v-model="addExam.examName" | 259 | v-model="addExam.examName" |
| 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-flex xs12> | 264 | <v-flex xs12> |
| 265 | <v-layout> | 265 | <v-layout> |
| 266 | <v-flex xs4 class="pt-4 subheading"> | 266 | <v-flex xs4 class="pt-4 subheading"> |
| 267 | <label class="right">Date:</label> | 267 | <label class="right">Date:</label> |
| 268 | </v-flex> | 268 | </v-flex> |
| 269 | <v-flex xs8 sm7 class="ml-3"> | 269 | <v-flex xs8 sm7 class="ml-3"> |
| 270 | <v-menu | 270 | <v-menu |
| 271 | ref="menu2" | 271 | ref="menu2" |
| 272 | :close-on-content-click="false" | 272 | :close-on-content-click="false" |
| 273 | v-model="menu2" | 273 | v-model="menu2" |
| 274 | :nudge-right="40" | 274 | :nudge-right="40" |
| 275 | :return-value.sync="addExam.date" | 275 | :return-value.sync="addExam.date" |
| 276 | lazy | 276 | lazy |
| 277 | transition="scale-transition" | 277 | transition="scale-transition" |
| 278 | offset-y | 278 | offset-y |
| 279 | full-width | 279 | full-width |
| 280 | min-width="290px" | 280 | min-width="290px" |
| 281 | > | 281 | > |
| 282 | <v-text-field | 282 | <v-text-field |
| 283 | slot="activator" | 283 | slot="activator" |
| 284 | v-model="addExam.date" | 284 | v-model="addExam.date" |
| 285 | :rules="examDateRules" | 285 | :rules="examDateRules" |
| 286 | label="Select Date" | 286 | label="Select Date" |
| 287 | append-icon="event" | 287 | append-icon="event" |
| 288 | readonly | 288 | readonly |
| 289 | ></v-text-field> | 289 | ></v-text-field> |
| 290 | <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker> | 290 | <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker> |
| 291 | </v-menu> | 291 | </v-menu> |
| 292 | </v-flex> | 292 | </v-flex> |
| 293 | </v-layout> | 293 | </v-layout> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | <v-flex xs12> | 295 | <v-flex xs12> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs4 class="pt-4 subheading"> | 297 | <v-flex xs4 class="pt-4 subheading"> |
| 298 | <label class="right">Note:</label> | 298 | <label class="right">Note:</label> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | <v-flex xs8 sm7 class="ml-3"> | 300 | <v-flex xs8 sm7 class="ml-3"> |
| 301 | <v-text-field placeholder="fill your Note" v-model="addExam.note"></v-text-field> | 301 | <v-text-field placeholder="fill your Note" v-model="addExam.note"></v-text-field> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | </v-layout> | 303 | </v-layout> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs12> | 306 | <v-flex xs12> |
| 307 | <v-card-actions> | 307 | <v-card-actions> |
| 308 | <v-spacer class="hidden-xs-only"></v-spacer> | 308 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 309 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 309 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 310 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 310 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 311 | </v-card-actions> | 311 | </v-card-actions> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | </v-container> | 314 | </v-container> |
| 315 | </v-form> | 315 | </v-form> |
| 316 | </v-card> | 316 | </v-card> |
| 317 | </v-dialog> | 317 | </v-dialog> |
| 318 | <v-snackbar | 318 | <v-snackbar |
| 319 | :timeout="timeout" | 319 | :timeout="timeout" |
| 320 | :top="y === 'top'" | 320 | :top="y === 'top'" |
| 321 | :right="x === 'right'" | 321 | :right="x === 'right'" |
| 322 | :vertical="mode === 'vertical'" | 322 | :vertical="mode === 'vertical'" |
| 323 | v-model="snackbar" | 323 | v-model="snackbar" |
| 324 | :color="color" | 324 | :color="color" |
| 325 | >{{ text }}</v-snackbar> | 325 | >{{ text }}</v-snackbar> |
| 326 | <div class="loader" v-if="showLoader"> | 326 | <div class="loader" v-if="showLoader"> |
| 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 328 | </div> | 328 | </div> |
| 329 | </v-container> | 329 | </v-container> |
| 330 | </template> | 330 | </template> |
| 331 | 331 | ||
| 332 | <script> | 332 | <script> |
| 333 | import http from "@/Services/http.js"; | 333 | import http from "@/Services/http.js"; |
| 334 | import moment from "moment"; | 334 | import moment from "moment"; |
| 335 | 335 | ||
| 336 | export default { | 336 | export default { |
| 337 | data: () => ({ | 337 | data: () => ({ |
| 338 | snackbar: false, | 338 | snackbar: false, |
| 339 | date: null, | 339 | date: null, |
| 340 | menu1: false, | 340 | menu1: false, |
| 341 | menu2: false, | 341 | menu2: false, |
| 342 | color: "", | 342 | color: "", |
| 343 | y: "top", | 343 | y: "top", |
| 344 | x: "right", | 344 | x: "right", |
| 345 | mode: "", | 345 | mode: "", |
| 346 | timeout: 10000, | 346 | timeout: 10000, |
| 347 | text: "", | 347 | text: "", |
| 348 | libraryId: "", | 348 | libraryId: "", |
| 349 | show: true, | 349 | show: true, |
| 350 | showSearch: false, | 350 | showSearch: false, |
| 351 | addExamDialog: false, | 351 | addExamDialog: false, |
| 352 | loading: false, | 352 | loading: false, |
| 353 | loadingSearch: false, | 353 | loadingSearch: false, |
| 354 | date: null, | 354 | date: null, |
| 355 | search: "", | 355 | search: "", |
| 356 | showLoader: false, | 356 | showLoader: false, |
| 357 | editExamDialog: false, | 357 | editExamDialog: false, |
| 358 | profileExamDialog: false, | 358 | profileExamDialog: false, |
| 359 | valid: true, | 359 | valid: true, |
| 360 | pagination: { | 360 | pagination: { |
| 361 | rowsPerPage: 10, | 361 | rowsPerPage: 10, |
| 362 | }, | 362 | }, |
| 363 | libraryIDRules: [(v) => !!v || " Library ID is required"], | 363 | libraryIDRules: [(v) => !!v || " Library ID is required"], |
| 364 | bookRules: [(v) => !!v || " book Name is required"], | 364 | bookRules: [(v) => !!v || " book Name is required"], |
| 365 | authorRules: [(v) => !!v || "Author Name is required"], | 365 | authorRules: [(v) => !!v || "Author Name is required"], |
| 366 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], | 366 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], |
| 367 | authorRules: [(v) => !!v || "Author is required"], | 367 | authorRules: [(v) => !!v || "Author is required"], |
| 368 | examDateRules: [(v) => !!v || "Date is required"], | 368 | examDateRules: [(v) => !!v || "Date is required"], |
| 369 | headers: [ | 369 | headers: [ |
| 370 | { | 370 | { |
| 371 | align: "", | 371 | align: "", |
| 372 | text: "No", | 372 | text: "No", |
| 373 | sortable: false, | 373 | sortable: false, |
| 374 | value: "No", | 374 | value: "No", |
| 375 | }, | 375 | }, |
| 376 | { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, | 376 | { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, |
| 377 | { | 377 | { |
| 378 | text: "Date", | 378 | text: "Date", |
| 379 | value: "date", | 379 | value: "date", |
| 380 | sortable: false, | 380 | sortable: false, |
| 381 | align: "center", | 381 | align: "center", |
| 382 | }, | 382 | }, |
| 383 | { | 383 | { |
| 384 | text: "Note", | 384 | text: "Note", |
| 385 | value: "note", | 385 | value: "note", |
| 386 | sortable: false, | 386 | sortable: false, |
| 387 | align: "center", | 387 | align: "center", |
| 388 | }, | 388 | }, |
| 389 | { text: "Action", value: "", sortable: false, align: "center" }, | 389 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 390 | ], | 390 | ], |
| 391 | examData: [], | 391 | examData: [], |
| 392 | addExam: {}, | 392 | addExam: {}, |
| 393 | editedItem: {}, | 393 | editedItem: {}, |
| 394 | token: "", | 394 | token: "", |
| 395 | }), | 395 | }), |
| 396 | watch: { | 396 | watch: { |
| 397 | addExamDialog: function (val) { | 397 | addExamDialog: function (val) { |
| 398 | if (!val) { | 398 | if (!val) { |
| 399 | this.addExam = []; | 399 | this.addExam = []; |
| 400 | } | 400 | } |
| 401 | }, | 401 | }, |
| 402 | }, | 402 | }, |
| 403 | methods: { | 403 | methods: { |
| 404 | dates: function (date) { | 404 | dates: function (date) { |
| 405 | return moment(date).format("MMMM DD, YYYY"); | 405 | return moment(date).format("MMMM DD, YYYY"); |
| 406 | }, | 406 | }, |
| 407 | pickFile() { | 407 | pickFile() { |
| 408 | this.$refs.image.click(); | 408 | this.$refs.image.click(); |
| 409 | }, | 409 | }, |
| 410 | getExamList() { | 410 | getExamList() { |
| 411 | this.showLoader = true; | 411 | this.showLoader = true; |
| 412 | this.loadingSearch = true; | 412 | this.loadingSearch = true; |
| 413 | http() | 413 | http() |
| 414 | .get("/getExamsList", { | 414 | .get("/getExamsList", { |
| 415 | headers: { Authorization: "Bearer " + this.token }, | 415 | headers: { Authorization: "Bearer " + this.token }, |
| 416 | }) | 416 | }) |
| 417 | .then((response) => { | 417 | .then((response) => { |
| 418 | this.examData = response.data.data; | 418 | this.examData = response.data.data; |
| 419 | this.showLoader = false; | 419 | this.showLoader = false; |
| 420 | this.loadingSearch = false; | 420 | this.loadingSearch = false; |
| 421 | }) | 421 | }) |
| 422 | .catch((error) => { | 422 | .catch((error) => { |
| 423 | // console.log("err====>", err); | 423 | // console.log("err====>", err); |
| 424 | this.showLoader = false; | 424 | this.showLoader = false; |
| 425 | this.loadingSearch = false; | 425 | this.loadingSearch = false; |
| 426 | this.snackbar = true; | 426 | this.snackbar = true; |
| 427 | this.text = error.response.data.message; | 427 | this.text = error.response.data.message; |
| 428 | if (error.response.status === 401) { | 428 | if (error.response.status === 401) { |
| 429 | this.$router.replace({ path: "/" }); | 429 | this.$router.replace({ path: "/" }); |
| 430 | this.$store.dispatch("setToken", null); | 430 | this.$store.dispatch("setToken", null); |
| 431 | this.$store.dispatch("Id", null); | 431 | this.$store.dispatch("Id", null); |
| 432 | } | 432 | } |
| 433 | }); | 433 | }); |
| 434 | }, | 434 | }, |
| 435 | editItem(item) { | 435 | editItem(item) { |
| 436 | this.editedIndex = this.examData.indexOf(item); | 436 | this.editedIndex = this.examData.indexOf(item); |
| 437 | this.editedItem = Object.assign({}, item); | 437 | this.editedItem = Object.assign({}, item); |
| 438 | this.editedItem.date = | 438 | this.editedItem.date = |
| 439 | this.editedItem.date != undefined | 439 | this.editedItem.date != undefined |
| 440 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 440 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 441 | : (this.editedItem.date = ""); | 441 | : (this.editedItem.date = ""); |
| 442 | this.editExamDialog = true; | 442 | this.editExamDialog = true; |
| 443 | }, | 443 | }, |
| 444 | profile(item) { | 444 | profile(item) { |
| 445 | this.editedIndex = this.examData.indexOf(item); | 445 | this.editedIndex = this.examData.indexOf(item); |
| 446 | this.editedItem = Object.assign({}, item); | 446 | this.editedItem = Object.assign({}, item); |
| 447 | this.profileExamDialog = true; | 447 | this.profileExamDialog = true; |
| 448 | }, | 448 | }, |
| 449 | deleteItem(item) { | 449 | deleteItem(item) { |
| 450 | let Exam = { | 450 | let Exam = { |
| 451 | examId: item._id, | 451 | examId: item._id, |
| 452 | }; | 452 | }; |
| 453 | http() | 453 | http() |
| 454 | .delete( | 454 | .delete( |
| 455 | "/deleteExam", | 455 | "/deleteExam", |
| 456 | confirm("Are you sure you want to Delete this?") && { | 456 | confirm("Are you sure you want to Delete this?") && { |
| 457 | params: Exam, | 457 | params: Exam, |
| 458 | } | 458 | } |
| 459 | ) | 459 | ) |
| 460 | .then((response) => { | 460 | .then((response) => { |
| 461 | this.snackbar = true; | 461 | this.snackbar = true; |
| 462 | this.text = "Successfully Delete Exam "; | 462 | this.text = "Successfully Delete Exam "; |
| 463 | this.text = response.data.message; | 463 | this.text = response.data.message; |
| 464 | this.color = "green"; | 464 | this.color = "green"; |
| 465 | this.getExamList(); | 465 | this.getExamList(); |
| 466 | }) | 466 | }) |
| 467 | .catch((error) => { | 467 | .catch((error) => { |
| 468 | this.snackbar = true; | 468 | this.snackbar = true; |
| 469 | this.text = error.response.data.message; | 469 | this.text = error.response.data.message; |
| 470 | this.color = "red"; | 470 | this.color = "red"; |
| 471 | }); | 471 | }); |
| 472 | }, | 472 | }, |
| 473 | close() { | 473 | close() { |
| 474 | this.editExamDialog = false; | 474 | this.editExamDialog = false; |
| 475 | }, | 475 | }, |
| 476 | submit() { | 476 | submit() { |
| 477 | if (this.$refs.form.validate()) { | 477 | if (this.$refs.form.validate()) { |
| 478 | this.loading = true; | 478 | this.loading = true; |
| 479 | http() | 479 | http() |
| 480 | .post("/createExam", this.addExam) | 480 | .post("/createExam", this.addExam) |
| 481 | .then((response) => { | 481 | .then((response) => { |
| 482 | this.snackbar = true; | 482 | this.snackbar = true; |
| 483 | this.text = response.data.message; | 483 | this.text = response.data.message; |
| 484 | this.color = "green"; | 484 | this.color = "green"; |
| 485 | this.addExamDialog = false; | 485 | this.addExamDialog = false; |
| 486 | this.getExamList(); | 486 | this.getExamList(); |
| 487 | this.color = "success"; | 487 | this.color = "success"; |
| 488 | this.loading = false; | 488 | this.loading = false; |
| 489 | this.clear(); | 489 | this.clear(); |
| 490 | }) | 490 | }) |
| 491 | .catch((error) => { | 491 | .catch((error) => { |
| 492 | this.snackbar = true; | 492 | this.snackbar = true; |
| 493 | this.text = error.response.data.message; | 493 | this.text = error.response.data.message; |
| 494 | this.color = "red"; | 494 | this.color = "red"; |
| 495 | this.loading = false; | 495 | this.loading = false; |
| 496 | }); | 496 | }); |
| 497 | } | 497 | } |
| 498 | }, | 498 | }, |
| 499 | clear() { | 499 | clear() { |
| 500 | this.$refs.form.reset(); | 500 | this.$refs.form.reset(); |
| 501 | this.disable = false; | 501 | this.disable = false; |
| 502 | }, | 502 | }, |
| 503 | save() { | 503 | save() { |
| 504 | this.editedItem.examId = this.editedItem._id; | 504 | this.editedItem.examId = this.editedItem._id; |
| 505 | http() | 505 | http() |
| 506 | .put("/updateExam", this.editedItem) | 506 | .put("/updateExam", this.editedItem) |
| 507 | .then((response) => { | 507 | .then((response) => { |
| 508 | this.snackbar = true; | 508 | this.snackbar = true; |
| 509 | this.text = response.data.message; | 509 | this.text = response.data.message; |
| 510 | this.color = "green"; | 510 | this.color = "green"; |
| 511 | this.getExamList(); | 511 | this.getExamList(); |
| 512 | this.close(); | 512 | this.close(); |
| 513 | }) | 513 | }) |
| 514 | .catch((error) => { | 514 | .catch((error) => { |
| 515 | this.snackbar = true; | 515 | this.snackbar = true; |
| 516 | this.text = error.response.data.message; | 516 | this.text = error.response.data.message; |
| 517 | this.color = "red"; | 517 | this.color = "red"; |
| 518 | }); | 518 | }); |
| 519 | }, | 519 | }, |
| 520 | displaySearch() { | 520 | displaySearch() { |
| 521 | (this.show = false), (this.showSearch = true); | 521 | (this.show = false), (this.showSearch = true); |
| 522 | }, | 522 | }, |
| 523 | closeSearch() { | 523 | closeSearch() { |
| 524 | this.showSearch = false; | 524 | this.showSearch = false; |
| 525 | this.show = true; | 525 | this.show = true; |
| 526 | this.search = ""; | 526 | this.search = ""; |
| 527 | }, | 527 | }, |
| 528 | }, | 528 | }, |
| 529 | mounted() { | 529 | mounted() { |
| 530 | this.token = this.$store.state.token; | 530 | this.token = this.$store.state.token; |
| 531 | this.getExamList(); | 531 | this.getExamList(); |
| 532 | }, | 532 | }, |
| 533 | }; | 533 | }; |
| 534 | </script> | 534 | </script> |
src/pages/Exam/examAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ***** Exam Schedule TABLE****** --> | 3 | <!-- ***** Exam Schedule TABLE****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addExamAttendenceDialog = true" | 10 | @click="addExamAttendenceDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | round | 15 | round |
| 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 17 | dark | 17 | dark |
| 18 | @click="addExamAttendenceDialog = true" | 18 | @click="addExamAttendenceDialog = true" |
| 19 | > | 19 | > |
| 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence | 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence |
| 21 | </v-btn> | 21 | </v-btn> |
| 22 | <v-spacer></v-spacer> | 22 | <v-spacer></v-spacer> |
| 23 | <v-flex xs8 sm3 md2 class="mr-3"> | 23 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 24 | <v-select | 24 | <v-select |
| 25 | v-model="getAttendence.examId" | 25 | v-model="getAttendence.examId" |
| 26 | label="Select Exam" | 26 | label="Select Exam" |
| 27 | :rules="examRules" | 27 | :rules="examRules" |
| 28 | :items="examList" | 28 | :items="examList" |
| 29 | item-text="examName" | 29 | item-text="examName" |
| 30 | item-value="_id" | 30 | item-value="_id" |
| 31 | required | 31 | required |
| 32 | ></v-select> | 32 | ></v-select> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | <v-flex xs8 sm3 md2 class="mr-3"> | 34 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 35 | <v-select | 35 | <v-select |
| 36 | v-model="getAttendence.classId" | 36 | v-model="getAttendence.classId" |
| 37 | label="Select your class" | 37 | label="Select your class" |
| 38 | type="text" | 38 | type="text" |
| 39 | :items="classList" | 39 | :items="classList" |
| 40 | item-text="classNum" | 40 | item-text="classNum" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | @change="getSections(getAttendence.classId)" | 42 | @change="getSections(getAttendence.classId)" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex xs8 sm3 md2 class="mr-3"> | 46 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 47 | <v-select | 47 | <v-select |
| 48 | v-model="getAttendence.sectionId" | 48 | v-model="getAttendence.sectionId" |
| 49 | label="Select your section" | 49 | label="Select your section" |
| 50 | type="text" | 50 | type="text" |
| 51 | :items="addSection" | 51 | :items="addSection" |
| 52 | item-text="name" | 52 | item-text="name" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | @change="getClassSubject(getAttendence.classId)" | 54 | @change="getClassSubject(getAttendence.classId)" |
| 55 | required | 55 | required |
| 56 | ></v-select> | 56 | ></v-select> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | <v-flex xs8 sm3 md2 class="mr-3"> | 58 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 59 | <v-select | 59 | <v-select |
| 60 | v-model="getAttendence.subjectId" | 60 | v-model="getAttendence.subjectId" |
| 61 | label="Select Subject" | 61 | label="Select Subject" |
| 62 | :rules="subjectRules" | 62 | :rules="subjectRules" |
| 63 | :items="subjectList.subjects" | 63 | :items="subjectList.subjects" |
| 64 | item-text="subjectName" | 64 | item-text="subjectName" |
| 65 | item-value="_id" | 65 | item-value="_id" |
| 66 | @change="getExamAttendenceList()" | 66 | @change="getExamAttendenceList()" |
| 67 | required | 67 | required |
| 68 | ></v-select> | 68 | ></v-select> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | 70 | ||
| 71 | <v-card-title class="body-1" v-show="show"> | 71 | <v-card-title class="body-1" v-show="show"> |
| 72 | <v-btn icon large flat @click="displaySearch"> | 72 | <v-btn icon large flat @click="displaySearch"> |
| 73 | <v-avatar size="27"> | 73 | <v-avatar size="27"> |
| 74 | <img src="/static/icon/search.png" alt="icon" /> | 74 | <img src="/static/icon/search.png" alt="icon" /> |
| 75 | </v-avatar> | 75 | </v-avatar> |
| 76 | </v-btn> | 76 | </v-btn> |
| 77 | </v-card-title> | 77 | </v-card-title> |
| 78 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 78 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 79 | <v-layout> | 79 | <v-layout> |
| 80 | <v-text-field | 80 | <v-text-field |
| 81 | autofocus | 81 | autofocus |
| 82 | v-model="search" | 82 | v-model="search" |
| 83 | label="Search" | 83 | label="Search" |
| 84 | prepend-inner-icon="search" | 84 | prepend-inner-icon="search" |
| 85 | color="primary" | 85 | color="primary" |
| 86 | ></v-text-field> | 86 | ></v-text-field> |
| 87 | <v-icon @click="closeSearch" color="error">close</v-icon> | 87 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 88 | </v-layout> | 88 | </v-layout> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-toolbar> | 90 | </v-toolbar> |
| 91 | 91 | ||
| 92 | <v-data-table | 92 | <v-data-table |
| 93 | v-if="showData" | 93 | v-if="showData" |
| 94 | :headers="headers" | 94 | :headers="headers" |
| 95 | :items="examData.students" | 95 | :items="examData.students" |
| 96 | :pagination.sync="pagination" | 96 | :pagination.sync="pagination" |
| 97 | :search="search" | 97 | :search="search" |
| 98 | > | 98 | > |
| 99 | <template slot="items" slot-scope="props"> | 99 | <template slot="items" slot-scope="props"> |
| 100 | <tr class="tr"> | 100 | <tr class="tr"> |
| 101 | <td class="td td-row">{{ props.index + 1}}</td> | 101 | <td class="td td-row">{{ props.index + 1}}</td> |
| 102 | <td class="text-xs-center td td-row"> | 102 | <td class="text-xs-center td td-row"> |
| 103 | <v-avatar size="40"> | 103 | <v-avatar size="40"> |
| 104 | <img | 104 | <img |
| 105 | :src="props.item.studentId.profilePicUrl" | 105 | :src="props.item.studentId.profilePicUrl" |
| 106 | v-if="props.item.studentId.profilePicUrl" | 106 | v-if="props.item.studentId.profilePicUrl" |
| 107 | /> | 107 | /> |
| 108 | <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" /> | 108 | <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" /> |
| 109 | </v-avatar> | 109 | </v-avatar> |
| 110 | </td> | 110 | </td> |
| 111 | <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td> | 111 | <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td> |
| 112 | <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td> | 112 | <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td> |
| 113 | <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td> | 113 | <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td> |
| 114 | <td class="td td-row text-xs-center"> | 114 | <td class="td td-row text-xs-center"> |
| 115 | <!-- <v-radio-group v-model="isPresent" row> | 115 | <!-- <v-radio-group v-model="isPresent" row> |
| 116 | <v-radio :value="props.item.isPresent"></v-radio> | 116 | <v-radio :value="props.item.isPresent"></v-radio> |
| 117 | </v-radio-group>--> | 117 | </v-radio-group>--> |
| 118 | <v-checkbox | 118 | <v-checkbox |
| 119 | v-model="props.item.isPresent" | 119 | v-model="props.item.isPresent" |
| 120 | @click="markStudentAttendence(props.item)" | 120 | @click="markStudentAttendence(props.item)" |
| 121 | primary | 121 | primary |
| 122 | hide-details | 122 | hide-details |
| 123 | ></v-checkbox> | 123 | ></v-checkbox> |
| 124 | </td> | 124 | </td> |
| 125 | </tr> | 125 | </tr> |
| 126 | </template> | 126 | </template> |
| 127 | <v-alert | 127 | <v-alert |
| 128 | slot="no-results" | 128 | slot="no-results" |
| 129 | :value="true" | 129 | :value="true" |
| 130 | color="error" | 130 | color="error" |
| 131 | icon="warning" | 131 | icon="warning" |
| 132 | >Your search for "{{ search }}" found no results.</v-alert> | 132 | >Your search for "{{ search }}" found no results.</v-alert> |
| 133 | </v-data-table> | 133 | </v-data-table> |
| 134 | 134 | ||
| 135 | <!-- ****** ADD Student Attendence ****** --> | 135 | <!-- ****** ADD Student Attendence ****** --> |
| 136 | <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent> | 136 | <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent> |
| 137 | <v-card flat> | 137 | <v-card flat> |
| 138 | <v-layout class="pa-3 card-style white--text"> | 138 | <v-layout class="pa-3 Card-style"> |
| 139 | <v-flex xs12> | 139 | <v-flex xs12> |
| 140 | <label class="title text-xs-center">Change Student's Attendence</label> | 140 | <label class="title text-xs-center">Change Student's Attendence</label> |
| 141 | <v-icon | 141 | <v-icon size="24" class="right" @click="changeStudentAttendenceDialog = false">cancel</v-icon> |
| 142 | size="24" | ||
| 143 | class="right white--text" | ||
| 144 | @click="changeStudentAttendenceDialog = false" | ||
| 145 | >cancel</v-icon> | ||
| 146 | </v-flex> | 142 | </v-flex> |
| 147 | </v-layout> | 143 | </v-layout> |
| 148 | <v-container fluid> | 144 | <v-container fluid> |
| 149 | <v-flex xs12> | 145 | <v-flex xs12> |
| 150 | <h3>Are you sure you want to change the attendence</h3> | 146 | <h3>Are you sure you want to change the attendence</h3> |
| 151 | </v-flex> | 147 | </v-flex> |
| 152 | <v-spacer></v-spacer> | 148 | <v-spacer></v-spacer> |
| 153 | 149 | ||
| 154 | <v-flex xs12> | 150 | <v-flex xs12> |
| 155 | <v-card-actions> | 151 | <v-card-actions> |
| 156 | <v-spacer></v-spacer> | 152 | <v-spacer></v-spacer> |
| 157 | <v-btn | 153 | <v-btn |
| 158 | @click.native="closeStudentAttendenceDialog" | 154 | @click.native="closeStudentAttendenceDialog" |
| 159 | round | 155 | round |
| 160 | dark | 156 | dark |
| 161 | class="clear-button" | 157 | class="clear-button" |
| 162 | >cancel</v-btn> | 158 | >cancel</v-btn> |
| 163 | <v-btn | 159 | <v-btn |
| 164 | @click="selectParticularStudent" | 160 | @click="selectParticularStudent" |
| 165 | round | 161 | round |
| 166 | dark | 162 | dark |
| 167 | :loading="loading" | 163 | :loading="loading" |
| 168 | class="add-button" | 164 | class="add-button" |
| 169 | >Yes</v-btn> | 165 | >Yes</v-btn> |
| 170 | </v-card-actions> | 166 | </v-card-actions> |
| 171 | </v-flex> | 167 | </v-flex> |
| 172 | </v-container> | 168 | </v-container> |
| 173 | </v-card> | 169 | </v-card> |
| 174 | </v-dialog> | 170 | </v-dialog> |
| 175 | 171 | ||
| 176 | <!-- ****** ADD Exam Attendence ****** --> | 172 | <!-- ****** ADD Exam Attendence ****** --> |
| 177 | <v-dialog | 173 | <v-dialog |
| 178 | v-model="addExamAttendenceDialog" | 174 | v-model="addExamAttendenceDialog" |
| 179 | max-width="800px" | 175 | max-width="800px" |
| 180 | v-if="addExamAttendenceDialog" | 176 | v-if="addExamAttendenceDialog" |
| 181 | persistent | 177 | persistent |
| 182 | > | 178 | > |
| 183 | <v-card flat> | 179 | <v-card flat> |
| 184 | <v-layout class="pa-3 card-style white--text"> | 180 | <v-layout class="pa-3 Card-style"> |
| 185 | <v-flex xs12> | 181 | <v-flex xs12> |
| 186 | <label class="title text-xs-center">Add Exam Attendence</label> | 182 | <label class="title text-xs-center">Add Exam Attendence</label> |
| 187 | <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon> | 183 | <v-icon size="24" class="right" @click="closeAttendenceModel">cancel</v-icon> |
| 188 | </v-flex> | 184 | </v-flex> |
| 189 | </v-layout> | 185 | </v-layout> |
| 190 | <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center"> | 186 | <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center"> |
| 191 | <v-container fluid> | 187 | <v-container fluid> |
| 192 | <v-flex xs12> | 188 | <v-flex xs12> |
| 193 | <v-layout> | 189 | <v-layout> |
| 194 | <v-flex xs5 class="pt-4 subheading"> | 190 | <v-flex xs5 class="pt-4 subheading"> |
| 195 | <label class="right">Exam Name:</label> | 191 | <label class="right">Exam Name:</label> |
| 196 | </v-flex> | 192 | </v-flex> |
| 197 | <v-flex xs7 sm7 md6 class="ml-3"> | 193 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 198 | <v-select | 194 | <v-select |
| 199 | label="Select Exam" | 195 | label="Select Exam" |
| 200 | :rules="examRules" | 196 | :rules="examRules" |
| 201 | :items="examList" | 197 | :items="examList" |
| 202 | v-model="addAttendence.examId" | 198 | v-model="addAttendence.examId" |
| 203 | item-text="examName" | 199 | item-text="examName" |
| 204 | item-value="_id" | 200 | item-value="_id" |
| 205 | ></v-select> | 201 | ></v-select> |
| 206 | </v-flex> | 202 | </v-flex> |
| 207 | </v-layout> | 203 | </v-layout> |
| 208 | </v-flex> | 204 | </v-flex> |
| 209 | <v-flex xs12> | 205 | <v-flex xs12> |
| 210 | <v-layout> | 206 | <v-layout> |
| 211 | <v-flex xs5 class="pt-4 subheading"> | 207 | <v-flex xs5 class="pt-4 subheading"> |
| 212 | <label class="right">Class:</label> | 208 | <label class="right">Class:</label> |
| 213 | </v-flex> | 209 | </v-flex> |
| 214 | <v-flex xs7 sm7 md6 class="ml-3"> | 210 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 215 | <v-select | 211 | <v-select |
| 216 | v-model="addAttendence.classId" | 212 | v-model="addAttendence.classId" |
| 217 | label="Select Class" | 213 | label="Select Class" |
| 218 | type="text" | 214 | type="text" |
| 219 | :items="classList" | 215 | :items="classList" |
| 220 | item-text="classNum" | 216 | item-text="classNum" |
| 221 | item-value="_id" | 217 | item-value="_id" |
| 222 | :rules="classRules" | 218 | :rules="classRules" |
| 223 | @change="getSections(addAttendence.classId)" | 219 | @change="getSections(addAttendence.classId)" |
| 224 | required | 220 | required |
| 225 | ></v-select> | 221 | ></v-select> |
| 226 | </v-flex> | 222 | </v-flex> |
| 227 | </v-layout> | 223 | </v-layout> |
| 228 | </v-flex> | 224 | </v-flex> |
| 229 | <v-flex xs12> | 225 | <v-flex xs12> |
| 230 | <v-layout> | 226 | <v-layout> |
| 231 | <v-flex xs5 class="pt-4 subheading"> | 227 | <v-flex xs5 class="pt-4 subheading"> |
| 232 | <label class="right">Section:</label> | 228 | <label class="right">Section:</label> |
| 233 | </v-flex> | 229 | </v-flex> |
| 234 | <v-flex xs7 sm7 md6 class="ml-3"> | 230 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 235 | <v-select | 231 | <v-select |
| 236 | :items="addSection" | 232 | :items="addSection" |
| 237 | label="Select Section" | 233 | label="Select Section" |
| 238 | v-model="addAttendence.sectionId" | 234 | v-model="addAttendence.sectionId" |
| 239 | item-text="name" | 235 | item-text="name" |
| 240 | item-value="_id" | 236 | item-value="_id" |
| 241 | name="Select Section" | 237 | name="Select Section" |
| 242 | :rules="sectionRules" | 238 | :rules="sectionRules" |
| 243 | @change="getClassSubject(addAttendence.classId)" | 239 | @change="getClassSubject(addAttendence.classId)" |
| 244 | required | 240 | required |
| 245 | ></v-select> | 241 | ></v-select> |
| 246 | </v-flex> | 242 | </v-flex> |
| 247 | </v-layout> | 243 | </v-layout> |
| 248 | </v-flex> | 244 | </v-flex> |
| 249 | <v-flex xs12> | 245 | <v-flex xs12> |
| 250 | <v-layout> | 246 | <v-layout> |
| 251 | <v-flex xs5 class="pt-4 subheading"> | 247 | <v-flex xs5 class="pt-4 subheading"> |
| 252 | <label class="right">Subject Name:</label> | 248 | <label class="right">Subject Name:</label> |
| 253 | </v-flex> | 249 | </v-flex> |
| 254 | <v-flex xs7 sm7 md6 class="ml-3"> | 250 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 255 | <v-select | 251 | <v-select |
| 256 | :items="subjectList.subjects" | 252 | :items="subjectList.subjects" |
| 257 | label="Select Subject" | 253 | label="Select Subject" |
| 258 | item-text="subjectName" | 254 | item-text="subjectName" |
| 259 | v-model="addAttendence.subjectId" | 255 | v-model="addAttendence.subjectId" |
| 260 | item-value="_id" | 256 | item-value="_id" |
| 261 | name="Select Subject" | 257 | name="Select Subject" |
| 262 | :rules="subjectRules" | 258 | :rules="subjectRules" |
| 263 | required | 259 | required |
| 264 | ></v-select> | 260 | ></v-select> |
| 265 | </v-flex> | 261 | </v-flex> |
| 266 | </v-layout> | 262 | </v-layout> |
| 267 | </v-flex> | 263 | </v-flex> |
| 268 | <v-layout> | 264 | <v-layout> |
| 269 | <v-flex xs12> | 265 | <v-flex xs12> |
| 270 | <v-card-actions> | 266 | <v-card-actions> |
| 271 | <v-spacer class="hidden-xs-only"></v-spacer> | 267 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 272 | <v-btn | 268 | <v-btn |
| 273 | round | 269 | round |
| 274 | dark | 270 | dark |
| 275 | @click="showTable" | 271 | @click="showTable" |
| 276 | :loading="loading" | 272 | :loading="loading" |
| 277 | class="add-button" | 273 | class="add-button" |
| 278 | >Attendence</v-btn> | 274 | >Attendence</v-btn> |
| 279 | </v-card-actions> | 275 | </v-card-actions> |
| 280 | </v-flex> | 276 | </v-flex> |
| 281 | </v-layout> | 277 | </v-layout> |
| 282 | </v-container> | 278 | </v-container> |
| 283 | </v-form> | 279 | </v-form> |
| 284 | <v-flex xs12 v-show="attendeceTable" class> | 280 | <v-flex xs12 v-show="attendeceTable" class> |
| 285 | <v-data-table | 281 | <v-data-table |
| 286 | :headers="studentheader" | 282 | :headers="studentheader" |
| 287 | :items="studentsData" | 283 | :items="studentsData" |
| 288 | :pagination.sync="pagination" | 284 | :pagination.sync="pagination" |
| 289 | :search="search" | 285 | :search="search" |
| 290 | select-all | 286 | select-all |
| 291 | v-model="selected" | 287 | v-model="selected" |
| 292 | item-key="_id" | 288 | item-key="_id" |
| 293 | > | 289 | > |
| 294 | <template slot="items" slot-scope="props"> | 290 | <template slot="items" slot-scope="props"> |
| 295 | <tr class="tr"> | 291 | <tr class="tr"> |
| 296 | <!-- <td class="td td-row">{{ props.index + 1}}</td> --> | 292 | <!-- <td class="td td-row">{{ props.index + 1}}</td> --> |
| 297 | <td class="td td-row"> | 293 | <td class="td td-row"> |
| 298 | <v-checkbox | 294 | <v-checkbox |
| 299 | v-model="props.item.attendence" | 295 | v-model="props.item.attendence" |
| 300 | @change="markParticularStudentAttendence(props.item)" | 296 | @change="markParticularStudentAttendence(props.item)" |
| 301 | primary | 297 | primary |
| 302 | hide-details | 298 | hide-details |
| 303 | ></v-checkbox> | 299 | ></v-checkbox> |
| 304 | </td> | 300 | </td> |
| 305 | <td class="text-xs-center td td-row"> | 301 | <td class="text-xs-center td td-row"> |
| 306 | <v-avatar size="40"> | 302 | <v-avatar size="40"> |
| 307 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 303 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 308 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 304 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 309 | </v-avatar> | 305 | </v-avatar> |
| 310 | </td> | 306 | </td> |
| 311 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 307 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 312 | <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td> | 308 | <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td> |
| 313 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 309 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 314 | <!-- <td class="td td-row text-xs-center"> | 310 | <!-- <td class="td td-row text-xs-center"> |
| 315 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> | 311 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> |
| 316 | <v-radio | 312 | <v-radio |
| 317 | v-for="attendences in attendenceType" | 313 | v-for="attendences in attendenceType" |
| 318 | :key="attendences.value" | 314 | :key="attendences.value" |
| 319 | :label="`${attendences.label}`" | 315 | :label="`${attendences.label}`" |
| 320 | :value="attendences.value" | 316 | :value="attendences.value" |
| 321 | ></v-radio> | 317 | ></v-radio> |
| 322 | </v-radio-group> | 318 | </v-radio-group> |
| 323 | </td>--> | 319 | </td>--> |
| 324 | </tr> | 320 | </tr> |
| 325 | </template> | 321 | </template> |
| 326 | <template slot="headers" slot-scope="props"> | 322 | <template slot="headers" slot-scope="props"> |
| 327 | <tr> | 323 | <tr> |
| 328 | <th> | 324 | <th> |
| 329 | <v-checkbox | 325 | <v-checkbox |
| 330 | :input-value="props.all" | 326 | :input-value="props.all" |
| 331 | :indeterminate="props.indeterminate" | 327 | :indeterminate="props.indeterminate" |
| 332 | primary | 328 | primary |
| 333 | hide-details | 329 | hide-details |
| 334 | @click.native="selectAll" | 330 | @click.native="selectAll" |
| 335 | ></v-checkbox> | 331 | ></v-checkbox> |
| 336 | </th> | 332 | </th> |
| 337 | <th | 333 | <th |
| 338 | v-for="header in props.headers" | 334 | v-for="header in props.headers" |
| 339 | :key="header.text" | 335 | :key="header.text" |
| 340 | :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" | 336 | :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" |
| 341 | @click="changeSort(header.value)" | 337 | @click="changeSort(header.value)" |
| 342 | > | 338 | > |
| 343 | <v-icon small>arrow_upward</v-icon> | 339 | <v-icon small>arrow_upward</v-icon> |
| 344 | {{ header.text }} | 340 | {{ header.text }} |
| 345 | </th> | 341 | </th> |
| 346 | </tr> | 342 | </tr> |
| 347 | </template> | 343 | </template> |
| 348 | <v-alert | 344 | <v-alert |
| 349 | slot="no-results" | 345 | slot="no-results" |
| 350 | :value="true" | 346 | :value="true" |
| 351 | color="error" | 347 | color="error" |
| 352 | icon="warning" | 348 | icon="warning" |
| 353 | >Your search for "{{ search }}" found no results.</v-alert> | 349 | >Your search for "{{ search }}" found no results.</v-alert> |
| 354 | </v-data-table> | 350 | </v-data-table> |
| 355 | <v-flex xs12 sm12> | 351 | <v-flex xs12 sm12> |
| 356 | <v-card-actions> | 352 | <v-card-actions> |
| 357 | <v-spacer></v-spacer> | 353 | <v-spacer></v-spacer> |
| 358 | <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn> | 354 | <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn> |
| 359 | </v-card-actions> | 355 | </v-card-actions> |
| 360 | </v-flex> | 356 | </v-flex> |
| 361 | </v-flex> | 357 | </v-flex> |
| 362 | </v-card> | 358 | </v-card> |
| 363 | </v-dialog> | 359 | </v-dialog> |
| 364 | <v-snackbar | 360 | <v-snackbar |
| 365 | :timeout="timeout" | 361 | :timeout="timeout" |
| 366 | :top="y === 'top'" | 362 | :top="y === 'top'" |
| 367 | :right="x === 'right'" | 363 | :right="x === 'right'" |
| 368 | :vertical="mode === 'vertical'" | 364 | :vertical="mode === 'vertical'" |
| 369 | v-model="snackbar" | 365 | v-model="snackbar" |
| 370 | :color="color" | 366 | :color="color" |
| 371 | >{{ text }}</v-snackbar> | 367 | >{{ text }}</v-snackbar> |
| 372 | <div class="loader" v-if="showLoader"> | 368 | <div class="loader" v-if="showLoader"> |
| 373 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 369 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 374 | </div> | 370 | </div> |
| 375 | </v-container> | 371 | </v-container> |
| 376 | </template> | 372 | </template> |
| 377 | 373 | ||
| 378 | <script> | 374 | <script> |
| 379 | import http from "@/Services/http.js"; | 375 | import http from "@/Services/http.js"; |
| 380 | import Util from "@/util"; | 376 | import Util from "@/util"; |
| 381 | import moment from "moment"; | 377 | import moment from "moment"; |
| 382 | 378 | ||
| 383 | export default { | 379 | export default { |
| 384 | data: () => ({ | 380 | data: () => ({ |
| 385 | snackbar: false, | 381 | snackbar: false, |
| 386 | editDate: false, | 382 | editDate: false, |
| 387 | menu1: false, | 383 | menu1: false, |
| 388 | menuB: false, | 384 | menuB: false, |
| 389 | menu2: false, | 385 | menu2: false, |
| 390 | menuEdit: false, | 386 | menuEdit: false, |
| 391 | timeToEdit: false, | 387 | timeToEdit: false, |
| 392 | show: true, | 388 | show: true, |
| 393 | showSearch: false, | 389 | showSearch: false, |
| 394 | addExamAttendenceDialog: false, | 390 | addExamAttendenceDialog: false, |
| 395 | color: "", | 391 | color: "", |
| 396 | y: "top", | 392 | y: "top", |
| 397 | x: "right", | 393 | x: "right", |
| 398 | mode: "", | 394 | mode: "", |
| 399 | timeout: 10000, | 395 | timeout: 10000, |
| 400 | text: "", | 396 | text: "", |
| 401 | loading: false, | 397 | loading: false, |
| 402 | search: "", | 398 | search: "", |
| 403 | showLoader: false, | 399 | showLoader: false, |
| 404 | valid: true, | 400 | valid: true, |
| 405 | role: "", | 401 | role: "", |
| 406 | pagination: { | 402 | pagination: { |
| 407 | rowsPerPage: 10, | 403 | rowsPerPage: 10, |
| 408 | }, | 404 | }, |
| 409 | attendeceTable: false, | 405 | attendeceTable: false, |
| 410 | isPresent: true, | 406 | isPresent: true, |
| 411 | 407 | ||
| 412 | examRules: [(v) => !!v || "Exam Name is required"], | 408 | examRules: [(v) => !!v || "Exam Name is required"], |
| 413 | classRules: [(v) => !!v || "Class Name is required"], | 409 | classRules: [(v) => !!v || "Class Name is required"], |
| 414 | sectionRules: [(v) => !!v || "section is required"], | 410 | sectionRules: [(v) => !!v || "section is required"], |
| 415 | subjectRules: [(v) => !!v || "Subject is required"], | 411 | subjectRules: [(v) => !!v || "Subject is required"], |
| 416 | timeInRules: [(v) => !!v || "Time In is required"], | 412 | timeInRules: [(v) => !!v || "Time In is required"], |
| 417 | timeOutRules: [(v) => !!v || "time Out s is required"], | 413 | timeOutRules: [(v) => !!v || "time Out s is required"], |
| 418 | roomRules: [(v) => !!v || "Room is required"], | 414 | roomRules: [(v) => !!v || "Room is required"], |
| 419 | examScheduleDateRules: [(v) => !!v || "Date is required"], | 415 | examScheduleDateRules: [(v) => !!v || "Date is required"], |
| 420 | studentsData: [], | 416 | studentsData: [], |
| 421 | examData: [], | 417 | examData: [], |
| 422 | students: [], | 418 | students: [], |
| 423 | 419 | ||
| 424 | headers: [ | 420 | headers: [ |
| 425 | { | 421 | { |
| 426 | align: "", | 422 | align: "", |
| 427 | text: "No", | 423 | text: "No", |
| 428 | sortable: false, | 424 | sortable: false, |
| 429 | value: "No", | 425 | value: "No", |
| 430 | }, | 426 | }, |
| 431 | { | 427 | { |
| 432 | text: "Profile Pic", | 428 | text: "Profile Pic", |
| 433 | value: "profilePicUrl", | 429 | value: "profilePicUrl", |
| 434 | sortable: false, | 430 | sortable: false, |
| 435 | align: "center", | 431 | align: "center", |
| 436 | }, | 432 | }, |
| 437 | { | 433 | { |
| 438 | text: "Name", | 434 | text: "Name", |
| 439 | value: "name", | 435 | value: "name", |
| 440 | sortable: false, | 436 | sortable: false, |
| 441 | align: "center", | 437 | align: "center", |
| 442 | }, | 438 | }, |
| 443 | { | 439 | { |
| 444 | text: "Roll No", | 440 | text: "Roll No", |
| 445 | value: "rollNo", | 441 | value: "rollNo", |
| 446 | sortable: false, | 442 | sortable: false, |
| 447 | align: "center", | 443 | align: "center", |
| 448 | }, | 444 | }, |
| 449 | { | 445 | { |
| 450 | text: "Email", | 446 | text: "Email", |
| 451 | value: "email", | 447 | value: "email", |
| 452 | sortable: false, | 448 | sortable: false, |
| 453 | align: "center", | 449 | align: "center", |
| 454 | }, | 450 | }, |
| 455 | { | 451 | { |
| 456 | text: "Action", | 452 | text: "Action", |
| 457 | value: "isPresent", | 453 | value: "isPresent", |
| 458 | sortable: false, | 454 | sortable: false, |
| 459 | align: "center", | 455 | align: "center", |
| 460 | }, | 456 | }, |
| 461 | ], | 457 | ], |
| 462 | studentheader: [ | 458 | studentheader: [ |
| 463 | { | 459 | { |
| 464 | text: "Profile Pic", | 460 | text: "Profile Pic", |
| 465 | value: "profilePicUrl", | 461 | value: "profilePicUrl", |
| 466 | sortable: false, | 462 | sortable: false, |
| 467 | align: "center", | 463 | align: "center", |
| 468 | }, | 464 | }, |
| 469 | { | 465 | { |
| 470 | text: "Name", | 466 | text: "Name", |
| 471 | value: "name", | 467 | value: "name", |
| 472 | sortable: false, | 468 | sortable: false, |
| 473 | align: "center", | 469 | align: "center", |
| 474 | }, | 470 | }, |
| 475 | { | 471 | { |
| 476 | text: "Roll No", | 472 | text: "Roll No", |
| 477 | value: "rollNo", | 473 | value: "rollNo", |
| 478 | sortable: false, | 474 | sortable: false, |
| 479 | align: "center", | 475 | align: "center", |
| 480 | }, | 476 | }, |
| 481 | { | 477 | { |
| 482 | text: "Email", | 478 | text: "Email", |
| 483 | value: "email", | 479 | value: "email", |
| 484 | sortable: false, | 480 | sortable: false, |
| 485 | align: "center", | 481 | align: "center", |
| 486 | }, | 482 | }, |
| 487 | ], | 483 | ], |
| 488 | attendenceType: [ | 484 | attendenceType: [ |
| 489 | { | 485 | { |
| 490 | label: "", | 486 | label: "", |
| 491 | value: true, | 487 | value: true, |
| 492 | }, | 488 | }, |
| 493 | ], | 489 | ], |
| 494 | classList: [], | 490 | classList: [], |
| 495 | addSection: [], | 491 | addSection: [], |
| 496 | examList: [], | 492 | examList: [], |
| 497 | subjectList: [], | 493 | subjectList: [], |
| 498 | subjects: [], | 494 | subjects: [], |
| 499 | addAttendence: {}, | 495 | addAttendence: {}, |
| 500 | getAttendence: {}, | 496 | getAttendence: {}, |
| 501 | editedItem: { | 497 | editedItem: { |
| 502 | sectionId: { | 498 | sectionId: { |
| 503 | name: "", | 499 | name: "", |
| 504 | }, | 500 | }, |
| 505 | }, | 501 | }, |
| 506 | getScheduleData: {}, | 502 | getScheduleData: {}, |
| 507 | ScheduleData: [], | 503 | ScheduleData: [], |
| 508 | token: "", | 504 | token: "", |
| 509 | showData: false, | 505 | showData: false, |
| 510 | selected: [], | 506 | selected: [], |
| 511 | changeStudentAttendenceDialog: false, | 507 | changeStudentAttendenceDialog: false, |
| 512 | closeStudentAttendenceDialog() { | 508 | closeStudentAttendenceDialog() { |
| 513 | this.changeStudentAttendenceDialog = false; | 509 | this.changeStudentAttendenceDialog = false; |
| 514 | }, | 510 | }, |
| 515 | selectedStudent: {}, | 511 | selectedStudent: {}, |
| 516 | presentStudent: [], | 512 | presentStudent: [], |
| 517 | absentStudent: [], | 513 | absentStudent: [], |
| 518 | }), | 514 | }), |
| 519 | watch: { | 515 | watch: { |
| 520 | addExamAttendenceDialog: function (val) { | 516 | addExamAttendenceDialog: function (val) { |
| 521 | if (!val) { | 517 | if (!val) { |
| 522 | this.studentsData = []; | 518 | this.studentsData = []; |
| 523 | this.selected = []; | 519 | this.selected = []; |
| 524 | this.attendeceTable = false; | 520 | this.attendeceTable = false; |
| 525 | this.valid = false; | 521 | this.valid = false; |
| 526 | this.addAttendence = []; | 522 | this.addAttendence = []; |
| 527 | } | 523 | } |
| 528 | }, | 524 | }, |
| 529 | }, | 525 | }, |
| 530 | methods: { | 526 | methods: { |
| 531 | pickFile() { | 527 | pickFile() { |
| 532 | this.$refs.image.click(); | 528 | this.$refs.image.click(); |
| 533 | }, | 529 | }, |
| 534 | markStudentAttendence(item) { | 530 | markStudentAttendence(item) { |
| 535 | this.selectedStudent = { | 531 | this.selectedStudent = { |
| 536 | id: item.studentId._id, | 532 | id: item.studentId._id, |
| 537 | isPresent: !item.isPresent, | 533 | isPresent: !item.isPresent, |
| 538 | }; | 534 | }; |
| 539 | this.changeStudentAttendenceDialog = true; | 535 | this.changeStudentAttendenceDialog = true; |
| 540 | }, | 536 | }, |
| 541 | getSchedulesList() { | 537 | getSchedulesList() { |
| 542 | this.showLoader = true; | 538 | this.showLoader = true; |
| 543 | http() | 539 | http() |
| 544 | .get("/getSchedulesList", { | 540 | .get("/getSchedulesList", { |
| 545 | params: { classId: this.getScheduleData.classId }, | 541 | params: { classId: this.getScheduleData.classId }, |
| 546 | headers: { Authorization: "Bearer " + this.token }, | 542 | headers: { Authorization: "Bearer " + this.token }, |
| 547 | }) | 543 | }) |
| 548 | .then((response) => { | 544 | .then((response) => { |
| 549 | this.ScheduleData = response.data.data; | 545 | this.ScheduleData = response.data.data; |
| 550 | this.showLoader = false; | 546 | this.showLoader = false; |
| 551 | }) | 547 | }) |
| 552 | .catch((error) => { | 548 | .catch((error) => { |
| 553 | // console.log("err====>", err); | 549 | // console.log("err====>", err); |
| 554 | this.showLoader = false; | 550 | this.showLoader = false; |
| 555 | this.loadingSearch = false; | 551 | this.loadingSearch = false; |
| 556 | this.snackbar = true; | 552 | this.snackbar = true; |
| 557 | this.text = error.response.data.message; | 553 | this.text = error.response.data.message; |
| 558 | if (error.response.status === 401) { | 554 | if (error.response.status === 401) { |
| 559 | this.$router.replace({ path: "/" }); | 555 | this.$router.replace({ path: "/" }); |
| 560 | this.$store.dispatch("setToken", null); | 556 | this.$store.dispatch("setToken", null); |
| 561 | this.$store.dispatch("Id", null); | 557 | this.$store.dispatch("Id", null); |
| 562 | } | 558 | } |
| 563 | }); | 559 | }); |
| 564 | }, | 560 | }, |
| 565 | close() { | 561 | close() { |
| 566 | this.dialog = false; | 562 | this.dialog = false; |
| 567 | }, | 563 | }, |
| 568 | closeAttendenceModel() { | 564 | closeAttendenceModel() { |
| 569 | this.addExamAttendenceDialog = false; | 565 | this.addExamAttendenceDialog = false; |
| 570 | this.studentsData = []; | 566 | this.studentsData = []; |
| 571 | this.selected = []; | 567 | this.selected = []; |
| 572 | this.attendeceTable = false; | 568 | this.attendeceTable = false; |
| 573 | this.valid = false; | 569 | this.valid = false; |
| 574 | this.addAttendence = []; | 570 | this.addAttendence = []; |
| 575 | }, | 571 | }, |
| 576 | submit() { | 572 | submit() { |
| 577 | var examAttendence = { | 573 | var examAttendence = { |
| 578 | examId: this.addAttendence.examId, | 574 | examId: this.addAttendence.examId, |
| 579 | classId: this.addAttendence.classId, | 575 | classId: this.addAttendence.classId, |
| 580 | sectionId: this.addAttendence.sectionId, | 576 | sectionId: this.addAttendence.sectionId, |
| 581 | subjectId: this.addAttendence.subjectId, | 577 | subjectId: this.addAttendence.subjectId, |
| 582 | students: [], | 578 | students: [], |
| 583 | }; | 579 | }; |
| 584 | for (var j = 0; j < this.presentStudent.length; j++) { | 580 | for (var j = 0; j < this.presentStudent.length; j++) { |
| 585 | examAttendence.students.push({ | 581 | examAttendence.students.push({ |
| 586 | studentId: this.presentStudent[j], | 582 | studentId: this.presentStudent[j], |
| 587 | isPresent: true, | 583 | isPresent: true, |
| 588 | }); | 584 | }); |
| 589 | } | 585 | } |
| 590 | for (var j = 0; j < this.absentStudent.length; j++) { | 586 | for (var j = 0; j < this.absentStudent.length; j++) { |
| 591 | examAttendence.students.push({ | 587 | examAttendence.students.push({ |
| 592 | studentId: this.absentStudent[j], | 588 | studentId: this.absentStudent[j], |
| 593 | isPresent: false, | 589 | isPresent: false, |
| 594 | }); | 590 | }); |
| 595 | } | 591 | } |
| 596 | if (this.$refs.form.validate()) { | 592 | if (this.$refs.form.validate()) { |
| 597 | http() | 593 | http() |
| 598 | .post("/createExamAttendance", examAttendence) | 594 | .post("/createExamAttendance", examAttendence) |
| 599 | .then((response) => { | 595 | .then((response) => { |
| 600 | this.snackbar = true; | 596 | this.snackbar = true; |
| 601 | this.color = "success"; | 597 | this.color = "success"; |
| 602 | this.text = "Successfully created exam attendence"; | 598 | this.text = "Successfully created exam attendence"; |
| 603 | this.addExamAttendenceDialog = false; | 599 | this.addExamAttendenceDialog = false; |
| 604 | this.studentsData = []; | 600 | this.studentsData = []; |
| 605 | this.selected = []; | 601 | this.selected = []; |
| 606 | this.attendeceTable = false; | 602 | this.attendeceTable = false; |
| 607 | this.valid = false; | 603 | this.valid = false; |
| 608 | this.addAttendence = []; | 604 | this.addAttendence = []; |
| 609 | }) | 605 | }) |
| 610 | .catch((error) => { | 606 | .catch((error) => { |
| 611 | this.snackbar = true; | 607 | this.snackbar = true; |
| 612 | this.text = error.response.data.message; | 608 | this.text = error.response.data.message; |
| 613 | }); | 609 | }); |
| 614 | } | 610 | } |
| 615 | }, | 611 | }, |
| 616 | clear() { | 612 | clear() { |
| 617 | this.$refs.form.reset(); | 613 | this.$refs.form.reset(); |
| 618 | this.disable = false; | 614 | this.disable = false; |
| 619 | this.loading = false; | 615 | this.loading = false; |
| 620 | }, | 616 | }, |
| 621 | getClass() { | 617 | getClass() { |
| 622 | http() | 618 | http() |
| 623 | .get("/getClassesList", { | 619 | .get("/getClassesList", { |
| 624 | headers: { Authorization: "Bearer " + this.token }, | 620 | headers: { Authorization: "Bearer " + this.token }, |
| 625 | }) | 621 | }) |
| 626 | .then((response) => { | 622 | .then((response) => { |
| 627 | this.classList = response.data.data; | 623 | this.classList = response.data.data; |
| 628 | }) | 624 | }) |
| 629 | .catch((err) => { | 625 | .catch((err) => { |
| 630 | // console.log("err====>", err); | 626 | // console.log("err====>", err); |
| 631 | }); | 627 | }); |
| 632 | }, | 628 | }, |
| 633 | getSections(_id) { | 629 | getSections(_id) { |
| 634 | for (let i = 0; i < this.classList.length; i++) { | 630 | for (let i = 0; i < this.classList.length; i++) { |
| 635 | if (_id == this.classList[i]._id) { | 631 | if (_id == this.classList[i]._id) { |
| 636 | // this.subjects = this.classList[i].subjects; | 632 | // this.subjects = this.classList[i].subjects; |
| 637 | } | 633 | } |
| 638 | } | 634 | } |
| 639 | this.examData = []; | 635 | this.examData = []; |
| 640 | http() | 636 | http() |
| 641 | .get( | 637 | .get( |
| 642 | "/getSectionsList", | 638 | "/getSectionsList", |
| 643 | { params: { classId: _id } }, | 639 | { params: { classId: _id } }, |
| 644 | { | 640 | { |
| 645 | headers: { Authorization: "Bearer " + this.token }, | 641 | headers: { Authorization: "Bearer " + this.token }, |
| 646 | } | 642 | } |
| 647 | ) | 643 | ) |
| 648 | .then((response) => { | 644 | .then((response) => { |
| 649 | this.addSection = response.data.data; | 645 | this.addSection = response.data.data; |
| 650 | }) | 646 | }) |
| 651 | .catch((err) => {}); | 647 | .catch((err) => {}); |
| 652 | }, | 648 | }, |
| 653 | getClassSubject(_id) { | 649 | getClassSubject(_id) { |
| 654 | this.showLoader = true; | 650 | this.showLoader = true; |
| 655 | // this.classId = this.classId; | 651 | // this.classId = this.classId; |
| 656 | http() | 652 | http() |
| 657 | .get( | 653 | .get( |
| 658 | "/getParticularClass", | 654 | "/getParticularClass", |
| 659 | { params: { classId: _id } }, | 655 | { params: { classId: _id } }, |
| 660 | { | 656 | { |
| 661 | headers: { Authorization: "Bearer " + this.token }, | 657 | headers: { Authorization: "Bearer " + this.token }, |
| 662 | } | 658 | } |
| 663 | ) | 659 | ) |
| 664 | .then((response) => { | 660 | .then((response) => { |
| 665 | this.subjectList = response.data.data; | 661 | this.subjectList = response.data.data; |
| 666 | this.showLoader = false; | 662 | this.showLoader = false; |
| 667 | }) | 663 | }) |
| 668 | .catch((err) => { | 664 | .catch((err) => { |
| 669 | this.showLoader = false; | 665 | this.showLoader = false; |
| 670 | }); | 666 | }); |
| 671 | }, | 667 | }, |
| 672 | getExamList() { | 668 | getExamList() { |
| 673 | this.showLoader = true; | 669 | this.showLoader = true; |
| 674 | this.loadingSearch = true; | 670 | this.loadingSearch = true; |
| 675 | http() | 671 | http() |
| 676 | .get("/getExamsList", { | 672 | .get("/getExamsList", { |
| 677 | headers: { Authorization: "Bearer " + this.token }, | 673 | headers: { Authorization: "Bearer " + this.token }, |
| 678 | }) | 674 | }) |
| 679 | .then((response) => { | 675 | .then((response) => { |
| 680 | this.examList = response.data.data; | 676 | this.examList = response.data.data; |
| 681 | this.showLoader = false; | 677 | this.showLoader = false; |
| 682 | this.loadingSearch = false; | 678 | this.loadingSearch = false; |
| 683 | }) | 679 | }) |
| 684 | .catch((error) => { | 680 | .catch((error) => { |
| 685 | this.showLoader = false; | 681 | this.showLoader = false; |
| 686 | this.loadingSearch = false; | 682 | this.loadingSearch = false; |
| 687 | this.snackbar = true; | 683 | this.snackbar = true; |
| 688 | this.text = error.response.data.message; | 684 | this.text = error.response.data.message; |
| 689 | if (error.response.status === 401) { | 685 | if (error.response.status === 401) { |
| 690 | this.$router.replace({ path: "/" }); | 686 | this.$router.replace({ path: "/" }); |
| 691 | this.$store.dispatch("setToken", null); | 687 | this.$store.dispatch("setToken", null); |
| 692 | this.$store.dispatch("Id", null); | 688 | this.$store.dispatch("Id", null); |
| 693 | } | 689 | } |
| 694 | }); | 690 | }); |
| 695 | }, | 691 | }, |
| 696 | showTable() { | 692 | showTable() { |
| 697 | this.attendeceTable = true; | 693 | this.attendeceTable = true; |
| 698 | this.getStudentList(); | 694 | this.getStudentList(); |
| 699 | }, | 695 | }, |
| 700 | getStudentList() { | 696 | getStudentList() { |
| 701 | this.showLoader = true; | 697 | this.showLoader = true; |
| 702 | http() | 698 | http() |
| 703 | .get("/getStudentWithClass", { | 699 | .get("/getStudentWithClass", { |
| 704 | params: { | 700 | params: { |
| 705 | classId: this.addAttendence.classId, | 701 | classId: this.addAttendence.classId, |
| 706 | sectionId: this.addAttendence.sectionId, | 702 | sectionId: this.addAttendence.sectionId, |
| 707 | }, | 703 | }, |
| 708 | }) | 704 | }) |
| 709 | .then((response) => { | 705 | .then((response) => { |
| 710 | this.studentsData = response.data.data; | 706 | this.studentsData = response.data.data; |
| 711 | this.showLoader = false; | 707 | this.showLoader = false; |
| 712 | // this.addExamAttendenceDialog = false; | 708 | // this.addExamAttendenceDialog = false; |
| 713 | var attendence = ""; | 709 | var attendence = ""; |
| 714 | for (let i = 0; i < this.studentsData.length; i++) { | 710 | for (let i = 0; i < this.studentsData.length; i++) { |
| 715 | this.studentsData[i].attendence = false; | 711 | this.studentsData[i].attendence = false; |
| 716 | } | 712 | } |
| 717 | }) | 713 | }) |
| 718 | .catch((err) => { | 714 | .catch((err) => { |
| 719 | // console.log("err====>", err); | 715 | // console.log("err====>", err); |
| 720 | this.showLoader = false; | 716 | this.showLoader = false; |
| 721 | this.snackbar = true; | 717 | this.snackbar = true; |
| 722 | this.color = "error"; | 718 | this.color = "error"; |
| 723 | this.text = error.response.data.message; | 719 | this.text = error.response.data.message; |
| 724 | }); | 720 | }); |
| 725 | }, | 721 | }, |
| 726 | getExamAttendenceList() { | 722 | getExamAttendenceList() { |
| 727 | this.showLoader = true; | 723 | this.showLoader = true; |
| 728 | http() | 724 | http() |
| 729 | .get("/getExamAttendenceList", { | 725 | .get("/getExamAttendenceList", { |
| 730 | params: { | 726 | params: { |
| 731 | examId: this.getAttendence.examId, | 727 | examId: this.getAttendence.examId, |
| 732 | classId: this.getAttendence.classId, | 728 | classId: this.getAttendence.classId, |
| 733 | sectionId: this.getAttendence.sectionId, | 729 | sectionId: this.getAttendence.sectionId, |
| 734 | subjectId: this.getAttendence.subjectId, | 730 | subjectId: this.getAttendence.subjectId, |
| 735 | }, | 731 | }, |
| 736 | }) | 732 | }) |
| 737 | .then((response) => { | 733 | .then((response) => { |
| 738 | this.examData = response.data.data; | 734 | this.examData = response.data.data; |
| 739 | if (this.examData.length === 0) { | 735 | if (this.examData.length === 0) { |
| 740 | this.showLoader = false; | 736 | this.showLoader = false; |
| 741 | this.snackbar = true; | 737 | this.snackbar = true; |
| 742 | this.text = "No Attendence found!"; | 738 | this.text = "No Attendence found!"; |
| 743 | this.color = "error"; | 739 | this.color = "error"; |
| 744 | return; | 740 | return; |
| 745 | } | 741 | } |
| 746 | this.examData = this.examData[0]; | 742 | this.examData = this.examData[0]; |
| 747 | // if (this.examData.students.length === 0) { | 743 | // if (this.examData.students.length === 0) { |
| 748 | // this.showLoader = false; | 744 | // this.showLoader = false; |
| 749 | // this.snackbar = true; | 745 | // this.snackbar = true; |
| 750 | // this.text = "No Students found!"; | 746 | // this.text = "No Students found!"; |
| 751 | // this.color = "error"; | 747 | // this.color = "error"; |
| 752 | // return; | 748 | // return; |
| 753 | // } | 749 | // } |
| 754 | this.showData = true; | 750 | this.showData = true; |
| 755 | this.showLoader = false; | 751 | this.showLoader = false; |
| 756 | }) | 752 | }) |
| 757 | .catch((error) => { | 753 | .catch((error) => { |
| 758 | // console.log("error", error); | 754 | // console.log("error", error); |
| 759 | this.showLoader = false; | 755 | this.showLoader = false; |
| 760 | this.snackbar = true; | 756 | this.snackbar = true; |
| 761 | this.color = "error"; | 757 | this.color = "error"; |
| 762 | this.text = error.response.data.message; | 758 | this.text = error.response.data.message; |
| 763 | }); | 759 | }); |
| 764 | }, | 760 | }, |
| 765 | markParticularStudentAttendence(selected) { | 761 | markParticularStudentAttendence(selected) { |
| 766 | if (selected.attendence) { | 762 | if (selected.attendence) { |
| 767 | this.selected.push(selected); | 763 | this.selected.push(selected); |
| 768 | } else { | 764 | } else { |
| 769 | for (var i = 0; i < this.selected.length; i++) { | 765 | for (var i = 0; i < this.selected.length; i++) { |
| 770 | if (this.selected[i]._id === selected._id) { | 766 | if (this.selected[i]._id === selected._id) { |
| 771 | this.selected.splice(i, 1); | 767 | this.selected.splice(i, 1); |
| 772 | break; | 768 | break; |
| 773 | } | 769 | } |
| 774 | } | 770 | } |
| 775 | } | 771 | } |
| 776 | let presentIndex = this.presentStudent.indexOf(selected._id); | 772 | let presentIndex = this.presentStudent.indexOf(selected._id); |
| 777 | let absentIndex = this.absentStudent.indexOf(selected._id); | 773 | let absentIndex = this.absentStudent.indexOf(selected._id); |
| 778 | if (presentIndex > -1) { | 774 | if (presentIndex > -1) { |
| 779 | this.presentStudent.splice(presentIndex, 1); | 775 | this.presentStudent.splice(presentIndex, 1); |
| 780 | this.absentStudent.push(selected._id); | 776 | this.absentStudent.push(selected._id); |
| 781 | } else { | 777 | } else { |
| 782 | if (absentIndex > -1) { | 778 | if (absentIndex > -1) { |
| 783 | this.absentStudent.splice(absentIndex, 1); | 779 | this.absentStudent.splice(absentIndex, 1); |
| 784 | } | 780 | } |
| 785 | this.presentStudent.push(selected._id); | 781 | this.presentStudent.push(selected._id); |
| 786 | } | 782 | } |
| 787 | }, | 783 | }, |
| 788 | selectAll() { | 784 | selectAll() { |
| 789 | let markAbsent = false; | 785 | let markAbsent = false; |
| 790 | if (this.selected.length === this.studentsData.length) markAbsent = true; | 786 | if (this.selected.length === this.studentsData.length) markAbsent = true; |
| 791 | 787 | ||
| 792 | this.presentStudent = []; | 788 | this.presentStudent = []; |
| 793 | this.absentStudent = []; | 789 | this.absentStudent = []; |
| 794 | this.selected = []; | 790 | this.selected = []; |
| 795 | 791 | ||
| 796 | for (let i = 0; i < this.studentsData.length; i++) { | 792 | for (let i = 0; i < this.studentsData.length; i++) { |
| 797 | if (markAbsent) { | 793 | if (markAbsent) { |
| 798 | this.studentsData[i].attendence = false; | 794 | this.studentsData[i].attendence = false; |
| 799 | this.absentStudent.push(this.studentsData[i]._id); | 795 | this.absentStudent.push(this.studentsData[i]._id); |
| 800 | } else { | 796 | } else { |
| 801 | this.studentsData[i].attendence = true; | 797 | this.studentsData[i].attendence = true; |
| 802 | this.presentStudent.push(this.studentsData[i]._id); | 798 | this.presentStudent.push(this.studentsData[i]._id); |
| 803 | this.selected.push(this.studentsData[i]); | 799 | this.selected.push(this.studentsData[i]); |
| 804 | } | 800 | } |
| 805 | } | 801 | } |
| 806 | }, | 802 | }, |
| 807 | selectParticularStudent(_id) { | 803 | selectParticularStudent(_id) { |
| 808 | var payload = { | 804 | var payload = { |
| 809 | examAttendanceId: this.examData._id, | 805 | examAttendanceId: this.examData._id, |
| 810 | studentId: this.selectedStudent.id, | 806 | studentId: this.selectedStudent.id, |
| 811 | isPresent: this.selectedStudent.isPresent, | 807 | isPresent: this.selectedStudent.isPresent, |
| 812 | }; | 808 | }; |
| 813 | 809 | ||
| 814 | http() | 810 | http() |
| 815 | .put("/updateExamAttendance", payload) | 811 | .put("/updateExamAttendance", payload) |
| 816 | .then((response) => { | 812 | .then((response) => { |
| 817 | this.snackbar = true; | 813 | this.snackbar = true; |
| 818 | this.color = "success"; | 814 | this.color = "success"; |
| 819 | this.text = "Successfully change attendence"; | 815 | this.text = "Successfully change attendence"; |
| 820 | this.changeStudentAttendenceDialog = false; | 816 | this.changeStudentAttendenceDialog = false; |
| 821 | this.selectedStudent = {}; | 817 | this.selectedStudent = {}; |
| 822 | this.getExamAttendenceList(); | 818 | this.getExamAttendenceList(); |
| 823 | }) | 819 | }) |
| 824 | .catch((error) => { | 820 | .catch((error) => { |
| 825 | this.snackbar = true; | 821 | this.snackbar = true; |
| 826 | this.text = error.response.data.message; | 822 | this.text = error.response.data.message; |
| 827 | }); | 823 | }); |
| 828 | }, | 824 | }, |
| 829 | changeSort(column) { | 825 | changeSort(column) { |
| 830 | if (this.pagination.sortBy === column) { | 826 | if (this.pagination.sortBy === column) { |
| 831 | this.pagination.descending = !this.pagination.descending; | 827 | this.pagination.descending = !this.pagination.descending; |
| 832 | } else { | 828 | } else { |
| 833 | this.pagination.sortBy = column; | 829 | this.pagination.sortBy = column; |
| 834 | this.pagination.descending = false; | 830 | this.pagination.descending = false; |
| 835 | } | 831 | } |
| 836 | }, | 832 | }, |
| 837 | displaySearch() { | 833 | displaySearch() { |
| 838 | (this.show = false), (this.showSearch = true); | 834 | (this.show = false), (this.showSearch = true); |
| 839 | }, | 835 | }, |
| 840 | closeSearch() { | 836 | closeSearch() { |
| 841 | this.showSearch = false; | 837 | this.showSearch = false; |
| 842 | this.show = true; | 838 | this.show = true; |
| 843 | this.search = ""; | 839 | this.search = ""; |
| 844 | }, | 840 | }, |
| 845 | }, | 841 | }, |
| 846 | mounted() { | 842 | mounted() { |
| 847 | this.token = this.$store.state.token; | 843 | this.token = this.$store.state.token; |
| 848 | this.getClass(); | 844 | this.getClass(); |
| 849 | this.getExamList(); | 845 | this.getExamList(); |
| 850 | this.role = this.$store.state.role; | 846 | this.role = this.$store.state.role; |
| 851 | }, | 847 | }, |
| 852 | }; | 848 | }; |
| 853 | </script> | 849 | </script> |
src/pages/Exam/examSchedule.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Exam Schedule****** --> | 3 | <!-- ****** Edit Exam Schedule****** --> |
| 4 | <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable persistent> | 4 | <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Exam Schedule</label> | 8 | <label class="title text-xs-center">Edit Exam Schedule</label> |
| 9 | <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12> | 16 | <v-flex xs12 sm12> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right">Exam Name:</label> | 19 | <label class="right">Exam Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-select | 22 | <v-select |
| 23 | :rules="examRules" | 23 | :rules="examRules" |
| 24 | :items="examList" | 24 | :items="examList" |
| 25 | v-model="editedItem.examId" | 25 | v-model="editedItem.examId" |
| 26 | label="Select your Exam Name" | 26 | label="Select your Exam Name" |
| 27 | item-text="examName" | 27 | item-text="examName" |
| 28 | item-value="_id" | 28 | item-value="_id" |
| 29 | ></v-select> | 29 | ></v-select> |
| 30 | </v-flex> | 30 | </v-flex> |
| 31 | </v-layout> | 31 | </v-layout> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs12 sm12> | 33 | <v-flex xs12 sm12> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs4 class="pt-4 subheading"> | 35 | <v-flex xs4 class="pt-4 subheading"> |
| 36 | <label class="right">Class:</label> | 36 | <label class="right">Class:</label> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | <v-flex xs7 class="ml-3"> | 38 | <v-flex xs7 class="ml-3"> |
| 39 | <v-select | 39 | <v-select |
| 40 | v-model="editedItem.classId" | 40 | v-model="editedItem.classId" |
| 41 | label="Select your Class" | 41 | label="Select your Class" |
| 42 | type="text" | 42 | type="text" |
| 43 | :items="classList" | 43 | :items="classList" |
| 44 | item-text="classNum" | 44 | item-text="classNum" |
| 45 | item-value="_id" | 45 | item-value="_id" |
| 46 | @change="getSections(editedItem.classId)" | 46 | @change="getSections(editedItem.classId)" |
| 47 | required | 47 | required |
| 48 | ></v-select> | 48 | ></v-select> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex xs12 sm12> | 52 | <v-flex xs12 sm12> |
| 53 | <v-layout> | 53 | <v-layout> |
| 54 | <v-flex xs4 class="pt-4 subheading"> | 54 | <v-flex xs4 class="pt-4 subheading"> |
| 55 | <label class="right">Subject Name:</label> | 55 | <label class="right">Subject Name:</label> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs7 class="ml-3"> | 57 | <v-flex xs7 class="ml-3"> |
| 58 | <v-select | 58 | <v-select |
| 59 | :items="subjects" | 59 | :items="subjects" |
| 60 | label="Select your Subject" | 60 | label="Select your Subject" |
| 61 | v-model="editedItem.subjectName" | 61 | v-model="editedItem.subjectName" |
| 62 | item-text="subjectName" | 62 | item-text="subjectName" |
| 63 | item-value="subjectName" | 63 | item-value="subjectName" |
| 64 | name="Select Subject" | 64 | name="Select Subject" |
| 65 | required | 65 | required |
| 66 | ></v-select> | 66 | ></v-select> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-flex xs12 sm12> | 70 | <v-flex xs12 sm12> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs4 class="pt-4 subheading"> | 72 | <v-flex xs4 class="pt-4 subheading"> |
| 73 | <label class="right">Date:</label> | 73 | <label class="right">Date:</label> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs7 class="ml-3"> | 75 | <v-flex xs7 class="ml-3"> |
| 76 | <v-menu | 76 | <v-menu |
| 77 | ref="editDate" | 77 | ref="editDate" |
| 78 | :close-on-content-click="false" | 78 | :close-on-content-click="false" |
| 79 | v-model="editDate" | 79 | v-model="editDate" |
| 80 | :nudge-right="40" | 80 | :nudge-right="40" |
| 81 | :return-value.sync="editDate" | 81 | :return-value.sync="editDate" |
| 82 | lazy | 82 | lazy |
| 83 | transition="scale-transition" | 83 | transition="scale-transition" |
| 84 | offset-y | 84 | offset-y |
| 85 | full-width | 85 | full-width |
| 86 | min-width="290px" | 86 | min-width="290px" |
| 87 | > | 87 | > |
| 88 | <v-text-field | 88 | <v-text-field |
| 89 | slot="activator" | 89 | slot="activator" |
| 90 | v-model="editedItem.date" | 90 | v-model="editedItem.date" |
| 91 | label="Select Date" | 91 | label="Select Date" |
| 92 | append-icon="event" | 92 | append-icon="event" |
| 93 | readonly | 93 | readonly |
| 94 | ></v-text-field> | 94 | ></v-text-field> |
| 95 | <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> | 95 | <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> |
| 96 | </v-menu> | 96 | </v-menu> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex xs12 sm12> | 100 | <v-flex xs12 sm12> |
| 101 | <v-layout> | 101 | <v-layout> |
| 102 | <v-flex xs4 class="pt-4 subheading"> | 102 | <v-flex xs4 class="pt-4 subheading"> |
| 103 | <label class="right">Time From:</label> | 103 | <label class="right">Time From:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs7 class="ml-3"> | 105 | <v-flex xs7 class="ml-3"> |
| 106 | <v-menu | 106 | <v-menu |
| 107 | ref="menuEdit" | 107 | ref="menuEdit" |
| 108 | :close-on-content-click="false" | 108 | :close-on-content-click="false" |
| 109 | v-model="menuEdit" | 109 | v-model="menuEdit" |
| 110 | :nudge-right="40" | 110 | :nudge-right="40" |
| 111 | :return-value.sync="editedItem.timeFrom" | 111 | :return-value.sync="editedItem.timeFrom" |
| 112 | lazy | 112 | lazy |
| 113 | transition="scale-transition" | 113 | transition="scale-transition" |
| 114 | offset-y | 114 | offset-y |
| 115 | full-width | 115 | full-width |
| 116 | max-width="290px" | 116 | max-width="290px" |
| 117 | min-width="290px" | 117 | min-width="290px" |
| 118 | > | 118 | > |
| 119 | <v-text-field | 119 | <v-text-field |
| 120 | slot="activator" | 120 | slot="activator" |
| 121 | v-model="editedItem.timeFrom" | 121 | v-model="editedItem.timeFrom" |
| 122 | label="Select your time From" | 122 | label="Select your time From" |
| 123 | append-icon="access_time" | 123 | append-icon="access_time" |
| 124 | readonly | 124 | readonly |
| 125 | ></v-text-field> | 125 | ></v-text-field> |
| 126 | <v-time-picker | 126 | <v-time-picker |
| 127 | v-model="editedItem.timeIn" | 127 | v-model="editedItem.timeIn" |
| 128 | @change="$refs.menuEdit.save(editedItem.timeIn)" | 128 | @change="$refs.menuEdit.save(editedItem.timeIn)" |
| 129 | ></v-time-picker> | 129 | ></v-time-picker> |
| 130 | </v-menu> | 130 | </v-menu> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | <v-flex xs12 sm12> | 134 | <v-flex xs12 sm12> |
| 135 | <v-layout> | 135 | <v-layout> |
| 136 | <v-flex xs4 class="pt-4 subheading"> | 136 | <v-flex xs4 class="pt-4 subheading"> |
| 137 | <label class="right">Time To:</label> | 137 | <label class="right">Time To:</label> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-flex xs7 class="ml-3"> | 139 | <v-flex xs7 class="ml-3"> |
| 140 | <v-menu | 140 | <v-menu |
| 141 | ref="timeToEdit" | 141 | ref="timeToEdit" |
| 142 | :close-on-content-click="false" | 142 | :close-on-content-click="false" |
| 143 | v-model="timeToEdit" | 143 | v-model="timeToEdit" |
| 144 | :nudge-right="40" | 144 | :nudge-right="40" |
| 145 | :return-value.sync="editedItem.timeTo" | 145 | :return-value.sync="editedItem.timeTo" |
| 146 | lazy | 146 | lazy |
| 147 | transition="scale-transition" | 147 | transition="scale-transition" |
| 148 | offset-y | 148 | offset-y |
| 149 | full-width | 149 | full-width |
| 150 | max-width="290px" | 150 | max-width="290px" |
| 151 | min-width="290px" | 151 | min-width="290px" |
| 152 | > | 152 | > |
| 153 | <v-text-field | 153 | <v-text-field |
| 154 | slot="activator" | 154 | slot="activator" |
| 155 | v-model="editedItem.timeTo" | 155 | v-model="editedItem.timeTo" |
| 156 | label="Select your Time To" | 156 | label="Select your Time To" |
| 157 | append-icon="access_time" | 157 | append-icon="access_time" |
| 158 | readonly | 158 | readonly |
| 159 | ></v-text-field> | 159 | ></v-text-field> |
| 160 | <v-time-picker | 160 | <v-time-picker |
| 161 | v-model="editedItem.timeTo" | 161 | v-model="editedItem.timeTo" |
| 162 | @change="$refs.timeToEdit.save(editedItem.timeTo)" | 162 | @change="$refs.timeToEdit.save(editedItem.timeTo)" |
| 163 | ></v-time-picker> | 163 | ></v-time-picker> |
| 164 | </v-menu> | 164 | </v-menu> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | <v-flex xs12 sm12> | 168 | <v-flex xs12 sm12> |
| 169 | <v-layout> | 169 | <v-layout> |
| 170 | <v-flex xs4 class="pt-4 subheading"> | 170 | <v-flex xs4 class="pt-4 subheading"> |
| 171 | <label class="right">Room:</label> | 171 | <label class="right">Room:</label> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-flex xs7 class="ml-3"> | 173 | <v-flex xs7 class="ml-3"> |
| 174 | <v-text-field | 174 | <v-text-field |
| 175 | placeholder="fill your room" | 175 | placeholder="fill your room" |
| 176 | v-model="editedItem.room" | 176 | v-model="editedItem.room" |
| 177 | @keyup.enter="save" | 177 | @keyup.enter="save" |
| 178 | ></v-text-field> | 178 | ></v-text-field> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-layout> | 180 | </v-layout> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | <v-layout> | 183 | <v-layout> |
| 184 | <v-flex xs12> | 184 | <v-flex xs12> |
| 185 | <v-card-actions> | 185 | <v-card-actions> |
| 186 | <v-spacer></v-spacer> | 186 | <v-spacer></v-spacer> |
| 187 | <v-btn round dark @click="update" class="add-button">Save</v-btn> | 187 | <v-btn round dark @click="update" class="add-button">Save</v-btn> |
| 188 | </v-card-actions> | 188 | </v-card-actions> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | </v-container> | 191 | </v-container> |
| 192 | </v-form> | 192 | </v-form> |
| 193 | </v-card-text> | 193 | </v-card-text> |
| 194 | </v-card> | 194 | </v-card> |
| 195 | </v-dialog> | 195 | </v-dialog> |
| 196 | 196 | ||
| 197 | <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> | 197 | <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> |
| 198 | 198 | ||
| 199 | <v-dialog v-model="profileExamScheduleDialog" max-width="600px" persistent> | 199 | <v-dialog v-model="profileExamScheduleDialog" max-width="600px" persistent> |
| 200 | <v-card flat class="card-style pa-3" dark> | 200 | <v-card flat class="Card-style pa-3"> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs12> | 202 | <v-flex xs12> |
| 203 | <label class="title text-xs-center">View Exam Schedule</label> | 203 | <label class="title text-xs-center">View Exam Schedule</label> |
| 204 | <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> | 204 | <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> |
| 205 | </v-flex> | 205 | </v-flex> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | <v-card-text> | 207 | <v-card-text> |
| 208 | <v-container grid-list-md> | 208 | <v-container grid-list-md> |
| 209 | <v-layout wrap> | 209 | <v-layout wrap> |
| 210 | <v-flex> | 210 | <v-flex> |
| 211 | <v-layout> | 211 | <v-layout> |
| 212 | <v-flex xs5 sm6> | 212 | <v-flex xs5 sm6> |
| 213 | <h5 class="right my-1"> | 213 | <h5 class="right my-1"> |
| 214 | <b>Exam Name:</b> | 214 | <b>Exam Name:</b> |
| 215 | </h5> | 215 | </h5> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex sm6 xs8> | 217 | <v-flex sm6 xs8> |
| 218 | <h5 class="my-1">{{ editedItem.examId}}</h5> | 218 | <h5 class="my-1">{{ editedItem.examId}}</h5> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-layout> | 221 | <v-layout> |
| 222 | <v-flex xs5 sm6> | 222 | <v-flex xs5 sm6> |
| 223 | <h5 class="right my-1"> | 223 | <h5 class="right my-1"> |
| 224 | <b>Class:</b> | 224 | <b>Class:</b> |
| 225 | </h5> | 225 | </h5> |
| 226 | </v-flex> | 226 | </v-flex> |
| 227 | <v-flex sm6 xs8> | 227 | <v-flex sm6 xs8> |
| 228 | <h5 class="my-1">{{ editedItem.classId }}</h5> | 228 | <h5 class="my-1">{{ editedItem.classId }}</h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-layout> | 230 | </v-layout> |
| 231 | <v-layout> | 231 | <v-layout> |
| 232 | <v-flex xs5 sm6> | 232 | <v-flex xs5 sm6> |
| 233 | <h5 class="right my-1"> | 233 | <h5 class="right my-1"> |
| 234 | <b>Section:</b> | 234 | <b>Section:</b> |
| 235 | </h5> | 235 | </h5> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex sm6 xs8> | 237 | <v-flex sm6 xs8> |
| 238 | <h5 class="my-1">{{ editedItem.sectionId }}</h5> | 238 | <h5 class="my-1">{{ editedItem.sectionId }}</h5> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-flex xs5 sm6> | 242 | <v-flex xs5 sm6> |
| 243 | <h5 class="right my-1"> | 243 | <h5 class="right my-1"> |
| 244 | <b>Subject Name:</b> | 244 | <b>Subject Name:</b> |
| 245 | </h5> | 245 | </h5> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex sm6 xs8> | 247 | <v-flex sm6 xs8> |
| 248 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 248 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | </v-layout> | 250 | </v-layout> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-flex xs5 sm6> | 252 | <v-flex xs5 sm6> |
| 253 | <h5 class="right my-1"> | 253 | <h5 class="right my-1"> |
| 254 | <b>Date:</b> | 254 | <b>Date:</b> |
| 255 | </h5> | 255 | </h5> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | <v-flex sm6 xs8> | 257 | <v-flex sm6 xs8> |
| 258 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 258 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 259 | </v-flex> | 259 | </v-flex> |
| 260 | </v-layout> | 260 | </v-layout> |
| 261 | <v-layout> | 261 | <v-layout> |
| 262 | <v-flex xs5 sm6> | 262 | <v-flex xs5 sm6> |
| 263 | <h5 class="right my-1"> | 263 | <h5 class="right my-1"> |
| 264 | <b>Time From:</b> | 264 | <b>Time From:</b> |
| 265 | </h5> | 265 | </h5> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | <v-flex sm6 xs8> | 267 | <v-flex sm6 xs8> |
| 268 | <h5 class="my-1">{{ editedItem.timeFrom }}</h5> | 268 | <h5 class="my-1">{{ editedItem.timeFrom }}</h5> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | </v-layout> | 270 | </v-layout> |
| 271 | <v-layout> | 271 | <v-layout> |
| 272 | <v-flex xs5 sm6> | 272 | <v-flex xs5 sm6> |
| 273 | <h5 class="right my-1"> | 273 | <h5 class="right my-1"> |
| 274 | <b>Time To:</b> | 274 | <b>Time To:</b> |
| 275 | </h5> | 275 | </h5> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | <v-flex sm6 xs8> | 277 | <v-flex sm6 xs8> |
| 278 | <h5 class="my-1">{{ editedItem.timeTo }}</h5> | 278 | <h5 class="my-1">{{ editedItem.timeTo }}</h5> |
| 279 | </v-flex> | 279 | </v-flex> |
| 280 | </v-layout> | 280 | </v-layout> |
| 281 | <v-layout> | 281 | <v-layout> |
| 282 | <v-flex xs5 sm6> | 282 | <v-flex xs5 sm6> |
| 283 | <h5 class="right my-1"> | 283 | <h5 class="right my-1"> |
| 284 | <b>Room:</b> | 284 | <b>Room:</b> |
| 285 | </h5> | 285 | </h5> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | <v-flex sm6 xs8> | 287 | <v-flex sm6 xs8> |
| 288 | <h5 class="my-1">{{ editedItem.room }}</h5> | 288 | <h5 class="my-1">{{ editedItem.room }}</h5> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | </v-layout> | 290 | </v-layout> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | </v-layout> | 292 | </v-layout> |
| 293 | </v-container> | 293 | </v-container> |
| 294 | </v-card-text> | 294 | </v-card-text> |
| 295 | </v-card> | 295 | </v-card> |
| 296 | </v-dialog> | 296 | </v-dialog> |
| 297 | <!-- ***** Exam Schedule TABLE****** --> | 297 | <!-- ***** Exam Schedule TABLE****** --> |
| 298 | <v-toolbar color="transparent" flat> | 298 | <v-toolbar color="transparent" flat> |
| 299 | <v-btn | 299 | <v-btn |
| 300 | fab | 300 | fab |
| 301 | dark | 301 | dark |
| 302 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 302 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 303 | small | 303 | small |
| 304 | @click="addExamScheduleDialog = true" | 304 | @click="addExamScheduleDialog = true" |
| 305 | > | 305 | > |
| 306 | <v-icon dark>add</v-icon> | 306 | <v-icon dark>add</v-icon> |
| 307 | </v-btn> | 307 | </v-btn> |
| 308 | <v-btn | 308 | <v-btn |
| 309 | v-if="role != 'TEACHER' " | 309 | v-if="role != 'TEACHER' " |
| 310 | round | 310 | round |
| 311 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 311 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 312 | dark | 312 | dark |
| 313 | @click="addExamScheduleDialog = true" | 313 | @click="addExamScheduleDialog = true" |
| 314 | > | 314 | > |
| 315 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule | 315 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule |
| 316 | </v-btn> | 316 | </v-btn> |
| 317 | <v-spacer></v-spacer> | 317 | <v-spacer></v-spacer> |
| 318 | <v-flex xs8 sm3 md2 class="mr-3"> | 318 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 319 | <v-select | 319 | <v-select |
| 320 | v-model="getScheduleData.classId" | 320 | v-model="getScheduleData.classId" |
| 321 | label="Select your class" | 321 | label="Select your class" |
| 322 | type="text" | 322 | type="text" |
| 323 | :items="classList" | 323 | :items="classList" |
| 324 | item-text="classNum" | 324 | item-text="classNum" |
| 325 | item-value="_id" | 325 | item-value="_id" |
| 326 | @change="getSections(getScheduleData.classId)" | 326 | @change="getSections(getScheduleData.classId)" |
| 327 | required | 327 | required |
| 328 | ></v-select> | 328 | ></v-select> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs8 sm3 md2 class="mr-3"> | 330 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 331 | <v-select | 331 | <v-select |
| 332 | v-model="getScheduleData.sectionId" | 332 | v-model="getScheduleData.sectionId" |
| 333 | label="Select your section" | 333 | label="Select your section" |
| 334 | type="text" | 334 | type="text" |
| 335 | :items="addSection" | 335 | :items="addSection" |
| 336 | item-text="name" | 336 | item-text="name" |
| 337 | item-value="_id" | 337 | item-value="_id" |
| 338 | @change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)" | 338 | @change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)" |
| 339 | required | 339 | required |
| 340 | ></v-select> | 340 | ></v-select> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | <v-card-title class="body-1" v-show="show"> | 342 | <v-card-title class="body-1" v-show="show"> |
| 343 | <v-btn icon large flat @click="displaySearch"> | 343 | <v-btn icon large flat @click="displaySearch"> |
| 344 | <v-avatar size="27"> | 344 | <v-avatar size="27"> |
| 345 | <img src="/static/icon/search.png" alt="icon" /> | 345 | <img src="/static/icon/search.png" alt="icon" /> |
| 346 | </v-avatar> | 346 | </v-avatar> |
| 347 | </v-btn> | 347 | </v-btn> |
| 348 | </v-card-title> | 348 | </v-card-title> |
| 349 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 349 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 350 | <v-layout> | 350 | <v-layout> |
| 351 | <v-text-field | 351 | <v-text-field |
| 352 | autofocus | 352 | autofocus |
| 353 | v-model="search" | 353 | v-model="search" |
| 354 | label="Search" | 354 | label="Search" |
| 355 | prepend-inner-icon="search" | 355 | prepend-inner-icon="search" |
| 356 | color="primary" | 356 | color="primary" |
| 357 | ></v-text-field> | 357 | ></v-text-field> |
| 358 | <v-icon @click="closeSearch" color="error">close</v-icon> | 358 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | </v-toolbar> | 361 | </v-toolbar> |
| 362 | <v-data-table | 362 | <v-data-table |
| 363 | :headers="headers" | 363 | :headers="headers" |
| 364 | :items="ScheduleData" | 364 | :items="ScheduleData" |
| 365 | :pagination.sync="pagination" | 365 | :pagination.sync="pagination" |
| 366 | :search="search" | 366 | :search="search" |
| 367 | > | 367 | > |
| 368 | <template slot="items" slot-scope="props"> | 368 | <template slot="items" slot-scope="props"> |
| 369 | <tr class="tr"> | 369 | <tr class="tr"> |
| 370 | <td class="td td-row">{{ props.index + 1}}</td> | 370 | <td class="td td-row">{{ props.index + 1}}</td> |
| 371 | <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> | 371 | <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> |
| 372 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> | 372 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> |
| 373 | <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> | 373 | <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> |
| 374 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 374 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 375 | <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> | 375 | <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> |
| 376 | <td class="td td-row text-xs-center">{{ props.item.room }}</td> | 376 | <td class="td td-row text-xs-center">{{ props.item.room }}</td> |
| 377 | <td class="td td-row text-xs-center"> | 377 | <td class="td td-row text-xs-center"> |
| 378 | <span> | 378 | <span> |
| 379 | <v-tooltip top> | 379 | <v-tooltip top> |
| 380 | <img | 380 | <img |
| 381 | slot="activator" | 381 | slot="activator" |
| 382 | style="cursor:pointer; width:25px; height:25px; " | 382 | style="cursor:pointer; width:25px; height:25px; " |
| 383 | class="mr-3" | 383 | class="mr-3" |
| 384 | @click="profile(props.item)" | 384 | @click="profile(props.item)" |
| 385 | src="/static/icon/view.png" | 385 | src="/static/icon/view.png" |
| 386 | /> | 386 | /> |
| 387 | <span>View</span> | 387 | <span>View</span> |
| 388 | </v-tooltip> | 388 | </v-tooltip> |
| 389 | <v-tooltip top v-if="role != 'TEACHER' "> | 389 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 390 | <img | 390 | <img |
| 391 | slot="activator" | 391 | slot="activator" |
| 392 | style="cursor:pointer; width:20px; height:18px; " | 392 | style="cursor:pointer; width:20px; height:18px; " |
| 393 | class="mr-3" | 393 | class="mr-3" |
| 394 | @click="editItem(props.item)" | 394 | @click="editItem(props.item)" |
| 395 | src="/static/icon/edit.png" | 395 | src="/static/icon/edit.png" |
| 396 | /> | 396 | /> |
| 397 | <span>Edit</span> | 397 | <span>Edit</span> |
| 398 | </v-tooltip> | 398 | </v-tooltip> |
| 399 | <v-tooltip top v-if="role != 'TEACHER' "> | 399 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 400 | <img | 400 | <img |
| 401 | slot="activator" | 401 | slot="activator" |
| 402 | style="cursor:pointer; width:20px; height:20px; " | 402 | style="cursor:pointer; width:20px; height:20px; " |
| 403 | @click="deleteSchedule(props.item)" | 403 | @click="deleteSchedule(props.item)" |
| 404 | src="/static/icon/delete.png" | 404 | src="/static/icon/delete.png" |
| 405 | /> | 405 | /> |
| 406 | <span>Delete</span> | 406 | <span>Delete</span> |
| 407 | </v-tooltip> | 407 | </v-tooltip> |
| 408 | </span> | 408 | </span> |
| 409 | </td> | 409 | </td> |
| 410 | </tr> | 410 | </tr> |
| 411 | </template> | 411 | </template> |
| 412 | <v-alert | 412 | <v-alert |
| 413 | slot="no-results" | 413 | slot="no-results" |
| 414 | :value="true" | 414 | :value="true" |
| 415 | color="error" | 415 | color="error" |
| 416 | icon="warning" | 416 | icon="warning" |
| 417 | >Your search for "{{ search }}" found no results.</v-alert> | 417 | >Your search for "{{ search }}" found no results.</v-alert> |
| 418 | </v-data-table> | 418 | </v-data-table> |
| 419 | 419 | ||
| 420 | <!-- ****** ADD Exam Schedule ****** --> | 420 | <!-- ****** ADD Exam Schedule ****** --> |
| 421 | <v-dialog | 421 | <v-dialog |
| 422 | v-model="addExamScheduleDialog" | 422 | v-model="addExamScheduleDialog" |
| 423 | max-width="600" | 423 | max-width="600" |
| 424 | v-if="addExamScheduleDialog" | 424 | v-if="addExamScheduleDialog" |
| 425 | persistent | 425 | persistent |
| 426 | > | 426 | > |
| 427 | <v-card flat class="card-style pa-2" dark> | 427 | <v-card flat class="Card-style pa-2"> |
| 428 | <v-layout> | 428 | <v-layout> |
| 429 | <v-flex xs12> | 429 | <v-flex xs12> |
| 430 | <label class="title text-xs-center">Add Exam Schedule</label> | 430 | <label class="title text-xs-center">Add Exam Schedule</label> |
| 431 | <v-icon | 431 | <v-icon |
| 432 | size="24" | 432 | size="24" |
| 433 | class="right" | 433 | class="right" |
| 434 | @click="$refs.form.reset();addExamScheduleDialog = false" | 434 | @click="$refs.form.reset();addExamScheduleDialog = false" |
| 435 | >cancel</v-icon> | 435 | >cancel</v-icon> |
| 436 | </v-flex> | 436 | </v-flex> |
| 437 | </v-layout> | 437 | </v-layout> |
| 438 | <v-form ref="form" v-model="valid" lazy-validation> | 438 | <v-form ref="form" v-model="valid" lazy-validation> |
| 439 | <v-container fluid> | 439 | <v-container fluid> |
| 440 | <v-flex xs12> | 440 | <v-flex xs12> |
| 441 | <v-layout> | 441 | <v-layout> |
| 442 | <v-flex xs5 class="pt-4 subheading"> | 442 | <v-flex xs5 class="pt-4 subheading"> |
| 443 | <label class="right">Exam Name:</label> | 443 | <label class="right">Exam Name:</label> |
| 444 | </v-flex> | 444 | </v-flex> |
| 445 | <v-flex xs7 sm7 md6 class="ml-3"> | 445 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 446 | <v-select | 446 | <v-select |
| 447 | label="Select your Exam Name" | 447 | label="Select your Exam Name" |
| 448 | :rules="examRules" | 448 | :rules="examRules" |
| 449 | :items="examList" | 449 | :items="examList" |
| 450 | v-model="addSchedule.examId" | 450 | v-model="addSchedule.examId" |
| 451 | item-text="examName" | 451 | item-text="examName" |
| 452 | item-value="_id" | 452 | item-value="_id" |
| 453 | ></v-select> | 453 | ></v-select> |
| 454 | </v-flex> | 454 | </v-flex> |
| 455 | </v-layout> | 455 | </v-layout> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | <v-flex xs12> | 457 | <v-flex xs12> |
| 458 | <v-layout> | 458 | <v-layout> |
| 459 | <v-flex xs5 class="pt-4 subheading"> | 459 | <v-flex xs5 class="pt-4 subheading"> |
| 460 | <label class="right">Class:</label> | 460 | <label class="right">Class:</label> |
| 461 | </v-flex> | 461 | </v-flex> |
| 462 | <v-flex xs7 sm7 md6 class="ml-3"> | 462 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 463 | <v-select | 463 | <v-select |
| 464 | v-model="addSchedule.classId" | 464 | v-model="addSchedule.classId" |
| 465 | label="Select your class" | 465 | label="Select your class" |
| 466 | type="text" | 466 | type="text" |
| 467 | :items="classList" | 467 | :items="classList" |
| 468 | item-text="classNum" | 468 | item-text="classNum" |
| 469 | item-value="_id" | 469 | item-value="_id" |
| 470 | :rules="classRules" | 470 | :rules="classRules" |
| 471 | @change="getSections(addSchedule.classId)" | 471 | @change="getSections(addSchedule.classId)" |
| 472 | required | 472 | required |
| 473 | ></v-select> | 473 | ></v-select> |
| 474 | </v-flex> | 474 | </v-flex> |
| 475 | </v-layout> | 475 | </v-layout> |
| 476 | </v-flex> | 476 | </v-flex> |
| 477 | <v-flex xs12> | 477 | <v-flex xs12> |
| 478 | <v-layout> | 478 | <v-layout> |
| 479 | <v-flex xs5 class="pt-4 subheading"> | 479 | <v-flex xs5 class="pt-4 subheading"> |
| 480 | <label class="right">Section:</label> | 480 | <label class="right">Section:</label> |
| 481 | </v-flex> | 481 | </v-flex> |
| 482 | <v-flex xs7 sm7 md6 class="ml-3"> | 482 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 483 | <v-select | 483 | <v-select |
| 484 | :items="addSection" | 484 | :items="addSection" |
| 485 | label="Select Section" | 485 | label="Select Section" |
| 486 | v-model="addSchedule.sectionId" | 486 | v-model="addSchedule.sectionId" |
| 487 | item-text="name" | 487 | item-text="name" |
| 488 | item-value="_id" | 488 | item-value="_id" |
| 489 | name="Select Section" | 489 | name="Select Section" |
| 490 | :rules="sectionRules" | 490 | :rules="sectionRules" |
| 491 | required | 491 | required |
| 492 | ></v-select> | 492 | ></v-select> |
| 493 | </v-flex> | 493 | </v-flex> |
| 494 | </v-layout> | 494 | </v-layout> |
| 495 | </v-flex> | 495 | </v-flex> |
| 496 | <v-flex xs12> | 496 | <v-flex xs12> |
| 497 | <v-layout> | 497 | <v-layout> |
| 498 | <v-flex xs5 class="pt-4 subheading"> | 498 | <v-flex xs5 class="pt-4 subheading"> |
| 499 | <label class="right">Subject Name:</label> | 499 | <label class="right">Subject Name:</label> |
| 500 | </v-flex> | 500 | </v-flex> |
| 501 | <v-flex xs7 sm7 md6 class="ml-3"> | 501 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 502 | <v-select | 502 | <v-select |
| 503 | :items="subjects" | 503 | :items="subjects" |
| 504 | label="Select Subject" | 504 | label="Select Subject" |
| 505 | v-model="addSchedule.subjectName" | 505 | v-model="addSchedule.subjectName" |
| 506 | item-text="subjectName" | 506 | item-text="subjectName" |
| 507 | item-value="subjectName" | 507 | item-value="subjectName" |
| 508 | name="Select Section" | 508 | name="Select Section" |
| 509 | :rules="subjectRules" | 509 | :rules="subjectRules" |
| 510 | required | 510 | required |
| 511 | ></v-select> | 511 | ></v-select> |
| 512 | </v-flex> | 512 | </v-flex> |
| 513 | </v-layout> | 513 | </v-layout> |
| 514 | </v-flex> | 514 | </v-flex> |
| 515 | <v-flex xs12> | 515 | <v-flex xs12> |
| 516 | <v-layout> | 516 | <v-layout> |
| 517 | <v-flex xs5 class="pt-4 subheading"> | 517 | <v-flex xs5 class="pt-4 subheading"> |
| 518 | <label class="right">Date:</label> | 518 | <label class="right">Date:</label> |
| 519 | </v-flex> | 519 | </v-flex> |
| 520 | <v-flex xs7 sm7 md6 class="ml-3"> | 520 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 521 | <v-menu | 521 | <v-menu |
| 522 | ref="menu2" | 522 | ref="menu2" |
| 523 | :close-on-content-click="false" | 523 | :close-on-content-click="false" |
| 524 | v-model="menu2" | 524 | v-model="menu2" |
| 525 | :nudge-right="40" | 525 | :nudge-right="40" |
| 526 | :return-value.sync="addSchedule.date" | 526 | :return-value.sync="addSchedule.date" |
| 527 | lazy | 527 | lazy |
| 528 | transition="scale-transition" | 528 | transition="scale-transition" |
| 529 | offset-y | 529 | offset-y |
| 530 | full-width | 530 | full-width |
| 531 | min-width="290px" | 531 | min-width="290px" |
| 532 | > | 532 | > |
| 533 | <v-text-field | 533 | <v-text-field |
| 534 | slot="activator" | 534 | slot="activator" |
| 535 | v-model="addSchedule.date" | 535 | v-model="addSchedule.date" |
| 536 | :rules="examScheduleDateRules" | 536 | :rules="examScheduleDateRules" |
| 537 | label="Select Date" | 537 | label="Select Date" |
| 538 | append-icon="event" | 538 | append-icon="event" |
| 539 | readonly | 539 | readonly |
| 540 | ></v-text-field> | 540 | ></v-text-field> |
| 541 | <v-date-picker | 541 | <v-date-picker |
| 542 | v-model="addSchedule.date" | 542 | v-model="addSchedule.date" |
| 543 | @input="$refs.menu2.save(addSchedule.date)" | 543 | @input="$refs.menu2.save(addSchedule.date)" |
| 544 | ></v-date-picker> | 544 | ></v-date-picker> |
| 545 | </v-menu> | 545 | </v-menu> |
| 546 | </v-flex> | 546 | </v-flex> |
| 547 | </v-layout> | 547 | </v-layout> |
| 548 | </v-flex> | 548 | </v-flex> |
| 549 | <v-flex xs12> | 549 | <v-flex xs12> |
| 550 | <v-layout> | 550 | <v-layout> |
| 551 | <v-flex xs5 class="pt-4 subheading"> | 551 | <v-flex xs5 class="pt-4 subheading"> |
| 552 | <label class="right">Time From:</label> | 552 | <label class="right">Time From:</label> |
| 553 | </v-flex> | 553 | </v-flex> |
| 554 | <v-flex xs7 sm7 md6 class="ml-3"> | 554 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 555 | <v-menu | 555 | <v-menu |
| 556 | ref="menuA" | 556 | ref="menuA" |
| 557 | :close-on-content-click="false" | 557 | :close-on-content-click="false" |
| 558 | v-model="menuB" | 558 | v-model="menuB" |
| 559 | :nudge-right="40" | 559 | :nudge-right="40" |
| 560 | :return-value.sync="addSchedule.timeFrom" | 560 | :return-value.sync="addSchedule.timeFrom" |
| 561 | lazy | 561 | lazy |
| 562 | transition="scale-transition" | 562 | transition="scale-transition" |
| 563 | offset-y | 563 | offset-y |
| 564 | full-width | 564 | full-width |
| 565 | max-width="290px" | 565 | max-width="290px" |
| 566 | min-width="290px" | 566 | min-width="290px" |
| 567 | > | 567 | > |
| 568 | <v-text-field | 568 | <v-text-field |
| 569 | slot="activator" | 569 | slot="activator" |
| 570 | v-model="addSchedule.timeIn" | 570 | v-model="addSchedule.timeIn" |
| 571 | label="Select your time From" | 571 | label="Select your time From" |
| 572 | append-icon="access_time" | 572 | append-icon="access_time" |
| 573 | :rules="timeInRules" | 573 | :rules="timeInRules" |
| 574 | readonly | 574 | readonly |
| 575 | ></v-text-field> | 575 | ></v-text-field> |
| 576 | <v-time-picker | 576 | <v-time-picker |
| 577 | v-model="addSchedule.timeIn" | 577 | v-model="addSchedule.timeIn" |
| 578 | @change="$refs.menuA.save(addSchedule.timeIn)" | 578 | @change="$refs.menuA.save(addSchedule.timeIn)" |
| 579 | ></v-time-picker> | 579 | ></v-time-picker> |
| 580 | </v-menu> | 580 | </v-menu> |
| 581 | </v-flex> | 581 | </v-flex> |
| 582 | </v-layout> | 582 | </v-layout> |
| 583 | </v-flex> | 583 | </v-flex> |
| 584 | <v-flex xs12> | 584 | <v-flex xs12> |
| 585 | <v-layout> | 585 | <v-layout> |
| 586 | <v-flex xs5 class="pt-4 subheading"> | 586 | <v-flex xs5 class="pt-4 subheading"> |
| 587 | <label class="right">Time To:</label> | 587 | <label class="right">Time To:</label> |
| 588 | </v-flex> | 588 | </v-flex> |
| 589 | <v-flex xs7 sm7 md6 class="ml-3"> | 589 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 590 | <v-menu | 590 | <v-menu |
| 591 | ref="menu" | 591 | ref="menu" |
| 592 | :close-on-content-click="false" | 592 | :close-on-content-click="false" |
| 593 | v-model="menu1" | 593 | v-model="menu1" |
| 594 | :nudge-right="40" | 594 | :nudge-right="40" |
| 595 | :return-value.sync="addSchedule.timeTo" | 595 | :return-value.sync="addSchedule.timeTo" |
| 596 | lazy | 596 | lazy |
| 597 | transition="scale-transition" | 597 | transition="scale-transition" |
| 598 | offset-y | 598 | offset-y |
| 599 | full-width | 599 | full-width |
| 600 | max-width="290px" | 600 | max-width="290px" |
| 601 | min-width="290px" | 601 | min-width="290px" |
| 602 | > | 602 | > |
| 603 | <v-text-field | 603 | <v-text-field |
| 604 | slot="activator" | 604 | slot="activator" |
| 605 | v-model="addSchedule.timeTo" | 605 | v-model="addSchedule.timeTo" |
| 606 | label="Select your Time To" | 606 | label="Select your Time To" |
| 607 | append-icon="access_time" | 607 | append-icon="access_time" |
| 608 | :rules="timeOutRules" | 608 | :rules="timeOutRules" |
| 609 | readonly | 609 | readonly |
| 610 | ></v-text-field> | 610 | ></v-text-field> |
| 611 | <v-time-picker | 611 | <v-time-picker |
| 612 | v-model="addSchedule.timeTo" | 612 | v-model="addSchedule.timeTo" |
| 613 | @change="$refs.menu.save(addSchedule.timeTo)" | 613 | @change="$refs.menu.save(addSchedule.timeTo)" |
| 614 | ></v-time-picker> | 614 | ></v-time-picker> |
| 615 | </v-menu> | 615 | </v-menu> |
| 616 | </v-flex> | 616 | </v-flex> |
| 617 | </v-layout> | 617 | </v-layout> |
| 618 | </v-flex> | 618 | </v-flex> |
| 619 | <v-flex xs12> | 619 | <v-flex xs12> |
| 620 | <v-layout> | 620 | <v-layout> |
| 621 | <v-flex xs5 class="pt-4 subheading"> | 621 | <v-flex xs5 class="pt-4 subheading"> |
| 622 | <label class="right">Room:</label> | 622 | <label class="right">Room:</label> |
| 623 | </v-flex> | 623 | </v-flex> |
| 624 | <v-flex xs7 sm7 md6 class="ml-3"> | 624 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 625 | <v-text-field | 625 | <v-text-field |
| 626 | placeholder="fill your room" | 626 | placeholder="fill your room" |
| 627 | :rules="roomRules" | 627 | :rules="roomRules" |
| 628 | v-model="addSchedule.room" | 628 | v-model="addSchedule.room" |
| 629 | @keyup.enter="submit" | 629 | @keyup.enter="submit" |
| 630 | ></v-text-field> | 630 | ></v-text-field> |
| 631 | </v-flex> | 631 | </v-flex> |
| 632 | </v-layout> | 632 | </v-layout> |
| 633 | </v-flex> | 633 | </v-flex> |
| 634 | <v-layout> | 634 | <v-layout> |
| 635 | <v-flex xs12> | 635 | <v-flex xs12> |
| 636 | <v-card-actions> | 636 | <v-card-actions> |
| 637 | <v-spacer class="hidden-xs-only"></v-spacer> | 637 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 638 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 638 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 639 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 639 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 640 | </v-card-actions> | 640 | </v-card-actions> |
| 641 | </v-flex> | 641 | </v-flex> |
| 642 | </v-layout> | 642 | </v-layout> |
| 643 | </v-container> | 643 | </v-container> |
| 644 | </v-form> | 644 | </v-form> |
| 645 | </v-card> | 645 | </v-card> |
| 646 | </v-dialog> | 646 | </v-dialog> |
| 647 | <v-snackbar | 647 | <v-snackbar |
| 648 | :timeout="timeout" | 648 | :timeout="timeout" |
| 649 | :top="y === 'top'" | 649 | :top="y === 'top'" |
| 650 | :right="x === 'right'" | 650 | :right="x === 'right'" |
| 651 | :vertical="mode === 'vertical'" | 651 | :vertical="mode === 'vertical'" |
| 652 | v-model="snackbar" | 652 | v-model="snackbar" |
| 653 | :color="color" | 653 | :color="color" |
| 654 | >{{ text }}</v-snackbar> | 654 | >{{ text }}</v-snackbar> |
| 655 | <div class="loader" v-if="showLoader"> | 655 | <div class="loader" v-if="showLoader"> |
| 656 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 656 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 657 | </div> | 657 | </div> |
| 658 | </v-container> | 658 | </v-container> |
| 659 | </template> | 659 | </template> |
| 660 | 660 | ||
| 661 | <script> | 661 | <script> |
| 662 | import http from "@/Services/http.js"; | 662 | import http from "@/Services/http.js"; |
| 663 | import moment from "moment"; | 663 | import moment from "moment"; |
| 664 | 664 | ||
| 665 | export default { | 665 | export default { |
| 666 | data: () => ({ | 666 | data: () => ({ |
| 667 | snackbar: false, | 667 | snackbar: false, |
| 668 | date: null, | 668 | date: null, |
| 669 | editDate: false, | 669 | editDate: false, |
| 670 | menu1: false, | 670 | menu1: false, |
| 671 | menuB: false, | 671 | menuB: false, |
| 672 | menu2: false, | 672 | menu2: false, |
| 673 | menuEdit: false, | 673 | menuEdit: false, |
| 674 | timeToEdit: false, | 674 | timeToEdit: false, |
| 675 | show: true, | 675 | show: true, |
| 676 | showSearch: false, | 676 | showSearch: false, |
| 677 | addExamScheduleDialog: false, | 677 | addExamScheduleDialog: false, |
| 678 | color: "", | 678 | color: "", |
| 679 | y: "top", | 679 | y: "top", |
| 680 | x: "right", | 680 | x: "right", |
| 681 | mode: "", | 681 | mode: "", |
| 682 | timeout: 10000, | 682 | timeout: 10000, |
| 683 | text: "", | 683 | text: "", |
| 684 | loading: false, | 684 | loading: false, |
| 685 | date: null, | 685 | date: null, |
| 686 | search: "", | 686 | search: "", |
| 687 | showLoader: false, | 687 | showLoader: false, |
| 688 | editExamScheduleDialog: false, | 688 | editExamScheduleDialog: false, |
| 689 | profileExamScheduleDialog: false, | 689 | profileExamScheduleDialog: false, |
| 690 | valid: true, | 690 | valid: true, |
| 691 | role: "", | 691 | role: "", |
| 692 | pagination: { | 692 | pagination: { |
| 693 | rowsPerPage: 10, | 693 | rowsPerPage: 10, |
| 694 | }, | 694 | }, |
| 695 | examRules: [(v) => !!v || "Exam Name is required"], | 695 | examRules: [(v) => !!v || "Exam Name is required"], |
| 696 | classRules: [(v) => !!v || "Class Name is required"], | 696 | classRules: [(v) => !!v || "Class Name is required"], |
| 697 | sectionRules: [(v) => !!v || "section is required"], | 697 | sectionRules: [(v) => !!v || "section is required"], |
| 698 | subjectRules: [(v) => !!v || "Subject is required"], | 698 | subjectRules: [(v) => !!v || "Subject is required"], |
| 699 | timeInRules: [(v) => !!v || "Time In is required"], | 699 | timeInRules: [(v) => !!v || "Time In is required"], |
| 700 | timeOutRules: [(v) => !!v || "time Out s is required"], | 700 | timeOutRules: [(v) => !!v || "time Out s is required"], |
| 701 | roomRules: [(v) => !!v || "Room is required"], | 701 | roomRules: [(v) => !!v || "Room is required"], |
| 702 | examScheduleDateRules: [(v) => !!v || "Date is required"], | 702 | examScheduleDateRules: [(v) => !!v || "Date is required"], |
| 703 | headers: [ | 703 | headers: [ |
| 704 | { | 704 | { |
| 705 | align: "", | 705 | align: "", |
| 706 | text: "No", | 706 | text: "No", |
| 707 | sortable: false, | 707 | sortable: false, |
| 708 | value: "No", | 708 | value: "No", |
| 709 | }, | 709 | }, |
| 710 | { | 710 | { |
| 711 | text: "Exam Name", | 711 | text: "Exam Name", |
| 712 | vaue: "examId.examName", | 712 | vaue: "examId.examName", |
| 713 | sortable: false, | 713 | sortable: false, |
| 714 | align: "center", | 714 | align: "center", |
| 715 | }, | 715 | }, |
| 716 | { | 716 | { |
| 717 | text: "Class", | 717 | text: "Class", |
| 718 | value: "classId.classNum", | 718 | value: "classId.classNum", |
| 719 | sortable: false, | 719 | sortable: false, |
| 720 | align: "center", | 720 | align: "center", |
| 721 | }, | 721 | }, |
| 722 | // { | 722 | // { |
| 723 | // text: "Section", | 723 | // text: "Section", |
| 724 | // value: "sectionId.name", | 724 | // value: "sectionId.name", |
| 725 | // sortable: false, | 725 | // sortable: false, |
| 726 | // align: "center" | 726 | // align: "center" |
| 727 | // }, | 727 | // }, |
| 728 | { | 728 | { |
| 729 | text: "Subject Name", | 729 | text: "Subject Name", |
| 730 | value: "subjectName", | 730 | value: "subjectName", |
| 731 | sortable: false, | 731 | sortable: false, |
| 732 | align: "center", | 732 | align: "center", |
| 733 | }, | 733 | }, |
| 734 | { | 734 | { |
| 735 | text: "Date", | 735 | text: "Date", |
| 736 | value: "date", | 736 | value: "date", |
| 737 | sortable: false, | 737 | sortable: false, |
| 738 | align: "center", | 738 | align: "center", |
| 739 | }, | 739 | }, |
| 740 | { | 740 | { |
| 741 | text: "Time", | 741 | text: "Time", |
| 742 | value: "timeFrom", | 742 | value: "timeFrom", |
| 743 | sortable: false, | 743 | sortable: false, |
| 744 | align: "center", | 744 | align: "center", |
| 745 | }, | 745 | }, |
| 746 | { | 746 | { |
| 747 | text: "Room", | 747 | text: "Room", |
| 748 | value: "room", | 748 | value: "room", |
| 749 | sortable: false, | 749 | sortable: false, |
| 750 | align: "center", | 750 | align: "center", |
| 751 | }, | 751 | }, |
| 752 | { text: "Action", value: "", sortable: false, align: "center" }, | 752 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 753 | ], | 753 | ], |
| 754 | classList: [], | 754 | classList: [], |
| 755 | addSection: [], | 755 | addSection: [], |
| 756 | examList: [], | 756 | examList: [], |
| 757 | subjects: [], | 757 | subjects: [], |
| 758 | addSchedule: {}, | 758 | addSchedule: {}, |
| 759 | editedItem: { | 759 | editedItem: { |
| 760 | sectionId: { | 760 | sectionId: { |
| 761 | name: "", | 761 | name: "", |
| 762 | }, | 762 | }, |
| 763 | }, | 763 | }, |
| 764 | getScheduleData: {}, | 764 | getScheduleData: {}, |
| 765 | ScheduleData: [], | 765 | ScheduleData: [], |
| 766 | token: "", | 766 | token: "", |
| 767 | }), | 767 | }), |
| 768 | watch: { | 768 | watch: { |
| 769 | addExamScheduleDialog: function (val) { | 769 | addExamScheduleDialog: function (val) { |
| 770 | if (!val) { | 770 | if (!val) { |
| 771 | this.addSchedule = []; | 771 | this.addSchedule = []; |
| 772 | } | 772 | } |
| 773 | }, | 773 | }, |
| 774 | }, | 774 | }, |
| 775 | methods: { | 775 | methods: { |
| 776 | dates: function (date) { | 776 | dates: function (date) { |
| 777 | return moment(date).format("MMMM DD, YYYY"); | 777 | return moment(date).format("MMMM DD, YYYY"); |
| 778 | }, | 778 | }, |
| 779 | pickFile() { | 779 | pickFile() { |
| 780 | this.$refs.image.click(); | 780 | this.$refs.image.click(); |
| 781 | }, | 781 | }, |
| 782 | getSchedulesList() { | 782 | getSchedulesList() { |
| 783 | if (this.addSchedule.classId) { | 783 | if (this.addSchedule.classId) { |
| 784 | this.getScheduleData.classId = this.addSchedule.classId; | 784 | this.getScheduleData.classId = this.addSchedule.classId; |
| 785 | } | 785 | } |
| 786 | this.showLoader = true; | 786 | this.showLoader = true; |
| 787 | http() | 787 | http() |
| 788 | .get("/getSchedulesList", { | 788 | .get("/getSchedulesList", { |
| 789 | params: { | 789 | params: { |
| 790 | classId: this.getScheduleData.classId, | 790 | classId: this.getScheduleData.classId, |
| 791 | sectionId: this.getScheduleData.sectionId, | 791 | sectionId: this.getScheduleData.sectionId, |
| 792 | }, | 792 | }, |
| 793 | headers: { Authorization: "Bearer " + this.token }, | 793 | headers: { Authorization: "Bearer " + this.token }, |
| 794 | }) | 794 | }) |
| 795 | .then((response) => { | 795 | .then((response) => { |
| 796 | this.ScheduleData = response.data.data; | 796 | this.ScheduleData = response.data.data; |
| 797 | // console.log("this.ScheduleData", this.ScheduleData); | 797 | // console.log("this.ScheduleData", this.ScheduleData); |
| 798 | this.showLoader = false; | 798 | this.showLoader = false; |
| 799 | }) | 799 | }) |
| 800 | .catch((error) => { | 800 | .catch((error) => { |
| 801 | // console.log("err====>", err); | 801 | // console.log("err====>", err); |
| 802 | this.showLoader = false; | 802 | this.showLoader = false; |
| 803 | this.loadingSearch = false; | 803 | this.loadingSearch = false; |
| 804 | this.snackbar = true; | 804 | this.snackbar = true; |
| 805 | this.color = "error"; | 805 | this.color = "error"; |
| 806 | this.text = error.response.data.message; | 806 | this.text = error.response.data.message; |
| 807 | if (error.response.status === 401) { | 807 | if (error.response.status === 401) { |
| 808 | this.$router.replace({ path: "/" }); | 808 | this.$router.replace({ path: "/" }); |
| 809 | this.$store.dispatch("setToken", null); | 809 | this.$store.dispatch("setToken", null); |
| 810 | this.$store.dispatch("Id", null); | 810 | this.$store.dispatch("Id", null); |
| 811 | } | 811 | } |
| 812 | }); | 812 | }); |
| 813 | }, | 813 | }, |
| 814 | editItem(item) { | 814 | editItem(item) { |
| 815 | // console.log("item", item); | 815 | // console.log("item", item); |
| 816 | this.editedIndex = this.ScheduleData.indexOf(item); | 816 | this.editedIndex = this.ScheduleData.indexOf(item); |
| 817 | this.editedItem = Object.assign({}, item); | 817 | this.editedItem = Object.assign({}, item); |
| 818 | this.editedItem.examId = this.editedItem.examId._id; | 818 | this.editedItem.examId = this.editedItem.examId._id; |
| 819 | this.editedItem.classId = this.editedItem.classId._id; | 819 | this.editedItem.classId = this.editedItem.classId._id; |
| 820 | this.editedItem.sectionId = | 820 | this.editedItem.sectionId = |
| 821 | this.editedItem.sectionId === null | 821 | this.editedItem.sectionId === null |
| 822 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") | 822 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") |
| 823 | : this.editedItem.sectionId._id; | 823 | : this.editedItem.sectionId._id; |
| 824 | this.editedItem.date = | 824 | this.editedItem.date = |
| 825 | this.editedItem.date != undefined | 825 | this.editedItem.date != undefined |
| 826 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 826 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 827 | : (this.editedItem.date = ""); | 827 | : (this.editedItem.date = ""); |
| 828 | this.editExamScheduleDialog = true; | 828 | this.editExamScheduleDialog = true; |
| 829 | }, | 829 | }, |
| 830 | profile(item) { | 830 | profile(item) { |
| 831 | this.editedIndex = this.ScheduleData.indexOf(item); | 831 | this.editedIndex = this.ScheduleData.indexOf(item); |
| 832 | this.editedItem = Object.assign({}, item); | 832 | this.editedItem = Object.assign({}, item); |
| 833 | this.editedItem.examId = this.editedItem.examId.examName; | 833 | this.editedItem.examId = this.editedItem.examId.examName; |
| 834 | this.editedItem.classId = this.editedItem.classId.classNum; | 834 | this.editedItem.classId = this.editedItem.classId.classNum; |
| 835 | this.editedItem.sectionId = | 835 | this.editedItem.sectionId = |
| 836 | this.editedItem.sectionId === null | 836 | this.editedItem.sectionId === null |
| 837 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") | 837 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") |
| 838 | : this.editedItem.sectionId.name; | 838 | : this.editedItem.sectionId.name; |
| 839 | this.profileExamScheduleDialog = true; | 839 | this.profileExamScheduleDialog = true; |
| 840 | }, | 840 | }, |
| 841 | deleteSchedule(item) { | 841 | deleteSchedule(item) { |
| 842 | let deleteSchedule = { | 842 | let deleteSchedule = { |
| 843 | scheduleId: item._id, | 843 | scheduleId: item._id, |
| 844 | }; | 844 | }; |
| 845 | http() | 845 | http() |
| 846 | .delete( | 846 | .delete( |
| 847 | "/deleteSchedule", | 847 | "/deleteSchedule", |
| 848 | confirm("Are you sure you want to Delete this?") && { | 848 | confirm("Are you sure you want to Delete this?") && { |
| 849 | params: deleteSchedule, | 849 | params: deleteSchedule, |
| 850 | } | 850 | } |
| 851 | ) | 851 | ) |
| 852 | .then((response) => { | 852 | .then((response) => { |
| 853 | this.snackbar = true; | 853 | this.snackbar = true; |
| 854 | this.text = response.data.message; | 854 | this.text = response.data.message; |
| 855 | this.color = "green"; | 855 | this.color = "green"; |
| 856 | this.getSchedulesList(); | 856 | this.getSchedulesList(); |
| 857 | }) | 857 | }) |
| 858 | .catch((error) => { | 858 | .catch((error) => { |
| 859 | this.snackbar = true; | 859 | this.snackbar = true; |
| 860 | this.color = "error"; | 860 | this.color = "error"; |
| 861 | this.text = error.response.data.message; | 861 | this.text = error.response.data.message; |
| 862 | }); | 862 | }); |
| 863 | }, | 863 | }, |
| 864 | close() { | 864 | close() { |
| 865 | this.dialog = false; | 865 | this.dialog = false; |
| 866 | }, | 866 | }, |
| 867 | submit() { | 867 | submit() { |
| 868 | if (this.$refs.form.validate()) { | 868 | if (this.$refs.form.validate()) { |
| 869 | this.loading = true; | 869 | this.loading = true; |
| 870 | http() | 870 | http() |
| 871 | .post("/createSchedule", this.addSchedule) | 871 | .post("/createSchedule", this.addSchedule) |
| 872 | .then((response) => { | 872 | .then((response) => { |
| 873 | this.loading = false; | 873 | this.loading = false; |
| 874 | this.snackbar = true; | 874 | this.snackbar = true; |
| 875 | this.text = response.data.message; | 875 | this.text = response.data.message; |
| 876 | this.color = "green"; | 876 | this.color = "green"; |
| 877 | http() | 877 | http() |
| 878 | .get("/getSchedulesList", { | 878 | .get("/getSchedulesList", { |
| 879 | params: { | 879 | params: { |
| 880 | classId: this.addSchedule.classId, | 880 | classId: this.addSchedule.classId, |
| 881 | sectionId: this.addSchedule.sectionId, | 881 | sectionId: this.addSchedule.sectionId, |
| 882 | }, | 882 | }, |
| 883 | headers: { Authorization: "Bearer " + this.token }, | 883 | headers: { Authorization: "Bearer " + this.token }, |
| 884 | }) | 884 | }) |
| 885 | .then((response) => { | 885 | .then((response) => { |
| 886 | this.ScheduleData = response.data.data; | 886 | this.ScheduleData = response.data.data; |
| 887 | this.showLoader = false; | 887 | this.showLoader = false; |
| 888 | }) | 888 | }) |
| 889 | .catch((error) => { | 889 | .catch((error) => { |
| 890 | this.showLoader = false; | 890 | this.showLoader = false; |
| 891 | this.loadingSearch = false; | 891 | this.loadingSearch = false; |
| 892 | this.snackbar = true; | 892 | this.snackbar = true; |
| 893 | this.color = "error"; | 893 | this.color = "error"; |
| 894 | this.text = error.response.data.message; | 894 | this.text = error.response.data.message; |
| 895 | if (error.response.status === 401) { | 895 | if (error.response.status === 401) { |
| 896 | this.$router.replace({ path: "/" }); | 896 | this.$router.replace({ path: "/" }); |
| 897 | this.$store.dispatch("setToken", null); | 897 | this.$store.dispatch("setToken", null); |
| 898 | this.$store.dispatch("Id", null); | 898 | this.$store.dispatch("Id", null); |
| 899 | } | 899 | } |
| 900 | }); | 900 | }); |
| 901 | this.addExamScheduleDialog = false; | 901 | this.addExamScheduleDialog = false; |
| 902 | // this.clear(); | 902 | // this.clear(); |
| 903 | }) | 903 | }) |
| 904 | .catch((error) => { | 904 | .catch((error) => { |
| 905 | this.snackbar = true; | 905 | this.snackbar = true; |
| 906 | this.text = error.response.data.message; | 906 | this.text = error.response.data.message; |
| 907 | this.color = "red"; | 907 | this.color = "red"; |
| 908 | this.loading = false; | 908 | this.loading = false; |
| 909 | }); | 909 | }); |
| 910 | } | 910 | } |
| 911 | }, | 911 | }, |
| 912 | clear() { | 912 | clear() { |
| 913 | this.$refs.form.reset(); | 913 | this.$refs.form.reset(); |
| 914 | this.disable = false; | 914 | this.disable = false; |
| 915 | this.loading = false; | 915 | this.loading = false; |
| 916 | }, | 916 | }, |
| 917 | update() { | 917 | update() { |
| 918 | this.editedItem.scheduleId = this.editedItem._id; | 918 | this.editedItem.scheduleId = this.editedItem._id; |
| 919 | http() | 919 | http() |
| 920 | .put("/updateSchedule", this.editedItem) | 920 | .put("/updateSchedule", this.editedItem) |
| 921 | .then((response) => { | 921 | .then((response) => { |
| 922 | this.snackbar = true; | 922 | this.snackbar = true; |
| 923 | this.text = "Successfully Edit Exam Schedule"; | 923 | this.text = "Successfully Edit Exam Schedule"; |
| 924 | this.color = "green"; | 924 | this.color = "green"; |
| 925 | this.editExamScheduleDialog = false; | 925 | this.editExamScheduleDialog = false; |
| 926 | this.getSchedulesList(); | 926 | this.getSchedulesList(); |
| 927 | this.close(); | 927 | this.close(); |
| 928 | }) | 928 | }) |
| 929 | .catch((error) => { | 929 | .catch((error) => { |
| 930 | this.snackbar = true; | 930 | this.snackbar = true; |
| 931 | this.text = error.response.data.messages; | 931 | this.text = error.response.data.messages; |
| 932 | this.color = "error"; | 932 | this.color = "error"; |
| 933 | this.loading = false; | 933 | this.loading = false; |
| 934 | }); | 934 | }); |
| 935 | }, | 935 | }, |
| 936 | getClass() { | 936 | getClass() { |
| 937 | http() | 937 | http() |
| 938 | .get("/getClassesList", { | 938 | .get("/getClassesList", { |
| 939 | headers: { Authorization: "Bearer " + this.token }, | 939 | headers: { Authorization: "Bearer " + this.token }, |
| 940 | }) | 940 | }) |
| 941 | .then((response) => { | 941 | .then((response) => { |
| 942 | this.classList = response.data.data; | 942 | this.classList = response.data.data; |
| 943 | }) | 943 | }) |
| 944 | .catch((err) => { | 944 | .catch((err) => { |
| 945 | // console.log("err====>", err); | 945 | // console.log("err====>", err); |
| 946 | }); | 946 | }); |
| 947 | }, | 947 | }, |
| 948 | getSections(_id) { | 948 | getSections(_id) { |
| 949 | for (let i = 0; i < this.classList.length; i++) { | 949 | for (let i = 0; i < this.classList.length; i++) { |
| 950 | if (_id == this.classList[i]._id) { | 950 | if (_id == this.classList[i]._id) { |
| 951 | this.subjects = this.classList[i].subjects; | 951 | this.subjects = this.classList[i].subjects; |
| 952 | } | 952 | } |
| 953 | } | 953 | } |
| 954 | this.ScheduleData = []; | 954 | this.ScheduleData = []; |
| 955 | http() | 955 | http() |
| 956 | .get( | 956 | .get( |
| 957 | "/getSectionsList", | 957 | "/getSectionsList", |
| 958 | { params: { classId: _id } }, | 958 | { params: { classId: _id } }, |
| 959 | { | 959 | { |
| 960 | headers: { Authorization: "Bearer " + this.token }, | 960 | headers: { Authorization: "Bearer " + this.token }, |
| 961 | } | 961 | } |
| 962 | ) | 962 | ) |
| 963 | .then((response) => { | 963 | .then((response) => { |
| 964 | this.addSection = response.data.data; | 964 | this.addSection = response.data.data; |
| 965 | }) | 965 | }) |
| 966 | .catch((err) => {}); | 966 | .catch((err) => {}); |
| 967 | }, | 967 | }, |
| 968 | getExamList() { | 968 | getExamList() { |
| 969 | this.showLoader = true; | 969 | this.showLoader = true; |
| 970 | this.loadingSearch = true; | 970 | this.loadingSearch = true; |
| 971 | http() | 971 | http() |
| 972 | .get("/getExamsList", { | 972 | .get("/getExamsList", { |
| 973 | headers: { Authorization: "Bearer " + this.token }, | 973 | headers: { Authorization: "Bearer " + this.token }, |
| 974 | }) | 974 | }) |
| 975 | .then((response) => { | 975 | .then((response) => { |
| 976 | this.examList = response.data.data; | 976 | this.examList = response.data.data; |
| 977 | this.showLoader = false; | 977 | this.showLoader = false; |
| 978 | this.loadingSearch = false; | 978 | this.loadingSearch = false; |
| 979 | }) | 979 | }) |
| 980 | .catch((error) => { | 980 | .catch((error) => { |
| 981 | this.showLoader = false; | 981 | this.showLoader = false; |
| 982 | this.loadingSearch = false; | 982 | this.loadingSearch = false; |
| 983 | this.snackbar = true; | 983 | this.snackbar = true; |
| 984 | this.text = error.response.data.message; | 984 | this.text = error.response.data.message; |
| 985 | if (error.response.status === 401) { | 985 | if (error.response.status === 401) { |
| 986 | this.$router.replace({ path: "/" }); | 986 | this.$router.replace({ path: "/" }); |
| 987 | this.$store.dispatch("setToken", null); | 987 | this.$store.dispatch("setToken", null); |
| 988 | this.$store.dispatch("Id", null); | 988 | this.$store.dispatch("Id", null); |
| 989 | } | 989 | } |
| 990 | }); | 990 | }); |
| 991 | }, | 991 | }, |
| 992 | displaySearch() { | 992 | displaySearch() { |
| 993 | (this.show = false), (this.showSearch = true); | 993 | (this.show = false), (this.showSearch = true); |
| 994 | }, | 994 | }, |
| 995 | closeSearch() { | 995 | closeSearch() { |
| 996 | this.showSearch = false; | 996 | this.showSearch = false; |
| 997 | this.show = true; | 997 | this.show = true; |
| 998 | this.search = ""; | 998 | this.search = ""; |
| 999 | }, | 999 | }, |
| 1000 | }, | 1000 | }, |
| 1001 | mounted() { | 1001 | mounted() { |
| 1002 | this.token = this.$store.state.token; | 1002 | this.token = this.$store.state.token; |
| 1003 | this.getClass(); | 1003 | this.getClass(); |
| 1004 | this.getExamList(); | 1004 | this.getExamList(); |
| 1005 | this.role = this.$store.state.role; | 1005 | this.role = this.$store.state.role; |
| 1006 | }, | 1006 | }, |
| 1007 | }; | 1007 | }; |
| 1008 | </script> | 1008 | </script> |
src/pages/Exam/grade.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT GRADE ****** --> | 3 | <!-- ****** EDIT GRADE ****** --> |
| 4 | <v-dialog v-model="editGradeDialog" max-width="500px" persistent> | 4 | <v-dialog v-model="editGradeDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Grade</label> | 8 | <label class="title text-xs-center">Edit Grade</label> |
| 9 | <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> | 12 | <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout wrap> | 14 | <v-layout wrap> |
| 15 | <v-flex xs12 sm12> | 15 | <v-flex xs12 sm12> |
| 16 | <v-layout> | 16 | <v-layout> |
| 17 | <v-flex xs4 class="pt-4 subheading"> | 17 | <v-flex xs4 class="pt-4 subheading"> |
| 18 | <label class="right">Grade Name:</label> | 18 | <label class="right">Grade Name:</label> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | <v-flex xs7 class="ml-3"> | 20 | <v-flex xs7 class="ml-3"> |
| 21 | <v-text-field | 21 | <v-text-field |
| 22 | placeholder="fill your Grade Name" | 22 | placeholder="fill your Grade Name" |
| 23 | v-model="editedItem.gradeName" | 23 | v-model="editedItem.gradeName" |
| 24 | type="text" | 24 | type="text" |
| 25 | :rules="editGradeName" | 25 | :rules="editGradeName" |
| 26 | ></v-text-field> | 26 | ></v-text-field> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Grade Point:</label> | 33 | <label class="right">Grade Point:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 class="ml-3"> | 35 | <v-flex xs7 class="ml-3"> |
| 36 | <v-text-field | 36 | <v-text-field |
| 37 | placeholder="fill your Grade Point" | 37 | placeholder="fill your Grade Point" |
| 38 | v-model="editedItem.gradePoint" | 38 | v-model="editedItem.gradePoint" |
| 39 | :rules="editGradePoint" | 39 | :rules="editGradePoint" |
| 40 | type="text" | 40 | type="text" |
| 41 | ></v-text-field> | 41 | ></v-text-field> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | <v-flex xs12 sm12> | 45 | <v-flex xs12 sm12> |
| 46 | <v-layout> | 46 | <v-layout> |
| 47 | <v-flex xs4 class="pt-4 subheading"> | 47 | <v-flex xs4 class="pt-4 subheading"> |
| 48 | <label class="right">Mark From:</label> | 48 | <label class="right">Mark From:</label> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | <v-flex xs7 class="ml-3"> | 50 | <v-flex xs7 class="ml-3"> |
| 51 | <v-text-field | 51 | <v-text-field |
| 52 | placeholder="fill your Mark From" | 52 | placeholder="fill your Mark From" |
| 53 | v-model="editedItem.marksFrom" | 53 | v-model="editedItem.marksFrom" |
| 54 | :rules="editMarksFrom" | 54 | :rules="editMarksFrom" |
| 55 | type="text" | 55 | type="text" |
| 56 | ></v-text-field> | 56 | ></v-text-field> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Mark Upto:</label> | 63 | <label class="right">Mark Upto:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Mark From" | 67 | placeholder="fill your Mark From" |
| 68 | v-model="editedItem.marksUpTo" | 68 | v-model="editedItem.marksUpTo" |
| 69 | :rules="editMarksUpTo" | 69 | :rules="editMarksUpTo" |
| 70 | type="text" | 70 | type="text" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs12 sm12> | 75 | <v-flex xs12 sm12> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs4 class="pt-4 subheading"> | 77 | <v-flex xs4 class="pt-4 subheading"> |
| 78 | <label class="right">Note:</label> | 78 | <label class="right">Note:</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs7 class="ml-3"> | 80 | <v-flex xs7 class="ml-3"> |
| 81 | <v-text-field | 81 | <v-text-field |
| 82 | placeholder="fill your Serial Number" | 82 | placeholder="fill your Serial Number" |
| 83 | v-model="editedItem.note" | 83 | v-model="editedItem.note" |
| 84 | type="text" | 84 | type="text" |
| 85 | ></v-text-field> | 85 | ></v-text-field> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs12> | 91 | <v-flex xs12> |
| 92 | <v-card-actions> | 92 | <v-card-actions> |
| 93 | <v-spacer></v-spacer> | 93 | <v-spacer></v-spacer> |
| 94 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 94 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 95 | </v-card-actions> | 95 | </v-card-actions> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | </v-container> | 98 | </v-container> |
| 99 | </v-form> | 99 | </v-form> |
| 100 | </v-card> | 100 | </v-card> |
| 101 | </v-dialog> | 101 | </v-dialog> |
| 102 | 102 | ||
| 103 | <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> | 103 | <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> |
| 104 | 104 | ||
| 105 | <v-dialog v-model="viewGradeDialog" max-width="500px" persistent> | 105 | <v-dialog v-model="viewGradeDialog" max-width="500px" persistent> |
| 106 | <v-card flat class="card-style pa-3" dark> | 106 | <v-card flat class="Card-style pa-3"> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs12> | 108 | <v-flex xs12> |
| 109 | <label class="title text-xs-center">View Grade</label> | 109 | <label class="title text-xs-center">View Grade</label> |
| 110 | <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> | 110 | <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-card-text> | 113 | <v-card-text> |
| 114 | <v-container grid-list-md> | 114 | <v-container grid-list-md> |
| 115 | <v-layout wrap> | 115 | <v-layout wrap> |
| 116 | <v-flex> | 116 | <v-flex> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs5 sm6> | 118 | <v-flex xs5 sm6> |
| 119 | <h5 class="right my-1"> | 119 | <h5 class="right my-1"> |
| 120 | <b>Grade Name:</b> | 120 | <b>Grade Name:</b> |
| 121 | </h5> | 121 | </h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex sm6 xs8> | 123 | <v-flex sm6 xs8> |
| 124 | <h5 class="my-1">{{ editedItem.gradeName }}</h5> | 124 | <h5 class="my-1">{{ editedItem.gradeName }}</h5> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs5 sm6> | 128 | <v-flex xs5 sm6> |
| 129 | <h5 class="right my-1"> | 129 | <h5 class="right my-1"> |
| 130 | <b>Grade Point:</b> | 130 | <b>Grade Point:</b> |
| 131 | </h5> | 131 | </h5> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | <v-flex sm6 xs8> | 133 | <v-flex sm6 xs8> |
| 134 | <h5 class="my-1">{{ editedItem.gradePoint }}</h5> | 134 | <h5 class="my-1">{{ editedItem.gradePoint }}</h5> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-layout> | 136 | </v-layout> |
| 137 | <v-layout> | 137 | <v-layout> |
| 138 | <v-flex xs5 sm6> | 138 | <v-flex xs5 sm6> |
| 139 | <h5 class="right my-1"> | 139 | <h5 class="right my-1"> |
| 140 | <b>Mark From:</b> | 140 | <b>Mark From:</b> |
| 141 | </h5> | 141 | </h5> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | <v-flex sm6 xs8> | 143 | <v-flex sm6 xs8> |
| 144 | <h5 class="my-1">{{ editedItem.marksFrom }}</h5> | 144 | <h5 class="my-1">{{ editedItem.marksFrom }}</h5> |
| 145 | </v-flex> | 145 | </v-flex> |
| 146 | </v-layout> | 146 | </v-layout> |
| 147 | <v-layout> | 147 | <v-layout> |
| 148 | <v-flex xs5 sm6> | 148 | <v-flex xs5 sm6> |
| 149 | <h5 class="right my-1"> | 149 | <h5 class="right my-1"> |
| 150 | <b>Mark Upto:</b> | 150 | <b>Mark Upto:</b> |
| 151 | </h5> | 151 | </h5> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | <v-flex sm6 xs8> | 153 | <v-flex sm6 xs8> |
| 154 | <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> | 154 | <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> |
| 155 | </v-flex> | 155 | </v-flex> |
| 156 | </v-layout> | 156 | </v-layout> |
| 157 | <v-layout> | 157 | <v-layout> |
| 158 | <v-flex xs5 sm6> | 158 | <v-flex xs5 sm6> |
| 159 | <h5 class="right my-1"> | 159 | <h5 class="right my-1"> |
| 160 | <b>Note:</b> | 160 | <b>Note:</b> |
| 161 | </h5> | 161 | </h5> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex sm6 xs8> | 163 | <v-flex sm6 xs8> |
| 164 | <h5 class="my-1">{{ editedItem.note }}</h5> | 164 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | </v-layout> | 168 | </v-layout> |
| 169 | </v-container> | 169 | </v-container> |
| 170 | </v-card-text> | 170 | </v-card-text> |
| 171 | </v-card> | 171 | </v-card> |
| 172 | </v-dialog> | 172 | </v-dialog> |
| 173 | <!-- ****** EXISTING GRADE TABLE****** --> | 173 | <!-- ****** EXISTING GRADE TABLE****** --> |
| 174 | 174 | ||
| 175 | <v-toolbar color="transparent" flat> | 175 | <v-toolbar color="transparent" flat> |
| 176 | <v-btn | 176 | <v-btn |
| 177 | fab | 177 | fab |
| 178 | dark | 178 | dark |
| 179 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 179 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 180 | small | 180 | small |
| 181 | @click="addGradeDialog = true" | 181 | @click="addGradeDialog = true" |
| 182 | > | 182 | > |
| 183 | <v-icon dark>add</v-icon> | 183 | <v-icon dark>add</v-icon> |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | <v-btn | 185 | <v-btn |
| 186 | round | 186 | round |
| 187 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 187 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 188 | dark | 188 | dark |
| 189 | @click="addGradeDialog = true" | 189 | @click="addGradeDialog = true" |
| 190 | > | 190 | > |
| 191 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade | 191 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade |
| 192 | </v-btn> | 192 | </v-btn> |
| 193 | <v-spacer></v-spacer> | 193 | <v-spacer></v-spacer> |
| 194 | <v-card-title class="body-1" v-show="show"> | 194 | <v-card-title class="body-1" v-show="show"> |
| 195 | <v-btn icon large flat @click="displaySearch"> | 195 | <v-btn icon large flat @click="displaySearch"> |
| 196 | <v-avatar size="27"> | 196 | <v-avatar size="27"> |
| 197 | <img src="/static/icon/search.png" alt="icon" /> | 197 | <img src="/static/icon/search.png" alt="icon" /> |
| 198 | </v-avatar> | 198 | </v-avatar> |
| 199 | </v-btn> | 199 | </v-btn> |
| 200 | </v-card-title> | 200 | </v-card-title> |
| 201 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 201 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 202 | <v-layout> | 202 | <v-layout> |
| 203 | <v-text-field | 203 | <v-text-field |
| 204 | autofocus | 204 | autofocus |
| 205 | v-model="search" | 205 | v-model="search" |
| 206 | label="Search" | 206 | label="Search" |
| 207 | prepend-inner-icon="search" | 207 | prepend-inner-icon="search" |
| 208 | color="primary" | 208 | color="primary" |
| 209 | ></v-text-field> | 209 | ></v-text-field> |
| 210 | <v-icon @click="closeSearch" color="error">close</v-icon> | 210 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 211 | </v-layout> | 211 | </v-layout> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-toolbar> | 213 | </v-toolbar> |
| 214 | <v-data-table | 214 | <v-data-table |
| 215 | :headers="headers" | 215 | :headers="headers" |
| 216 | :items="gradeData" | 216 | :items="gradeData" |
| 217 | :pagination.sync="pagination" | 217 | :pagination.sync="pagination" |
| 218 | :search="search" | 218 | :search="search" |
| 219 | > | 219 | > |
| 220 | <template slot="items" slot-scope="props"> | 220 | <template slot="items" slot-scope="props"> |
| 221 | <tr class="tr"> | 221 | <tr class="tr"> |
| 222 | <td class="td td-row">{{ props.index + 1}}</td> | 222 | <td class="td td-row">{{ props.index + 1}}</td> |
| 223 | <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> | 223 | <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> |
| 224 | <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> | 224 | <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> |
| 225 | <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> | 225 | <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> |
| 226 | <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> | 226 | <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> |
| 227 | <td class="td td-row text-xs-center">{{ props.item.note }}</td> | 227 | <td class="td td-row text-xs-center">{{ props.item.note }}</td> |
| 228 | <td class="td td-row text-xs-center"> | 228 | <td class="td td-row text-xs-center"> |
| 229 | <span> | 229 | <span> |
| 230 | <v-tooltip top> | 230 | <v-tooltip top> |
| 231 | <img | 231 | <img |
| 232 | slot="activator" | 232 | slot="activator" |
| 233 | style="cursor:pointer; width:25px; height:25px; " | 233 | style="cursor:pointer; width:25px; height:25px; " |
| 234 | class="mr-3" | 234 | class="mr-3" |
| 235 | @click="profile(props.item)" | 235 | @click="profile(props.item)" |
| 236 | src="/static/icon/view.png" | 236 | src="/static/icon/view.png" |
| 237 | /> | 237 | /> |
| 238 | <span>View</span> | 238 | <span>View</span> |
| 239 | </v-tooltip> | 239 | </v-tooltip> |
| 240 | <v-tooltip top> | 240 | <v-tooltip top> |
| 241 | <img | 241 | <img |
| 242 | slot="activator" | 242 | slot="activator" |
| 243 | style="cursor:pointer; width:20px; height:18px; " | 243 | style="cursor:pointer; width:20px; height:18px; " |
| 244 | class="mr-3" | 244 | class="mr-3" |
| 245 | @click="editItem(props.item)" | 245 | @click="editItem(props.item)" |
| 246 | src="/static/icon/edit.png" | 246 | src="/static/icon/edit.png" |
| 247 | /> | 247 | /> |
| 248 | <span>Edit</span> | 248 | <span>Edit</span> |
| 249 | </v-tooltip> | 249 | </v-tooltip> |
| 250 | <v-tooltip top> | 250 | <v-tooltip top> |
| 251 | <img | 251 | <img |
| 252 | slot="activator" | 252 | slot="activator" |
| 253 | style="cursor:pointer; width:20px; height:20px; " | 253 | style="cursor:pointer; width:20px; height:20px; " |
| 254 | @click="deleteGrade(props.item)" | 254 | @click="deleteGrade(props.item)" |
| 255 | class="mr-3" | 255 | class="mr-3" |
| 256 | src="/static/icon/delete.png" | 256 | src="/static/icon/delete.png" |
| 257 | /> | 257 | /> |
| 258 | <span>Delete</span> | 258 | <span>Delete</span> |
| 259 | </v-tooltip> | 259 | </v-tooltip> |
| 260 | </span> | 260 | </span> |
| 261 | </td> | 261 | </td> |
| 262 | </tr> | 262 | </tr> |
| 263 | </template> | 263 | </template> |
| 264 | <v-alert | 264 | <v-alert |
| 265 | slot="no-results" | 265 | slot="no-results" |
| 266 | :value="true" | 266 | :value="true" |
| 267 | color="error" | 267 | color="error" |
| 268 | icon="warning" | 268 | icon="warning" |
| 269 | >Your search for "{{ search }}" found no results.</v-alert> | 269 | >Your search for "{{ search }}" found no results.</v-alert> |
| 270 | </v-data-table> | 270 | </v-data-table> |
| 271 | <!-- ****** ADD GRADE ****** --> | 271 | <!-- ****** ADD GRADE ****** --> |
| 272 | <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog" persistent> | 272 | <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog" persistent> |
| 273 | <v-card flat class="card-style pa-2" dark> | 273 | <v-card flat class="Card-style pa-2"> |
| 274 | <v-layout> | 274 | <v-layout> |
| 275 | <v-flex xs12> | 275 | <v-flex xs12> |
| 276 | <label class="title text-xs-center">Add Grade</label> | 276 | <label class="title text-xs-center">Add Grade</label> |
| 277 | <v-icon | 277 | <v-icon |
| 278 | size="24" | 278 | size="24" |
| 279 | class="right" | 279 | class="right" |
| 280 | @click="$refs.form.reset();addGradeDialog = false" | 280 | @click="$refs.form.reset();addGradeDialog = false" |
| 281 | >cancel</v-icon> | 281 | >cancel</v-icon> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | </v-layout> | 283 | </v-layout> |
| 284 | <v-form ref="form" v-model="valid" lazy-validation> | 284 | <v-form ref="form" v-model="valid" lazy-validation> |
| 285 | <v-container fluid> | 285 | <v-container fluid> |
| 286 | <v-flex xs12> | 286 | <v-flex xs12> |
| 287 | <v-layout> | 287 | <v-layout> |
| 288 | <v-flex xs5 sm4 class="pt-4 subheading"> | 288 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 289 | <label class="right">Grade Name:</label> | 289 | <label class="right">Grade Name:</label> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs7 class="ml-3"> | 291 | <v-flex xs7 class="ml-3"> |
| 292 | <v-text-field | 292 | <v-text-field |
| 293 | placeholder="fill your Grade Name" | 293 | placeholder="fill your Grade Name" |
| 294 | :rules="gradeNameRules" | 294 | :rules="gradeNameRules" |
| 295 | v-model="addGrade.gradeName" | 295 | v-model="addGrade.gradeName" |
| 296 | ></v-text-field> | 296 | ></v-text-field> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-layout> | 298 | </v-layout> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | <v-flex xs12> | 300 | <v-flex xs12> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-flex xs5 sm4 class="pt-4 subheading"> | 302 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 303 | <label class="right">Grade Point:</label> | 303 | <label class="right">Grade Point:</label> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-flex xs7 class="ml-3"> | 305 | <v-flex xs7 class="ml-3"> |
| 306 | <v-text-field | 306 | <v-text-field |
| 307 | placeholder="fill your Grade Point" | 307 | placeholder="fill your Grade Point" |
| 308 | v-model="addGrade.gradePoint" | 308 | v-model="addGrade.gradePoint" |
| 309 | :rules="gradePointRules" | 309 | :rules="gradePointRules" |
| 310 | ></v-text-field> | 310 | ></v-text-field> |
| 311 | </v-flex> | 311 | </v-flex> |
| 312 | </v-layout> | 312 | </v-layout> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs5 sm4 class="pt-4 subheading"> | 316 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 317 | <label class="right">Mark From:</label> | 317 | <label class="right">Mark From:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs7 class="ml-3"> | 319 | <v-flex xs7 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | placeholder="fill your Mark From" | 321 | placeholder="fill your Mark From" |
| 322 | :rules="markFromRules" | 322 | :rules="markFromRules" |
| 323 | v-model="addGrade.marksFrom" | 323 | v-model="addGrade.marksFrom" |
| 324 | type="number" | 324 | type="number" |
| 325 | ></v-text-field> | 325 | ></v-text-field> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | <v-flex xs12> | 329 | <v-flex xs12> |
| 330 | <v-layout> | 330 | <v-layout> |
| 331 | <v-flex xs5 sm4 class="pt-4 subheading"> | 331 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 332 | <label class="right">Mark Upto:</label> | 332 | <label class="right">Mark Upto:</label> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | <v-flex xs7 class="ml-3"> | 334 | <v-flex xs7 class="ml-3"> |
| 335 | <v-text-field | 335 | <v-text-field |
| 336 | placeholder="fill your Mark Upto" | 336 | placeholder="fill your Mark Upto" |
| 337 | :rules="markUptoRules" | 337 | :rules="markUptoRules" |
| 338 | v-model="addGrade.marksUpTo" | 338 | v-model="addGrade.marksUpTo" |
| 339 | type="number" | 339 | type="number" |
| 340 | ></v-text-field> | 340 | ></v-text-field> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | </v-layout> | 342 | </v-layout> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex xs12> | 344 | <v-flex xs12> |
| 345 | <v-layout> | 345 | <v-layout> |
| 346 | <v-flex xs5 sm4 class="pt-4 subheading"> | 346 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 347 | <label class="right">Note:</label> | 347 | <label class="right">Note:</label> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-flex xs7 class="ml-3"> | 349 | <v-flex xs7 class="ml-3"> |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | placeholder="fill your Note" | 351 | placeholder="fill your Note" |
| 352 | v-model="addGrade.note" | 352 | v-model="addGrade.note" |
| 353 | @keyup.enter="submit" | 353 | @keyup.enter="submit" |
| 354 | ></v-text-field> | 354 | ></v-text-field> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | </v-layout> | 356 | </v-layout> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | <v-layout> | 358 | <v-layout> |
| 359 | <v-flex xs12> | 359 | <v-flex xs12> |
| 360 | <v-card-actions> | 360 | <v-card-actions> |
| 361 | <v-spacer class="hidden-xs-only"></v-spacer> | 361 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 362 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 362 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 363 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 363 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 364 | </v-card-actions> | 364 | </v-card-actions> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | </v-layout> | 366 | </v-layout> |
| 367 | </v-container> | 367 | </v-container> |
| 368 | </v-form> | 368 | </v-form> |
| 369 | </v-card> | 369 | </v-card> |
| 370 | </v-dialog> | 370 | </v-dialog> |
| 371 | <v-snackbar | 371 | <v-snackbar |
| 372 | :timeout="timeout" | 372 | :timeout="timeout" |
| 373 | :top="y === 'top'" | 373 | :top="y === 'top'" |
| 374 | :right="x === 'right'" | 374 | :right="x === 'right'" |
| 375 | :vertical="mode === 'vertical'" | 375 | :vertical="mode === 'vertical'" |
| 376 | v-model="snackbar" | 376 | v-model="snackbar" |
| 377 | :color="color" | 377 | :color="color" |
| 378 | >{{ text }}</v-snackbar> | 378 | >{{ text }}</v-snackbar> |
| 379 | <div class="loader" v-if="showLoader"> | 379 | <div class="loader" v-if="showLoader"> |
| 380 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 380 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 381 | </div> | 381 | </div> |
| 382 | </v-container> | 382 | </v-container> |
| 383 | </template> | 383 | </template> |
| 384 | 384 | ||
| 385 | <script> | 385 | <script> |
| 386 | import http from "@/Services/http.js"; | 386 | import http from "@/Services/http.js"; |
| 387 | import moment from "moment"; | 387 | import moment from "moment"; |
| 388 | 388 | ||
| 389 | export default { | 389 | export default { |
| 390 | data: () => ({ | 390 | data: () => ({ |
| 391 | snackbar: false, | 391 | snackbar: false, |
| 392 | date: null, | 392 | date: null, |
| 393 | menu1: false, | 393 | menu1: false, |
| 394 | menu2: false, | 394 | menu2: false, |
| 395 | addGradeDialog: false, | 395 | addGradeDialog: false, |
| 396 | color: "", | 396 | color: "", |
| 397 | y: "top", | 397 | y: "top", |
| 398 | x: "right", | 398 | x: "right", |
| 399 | mode: "", | 399 | mode: "", |
| 400 | timeout: 10000, | 400 | timeout: 10000, |
| 401 | text: "", | 401 | text: "", |
| 402 | show: true, | 402 | show: true, |
| 403 | showSearch: false, | 403 | showSearch: false, |
| 404 | loading: false, | 404 | loading: false, |
| 405 | loadingSearch: false, | 405 | loadingSearch: false, |
| 406 | date: null, | 406 | date: null, |
| 407 | search: "", | 407 | search: "", |
| 408 | showLoader: false, | 408 | showLoader: false, |
| 409 | editGradeDialog: false, | 409 | editGradeDialog: false, |
| 410 | viewGradeDialog: false, | 410 | viewGradeDialog: false, |
| 411 | valid: true, | 411 | valid: true, |
| 412 | validEditGrade: true, | 412 | validEditGrade: true, |
| 413 | pagination: { | 413 | pagination: { |
| 414 | rowsPerPage: 10, | 414 | rowsPerPage: 10, |
| 415 | }, | 415 | }, |
| 416 | gradeNameRules: [(v) => !!v || "Grade Name is required"], | 416 | gradeNameRules: [(v) => !!v || "Grade Name is required"], |
| 417 | gradePointRules: [(v) => !!v || "Grade Point required"], | 417 | gradePointRules: [(v) => !!v || "Grade Point required"], |
| 418 | markFromRules: [(v) => !!v || "Mark From is required"], | 418 | markFromRules: [(v) => !!v || "Mark From is required"], |
| 419 | markUptoRules: [(v) => !!v || "Mark Upto is required"], | 419 | markUptoRules: [(v) => !!v || "Mark Upto is required"], |
| 420 | authorRules: [(v) => !!v || "Author is required"], | 420 | authorRules: [(v) => !!v || "Author is required"], |
| 421 | noteRules: [(v) => !!v || "Note is required"], | 421 | noteRules: [(v) => !!v || "Note is required"], |
| 422 | editGradeName: [(v) => !!v || "Grade Name is required"], | 422 | editGradeName: [(v) => !!v || "Grade Name is required"], |
| 423 | editGradeName: [(v) => !!v || "Grade Name is required"], | 423 | editGradeName: [(v) => !!v || "Grade Name is required"], |
| 424 | editGradePoint: [(v) => !!v || "Grade Point required"], | 424 | editGradePoint: [(v) => !!v || "Grade Point required"], |
| 425 | editMarksFrom: [(v) => !!v || "Mark From is required"], | 425 | editMarksFrom: [(v) => !!v || "Mark From is required"], |
| 426 | editMarksUpTo: [(v) => !!v || "Mark Upto is required"], | 426 | editMarksUpTo: [(v) => !!v || "Mark Upto is required"], |
| 427 | headers: [ | 427 | headers: [ |
| 428 | { | 428 | { |
| 429 | align: "", | 429 | align: "", |
| 430 | text: "No", | 430 | text: "No", |
| 431 | sortable: false, | 431 | sortable: false, |
| 432 | value: "No", | 432 | value: "No", |
| 433 | }, | 433 | }, |
| 434 | { | 434 | { |
| 435 | text: "Grade Name", | 435 | text: "Grade Name", |
| 436 | vaue: "gradeName", | 436 | vaue: "gradeName", |
| 437 | sortable: false, | 437 | sortable: false, |
| 438 | align: "center", | 438 | align: "center", |
| 439 | }, | 439 | }, |
| 440 | { | 440 | { |
| 441 | text: "Grade Point", | 441 | text: "Grade Point", |
| 442 | value: "gradePoint", | 442 | value: "gradePoint", |
| 443 | sortable: false, | 443 | sortable: false, |
| 444 | align: "center", | 444 | align: "center", |
| 445 | }, | 445 | }, |
| 446 | { | 446 | { |
| 447 | text: "Mark From", | 447 | text: "Mark From", |
| 448 | value: "marksFrom", | 448 | value: "marksFrom", |
| 449 | sortable: false, | 449 | sortable: false, |
| 450 | align: "center", | 450 | align: "center", |
| 451 | }, | 451 | }, |
| 452 | { | 452 | { |
| 453 | text: "Mark Upto", | 453 | text: "Mark Upto", |
| 454 | value: "marksUpTo", | 454 | value: "marksUpTo", |
| 455 | sortable: false, | 455 | sortable: false, |
| 456 | align: "center", | 456 | align: "center", |
| 457 | }, | 457 | }, |
| 458 | { | 458 | { |
| 459 | text: "Note", | 459 | text: "Note", |
| 460 | value: "note", | 460 | value: "note", |
| 461 | sortable: false, | 461 | sortable: false, |
| 462 | align: "center", | 462 | align: "center", |
| 463 | }, | 463 | }, |
| 464 | { text: "Action", value: "", sortable: false, align: "center" }, | 464 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 465 | ], | 465 | ], |
| 466 | gradeData: [], | 466 | gradeData: [], |
| 467 | addGrade: {}, | 467 | addGrade: {}, |
| 468 | editedItem: {}, | 468 | editedItem: {}, |
| 469 | token: "", | 469 | token: "", |
| 470 | }), | 470 | }), |
| 471 | watch: { | 471 | watch: { |
| 472 | addGradeDialog: function (val) { | 472 | addGradeDialog: function (val) { |
| 473 | if (!val) { | 473 | if (!val) { |
| 474 | this.addGrade = []; | 474 | this.addGrade = []; |
| 475 | } | 475 | } |
| 476 | }, | 476 | }, |
| 477 | }, | 477 | }, |
| 478 | methods: { | 478 | methods: { |
| 479 | dates: function (date) { | 479 | dates: function (date) { |
| 480 | return moment(date).format("MMMM DD, YYYY"); | 480 | return moment(date).format("MMMM DD, YYYY"); |
| 481 | }, | 481 | }, |
| 482 | pickFile() { | 482 | pickFile() { |
| 483 | this.$refs.image.click(); | 483 | this.$refs.image.click(); |
| 484 | }, | 484 | }, |
| 485 | getGradeList() { | 485 | getGradeList() { |
| 486 | this.showLoader = true; | 486 | this.showLoader = true; |
| 487 | this.loadingSearch = true; | 487 | this.loadingSearch = true; |
| 488 | http() | 488 | http() |
| 489 | .get("/getGradesList", { | 489 | .get("/getGradesList", { |
| 490 | headers: { Authorization: "Bearer " + this.token }, | 490 | headers: { Authorization: "Bearer " + this.token }, |
| 491 | }) | 491 | }) |
| 492 | .then((response) => { | 492 | .then((response) => { |
| 493 | this.gradeData = response.data.data; | 493 | this.gradeData = response.data.data; |
| 494 | this.showLoader = false; | 494 | this.showLoader = false; |
| 495 | this.loadingSearch = false; | 495 | this.loadingSearch = false; |
| 496 | }) | 496 | }) |
| 497 | .catch((error) => { | 497 | .catch((error) => { |
| 498 | // console.log("err====>", err); | 498 | // console.log("err====>", err); |
| 499 | this.showLoader = false; | 499 | this.showLoader = false; |
| 500 | this.loadingSearch = false; | 500 | this.loadingSearch = false; |
| 501 | this.snackbar = true; | 501 | this.snackbar = true; |
| 502 | this.text = error.response.data.message; | 502 | this.text = error.response.data.message; |
| 503 | if (error.response.status === 401) { | 503 | if (error.response.status === 401) { |
| 504 | this.$router.replace({ path: "/" }); | 504 | this.$router.replace({ path: "/" }); |
| 505 | this.$store.dispatch("setToken", null); | 505 | this.$store.dispatch("setToken", null); |
| 506 | this.$store.dispatch("Id", null); | 506 | this.$store.dispatch("Id", null); |
| 507 | } | 507 | } |
| 508 | }); | 508 | }); |
| 509 | }, | 509 | }, |
| 510 | editItem(item) { | 510 | editItem(item) { |
| 511 | // console.log("item", item); | 511 | // console.log("item", item); |
| 512 | this.editedIndex = this.gradeData.indexOf(item); | 512 | this.editedIndex = this.gradeData.indexOf(item); |
| 513 | this.editedItem = Object.assign({}, item); | 513 | this.editedItem = Object.assign({}, item); |
| 514 | this.editedItem.date = | 514 | this.editedItem.date = |
| 515 | this.editedItem.date != undefined | 515 | this.editedItem.date != undefined |
| 516 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 516 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 517 | : (this.editedItem.date = ""); | 517 | : (this.editedItem.date = ""); |
| 518 | this.editGradeDialog = true; | 518 | this.editGradeDialog = true; |
| 519 | }, | 519 | }, |
| 520 | profile(item) { | 520 | profile(item) { |
| 521 | this.editedIndex = this.gradeData.indexOf(item); | 521 | this.editedIndex = this.gradeData.indexOf(item); |
| 522 | this.editedItem = Object.assign({}, item); | 522 | this.editedItem = Object.assign({}, item); |
| 523 | this.viewGradeDialog = true; | 523 | this.viewGradeDialog = true; |
| 524 | }, | 524 | }, |
| 525 | deleteGrade(item) { | 525 | deleteGrade(item) { |
| 526 | let deleteGrade = { | 526 | let deleteGrade = { |
| 527 | gradeId: item._id, | 527 | gradeId: item._id, |
| 528 | }; | 528 | }; |
| 529 | http() | 529 | http() |
| 530 | .delete( | 530 | .delete( |
| 531 | "/deleteGrade", | 531 | "/deleteGrade", |
| 532 | confirm("Are you sure you want to Delete this?") && { | 532 | confirm("Are you sure you want to Delete this?") && { |
| 533 | params: deleteGrade, | 533 | params: deleteGrade, |
| 534 | } | 534 | } |
| 535 | ) | 535 | ) |
| 536 | .then((response) => { | 536 | .then((response) => { |
| 537 | this.snackbar = true; | 537 | this.snackbar = true; |
| 538 | this.text = response.data.message; | 538 | this.text = response.data.message; |
| 539 | this.color = "green"; | 539 | this.color = "green"; |
| 540 | this.getGradeList(); | 540 | this.getGradeList(); |
| 541 | }) | 541 | }) |
| 542 | .catch((error) => { | 542 | .catch((error) => { |
| 543 | this.loading = false; | 543 | this.loading = false; |
| 544 | this.snackbar = true; | 544 | this.snackbar = true; |
| 545 | this.color = "error"; | 545 | this.color = "error"; |
| 546 | this.text = error.response.data.message; | 546 | this.text = error.response.data.message; |
| 547 | }); | 547 | }); |
| 548 | }, | 548 | }, |
| 549 | close() { | 549 | close() { |
| 550 | this.editGradeDialog = false; | 550 | this.editGradeDialog = false; |
| 551 | }, | 551 | }, |
| 552 | submit() { | 552 | submit() { |
| 553 | if (this.$refs.form.validate()) { | 553 | if (this.$refs.form.validate()) { |
| 554 | this.loading = true; | 554 | this.loading = true; |
| 555 | http() | 555 | http() |
| 556 | .post("/createGrade", this.addGrade) | 556 | .post("/createGrade", this.addGrade) |
| 557 | .then((response) => { | 557 | .then((response) => { |
| 558 | this.snackbar = true; | 558 | this.snackbar = true; |
| 559 | this.text = response.data.message; | 559 | this.text = response.data.message; |
| 560 | this.color = "green"; | 560 | this.color = "green"; |
| 561 | this.addGradeDialog = false; | 561 | this.addGradeDialog = false; |
| 562 | this.loading = false; | 562 | this.loading = false; |
| 563 | this.clear(); | 563 | this.clear(); |
| 564 | this.getGradeList(); | 564 | this.getGradeList(); |
| 565 | }) | 565 | }) |
| 566 | .catch((error) => { | 566 | .catch((error) => { |
| 567 | this.snackbar = true; | 567 | this.snackbar = true; |
| 568 | this.text = error.response.data.message; | 568 | this.text = error.response.data.message; |
| 569 | this.color = "red"; | 569 | this.color = "red"; |
| 570 | this.loading = false; | 570 | this.loading = false; |
| 571 | }); | 571 | }); |
| 572 | } | 572 | } |
| 573 | }, | 573 | }, |
| 574 | clear() { | 574 | clear() { |
| 575 | this.$refs.form.reset(); | 575 | this.$refs.form.reset(); |
| 576 | this.disable = false; | 576 | this.disable = false; |
| 577 | this.loading = false; | 577 | this.loading = false; |
| 578 | }, | 578 | }, |
| 579 | save() { | 579 | save() { |
| 580 | if (this.$refs.formEditGrade.validate()) { | 580 | if (this.$refs.formEditGrade.validate()) { |
| 581 | this.editedItem.gradeId = this.editedItem._id; | 581 | this.editedItem.gradeId = this.editedItem._id; |
| 582 | http() | 582 | http() |
| 583 | .put("/updateGrade", this.editedItem) | 583 | .put("/updateGrade", this.editedItem) |
| 584 | .then((response) => { | 584 | .then((response) => { |
| 585 | this.snackbar = true; | 585 | this.snackbar = true; |
| 586 | this.text = response.data.message; | 586 | this.text = response.data.message; |
| 587 | this.color = "green"; | 587 | this.color = "green"; |
| 588 | this.getGradeList(); | 588 | this.getGradeList(); |
| 589 | this.close(); | 589 | this.close(); |
| 590 | }) | 590 | }) |
| 591 | .catch((error) => { | 591 | .catch((error) => { |
| 592 | this.snackbar = true; | 592 | this.snackbar = true; |
| 593 | this.text = error.response.data.message; | 593 | this.text = error.response.data.message; |
| 594 | this.color = "red"; | 594 | this.color = "red"; |
| 595 | }); | 595 | }); |
| 596 | } | 596 | } |
| 597 | }, | 597 | }, |
| 598 | displaySearch() { | 598 | displaySearch() { |
| 599 | (this.show = false), (this.showSearch = true); | 599 | (this.show = false), (this.showSearch = true); |
| 600 | }, | 600 | }, |
| 601 | closeSearch() { | 601 | closeSearch() { |
| 602 | this.showSearch = false; | 602 | this.showSearch = false; |
| 603 | this.show = true; | 603 | this.show = true; |
| 604 | this.search = ""; | 604 | this.search = ""; |
| 605 | }, | 605 | }, |
| 606 | }, | 606 | }, |
| 607 | mounted() { | 607 | mounted() { |
| 608 | this.token = this.$store.state.token; | 608 | this.token = this.$store.state.token; |
| 609 | this.getGradeList(); | 609 | this.getGradeList(); |
| 610 | }, | 610 | }, |
| 611 | }; | 611 | }; |
| 612 | </script> | 612 | </script> |
src/pages/Gallery/gallery.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS Gallery ****** --> | 3 | <!-- ****** EDITS Gallery ****** --> |
| 4 | <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable persistent> | 4 | <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable persistent> |
| 5 | <v-card class="card-style pa-2" dark> | 5 | <v-card class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Gallery</label> | 8 | <label class="title text-xs-center">Edit Gallery</label> |
| 9 | <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout row> | 13 | <v-layout row> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <input | 15 | <input |
| 16 | type="file" | 16 | type="file" |
| 17 | style="display: none" | 17 | style="display: none" |
| 18 | ref="editImage" | 18 | ref="editImage" |
| 19 | accept="image/*" | 19 | accept="image/*" |
| 20 | multiple | 20 | multiple |
| 21 | @change="editFilePicked" | 21 | @change="editFilePicked" |
| 22 | /> | 22 | /> |
| 23 | <v-layout justify-center> | 23 | <v-layout justify-center> |
| 24 | <v-flex | 24 | <v-flex |
| 25 | xs6 | 25 | xs6 |
| 26 | sm12 | 26 | sm12 |
| 27 | md3 | 27 | md3 |
| 28 | v-for="Image in editedItem.imageUrl" | 28 | v-for="Image in editedItem.imageUrl" |
| 29 | :key="Image._id" | 29 | :key="Image._id" |
| 30 | v-if="editedItem.imageUrl" | 30 | v-if="editedItem.imageUrl" |
| 31 | class="profile-image-wrapper imgNews" | 31 | class="profile-image-wrapper imgNews" |
| 32 | > | 32 | > |
| 33 | <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> | 33 | <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> |
| 34 | <v-icon | 34 | <v-icon |
| 35 | class="red edit-profile-icon" | 35 | class="red edit-profile-icon" |
| 36 | dark | 36 | dark |
| 37 | @click="deleteImage(Image._id,editedItem._id)" | 37 | @click="deleteImage(Image._id,editedItem._id)" |
| 38 | >close</v-icon> | 38 | >close</v-icon> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex v-for="(file, index) in editFiles" :key="index"> | 40 | <v-flex v-for="(file, index) in editFiles" :key="index"> |
| 41 | <img :src="file" height="160" width="160" class="pa-2" /> | 41 | <img :src="file" height="160" width="160" class="pa-2" /> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <img | 44 | <img |
| 45 | src="/static/icon/user.png" | 45 | src="/static/icon/user.png" |
| 46 | v-if="editedItem.imageUrl == '' && editFiles == ''" | 46 | v-if="editedItem.imageUrl == '' && editFiles == ''" |
| 47 | height="160" | 47 | height="160" |
| 48 | width="160" | 48 | width="160" |
| 49 | alt="Gallery" | 49 | alt="Gallery" |
| 50 | /> | 50 | /> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | <v-layout wrap> | 53 | <v-layout wrap> |
| 54 | <v-flex xs12 sm12> | 54 | <v-flex xs12 sm12> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right">Title:</label> | 57 | <label class="right">Title:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 sm6 class="ml-3"> | 59 | <v-flex xs8 sm6 class="ml-3"> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | v-model="editedItem.title" | 61 | v-model="editedItem.title" |
| 62 | placeholder="fill your Title" | 62 | placeholder="fill your Title" |
| 63 | name="name" | 63 | name="name" |
| 64 | type="text" | 64 | type="text" |
| 65 | required | 65 | required |
| 66 | ></v-text-field> | 66 | ></v-text-field> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-flex xs12 sm12> | 70 | <v-flex xs12 sm12> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs4 class="pt-4 subheading"> | 72 | <v-flex xs4 class="pt-4 subheading"> |
| 73 | <label class="right">Description:</label> | 73 | <label class="right">Description:</label> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs8 sm6 class="ml-3"> | 75 | <v-flex xs8 sm6 class="ml-3"> |
| 76 | <v-text-field | 76 | <v-text-field |
| 77 | placeholder="fill your Description" | 77 | placeholder="fill your Description" |
| 78 | v-model="editedItem.description" | 78 | v-model="editedItem.description" |
| 79 | type="text" | 79 | type="text" |
| 80 | name="email" | 80 | name="email" |
| 81 | required | 81 | required |
| 82 | ></v-text-field> | 82 | ></v-text-field> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | </v-layout> | 84 | </v-layout> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 class="pt-4 subheading"> | 87 | <v-flex xs4 class="pt-4 subheading"> |
| 88 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 88 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 89 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 89 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs8 sm6 class="ml-3"> | 91 | <v-flex xs8 sm6 class="ml-3"> |
| 92 | <v-select | 92 | <v-select |
| 93 | :items="addclass" | 93 | :items="addclass" |
| 94 | label="Select Class" | 94 | label="Select Class" |
| 95 | v-model="editedItem.classNum" | 95 | v-model="editedItem.classNum" |
| 96 | item-text="classNum" | 96 | item-text="classNum" |
| 97 | item-value="_id" | 97 | item-value="_id" |
| 98 | name="Select Class" | 98 | name="Select Class" |
| 99 | required | 99 | required |
| 100 | ></v-select> | 100 | ></v-select> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs4 class="pt-4 subheading"> | 105 | <v-flex xs4 class="pt-4 subheading"> |
| 106 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> | 106 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> |
| 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex xs8 sm6 class="ml-3"> | 109 | <v-flex xs8 sm6 class="ml-3"> |
| 110 | <v-text-field | 110 | <v-text-field |
| 111 | label="Select Image" | 111 | label="Select Image" |
| 112 | @click="editPickFile" | 112 | @click="editPickFile" |
| 113 | v-model="editImageName" | 113 | v-model="editImageName" |
| 114 | append-icon="attach_file" | 114 | append-icon="attach_file" |
| 115 | multiple | 115 | multiple |
| 116 | ></v-text-field> | 116 | ></v-text-field> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | </v-layout> | 118 | </v-layout> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | <v-flex xs12> | 121 | <v-flex xs12> |
| 122 | <div | 122 | <div |
| 123 | v-for="(editImage,index) in editedItem.youTubeLinkUrl" | 123 | v-for="(editImage,index) in editedItem.youTubeLinkUrl" |
| 124 | :key="index" | 124 | :key="index" |
| 125 | v-if="editImage.youTubeLink !=[]" | 125 | v-if="editImage.youTubeLink !=[]" |
| 126 | > | 126 | > |
| 127 | <v-layout wrap> | 127 | <v-layout wrap> |
| 128 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 128 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 129 | <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> | 129 | <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> |
| 130 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> | 130 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> | 133 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> |
| 134 | <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> | 134 | <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | <v-flex xs2 class="pt-4"> | 136 | <v-flex xs2 class="pt-4"> |
| 137 | <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> | 137 | <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | </div> | 141 | </div> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <div v-for="(updateImage,index) in updates" :key="index"> | 144 | <div v-for="(updateImage,index) in updates" :key="index"> |
| 145 | <v-layout wrap> | 145 | <v-layout wrap> |
| 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 147 | <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> | 147 | <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> |
| 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> | 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs10 sm12 md9 class="ml-3"> | 151 | <v-flex xs10 sm12 md9 class="ml-3"> |
| 152 | <v-text-field | 152 | <v-text-field |
| 153 | v-model="updateImage.youTubeLink" | 153 | v-model="updateImage.youTubeLink" |
| 154 | label="Upload new you tube link url" | 154 | label="Upload new you tube link url" |
| 155 | required | 155 | required |
| 156 | ></v-text-field> | 156 | ></v-text-field> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex xs2 class="pt-4"> | 158 | <v-flex xs2 class="pt-4"> |
| 159 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> | 159 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> |
| 160 | <v-icon @click="update">add_circle</v-icon> | 160 | <v-icon @click="update">add_circle</v-icon> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </div> | 164 | </div> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs12 sm12 md11 lg11> | 167 | <v-flex xs12 sm12 md11 lg11> |
| 168 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 168 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 169 | <v-spacer></v-spacer> | 169 | <v-spacer></v-spacer> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | dark | 172 | dark |
| 173 | @click="save" | 173 | @click="save" |
| 174 | :loading="editGalleryLoading" | 174 | :loading="editGalleryLoading" |
| 175 | class="add-button mr-4" | 175 | class="add-button mr-4" |
| 176 | >Save</v-btn> | 176 | >Save</v-btn> |
| 177 | </v-card-actions> | 177 | </v-card-actions> |
| 178 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 178 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 179 | <v-spacer></v-spacer> | 179 | <v-spacer></v-spacer> |
| 180 | <v-btn | 180 | <v-btn |
| 181 | round | 181 | round |
| 182 | dark | 182 | dark |
| 183 | @click="save" | 183 | @click="save" |
| 184 | :loading="editGalleryLoading" | 184 | :loading="editGalleryLoading" |
| 185 | class="add-button" | 185 | class="add-button" |
| 186 | >Save</v-btn> | 186 | >Save</v-btn> |
| 187 | <v-spacer></v-spacer> | 187 | <v-spacer></v-spacer> |
| 188 | </v-card-actions> | 188 | </v-card-actions> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | </v-card-text> | 191 | </v-card-text> |
| 192 | </v-card> | 192 | </v-card> |
| 193 | </v-dialog> | 193 | </v-dialog> |
| 194 | 194 | ||
| 195 | <!-- ****** PROFILE Gallery ****** --> | 195 | <!-- ****** PROFILE Gallery ****** --> |
| 196 | 196 | ||
| 197 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> | 197 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> |
| 198 | <v-card flat class="card-style pa-3" dark> | 198 | <v-card flat class="Card-style pa-3"> |
| 199 | <v-layout> | 199 | <v-layout> |
| 200 | <v-flex xs12> | 200 | <v-flex xs12> |
| 201 | <label class="title text-xs-center">View Gallery</label> | 201 | <label class="title text-xs-center">View Gallery</label> |
| 202 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> | 202 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-layout> | 204 | </v-layout> |
| 205 | <v-card-text> | 205 | <v-card-text> |
| 206 | <v-layout row wrap> | 206 | <v-layout row wrap> |
| 207 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 207 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 208 | <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> | 208 | <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> |
| 209 | <img src="/static/icon/user.png" width="240" height="180" /> | 209 | <img src="/static/icon/user.png" width="240" height="180" /> |
| 210 | </v-avatar> | 210 | </v-avatar> |
| 211 | <span | 211 | <span |
| 212 | v-for="(image,i) in editedItem.imageUrl" | 212 | v-for="(image,i) in editedItem.imageUrl" |
| 213 | :key="i" | 213 | :key="i" |
| 214 | class="mt-4 pa-2" | 214 | class="mt-4 pa-2" |
| 215 | v-if="editedItem.imageUrl" | 215 | v-if="editedItem.imageUrl" |
| 216 | > | 216 | > |
| 217 | <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> | 217 | <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> |
| 218 | </span> | 218 | </span> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-container grid-list-md> | 221 | <v-container grid-list-md> |
| 222 | <v-layout wrap> | 222 | <v-layout wrap> |
| 223 | <v-flex xs12> | 223 | <v-flex xs12> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs5 sm6> | 225 | <v-flex xs5 sm6> |
| 226 | <h5 class="right my-1"> | 226 | <h5 class="right my-1"> |
| 227 | <b>Title:</b> | 227 | <b>Title:</b> |
| 228 | </h5> | 228 | </h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex sm6 xs8> | 230 | <v-flex sm6 xs8> |
| 231 | <h5 class="my-1">{{ editedItem.title }}</h5> | 231 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-flex xs5 sm6> | 235 | <v-flex xs5 sm6> |
| 236 | <h5 class="right my-1"> | 236 | <h5 class="right my-1"> |
| 237 | <b>Description:</b> | 237 | <b>Description:</b> |
| 238 | </h5> | 238 | </h5> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex sm6 xs8> | 240 | <v-flex sm6 xs8> |
| 241 | <h5 class="my-1">{{ editedItem.description }}</h5> | 241 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 242 | </v-flex> | 242 | </v-flex> |
| 243 | </v-layout> | 243 | </v-layout> |
| 244 | <v-layout> | 244 | <v-layout> |
| 245 | <v-flex xs5 sm6> | 245 | <v-flex xs5 sm6> |
| 246 | <h5 class="right my-1"> | 246 | <h5 class="right my-1"> |
| 247 | <b>You Tube Link Url:</b> | 247 | <b>You Tube Link Url:</b> |
| 248 | </h5> | 248 | </h5> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | <v-flex sm6 xs8> | 250 | <v-flex sm6 xs8> |
| 251 | <h5 class="my-1 ml-3"> | 251 | <h5 class="my-1 ml-3"> |
| 252 | <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> | 252 | <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> |
| 253 | <li>{{ youTubeLinkUrl.youTubeLink }}</li> | 253 | <li>{{ youTubeLinkUrl.youTubeLink }}</li> |
| 254 | </ul> | 254 | </ul> |
| 255 | </h5> | 255 | </h5> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-layout> | 259 | </v-layout> |
| 260 | </v-container> | 260 | </v-container> |
| 261 | </v-card-text> | 261 | </v-card-text> |
| 262 | </v-card> | 262 | </v-card> |
| 263 | </v-dialog> | 263 | </v-dialog> |
| 264 | 264 | ||
| 265 | <!-- ****** Gallery TABLE ****** --> | 265 | <!-- ****** Gallery TABLE ****** --> |
| 266 | 266 | ||
| 267 | <v-toolbar color="transparent" flat> | 267 | <v-toolbar color="transparent" flat> |
| 268 | <v-btn | 268 | <v-btn |
| 269 | fab | 269 | fab |
| 270 | dark | 270 | dark |
| 271 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 271 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 272 | small | 272 | small |
| 273 | @click="addGalleryDialog = true" | 273 | @click="addGalleryDialog = true" |
| 274 | > | 274 | > |
| 275 | <v-icon dark>add</v-icon> | 275 | <v-icon dark>add</v-icon> |
| 276 | </v-btn> | 276 | </v-btn> |
| 277 | <v-btn | 277 | <v-btn |
| 278 | round | 278 | round |
| 279 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 279 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 280 | dark | 280 | dark |
| 281 | @click="addGalleryDialog = true" | 281 | @click="addGalleryDialog = true" |
| 282 | > | 282 | > |
| 283 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery | 283 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery |
| 284 | </v-btn> | 284 | </v-btn> |
| 285 | <v-spacer></v-spacer> | 285 | <v-spacer></v-spacer> |
| 286 | <v-card-title class="body-1" v-show="show"> | 286 | <v-card-title class="body-1" v-show="show"> |
| 287 | <v-btn icon large flat @click="displaySearch"> | 287 | <v-btn icon large flat @click="displaySearch"> |
| 288 | <v-avatar size="27"> | 288 | <v-avatar size="27"> |
| 289 | <img src="/static/icon/search.png" alt="icon" /> | 289 | <img src="/static/icon/search.png" alt="icon" /> |
| 290 | </v-avatar> | 290 | </v-avatar> |
| 291 | </v-btn> | 291 | </v-btn> |
| 292 | </v-card-title> | 292 | </v-card-title> |
| 293 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 293 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 294 | <v-layout> | 294 | <v-layout> |
| 295 | <v-text-field | 295 | <v-text-field |
| 296 | autofocus | 296 | autofocus |
| 297 | v-model="search" | 297 | v-model="search" |
| 298 | label="Search" | 298 | label="Search" |
| 299 | prepend-inner-icon="search" | 299 | prepend-inner-icon="search" |
| 300 | color="primary" | 300 | color="primary" |
| 301 | ></v-text-field> | 301 | ></v-text-field> |
| 302 | <v-icon @click="closeSearch" color="error">close</v-icon> | 302 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 303 | </v-layout> | 303 | </v-layout> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | </v-toolbar> | 305 | </v-toolbar> |
| 306 | <v-data-table | 306 | <v-data-table |
| 307 | :headers="headers" | 307 | :headers="headers" |
| 308 | :items="desserts" | 308 | :items="desserts" |
| 309 | :pagination.sync="pagination" | 309 | :pagination.sync="pagination" |
| 310 | :search="search" | 310 | :search="search" |
| 311 | > | 311 | > |
| 312 | <template slot="items" slot-scope="props"> | 312 | <template slot="items" slot-scope="props"> |
| 313 | <tr class="tr"> | 313 | <tr class="tr"> |
| 314 | <td class="td td-row">{{ props.index + 1}}</td> | 314 | <td class="td td-row">{{ props.index + 1}}</td> |
| 315 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 315 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 316 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 316 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 317 | <td class="td td-row text-xs-center"> | 317 | <td class="td td-row text-xs-center"> |
| 318 | <span> | 318 | <span> |
| 319 | <v-tooltip top> | 319 | <v-tooltip top> |
| 320 | <img | 320 | <img |
| 321 | slot="activator" | 321 | slot="activator" |
| 322 | style="cursor:pointer; width:25px; height:25px; " | 322 | style="cursor:pointer; width:25px; height:25px; " |
| 323 | class="mr-3" | 323 | class="mr-3" |
| 324 | @click="profile(props.item)" | 324 | @click="profile(props.item)" |
| 325 | src="/static/icon/view.png" | 325 | src="/static/icon/view.png" |
| 326 | /> | 326 | /> |
| 327 | <span>View</span> | 327 | <span>View</span> |
| 328 | </v-tooltip> | 328 | </v-tooltip> |
| 329 | <v-tooltip top> | 329 | <v-tooltip top> |
| 330 | <img | 330 | <img |
| 331 | slot="activator" | 331 | slot="activator" |
| 332 | style="cursor:pointer; width:20px; height:18px; " | 332 | style="cursor:pointer; width:20px; height:18px; " |
| 333 | class="mr-3" | 333 | class="mr-3" |
| 334 | @click="editItem(props.item)" | 334 | @click="editItem(props.item)" |
| 335 | src="/static/icon/edit.png" | 335 | src="/static/icon/edit.png" |
| 336 | /> | 336 | /> |
| 337 | <span>Edit</span> | 337 | <span>Edit</span> |
| 338 | </v-tooltip> | 338 | </v-tooltip> |
| 339 | <v-tooltip top> | 339 | <v-tooltip top> |
| 340 | <img | 340 | <img |
| 341 | slot="activator" | 341 | slot="activator" |
| 342 | style="cursor:pointer; width:20px; height:20px; " | 342 | style="cursor:pointer; width:20px; height:20px; " |
| 343 | class="mr-3" | 343 | class="mr-3" |
| 344 | @click="deleteItem(props.item)" | 344 | @click="deleteItem(props.item)" |
| 345 | src="/static/icon/delete.png" | 345 | src="/static/icon/delete.png" |
| 346 | /> | 346 | /> |
| 347 | <span>Delete</span> | 347 | <span>Delete</span> |
| 348 | </v-tooltip> | 348 | </v-tooltip> |
| 349 | </span> | 349 | </span> |
| 350 | </td> | 350 | </td> |
| 351 | </tr> | 351 | </tr> |
| 352 | </template> | 352 | </template> |
| 353 | <v-alert | 353 | <v-alert |
| 354 | slot="no-results" | 354 | slot="no-results" |
| 355 | :value="true" | 355 | :value="true" |
| 356 | color="error" | 356 | color="error" |
| 357 | icon="warning" | 357 | icon="warning" |
| 358 | >Your search for "{{ search }}" found no results.</v-alert> | 358 | >Your search for "{{ search }}" found no results.</v-alert> |
| 359 | </v-data-table> | 359 | </v-data-table> |
| 360 | <!-- ****** ADD Gallery ****** --> | 360 | <!-- ****** ADD Gallery ****** --> |
| 361 | <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog" persistent> | 361 | <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog" persistent> |
| 362 | <v-card flat class="card-style pa-2" dark> | 362 | <v-card flat class="Card-style pa-2"> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs12> | 364 | <v-flex xs12> |
| 365 | <label class="title text-xs-center">Add Gallery</label> | 365 | <label class="title text-xs-center">Add Gallery</label> |
| 366 | <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon> | 366 | <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | </v-layout> | 368 | </v-layout> |
| 369 | <v-form ref="form" v-model="valid" lazy-validation> | 369 | <v-form ref="form" v-model="valid" lazy-validation> |
| 370 | <v-container fluid> | 370 | <v-container fluid> |
| 371 | <v-layout> | 371 | <v-layout> |
| 372 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 372 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 373 | <input | 373 | <input |
| 374 | type="file" | 374 | type="file" |
| 375 | style="display: none" | 375 | style="display: none" |
| 376 | ref="image" | 376 | ref="image" |
| 377 | accept="image/*" | 377 | accept="image/*" |
| 378 | multiple | 378 | multiple |
| 379 | @change="onFilePicked" | 379 | @change="onFilePicked" |
| 380 | /> | 380 | /> |
| 381 | <v-layout justify-center> | 381 | <v-layout justify-center> |
| 382 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> | 382 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> |
| 383 | <img :src="file" height="150" width="150" /> | 383 | <img :src="file" height="150" width="150" /> |
| 384 | </v-flex> | 384 | </v-flex> |
| 385 | </v-layout> | 385 | </v-layout> |
| 386 | <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> | 386 | <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | <v-flex xs12> | 389 | <v-flex xs12> |
| 390 | <v-layout> | 390 | <v-layout> |
| 391 | <v-flex xs4 class="pt-4 subheading"> | 391 | <v-flex xs4 class="pt-4 subheading"> |
| 392 | <label class="right">Title:</label> | 392 | <label class="right">Title:</label> |
| 393 | </v-flex> | 393 | </v-flex> |
| 394 | <v-flex xs8 sm8 md7 class="ml-3"> | 394 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 395 | <v-text-field | 395 | <v-text-field |
| 396 | v-model="addGallery.title" | 396 | v-model="addGallery.title" |
| 397 | placeholder="fill your Title" | 397 | placeholder="fill your Title" |
| 398 | name="name" | 398 | name="name" |
| 399 | type="text" | 399 | type="text" |
| 400 | :rules="titleRules" | 400 | :rules="titleRules" |
| 401 | required | 401 | required |
| 402 | ></v-text-field> | 402 | ></v-text-field> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | </v-layout> | 404 | </v-layout> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | <v-flex xs12> | 406 | <v-flex xs12> |
| 407 | <v-layout> | 407 | <v-layout> |
| 408 | <v-flex xs4 class="pt-4 subheading"> | 408 | <v-flex xs4 class="pt-4 subheading"> |
| 409 | <label class="right">Description:</label> | 409 | <label class="right">Description:</label> |
| 410 | </v-flex> | 410 | </v-flex> |
| 411 | <v-flex xs8 sm8 md7 class="ml-3"> | 411 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 412 | <v-text-field | 412 | <v-text-field |
| 413 | placeholder="fill your Description" | 413 | placeholder="fill your Description" |
| 414 | :rules="descriptionRules" | 414 | :rules="descriptionRules" |
| 415 | v-model="addGallery.description" | 415 | v-model="addGallery.description" |
| 416 | type="text" | 416 | type="text" |
| 417 | name="email" | 417 | name="email" |
| 418 | required | 418 | required |
| 419 | ></v-text-field> | 419 | ></v-text-field> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | </v-layout> | 421 | </v-layout> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | <v-flex xs12> | 423 | <v-flex xs12> |
| 424 | <v-layout> | 424 | <v-layout> |
| 425 | <v-flex xs4 class="pt-4 subheading"> | 425 | <v-flex xs4 class="pt-4 subheading"> |
| 426 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 426 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 427 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 427 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex xs8 sm8 md7 class="ml-3"> | 429 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 430 | <v-select | 430 | <v-select |
| 431 | :items="addclass" | 431 | :items="addclass" |
| 432 | label="Select Class" | 432 | label="Select Class" |
| 433 | v-model="addGallery.classNum" | 433 | v-model="addGallery.classNum" |
| 434 | item-text="classNum" | 434 | item-text="classNum" |
| 435 | item-value="_id" | 435 | item-value="_id" |
| 436 | name="Select Class" | 436 | name="Select Class" |
| 437 | required | 437 | required |
| 438 | ></v-select> | 438 | ></v-select> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | <v-flex xs12> | 442 | <v-flex xs12> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs4 class="pt-4 subheading"> | 444 | <v-flex xs4 class="pt-4 subheading"> |
| 445 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 445 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 446 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 446 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs8 sm8 md7 class="ml-3"> | 448 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 449 | <v-text-field | 449 | <v-text-field |
| 450 | label="Select Image" | 450 | label="Select Image" |
| 451 | @click="pickFile" | 451 | @click="pickFile" |
| 452 | v-model="imageName" | 452 | v-model="imageName" |
| 453 | append-icon="attach_file" | 453 | append-icon="attach_file" |
| 454 | multiple | 454 | multiple |
| 455 | ></v-text-field> | 455 | ></v-text-field> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | </v-layout> | 457 | </v-layout> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | <v-layout> | 459 | <v-layout> |
| 460 | <v-flex xs12> | 460 | <v-flex xs12> |
| 461 | <div v-for="(youTubeLink,index) in finds" :key="index"> | 461 | <div v-for="(youTubeLink,index) in finds" :key="index"> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs4 class="pt-4 subheading"> | 463 | <v-flex xs4 class="pt-4 subheading"> |
| 464 | <label class="right">You Tube Url:</label> | 464 | <label class="right">You Tube Url:</label> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-flex xs8 sm8 md6 class="ml-3"> | 466 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 467 | <v-text-field | 467 | <v-text-field |
| 468 | placeholder="fill your youtube link" | 468 | placeholder="fill your youtube link" |
| 469 | v-model="youTubeLink.value" | 469 | v-model="youTubeLink.value" |
| 470 | type="text" | 470 | type="text" |
| 471 | name="link" | 471 | name="link" |
| 472 | required | 472 | required |
| 473 | ></v-text-field> | 473 | ></v-text-field> |
| 474 | </v-flex> | 474 | </v-flex> |
| 475 | <v-flex xs2 class="pt-4"> | 475 | <v-flex xs2 class="pt-4"> |
| 476 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> | 476 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> |
| 477 | <v-icon @click="addFind">add_circle</v-icon> | 477 | <v-icon @click="addFind">add_circle</v-icon> |
| 478 | </v-flex> | 478 | </v-flex> |
| 479 | </v-layout> | 479 | </v-layout> |
| 480 | </div> | 480 | </div> |
| 481 | </v-flex> | 481 | </v-flex> |
| 482 | </v-layout> | 482 | </v-layout> |
| 483 | <v-layout> | 483 | <v-layout> |
| 484 | <v-flex xs12 sm12> | 484 | <v-flex xs12 sm12> |
| 485 | <v-layout class="right"> | 485 | <v-layout class="right"> |
| 486 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 486 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 487 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 487 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 488 | </v-layout> | 488 | </v-layout> |
| 489 | </v-flex> | 489 | </v-flex> |
| 490 | </v-layout> | 490 | </v-layout> |
| 491 | </v-container> | 491 | </v-container> |
| 492 | </v-form> | 492 | </v-form> |
| 493 | </v-card> | 493 | </v-card> |
| 494 | </v-dialog> | 494 | </v-dialog> |
| 495 | <v-snackbar | 495 | <v-snackbar |
| 496 | :timeout="timeout" | 496 | :timeout="timeout" |
| 497 | :top="y === 'top'" | 497 | :top="y === 'top'" |
| 498 | :right="x === 'right'" | 498 | :right="x === 'right'" |
| 499 | :vertical="mode === 'vertical'" | 499 | :vertical="mode === 'vertical'" |
| 500 | v-model="snackbar" | 500 | v-model="snackbar" |
| 501 | :color="color" | 501 | :color="color" |
| 502 | >{{ text }}</v-snackbar> | 502 | >{{ text }}</v-snackbar> |
| 503 | <div class="loader" v-if="showLoader"> | 503 | <div class="loader" v-if="showLoader"> |
| 504 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 504 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 505 | </div> | 505 | </div> |
| 506 | </v-container> | 506 | </v-container> |
| 507 | </template> | 507 | </template> |
| 508 | 508 | ||
| 509 | <script> | 509 | <script> |
| 510 | import http from "@/Services/http.js"; | 510 | import http from "@/Services/http.js"; |
| 511 | 511 | ||
| 512 | export default { | 512 | export default { |
| 513 | data: () => ({ | 513 | data: () => ({ |
| 514 | snackbar: false, | 514 | snackbar: false, |
| 515 | y: "top", | 515 | y: "top", |
| 516 | x: "right", | 516 | x: "right", |
| 517 | mode: "", | 517 | mode: "", |
| 518 | timeout: 3000, | 518 | timeout: 3000, |
| 519 | text: "", | 519 | text: "", |
| 520 | loading: false, | 520 | loading: false, |
| 521 | color: "", | 521 | color: "", |
| 522 | date: null, | 522 | date: null, |
| 523 | search: "", | 523 | search: "", |
| 524 | show: true, | 524 | show: true, |
| 525 | addGalleryDialog: false, | 525 | addGalleryDialog: false, |
| 526 | showSearch: false, | 526 | showSearch: false, |
| 527 | showLoader: false, | 527 | showLoader: false, |
| 528 | editGalleryDialog: false, | 528 | editGalleryDialog: false, |
| 529 | viewProfileGallery: false, | 529 | viewProfileGallery: false, |
| 530 | valid: true, | 530 | valid: true, |
| 531 | editGalleryLoading: false, | 531 | editGalleryLoading: false, |
| 532 | addclass: [], | 532 | addclass: [], |
| 533 | addSection: [], | 533 | addSection: [], |
| 534 | finds: [{ value: "" }], | 534 | finds: [{ value: "" }], |
| 535 | updates: [{ youTubeLink: "" }], | 535 | updates: [{ youTubeLink: "" }], |
| 536 | youTubeLink: {}, | 536 | youTubeLink: {}, |
| 537 | addGallery: { | 537 | addGallery: { |
| 538 | youTubeLinkUrl: [], | 538 | youTubeLinkUrl: [], |
| 539 | }, | 539 | }, |
| 540 | pagination: { | 540 | pagination: { |
| 541 | rowsPerPage: 10, | 541 | rowsPerPage: 10, |
| 542 | }, | 542 | }, |
| 543 | imageName: "", | 543 | imageName: "", |
| 544 | imageUrl: "", | 544 | imageUrl: "", |
| 545 | imageFile: "", | 545 | imageFile: "", |
| 546 | image: [], | 546 | image: [], |
| 547 | upload: "", | 547 | upload: "", |
| 548 | editImageName: "", | 548 | editImageName: "", |
| 549 | editFiles: [], | 549 | editFiles: [], |
| 550 | files: [], | 550 | files: [], |
| 551 | token: "", | 551 | token: "", |
| 552 | titleRules: [(v) => !!v || " Tilte is required"], | 552 | titleRules: [(v) => !!v || " Tilte is required"], |
| 553 | descriptionRules: [(v) => !!v || " Description is required"], | 553 | descriptionRules: [(v) => !!v || " Description is required"], |
| 554 | headers: [ | 554 | headers: [ |
| 555 | { | 555 | { |
| 556 | align: "", | 556 | align: "", |
| 557 | text: "No", | 557 | text: "No", |
| 558 | sortable: false, | 558 | sortable: false, |
| 559 | value: "index", | 559 | value: "index", |
| 560 | }, | 560 | }, |
| 561 | { text: "Title", value: "title", sortable: false, align: "center" }, | 561 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 562 | { | 562 | { |
| 563 | text: "Description", | 563 | text: "Description", |
| 564 | value: "description", | 564 | value: "description", |
| 565 | sortable: false, | 565 | sortable: false, |
| 566 | align: "center", | 566 | align: "center", |
| 567 | }, | 567 | }, |
| 568 | { text: "Action", value: "", sortable: false, align: "center" }, | 568 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 569 | ], | 569 | ], |
| 570 | desserts: [], | 570 | desserts: [], |
| 571 | editedIndex: -1, | 571 | editedIndex: -1, |
| 572 | editedItem: {}, | 572 | editedItem: {}, |
| 573 | index: "", | 573 | index: "", |
| 574 | }), | 574 | }), |
| 575 | watch: { | 575 | watch: { |
| 576 | addGalleryDialog: function (val) { | 576 | addGalleryDialog: function (val) { |
| 577 | if (!val) { | 577 | if (!val) { |
| 578 | this.addGallery = []; | 578 | this.addGallery = []; |
| 579 | this.imageName = ""; | 579 | this.imageName = ""; |
| 580 | this.youTubeLinkUrl = []; | 580 | this.youTubeLinkUrl = []; |
| 581 | this.youTubeLink = {}; | 581 | this.youTubeLink = {}; |
| 582 | this.index = ""; | 582 | this.index = ""; |
| 583 | this.files = []; | 583 | this.files = []; |
| 584 | } | 584 | } |
| 585 | }, | 585 | }, |
| 586 | }, | 586 | }, |
| 587 | methods: { | 587 | methods: { |
| 588 | pickFile() { | 588 | pickFile() { |
| 589 | this.$refs.image.click(); | 589 | this.$refs.image.click(); |
| 590 | }, | 590 | }, |
| 591 | editPickFile() { | 591 | editPickFile() { |
| 592 | this.$refs.editImage.click(); | 592 | this.$refs.editImage.click(); |
| 593 | }, | 593 | }, |
| 594 | onFilePicked(e) { | 594 | onFilePicked(e) { |
| 595 | const files = e.target.files; | 595 | const files = e.target.files; |
| 596 | /** fetch Image Name **/ | 596 | /** fetch Image Name **/ |
| 597 | if (files[0] !== undefined) { | 597 | if (files[0] !== undefined) { |
| 598 | this.imageName = files[0].name; | 598 | this.imageName = files[0].name; |
| 599 | if (this.imageName.lastIndexOf(".") <= 0) { | 599 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 600 | return; | 600 | return; |
| 601 | } | 601 | } |
| 602 | this.files = []; | 602 | this.files = []; |
| 603 | // console.log("files", this.files); | 603 | // console.log("files", this.files); |
| 604 | /** Select many image and showing many image add to Gallery card **/ | 604 | /** Select many image and showing many image add to Gallery card **/ |
| 605 | const test = Array.from(files).forEach((file, idx) => { | 605 | const test = Array.from(files).forEach((file, idx) => { |
| 606 | const fr = new FileReader(); | 606 | const fr = new FileReader(); |
| 607 | const getResult = new Promise((resolve) => { | 607 | const getResult = new Promise((resolve) => { |
| 608 | fr.onload = (e) => { | 608 | fr.onload = (e) => { |
| 609 | this.files.push( | 609 | this.files.push( |
| 610 | // id: idx, | 610 | // id: idx, |
| 611 | e.target.result | 611 | e.target.result |
| 612 | ); | 612 | ); |
| 613 | }; | 613 | }; |
| 614 | // console.log("uploadImage=======>", this.files); | 614 | // console.log("uploadImage=======>", this.files); |
| 615 | }); | 615 | }); |
| 616 | fr.readAsDataURL(file); | 616 | fr.readAsDataURL(file); |
| 617 | return getResult.then((file) => { | 617 | return getResult.then((file) => { |
| 618 | return file; | 618 | return file; |
| 619 | }); | 619 | }); |
| 620 | }); | 620 | }); |
| 621 | const fr = new FileReader(); | 621 | const fr = new FileReader(); |
| 622 | fr.readAsDataURL(files[0]); | 622 | fr.readAsDataURL(files[0]); |
| 623 | fr.addEventListener("load", () => { | 623 | fr.addEventListener("load", () => { |
| 624 | this.imageFile = files; // this is an image file that can be sent to server... | 624 | this.imageFile = files; // this is an image file that can be sent to server... |
| 625 | }); | 625 | }); |
| 626 | } else { | 626 | } else { |
| 627 | this.imageName = ""; | 627 | this.imageName = ""; |
| 628 | this.imageFile = ""; | 628 | this.imageFile = ""; |
| 629 | this.imageUrl = ""; | 629 | this.imageUrl = ""; |
| 630 | } | 630 | } |
| 631 | }, | 631 | }, |
| 632 | editFilePicked(e) { | 632 | editFilePicked(e) { |
| 633 | const files = e.target.files; | 633 | const files = e.target.files; |
| 634 | /** fetch Image Name **/ | 634 | /** fetch Image Name **/ |
| 635 | if (files[0] !== undefined) { | 635 | if (files[0] !== undefined) { |
| 636 | this.editImageName = files[0].name; | 636 | this.editImageName = files[0].name; |
| 637 | if (this.editImageName.lastIndexOf(".") <= 0) { | 637 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 638 | return; | 638 | return; |
| 639 | } | 639 | } |
| 640 | /** Select many image and showing many image add to Gallery card **/ | 640 | /** Select many image and showing many image add to Gallery card **/ |
| 641 | const test = Array.from(files).forEach((file, idx) => { | 641 | const test = Array.from(files).forEach((file, idx) => { |
| 642 | const fr = new FileReader(); | 642 | const fr = new FileReader(); |
| 643 | const getResult = new Promise((resolve) => { | 643 | const getResult = new Promise((resolve) => { |
| 644 | fr.onload = (e) => { | 644 | fr.onload = (e) => { |
| 645 | this.editFiles.push( | 645 | this.editFiles.push( |
| 646 | // id: idx, | 646 | // id: idx, |
| 647 | e.target.result | 647 | e.target.result |
| 648 | ); | 648 | ); |
| 649 | }; | 649 | }; |
| 650 | // console.log("uploadeditFilesImage=======>", this.editFiles); | 650 | // console.log("uploadeditFilesImage=======>", this.editFiles); |
| 651 | }); | 651 | }); |
| 652 | fr.readAsDataURL(file); | 652 | fr.readAsDataURL(file); |
| 653 | return getResult.then((file) => { | 653 | return getResult.then((file) => { |
| 654 | return file; | 654 | return file; |
| 655 | }); | 655 | }); |
| 656 | }); | 656 | }); |
| 657 | const fr = new FileReader(); | 657 | const fr = new FileReader(); |
| 658 | fr.readAsDataURL(files[0]); | 658 | fr.readAsDataURL(files[0]); |
| 659 | // fr.addEventListener("load", () => { | 659 | // fr.addEventListener("load", () => { |
| 660 | // this.imageFile = files; // this is an image file that can be sent to server... | 660 | // this.imageFile = files; // this is an image file that can be sent to server... |
| 661 | // }); | 661 | // }); |
| 662 | } else { | 662 | } else { |
| 663 | this.editImageName = ""; | 663 | this.editImageName = ""; |
| 664 | this.editFiles = []; | 664 | this.editFiles = []; |
| 665 | } | 665 | } |
| 666 | }, | 666 | }, |
| 667 | getGalleryList() { | 667 | getGalleryList() { |
| 668 | this.showLoader = true; | 668 | this.showLoader = true; |
| 669 | http() | 669 | http() |
| 670 | .get("/getGalleryList", { | 670 | .get("/getGalleryList", { |
| 671 | headers: { Authorization: "Bearer " + this.token }, | 671 | headers: { Authorization: "Bearer " + this.token }, |
| 672 | }) | 672 | }) |
| 673 | .then((response) => { | 673 | .then((response) => { |
| 674 | this.desserts = response.data.data; | 674 | this.desserts = response.data.data; |
| 675 | this.showLoader = false; | 675 | this.showLoader = false; |
| 676 | }) | 676 | }) |
| 677 | .catch((error) => { | 677 | .catch((error) => { |
| 678 | // console.log("err====>", err); | 678 | // console.log("err====>", err); |
| 679 | this.showLoader = false; | 679 | this.showLoader = false; |
| 680 | if (error.response.status === 401) { | 680 | if (error.response.status === 401) { |
| 681 | this.$router.replace({ path: "/" }); | 681 | this.$router.replace({ path: "/" }); |
| 682 | this.$store.dispatch("setToken", null); | 682 | this.$store.dispatch("setToken", null); |
| 683 | this.$store.dispatch("Id", null); | 683 | this.$store.dispatch("Id", null); |
| 684 | } | 684 | } |
| 685 | }); | 685 | }); |
| 686 | }, | 686 | }, |
| 687 | editItem(item) { | 687 | editItem(item) { |
| 688 | this.files = []; | 688 | this.files = []; |
| 689 | this.editedIndex = this.desserts.indexOf(item); | 689 | this.editedIndex = this.desserts.indexOf(item); |
| 690 | this.editedItem = Object.assign({}, item); | 690 | this.editedItem = Object.assign({}, item); |
| 691 | this.editGalleryDialog = true; | 691 | this.editGalleryDialog = true; |
| 692 | }, | 692 | }, |
| 693 | profile(item) { | 693 | profile(item) { |
| 694 | this.editedIndex = this.desserts.indexOf(item); | 694 | this.editedIndex = this.desserts.indexOf(item); |
| 695 | this.editedItem = Object.assign({}, item); | 695 | this.editedItem = Object.assign({}, item); |
| 696 | this.viewProfileGallery = true; | 696 | this.viewProfileGallery = true; |
| 697 | }, | 697 | }, |
| 698 | deleteItem(item) { | 698 | deleteItem(item) { |
| 699 | let deleteGallery = { | 699 | let deleteGallery = { |
| 700 | galleryId: item._id, | 700 | galleryId: item._id, |
| 701 | }; | 701 | }; |
| 702 | http() | 702 | http() |
| 703 | .delete( | 703 | .delete( |
| 704 | "/deleteGallery", | 704 | "/deleteGallery", |
| 705 | confirm("Are you sure you want to delete this?") && { | 705 | confirm("Are you sure you want to delete this?") && { |
| 706 | params: deleteGallery, | 706 | params: deleteGallery, |
| 707 | headers: { | 707 | headers: { |
| 708 | Authorization: "Bearer " + this.token, | 708 | Authorization: "Bearer " + this.token, |
| 709 | }, | 709 | }, |
| 710 | } | 710 | } |
| 711 | ) | 711 | ) |
| 712 | .then((response) => { | 712 | .then((response) => { |
| 713 | this.snackbar = true; | 713 | this.snackbar = true; |
| 714 | this.text = "Successfully delete Existing Gallery"; | 714 | this.text = "Successfully delete Existing Gallery"; |
| 715 | this.color = "green"; | 715 | this.color = "green"; |
| 716 | this.getGalleryList(); | 716 | this.getGalleryList(); |
| 717 | }) | 717 | }) |
| 718 | .catch((error) => { | 718 | .catch((error) => { |
| 719 | // console.log(error); | 719 | // console.log(error); |
| 720 | this.snackbar = true; | 720 | this.snackbar = true; |
| 721 | this.text = error.response.data.message; | 721 | this.text = error.response.data.message; |
| 722 | this.color = "error"; | 722 | this.color = "error"; |
| 723 | }); | 723 | }); |
| 724 | }, | 724 | }, |
| 725 | deleteImage(imageId, id) { | 725 | deleteImage(imageId, id) { |
| 726 | let deleteImages = { | 726 | let deleteImages = { |
| 727 | galleryId: id, | 727 | galleryId: id, |
| 728 | imageId: imageId, | 728 | imageId: imageId, |
| 729 | }; | 729 | }; |
| 730 | http() | 730 | http() |
| 731 | .put("/deleteImage", deleteImages) | 731 | .put("/deleteImage", deleteImages) |
| 732 | .then((response) => { | 732 | .then((response) => { |
| 733 | this.snackbar = true; | 733 | this.snackbar = true; |
| 734 | this.text = response.data.message; | 734 | this.text = response.data.message; |
| 735 | this.color = "green"; | 735 | this.color = "green"; |
| 736 | this.getGalleryList(); | 736 | this.getGalleryList(); |
| 737 | this.close(); | 737 | this.close(); |
| 738 | }) | 738 | }) |
| 739 | .catch((error) => { | 739 | .catch((error) => { |
| 740 | this.snackbar = true; | 740 | this.snackbar = true; |
| 741 | this.text = error.response.data.message; | 741 | this.text = error.response.data.message; |
| 742 | this.color = "error"; | 742 | this.color = "error"; |
| 743 | }); | 743 | }); |
| 744 | }, | 744 | }, |
| 745 | close() { | 745 | close() { |
| 746 | this.editGalleryDialog = false; | 746 | this.editGalleryDialog = false; |
| 747 | }, | 747 | }, |
| 748 | closeProfileGallery() { | 748 | closeProfileGallery() { |
| 749 | this.viewProfileGallery = false; | 749 | this.viewProfileGallery = false; |
| 750 | }, | 750 | }, |
| 751 | closeAddGalleryModel() { | 751 | closeAddGalleryModel() { |
| 752 | this.addGalleryDialog = false; | 752 | this.addGalleryDialog = false; |
| 753 | this.addGallery = []; | 753 | this.addGallery = []; |
| 754 | this.imageName = ""; | 754 | this.imageName = ""; |
| 755 | this.youTubeLinkUrl = []; | 755 | this.youTubeLinkUrl = []; |
| 756 | this.youTubeLink = {}; | 756 | this.youTubeLink = {}; |
| 757 | this.index = ""; | 757 | this.index = ""; |
| 758 | this.files = []; | 758 | this.files = []; |
| 759 | }, | 759 | }, |
| 760 | submit() { | 760 | submit() { |
| 761 | for (let i = 0; i < this.finds.length; i++) { | 761 | for (let i = 0; i < this.finds.length; i++) { |
| 762 | this.addGallery.youTubeLinkUrl.push(this.finds[i].value); | 762 | this.addGallery.youTubeLinkUrl.push(this.finds[i].value); |
| 763 | } | 763 | } |
| 764 | if (this.$refs.form.validate()) { | 764 | if (this.$refs.form.validate()) { |
| 765 | if (this.files) { | 765 | if (this.files) { |
| 766 | var ary = []; | 766 | var ary = []; |
| 767 | var imageData = []; | 767 | var imageData = []; |
| 768 | ary = this.files; | 768 | ary = this.files; |
| 769 | for (let i = 0; i < ary.length; i++) { | 769 | for (let i = 0; i < ary.length; i++) { |
| 770 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 770 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 771 | imageData.push(imageUrl); | 771 | imageData.push(imageUrl); |
| 772 | this.addGallery.upload = imageData; | 772 | this.addGallery.upload = imageData; |
| 773 | } | 773 | } |
| 774 | } | 774 | } |
| 775 | if (this.addGallery.youTubeLinkUrl == "") { | 775 | if (this.addGallery.youTubeLinkUrl == "") { |
| 776 | var galleryData = { | 776 | var galleryData = { |
| 777 | classId: this.addGallery.classNum, | 777 | classId: this.addGallery.classNum, |
| 778 | title: this.addGallery.title, | 778 | title: this.addGallery.title, |
| 779 | description: this.addGallery.description, | 779 | description: this.addGallery.description, |
| 780 | upload: this.addGallery.upload, | 780 | upload: this.addGallery.upload, |
| 781 | }; | 781 | }; |
| 782 | this.loading = true; | 782 | this.loading = true; |
| 783 | http() | 783 | http() |
| 784 | .post("/createGallery", galleryData) | 784 | .post("/createGallery", galleryData) |
| 785 | .then((response) => { | 785 | .then((response) => { |
| 786 | this.getGalleryList(); | 786 | this.getGalleryList(); |
| 787 | this.addGalleryDialog = false; | 787 | this.addGalleryDialog = false; |
| 788 | this.loading = false; | 788 | this.loading = false; |
| 789 | this.snackbar = true; | 789 | this.snackbar = true; |
| 790 | this.text = response.data.message; | 790 | this.text = response.data.message; |
| 791 | this.color = "green"; | 791 | this.color = "green"; |
| 792 | this.clear(); | 792 | this.clear(); |
| 793 | this.files = ""; | 793 | this.files = ""; |
| 794 | }) | 794 | }) |
| 795 | .catch((error) => { | 795 | .catch((error) => { |
| 796 | this.snackbar = true; | 796 | this.snackbar = true; |
| 797 | this.text = error.response.data.message; | 797 | this.text = error.response.data.message; |
| 798 | this.color = "error"; | 798 | this.color = "error"; |
| 799 | this.loading = false; | 799 | this.loading = false; |
| 800 | }); | 800 | }); |
| 801 | } else if (this.addGallery.youTubeLinkUrl) { | 801 | } else if (this.addGallery.youTubeLinkUrl) { |
| 802 | this.loading = true; | 802 | this.loading = true; |
| 803 | http() | 803 | http() |
| 804 | .post("/createGallery", this.addGallery) | 804 | .post("/createGallery", this.addGallery) |
| 805 | .then((response) => { | 805 | .then((response) => { |
| 806 | this.getGalleryList(); | 806 | this.getGalleryList(); |
| 807 | this.addGalleryDialog = false; | 807 | this.addGalleryDialog = false; |
| 808 | this.files = "nmn"; | 808 | this.files = "nmn"; |
| 809 | this.loading = false; | 809 | this.loading = false; |
| 810 | this.snackbar = true; | 810 | this.snackbar = true; |
| 811 | this.color = "green"; | 811 | this.color = "green"; |
| 812 | this.text = response.data.message; | 812 | this.text = response.data.message; |
| 813 | this.clear(); | 813 | this.clear(); |
| 814 | this.removeAddFind(); | 814 | this.removeAddFind(); |
| 815 | this.files = ""; | 815 | this.files = ""; |
| 816 | }) | 816 | }) |
| 817 | .catch((error) => { | 817 | .catch((error) => { |
| 818 | this.snackbar = true; | 818 | this.snackbar = true; |
| 819 | this.text = error.response.data.message; | 819 | this.text = error.response.data.message; |
| 820 | this.loading = false; | 820 | this.loading = false; |
| 821 | this.color = "error"; | 821 | this.color = "error"; |
| 822 | }); | 822 | }); |
| 823 | } | 823 | } |
| 824 | } | 824 | } |
| 825 | }, | 825 | }, |
| 826 | clear() { | 826 | clear() { |
| 827 | this.$refs.form.reset(); | 827 | this.$refs.form.reset(); |
| 828 | this.files = []; | 828 | this.files = []; |
| 829 | }, | 829 | }, |
| 830 | save() { | 830 | save() { |
| 831 | this.editedItem.gelleryId = this.editedItem._id; | 831 | this.editedItem.gelleryId = this.editedItem._id; |
| 832 | var linkUrl = []; | 832 | var linkUrl = []; |
| 833 | for (let i = 0; i < this.updates.length; i++) { | 833 | for (let i = 0; i < this.updates.length; i++) { |
| 834 | linkUrl.push(this.updates[i].youTubeLink); | 834 | linkUrl.push(this.updates[i].youTubeLink); |
| 835 | } | 835 | } |
| 836 | if (this.editFiles) { | 836 | if (this.editFiles) { |
| 837 | var ary = []; | 837 | var ary = []; |
| 838 | var imageData = []; | 838 | var imageData = []; |
| 839 | ary = this.editFiles; | 839 | ary = this.editFiles; |
| 840 | for (let i = 0; i < ary.length; i++) { | 840 | for (let i = 0; i < ary.length; i++) { |
| 841 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 841 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 842 | imageData.push(imageUrl); | 842 | imageData.push(imageUrl); |
| 843 | this.editedItem.editFiles = imageData; | 843 | this.editedItem.editFiles = imageData; |
| 844 | } | 844 | } |
| 845 | } | 845 | } |
| 846 | if (linkUrl != "") { | 846 | if (linkUrl != "") { |
| 847 | var updateData = { | 847 | var updateData = { |
| 848 | galleryId: this.editedItem._id, | 848 | galleryId: this.editedItem._id, |
| 849 | description: this.editedItem.description, | 849 | description: this.editedItem.description, |
| 850 | classId: this.editedItem.classNum, | 850 | classId: this.editedItem.classNum, |
| 851 | uploadImage: this.editedItem.editFiles, | 851 | uploadImage: this.editedItem.editFiles, |
| 852 | title: this.editedItem.title, | 852 | title: this.editedItem.title, |
| 853 | updateYouTubeLinkUrl: linkUrl, | 853 | updateYouTubeLinkUrl: linkUrl, |
| 854 | }; | 854 | }; |
| 855 | } else if (linkUrl == "") { | 855 | } else if (linkUrl == "") { |
| 856 | var updateData = { | 856 | var updateData = { |
| 857 | galleryId: this.editedItem._id, | 857 | galleryId: this.editedItem._id, |
| 858 | description: this.editedItem.description, | 858 | description: this.editedItem.description, |
| 859 | classId: this.editedItem.classNum, | 859 | classId: this.editedItem.classNum, |
| 860 | uploadImage: this.editedItem.editFiles, | 860 | uploadImage: this.editedItem.editFiles, |
| 861 | title: this.editedItem.title, | 861 | title: this.editedItem.title, |
| 862 | }; | 862 | }; |
| 863 | } | 863 | } |
| 864 | this.editGalleryLoading = true; | 864 | this.editGalleryLoading = true; |
| 865 | http() | 865 | http() |
| 866 | .put("/updateGallery", updateData) | 866 | .put("/updateGallery", updateData) |
| 867 | .then((response) => { | 867 | .then((response) => { |
| 868 | this.getGalleryList(); | 868 | this.getGalleryList(); |
| 869 | this.close(); | 869 | this.close(); |
| 870 | this.snackbar = true; | 870 | this.snackbar = true; |
| 871 | this.text = response.data.message; | 871 | this.text = response.data.message; |
| 872 | this.color = "green"; | 872 | this.color = "green"; |
| 873 | this.editGalleryLoading = false; | 873 | this.editGalleryLoading = false; |
| 874 | this.editImageName = ""; | 874 | this.editImageName = ""; |
| 875 | this.editFiles = []; | 875 | this.editFiles = []; |
| 876 | }) | 876 | }) |
| 877 | .catch((error) => { | 877 | .catch((error) => { |
| 878 | this.editGalleryLoading = false; | 878 | this.editGalleryLoading = false; |
| 879 | this.snackbar = true; | 879 | this.snackbar = true; |
| 880 | this.text = error.response.data.message; | 880 | this.text = error.response.data.message; |
| 881 | this.color = "error"; | 881 | this.color = "error"; |
| 882 | }); | 882 | }); |
| 883 | }, | 883 | }, |
| 884 | getAllClasses() { | 884 | getAllClasses() { |
| 885 | http() | 885 | http() |
| 886 | .get("/getClassesList", { | 886 | .get("/getClassesList", { |
| 887 | headers: { Authorization: "Bearer " + this.token }, | 887 | headers: { Authorization: "Bearer " + this.token }, |
| 888 | }) | 888 | }) |
| 889 | .then((response) => { | 889 | .then((response) => { |
| 890 | this.addclass = response.data.data; | 890 | this.addclass = response.data.data; |
| 891 | }) | 891 | }) |
| 892 | .catch((err) => { | 892 | .catch((err) => { |
| 893 | // console.log("err====>", err); | 893 | // console.log("err====>", err); |
| 894 | }); | 894 | }); |
| 895 | }, | 895 | }, |
| 896 | removeAddFind: function () { | 896 | removeAddFind: function () { |
| 897 | this.finds = [{ value: "" }]; | 897 | this.finds = [{ value: "" }]; |
| 898 | }, | 898 | }, |
| 899 | addFind: function () { | 899 | addFind: function () { |
| 900 | this.finds.push({ value: "" }); | 900 | this.finds.push({ value: "" }); |
| 901 | }, | 901 | }, |
| 902 | update: function () { | 902 | update: function () { |
| 903 | this.updates.push({ youTubeLink: "" }); | 903 | this.updates.push({ youTubeLink: "" }); |
| 904 | }, | 904 | }, |
| 905 | deleteFind: function (index) { | 905 | deleteFind: function (index) { |
| 906 | this.finds.splice(index, 1); | 906 | this.finds.splice(index, 1); |
| 907 | if (index === 0) this.addFind(); | 907 | if (index === 0) this.addFind(); |
| 908 | }, | 908 | }, |
| 909 | deleteUpdate: function (index) { | 909 | deleteUpdate: function (index) { |
| 910 | this.updates.splice(index, 1); | 910 | this.updates.splice(index, 1); |
| 911 | if (index === 0) this.update(); | 911 | if (index === 0) this.update(); |
| 912 | }, | 912 | }, |
| 913 | deleteUrl: function (index, youTubelinkId, id) { | 913 | deleteUrl: function (index, youTubelinkId, id) { |
| 914 | this.editedItem.youTubeLinkUrl.splice(index, 1); | 914 | this.editedItem.youTubeLinkUrl.splice(index, 1); |
| 915 | if (index === 0) this.update(); | 915 | if (index === 0) this.update(); |
| 916 | let deleteYouTubeUrl = { | 916 | let deleteYouTubeUrl = { |
| 917 | galleryId: id, | 917 | galleryId: id, |
| 918 | youTubeId: youTubelinkId, | 918 | youTubeId: youTubelinkId, |
| 919 | }; | 919 | }; |
| 920 | http() | 920 | http() |
| 921 | .put("/deleteYoutubeLink", deleteYouTubeUrl) | 921 | .put("/deleteYoutubeLink", deleteYouTubeUrl) |
| 922 | .then((response) => { | 922 | .then((response) => { |
| 923 | this.snackbar = true; | 923 | this.snackbar = true; |
| 924 | this.text = response.data.message; | 924 | this.text = response.data.message; |
| 925 | this.color = "green"; | 925 | this.color = "green"; |
| 926 | this.getGalleryList(); | 926 | this.getGalleryList(); |
| 927 | this.close(); | 927 | this.close(); |
| 928 | }) | 928 | }) |
| 929 | .catch((error) => { | 929 | .catch((error) => { |
| 930 | this.snackbar = true; | 930 | this.snackbar = true; |
| 931 | this.text = error.response.data.message; | 931 | this.text = error.response.data.message; |
| 932 | this.color = "error"; | 932 | this.color = "error"; |
| 933 | }); | 933 | }); |
| 934 | }, | 934 | }, |
| 935 | displaySearch() { | 935 | displaySearch() { |
| 936 | this.show = false; | 936 | this.show = false; |
| 937 | this.showSearch = true; | 937 | this.showSearch = true; |
| 938 | }, | 938 | }, |
| 939 | closeSearch() { | 939 | closeSearch() { |
| 940 | this.showSearch = false; | 940 | this.showSearch = false; |
| 941 | this.show = true; | 941 | this.show = true; |
| 942 | this.search = ""; | 942 | this.search = ""; |
| 943 | }, | 943 | }, |
| 944 | }, | 944 | }, |
| 945 | mounted() { | 945 | mounted() { |
| 946 | this.token = this.$store.state.token; | 946 | this.token = this.$store.state.token; |
| 947 | this.getAllClasses(); | 947 | this.getAllClasses(); |
| 948 | this.getGalleryList(); | 948 | this.getGalleryList(); |
| 949 | }, | 949 | }, |
| 950 | }; | 950 | }; |
| 951 | </script> | 951 | </script> |
src/pages/Holiday/holiday.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT HOLIDAY ****** --> | 3 | <!-- ****** EDIT HOLIDAY ****** --> |
| 4 | <v-dialog v-model="editHolidayDialog" max-width="500px" persistent> | 4 | <v-dialog v-model="editHolidayDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Holiday</label> | 8 | <label class="title text-xs-center">Edit Holiday</label> |
| 9 | <v-icon size="24" class="right" @click="editHolidayDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editHolidayDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 class="pt-4 subheading"> | 15 | <v-flex xs4 class="pt-4 subheading"> |
| 16 | <label class="right">Occasion:</label> | 16 | <label class="right">Occasion:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.occasion" | 20 | v-model="editedItem.occasion" |
| 21 | placeholder="fill your Occasion" | 21 | placeholder="fill your Occasion" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Date:</label> | 31 | <label class="right">Date:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 class="ml-3"> | 33 | <v-flex xs8 class="ml-3"> |
| 34 | <v-menu | 34 | <v-menu |
| 35 | ref="menu" | 35 | ref="menu" |
| 36 | :close-on-content-click="false" | 36 | :close-on-content-click="false" |
| 37 | :return-value.sync="editedItem.dateOfHoliday" | 37 | :return-value.sync="editedItem.dateOfHoliday" |
| 38 | v-model="menu" | 38 | v-model="menu" |
| 39 | :nudge-right="40" | 39 | :nudge-right="40" |
| 40 | lazy | 40 | lazy |
| 41 | transition="scale-transition" | 41 | transition="scale-transition" |
| 42 | offset-y | 42 | offset-y |
| 43 | full-width | 43 | full-width |
| 44 | min-width="290px" | 44 | min-width="290px" |
| 45 | > | 45 | > |
| 46 | <v-text-field | 46 | <v-text-field |
| 47 | slot="activator" | 47 | slot="activator" |
| 48 | :rules="dateRules" | 48 | :rules="dateRules" |
| 49 | v-model="editedItem.dateOfHoliday" | 49 | v-model="editedItem.dateOfHoliday" |
| 50 | append-icon="event" | 50 | append-icon="event" |
| 51 | placeholder="Select date" | 51 | placeholder="Select date" |
| 52 | ></v-text-field> | 52 | ></v-text-field> |
| 53 | <v-date-picker | 53 | <v-date-picker |
| 54 | ref="picker" | 54 | ref="picker" |
| 55 | color="info" | 55 | color="info" |
| 56 | v-model="editedItem.dateOfHoliday" | 56 | v-model="editedItem.dateOfHoliday" |
| 57 | @input="$refs.menu.save(editedItem.dateOfHoliday)" | 57 | @input="$refs.menu.save(editedItem.dateOfHoliday)" |
| 58 | ></v-date-picker> | 58 | ></v-date-picker> |
| 59 | </v-menu> | 59 | </v-menu> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-layout> | 63 | <v-layout> |
| 64 | <v-flex xs12 sm12> | 64 | <v-flex xs12 sm12> |
| 65 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 65 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 66 | <v-spacer></v-spacer> | 66 | <v-spacer></v-spacer> |
| 67 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 67 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 68 | </v-card-actions> | 68 | </v-card-actions> |
| 69 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 69 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 70 | <v-spacer></v-spacer> | 70 | <v-spacer></v-spacer> |
| 71 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 71 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 72 | <v-spacer></v-spacer> | 72 | <v-spacer></v-spacer> |
| 73 | </v-card-actions> | 73 | </v-card-actions> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-container> | 76 | </v-container> |
| 77 | </v-card> | 77 | </v-card> |
| 78 | </v-dialog> | 78 | </v-dialog> |
| 79 | 79 | ||
| 80 | <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> | 80 | <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> |
| 81 | 81 | ||
| 82 | <v-dialog v-model="viewHolidayDialog" max-width="500px" persistent> | 82 | <v-dialog v-model="viewHolidayDialog" max-width="500px" persistent> |
| 83 | <v-card flat class="card-style pa-3" dark> | 83 | <v-card flat class="Card-style pa-3"> |
| 84 | <v-layout> | 84 | <v-layout> |
| 85 | <v-flex xs12> | 85 | <v-flex xs12> |
| 86 | <label class="title text-xs-center">View Holiday</label> | 86 | <label class="title text-xs-center">View Holiday</label> |
| 87 | <v-icon size="24" class="right" @click="viewHolidayDialog = false">cancel</v-icon> | 87 | <v-icon size="24" class="right" @click="viewHolidayDialog = false">cancel</v-icon> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | <v-card-text> | 90 | <v-card-text> |
| 91 | <v-container grid-list-md> | 91 | <v-container grid-list-md> |
| 92 | <v-layout wrap> | 92 | <v-layout wrap> |
| 93 | <v-flex> | 93 | <v-flex> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 sm6> | 95 | <v-flex xs4 sm6> |
| 96 | <h5 class="right my-1"> | 96 | <h5 class="right my-1"> |
| 97 | <b>Occasion:</b> | 97 | <b>Occasion:</b> |
| 98 | </h5> | 98 | </h5> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex sm6 xs8> | 100 | <v-flex sm6 xs8> |
| 101 | <h5 class="my-1">{{ editedItem.occasion }}</h5> | 101 | <h5 class="my-1">{{ editedItem.occasion }}</h5> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | </v-layout> | 103 | </v-layout> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs4 sm6> | 105 | <v-flex xs4 sm6> |
| 106 | <h5 class="right my-1"> | 106 | <h5 class="right my-1"> |
| 107 | <b>Date:</b> | 107 | <b>Date:</b> |
| 108 | </h5> | 108 | </h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex sm6 xs8> | 110 | <v-flex sm6 xs8> |
| 111 | <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> | 111 | <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-card-text> | 117 | </v-card-text> |
| 118 | </v-card> | 118 | </v-card> |
| 119 | </v-dialog> | 119 | </v-dialog> |
| 120 | <!-- ****** Holiday TABLE ****** --> | 120 | <!-- ****** Holiday TABLE ****** --> |
| 121 | <v-toolbar color="transparent" flat> | 121 | <v-toolbar color="transparent" flat> |
| 122 | <v-btn | 122 | <v-btn |
| 123 | fab | 123 | fab |
| 124 | dark | 124 | dark |
| 125 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 125 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 126 | small | 126 | small |
| 127 | @click="addHolidayDialog = true" | 127 | @click="addHolidayDialog = true" |
| 128 | > | 128 | > |
| 129 | <v-icon dark>add</v-icon> | 129 | <v-icon dark>add</v-icon> |
| 130 | </v-btn> | 130 | </v-btn> |
| 131 | <v-btn | 131 | <v-btn |
| 132 | round | 132 | round |
| 133 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 133 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 134 | dark | 134 | dark |
| 135 | @click="addHolidayDialog = true" | 135 | @click="addHolidayDialog = true" |
| 136 | > | 136 | > |
| 137 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday | 137 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday |
| 138 | </v-btn> | 138 | </v-btn> |
| 139 | <v-spacer></v-spacer> | 139 | <v-spacer></v-spacer> |
| 140 | <v-card-title class="body-1" v-show="show"> | 140 | <v-card-title class="body-1" v-show="show"> |
| 141 | <v-btn icon large flat @click="displaySearch"> | 141 | <v-btn icon large flat @click="displaySearch"> |
| 142 | <v-avatar size="27"> | 142 | <v-avatar size="27"> |
| 143 | <img src="/static/icon/search.png" alt="icon" /> | 143 | <img src="/static/icon/search.png" alt="icon" /> |
| 144 | </v-avatar> | 144 | </v-avatar> |
| 145 | </v-btn> | 145 | </v-btn> |
| 146 | </v-card-title> | 146 | </v-card-title> |
| 147 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 147 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 148 | <v-layout> | 148 | <v-layout> |
| 149 | <v-text-field | 149 | <v-text-field |
| 150 | autofocus | 150 | autofocus |
| 151 | v-model="search" | 151 | v-model="search" |
| 152 | label="Search" | 152 | label="Search" |
| 153 | prepend-inner-icon="search" | 153 | prepend-inner-icon="search" |
| 154 | color="primary" | 154 | color="primary" |
| 155 | ></v-text-field> | 155 | ></v-text-field> |
| 156 | <v-icon @click="closeSearch" color="error">close</v-icon> | 156 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 157 | </v-layout> | 157 | </v-layout> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-toolbar> | 159 | </v-toolbar> |
| 160 | <v-data-table | 160 | <v-data-table |
| 161 | :headers="headers" | 161 | :headers="headers" |
| 162 | :items="holidays" | 162 | :items="holidays" |
| 163 | :pagination.sync="pagination" | 163 | :pagination.sync="pagination" |
| 164 | :search="search" | 164 | :search="search" |
| 165 | > | 165 | > |
| 166 | <template slot="items" slot-scope="props"> | 166 | <template slot="items" slot-scope="props"> |
| 167 | <tr class="tr"> | 167 | <tr class="tr"> |
| 168 | <td class="td td-row">{{ props.index + 1}}</td> | 168 | <td class="td td-row">{{ props.index + 1}}</td> |
| 169 | <td class="text-xs-center td td-row">{{ props.item.occasion}}</td> | 169 | <td class="text-xs-center td td-row">{{ props.item.occasion}}</td> |
| 170 | <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</td> | 170 | <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</td> |
| 171 | <td class="text-xs-center td td-row"> | 171 | <td class="text-xs-center td td-row"> |
| 172 | <span> | 172 | <span> |
| 173 | <v-tooltip top> | 173 | <v-tooltip top> |
| 174 | <img | 174 | <img |
| 175 | slot="activator" | 175 | slot="activator" |
| 176 | style="cursor:pointer; width:25px; height:25px; " | 176 | style="cursor:pointer; width:25px; height:25px; " |
| 177 | class="mr-3" | 177 | class="mr-3" |
| 178 | @click="profile(props.item)" | 178 | @click="profile(props.item)" |
| 179 | src="/static/icon/view.png" | 179 | src="/static/icon/view.png" |
| 180 | /> | 180 | /> |
| 181 | <span>View</span> | 181 | <span>View</span> |
| 182 | </v-tooltip> | 182 | </v-tooltip> |
| 183 | <v-tooltip top> | 183 | <v-tooltip top> |
| 184 | <img | 184 | <img |
| 185 | slot="activator" | 185 | slot="activator" |
| 186 | style="cursor:pointer; width:20px; height:18px; " | 186 | style="cursor:pointer; width:20px; height:18px; " |
| 187 | class="mr-3" | 187 | class="mr-3" |
| 188 | @click="editItem(props.item)" | 188 | @click="editItem(props.item)" |
| 189 | src="/static/icon/edit.png" | 189 | src="/static/icon/edit.png" |
| 190 | /> | 190 | /> |
| 191 | <span>Edit</span> | 191 | <span>Edit</span> |
| 192 | </v-tooltip> | 192 | </v-tooltip> |
| 193 | <v-tooltip top> | 193 | <v-tooltip top> |
| 194 | <img | 194 | <img |
| 195 | slot="activator" | 195 | slot="activator" |
| 196 | style="cursor:pointer; width:20px; height:20px; " | 196 | style="cursor:pointer; width:20px; height:20px; " |
| 197 | class="mr-3" | 197 | class="mr-3" |
| 198 | @click="deleteItem(props.item)" | 198 | @click="deleteItem(props.item)" |
| 199 | src="/static/icon/delete.png" | 199 | src="/static/icon/delete.png" |
| 200 | /> | 200 | /> |
| 201 | <span>Delete</span> | 201 | <span>Delete</span> |
| 202 | </v-tooltip> | 202 | </v-tooltip> |
| 203 | </span> | 203 | </span> |
| 204 | </td> | 204 | </td> |
| 205 | </tr> | 205 | </tr> |
| 206 | </template> | 206 | </template> |
| 207 | <v-alert | 207 | <v-alert |
| 208 | slot="no-results" | 208 | slot="no-results" |
| 209 | :value="true" | 209 | :value="true" |
| 210 | color="error" | 210 | color="error" |
| 211 | icon="warning" | 211 | icon="warning" |
| 212 | >Your search for "{{ search }}" found no results.</v-alert> | 212 | >Your search for "{{ search }}" found no results.</v-alert> |
| 213 | </v-data-table> | 213 | </v-data-table> |
| 214 | <!-- ****** ADD MULTIPLE Holiday ****** --> | 214 | <!-- ****** ADD MULTIPLE Holiday ****** --> |
| 215 | <v-dialog v-model="addHolidayDialog" max-width="400px" v-if="addHolidayDialog" persistent> | 215 | <v-dialog v-model="addHolidayDialog" max-width="400px" v-if="addHolidayDialog" persistent> |
| 216 | <v-card flat class="card-style pa-3" dark> | 216 | <v-card flat class="Card-style pa-3"> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs12> | 218 | <v-flex xs12> |
| 219 | <label class="title text-xs-center">Add Holiday</label> | 219 | <label class="title text-xs-center">Add Holiday</label> |
| 220 | <v-icon size="24" class="right" @click="closeaddHolidayDialog">cancel</v-icon> | 220 | <v-icon size="24" class="right" @click="closeaddHolidayDialog">cancel</v-icon> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | <v-form ref="form" v-model="valid" lazy-validation> | 223 | <v-form ref="form" v-model="valid" lazy-validation> |
| 224 | <v-container fluid> | 224 | <v-container fluid> |
| 225 | <v-flex xs12> | 225 | <v-flex xs12> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-flex xs4 class="pt-4 subheading"> | 227 | <v-flex xs4 class="pt-4 subheading"> |
| 228 | <label class="right">Occasion:</label> | 228 | <label class="right">Occasion:</label> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex xs8 sm8 class="ml-3"> | 230 | <v-flex xs8 sm8 class="ml-3"> |
| 231 | <v-text-field | 231 | <v-text-field |
| 232 | v-model="addHoliday.occasion" | 232 | v-model="addHoliday.occasion" |
| 233 | placeholder="fill your Occasion" | 233 | placeholder="fill your Occasion" |
| 234 | type="text" | 234 | type="text" |
| 235 | :rules="occasionRules" | 235 | :rules="occasionRules" |
| 236 | required | 236 | required |
| 237 | ></v-text-field> | 237 | ></v-text-field> |
| 238 | </v-flex> | 238 | </v-flex> |
| 239 | </v-layout> | 239 | </v-layout> |
| 240 | </v-flex> | 240 | </v-flex> |
| 241 | <v-flex xs12> | 241 | <v-flex xs12> |
| 242 | <v-layout> | 242 | <v-layout> |
| 243 | <v-flex xs4 class="pt-4 subheading"> | 243 | <v-flex xs4 class="pt-4 subheading"> |
| 244 | <label class="right">Date:</label> | 244 | <label class="right">Date:</label> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | <v-flex xs8 sm8 class="ml-3"> | 246 | <v-flex xs8 sm8 class="ml-3"> |
| 247 | <v-menu | 247 | <v-menu |
| 248 | ref="menu1" | 248 | ref="menu1" |
| 249 | :close-on-content-click="false" | 249 | :close-on-content-click="false" |
| 250 | v-model="menu1" | 250 | v-model="menu1" |
| 251 | :nudge-right="40" | 251 | :nudge-right="40" |
| 252 | :return-value.sync="addHoliday.dateOfHoliday" | 252 | :return-value.sync="addHoliday.dateOfHoliday" |
| 253 | lazy | 253 | lazy |
| 254 | transition="scale-transition" | 254 | transition="scale-transition" |
| 255 | offset-y | 255 | offset-y |
| 256 | full-width | 256 | full-width |
| 257 | min-width="290px" | 257 | min-width="290px" |
| 258 | > | 258 | > |
| 259 | <v-text-field | 259 | <v-text-field |
| 260 | slot="activator" | 260 | slot="activator" |
| 261 | :rules="dateRules" | 261 | :rules="dateRules" |
| 262 | v-model="addHoliday.dateOfHoliday" | 262 | v-model="addHoliday.dateOfHoliday" |
| 263 | append-icon="event" | 263 | append-icon="event" |
| 264 | label="Select date" | 264 | label="Select date" |
| 265 | ></v-text-field> | 265 | ></v-text-field> |
| 266 | <v-date-picker | 266 | <v-date-picker |
| 267 | ref="picker" | 267 | ref="picker" |
| 268 | color="info" | 268 | color="info" |
| 269 | v-model="addHoliday.dateOfHoliday" | 269 | v-model="addHoliday.dateOfHoliday" |
| 270 | @input="$refs.menu1.save(addHoliday.dateOfHoliday)" | 270 | @input="$refs.menu1.save(addHoliday.dateOfHoliday)" |
| 271 | ></v-date-picker> | 271 | ></v-date-picker> |
| 272 | </v-menu> | 272 | </v-menu> |
| 273 | </v-flex> | 273 | </v-flex> |
| 274 | </v-layout> | 274 | </v-layout> |
| 275 | </v-flex> | 275 | </v-flex> |
| 276 | <v-layout> | 276 | <v-layout> |
| 277 | <v-flex xs12> | 277 | <v-flex xs12> |
| 278 | <v-layout class="right"> | 278 | <v-layout class="right"> |
| 279 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 279 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 280 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 280 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 281 | </v-layout> | 281 | </v-layout> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | </v-layout> | 283 | </v-layout> |
| 284 | </v-container> | 284 | </v-container> |
| 285 | </v-form> | 285 | </v-form> |
| 286 | </v-card> | 286 | </v-card> |
| 287 | </v-dialog> | 287 | </v-dialog> |
| 288 | <v-snackbar | 288 | <v-snackbar |
| 289 | :timeout="timeout" | 289 | :timeout="timeout" |
| 290 | :top="y === 'top'" | 290 | :top="y === 'top'" |
| 291 | :right="x === 'right'" | 291 | :right="x === 'right'" |
| 292 | :vertical="mode === 'vertical'" | 292 | :vertical="mode === 'vertical'" |
| 293 | v-model="snackbar" | 293 | v-model="snackbar" |
| 294 | :color="color" | 294 | :color="color" |
| 295 | >{{ text }}</v-snackbar> | 295 | >{{ text }}</v-snackbar> |
| 296 | <div class="loader" v-if="showLoader"> | 296 | <div class="loader" v-if="showLoader"> |
| 297 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 297 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 298 | </div> | 298 | </div> |
| 299 | </v-container> | 299 | </v-container> |
| 300 | </template> | 300 | </template> |
| 301 | 301 | ||
| 302 | <script> | 302 | <script> |
| 303 | import http from "@/Services/http.js"; | 303 | import http from "@/Services/http.js"; |
| 304 | import moment from "moment"; | 304 | import moment from "moment"; |
| 305 | 305 | ||
| 306 | export default { | 306 | export default { |
| 307 | data: () => ({ | 307 | data: () => ({ |
| 308 | snackbar: false, | 308 | snackbar: false, |
| 309 | y: "top", | 309 | y: "top", |
| 310 | x: "right", | 310 | x: "right", |
| 311 | mode: "", | 311 | mode: "", |
| 312 | timeout: 3000, | 312 | timeout: 3000, |
| 313 | text: "", | 313 | text: "", |
| 314 | loading: false, | 314 | loading: false, |
| 315 | date: null, | 315 | date: null, |
| 316 | search: "", | 316 | search: "", |
| 317 | color: "", | 317 | color: "", |
| 318 | show: true, | 318 | show: true, |
| 319 | addHolidayDialog: false, | 319 | addHolidayDialog: false, |
| 320 | showSearch: false, | 320 | showSearch: false, |
| 321 | showLoader: false, | 321 | showLoader: false, |
| 322 | editHolidayDialog: false, | 322 | editHolidayDialog: false, |
| 323 | viewHolidayDialog: false, | 323 | viewHolidayDialog: false, |
| 324 | valid: true, | 324 | valid: true, |
| 325 | pagination: { | 325 | pagination: { |
| 326 | rowsPerPage: 10, | 326 | rowsPerPage: 10, |
| 327 | }, | 327 | }, |
| 328 | date: null, | 328 | date: null, |
| 329 | menu1: false, | 329 | menu1: false, |
| 330 | menu: false, | 330 | menu: false, |
| 331 | occasionRules: [(v) => !!v || "Occasion is required"], | 331 | occasionRules: [(v) => !!v || "Occasion is required"], |
| 332 | dateRules: [(v) => !!v || "Date is required"], | 332 | dateRules: [(v) => !!v || "Date is required"], |
| 333 | headers: [ | 333 | headers: [ |
| 334 | { | 334 | { |
| 335 | text: "No", | 335 | text: "No", |
| 336 | align: "", | 336 | align: "", |
| 337 | sortable: false, | 337 | sortable: false, |
| 338 | value: "No", | 338 | value: "No", |
| 339 | }, | 339 | }, |
| 340 | { text: "Occasion", value: "occasion", sortable: false, align: "center" }, | 340 | { text: "Occasion", value: "occasion", sortable: false, align: "center" }, |
| 341 | { | 341 | { |
| 342 | text: "Date Of Holiday", | 342 | text: "Date Of Holiday", |
| 343 | value: "dateOfHoliday", | 343 | value: "dateOfHoliday", |
| 344 | sortable: false, | 344 | sortable: false, |
| 345 | align: "center", | 345 | align: "center", |
| 346 | }, | 346 | }, |
| 347 | { text: "Action", value: "", sortable: false, align: "center" }, | 347 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 348 | ], | 348 | ], |
| 349 | holidays: [], | 349 | holidays: [], |
| 350 | editedIndex: -1, | 350 | editedIndex: -1, |
| 351 | addHoliday: {}, | 351 | addHoliday: {}, |
| 352 | editedItem: {}, | 352 | editedItem: {}, |
| 353 | }), | 353 | }), |
| 354 | watch: { | 354 | watch: { |
| 355 | addHolidayDialog: function (val) { | 355 | addHolidayDialog: function (val) { |
| 356 | if (!val) { | 356 | if (!val) { |
| 357 | this.addHoliday = []; | 357 | this.addHoliday = []; |
| 358 | this.menu1 = false; | 358 | this.menu1 = false; |
| 359 | } | 359 | } |
| 360 | }, | 360 | }, |
| 361 | }, | 361 | }, |
| 362 | methods: { | 362 | methods: { |
| 363 | dates: function (date) { | 363 | dates: function (date) { |
| 364 | return moment(date).format("MMMM DD, YYYY"); | 364 | return moment(date).format("MMMM DD, YYYY"); |
| 365 | }, | 365 | }, |
| 366 | getHolidays() { | 366 | getHolidays() { |
| 367 | this.showLoader = true; | 367 | this.showLoader = true; |
| 368 | var token = this.$store.state.token; | 368 | var token = this.$store.state.token; |
| 369 | http() | 369 | http() |
| 370 | .get("/getHolidaysList", { | 370 | .get("/getHolidaysList", { |
| 371 | headers: { Authorization: "Bearer " + token }, | 371 | headers: { Authorization: "Bearer " + token }, |
| 372 | }) | 372 | }) |
| 373 | .then((response) => { | 373 | .then((response) => { |
| 374 | this.holidays = response.data.data; | 374 | this.holidays = response.data.data; |
| 375 | this.showLoader = false; | 375 | this.showLoader = false; |
| 376 | }) | 376 | }) |
| 377 | .catch((err) => { | 377 | .catch((err) => { |
| 378 | this.showLoader = false; | 378 | this.showLoader = false; |
| 379 | if (error.response.status === 401) { | 379 | if (error.response.status === 401) { |
| 380 | this.$router.replace({ path: "/" }); | 380 | this.$router.replace({ path: "/" }); |
| 381 | this.$store.dispatch("setToken", null); | 381 | this.$store.dispatch("setToken", null); |
| 382 | this.$store.dispatch("Id", null); | 382 | this.$store.dispatch("Id", null); |
| 383 | } | 383 | } |
| 384 | }); | 384 | }); |
| 385 | }, | 385 | }, |
| 386 | editItem(item) { | 386 | editItem(item) { |
| 387 | this.editedIndex = this.holidays.indexOf(item); | 387 | this.editedIndex = this.holidays.indexOf(item); |
| 388 | this.editedItem = Object.assign({}, item); | 388 | this.editedItem = Object.assign({}, item); |
| 389 | this.editedItem.holidayId = item._id; | 389 | this.editedItem.holidayId = item._id; |
| 390 | this.editHolidayDialog = true; | 390 | this.editHolidayDialog = true; |
| 391 | }, | 391 | }, |
| 392 | profile(item) { | 392 | profile(item) { |
| 393 | this.editedIndex = this.holidays.indexOf(item); | 393 | this.editedIndex = this.holidays.indexOf(item); |
| 394 | this.editedItem = Object.assign({}, item); | 394 | this.editedItem = Object.assign({}, item); |
| 395 | this.viewHolidayDialog = true; | 395 | this.viewHolidayDialog = true; |
| 396 | }, | 396 | }, |
| 397 | 397 | ||
| 398 | deleteItem(item) { | 398 | deleteItem(item) { |
| 399 | let deleteHoliday = { | 399 | let deleteHoliday = { |
| 400 | holidayId: item._id, | 400 | holidayId: item._id, |
| 401 | }; | 401 | }; |
| 402 | http() | 402 | http() |
| 403 | .delete( | 403 | .delete( |
| 404 | "/deleteHoliday", | 404 | "/deleteHoliday", |
| 405 | confirm("Are you sure you want to delete this?") && { | 405 | confirm("Are you sure you want to delete this?") && { |
| 406 | params: deleteHoliday, | 406 | params: deleteHoliday, |
| 407 | } | 407 | } |
| 408 | ) | 408 | ) |
| 409 | .then((response) => { | 409 | .then((response) => { |
| 410 | this.snackbar = true; | 410 | this.snackbar = true; |
| 411 | this.text = response.data.message; | 411 | this.text = response.data.message; |
| 412 | this.color = "green"; | 412 | this.color = "green"; |
| 413 | this.getHolidays(); | 413 | this.getHolidays(); |
| 414 | }) | 414 | }) |
| 415 | .catch((error) => { | 415 | .catch((error) => { |
| 416 | this.snackbar = true; | 416 | this.snackbar = true; |
| 417 | this.text = error.response.data.message; | 417 | this.text = error.response.data.message; |
| 418 | this.color = "error"; | 418 | this.color = "error"; |
| 419 | }); | 419 | }); |
| 420 | }, | 420 | }, |
| 421 | close() { | 421 | close() { |
| 422 | this.editHolidayDialog = false; | 422 | this.editHolidayDialog = false; |
| 423 | }, | 423 | }, |
| 424 | closeaddHolidayDialog() { | 424 | closeaddHolidayDialog() { |
| 425 | this.addHolidayDialog = false; | 425 | this.addHolidayDialog = false; |
| 426 | this.addHoliday = []; | 426 | this.addHoliday = []; |
| 427 | this.menu1 = false; | 427 | this.menu1 = false; |
| 428 | }, | 428 | }, |
| 429 | submit() { | 429 | submit() { |
| 430 | if (this.$refs.form.validate()) { | 430 | if (this.$refs.form.validate()) { |
| 431 | this.loading = true; | 431 | this.loading = true; |
| 432 | http() | 432 | http() |
| 433 | .post("/createHoliday", this.addHoliday) | 433 | .post("/createHoliday", this.addHoliday) |
| 434 | .then((response) => { | 434 | .then((response) => { |
| 435 | this.snackbar = true; | 435 | this.snackbar = true; |
| 436 | this.text = response.data.message; | 436 | this.text = response.data.message; |
| 437 | this.color = "green"; | 437 | this.color = "green"; |
| 438 | this.getHolidays(); | 438 | this.getHolidays(); |
| 439 | this.addHolidayDialog = false; | 439 | this.addHolidayDialog = false; |
| 440 | this.clear(); | 440 | this.clear(); |
| 441 | this.loading = false; | 441 | this.loading = false; |
| 442 | }) | 442 | }) |
| 443 | .catch((error) => { | 443 | .catch((error) => { |
| 444 | this.snackbar = true; | 444 | this.snackbar = true; |
| 445 | this.text = error.response.data.message; | 445 | this.text = error.response.data.message; |
| 446 | this.loading = false; | 446 | this.loading = false; |
| 447 | this.color = "error"; | 447 | this.color = "error"; |
| 448 | }); | 448 | }); |
| 449 | } | 449 | } |
| 450 | }, | 450 | }, |
| 451 | clear() { | 451 | clear() { |
| 452 | this.$refs.form.reset(); | 452 | this.$refs.form.reset(); |
| 453 | }, | 453 | }, |
| 454 | save() { | 454 | save() { |
| 455 | http() | 455 | http() |
| 456 | .put("/updateHoliday", this.editedItem) | 456 | .put("/updateHoliday", this.editedItem) |
| 457 | .then((response) => { | 457 | .then((response) => { |
| 458 | this.snackbar = true; | 458 | this.snackbar = true; |
| 459 | this.text = response.data.message; | 459 | this.text = response.data.message; |
| 460 | this.getHolidays(); | 460 | this.getHolidays(); |
| 461 | this.color = "green"; | 461 | this.color = "green"; |
| 462 | this.close(); | 462 | this.close(); |
| 463 | }) | 463 | }) |
| 464 | .catch((error) => { | 464 | .catch((error) => { |
| 465 | this.snackbar = true; | 465 | this.snackbar = true; |
| 466 | this.text = error.response.data.message; | 466 | this.text = error.response.data.message; |
| 467 | this.loading = false; | 467 | this.loading = false; |
| 468 | this.color = "error"; | 468 | this.color = "error"; |
| 469 | }); | 469 | }); |
| 470 | }, | 470 | }, |
| 471 | displaySearch() { | 471 | displaySearch() { |
| 472 | (this.show = false), (this.showSearch = true); | 472 | (this.show = false), (this.showSearch = true); |
| 473 | }, | 473 | }, |
| 474 | closeSearch() { | 474 | closeSearch() { |
| 475 | this.showSearch = false; | 475 | this.showSearch = false; |
| 476 | this.show = true; | 476 | this.show = true; |
| 477 | this.search = ""; | 477 | this.search = ""; |
| 478 | }, | 478 | }, |
| 479 | }, | 479 | }, |
| 480 | mounted() { | 480 | mounted() { |
| 481 | this.getHolidays(); | 481 | this.getHolidays(); |
| 482 | }, | 482 | }, |
| 483 | }; | 483 | }; |
| 484 | </script> | 484 | </script> |
src/pages/Library/books.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Member ****** --> | 3 | <!-- ****** Edit Member ****** --> |
| 4 | <v-dialog v-model="editBookDialog" max-width="500px" persistent> | 4 | <v-dialog v-model="editBookDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Book</label> | 8 | <label class="title text-xs-center">Edit Book</label> |
| 9 | <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-container> | 13 | <v-container> |
| 14 | <v-layout wrap justify-center> | 14 | <v-layout wrap justify-center> |
| 15 | <v-flex xs12> | 15 | <v-flex xs12> |
| 16 | <v-form> | 16 | <v-form> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right pr-3">Name:</label> | 19 | <label class="right pr-3">Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs8> | 21 | <v-flex xs8> |
| 22 | <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> | 22 | <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | <v-layout> | 25 | <v-layout> |
| 26 | <v-flex xs4 class="pt-4 subheading"> | 26 | <v-flex xs4 class="pt-4 subheading"> |
| 27 | <label class="right pr-3">Author:</label> | 27 | <label class="right pr-3">Author:</label> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-flex xs8> | 29 | <v-flex xs8> |
| 30 | <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> | 30 | <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-layout> | 32 | </v-layout> |
| 33 | <v-layout> | 33 | <v-layout> |
| 34 | <v-flex xs4 class="pt-4 subheading"> | 34 | <v-flex xs4 class="pt-4 subheading"> |
| 35 | <label class="right pr-3">Subject Code:</label> | 35 | <label class="right pr-3">Subject Code:</label> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-flex xs8> | 37 | <v-flex xs8> |
| 38 | <v-text-field | 38 | <v-text-field |
| 39 | v-model="editedItem.subjectCode" | 39 | v-model="editedItem.subjectCode" |
| 40 | placeholder="fill your Subject Code" | 40 | placeholder="fill your Subject Code" |
| 41 | ></v-text-field> | 41 | ></v-text-field> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 class="pt-4 subheading"> | 45 | <v-flex xs4 class="pt-4 subheading"> |
| 46 | <label class="right pr-3">Price:</label> | 46 | <label class="right pr-3">Price:</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8> | 48 | <v-flex xs8> |
| 49 | <v-text-field | 49 | <v-text-field |
| 50 | v-model="editedItem.price" | 50 | v-model="editedItem.price" |
| 51 | placeholder="fill your Subject Code" | 51 | placeholder="fill your Subject Code" |
| 52 | ></v-text-field> | 52 | ></v-text-field> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right pr-3">Quantity:</label> | 57 | <label class="right pr-3">Quantity:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8> | 59 | <v-flex xs8> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | v-model="editedItem.quantity" | 61 | v-model="editedItem.quantity" |
| 62 | type="number" | 62 | type="number" |
| 63 | placeholder="fill your Quantity" | 63 | placeholder="fill your Quantity" |
| 64 | ></v-text-field> | 64 | ></v-text-field> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | </v-layout> | 66 | </v-layout> |
| 67 | <v-layout> | 67 | <v-layout> |
| 68 | <v-flex xs4 class="pt-4 subheading"> | 68 | <v-flex xs4 class="pt-4 subheading"> |
| 69 | <label class="right pr-3">Rack No:</label> | 69 | <label class="right pr-3">Rack No:</label> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-flex xs8> | 71 | <v-flex xs8> |
| 72 | <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> | 72 | <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | <v-card-actions> | 75 | <v-card-actions> |
| 76 | <v-spacer></v-spacer> | 76 | <v-spacer></v-spacer> |
| 77 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 77 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | </v-card-actions> | 79 | </v-card-actions> |
| 80 | </v-form> | 80 | </v-form> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | </v-container> | 83 | </v-container> |
| 84 | </v-card-text> | 84 | </v-card-text> |
| 85 | </v-card> | 85 | </v-card> |
| 86 | </v-dialog> | 86 | </v-dialog> |
| 87 | 87 | ||
| 88 | <!-- ****** PROFILE VIEW BOOKS DATA ****** --> | 88 | <!-- ****** PROFILE VIEW BOOKS DATA ****** --> |
| 89 | 89 | ||
| 90 | <v-dialog v-model="viewBookDialog" max-width="500px" persistent> | 90 | <v-dialog v-model="viewBookDialog" max-width="500px" persistent> |
| 91 | <v-card flat class="card-style pa-3" dark> | 91 | <v-card flat class="Card-style pa-3"> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs12> | 93 | <v-flex xs12> |
| 94 | <label class="title text-xs-center">View Book</label> | 94 | <label class="title text-xs-center">View Book</label> |
| 95 | <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> | 95 | <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | <v-card-text> | 98 | <v-card-text> |
| 99 | <v-container grid-list-md> | 99 | <v-container grid-list-md> |
| 100 | <v-layout wrap> | 100 | <v-layout wrap> |
| 101 | <v-flex> | 101 | <v-flex> |
| 102 | <v-layout> | 102 | <v-layout> |
| 103 | <v-flex xs5 sm6> | 103 | <v-flex xs5 sm6> |
| 104 | <h5 class="right my-1"> | 104 | <h5 class="right my-1"> |
| 105 | <b>Name :</b> | 105 | <b>Name :</b> |
| 106 | </h5> | 106 | </h5> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex sm6 xs8> | 108 | <v-flex sm6 xs8> |
| 109 | <h5 class="my-1">{{ editedItem.name }}</h5> | 109 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs5 sm6> | 113 | <v-flex xs5 sm6> |
| 114 | <h5 class="right my-1"> | 114 | <h5 class="right my-1"> |
| 115 | <b>Author :</b> | 115 | <b>Author :</b> |
| 116 | </h5> | 116 | </h5> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex sm6 xs8> | 118 | <v-flex sm6 xs8> |
| 119 | <h5 class="my-1">{{ editedItem.author }}</h5> | 119 | <h5 class="my-1">{{ editedItem.author }}</h5> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs5 sm6> | 123 | <v-flex xs5 sm6> |
| 124 | <h5 class="right my-1"> | 124 | <h5 class="right my-1"> |
| 125 | <b>Subject Code :</b> | 125 | <b>Subject Code :</b> |
| 126 | </h5> | 126 | </h5> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm6 xs8> | 128 | <v-flex sm6 xs8> |
| 129 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> | 129 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs5 sm6> | 133 | <v-flex xs5 sm6> |
| 134 | <h5 class="right my-1"> | 134 | <h5 class="right my-1"> |
| 135 | <b>Price :</b> | 135 | <b>Price :</b> |
| 136 | </h5> | 136 | </h5> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <v-flex sm6 xs8> | 138 | <v-flex sm6 xs8> |
| 139 | <h5 class="my-1">{{ editedItem.price }}</h5> | 139 | <h5 class="my-1">{{ editedItem.price }}</h5> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | </v-layout> | 141 | </v-layout> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs5 sm6> | 143 | <v-flex xs5 sm6> |
| 144 | <h5 class="right my-1"> | 144 | <h5 class="right my-1"> |
| 145 | <b>Quantity :</b> | 145 | <b>Quantity :</b> |
| 146 | </h5> | 146 | </h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | <v-flex sm6 xs8> | 148 | <v-flex sm6 xs8> |
| 149 | <h5 class="my-1">{{ editedItem.quantity}}</h5> | 149 | <h5 class="my-1">{{ editedItem.quantity}}</h5> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <v-layout> | 152 | <v-layout> |
| 153 | <v-flex xs5 sm6> | 153 | <v-flex xs5 sm6> |
| 154 | <h5 class="right my-1"> | 154 | <h5 class="right my-1"> |
| 155 | <b>Rack No :</b> | 155 | <b>Rack No :</b> |
| 156 | </h5> | 156 | </h5> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex sm6 xs8> | 158 | <v-flex sm6 xs8> |
| 159 | <h5 class="my-1">{{ editedItem.rackNo}}</h5> | 159 | <h5 class="my-1">{{ editedItem.rackNo}}</h5> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </v-container> | 164 | </v-container> |
| 165 | </v-card-text> | 165 | </v-card-text> |
| 166 | </v-card> | 166 | </v-card> |
| 167 | </v-dialog> | 167 | </v-dialog> |
| 168 | <!-- ****** BOOKS TABLE ****** --> | 168 | <!-- ****** BOOKS TABLE ****** --> |
| 169 | 169 | ||
| 170 | <v-toolbar color="transparent" flat> | 170 | <v-toolbar color="transparent" flat> |
| 171 | <v-btn | 171 | <v-btn |
| 172 | fab | 172 | fab |
| 173 | dark | 173 | dark |
| 174 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 174 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 175 | small | 175 | small |
| 176 | @click="addBookDialog = true" | 176 | @click="addBookDialog = true" |
| 177 | > | 177 | > |
| 178 | <v-icon dark>add</v-icon> | 178 | <v-icon dark>add</v-icon> |
| 179 | </v-btn> | 179 | </v-btn> |
| 180 | <v-btn | 180 | <v-btn |
| 181 | round | 181 | round |
| 182 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 182 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 183 | dark | 183 | dark |
| 184 | @click="addBookDialog = true" | 184 | @click="addBookDialog = true" |
| 185 | > | 185 | > |
| 186 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book | 186 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book |
| 187 | </v-btn> | 187 | </v-btn> |
| 188 | <v-spacer></v-spacer> | 188 | <v-spacer></v-spacer> |
| 189 | <v-card-title class="body-1" v-show="show"> | 189 | <v-card-title class="body-1" v-show="show"> |
| 190 | <v-btn icon large flat @click="displaySearch"> | 190 | <v-btn icon large flat @click="displaySearch"> |
| 191 | <v-avatar size="27"> | 191 | <v-avatar size="27"> |
| 192 | <img src="/static/icon/search.png" alt="icon" /> | 192 | <img src="/static/icon/search.png" alt="icon" /> |
| 193 | </v-avatar> | 193 | </v-avatar> |
| 194 | </v-btn> | 194 | </v-btn> |
| 195 | </v-card-title> | 195 | </v-card-title> |
| 196 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 196 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-text-field | 198 | <v-text-field |
| 199 | autofocus | 199 | autofocus |
| 200 | v-model="search" | 200 | v-model="search" |
| 201 | label="Search" | 201 | label="Search" |
| 202 | prepend-inner-icon="search" | 202 | prepend-inner-icon="search" |
| 203 | color="primary" | 203 | color="primary" |
| 204 | ></v-text-field> | 204 | ></v-text-field> |
| 205 | <v-icon @click="closeSearch" color="error">close</v-icon> | 205 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | </v-flex> | 207 | </v-flex> |
| 208 | </v-toolbar> | 208 | </v-toolbar> |
| 209 | <v-data-table | 209 | <v-data-table |
| 210 | :headers="headers" | 210 | :headers="headers" |
| 211 | :items="bookData" | 211 | :items="bookData" |
| 212 | :pagination.sync="pagination" | 212 | :pagination.sync="pagination" |
| 213 | :search="search" | 213 | :search="search" |
| 214 | > | 214 | > |
| 215 | <template slot="items" slot-scope="props"> | 215 | <template slot="items" slot-scope="props"> |
| 216 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> | 216 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> |
| 217 | <td class="td td-row text-xs-center">{{ props.item.name }}</td> | 217 | <td class="td td-row text-xs-center">{{ props.item.name }}</td> |
| 218 | <td class="td td-row text-xs-center">{{ props.item.author }}</td> | 218 | <td class="td td-row text-xs-center">{{ props.item.author }}</td> |
| 219 | <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> | 219 | <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> |
| 220 | <td class="td td-row text-xs-center">{{ props.item.price }}</td> | 220 | <td class="td td-row text-xs-center">{{ props.item.price }}</td> |
| 221 | <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> | 221 | <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> |
| 222 | <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> | 222 | <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> |
| 223 | <td class="td td-row text-xs-center"> | 223 | <td class="td td-row text-xs-center"> |
| 224 | <span | 224 | <span |
| 225 | v-if="props.item.status === 'AVAILABLE'" | 225 | v-if="props.item.status === 'AVAILABLE'" |
| 226 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" | 226 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" |
| 227 | >{{ props.item.status}}</span> | 227 | >{{ props.item.status}}</span> |
| 228 | <span | 228 | <span |
| 229 | v-if="props.item.status === 'UNAVAILABLE'" | 229 | v-if="props.item.status === 'UNAVAILABLE'" |
| 230 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" | 230 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" |
| 231 | >{{ props.item.status}}</span> | 231 | >{{ props.item.status}}</span> |
| 232 | </td> | 232 | </td> |
| 233 | <td class="text-xs-center td td-row"> | 233 | <td class="text-xs-center td td-row"> |
| 234 | <span> | 234 | <span> |
| 235 | <!-- <v-tooltip top> | 235 | <!-- <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:25px; height:25px; " | 238 | style="cursor:pointer; width:25px; height:25px; " |
| 239 | class="mr-3" | 239 | class="mr-3" |
| 240 | @click="profile(props.item)" | 240 | @click="profile(props.item)" |
| 241 | src="/static/icon/view.png" | 241 | src="/static/icon/view.png" |
| 242 | /> | 242 | /> |
| 243 | <span>View</span> | 243 | <span>View</span> |
| 244 | </v-tooltip>--> | 244 | </v-tooltip>--> |
| 245 | <v-tooltip top> | 245 | <v-tooltip top> |
| 246 | <img | 246 | <img |
| 247 | slot="activator" | 247 | slot="activator" |
| 248 | style="cursor:pointer; width:20px; height:18px; " | 248 | style="cursor:pointer; width:20px; height:18px; " |
| 249 | class="mr-3" | 249 | class="mr-3" |
| 250 | @click="editItem(props.item)" | 250 | @click="editItem(props.item)" |
| 251 | src="/static/icon/edit.png" | 251 | src="/static/icon/edit.png" |
| 252 | /> | 252 | /> |
| 253 | <span>Edit</span> | 253 | <span>Edit</span> |
| 254 | </v-tooltip> | 254 | </v-tooltip> |
| 255 | <v-tooltip top v-if="role != 'TEACHER' "> | 255 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 256 | <img | 256 | <img |
| 257 | slot="activator" | 257 | slot="activator" |
| 258 | style="cursor:pointer; width:20px; height:20px; " | 258 | style="cursor:pointer; width:20px; height:20px; " |
| 259 | @click="deleteItem(props.item)" | 259 | @click="deleteItem(props.item)" |
| 260 | src="/static/icon/delete.png" | 260 | src="/static/icon/delete.png" |
| 261 | /> | 261 | /> |
| 262 | <span>Delete</span> | 262 | <span>Delete</span> |
| 263 | </v-tooltip> | 263 | </v-tooltip> |
| 264 | </span> | 264 | </span> |
| 265 | </td> | 265 | </td> |
| 266 | </template> | 266 | </template> |
| 267 | <v-alert | 267 | <v-alert |
| 268 | slot="no-results" | 268 | slot="no-results" |
| 269 | :value="true" | 269 | :value="true" |
| 270 | color="error" | 270 | color="error" |
| 271 | icon="warning" | 271 | icon="warning" |
| 272 | >Your search for "{{ search }}" found no results.</v-alert> | 272 | >Your search for "{{ search }}" found no results.</v-alert> |
| 273 | </v-data-table> | 273 | </v-data-table> |
| 274 | <!-- ****** ADD BOOK ****** --> | 274 | <!-- ****** ADD BOOK ****** --> |
| 275 | <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog" persistent> | 275 | <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog" persistent> |
| 276 | <v-card flat class="card-style pa-2" dark> | 276 | <v-card flat class="Card-style pa-2"> |
| 277 | <v-layout> | 277 | <v-layout> |
| 278 | <v-flex xs12> | 278 | <v-flex xs12> |
| 279 | <label class="title text-xs-center">Add Book</label> | 279 | <label class="title text-xs-center">Add Book</label> |
| 280 | <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon> | 280 | <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon> |
| 281 | </v-flex> | 281 | </v-flex> |
| 282 | </v-layout> | 282 | </v-layout> |
| 283 | <v-container fluid fill-height> | 283 | <v-container fluid fill-height> |
| 284 | <v-layout align-center> | 284 | <v-layout align-center> |
| 285 | <v-flex xs12 class="mt-4"> | 285 | <v-flex xs12 class="mt-4"> |
| 286 | <v-form ref="form" v-model="valid" lazy-validation> | 286 | <v-form ref="form" v-model="valid" lazy-validation> |
| 287 | <v-layout> | 287 | <v-layout> |
| 288 | <v-flex xs4 class="pt-4 subheading"> | 288 | <v-flex xs4 class="pt-4 subheading"> |
| 289 | <label class="right">Name:</label> | 289 | <label class="right">Name:</label> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs7 class="ml-3"> | 291 | <v-flex xs7 class="ml-3"> |
| 292 | <v-text-field | 292 | <v-text-field |
| 293 | v-model="BooksData.name" | 293 | v-model="BooksData.name" |
| 294 | placeholder="fill your Name" | 294 | placeholder="fill your Name" |
| 295 | type="text" | 295 | type="text" |
| 296 | :rules="nameRules" | 296 | :rules="nameRules" |
| 297 | required | 297 | required |
| 298 | ></v-text-field> | 298 | ></v-text-field> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | </v-layout> | 300 | </v-layout> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-flex xs4 class="pt-4 subheading"> | 302 | <v-flex xs4 class="pt-4 subheading"> |
| 303 | <label class="right">Author:</label> | 303 | <label class="right">Author:</label> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-flex xs7 class="ml-3"> | 305 | <v-flex xs7 class="ml-3"> |
| 306 | <v-text-field | 306 | <v-text-field |
| 307 | v-model="BooksData.author" | 307 | v-model="BooksData.author" |
| 308 | placeholder="fill your Author Name" | 308 | placeholder="fill your Author Name" |
| 309 | type="text" | 309 | type="text" |
| 310 | :rules="authorRules" | 310 | :rules="authorRules" |
| 311 | required | 311 | required |
| 312 | ></v-text-field> | 312 | ></v-text-field> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 class="pt-4 subheading"> | 316 | <v-flex xs4 class="pt-4 subheading"> |
| 317 | <label class="right">Subject Code:</label> | 317 | <label class="right">Subject Code:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs7 class="ml-3"> | 319 | <v-flex xs7 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="BooksData.subjectCode" | 321 | v-model="BooksData.subjectCode" |
| 322 | placeholder="fill your Subject Code" | 322 | placeholder="fill your Subject Code" |
| 323 | type="text" | 323 | type="text" |
| 324 | :rules="subjectRules" | 324 | :rules="subjectRules" |
| 325 | required | 325 | required |
| 326 | ></v-text-field> | 326 | ></v-text-field> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | </v-layout> | 328 | </v-layout> |
| 329 | <v-layout> | 329 | <v-layout> |
| 330 | <v-flex xs4 class="pt-4 subheading"> | 330 | <v-flex xs4 class="pt-4 subheading"> |
| 331 | <label class="right">Price:</label> | 331 | <label class="right">Price:</label> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | <v-flex xs7 class="ml-3"> | 333 | <v-flex xs7 class="ml-3"> |
| 334 | <v-text-field | 334 | <v-text-field |
| 335 | v-model="BooksData.price" | 335 | v-model="BooksData.price" |
| 336 | placeholder="fill your Price" | 336 | placeholder="fill your Price" |
| 337 | :rules="priceRules" | 337 | :rules="priceRules" |
| 338 | required | 338 | required |
| 339 | ></v-text-field> | 339 | ></v-text-field> |
| 340 | </v-flex> | 340 | </v-flex> |
| 341 | </v-layout> | 341 | </v-layout> |
| 342 | <v-layout> | 342 | <v-layout> |
| 343 | <v-flex xs4 class="pt-4 subheading"> | 343 | <v-flex xs4 class="pt-4 subheading"> |
| 344 | <label class="right">Quantity:</label> | 344 | <label class="right">Quantity:</label> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | <v-flex xs7 class="ml-3"> | 346 | <v-flex xs7 class="ml-3"> |
| 347 | <v-text-field | 347 | <v-text-field |
| 348 | v-model="BooksData.quantity" | 348 | v-model="BooksData.quantity" |
| 349 | placeholder="fill your Quantity" | 349 | placeholder="fill your Quantity" |
| 350 | :rules="quantityRules" | 350 | :rules="quantityRules" |
| 351 | required | 351 | required |
| 352 | ></v-text-field> | 352 | ></v-text-field> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | </v-layout> | 354 | </v-layout> |
| 355 | <v-layout> | 355 | <v-layout> |
| 356 | <v-flex xs4 class="pt-4 subheading"> | 356 | <v-flex xs4 class="pt-4 subheading"> |
| 357 | <label class="right">Rack No:</label> | 357 | <label class="right">Rack No:</label> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex xs7 class="ml-3"> | 359 | <v-flex xs7 class="ml-3"> |
| 360 | <v-text-field | 360 | <v-text-field |
| 361 | v-model="BooksData.rackNo" | 361 | v-model="BooksData.rackNo" |
| 362 | placeholder="fill your Rack No" | 362 | placeholder="fill your Rack No" |
| 363 | :rules="rackNoRules" | 363 | :rules="rackNoRules" |
| 364 | required | 364 | required |
| 365 | ></v-text-field> | 365 | ></v-text-field> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | <v-layout> | 368 | <v-layout> |
| 369 | <v-flex xs12> | 369 | <v-flex xs12> |
| 370 | <v-card-actions> | 370 | <v-card-actions> |
| 371 | <v-spacer></v-spacer> | 371 | <v-spacer></v-spacer> |
| 372 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 372 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 373 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 373 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 374 | </v-card-actions> | 374 | </v-card-actions> |
| 375 | </v-flex> | 375 | </v-flex> |
| 376 | </v-layout> | 376 | </v-layout> |
| 377 | </v-form> | 377 | </v-form> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | </v-layout> | 379 | </v-layout> |
| 380 | </v-container> | 380 | </v-container> |
| 381 | </v-card> | 381 | </v-card> |
| 382 | </v-dialog> | 382 | </v-dialog> |
| 383 | <v-snackbar | 383 | <v-snackbar |
| 384 | :timeout="timeout" | 384 | :timeout="timeout" |
| 385 | :top="y === 'top'" | 385 | :top="y === 'top'" |
| 386 | :right="x === 'right'" | 386 | :right="x === 'right'" |
| 387 | :vertical="mode === 'vertical'" | 387 | :vertical="mode === 'vertical'" |
| 388 | v-model="snackbar" | 388 | v-model="snackbar" |
| 389 | :color="color" | 389 | :color="color" |
| 390 | >{{ text }}</v-snackbar> | 390 | >{{ text }}</v-snackbar> |
| 391 | <div class="loader" v-if="showLoader"> | 391 | <div class="loader" v-if="showLoader"> |
| 392 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 392 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 393 | </div> | 393 | </div> |
| 394 | </v-container> | 394 | </v-container> |
| 395 | </template> | 395 | </template> |
| 396 | 396 | ||
| 397 | <script> | 397 | <script> |
| 398 | import http from "@/Services/http.js"; | 398 | import http from "@/Services/http.js"; |
| 399 | import Util from "@/util"; | 399 | import Util from "@/util"; |
| 400 | 400 | ||
| 401 | export default { | 401 | export default { |
| 402 | data: () => ({ | 402 | data: () => ({ |
| 403 | snackbar: false, | 403 | snackbar: false, |
| 404 | y: "top", | 404 | y: "top", |
| 405 | x: "right", | 405 | x: "right", |
| 406 | mode: "", | 406 | mode: "", |
| 407 | timeout: 5000, | 407 | timeout: 5000, |
| 408 | text: "", | 408 | text: "", |
| 409 | color: "", | 409 | color: "", |
| 410 | show: true, | 410 | show: true, |
| 411 | showSearch: false, | 411 | showSearch: false, |
| 412 | showLoader: false, | 412 | showLoader: false, |
| 413 | loading: false, | 413 | loading: false, |
| 414 | date: null, | 414 | date: null, |
| 415 | search: "", | 415 | search: "", |
| 416 | editBookDialog: false, | 416 | editBookDialog: false, |
| 417 | viewBookDialog: false, | 417 | viewBookDialog: false, |
| 418 | valid: true, | 418 | valid: true, |
| 419 | validEdit: true, | 419 | validEdit: true, |
| 420 | addBookDialog: false, | 420 | addBookDialog: false, |
| 421 | pagination: { | 421 | pagination: { |
| 422 | rowsPerPage: 10, | 422 | rowsPerPage: 10, |
| 423 | }, | 423 | }, |
| 424 | nameRules: [(v) => !!v || " Name is required"], | 424 | nameRules: [(v) => !!v || " Name is required"], |
| 425 | authorRules: [(v) => !!v || "Author Name Monthly"], | 425 | authorRules: [(v) => !!v || "Author Name Monthly"], |
| 426 | subjectRules: [(v) => !!v || "Subject Code is required"], | 426 | subjectRules: [(v) => !!v || "Subject Code is required"], |
| 427 | priceRules: [(v) => !!v || "Price is required"], | 427 | priceRules: [(v) => !!v || "Price is required"], |
| 428 | quantityRules: [(v) => !!v || "Quantity is required"], | 428 | quantityRules: [(v) => !!v || "Quantity is required"], |
| 429 | rackNoRules: [(v) => !!v || "Rack No. is required"], | 429 | rackNoRules: [(v) => !!v || "Rack No. is required"], |
| 430 | 430 | ||
| 431 | headers: [ | 431 | headers: [ |
| 432 | { | 432 | { |
| 433 | text: "No", | 433 | text: "No", |
| 434 | align: "", | 434 | align: "", |
| 435 | sortable: false, | 435 | sortable: false, |
| 436 | value: "No", | 436 | value: "No", |
| 437 | }, | 437 | }, |
| 438 | { | 438 | { |
| 439 | text: "Name", | 439 | text: "Name", |
| 440 | value: "name", | 440 | value: "name", |
| 441 | sortable: false, | 441 | sortable: false, |
| 442 | align: "center", | 442 | align: "center", |
| 443 | }, | 443 | }, |
| 444 | { text: "Authour", value: "author", sortable: false, align: "center" }, | 444 | { text: "Authour", value: "author", sortable: false, align: "center" }, |
| 445 | { | 445 | { |
| 446 | text: "Subject Code", | 446 | text: "Subject Code", |
| 447 | value: "subjectCode", | 447 | value: "subjectCode", |
| 448 | sortable: false, | 448 | sortable: false, |
| 449 | align: "center", | 449 | align: "center", |
| 450 | }, | 450 | }, |
| 451 | { text: "Price", value: "price", sortable: false, align: "center" }, | 451 | { text: "Price", value: "price", sortable: false, align: "center" }, |
| 452 | { text: "Quantity", value: "quantity", sortable: false, align: "center" }, | 452 | { text: "Quantity", value: "quantity", sortable: false, align: "center" }, |
| 453 | { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, | 453 | { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, |
| 454 | { text: "Status", value: "status", sortable: false, align: "center" }, | 454 | { text: "Status", value: "status", sortable: false, align: "center" }, |
| 455 | 455 | ||
| 456 | { text: "Action", value: "", sortable: false, align: "center" }, | 456 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 457 | ], | 457 | ], |
| 458 | bookData: [], | 458 | bookData: [], |
| 459 | select: "", | 459 | select: "", |
| 460 | token: "", | 460 | token: "", |
| 461 | editedItem: {}, | 461 | editedItem: {}, |
| 462 | BooksData: {}, | 462 | BooksData: {}, |
| 463 | }), | 463 | }), |
| 464 | watch: { | 464 | watch: { |
| 465 | addBookDialog: function (val) { | 465 | addBookDialog: function (val) { |
| 466 | if (!val) { | 466 | if (!val) { |
| 467 | this.BooksData = []; | 467 | this.BooksData = []; |
| 468 | } | 468 | } |
| 469 | }, | 469 | }, |
| 470 | }, | 470 | }, |
| 471 | methods: { | 471 | methods: { |
| 472 | getBookData() { | 472 | getBookData() { |
| 473 | this.showLoader = true; | 473 | this.showLoader = true; |
| 474 | http() | 474 | http() |
| 475 | .get("/getBooksList", { | 475 | .get("/getBooksList", { |
| 476 | params: { | 476 | params: { |
| 477 | schoolId: this.$store.state.schoolId, | 477 | schoolId: this.$store.state.schoolId, |
| 478 | }, | 478 | }, |
| 479 | headers: { Authorization: "Bearer " + this.token }, | 479 | headers: { Authorization: "Bearer " + this.token }, |
| 480 | }) | 480 | }) |
| 481 | .then((response) => { | 481 | .then((response) => { |
| 482 | this.bookData = response.data.data; | 482 | this.bookData = response.data.data; |
| 483 | this.showLoader = false; | 483 | this.showLoader = false; |
| 484 | }) | 484 | }) |
| 485 | .catch((error) => { | 485 | .catch((error) => { |
| 486 | this.showLoader = false; | 486 | this.showLoader = false; |
| 487 | if (error.response.status === 401) { | 487 | if (error.response.status === 401) { |
| 488 | this.$router.replace({ path: "/" }); | 488 | this.$router.replace({ path: "/" }); |
| 489 | this.$store.dispatch("setToken", null); | 489 | this.$store.dispatch("setToken", null); |
| 490 | this.$store.dispatch("Id", null); | 490 | this.$store.dispatch("Id", null); |
| 491 | } | 491 | } |
| 492 | }); | 492 | }); |
| 493 | }, | 493 | }, |
| 494 | editItem(item) { | 494 | editItem(item) { |
| 495 | this.editedIndex = this.bookData.indexOf(item); | 495 | this.editedIndex = this.bookData.indexOf(item); |
| 496 | this.editedItem = Object.assign({}, item); | 496 | this.editedItem = Object.assign({}, item); |
| 497 | // console.log(this.editedItem); | 497 | // console.log(this.editedItem); |
| 498 | this.editBookDialog = true; | 498 | this.editBookDialog = true; |
| 499 | }, | 499 | }, |
| 500 | profile(item) { | 500 | profile(item) { |
| 501 | this.editedIndex = this.bookData.indexOf(item); | 501 | this.editedIndex = this.bookData.indexOf(item); |
| 502 | this.editedItem = Object.assign({}, item); | 502 | this.editedItem = Object.assign({}, item); |
| 503 | this.viewBookDialog = true; | 503 | this.viewBookDialog = true; |
| 504 | }, | 504 | }, |
| 505 | deleteItem(item) { | 505 | deleteItem(item) { |
| 506 | let deleteStudent = { | 506 | let deleteStudent = { |
| 507 | bookId: item._id, | 507 | bookId: item._id, |
| 508 | }; | 508 | }; |
| 509 | http() | 509 | http() |
| 510 | .delete( | 510 | .delete( |
| 511 | "/deleteBook", | 511 | "/deleteBook", |
| 512 | confirm("Are you sure you want to delete this?") && { | 512 | confirm("Are you sure you want to delete this?") && { |
| 513 | params: deleteStudent, | 513 | params: deleteStudent, |
| 514 | } | 514 | } |
| 515 | ) | 515 | ) |
| 516 | .then((response) => { | 516 | .then((response) => { |
| 517 | this.snackbar = true; | 517 | this.snackbar = true; |
| 518 | this.text = response.data.message; | 518 | this.text = response.data.message; |
| 519 | this.color = "green"; | 519 | this.color = "green"; |
| 520 | this.getBookData(); | 520 | this.getBookData(); |
| 521 | }) | 521 | }) |
| 522 | .catch((error) => { | 522 | .catch((error) => { |
| 523 | this.snackbar = true; | 523 | this.snackbar = true; |
| 524 | this.text = error.response.data.message; | 524 | this.text = error.response.data.message; |
| 525 | this.color = "error"; | 525 | this.color = "error"; |
| 526 | }); | 526 | }); |
| 527 | }, | 527 | }, |
| 528 | closeEditProfile() { | 528 | closeEditProfile() { |
| 529 | this.editBookDialog = false; | 529 | this.editBookDialog = false; |
| 530 | }, | 530 | }, |
| 531 | close2() { | 531 | close2() { |
| 532 | this.dialog2 = false; | 532 | this.dialog2 = false; |
| 533 | }, | 533 | }, |
| 534 | submit() { | 534 | submit() { |
| 535 | this.BooksData.quantity = Number(this.BooksData.quantity); | 535 | this.BooksData.quantity = Number(this.BooksData.quantity); |
| 536 | this.BooksData.schoolId = this.$store.state.schoolId; | 536 | this.BooksData.schoolId = this.$store.state.schoolId; |
| 537 | if (this.$refs.form.validate()) { | 537 | if (this.$refs.form.validate()) { |
| 538 | this.loading = true; | 538 | this.loading = true; |
| 539 | http() | 539 | http() |
| 540 | .post("/createBook", this.BooksData) | 540 | .post("/createBook", this.BooksData) |
| 541 | .then((response) => { | 541 | .then((response) => { |
| 542 | this.getBookData(); | 542 | this.getBookData(); |
| 543 | this.snackbar = true; | 543 | this.snackbar = true; |
| 544 | this.text = response.data.message; | 544 | this.text = response.data.message; |
| 545 | this.color = "green"; | 545 | this.color = "green"; |
| 546 | this.addBookDialog = false; | 546 | this.addBookDialog = false; |
| 547 | this.clear(); | 547 | this.clear(); |
| 548 | this.loading = false; | 548 | this.loading = false; |
| 549 | }) | 549 | }) |
| 550 | .catch((error) => { | 550 | .catch((error) => { |
| 551 | this.snackbar = true; | 551 | this.snackbar = true; |
| 552 | this.text = error.response.data.message; | 552 | this.text = error.response.data.message; |
| 553 | this.color = "error"; | 553 | this.color = "error"; |
| 554 | this.loading = false; | 554 | this.loading = false; |
| 555 | }); | 555 | }); |
| 556 | } | 556 | } |
| 557 | }, | 557 | }, |
| 558 | clear() { | 558 | clear() { |
| 559 | this.$refs.form.reset(); | 559 | this.$refs.form.reset(); |
| 560 | }, | 560 | }, |
| 561 | save() { | 561 | save() { |
| 562 | this.editedItem.bookId = this.editedItem._id; | 562 | this.editedItem.bookId = this.editedItem._id; |
| 563 | http() | 563 | http() |
| 564 | .put("/updateBook", this.editedItem) | 564 | .put("/updateBook", this.editedItem) |
| 565 | .then((response) => { | 565 | .then((response) => { |
| 566 | this.snackbar = true; | 566 | this.snackbar = true; |
| 567 | this.text = response.data.message; | 567 | this.text = response.data.message; |
| 568 | this.color = "green"; | 568 | this.color = "green"; |
| 569 | this.getBookData(); | 569 | this.getBookData(); |
| 570 | this.closeEditProfile(); | 570 | this.closeEditProfile(); |
| 571 | }) | 571 | }) |
| 572 | .catch((error) => { | 572 | .catch((error) => { |
| 573 | this.snackbar = true; | 573 | this.snackbar = true; |
| 574 | this.text = error.response.data.message; | 574 | this.text = error.response.data.message; |
| 575 | this.color = "error"; | 575 | this.color = "error"; |
| 576 | // console.log(error); | 576 | // console.log(error); |
| 577 | }); | 577 | }); |
| 578 | }, | 578 | }, |
| 579 | displaySearch() { | 579 | displaySearch() { |
| 580 | (this.show = false), (this.showSearch = true); | 580 | (this.show = false), (this.showSearch = true); |
| 581 | }, | 581 | }, |
| 582 | closeSearch() { | 582 | closeSearch() { |
| 583 | this.showSearch = false; | 583 | this.showSearch = false; |
| 584 | this.show = true; | 584 | this.show = true; |
| 585 | this.search = ""; | 585 | this.search = ""; |
| 586 | }, | 586 | }, |
| 587 | }, | 587 | }, |
| 588 | mounted() { | 588 | mounted() { |
| 589 | this.token = this.$store.state.token; | 589 | this.token = this.$store.state.token; |
| 590 | this.getBookData(); | 590 | this.getBookData(); |
| 591 | this.role = this.$store.state.role; | 591 | this.role = this.$store.state.role; |
| 592 | }, | 592 | }, |
| 593 | }; | 593 | }; |
| 594 | </script> | 594 | </script> |
| 595 | 595 |
src/pages/Library/eBook.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS EBOOK DETAILS ****** --> | 3 | <!-- ****** EDITS EBOOK DETAILS ****** --> |
| 4 | <v-dialog v-model="editEbookDialog" max-width="600px" persistent> | 4 | <v-dialog v-model="editEbookDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit E-Book</label> | 8 | <label class="title text-xs-center">Edit E-Book</label> |
| 9 | <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 13 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 14 | <input | 14 | <input |
| 15 | type="file" | 15 | type="file" |
| 16 | style="display: none" | 16 | style="display: none" |
| 17 | ref="editImage" | 17 | ref="editImage" |
| 18 | accept="image/*" | 18 | accept="image/*" |
| 19 | @change="onEditImagePicked" | 19 | @change="onEditImagePicked" |
| 20 | /> | 20 | /> |
| 21 | <img | 21 | <img |
| 22 | v-if="editedItem.coverPhotoUrl" | 22 | v-if="editedItem.coverPhotoUrl" |
| 23 | :src="editedItem.coverPhotoUrl" | 23 | :src="editedItem.coverPhotoUrl" |
| 24 | height="160" | 24 | height="160" |
| 25 | width="160" | 25 | width="160" |
| 26 | alt="eBooks" | 26 | alt="eBooks" |
| 27 | class="pa-2" | 27 | class="pa-2" |
| 28 | /> | 28 | /> |
| 29 | <img | 29 | <img |
| 30 | src="/static/icon/user.png" | 30 | src="/static/icon/user.png" |
| 31 | v-if="editedItem.coverPhotoUrl == ''" | 31 | v-if="editedItem.coverPhotoUrl == ''" |
| 32 | height="160" | 32 | height="160" |
| 33 | width="160" | 33 | width="160" |
| 34 | alt="Books" | 34 | alt="Books" |
| 35 | /> | 35 | /> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-container grid-list-md> | 37 | <v-container grid-list-md> |
| 38 | <v-flex xs12 sm12> | 38 | <v-flex xs12 sm12> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right hidden-xs-only hidden-sm-only">Name :</label> | 41 | <label class="right hidden-xs-only hidden-sm-only">Name :</label> |
| 42 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label> | 42 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | <v-flex xs8 class="ml-3"> | 44 | <v-flex xs8 class="ml-3"> |
| 45 | <v-text-field | 45 | <v-text-field |
| 46 | v-model="editedItem.name" | 46 | v-model="editedItem.name" |
| 47 | placeholder="fill your full Name" | 47 | placeholder="fill your full Name" |
| 48 | name="name" | 48 | name="name" |
| 49 | type="text" | 49 | type="text" |
| 50 | required | 50 | required |
| 51 | ></v-text-field> | 51 | ></v-text-field> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | <v-flex xs12 sm12> | 55 | <v-flex xs12 sm12> |
| 56 | <v-layout> | 56 | <v-layout> |
| 57 | <v-flex xs4 class="pt-4 subheading"> | 57 | <v-flex xs4 class="pt-4 subheading"> |
| 58 | <label class="right hidden-xs-only hidden-sm-only">Author :</label> | 58 | <label class="right hidden-xs-only hidden-sm-only">Author :</label> |
| 59 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label> | 59 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs8 class="ml-3"> | 61 | <v-flex xs8 class="ml-3"> |
| 62 | <v-text-field | 62 | <v-text-field |
| 63 | v-model="editedItem.author" | 63 | v-model="editedItem.author" |
| 64 | placeholder="fill your full author" | 64 | placeholder="fill your full author" |
| 65 | name="name" | 65 | name="name" |
| 66 | type="text" | 66 | type="text" |
| 67 | required | 67 | required |
| 68 | ></v-text-field> | 68 | ></v-text-field> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | <v-flex xs12 sm12> | 72 | <v-flex xs12 sm12> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 class="pt-4 subheading"> | 74 | <v-flex xs4 class="pt-4 subheading"> |
| 75 | <label class="right hidden-xs-only hidden-sm-only">Class :</label> | 75 | <label class="right hidden-xs-only hidden-sm-only">Class :</label> |
| 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label> | 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 class="ml-3"> | 78 | <v-flex xs8 class="ml-3"> |
| 79 | <v-select | 79 | <v-select |
| 80 | v-model="editedItem.classId" | 80 | v-model="editedItem.classId" |
| 81 | :items="addClass" | 81 | :items="addClass" |
| 82 | label="Select Class" | 82 | label="Select Class" |
| 83 | item-text="classNum" | 83 | item-text="classNum" |
| 84 | item-value="_id" | 84 | item-value="_id" |
| 85 | type="_id" | 85 | type="_id" |
| 86 | required | 86 | required |
| 87 | ></v-select> | 87 | ></v-select> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs12 sm12> | 91 | <v-flex xs12 sm12> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs4 class="pt-4 subheading"> | 93 | <v-flex xs4 class="pt-4 subheading"> |
| 94 | <label class="right hidden-xs-only hidden-sm-only">Upload Image :</label> | 94 | <label class="right hidden-xs-only hidden-sm-only">Upload Image :</label> |
| 95 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label> | 95 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs8 class="ml-3"> | 97 | <v-flex xs8 class="ml-3"> |
| 98 | <v-text-field | 98 | <v-text-field |
| 99 | label="Select Image" | 99 | label="Select Image" |
| 100 | @click="editPickImage" | 100 | @click="editPickImage" |
| 101 | v-model="editImageName" | 101 | v-model="editImageName" |
| 102 | append-icon="attach_file" | 102 | append-icon="attach_file" |
| 103 | ></v-text-field> | 103 | ></v-text-field> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | </v-layout> | 105 | </v-layout> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs12> | 107 | <v-flex xs12> |
| 108 | <v-layout> | 108 | <v-layout> |
| 109 | <v-flex xs4 class="pt-4 subheading"> | 109 | <v-flex xs4 class="pt-4 subheading"> |
| 110 | <label class="right">Upload File:</label> | 110 | <label class="right">Upload File:</label> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | <v-flex xs8 class="ml-3"> | 112 | <v-flex xs8 class="ml-3"> |
| 113 | <input | 113 | <input |
| 114 | type="file" | 114 | type="file" |
| 115 | style="display: none" | 115 | style="display: none" |
| 116 | ref="editFile" | 116 | ref="editFile" |
| 117 | @change="onEditFilePicked" | 117 | @change="onEditFilePicked" |
| 118 | /> | 118 | /> |
| 119 | <v-text-field | 119 | <v-text-field |
| 120 | label="Select File" | 120 | label="Select File" |
| 121 | @click="editPickFile" | 121 | @click="editPickFile" |
| 122 | v-model="editFileName" | 122 | v-model="editFileName" |
| 123 | append-icon="attach_file" | 123 | append-icon="attach_file" |
| 124 | ></v-text-field> | 124 | ></v-text-field> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-card-actions> | 128 | <v-card-actions> |
| 129 | <v-spacer></v-spacer> | 129 | <v-spacer></v-spacer> |
| 130 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 130 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 131 | <v-spacer></v-spacer> | 131 | <v-spacer></v-spacer> |
| 132 | </v-card-actions> | 132 | </v-card-actions> |
| 133 | </v-container> | 133 | </v-container> |
| 134 | </v-card-text> | 134 | </v-card-text> |
| 135 | </v-card> | 135 | </v-card> |
| 136 | </v-dialog> | 136 | </v-dialog> |
| 137 | 137 | ||
| 138 | <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> | 138 | <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> |
| 139 | 139 | ||
| 140 | <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable persistent> | 140 | <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable persistent> |
| 141 | <v-card flat class="card-style pa-3" dark> | 141 | <v-card flat class="Card-style pa-3"> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <label class="title text-xs-center">View E-book</label> | 144 | <label class="title text-xs-center">View E-book</label> |
| 145 | <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon> | 145 | <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-layout> | 148 | <v-layout> |
| 149 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 149 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 150 | <v-avatar size="100px"> | 150 | <v-avatar size="100px"> |
| 151 | <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" /> | 151 | <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" /> |
| 152 | <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" /> | 152 | <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" /> |
| 153 | </v-avatar> | 153 | </v-avatar> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-container grid-list-md> | 156 | <v-container grid-list-md> |
| 157 | <v-layout wrap> | 157 | <v-layout wrap> |
| 158 | <v-flex xs12 sm12> | 158 | <v-flex xs12 sm12> |
| 159 | <v-layout> | 159 | <v-layout> |
| 160 | <v-flex xs6 sm6> | 160 | <v-flex xs6 sm6> |
| 161 | <h5 class="right my-1"> | 161 | <h5 class="right my-1"> |
| 162 | <b>Name:</b> | 162 | <b>Name:</b> |
| 163 | </h5> | 163 | </h5> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | <v-flex sm6 xs6> | 165 | <v-flex sm6 xs6> |
| 166 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 166 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | </v-layout> | 168 | </v-layout> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex xs12 sm12> | 170 | <v-flex xs12 sm12> |
| 171 | <v-layout> | 171 | <v-layout> |
| 172 | <v-flex xs6 sm6> | 172 | <v-flex xs6 sm6> |
| 173 | <h5 class="right my-1"> | 173 | <h5 class="right my-1"> |
| 174 | <b>Author:</b> | 174 | <b>Author:</b> |
| 175 | </h5> | 175 | </h5> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | <v-flex sm6 xs6> | 177 | <v-flex sm6 xs6> |
| 178 | <h5 class="my-1 left">{{ editedItem.author }}</h5> | 178 | <h5 class="my-1 left">{{ editedItem.author }}</h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-layout> | 180 | </v-layout> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | <v-flex xs12 sm12> | 183 | <v-flex xs12 sm12> |
| 184 | <v-layout> | 184 | <v-layout> |
| 185 | <v-flex xs6 sm6> | 185 | <v-flex xs6 sm6> |
| 186 | <h5 class="right my-1"> | 186 | <h5 class="right my-1"> |
| 187 | <b>Class:</b> | 187 | <b>Class:</b> |
| 188 | </h5> | 188 | </h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex sm6 xs6> | 190 | <v-flex sm6 xs6> |
| 191 | <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5> | 191 | <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-container> | 195 | </v-container> |
| 196 | </v-card> | 196 | </v-card> |
| 197 | </v-dialog> | 197 | </v-dialog> |
| 198 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> | 198 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> |
| 199 | 199 | ||
| 200 | <v-toolbar color="transparent" flat> | 200 | <v-toolbar color="transparent" flat> |
| 201 | <v-btn | 201 | <v-btn |
| 202 | fab | 202 | fab |
| 203 | dark | 203 | dark |
| 204 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 204 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 205 | small | 205 | small |
| 206 | @click="addEBookDialog = true" | 206 | @click="addEBookDialog = true" |
| 207 | > | 207 | > |
| 208 | <v-icon dark>add</v-icon> | 208 | <v-icon dark>add</v-icon> |
| 209 | </v-btn> | 209 | </v-btn> |
| 210 | <v-btn | 210 | <v-btn |
| 211 | round | 211 | round |
| 212 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 212 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 213 | dark | 213 | dark |
| 214 | @click="addEBookDialog = true" | 214 | @click="addEBookDialog = true" |
| 215 | > | 215 | > |
| 216 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book | 216 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book |
| 217 | </v-btn> | 217 | </v-btn> |
| 218 | <v-spacer></v-spacer> | 218 | <v-spacer></v-spacer> |
| 219 | <v-card-title class="body-1" v-show="show"> | 219 | <v-card-title class="body-1" v-show="show"> |
| 220 | <v-btn icon large flat @click="displaySearch"> | 220 | <v-btn icon large flat @click="displaySearch"> |
| 221 | <v-avatar size="27"> | 221 | <v-avatar size="27"> |
| 222 | <img src="/static/icon/search.png" alt="icon" /> | 222 | <img src="/static/icon/search.png" alt="icon" /> |
| 223 | </v-avatar> | 223 | </v-avatar> |
| 224 | </v-btn> | 224 | </v-btn> |
| 225 | </v-card-title> | 225 | </v-card-title> |
| 226 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 226 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 227 | <v-layout> | 227 | <v-layout> |
| 228 | <v-text-field | 228 | <v-text-field |
| 229 | autofocus | 229 | autofocus |
| 230 | v-model="search" | 230 | v-model="search" |
| 231 | label="Search" | 231 | label="Search" |
| 232 | prepend-inner-icon="search" | 232 | prepend-inner-icon="search" |
| 233 | color="primary" | 233 | color="primary" |
| 234 | ></v-text-field> | 234 | ></v-text-field> |
| 235 | <v-icon @click="closeSearch" color="error">close</v-icon> | 235 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 236 | </v-layout> | 236 | </v-layout> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | </v-toolbar> | 238 | </v-toolbar> |
| 239 | <v-data-table | 239 | <v-data-table |
| 240 | :headers="headers" | 240 | :headers="headers" |
| 241 | :items="eBookData" | 241 | :items="eBookData" |
| 242 | :pagination.sync="pagination" | 242 | :pagination.sync="pagination" |
| 243 | :search="search" | 243 | :search="search" |
| 244 | > | 244 | > |
| 245 | <template slot="items" slot-scope="props"> | 245 | <template slot="items" slot-scope="props"> |
| 246 | <tr class="tr"> | 246 | <tr class="tr"> |
| 247 | <td class="td td-row">{{ props.index + 1}}</td> | 247 | <td class="td td-row">{{ props.index + 1}}</td> |
| 248 | <td class="td td-row text-xs-center"> | 248 | <td class="td td-row text-xs-center"> |
| 249 | <v-avatar size="40"> | 249 | <v-avatar size="40"> |
| 250 | <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" /> | 250 | <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" /> |
| 251 | <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" /> | 251 | <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" /> |
| 252 | </v-avatar> | 252 | </v-avatar> |
| 253 | </td> | 253 | </td> |
| 254 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 254 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 255 | <td class="td td-row text-xs-center">{{ props.item.author}}</td> | 255 | <td class="td td-row text-xs-center">{{ props.item.author}}</td> |
| 256 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> | 256 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> |
| 257 | <td class="td td-row text-xs-center"> | 257 | <td class="td td-row text-xs-center"> |
| 258 | <span> | 258 | <span> |
| 259 | <v-tooltip top> | 259 | <v-tooltip top> |
| 260 | <img | 260 | <img |
| 261 | slot="activator" | 261 | slot="activator" |
| 262 | style="cursor:pointer; width:25px; height:25px; " | 262 | style="cursor:pointer; width:25px; height:25px; " |
| 263 | class="mr-3" | 263 | class="mr-3" |
| 264 | @click="profile(props.item)" | 264 | @click="profile(props.item)" |
| 265 | src="/static/icon/view.png" | 265 | src="/static/icon/view.png" |
| 266 | /> | 266 | /> |
| 267 | <span>View</span> | 267 | <span>View</span> |
| 268 | </v-tooltip> | 268 | </v-tooltip> |
| 269 | <v-tooltip top> | 269 | <v-tooltip top> |
| 270 | <img | 270 | <img |
| 271 | slot="activator" | 271 | slot="activator" |
| 272 | style="cursor:pointer; width:20px; height:18px; " | 272 | style="cursor:pointer; width:20px; height:18px; " |
| 273 | class="mr-3" | 273 | class="mr-3" |
| 274 | @click="editItem(props.item)" | 274 | @click="editItem(props.item)" |
| 275 | src="/static/icon/edit.png" | 275 | src="/static/icon/edit.png" |
| 276 | /> | 276 | /> |
| 277 | <span>Edit</span> | 277 | <span>Edit</span> |
| 278 | </v-tooltip> | 278 | </v-tooltip> |
| 279 | <v-tooltip top v-if="role != 'TEACHER' "> | 279 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 280 | <img | 280 | <img |
| 281 | slot="activator" | 281 | slot="activator" |
| 282 | style="cursor:pointer; width:20px; height:20px; " | 282 | style="cursor:pointer; width:20px; height:20px; " |
| 283 | @click="deleteItem(props.item)" | 283 | @click="deleteItem(props.item)" |
| 284 | src="/static/icon/delete.png" | 284 | src="/static/icon/delete.png" |
| 285 | /> | 285 | /> |
| 286 | <span>Delete</span> | 286 | <span>Delete</span> |
| 287 | </v-tooltip> | 287 | </v-tooltip> |
| 288 | </span> | 288 | </span> |
| 289 | </td> | 289 | </td> |
| 290 | </tr> | 290 | </tr> |
| 291 | </template> | 291 | </template> |
| 292 | <v-alert | 292 | <v-alert |
| 293 | slot="no-results" | 293 | slot="no-results" |
| 294 | :value="true" | 294 | :value="true" |
| 295 | color="error" | 295 | color="error" |
| 296 | icon="warning" | 296 | icon="warning" |
| 297 | >Your search for "{{ search }}" found no results.</v-alert> | 297 | >Your search for "{{ search }}" found no results.</v-alert> |
| 298 | </v-data-table> | 298 | </v-data-table> |
| 299 | <!-- ****** ADD MULTIPLE E-BOOK ****** --> | 299 | <!-- ****** ADD MULTIPLE E-BOOK ****** --> |
| 300 | <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog" persistent> | 300 | <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog" persistent> |
| 301 | <v-card flat class="card-style pa-2" dark> | 301 | <v-card flat class="Card-style pa-2"> |
| 302 | <v-layout> | 302 | <v-layout> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <label class="title text-xs-center">Add E-Book</label> | 304 | <label class="title text-xs-center">Add E-Book</label> |
| 305 | <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon> | 305 | <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | <v-form ref="form" v-model="valid" lazy-validation> | 308 | <v-form ref="form" v-model="valid" lazy-validation> |
| 309 | <v-container fluid> | 309 | <v-container fluid> |
| 310 | <v-layout> | 310 | <v-layout> |
| 311 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 311 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 312 | <input | 312 | <input |
| 313 | type="file" | 313 | type="file" |
| 314 | style="display: none" | 314 | style="display: none" |
| 315 | ref="image" | 315 | ref="image" |
| 316 | accept="image/*" | 316 | accept="image/*" |
| 317 | @change="onImagePicked" | 317 | @change="onImagePicked" |
| 318 | /> | 318 | /> |
| 319 | <v-layout justify-center> | 319 | <v-layout justify-center> |
| 320 | <v-flex v-if="files != ''"> | 320 | <v-flex v-if="files != ''"> |
| 321 | <img :src="files" height="150" width="150" /> | 321 | <img :src="files" height="150" width="150" /> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | </v-layout> | 323 | </v-layout> |
| 324 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> | 324 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> |
| 325 | </v-flex> | 325 | </v-flex> |
| 326 | </v-layout> | 326 | </v-layout> |
| 327 | <v-flex xs12> | 327 | <v-flex xs12> |
| 328 | <v-layout> | 328 | <v-layout> |
| 329 | <v-flex xs4 class="pt-4 subheading"> | 329 | <v-flex xs4 class="pt-4 subheading"> |
| 330 | <label class="right">Name:</label> | 330 | <label class="right">Name:</label> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex xs7 class="ml-3"> | 332 | <v-flex xs7 class="ml-3"> |
| 333 | <v-text-field | 333 | <v-text-field |
| 334 | v-model="addEBooks.name" | 334 | v-model="addEBooks.name" |
| 335 | placeholder="fill name" | 335 | placeholder="fill name" |
| 336 | name="name" | 336 | name="name" |
| 337 | type="text" | 337 | type="text" |
| 338 | :rules="titleRules" | 338 | :rules="titleRules" |
| 339 | required | 339 | required |
| 340 | ></v-text-field> | 340 | ></v-text-field> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | </v-layout> | 342 | </v-layout> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex xs12> | 344 | <v-flex xs12> |
| 345 | <v-layout> | 345 | <v-layout> |
| 346 | <v-flex xs4 class="pt-4 subheading"> | 346 | <v-flex xs4 class="pt-4 subheading"> |
| 347 | <label class="right">Author:</label> | 347 | <label class="right">Author:</label> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-flex xs7 class="ml-3"> | 349 | <v-flex xs7 class="ml-3"> |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | v-model="addEBooks.author" | 351 | v-model="addEBooks.author" |
| 352 | placeholder="fill your Author Name" | 352 | placeholder="fill your Author Name" |
| 353 | name="name" | 353 | name="name" |
| 354 | type="text" | 354 | type="text" |
| 355 | :rules="titleRules" | 355 | :rules="titleRules" |
| 356 | required | 356 | required |
| 357 | ></v-text-field> | 357 | ></v-text-field> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | <v-flex xs12> | 361 | <v-flex xs12> |
| 362 | <v-layout> | 362 | <v-layout> |
| 363 | <v-flex xs4 class="pt-4 subheading"> | 363 | <v-flex xs4 class="pt-4 subheading"> |
| 364 | <label class="right">Class:</label> | 364 | <label class="right">Class:</label> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | <v-flex xs7 class="ml-3"> | 366 | <v-flex xs7 class="ml-3"> |
| 367 | <v-select | 367 | <v-select |
| 368 | v-model="addEBooks.classId" | 368 | v-model="addEBooks.classId" |
| 369 | :items="addClass" | 369 | :items="addClass" |
| 370 | label="Select Class" | 370 | label="Select Class" |
| 371 | item-text="classNum" | 371 | item-text="classNum" |
| 372 | item-value="_id" | 372 | item-value="_id" |
| 373 | :rules="titleRules" | 373 | :rules="titleRules" |
| 374 | required | 374 | required |
| 375 | ></v-select> | 375 | ></v-select> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | </v-layout> | 377 | </v-layout> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | <v-flex xs12> | 379 | <v-flex xs12> |
| 380 | <v-layout> | 380 | <v-layout> |
| 381 | <v-flex xs4 class="pt-4 subheading"> | 381 | <v-flex xs4 class="pt-4 subheading"> |
| 382 | <label class="right">Upload Image:</label> | 382 | <label class="right">Upload Image:</label> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | <v-flex xs7 class="ml-3"> | 384 | <v-flex xs7 class="ml-3"> |
| 385 | <v-text-field | 385 | <v-text-field |
| 386 | label="Select Image" | 386 | label="Select Image" |
| 387 | @click="pickImage" | 387 | @click="pickImage" |
| 388 | v-model="imageName" | 388 | v-model="imageName" |
| 389 | append-icon="attach_file" | 389 | append-icon="attach_file" |
| 390 | ></v-text-field> | 390 | ></v-text-field> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | </v-layout> | 392 | </v-layout> |
| 393 | </v-flex> | 393 | </v-flex> |
| 394 | <v-flex xs12> | 394 | <v-flex xs12> |
| 395 | <v-layout> | 395 | <v-layout> |
| 396 | <v-flex xs4 class="pt-4 subheading"> | 396 | <v-flex xs4 class="pt-4 subheading"> |
| 397 | <label class="right">Upload File:</label> | 397 | <label class="right">Upload File:</label> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex xs8 class="ml-3"> | 399 | <v-flex xs8 class="ml-3"> |
| 400 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> | 400 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> |
| 401 | <v-text-field | 401 | <v-text-field |
| 402 | label="Select File" | 402 | label="Select File" |
| 403 | @click="pickFile" | 403 | @click="pickFile" |
| 404 | v-model="fileName" | 404 | v-model="fileName" |
| 405 | append-icon="attach_file" | 405 | append-icon="attach_file" |
| 406 | ></v-text-field> | 406 | ></v-text-field> |
| 407 | </v-flex> | 407 | </v-flex> |
| 408 | </v-layout> | 408 | </v-layout> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs12> | 410 | <v-flex xs12> |
| 411 | <v-layout> | 411 | <v-layout> |
| 412 | <v-flex xs4 class="pt-3 subheading"> | 412 | <v-flex xs4 class="pt-3 subheading"> |
| 413 | <label class="right">Private:</label> | 413 | <label class="right">Private:</label> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | <v-flex xs7 class="ml-3"> | 415 | <v-flex xs7 class="ml-3"> |
| 416 | <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox> | 416 | <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox> |
| 417 | </v-flex> | 417 | </v-flex> |
| 418 | </v-layout> | 418 | </v-layout> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-layout> | 420 | <v-layout> |
| 421 | <v-flex xs12> | 421 | <v-flex xs12> |
| 422 | <v-card-actions> | 422 | <v-card-actions> |
| 423 | <v-spacer></v-spacer> | 423 | <v-spacer></v-spacer> |
| 424 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 424 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 425 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 425 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 426 | </v-card-actions> | 426 | </v-card-actions> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | </v-container> | 429 | </v-container> |
| 430 | </v-form> | 430 | </v-form> |
| 431 | </v-card> | 431 | </v-card> |
| 432 | </v-dialog> | 432 | </v-dialog> |
| 433 | <div class="loader" v-if="showLoader"> | 433 | <div class="loader" v-if="showLoader"> |
| 434 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 434 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 435 | </div> | 435 | </div> |
| 436 | </v-container> | 436 | </v-container> |
| 437 | </template> | 437 | </template> |
| 438 | 438 | ||
| 439 | <script> | 439 | <script> |
| 440 | import http from "@/Services/http.js"; | 440 | import http from "@/Services/http.js"; |
| 441 | import Util from "@/util"; | 441 | import Util from "@/util"; |
| 442 | 442 | ||
| 443 | export default { | 443 | export default { |
| 444 | data: () => ({ | 444 | data: () => ({ |
| 445 | snackbar: false, | 445 | snackbar: false, |
| 446 | y: "top", | 446 | y: "top", |
| 447 | x: "right", | 447 | x: "right", |
| 448 | mode: "", | 448 | mode: "", |
| 449 | timeout: 3000, | 449 | timeout: 3000, |
| 450 | text: "", | 450 | text: "", |
| 451 | show: true, | 451 | show: true, |
| 452 | showSearch: false, | 452 | showSearch: false, |
| 453 | loading: false, | 453 | loading: false, |
| 454 | loadingUpadte: false, | 454 | loadingUpadte: false, |
| 455 | date: null, | 455 | date: null, |
| 456 | search: "", | 456 | search: "", |
| 457 | showLoader: false, | 457 | showLoader: false, |
| 458 | editEbookDialog: false, | 458 | editEbookDialog: false, |
| 459 | viewEbookDialog: false, | 459 | viewEbookDialog: false, |
| 460 | valid: true, | 460 | valid: true, |
| 461 | addEBookDialog: false, | 461 | addEBookDialog: false, |
| 462 | editLoading: false, | 462 | editLoading: false, |
| 463 | addClass: [], | 463 | addClass: [], |
| 464 | addSection: [], | 464 | addSection: [], |
| 465 | pagination: { | 465 | pagination: { |
| 466 | rowsPerPage: 10, | 466 | rowsPerPage: 10, |
| 467 | }, | 467 | }, |
| 468 | imageName: "", | 468 | imageName: "", |
| 469 | fileName: "", | 469 | fileName: "", |
| 470 | imageUrl: "", | 470 | imageUrl: "", |
| 471 | imageFile: "", | 471 | imageFile: "", |
| 472 | image: [], | 472 | image: [], |
| 473 | upload: "", | 473 | upload: "", |
| 474 | files: "", | 474 | files: "", |
| 475 | anyFile: "", | 475 | anyFile: "", |
| 476 | titleRules: [(v) => !!v || " Tilte is required"], | 476 | titleRules: [(v) => !!v || " Tilte is required"], |
| 477 | descriptionRules: [(v) => !!v || " Description is required"], | 477 | descriptionRules: [(v) => !!v || " Description is required"], |
| 478 | uploadImageRule: [(v) => !!v || " field is required"], | 478 | uploadImageRule: [(v) => !!v || " field is required"], |
| 479 | uploadFileRule: [(v) => !!v || " fied is required"], | 479 | uploadFileRule: [(v) => !!v || " fied is required"], |
| 480 | uploadPrivateRule: [(v) => !!v || " fied is required"], | 480 | uploadPrivateRule: [(v) => !!v || " fied is required"], |
| 481 | 481 | ||
| 482 | headers: [ | 482 | headers: [ |
| 483 | { | 483 | { |
| 484 | align: "left", | 484 | align: "left", |
| 485 | text: "No", | 485 | text: "No", |
| 486 | sortable: false, | 486 | sortable: false, |
| 487 | value: "No", | 487 | value: "No", |
| 488 | }, | 488 | }, |
| 489 | { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, | 489 | { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, |
| 490 | { text: "Name", vaue: "name", sortable: false, align: "center" }, | 490 | { text: "Name", vaue: "name", sortable: false, align: "center" }, |
| 491 | { text: "Author", value: "author", sortable: false, align: "center" }, | 491 | { text: "Author", value: "author", sortable: false, align: "center" }, |
| 492 | { | 492 | { |
| 493 | text: "Class", | 493 | text: "Class", |
| 494 | value: "classId", | 494 | value: "classId", |
| 495 | sortable: false, | 495 | sortable: false, |
| 496 | align: "center", | 496 | align: "center", |
| 497 | }, | 497 | }, |
| 498 | { text: "Action", value: "", sortable: false, align: "center" }, | 498 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 499 | ], | 499 | ], |
| 500 | eBookData: [], | 500 | eBookData: [], |
| 501 | editedIndex: -1, | 501 | editedIndex: -1, |
| 502 | addEBooks: { | 502 | addEBooks: { |
| 503 | private: false, | 503 | private: false, |
| 504 | }, | 504 | }, |
| 505 | editedItem: {}, | 505 | editedItem: {}, |
| 506 | editedItem: { | 506 | editedItem: { |
| 507 | classId: { | 507 | classId: { |
| 508 | classNum: "", | 508 | classNum: "", |
| 509 | }, | 509 | }, |
| 510 | }, | 510 | }, |
| 511 | token: "", | 511 | token: "", |
| 512 | uploadCover: {}, | 512 | uploadCover: {}, |
| 513 | editImageName: "", | 513 | editImageName: "", |
| 514 | editFiles: "", | 514 | editFiles: "", |
| 515 | editAnyFile: "", | 515 | editAnyFile: "", |
| 516 | editFileName: "", | 516 | editFileName: "", |
| 517 | }), | 517 | }), |
| 518 | watch: { | 518 | watch: { |
| 519 | addEBookDialog: function (val) { | 519 | addEBookDialog: function (val) { |
| 520 | if (!val) { | 520 | if (!val) { |
| 521 | this.addEBooks = []; | 521 | this.addEBooks = []; |
| 522 | this.imageName = ""; | 522 | this.imageName = ""; |
| 523 | this.fileName = ""; | 523 | this.fileName = ""; |
| 524 | this.files = ""; | 524 | this.files = ""; |
| 525 | } | 525 | } |
| 526 | }, | 526 | }, |
| 527 | }, | 527 | }, |
| 528 | methods: { | 528 | methods: { |
| 529 | editPickImage() { | 529 | editPickImage() { |
| 530 | this.$refs.editImage.click(); | 530 | this.$refs.editImage.click(); |
| 531 | }, | 531 | }, |
| 532 | pickImage() { | 532 | pickImage() { |
| 533 | this.$refs.image.click(); | 533 | this.$refs.image.click(); |
| 534 | }, | 534 | }, |
| 535 | pickFile() { | 535 | pickFile() { |
| 536 | this.$refs.file.click(); | 536 | this.$refs.file.click(); |
| 537 | }, | 537 | }, |
| 538 | editPickFile() { | 538 | editPickFile() { |
| 539 | this.$refs.editFile.click(); | 539 | this.$refs.editFile.click(); |
| 540 | }, | 540 | }, |
| 541 | onImagePicked(e) { | 541 | onImagePicked(e) { |
| 542 | // console.log(e) | 542 | // console.log(e) |
| 543 | const files = e.target.files; | 543 | const files = e.target.files; |
| 544 | /** fetch Image Name **/ | 544 | /** fetch Image Name **/ |
| 545 | if (files[0] !== undefined) { | 545 | if (files[0] !== undefined) { |
| 546 | this.imageName = files[0].name; | 546 | this.imageName = files[0].name; |
| 547 | if (this.imageName.lastIndexOf(".") <= 0) { | 547 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 548 | return; | 548 | return; |
| 549 | } | 549 | } |
| 550 | /** Select many image and showing many image add to news card **/ | 550 | /** Select many image and showing many image add to news card **/ |
| 551 | const fr = new FileReader(); | 551 | const fr = new FileReader(); |
| 552 | fr.readAsDataURL(files[0]); | 552 | fr.readAsDataURL(files[0]); |
| 553 | fr.addEventListener("load", () => { | 553 | fr.addEventListener("load", () => { |
| 554 | this.files = fr.result; | 554 | this.files = fr.result; |
| 555 | }); | 555 | }); |
| 556 | } else { | 556 | } else { |
| 557 | this.imageName = ""; | 557 | this.imageName = ""; |
| 558 | this.imageFile = ""; | 558 | this.imageFile = ""; |
| 559 | this.files = ""; | 559 | this.files = ""; |
| 560 | this.imageUrl = ""; | 560 | this.imageUrl = ""; |
| 561 | } | 561 | } |
| 562 | }, | 562 | }, |
| 563 | onEditImagePicked(e) { | 563 | onEditImagePicked(e) { |
| 564 | // console.log(e) | 564 | // console.log(e) |
| 565 | const files = e.target.files; | 565 | const files = e.target.files; |
| 566 | /** fetch Image Name **/ | 566 | /** fetch Image Name **/ |
| 567 | if (files[0] !== undefined) { | 567 | if (files[0] !== undefined) { |
| 568 | this.editImageName = files[0].name; | 568 | this.editImageName = files[0].name; |
| 569 | if (this.editImageName.lastIndexOf(".") <= 0) { | 569 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 570 | return; | 570 | return; |
| 571 | } | 571 | } |
| 572 | /** Select many image and showing many image add to news card **/ | 572 | /** Select many image and showing many image add to news card **/ |
| 573 | const fr = new FileReader(); | 573 | const fr = new FileReader(); |
| 574 | fr.readAsDataURL(files[0]); | 574 | fr.readAsDataURL(files[0]); |
| 575 | fr.addEventListener("load", () => { | 575 | fr.addEventListener("load", () => { |
| 576 | this.editFiles = fr.result; | 576 | this.editFiles = fr.result; |
| 577 | }); | 577 | }); |
| 578 | } else { | 578 | } else { |
| 579 | this.editImageName = ""; | 579 | this.editImageName = ""; |
| 580 | this.editFiles = ""; | 580 | this.editFiles = ""; |
| 581 | } | 581 | } |
| 582 | }, | 582 | }, |
| 583 | getEBooksList() { | 583 | getEBooksList() { |
| 584 | this.showLoader = true; | 584 | this.showLoader = true; |
| 585 | http() | 585 | http() |
| 586 | .get("/getEBooksList", { | 586 | .get("/getEBooksList", { |
| 587 | params: { schoolId: this.$store.state.schoolId }, | 587 | params: { schoolId: this.$store.state.schoolId }, |
| 588 | headers: { Authorization: "Bearer " + this.token }, | 588 | headers: { Authorization: "Bearer " + this.token }, |
| 589 | }) | 589 | }) |
| 590 | .then((response) => { | 590 | .then((response) => { |
| 591 | this.eBookData = response.data.data; | 591 | this.eBookData = response.data.data; |
| 592 | this.showLoader = false; | 592 | this.showLoader = false; |
| 593 | }) | 593 | }) |
| 594 | .catch((error) => { | 594 | .catch((error) => { |
| 595 | // console.log("err====>", err); | 595 | // console.log("err====>", err); |
| 596 | this.showLoader = false; | 596 | this.showLoader = false; |
| 597 | if (error.response.status === 401) { | 597 | if (error.response.status === 401) { |
| 598 | this.$router.replace({ path: "/" }); | 598 | this.$router.replace({ path: "/" }); |
| 599 | this.$store.dispatch("setToken", null); | 599 | this.$store.dispatch("setToken", null); |
| 600 | this.$store.dispatch("Id", null); | 600 | this.$store.dispatch("Id", null); |
| 601 | } | 601 | } |
| 602 | }); | 602 | }); |
| 603 | }, | 603 | }, |
| 604 | onFilePicked(e) { | 604 | onFilePicked(e) { |
| 605 | // console.log(e) | 605 | // console.log(e) |
| 606 | const files = e.target.files; | 606 | const files = e.target.files; |
| 607 | /** fetch Image Name **/ | 607 | /** fetch Image Name **/ |
| 608 | if (files[0] !== undefined) { | 608 | if (files[0] !== undefined) { |
| 609 | this.fileName = files[0].name; | 609 | this.fileName = files[0].name; |
| 610 | if (this.fileName.lastIndexOf(".") <= 0) { | 610 | if (this.fileName.lastIndexOf(".") <= 0) { |
| 611 | return; | 611 | return; |
| 612 | } | 612 | } |
| 613 | const fr = new FileReader(); | 613 | const fr = new FileReader(); |
| 614 | fr.readAsDataURL(files[0]); | 614 | fr.readAsDataURL(files[0]); |
| 615 | fr.addEventListener("load", () => { | 615 | fr.addEventListener("load", () => { |
| 616 | this.anyFile = fr.result; | 616 | this.anyFile = fr.result; |
| 617 | // console.log(" this.anyFile Url", this.anyFile ) | 617 | // console.log(" this.anyFile Url", this.anyFile ) |
| 618 | }); | 618 | }); |
| 619 | } else { | 619 | } else { |
| 620 | this.anyFile = ""; | 620 | this.anyFile = ""; |
| 621 | this.fileName = ""; | 621 | this.fileName = ""; |
| 622 | } | 622 | } |
| 623 | }, | 623 | }, |
| 624 | onEditFilePicked(e) { | 624 | onEditFilePicked(e) { |
| 625 | // console.log(e) | 625 | // console.log(e) |
| 626 | const files = e.target.files; | 626 | const files = e.target.files; |
| 627 | /** fetch Image Name **/ | 627 | /** fetch Image Name **/ |
| 628 | if (files[0] !== undefined) { | 628 | if (files[0] !== undefined) { |
| 629 | this.editFileName = files[0].name; | 629 | this.editFileName = files[0].name; |
| 630 | if (this.editFileName.lastIndexOf(".") <= 0) { | 630 | if (this.editFileName.lastIndexOf(".") <= 0) { |
| 631 | return; | 631 | return; |
| 632 | } | 632 | } |
| 633 | const fr = new FileReader(); | 633 | const fr = new FileReader(); |
| 634 | fr.readAsDataURL(files[0]); | 634 | fr.readAsDataURL(files[0]); |
| 635 | fr.addEventListener("load", () => { | 635 | fr.addEventListener("load", () => { |
| 636 | this.editAnyFile = fr.result; | 636 | this.editAnyFile = fr.result; |
| 637 | // console.log(" this.anyFile Url", this.anyFile ) | 637 | // console.log(" this.anyFile Url", this.anyFile ) |
| 638 | }); | 638 | }); |
| 639 | } else { | 639 | } else { |
| 640 | this.editAnyFile = ""; | 640 | this.editAnyFile = ""; |
| 641 | this.editFileName = ""; | 641 | this.editFileName = ""; |
| 642 | } | 642 | } |
| 643 | }, | 643 | }, |
| 644 | editItem(item) { | 644 | editItem(item) { |
| 645 | this.files = []; | 645 | this.files = []; |
| 646 | this.editedIndex = this.eBookData.indexOf(item); | 646 | this.editedIndex = this.eBookData.indexOf(item); |
| 647 | this.editedItem = Object.assign({}, item); | 647 | this.editedItem = Object.assign({}, item); |
| 648 | this.editedItem.className = item.classId.classNum; | 648 | this.editedItem.className = item.classId.classNum; |
| 649 | this.editEbookDialog = true; | 649 | this.editEbookDialog = true; |
| 650 | }, | 650 | }, |
| 651 | profile(item) { | 651 | profile(item) { |
| 652 | this.editedIndex = this.eBookData.indexOf(item); | 652 | this.editedIndex = this.eBookData.indexOf(item); |
| 653 | this.editedItem = Object.assign({}, item); | 653 | this.editedItem = Object.assign({}, item); |
| 654 | this.viewEbookDialog = true; | 654 | this.viewEbookDialog = true; |
| 655 | }, | 655 | }, |
| 656 | deleteItem(item) { | 656 | deleteItem(item) { |
| 657 | let deleteEBooks = { | 657 | let deleteEBooks = { |
| 658 | ebookId: item._id, | 658 | ebookId: item._id, |
| 659 | }; | 659 | }; |
| 660 | http() | 660 | http() |
| 661 | .delete( | 661 | .delete( |
| 662 | "/deleteEBook", | 662 | "/deleteEBook", |
| 663 | confirm("Are you sure you want to delete this?") && { | 663 | confirm("Are you sure you want to delete this?") && { |
| 664 | params: deleteEBooks, | 664 | params: deleteEBooks, |
| 665 | } | 665 | } |
| 666 | ) | 666 | ) |
| 667 | .then((response) => { | 667 | .then((response) => { |
| 668 | this.snackbar = true; | 668 | this.snackbar = true; |
| 669 | this.text = "Successfully delete Existing News"; | 669 | this.text = "Successfully delete Existing News"; |
| 670 | this.getEBooksList(); | 670 | this.getEBooksList(); |
| 671 | }) | 671 | }) |
| 672 | .catch((error) => { | 672 | .catch((error) => { |
| 673 | this.snackbar = true; | 673 | this.snackbar = true; |
| 674 | this.text = error.response.data.message; | 674 | this.text = error.response.data.message; |
| 675 | }); | 675 | }); |
| 676 | }, | 676 | }, |
| 677 | close() { | 677 | close() { |
| 678 | this.editEbookDialog = false; | 678 | this.editEbookDialog = false; |
| 679 | }, | 679 | }, |
| 680 | close1() { | 680 | close1() { |
| 681 | this.viewEbookDialog = false; | 681 | this.viewEbookDialog = false; |
| 682 | }, | 682 | }, |
| 683 | closeAddEBookModel() { | 683 | closeAddEBookModel() { |
| 684 | this.addEBookDialog = false; | 684 | this.addEBookDialog = false; |
| 685 | // this.eBookData = []; | 685 | // this.eBookData = []; |
| 686 | this.addEBooks = []; | 686 | this.addEBooks = []; |
| 687 | this.imageName = ""; | 687 | this.imageName = ""; |
| 688 | this.fileName = ""; | 688 | this.fileName = ""; |
| 689 | this.files = ""; | 689 | this.files = ""; |
| 690 | }, | 690 | }, |
| 691 | submit() { | 691 | submit() { |
| 692 | if (this.$refs.form.validate()) { | 692 | if (this.$refs.form.validate()) { |
| 693 | this.loading = true; | 693 | this.loading = true; |
| 694 | var uploadCover = ""; | 694 | var uploadCover = ""; |
| 695 | var uploadFile = ""; | 695 | var uploadFile = ""; |
| 696 | if (this.files) { | 696 | if (this.files) { |
| 697 | const [baseUrl, imageUrl] = this.files.split(/,/); | 697 | const [baseUrl, imageUrl] = this.files.split(/,/); |
| 698 | uploadCover = imageUrl; | 698 | uploadCover = imageUrl; |
| 699 | // console.log("anyFile.split(/,/)", uploadCover); | 699 | // console.log("anyFile.split(/,/)", uploadCover); |
| 700 | } | 700 | } |
| 701 | if (this.anyFile) { | 701 | if (this.anyFile) { |
| 702 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); | 702 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); |
| 703 | uploadFile = fileUrl; | 703 | uploadFile = fileUrl; |
| 704 | // console.log("anyFile.split(/,/)", uploadFile); | 704 | // console.log("anyFile.split(/,/)", uploadFile); |
| 705 | } | 705 | } |
| 706 | let data = { | 706 | let data = { |
| 707 | classId: this.addEBooks.classId, | 707 | classId: this.addEBooks.classId, |
| 708 | name: this.addEBooks.name, | 708 | name: this.addEBooks.name, |
| 709 | author: this.addEBooks.author, | 709 | author: this.addEBooks.author, |
| 710 | private: this.addEBooks.private, | 710 | private: this.addEBooks.private, |
| 711 | uploadCover: uploadCover, | 711 | uploadCover: uploadCover, |
| 712 | uploadFile: uploadFile, | 712 | uploadFile: uploadFile, |
| 713 | }; | 713 | }; |
| 714 | http() | 714 | http() |
| 715 | .post("/createEBook", data) | 715 | .post("/createEBook", data) |
| 716 | .then((response) => { | 716 | .then((response) => { |
| 717 | this.getEBooksList(); | 717 | this.getEBooksList(); |
| 718 | // this.getEBooksList = []; | 718 | // this.getEBooksList = []; |
| 719 | this.addEBookDialog = false; | 719 | this.addEBookDialog = false; |
| 720 | this.snackbar = true; | 720 | this.snackbar = true; |
| 721 | this.text = response.data.message; | 721 | this.text = response.data.message; |
| 722 | this.color = "green"; | 722 | this.color = "green"; |
| 723 | this.loading = false; | 723 | this.loading = false; |
| 724 | (this.imageName = ""), (this.fileName = ""); | 724 | (this.imageName = ""), (this.fileName = ""); |
| 725 | }) | 725 | }) |
| 726 | .catch((error) => { | 726 | .catch((error) => { |
| 727 | this.snackbar = true; | 727 | this.snackbar = true; |
| 728 | this.text = error.response.data.message; | 728 | this.text = error.response.data.message; |
| 729 | this.color = "red"; | 729 | this.color = "red"; |
| 730 | }); | 730 | }); |
| 731 | } | 731 | } |
| 732 | }, | 732 | }, |
| 733 | clear() { | 733 | clear() { |
| 734 | this.$refs.form.reset(); | 734 | this.$refs.form.reset(); |
| 735 | this.addEBooks.uploadCover = ""; | 735 | this.addEBooks.uploadCover = ""; |
| 736 | this.files = ""; | 736 | this.files = ""; |
| 737 | }, | 737 | }, |
| 738 | save() { | 738 | save() { |
| 739 | this.editLoading = true; | 739 | this.editLoading = true; |
| 740 | this.loadingUpadte = true; | 740 | this.loadingUpadte = true; |
| 741 | if (this.editFiles) { | 741 | if (this.editFiles) { |
| 742 | const [baseUrl, imageUrl] = this.editFiles.split(/,/); | 742 | const [baseUrl, imageUrl] = this.editFiles.split(/,/); |
| 743 | this.editedItem.uploadCover = imageUrl; | 743 | this.editedItem.uploadCover = imageUrl; |
| 744 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); | 744 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); |
| 745 | } | 745 | } |
| 746 | if (this.editAnyFile) { | 746 | if (this.editAnyFile) { |
| 747 | const [baseUrl, fileUrl] = this.editAnyFile.split(/,/); | 747 | const [baseUrl, fileUrl] = this.editAnyFile.split(/,/); |
| 748 | this.editedItem.uploadFile = fileUrl; | 748 | this.editedItem.uploadFile = fileUrl; |
| 749 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); | 749 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); |
| 750 | } | 750 | } |
| 751 | if (this.editedItem.classId._id) { | 751 | if (this.editedItem.classId._id) { |
| 752 | this.editedItem.classId = this.editedItem.classId._id; | 752 | this.editedItem.classId = this.editedItem.classId._id; |
| 753 | } | 753 | } |
| 754 | this.editedItem.ebookId = this.editedItem._id; | 754 | this.editedItem.ebookId = this.editedItem._id; |
| 755 | // console.log("this.editedItem", this.editedItem); | 755 | // console.log("this.editedItem", this.editedItem); |
| 756 | http() | 756 | http() |
| 757 | .put("/updateEBook", this.editedItem) | 757 | .put("/updateEBook", this.editedItem) |
| 758 | .then((response) => { | 758 | .then((response) => { |
| 759 | this.loadingUpadte = false; | 759 | this.loadingUpadte = false; |
| 760 | this.snackbar = true; | 760 | this.snackbar = true; |
| 761 | this.text = "Successfully Edit Existing E-Book"; | 761 | this.text = "Successfully Edit Existing E-Book"; |
| 762 | this.getEBooksList(); | 762 | this.getEBooksList(); |
| 763 | this.editLoading = false; | 763 | this.editLoading = false; |
| 764 | this.editedItem.uploadFile = ""; | 764 | this.editedItem.uploadFile = ""; |
| 765 | this.editedItem.uploadCover = ""; | 765 | this.editedItem.uploadCover = ""; |
| 766 | this.anyFile = ""; | 766 | this.anyFile = ""; |
| 767 | this.files = ""; | 767 | this.files = ""; |
| 768 | this.close(); | 768 | this.close(); |
| 769 | }) | 769 | }) |
| 770 | .catch((error) => { | 770 | .catch((error) => { |
| 771 | this.editLoading = false; | 771 | this.editLoading = false; |
| 772 | this.loadingUpadte = false; | 772 | this.loadingUpadte = false; |
| 773 | this.snackbar = true; | 773 | this.snackbar = true; |
| 774 | this.text = error.response.data.message; | 774 | this.text = error.response.data.message; |
| 775 | // console.log(error); | 775 | // console.log(error); |
| 776 | }); | 776 | }); |
| 777 | }, | 777 | }, |
| 778 | getAllClass() { | 778 | getAllClass() { |
| 779 | http() | 779 | http() |
| 780 | .get("/getClassesList", { | 780 | .get("/getClassesList", { |
| 781 | headers: { Authorization: "Bearer " + this.token }, | 781 | headers: { Authorization: "Bearer " + this.token }, |
| 782 | }) | 782 | }) |
| 783 | .then((response) => { | 783 | .then((response) => { |
| 784 | this.addClass = response.data.data; | 784 | this.addClass = response.data.data; |
| 785 | }) | 785 | }) |
| 786 | .catch((err) => { | 786 | .catch((err) => { |
| 787 | // console.log("err====>", err); | 787 | // console.log("err====>", err); |
| 788 | // this.$router.replace({ path: "/" }); | 788 | // this.$router.replace({ path: "/" }); |
| 789 | }); | 789 | }); |
| 790 | }, | 790 | }, |
| 791 | displaySearch() { | 791 | displaySearch() { |
| 792 | (this.show = false), (this.showSearch = true); | 792 | (this.show = false), (this.showSearch = true); |
| 793 | }, | 793 | }, |
| 794 | closeSearch() { | 794 | closeSearch() { |
| 795 | this.showSearch = false; | 795 | this.showSearch = false; |
| 796 | this.show = true; | 796 | this.show = true; |
| 797 | this.search = ""; | 797 | this.search = ""; |
| 798 | }, | 798 | }, |
| 799 | }, | 799 | }, |
| 800 | mounted() { | 800 | mounted() { |
| 801 | this.token = this.$store.state.token; | 801 | this.token = this.$store.state.token; |
| 802 | this.getEBooksList(); | 802 | this.getEBooksList(); |
| 803 | this.getAllClass(); | 803 | this.getAllClass(); |
| 804 | this.role = this.$store.state.role; | 804 | this.role = this.$store.state.role; |
| 805 | // this.getBookData(); | 805 | // this.getBookData(); |
| 806 | // this.editItem; | 806 | // this.editItem; |
| 807 | }, | 807 | }, |
| 808 | }; | 808 | }; |
| 809 | </script> | 809 | </script> |
src/pages/Library/issue.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ISSUE ****** --> | 3 | <!-- ****** EDIT ISSUE ****** --> |
| 4 | <v-dialog v-model="editIssueDialog" max-width="600px" scrollable persistent> | 4 | <v-dialog v-model="editIssueDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Issue</label> | 8 | <label class="title text-xs-center">Edit Issue</label> |
| 9 | <v-icon size="24" class="right" @click="editIssueDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editIssueDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12> | 16 | <v-flex xs12 sm12> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right">Library Id:</label> | 19 | <label class="right">Library Id:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-text-field | 22 | <v-text-field |
| 23 | v-model="editedItem.libraryId" | 23 | v-model="editedItem.libraryId" |
| 24 | placeholder="fill your Library Id" | 24 | placeholder="fill your Library Id" |
| 25 | name="name" | 25 | name="name" |
| 26 | type="text" | 26 | type="text" |
| 27 | disabled | 27 | disabled |
| 28 | ></v-text-field> | 28 | ></v-text-field> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs12 sm12> | 32 | <v-flex xs12 sm12> |
| 33 | <v-layout> | 33 | <v-layout> |
| 34 | <v-flex xs4 class="pt-4 subheading"> | 34 | <v-flex xs4 class="pt-4 subheading"> |
| 35 | <label class="right">Book:</label> | 35 | <label class="right">Book:</label> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-flex xs7 class="ml-3"> | 37 | <v-flex xs7 class="ml-3"> |
| 38 | <v-select | 38 | <v-select |
| 39 | v-model="editedItem.bookId" | 39 | v-model="editedItem.bookId" |
| 40 | label="Select Book Name" | 40 | label="Select Book Name" |
| 41 | :rules="bookRules" | 41 | :rules="bookRules" |
| 42 | :items="books" | 42 | :items="books" |
| 43 | item-text="name" | 43 | item-text="name" |
| 44 | item-value="_id" | 44 | item-value="_id" |
| 45 | ></v-select> | 45 | ></v-select> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | </v-layout> | 47 | </v-layout> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs12 sm12> | 49 | <v-flex xs12 sm12> |
| 50 | <v-layout> | 50 | <v-layout> |
| 51 | <v-flex xs4 class="pt-4 subheading"> | 51 | <v-flex xs4 class="pt-4 subheading"> |
| 52 | <label class="right">Author:</label> | 52 | <label class="right">Author:</label> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | <v-flex xs7 class="ml-3"> | 54 | <v-flex xs7 class="ml-3"> |
| 55 | <v-text-field | 55 | <v-text-field |
| 56 | placeholder="fill your Author Name" | 56 | placeholder="fill your Author Name" |
| 57 | v-model="editedItem.author" | 57 | v-model="editedItem.author" |
| 58 | type="text" | 58 | type="text" |
| 59 | ></v-text-field> | 59 | ></v-text-field> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-flex xs12 sm12> | 63 | <v-flex xs12 sm12> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-flex xs4 class="pt-4 subheading"> | 65 | <v-flex xs4 class="pt-4 subheading"> |
| 66 | <label class="right">Subject Code:</label> | 66 | <label class="right">Subject Code:</label> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex xs7 class="ml-3"> | 68 | <v-flex xs7 class="ml-3"> |
| 69 | <v-text-field | 69 | <v-text-field |
| 70 | placeholder="fill your Subject Codes" | 70 | placeholder="fill your Subject Codes" |
| 71 | v-model="editedItem.subjectCode" | 71 | v-model="editedItem.subjectCode" |
| 72 | type="text" | 72 | type="text" |
| 73 | ></v-text-field> | 73 | ></v-text-field> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex xs12 sm12> | 77 | <v-flex xs12 sm12> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs4 class="pt-4 subheading"> | 79 | <v-flex xs4 class="pt-4 subheading"> |
| 80 | <label class="right">Serial Number:</label> | 80 | <label class="right">Serial Number:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs7 class="ml-3"> | 82 | <v-flex xs7 class="ml-3"> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | placeholder="fill your Serial Number" | 84 | placeholder="fill your Serial Number" |
| 85 | v-model="editedItem.serialNumber" | 85 | v-model="editedItem.serialNumber" |
| 86 | type="text" | 86 | type="text" |
| 87 | ></v-text-field> | 87 | ></v-text-field> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs12 sm12> | 91 | <v-flex xs12 sm12> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs4 class="pt-4 subheading"> | 93 | <v-flex xs4 class="pt-4 subheading"> |
| 94 | <label class="right">due Date:</label> | 94 | <label class="right">due Date:</label> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | <v-flex xs7 class="ml-3"> | 96 | <v-flex xs7 class="ml-3"> |
| 97 | <v-menu | 97 | <v-menu |
| 98 | ref="menu1" | 98 | ref="menu1" |
| 99 | :close-on-content-click="false" | 99 | :close-on-content-click="false" |
| 100 | v-model="menu1" | 100 | v-model="menu1" |
| 101 | :nudge-right="40" | 101 | :nudge-right="40" |
| 102 | :return-value.sync="menu1" | 102 | :return-value.sync="menu1" |
| 103 | lazy | 103 | lazy |
| 104 | transition="scale-transition" | 104 | transition="scale-transition" |
| 105 | offset-y | 105 | offset-y |
| 106 | full-width | 106 | full-width |
| 107 | min-width="290px" | 107 | min-width="290px" |
| 108 | > | 108 | > |
| 109 | <v-text-field | 109 | <v-text-field |
| 110 | slot="activator" | 110 | slot="activator" |
| 111 | v-model="editedItem.dueDate" | 111 | v-model="editedItem.dueDate" |
| 112 | label="Select Due Date" | 112 | label="Select Due Date" |
| 113 | append-icon="event" | 113 | append-icon="event" |
| 114 | readonly | 114 | readonly |
| 115 | ></v-text-field> | 115 | ></v-text-field> |
| 116 | <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> | 116 | <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> |
| 117 | </v-menu> | 117 | </v-menu> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-layout> | 119 | </v-layout> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | <v-flex xs12 sm12> | 121 | <v-flex xs12 sm12> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs4 class="pt-4 subheading"> | 123 | <v-flex xs4 class="pt-4 subheading"> |
| 124 | <label class="right">Note:</label> | 124 | <label class="right">Note:</label> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | <v-flex xs7 class="ml-3"> | 126 | <v-flex xs7 class="ml-3"> |
| 127 | <v-text-field | 127 | <v-text-field |
| 128 | placeholder="fill your Serial Number" | 128 | placeholder="fill your Serial Number" |
| 129 | v-model="editedItem.note" | 129 | v-model="editedItem.note" |
| 130 | type="text" | 130 | type="text" |
| 131 | ></v-text-field> | 131 | ></v-text-field> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | </v-layout> | 135 | </v-layout> |
| 136 | <v-layout> | 136 | <v-layout> |
| 137 | <v-flex xs12> | 137 | <v-flex xs12> |
| 138 | <v-card-actions> | 138 | <v-card-actions> |
| 139 | <v-spacer></v-spacer> | 139 | <v-spacer></v-spacer> |
| 140 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 140 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 141 | </v-card-actions> | 141 | </v-card-actions> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | </v-layout> | 143 | </v-layout> |
| 144 | </v-container> | 144 | </v-container> |
| 145 | </v-form> | 145 | </v-form> |
| 146 | </v-card-text> | 146 | </v-card-text> |
| 147 | </v-card> | 147 | </v-card> |
| 148 | </v-dialog> | 148 | </v-dialog> |
| 149 | 149 | ||
| 150 | <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> | 150 | <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> |
| 151 | 151 | ||
| 152 | <v-dialog v-model="viewIssueDialog" max-width="500px" persistent> | 152 | <v-dialog v-model="viewIssueDialog" max-width="500px" persistent> |
| 153 | <v-card flat class="card-style pa-3" dark> | 153 | <v-card flat class="Card-style pa-3"> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs12> | 155 | <v-flex xs12> |
| 156 | <label class="title text-xs-center">View Issue</label> | 156 | <label class="title text-xs-center">View Issue</label> |
| 157 | <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> | 157 | <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | <v-card-text> | 160 | <v-card-text> |
| 161 | <v-container grid-list-md> | 161 | <v-container grid-list-md> |
| 162 | <v-layout wrap> | 162 | <v-layout wrap> |
| 163 | <v-flex> | 163 | <v-flex> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs5 sm6> | 165 | <v-flex xs5 sm6> |
| 166 | <h5 class="right my-1"> | 166 | <h5 class="right my-1"> |
| 167 | <b>Book:</b> | 167 | <b>Book:</b> |
| 168 | </h5> | 168 | </h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex sm6 xs8> | 170 | <v-flex sm6 xs8> |
| 171 | <h5 class="my-1">{{ editedItem.name }}</h5> | 171 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout> | 174 | <v-layout> |
| 175 | <v-flex xs5 sm6> | 175 | <v-flex xs5 sm6> |
| 176 | <h5 class="right my-1"> | 176 | <h5 class="right my-1"> |
| 177 | <b>Serial Number:</b> | 177 | <b>Serial Number:</b> |
| 178 | </h5> | 178 | </h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex sm6 xs8> | 180 | <v-flex sm6 xs8> |
| 181 | <h5 class="my-1">{{ editedItem.serialNumber }}</h5> | 181 | <h5 class="my-1">{{ editedItem.serialNumber }}</h5> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | <v-layout> | 184 | <v-layout> |
| 185 | <v-flex xs5 sm6> | 185 | <v-flex xs5 sm6> |
| 186 | <h5 class="right my-1"> | 186 | <h5 class="right my-1"> |
| 187 | <b>Issue date:</b> | 187 | <b>Issue date:</b> |
| 188 | </h5> | 188 | </h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex sm6 xs8> | 190 | <v-flex sm6 xs8> |
| 191 | <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> | 191 | <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | <v-layout> | 194 | <v-layout> |
| 195 | <v-flex xs5 sm6> | 195 | <v-flex xs5 sm6> |
| 196 | <h5 class="right my-1"> | 196 | <h5 class="right my-1"> |
| 197 | <b>Due date:</b> | 197 | <b>Due date:</b> |
| 198 | </h5> | 198 | </h5> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex sm6 xs8> | 200 | <v-flex sm6 xs8> |
| 201 | <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> | 201 | <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | </v-layout> | 203 | </v-layout> |
| 204 | <v-layout> | 204 | <v-layout> |
| 205 | <v-flex xs5 sm6> | 205 | <v-flex xs5 sm6> |
| 206 | <h5 class="right my-1"> | 206 | <h5 class="right my-1"> |
| 207 | <b>Status:</b> | 207 | <b>Status:</b> |
| 208 | </h5> | 208 | </h5> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex sm6 xs8> | 210 | <v-flex sm6 xs8> |
| 211 | <h5 class="my-1">{{ editedItem.status }}</h5> | 211 | <h5 class="my-1">{{ editedItem.status }}</h5> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-layout> | 213 | </v-layout> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-container> | 216 | </v-container> |
| 217 | </v-card-text> | 217 | </v-card-text> |
| 218 | </v-card> | 218 | </v-card> |
| 219 | </v-dialog> | 219 | </v-dialog> |
| 220 | <!-- ****** EXISTING ISSUE TABLE****** --> | 220 | <!-- ****** EXISTING ISSUE TABLE****** --> |
| 221 | <!-- <v-card> | 221 | <!-- <v-card> |
| 222 | <v-layout> | 222 | <v-layout> |
| 223 | <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> | 223 | <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> |
| 224 | <label class="right pt-4">Library ID:</label> | 224 | <label class="right pt-4">Library ID:</label> |
| 225 | </v-flex> | 225 | </v-flex> |
| 226 | <v-flex lg2 md3 xs7> | 226 | <v-flex lg2 md3 xs7> |
| 227 | <v-text-field | 227 | <v-text-field |
| 228 | class="pl-3" | 228 | class="pl-3" |
| 229 | @keyup.enter="getIssueList" | 229 | @keyup.enter="getIssueList" |
| 230 | v-model="libraryId" | 230 | v-model="libraryId" |
| 231 | placeholder="fill your library Id" | 231 | placeholder="fill your library Id" |
| 232 | ></v-text-field> | 232 | ></v-text-field> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-flex lg9 md3 xs5> | 234 | <v-flex lg9 md3 xs5> |
| 235 | <v-btn | 235 | <v-btn |
| 236 | round | 236 | round |
| 237 | class="black mt-1 right hidden-xs-only" | 237 | class="black mt-1 right hidden-xs-only" |
| 238 | @click="getIssueList" | 238 | @click="getIssueList" |
| 239 | :loading="loadingSearch" | 239 | :loading="loadingSearch" |
| 240 | dark | 240 | dark |
| 241 | >Search</v-btn> | 241 | >Search</v-btn> |
| 242 | <v-btn | 242 | <v-btn |
| 243 | round | 243 | round |
| 244 | class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" | 244 | class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" |
| 245 | :loading="loadingSearch" | 245 | :loading="loadingSearch" |
| 246 | @click="getIssueList" | 246 | @click="getIssueList" |
| 247 | small | 247 | small |
| 248 | dark | 248 | dark |
| 249 | >Search</v-btn> | 249 | >Search</v-btn> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-card>--> | 252 | </v-card>--> |
| 253 | 253 | ||
| 254 | <v-toolbar color="transparent" flat> | 254 | <v-toolbar color="transparent" flat> |
| 255 | <v-btn | 255 | <v-btn |
| 256 | fab | 256 | fab |
| 257 | dark | 257 | dark |
| 258 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 258 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 259 | small | 259 | small |
| 260 | @click="addIssueDialog = true" | 260 | @click="addIssueDialog = true" |
| 261 | > | 261 | > |
| 262 | <v-icon dark>add</v-icon> | 262 | <v-icon dark>add</v-icon> |
| 263 | </v-btn> | 263 | </v-btn> |
| 264 | <v-btn | 264 | <v-btn |
| 265 | round | 265 | round |
| 266 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 266 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 267 | dark | 267 | dark |
| 268 | @click="addIssueDialog = true" | 268 | @click="addIssueDialog = true" |
| 269 | > | 269 | > |
| 270 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue | 270 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue |
| 271 | </v-btn> | 271 | </v-btn> |
| 272 | <v-flex lg2 md3 xs7> | 272 | <v-flex lg2 md3 xs7> |
| 273 | <v-text-field | 273 | <v-text-field |
| 274 | class="pl-3" | 274 | class="pl-3" |
| 275 | @keyup.enter="getIssueList" | 275 | @keyup.enter="getIssueList" |
| 276 | v-model="libraryId" | 276 | v-model="libraryId" |
| 277 | placeholder="fill your library Id" | 277 | placeholder="fill your library Id" |
| 278 | ></v-text-field> | 278 | ></v-text-field> |
| 279 | </v-flex> | 279 | </v-flex> |
| 280 | <v-spacer></v-spacer> | 280 | <v-spacer></v-spacer> |
| 281 | <v-btn | 281 | <v-btn |
| 282 | round | 282 | round |
| 283 | class="add-button mt-1 right hidden-xs-only" | 283 | class="add-button mt-1 right hidden-xs-only" |
| 284 | @click="getIssueList" | 284 | @click="getIssueList" |
| 285 | :loading="loadingSearch" | 285 | :loading="loadingSearch" |
| 286 | dark | 286 | dark |
| 287 | >Search</v-btn> | 287 | >Search</v-btn> |
| 288 | <v-btn | 288 | <v-btn |
| 289 | round | 289 | round |
| 290 | class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" | 290 | class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" |
| 291 | :loading="loadingSearch" | 291 | :loading="loadingSearch" |
| 292 | @click="getIssueList" | 292 | @click="getIssueList" |
| 293 | small | 293 | small |
| 294 | dark | 294 | dark |
| 295 | >Search</v-btn> | 295 | >Search</v-btn> |
| 296 | <v-card-title class="body-1" v-show="show"> | 296 | <v-card-title class="body-1" v-show="show"> |
| 297 | <v-btn icon large flat @click="displaySearch"> | 297 | <v-btn icon large flat @click="displaySearch"> |
| 298 | <v-avatar size="27"> | 298 | <v-avatar size="27"> |
| 299 | <img src="/static/icon/search.png" alt="icon" /> | 299 | <img src="/static/icon/search.png" alt="icon" /> |
| 300 | </v-avatar> | 300 | </v-avatar> |
| 301 | </v-btn> | 301 | </v-btn> |
| 302 | </v-card-title> | 302 | </v-card-title> |
| 303 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 303 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 304 | <v-layout> | 304 | <v-layout> |
| 305 | <v-text-field | 305 | <v-text-field |
| 306 | autofocus | 306 | autofocus |
| 307 | v-model="search" | 307 | v-model="search" |
| 308 | label="Search" | 308 | label="Search" |
| 309 | prepend-inner-icon="search" | 309 | prepend-inner-icon="search" |
| 310 | color="primary" | 310 | color="primary" |
| 311 | ></v-text-field> | 311 | ></v-text-field> |
| 312 | <v-icon @click="closeSearch" color="error">close</v-icon> | 312 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | </v-toolbar> | 315 | </v-toolbar> |
| 316 | <v-data-table | 316 | <v-data-table |
| 317 | :headers="headers" | 317 | :headers="headers" |
| 318 | :items="desserts" | 318 | :items="desserts" |
| 319 | :pagination.sync="pagination" | 319 | :pagination.sync="pagination" |
| 320 | :search="search" | 320 | :search="search" |
| 321 | > | 321 | > |
| 322 | <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> | 322 | <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> |
| 323 | <tr class="tr"> | 323 | <tr class="tr"> |
| 324 | <td class="td td-row">{{ props.index + 1}}</td> | 324 | <td class="td td-row">{{ props.index + 1}}</td> |
| 325 | <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> | 325 | <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> |
| 326 | <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> | 326 | <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> |
| 327 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> | 327 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> |
| 328 | <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> | 328 | <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> |
| 329 | <td class="text-xs-center td td-row"> | 329 | <td class="text-xs-center td td-row"> |
| 330 | <span | 330 | <span |
| 331 | v-if="props.item.bookId.status === 'AVAILABLE'" | 331 | v-if="props.item.bookId.status === 'AVAILABLE'" |
| 332 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" | 332 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" |
| 333 | >{{ props.item.bookId.status}}</span> | 333 | >{{ props.item.bookId.status}}</span> |
| 334 | <span | 334 | <span |
| 335 | v-if="props.item.bookId.status === 'UNAVAILABLE'" | 335 | v-if="props.item.bookId.status === 'UNAVAILABLE'" |
| 336 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" | 336 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" |
| 337 | >{{ props.item.bookId.status}}</span> | 337 | >{{ props.item.bookId.status}}</span> |
| 338 | </td> | 338 | </td> |
| 339 | <td class="text-xs-center td td-row"> | 339 | <td class="text-xs-center td td-row"> |
| 340 | <span> | 340 | <span> |
| 341 | <v-tooltip top> | 341 | <v-tooltip top> |
| 342 | <img | 342 | <img |
| 343 | slot="activator" | 343 | slot="activator" |
| 344 | style="cursor:pointer; width:25px; height:25px; " | 344 | style="cursor:pointer; width:25px; height:25px; " |
| 345 | class="mr-3" | 345 | class="mr-3" |
| 346 | @click="profile(props.item)" | 346 | @click="profile(props.item)" |
| 347 | src="/static/icon/view.png" | 347 | src="/static/icon/view.png" |
| 348 | /> | 348 | /> |
| 349 | <span>View</span> | 349 | <span>View</span> |
| 350 | </v-tooltip> | 350 | </v-tooltip> |
| 351 | <v-tooltip top> | 351 | <v-tooltip top> |
| 352 | <img | 352 | <img |
| 353 | slot="activator" | 353 | slot="activator" |
| 354 | style="cursor:pointer; width:20px; height:18px; " | 354 | style="cursor:pointer; width:20px; height:18px; " |
| 355 | class="mr-3" | 355 | class="mr-3" |
| 356 | @click="editItem(props.item)" | 356 | @click="editItem(props.item)" |
| 357 | src="/static/icon/edit.png" | 357 | src="/static/icon/edit.png" |
| 358 | /> | 358 | /> |
| 359 | <span>Edit</span> | 359 | <span>Edit</span> |
| 360 | </v-tooltip> | 360 | </v-tooltip> |
| 361 | <v-tooltip top> | 361 | <v-tooltip top> |
| 362 | <img | 362 | <img |
| 363 | slot="activator" | 363 | slot="activator" |
| 364 | style="cursor:pointer; width:20px; height:20px; " | 364 | style="cursor:pointer; width:20px; height:20px; " |
| 365 | @click="deleteItem(props.item)" | 365 | @click="deleteItem(props.item)" |
| 366 | src="/static/icon/delete.png" | 366 | src="/static/icon/delete.png" |
| 367 | /> | 367 | /> |
| 368 | <span>Delete</span> | 368 | <span>Delete</span> |
| 369 | </v-tooltip> | 369 | </v-tooltip> |
| 370 | </span> | 370 | </span> |
| 371 | </td> | 371 | </td> |
| 372 | </tr> | 372 | </tr> |
| 373 | </template> | 373 | </template> |
| 374 | <v-alert | 374 | <v-alert |
| 375 | slot="no-results" | 375 | slot="no-results" |
| 376 | :value="true" | 376 | :value="true" |
| 377 | color="error" | 377 | color="error" |
| 378 | icon="warning" | 378 | icon="warning" |
| 379 | >Your search for "{{ search }}" found no results.</v-alert> | 379 | >Your search for "{{ search }}" found no results.</v-alert> |
| 380 | </v-data-table> | 380 | </v-data-table> |
| 381 | 381 | ||
| 382 | <!-- ****** ADD Issue ****** --> | 382 | <!-- ****** ADD Issue ****** --> |
| 383 | <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog" persistent> | 383 | <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog" persistent> |
| 384 | <v-card flat class="card-style pa-2" dark> | 384 | <v-card flat class="Card-style pa-2"> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs12> | 386 | <v-flex xs12> |
| 387 | <label class="title text-xs-center">Add Issue</label> | 387 | <label class="title text-xs-center">Add Issue</label> |
| 388 | <v-icon size="24" class="right" @click="closeAddIssueModel">cancel</v-icon> | 388 | <v-icon size="24" class="right" @click="closeAddIssueModel">cancel</v-icon> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | <v-form ref="form" v-model="valid" lazy-validation> | 391 | <v-form ref="form" v-model="valid" lazy-validation> |
| 392 | <v-container fluid> | 392 | <v-container fluid> |
| 393 | <v-flex xs12> | 393 | <v-flex xs12> |
| 394 | <v-layout> | 394 | <v-layout> |
| 395 | <v-flex xs4 class="pt-4 subheading"> | 395 | <v-flex xs4 class="pt-4 subheading"> |
| 396 | <label class="right">Library ID:</label> | 396 | <label class="right">Library ID:</label> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | <v-flex xs7 class="ml-3"> | 398 | <v-flex xs7 class="ml-3"> |
| 399 | <v-text-field | 399 | <v-text-field |
| 400 | v-model="libraryID" | 400 | v-model="libraryID" |
| 401 | placeholder="fill your Library ID" | 401 | placeholder="fill your Library ID" |
| 402 | :rules="libraryIDRules" | 402 | :rules="libraryIDRules" |
| 403 | required | 403 | required |
| 404 | ></v-text-field> | 404 | ></v-text-field> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | </v-layout> | 406 | </v-layout> |
| 407 | </v-flex> | 407 | </v-flex> |
| 408 | <v-flex xs12> | 408 | <v-flex xs12> |
| 409 | <v-layout> | 409 | <v-layout> |
| 410 | <v-flex xs4 class="pt-4 subheading"> | 410 | <v-flex xs4 class="pt-4 subheading"> |
| 411 | <label class="right">Book:</label> | 411 | <label class="right">Book:</label> |
| 412 | </v-flex> | 412 | </v-flex> |
| 413 | <v-flex xs7 class="ml-3"> | 413 | <v-flex xs7 class="ml-3"> |
| 414 | <v-select | 414 | <v-select |
| 415 | label="Select Book Name" | 415 | label="Select Book Name" |
| 416 | :rules="bookRules" | 416 | :rules="bookRules" |
| 417 | :items="books" | 417 | :items="books" |
| 418 | item-text="name" | 418 | item-text="name" |
| 419 | item-value="_id" | 419 | item-value="_id" |
| 420 | v-model="bookId" | 420 | v-model="bookId" |
| 421 | @change="getParticularBookData(bookId)" | 421 | @change="getParticularBookData(bookId)" |
| 422 | required | 422 | required |
| 423 | ></v-select> | 423 | ></v-select> |
| 424 | </v-flex> | 424 | </v-flex> |
| 425 | </v-layout> | 425 | </v-layout> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | <v-flex xs12> | 427 | <v-flex xs12> |
| 428 | <v-layout> | 428 | <v-layout> |
| 429 | <v-flex xs4 class="pt-4 subheading"> | 429 | <v-flex xs4 class="pt-4 subheading"> |
| 430 | <label class="right">Author:</label> | 430 | <label class="right">Author:</label> |
| 431 | </v-flex> | 431 | </v-flex> |
| 432 | <v-flex xs7 class="ml-3"> | 432 | <v-flex xs7 class="ml-3"> |
| 433 | <v-text-field | 433 | <v-text-field |
| 434 | placeholder="fill your Author" | 434 | placeholder="fill your Author" |
| 435 | :rules="authorRules" | 435 | :rules="authorRules" |
| 436 | v-model="addIssue.author" | 436 | v-model="addIssue.author" |
| 437 | ></v-text-field> | 437 | ></v-text-field> |
| 438 | </v-flex> | 438 | </v-flex> |
| 439 | </v-layout> | 439 | </v-layout> |
| 440 | </v-flex> | 440 | </v-flex> |
| 441 | <v-flex xs12> | 441 | <v-flex xs12> |
| 442 | <v-layout> | 442 | <v-layout> |
| 443 | <v-flex xs4 class="pt-4 subheading"> | 443 | <v-flex xs4 class="pt-4 subheading"> |
| 444 | <label class="right">Subject Code:</label> | 444 | <label class="right">Subject Code:</label> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | <v-flex xs7 class="ml-3"> | 446 | <v-flex xs7 class="ml-3"> |
| 447 | <v-text-field | 447 | <v-text-field |
| 448 | placeholder="fill your Subject Code" | 448 | placeholder="fill your Subject Code" |
| 449 | :rules="subjectCodeRules" | 449 | :rules="subjectCodeRules" |
| 450 | v-model="addIssue.subjectCode" | 450 | v-model="addIssue.subjectCode" |
| 451 | ></v-text-field> | 451 | ></v-text-field> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | </v-layout> | 453 | </v-layout> |
| 454 | </v-flex> | 454 | </v-flex> |
| 455 | <v-flex xs12> | 455 | <v-flex xs12> |
| 456 | <v-layout> | 456 | <v-layout> |
| 457 | <v-flex xs4 class="pt-4 subheading"> | 457 | <v-flex xs4 class="pt-4 subheading"> |
| 458 | <label class="right">Serial No:</label> | 458 | <label class="right">Serial No:</label> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | <v-flex xs7 class="ml-3"> | 460 | <v-flex xs7 class="ml-3"> |
| 461 | <v-text-field | 461 | <v-text-field |
| 462 | placeholder="fill your Serial No" | 462 | placeholder="fill your Serial No" |
| 463 | :rules="authorRules" | 463 | :rules="authorRules" |
| 464 | v-model="serialNo" | 464 | v-model="serialNo" |
| 465 | ></v-text-field> | 465 | ></v-text-field> |
| 466 | </v-flex> | 466 | </v-flex> |
| 467 | </v-layout> | 467 | </v-layout> |
| 468 | </v-flex> | 468 | </v-flex> |
| 469 | <v-flex xs12> | 469 | <v-flex xs12> |
| 470 | <v-layout> | 470 | <v-layout> |
| 471 | <v-flex xs4 class="pt-4 subheading"> | 471 | <v-flex xs4 class="pt-4 subheading"> |
| 472 | <label class="right">Due Date:</label> | 472 | <label class="right">Due Date:</label> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | <v-flex xs7 class="ml-3"> | 474 | <v-flex xs7 class="ml-3"> |
| 475 | <v-menu | 475 | <v-menu |
| 476 | ref="menu2" | 476 | ref="menu2" |
| 477 | :close-on-content-click="false" | 477 | :close-on-content-click="false" |
| 478 | v-model="menu2" | 478 | v-model="menu2" |
| 479 | :nudge-right="40" | 479 | :nudge-right="40" |
| 480 | :return-value.sync="date" | 480 | :return-value.sync="date" |
| 481 | lazy | 481 | lazy |
| 482 | transition="scale-transition" | 482 | transition="scale-transition" |
| 483 | offset-y | 483 | offset-y |
| 484 | full-width | 484 | full-width |
| 485 | min-width="290px" | 485 | min-width="290px" |
| 486 | > | 486 | > |
| 487 | <v-text-field | 487 | <v-text-field |
| 488 | slot="activator" | 488 | slot="activator" |
| 489 | v-model="date" | 489 | v-model="date" |
| 490 | label="Select Due Date" | 490 | label="Select Due Date" |
| 491 | append-icon="event" | 491 | append-icon="event" |
| 492 | :rules="dueDateRule" | 492 | :rules="dueDateRule" |
| 493 | readonly | 493 | readonly |
| 494 | ></v-text-field> | 494 | ></v-text-field> |
| 495 | <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> | 495 | <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> |
| 496 | </v-menu> | 496 | </v-menu> |
| 497 | </v-flex> | 497 | </v-flex> |
| 498 | </v-layout> | 498 | </v-layout> |
| 499 | </v-flex> | 499 | </v-flex> |
| 500 | <v-flex xs12> | 500 | <v-flex xs12> |
| 501 | <v-layout> | 501 | <v-layout> |
| 502 | <v-flex xs4 class="pt-4 subheading"> | 502 | <v-flex xs4 class="pt-4 subheading"> |
| 503 | <label class="right">Note:</label> | 503 | <label class="right">Note:</label> |
| 504 | </v-flex> | 504 | </v-flex> |
| 505 | <v-flex xs7 class="ml-3"> | 505 | <v-flex xs7 class="ml-3"> |
| 506 | <v-text-field placeholder="fill your Note" v-model="note"></v-text-field> | 506 | <v-text-field placeholder="fill your Note" v-model="note"></v-text-field> |
| 507 | </v-flex> | 507 | </v-flex> |
| 508 | </v-layout> | 508 | </v-layout> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | <v-layout> | 510 | <v-layout> |
| 511 | <v-flex xs12> | 511 | <v-flex xs12> |
| 512 | <v-card-actions> | 512 | <v-card-actions> |
| 513 | <v-spacer></v-spacer> | 513 | <v-spacer></v-spacer> |
| 514 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 514 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 515 | <v-btn | 515 | <v-btn |
| 516 | @click="submit" | 516 | @click="submit" |
| 517 | round | 517 | round |
| 518 | dark | 518 | dark |
| 519 | :loading="loading" | 519 | :loading="loading" |
| 520 | class="add-button" | 520 | class="add-button" |
| 521 | :disabled="disable" | 521 | :disabled="disable" |
| 522 | >Add</v-btn> | 522 | >Add</v-btn> |
| 523 | </v-card-actions> | 523 | </v-card-actions> |
| 524 | </v-flex> | 524 | </v-flex> |
| 525 | </v-layout> | 525 | </v-layout> |
| 526 | </v-container> | 526 | </v-container> |
| 527 | </v-form> | 527 | </v-form> |
| 528 | </v-card> | 528 | </v-card> |
| 529 | </v-dialog> | 529 | </v-dialog> |
| 530 | <div class="loader" v-if="showLoader"> | 530 | <div class="loader" v-if="showLoader"> |
| 531 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 531 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 532 | </div> | 532 | </div> |
| 533 | <v-snackbar | 533 | <v-snackbar |
| 534 | :timeout="timeout" | 534 | :timeout="timeout" |
| 535 | :top="y === 'top'" | 535 | :top="y === 'top'" |
| 536 | :right="x === 'right'" | 536 | :right="x === 'right'" |
| 537 | :vertical="mode === 'vertical'" | 537 | :vertical="mode === 'vertical'" |
| 538 | v-model="snackbar" | 538 | v-model="snackbar" |
| 539 | :color="color" | 539 | :color="color" |
| 540 | >{{ text }}</v-snackbar> | 540 | >{{ text }}</v-snackbar> |
| 541 | </v-container> | 541 | </v-container> |
| 542 | </template> | 542 | </template> |
| 543 | 543 | ||
| 544 | <script> | 544 | <script> |
| 545 | import http from "@/Services/http.js"; | 545 | import http from "@/Services/http.js"; |
| 546 | import moment from "moment"; | 546 | import moment from "moment"; |
| 547 | 547 | ||
| 548 | export default { | 548 | export default { |
| 549 | data: () => ({ | 549 | data: () => ({ |
| 550 | snackbar: false, | 550 | snackbar: false, |
| 551 | date: null, | 551 | date: null, |
| 552 | menu1: false, | 552 | menu1: false, |
| 553 | menu2: false, | 553 | menu2: false, |
| 554 | color: "", | 554 | color: "", |
| 555 | show: true, | 555 | show: true, |
| 556 | showSearch: false, | 556 | showSearch: false, |
| 557 | dueDate: null, | 557 | dueDate: null, |
| 558 | y: "top", | 558 | y: "top", |
| 559 | x: "right", | 559 | x: "right", |
| 560 | mode: "", | 560 | mode: "", |
| 561 | timeout: 10000, | 561 | timeout: 10000, |
| 562 | text: "", | 562 | text: "", |
| 563 | libraryId: "", | 563 | libraryId: "", |
| 564 | loading: false, | 564 | loading: false, |
| 565 | loadingSearch: false, | 565 | loadingSearch: false, |
| 566 | date: null, | 566 | date: null, |
| 567 | search: "", | 567 | search: "", |
| 568 | addIssueDialog: false, | 568 | addIssueDialog: false, |
| 569 | viewIssueDialog: false, | 569 | viewIssueDialog: false, |
| 570 | showLoader: false, | 570 | showLoader: false, |
| 571 | editIssueDialog: false, | 571 | editIssueDialog: false, |
| 572 | dialog1: false, | 572 | dialog1: false, |
| 573 | valid: true, | 573 | valid: true, |
| 574 | isActive: true, | 574 | isActive: true, |
| 575 | newActive: false, | 575 | newActive: false, |
| 576 | addclass: [], | 576 | addclass: [], |
| 577 | addSection: [], | 577 | addSection: [], |
| 578 | pagination: { | 578 | pagination: { |
| 579 | rowsPerPage: 10, | 579 | rowsPerPage: 10, |
| 580 | }, | 580 | }, |
| 581 | libraryIDRules: [(v) => !!v || " Library ID is required"], | 581 | libraryIDRules: [(v) => !!v || " Library ID is required"], |
| 582 | bookRules: [(v) => !!v || " book Name is required"], | 582 | bookRules: [(v) => !!v || " book Name is required"], |
| 583 | authorRules: [(v) => !!v || "Author Name is required"], | 583 | authorRules: [(v) => !!v || "Author Name is required"], |
| 584 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], | 584 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], |
| 585 | authorRules: [(v) => !!v || "Author is required"], | 585 | authorRules: [(v) => !!v || "Author is required"], |
| 586 | noteRules: [(v) => !!v || "Note is required"], | 586 | noteRules: [(v) => !!v || "Note is required"], |
| 587 | dueDateRule: [(v) => !!v || "Due Date is required"], | 587 | dueDateRule: [(v) => !!v || "Due Date is required"], |
| 588 | headers: [ | 588 | headers: [ |
| 589 | { | 589 | { |
| 590 | align: "justify-center", | 590 | align: "justify-center", |
| 591 | text: "No", | 591 | text: "No", |
| 592 | sortable: false, | 592 | sortable: false, |
| 593 | value: "No", | 593 | value: "No", |
| 594 | }, | 594 | }, |
| 595 | { text: "Book", vaue: "name", sortable: false, align: "center" }, | 595 | { text: "Book", vaue: "name", sortable: false, align: "center" }, |
| 596 | { | 596 | { |
| 597 | text: "Serial Number", | 597 | text: "Serial Number", |
| 598 | value: "serialNumber", | 598 | value: "serialNumber", |
| 599 | sortable: false, | 599 | sortable: false, |
| 600 | align: "center", | 600 | align: "center", |
| 601 | }, | 601 | }, |
| 602 | { | 602 | { |
| 603 | text: "Issue Date", | 603 | text: "Issue Date", |
| 604 | value: "created", | 604 | value: "created", |
| 605 | sortable: false, | 605 | sortable: false, |
| 606 | align: "center", | 606 | align: "center", |
| 607 | }, | 607 | }, |
| 608 | { | 608 | { |
| 609 | text: "Due Date", | 609 | text: "Due Date", |
| 610 | value: "dueDate", | 610 | value: "dueDate", |
| 611 | sortable: false, | 611 | sortable: false, |
| 612 | align: "center", | 612 | align: "center", |
| 613 | }, | 613 | }, |
| 614 | { | 614 | { |
| 615 | text: "Status", | 615 | text: "Status", |
| 616 | value: "status", | 616 | value: "status", |
| 617 | sortable: false, | 617 | sortable: false, |
| 618 | align: "center", | 618 | align: "center", |
| 619 | }, | 619 | }, |
| 620 | { text: "Action", value: "", sortable: false, align: "center" }, | 620 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 621 | ], | 621 | ], |
| 622 | desserts: [], | 622 | desserts: [], |
| 623 | addIssue: {}, | 623 | addIssue: {}, |
| 624 | bookId: "", | 624 | bookId: "", |
| 625 | libraryID: "", | 625 | libraryID: "", |
| 626 | serialNo: "", | 626 | serialNo: "", |
| 627 | note: "", | 627 | note: "", |
| 628 | editedItem: {}, | 628 | editedItem: {}, |
| 629 | books: [], | 629 | books: [], |
| 630 | token: "", | 630 | token: "", |
| 631 | disable: false, | 631 | disable: false, |
| 632 | }), | 632 | }), |
| 633 | watch: { | 633 | watch: { |
| 634 | addIssueDialog: function (val) { | 634 | addIssueDialog: function (val) { |
| 635 | if (!val) { | 635 | if (!val) { |
| 636 | this.addIssue = []; | 636 | this.addIssue = []; |
| 637 | this.libraryID = ""; | 637 | this.libraryID = ""; |
| 638 | this.bookId = ""; | 638 | this.bookId = ""; |
| 639 | this.serialNo = ""; | 639 | this.serialNo = ""; |
| 640 | this.menu2 = false; | 640 | this.menu2 = false; |
| 641 | this.date = null; | 641 | this.date = null; |
| 642 | this.note = ""; | 642 | this.note = ""; |
| 643 | } | 643 | } |
| 644 | }, | 644 | }, |
| 645 | }, | 645 | }, |
| 646 | methods: { | 646 | methods: { |
| 647 | dates: function (date) { | 647 | dates: function (date) { |
| 648 | return moment(date).format("MMMM DD, YYYY"); | 648 | return moment(date).format("MMMM DD, YYYY"); |
| 649 | }, | 649 | }, |
| 650 | pickFile() { | 650 | pickFile() { |
| 651 | this.$refs.image.click(); | 651 | this.$refs.image.click(); |
| 652 | }, | 652 | }, |
| 653 | getIssueList() { | 653 | getIssueList() { |
| 654 | this.showLoader = true; | 654 | this.showLoader = true; |
| 655 | this.loadingSearch = true; | 655 | this.loadingSearch = true; |
| 656 | if (this.libraryID) { | 656 | if (this.libraryID) { |
| 657 | this.libraryId = this.libraryID; | 657 | this.libraryId = this.libraryID; |
| 658 | } | 658 | } |
| 659 | http() | 659 | http() |
| 660 | .get( | 660 | .get( |
| 661 | "/getBooksIssueList", | 661 | "/getBooksIssueList", |
| 662 | { | 662 | { |
| 663 | params: { | 663 | params: { |
| 664 | libraryId: this.libraryId, | 664 | libraryId: this.libraryId, |
| 665 | schoolId: this.$store.state.schoolId, | 665 | schoolId: this.$store.state.schoolId, |
| 666 | }, | 666 | }, |
| 667 | }, | 667 | }, |
| 668 | { | 668 | { |
| 669 | headers: { Authorization: "Bearer " + this.token }, | 669 | headers: { Authorization: "Bearer " + this.token }, |
| 670 | } | 670 | } |
| 671 | ) | 671 | ) |
| 672 | .then((response) => { | 672 | .then((response) => { |
| 673 | this.desserts = response.data.data; | 673 | this.desserts = response.data.data; |
| 674 | this.showLoader = false; | 674 | this.showLoader = false; |
| 675 | this.loadingSearch = false; | 675 | this.loadingSearch = false; |
| 676 | }) | 676 | }) |
| 677 | .catch((error) => { | 677 | .catch((error) => { |
| 678 | this.showLoader = false; | 678 | this.showLoader = false; |
| 679 | this.loadingSearch = false; | 679 | this.loadingSearch = false; |
| 680 | this.snackbar = true; | 680 | this.snackbar = true; |
| 681 | this.text = error.response.data.message; | 681 | this.text = error.response.data.message; |
| 682 | if (error.response.status === 401) { | 682 | if (error.response.status === 401) { |
| 683 | this.$router.replace({ path: "/" }); | 683 | this.$router.replace({ path: "/" }); |
| 684 | this.$store.dispatch("setToken", null); | 684 | this.$store.dispatch("setToken", null); |
| 685 | this.$store.dispatch("Id", null); | 685 | this.$store.dispatch("Id", null); |
| 686 | this.$store.dispatch("Role", null); | 686 | this.$store.dispatch("Role", null); |
| 687 | } | 687 | } |
| 688 | }); | 688 | }); |
| 689 | }, | 689 | }, |
| 690 | editItem(item) { | 690 | editItem(item) { |
| 691 | this.editedIndex = this.desserts.indexOf(item); | 691 | this.editedIndex = this.desserts.indexOf(item); |
| 692 | this.editedItem = Object.assign({}, item); | 692 | this.editedItem = Object.assign({}, item); |
| 693 | this.editedItem.name = item.bookId.name; | 693 | this.editedItem.name = item.bookId.name; |
| 694 | this.editedItem.status = item.bookId.status; | 694 | this.editedItem.status = item.bookId.status; |
| 695 | this.editedItem.dueDate = | 695 | this.editedItem.dueDate = |
| 696 | this.editedItem.dueDate != undefined | 696 | this.editedItem.dueDate != undefined |
| 697 | ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) | 697 | ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) |
| 698 | : (this.editedItem.dueDate = ""); | 698 | : (this.editedItem.dueDate = ""); |
| 699 | this.editIssueDialog = true; | 699 | this.editIssueDialog = true; |
| 700 | }, | 700 | }, |
| 701 | profile(item) { | 701 | profile(item) { |
| 702 | this.editedIndex = this.desserts.indexOf(item); | 702 | this.editedIndex = this.desserts.indexOf(item); |
| 703 | this.editedItem = Object.assign({}, item); | 703 | this.editedItem = Object.assign({}, item); |
| 704 | this.editedItem.name = item.bookId.name; | 704 | this.editedItem.name = item.bookId.name; |
| 705 | this.editedItem.status = item.bookId.status; | 705 | this.editedItem.status = item.bookId.status; |
| 706 | 706 | ||
| 707 | this.viewIssueDialog = true; | 707 | this.viewIssueDialog = true; |
| 708 | }, | 708 | }, |
| 709 | deleteItem(item) { | 709 | deleteItem(item) { |
| 710 | let deleteParticularIssue = { | 710 | let deleteParticularIssue = { |
| 711 | bookIssueId: item._id, | 711 | bookIssueId: item._id, |
| 712 | }; | 712 | }; |
| 713 | http() | 713 | http() |
| 714 | .delete( | 714 | .delete( |
| 715 | "/deleteBookIssue", | 715 | "/deleteBookIssue", |
| 716 | confirm("Are you sure you want to delete this?") && { | 716 | confirm("Are you sure you want to delete this?") && { |
| 717 | params: deleteParticularIssue, | 717 | params: deleteParticularIssue, |
| 718 | } | 718 | } |
| 719 | ) | 719 | ) |
| 720 | .then((response) => { | 720 | .then((response) => { |
| 721 | this.snackbar = true; | 721 | this.snackbar = true; |
| 722 | this.text = "Delete Successfully"; | 722 | this.text = "Delete Successfully"; |
| 723 | this.getIssueList(); | 723 | this.getIssueList(); |
| 724 | if (this.libraryID) { | 724 | if (this.libraryID) { |
| 725 | this.libraryId = this.libraryID; | 725 | this.libraryId = this.libraryID; |
| 726 | } | 726 | } |
| 727 | if (this.libraryId) { | 727 | if (this.libraryId) { |
| 728 | this.libraryId = this.libraryId; | 728 | this.libraryId = this.libraryId; |
| 729 | } | 729 | } |
| 730 | this.snackbar = true; | 730 | this.snackbar = true; |
| 731 | this.text = response.data.message; | 731 | this.text = response.data.message; |
| 732 | this.color = "green"; | 732 | this.color = "green"; |
| 733 | this.loading = false; | 733 | this.loading = false; |
| 734 | }) | 734 | }) |
| 735 | .catch((error) => { | 735 | .catch((error) => { |
| 736 | // console.log(error); | 736 | // console.log(error); |
| 737 | this.snackbar = true; | 737 | this.snackbar = true; |
| 738 | this.text = error.response.data.message; | 738 | this.text = error.response.data.message; |
| 739 | this.color = "red"; | 739 | this.color = "red"; |
| 740 | }); | 740 | }); |
| 741 | }, | 741 | }, |
| 742 | returnBook(item) { | 742 | returnBook(item) { |
| 743 | let returnBook = { | 743 | let returnBook = { |
| 744 | bookIssueId: item._id, | 744 | bookIssueId: item._id, |
| 745 | }; | 745 | }; |
| 746 | http() | 746 | http() |
| 747 | .put( | 747 | .put( |
| 748 | "/returnBook", | 748 | "/returnBook", |
| 749 | confirm("Are you sure you want to return this?") && returnBook | 749 | confirm("Are you sure you want to return this?") && returnBook |
| 750 | ) | 750 | ) |
| 751 | .then((response) => { | 751 | .then((response) => { |
| 752 | this.snackbar = true; | 752 | this.snackbar = true; |
| 753 | this.text = "Successfully return Issue a Book "; | 753 | this.text = "Successfully return Issue a Book "; |
| 754 | this.getIssueList(); | 754 | this.getIssueList(); |
| 755 | }) | 755 | }) |
| 756 | .catch((error) => {}); | 756 | .catch((error) => {}); |
| 757 | }, | 757 | }, |
| 758 | close() { | 758 | close() { |
| 759 | this.editIssueDialog = false; | 759 | this.editIssueDialog = false; |
| 760 | }, | 760 | }, |
| 761 | close1() { | 761 | close1() { |
| 762 | this.viewIssueDialog = false; | 762 | this.viewIssueDialog = false; |
| 763 | }, | 763 | }, |
| 764 | closeAddIssueModel() { | 764 | closeAddIssueModel() { |
| 765 | this.addIssueDialog = false; | 765 | this.addIssueDialog = false; |
| 766 | this.desserts = []; | 766 | this.desserts = []; |
| 767 | this.addIssue = []; | 767 | this.addIssue = []; |
| 768 | this.libraryID = ""; | 768 | this.libraryID = ""; |
| 769 | this.bookId = ""; | 769 | this.bookId = ""; |
| 770 | this.serialNo = ""; | 770 | this.serialNo = ""; |
| 771 | this.menu2 = false; | 771 | this.menu2 = false; |
| 772 | this.date = null; | 772 | this.date = null; |
| 773 | this.note = ""; | 773 | this.note = ""; |
| 774 | }, | 774 | }, |
| 775 | submit() { | 775 | submit() { |
| 776 | if (this.$refs.form.validate()) { | 776 | if (this.$refs.form.validate()) { |
| 777 | let createBook = { | 777 | let createBook = { |
| 778 | bookId: this.bookId, | 778 | bookId: this.bookId, |
| 779 | author: this.addIssue.author, | 779 | author: this.addIssue.author, |
| 780 | subjectCode: this.addIssue.subjectCode, | 780 | subjectCode: this.addIssue.subjectCode, |
| 781 | libraryId: this.libraryID, | 781 | libraryId: this.libraryID, |
| 782 | serialNumber: this.serialNo, | 782 | serialNumber: this.serialNo, |
| 783 | note: this.note, | 783 | note: this.note, |
| 784 | dueDate: this.date, | 784 | dueDate: this.date, |
| 785 | schoolId: this.$store.state.schoolId, | 785 | schoolId: this.$store.state.schoolId, |
| 786 | }; | 786 | }; |
| 787 | this.loading = true; | 787 | this.loading = true; |
| 788 | http() | 788 | http() |
| 789 | .post("/createBookIssue", createBook) | 789 | .post("/createBookIssue", createBook) |
| 790 | .then((response) => { | 790 | .then((response) => { |
| 791 | this.getIssueList(); | 791 | this.getIssueList(); |
| 792 | this.snackbar = true; | 792 | this.snackbar = true; |
| 793 | this.text = response.data.message; | 793 | this.text = response.data.message; |
| 794 | this.addIssueDialog = false; | 794 | this.addIssueDialog = false; |
| 795 | this.color = "green"; | 795 | this.color = "green"; |
| 796 | this.loading = false; | 796 | this.loading = false; |
| 797 | this.clear(); | 797 | this.clear(); |
| 798 | }) | 798 | }) |
| 799 | .catch((error) => { | 799 | .catch((error) => { |
| 800 | this.snackbar = true; | 800 | this.snackbar = true; |
| 801 | this.text = error.response.data.message; | 801 | this.text = error.response.data.message; |
| 802 | this.color = "red"; | 802 | this.color = "red"; |
| 803 | this.loading = false; | 803 | this.loading = false; |
| 804 | }); | 804 | }); |
| 805 | } | 805 | } |
| 806 | }, | 806 | }, |
| 807 | clear() { | 807 | clear() { |
| 808 | this.$refs.form.reset(); | 808 | this.$refs.form.reset(); |
| 809 | this.disable = false; | 809 | this.disable = false; |
| 810 | }, | 810 | }, |
| 811 | save() { | 811 | save() { |
| 812 | this.editedItem.bookIssueId = this.editedItem._id; | 812 | this.editedItem.bookIssueId = this.editedItem._id; |
| 813 | this.editedItem.bookId = this.editedItem.bookId._id; | 813 | this.editedItem.bookId = this.editedItem.bookId._id; |
| 814 | http() | 814 | http() |
| 815 | .put("/updateBookIssue", this.editedItem) | 815 | .put("/updateBookIssue", this.editedItem) |
| 816 | .then((response) => { | 816 | .then((response) => { |
| 817 | this.editIssueDialog = false; | 817 | this.editIssueDialog = false; |
| 818 | this.snackbar = true; | 818 | this.snackbar = true; |
| 819 | this.text = "Successfully Edit Issue a Book"; | 819 | this.text = "Successfully Edit Issue a Book"; |
| 820 | this.color = "green"; | 820 | this.color = "green"; |
| 821 | this.getIssueList(); | 821 | this.getIssueList(); |
| 822 | this.close(); | 822 | this.close(); |
| 823 | }) | 823 | }) |
| 824 | .catch((error) => { | 824 | .catch((error) => { |
| 825 | this.snackbar = true; | 825 | this.snackbar = true; |
| 826 | this.text = error.response.data.message; | 826 | this.text = error.response.data.message; |
| 827 | this.color = "red"; | 827 | this.color = "red"; |
| 828 | }); | 828 | }); |
| 829 | }, | 829 | }, |
| 830 | getBookData() { | 830 | getBookData() { |
| 831 | this.showLoader = true; | 831 | this.showLoader = true; |
| 832 | http() | 832 | http() |
| 833 | .get("/getBooksList", { | 833 | .get("/getBooksList", { |
| 834 | params: { | 834 | params: { |
| 835 | schoolId: this.$store.state.schoolId, | 835 | schoolId: this.$store.state.schoolId, |
| 836 | }, | 836 | }, |
| 837 | headers: { Authorization: "Bearer " + this.token }, | 837 | headers: { Authorization: "Bearer " + this.token }, |
| 838 | }) | 838 | }) |
| 839 | .then((response) => { | 839 | .then((response) => { |
| 840 | this.books = response.data.data; | 840 | this.books = response.data.data; |
| 841 | this.showLoader = false; | 841 | this.showLoader = false; |
| 842 | }) | 842 | }) |
| 843 | .catch((error) => { | 843 | .catch((error) => { |
| 844 | this.showLoader = false; | 844 | this.showLoader = false; |
| 845 | if (error.response.status === 401) { | 845 | if (error.response.status === 401) { |
| 846 | this.$router.replace({ path: "/" }); | 846 | this.$router.replace({ path: "/" }); |
| 847 | this.$store.dispatch("setToken", null); | 847 | this.$store.dispatch("setToken", null); |
| 848 | this.$store.dispatch("Id", null); | 848 | this.$store.dispatch("Id", null); |
| 849 | } | 849 | } |
| 850 | }); | 850 | }); |
| 851 | }, | 851 | }, |
| 852 | getParticularBookData(books) { | 852 | getParticularBookData(books) { |
| 853 | for (let i = 0; i < this.books.length; i++) { | 853 | for (let i = 0; i < this.books.length; i++) { |
| 854 | if (books == this.books[i]._id) { | 854 | if (books == this.books[i]._id) { |
| 855 | if (this.books[i].remaining <= 0) { | 855 | if (this.books[i].remaining <= 0) { |
| 856 | this.snackbar = true; | 856 | this.snackbar = true; |
| 857 | this.text = "Book is unavailable"; | 857 | this.text = "Book is unavailable"; |
| 858 | this.color = "red"; | 858 | this.color = "red"; |
| 859 | this.disable = true; | 859 | this.disable = true; |
| 860 | } else if (this.books[i].remaining > 0) { | 860 | } else if (this.books[i].remaining > 0) { |
| 861 | this.disable = false; | 861 | this.disable = false; |
| 862 | } | 862 | } |
| 863 | this.addIssue = { | 863 | this.addIssue = { |
| 864 | author: this.books[i].author, | 864 | author: this.books[i].author, |
| 865 | subjectCode: this.books[i].subjectCode, | 865 | subjectCode: this.books[i].subjectCode, |
| 866 | }; | 866 | }; |
| 867 | } | 867 | } |
| 868 | } | 868 | } |
| 869 | this.addIssue.boojk = books; | 869 | this.addIssue.boojk = books; |
| 870 | }, | 870 | }, |
| 871 | displaySearch() { | 871 | displaySearch() { |
| 872 | (this.show = false), (this.showSearch = true); | 872 | (this.show = false), (this.showSearch = true); |
| 873 | }, | 873 | }, |
| 874 | closeSearch() { | 874 | closeSearch() { |
| 875 | this.showSearch = false; | 875 | this.showSearch = false; |
| 876 | this.show = true; | 876 | this.show = true; |
| 877 | this.search = ""; | 877 | this.search = ""; |
| 878 | }, | 878 | }, |
| 879 | }, | 879 | }, |
| 880 | mounted() { | 880 | mounted() { |
| 881 | this.token = this.$store.state.token; | 881 | this.token = this.$store.state.token; |
| 882 | this.getBookData(); | 882 | this.getBookData(); |
| 883 | }, | 883 | }, |
| 884 | }; | 884 | }; |
| 885 | </script> | 885 | </script> |
| 886 | <style scoped> | 886 | <style scoped> |
| 887 | .active { | 887 | .active { |
| 888 | background-color: gray; | 888 | background-color: gray; |
| 889 | color: white !important; | 889 | color: white !important; |
| 890 | } | 890 | } |
| 891 | .activebtn { | 891 | .activebtn { |
| 892 | color: black !important; | 892 | color: black !important; |
| 893 | } | 893 | } |
| 894 | </style> | 894 | </style> |
src/pages/Library/member.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <v-snackbar | 3 | <v-snackbar |
| 4 | :timeout="timeout" | 4 | :timeout="timeout" |
| 5 | :top="y === 'top'" | 5 | :top="y === 'top'" |
| 6 | :right="x === 'right'" | 6 | :right="x === 'right'" |
| 7 | :vertical="mode === 'vertical'" | 7 | :vertical="mode === 'vertical'" |
| 8 | v-model="snackbar" | 8 | v-model="snackbar" |
| 9 | color="success" | 9 | color="success" |
| 10 | >{{ text }}</v-snackbar> | 10 | >{{ text }}</v-snackbar> |
| 11 | 11 | ||
| 12 | <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> | 12 | <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> |
| 13 | 13 | ||
| 14 | <v-dialog v-model="dialogStudents" max-width="1100px" scrollable persistent> | 14 | <v-dialog v-model="dialogStudents" max-width="1100px" scrollable persistent> |
| 15 | <v-card> | 15 | <v-card> |
| 16 | <v-toolbar dark class="card-styles" flat> | 16 | <v-toolbar dark class="card-styles" flat> |
| 17 | <v-spacer></v-spacer> | 17 | <v-spacer></v-spacer> |
| 18 | <v-toolbar-title>View Student Profile</v-toolbar-title> | 18 | <v-toolbar-title>View Student Profile</v-toolbar-title> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <v-icon @click="closeViewStudent">close</v-icon> | 20 | <v-icon @click="closeViewStudent">close</v-icon> |
| 21 | </v-toolbar> | 21 | </v-toolbar> |
| 22 | <v-card-text style="height: 700px;"> | 22 | <v-card-text style="height: 700px;"> |
| 23 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 23 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 24 | <v-avatar size="160px"> | 24 | <v-avatar size="160px"> |
| 25 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 25 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 26 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 26 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-container grid-list-md> | 29 | <v-container grid-list-md> |
| 30 | <v-layout wrap> | 30 | <v-layout wrap> |
| 31 | <v-flex xs12> | 31 | <v-flex xs12> |
| 32 | <v-layout wrap> | 32 | <v-layout wrap> |
| 33 | <v-flex xs12 sm6> | 33 | <v-flex xs12 sm6> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs6 sm5> | 35 | <v-flex xs6 sm5> |
| 36 | <h5 class="right my-1"> | 36 | <h5 class="right my-1"> |
| 37 | <b>Full Name:</b> | 37 | <b>Full Name:</b> |
| 38 | </h5> | 38 | </h5> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex sm7 xs6> | 40 | <v-flex sm7 xs6> |
| 41 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 41 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | <v-flex xs12 sm6> | 45 | <v-flex xs12 sm6> |
| 46 | <v-layout> | 46 | <v-layout> |
| 47 | <v-flex xs6 sm4> | 47 | <v-flex xs6 sm4> |
| 48 | <h5 class="right my-1"> | 48 | <h5 class="right my-1"> |
| 49 | <b>Email:</b> | 49 | <b>Email:</b> |
| 50 | </h5> | 50 | </h5> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex sm8 xs6> | 52 | <v-flex sm8 xs6> |
| 53 | <h5 class="my-1 left">{{ editedItem.email }}</h5> | 53 | <h5 class="my-1 left">{{ editedItem.email }}</h5> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | <v-layout wrap> | 58 | <v-layout wrap> |
| 59 | <v-flex xs12 sm6> | 59 | <v-flex xs12 sm6> |
| 60 | <v-layout> | 60 | <v-layout> |
| 61 | <v-flex xs6 sm5> | 61 | <v-flex xs6 sm5> |
| 62 | <b> | 62 | <b> |
| 63 | <h5 class="right my-1"> | 63 | <h5 class="right my-1"> |
| 64 | <b>Gender:</b> | 64 | <b>Gender:</b> |
| 65 | </h5> | 65 | </h5> |
| 66 | </b> | 66 | </b> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex sm7 xs6> | 68 | <v-flex sm7 xs6> |
| 69 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> | 69 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-layout> | 71 | </v-layout> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs12 sm6> | 73 | <v-flex xs12 sm6> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs6 sm4> | 75 | <v-flex xs6 sm4> |
| 76 | <b> | 76 | <b> |
| 77 | <h5 class="right my-1"> | 77 | <h5 class="right my-1"> |
| 78 | <b>D.O.B:</b> | 78 | <b>D.O.B:</b> |
| 79 | </h5> | 79 | </h5> |
| 80 | </b> | 80 | </b> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm7 xs6> | 82 | <v-flex sm7 xs6> |
| 83 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 83 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | <v-layout wrap> | 88 | <v-layout wrap> |
| 89 | <v-flex xs12 sm6> | 89 | <v-flex xs12 sm6> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs6 sm5> | 91 | <v-flex xs6 sm5> |
| 92 | <b> | 92 | <b> |
| 93 | <h5 class="right my-1"> | 93 | <h5 class="right my-1"> |
| 94 | <b>Blood Group:</b> | 94 | <b>Blood Group:</b> |
| 95 | </h5> | 95 | </h5> |
| 96 | </b> | 96 | </b> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | <v-flex sm7 xs6> | 98 | <v-flex sm7 xs6> |
| 99 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> | 99 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | </v-layout> | 101 | </v-layout> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12 sm6> | 103 | <v-flex xs12 sm6> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs6 sm4> | 105 | <v-flex xs6 sm4> |
| 106 | <b> | 106 | <b> |
| 107 | <h5 class="right my-1"> | 107 | <h5 class="right my-1"> |
| 108 | <b>Allergies:</b> | 108 | <b>Allergies:</b> |
| 109 | </h5> | 109 | </h5> |
| 110 | </b> | 110 | </b> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | <v-flex sm8 xs6> | 112 | <v-flex sm8 xs6> |
| 113 | <h5 class="my-1">{{ editedItem.allergies }}</h5> | 113 | <h5 class="my-1">{{ editedItem.allergies }}</h5> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | </v-layout> | 117 | </v-layout> |
| 118 | <v-layout wrap> | 118 | <v-layout wrap> |
| 119 | <v-flex xs12 sm6> | 119 | <v-flex xs12 sm6> |
| 120 | <v-layout> | 120 | <v-layout> |
| 121 | <v-flex xs6 sm5> | 121 | <v-flex xs6 sm5> |
| 122 | <b> | 122 | <b> |
| 123 | <h5 class="right my-1"> | 123 | <h5 class="right my-1"> |
| 124 | <b>Height:</b> | 124 | <b>Height:</b> |
| 125 | </h5> | 125 | </h5> |
| 126 | </b> | 126 | </b> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm7 xs6> | 128 | <v-flex sm7 xs6> |
| 129 | <h5 class="my-1 left">{{ editedItem.height }}</h5> | 129 | <h5 class="my-1 left">{{ editedItem.height }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | <v-flex xs12 sm6> | 133 | <v-flex xs12 sm6> |
| 134 | <v-layout> | 134 | <v-layout> |
| 135 | <v-flex xs6 sm4> | 135 | <v-flex xs6 sm4> |
| 136 | <b> | 136 | <b> |
| 137 | <h5 class="right my-1"> | 137 | <h5 class="right my-1"> |
| 138 | <b>Weight:</b> | 138 | <b>Weight:</b> |
| 139 | </h5> | 139 | </h5> |
| 140 | </b> | 140 | </b> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | <v-flex sm8 xs6> | 142 | <v-flex sm8 xs6> |
| 143 | <h5 class="my-1">{{ editedItem.weight }}</h5> | 143 | <h5 class="my-1">{{ editedItem.weight }}</h5> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-layout> | 145 | </v-layout> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-layout wrap> | 148 | <v-layout wrap> |
| 149 | <v-flex xs12 sm6> | 149 | <v-flex xs12 sm6> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs6 sm5> | 151 | <v-flex xs6 sm5> |
| 152 | <b> | 152 | <b> |
| 153 | <h5 class="right my-1"> | 153 | <h5 class="right my-1"> |
| 154 | <b>City:</b> | 154 | <b>City:</b> |
| 155 | </h5> | 155 | </h5> |
| 156 | </b> | 156 | </b> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex sm7 xs6> | 158 | <v-flex sm7 xs6> |
| 159 | <h5 class="my-1 left">{{ editedItem.city }}</h5> | 159 | <h5 class="my-1 left">{{ editedItem.city }}</h5> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex xs12 sm6> | 163 | <v-flex xs12 sm6> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs6 sm4> | 165 | <v-flex xs6 sm4> |
| 166 | <b> | 166 | <b> |
| 167 | <h5 class="right my-1"> | 167 | <h5 class="right my-1"> |
| 168 | <b>State:</b> | 168 | <b>State:</b> |
| 169 | </h5> | 169 | </h5> |
| 170 | </b> | 170 | </b> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | <v-flex sm8 xs6> | 172 | <v-flex sm8 xs6> |
| 173 | <h5 class="my-1">{{ editedItem.state }}</h5> | 173 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | <v-layout wrap> | 178 | <v-layout wrap> |
| 179 | <v-flex xs12 sm6> | 179 | <v-flex xs12 sm6> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex xs6 sm5> | 181 | <v-flex xs6 sm5> |
| 182 | <b> | 182 | <b> |
| 183 | <h5 class="right my-1"> | 183 | <h5 class="right my-1"> |
| 184 | <b>Pincode:</b> | 184 | <b>Pincode:</b> |
| 185 | </h5> | 185 | </h5> |
| 186 | </b> | 186 | </b> |
| 187 | </v-flex> | 187 | </v-flex> |
| 188 | <v-flex sm7 xs6> | 188 | <v-flex sm7 xs6> |
| 189 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 189 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | </v-layout> | 191 | </v-layout> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | <v-flex xs12 sm5> | 193 | <v-flex xs12 sm5> |
| 194 | <v-layout> | 194 | <v-layout> |
| 195 | <v-flex xs6 sm5> | 195 | <v-flex xs6 sm5> |
| 196 | <b> | 196 | <b> |
| 197 | <h5 class="right my-1"> | 197 | <h5 class="right my-1"> |
| 198 | <b>Country:</b> | 198 | <b>Country:</b> |
| 199 | </h5> | 199 | </h5> |
| 200 | </b> | 200 | </b> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex sm7 xs6> | 202 | <v-flex sm7 xs6> |
| 203 | <h5 class="my-1">{{ editedItem.country }}</h5> | 203 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | <v-layout wrap> | 208 | <v-layout wrap> |
| 209 | <v-flex xs12 sm6> | 209 | <v-flex xs12 sm6> |
| 210 | <v-layout> | 210 | <v-layout> |
| 211 | <v-flex sm5 xs6> | 211 | <v-flex sm5 xs6> |
| 212 | <b> | 212 | <b> |
| 213 | <h5 class="right my-1"> | 213 | <h5 class="right my-1"> |
| 214 | <b>Mobile No:</b> | 214 | <b>Mobile No:</b> |
| 215 | </h5> | 215 | </h5> |
| 216 | </b> | 216 | </b> |
| 217 | </v-flex> | 217 | </v-flex> |
| 218 | <v-flex sm6 xs6> | 218 | <v-flex sm6 xs6> |
| 219 | <h5 class="my-1">{{ editedItem.mobile }}</h5> | 219 | <h5 class="my-1">{{ editedItem.mobile }}</h5> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | </v-layout> | 221 | </v-layout> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | <v-flex xs12 sm6> | 223 | <v-flex xs12 sm6> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs6 sm4> | 225 | <v-flex xs6 sm4> |
| 226 | <b> | 226 | <b> |
| 227 | <h5 class="right my-1"> | 227 | <h5 class="right my-1"> |
| 228 | <b>Library ID :</b> | 228 | <b>Library ID :</b> |
| 229 | </h5> | 229 | </h5> |
| 230 | </b> | 230 | </b> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex sm8 xs6> | 232 | <v-flex sm8 xs6> |
| 233 | <h5 class="my-1">{{ editedItem.libraryId }}</h5> | 233 | <h5 class="my-1">{{ editedItem.libraryId }}</h5> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | </v-layout> | 237 | </v-layout> |
| 238 | <v-layout wrap> | 238 | <v-layout wrap> |
| 239 | <v-flex xs12 sm5> | 239 | <v-flex xs12 sm5> |
| 240 | <v-layout> | 240 | <v-layout> |
| 241 | <v-flex xs6 sm6> | 241 | <v-flex xs6 sm6> |
| 242 | <b> | 242 | <b> |
| 243 | <h5 class="right my-1"> | 243 | <h5 class="right my-1"> |
| 244 | <b>Library Fee:</b> | 244 | <b>Library Fee:</b> |
| 245 | </h5> | 245 | </h5> |
| 246 | </b> | 246 | </b> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | <v-flex sm6 xs6> | 248 | <v-flex sm6 xs6> |
| 249 | <h5 class="my-1">{{ editedItem.libraryFee }}</h5> | 249 | <h5 class="my-1">{{ editedItem.libraryFee }}</h5> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs12 sm6> | 253 | <v-flex xs12 sm6> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs6 sm6> | 255 | <v-flex xs6 sm6> |
| 256 | <b> | 256 | <b> |
| 257 | <h5 class="my-1 right"> | 257 | <h5 class="my-1 right"> |
| 258 | <b>Academic Year:</b> | 258 | <b>Academic Year:</b> |
| 259 | </h5> | 259 | </h5> |
| 260 | </b> | 260 | </b> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | <v-flex sm5 xs6> | 262 | <v-flex sm5 xs6> |
| 263 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> | 263 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | </v-layout> | 265 | </v-layout> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-layout> | 267 | </v-layout> |
| 268 | <v-layout wrap> | 268 | <v-layout wrap> |
| 269 | <v-flex xs12 sm5> | 269 | <v-flex xs12 sm5> |
| 270 | <v-layout> | 270 | <v-layout> |
| 271 | <v-flex xs6 sm6> | 271 | <v-flex xs6 sm6> |
| 272 | <b> | 272 | <b> |
| 273 | <h5 class="my-1 right"> | 273 | <h5 class="my-1 right"> |
| 274 | <b>Medical Notes:</b> | 274 | <b>Medical Notes:</b> |
| 275 | </h5> | 275 | </h5> |
| 276 | </b> | 276 | </b> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-flex sm5 xs6> | 278 | <v-flex sm5 xs6> |
| 279 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> | 279 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | </v-layout> | 281 | </v-layout> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | <v-flex xs12 sm6> | 283 | <v-flex xs12 sm6> |
| 284 | <v-layout> | 284 | <v-layout> |
| 285 | <v-flex xs6 sm6> | 285 | <v-flex xs6 sm6> |
| 286 | <b> | 286 | <b> |
| 287 | <h5 class="right my-1"> | 287 | <h5 class="right my-1"> |
| 288 | <b>Roll No. :</b> | 288 | <b>Roll No. :</b> |
| 289 | </h5> | 289 | </h5> |
| 290 | </b> | 290 | </b> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | <v-flex sm6 xs8> | 292 | <v-flex sm6 xs8> |
| 293 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> | 293 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-layout wrap> | 298 | <v-layout wrap> |
| 299 | <v-flex xs12 sm5> | 299 | <v-flex xs12 sm5> |
| 300 | <v-layout> | 300 | <v-layout> |
| 301 | <v-flex xs6 sm6> | 301 | <v-flex xs6 sm6> |
| 302 | <b> | 302 | <b> |
| 303 | <h5 class="my-1 right"> | 303 | <h5 class="my-1 right"> |
| 304 | <b>present Address:</b> | 304 | <b>present Address:</b> |
| 305 | </h5> | 305 | </h5> |
| 306 | </b> | 306 | </b> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | <v-flex sm5 xs6> | 308 | <v-flex sm5 xs6> |
| 309 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 309 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | <v-flex xs12 sm6> | 313 | <v-flex xs12 sm6> |
| 314 | <v-layout> | 314 | <v-layout> |
| 315 | <v-flex xs6 sm6> | 315 | <v-flex xs6 sm6> |
| 316 | <b> | 316 | <b> |
| 317 | <h5 class="right my-1"> | 317 | <h5 class="right my-1"> |
| 318 | <b>present Address:</b> | 318 | <b>present Address:</b> |
| 319 | </h5> | 319 | </h5> |
| 320 | </b> | 320 | </b> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | <v-flex sm6 xs8> | 322 | <v-flex sm6 xs8> |
| 323 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 323 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | </v-layout> | 329 | </v-layout> |
| 330 | </v-container> | 330 | </v-container> |
| 331 | </v-card-text> | 331 | </v-card-text> |
| 332 | </v-card> | 332 | </v-card> |
| 333 | </v-dialog> | 333 | </v-dialog> |
| 334 | 334 | ||
| 335 | <!-- Edit Student Library Member Dialog --> | 335 | <!-- Edit Student Library Member Dialog --> |
| 336 | 336 | ||
| 337 | <v-dialog v-model="editStudentdialog" max-width="600px" scrollable persistent> | 337 | <v-dialog v-model="editStudentdialog" max-width="600px" scrollable persistent> |
| 338 | <v-card flat> | 338 | <v-card flat> |
| 339 | <v-toolbar dark class="card-styles" flat> | 339 | <v-toolbar dark class="card-styles" flat> |
| 340 | <v-spacer></v-spacer> | 340 | <v-spacer></v-spacer> |
| 341 | <v-toolbar-title> | 341 | <v-toolbar-title> |
| 342 | <h3>Edit Student Profile</h3> | 342 | <h3>Edit Student Profile</h3> |
| 343 | </v-toolbar-title> | 343 | </v-toolbar-title> |
| 344 | <v-spacer></v-spacer> | 344 | <v-spacer></v-spacer> |
| 345 | <v-icon @click="editStudentdialog = false">close</v-icon> | 345 | <v-icon @click="editStudentdialog = false">close</v-icon> |
| 346 | </v-toolbar> | 346 | </v-toolbar> |
| 347 | <v-card-text style="height: 426px;"> | 347 | <v-card-text style="height: 426px;"> |
| 348 | <v-form ref="form"> | 348 | <v-form ref="form"> |
| 349 | <v-container fluid> | 349 | <v-container fluid> |
| 350 | <v-layout> | 350 | <v-layout> |
| 351 | <v-flex | 351 | <v-flex |
| 352 | xs12 | 352 | xs12 |
| 353 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" | 353 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" |
| 354 | > | 354 | > |
| 355 | <v-avatar size="160px"> | 355 | <v-avatar size="160px"> |
| 356 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> | 356 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> |
| 357 | <img | 357 | <img |
| 358 | :src="editedItem.profilePicUrl" | 358 | :src="editedItem.profilePicUrl" |
| 359 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 359 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 360 | /> | 360 | /> |
| 361 | <img | 361 | <img |
| 362 | v-if="imageUrl" | 362 | v-if="imageUrl" |
| 363 | :src="imageUrl" | 363 | :src="imageUrl" |
| 364 | height="150" | 364 | height="150" |
| 365 | style="border-radius:50%; width:200px" | 365 | style="border-radius:50%; width:200px" |
| 366 | /> | 366 | /> |
| 367 | </v-avatar> | 367 | </v-avatar> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-layout> | 369 | </v-layout> |
| 370 | <v-layout wrap> | 370 | <v-layout wrap> |
| 371 | <v-flex xs12 sm12 md10> | 371 | <v-flex xs12 sm12 md10> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs4 class="pt-4 subheading"> | 373 | <v-flex xs4 class="pt-4 subheading"> |
| 374 | <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> | 374 | <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> |
| 375 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> | 375 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | <v-flex xs8 class="ml-3"> | 377 | <v-flex xs8 class="ml-3"> |
| 378 | <v-text-field | 378 | <v-text-field |
| 379 | v-model="editedItem.libraryId" | 379 | v-model="editedItem.libraryId" |
| 380 | placeholder="fill your Library ID" | 380 | placeholder="fill your Library ID" |
| 381 | ></v-text-field> | 381 | ></v-text-field> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | </v-layout> | 383 | </v-layout> |
| 384 | </v-flex> | 384 | </v-flex> |
| 385 | <v-flex xs12 sm12 md10> | 385 | <v-flex xs12 sm12 md10> |
| 386 | <v-layout> | 386 | <v-layout> |
| 387 | <v-flex xs4 class="pt-4 subheading"> | 387 | <v-flex xs4 class="pt-4 subheading"> |
| 388 | <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> | 388 | <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> |
| 389 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> | 389 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | <v-flex xs8 class="ml-3"> | 391 | <v-flex xs8 class="ml-3"> |
| 392 | <v-text-field | 392 | <v-text-field |
| 393 | v-model="editedItem.libraryFee" | 393 | v-model="editedItem.libraryFee" |
| 394 | placeholder="fill your Library Fee" | 394 | placeholder="fill your Library Fee" |
| 395 | ></v-text-field> | 395 | ></v-text-field> |
| 396 | </v-flex> | 396 | </v-flex> |
| 397 | </v-layout> | 397 | </v-layout> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | <v-layout> | 400 | <v-layout> |
| 401 | <v-flex xs12 sm12> | 401 | <v-flex xs12 sm12> |
| 402 | <v-layout class="right"> | 402 | <v-layout class="right"> |
| 403 | <v-flex xs6> | 403 | <v-flex xs6> |
| 404 | <v-btn | 404 | <v-btn |
| 405 | round | 405 | round |
| 406 | dark | 406 | dark |
| 407 | class="clear-button" | 407 | class="clear-button" |
| 408 | @click.native="closeEditStudentDialog" | 408 | @click.native="closeEditStudentDialog" |
| 409 | >Cancel</v-btn> | 409 | >Cancel</v-btn> |
| 410 | </v-flex> | 410 | </v-flex> |
| 411 | <v-flex xs6> | 411 | <v-flex xs6> |
| 412 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> | 412 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> |
| 413 | </v-flex> | 413 | </v-flex> |
| 414 | </v-layout> | 414 | </v-layout> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | </v-layout> | 416 | </v-layout> |
| 417 | </v-container> | 417 | </v-container> |
| 418 | </v-form> | 418 | </v-form> |
| 419 | </v-card-text> | 419 | </v-card-text> |
| 420 | </v-card> | 420 | </v-card> |
| 421 | </v-dialog> | 421 | </v-dialog> |
| 422 | <!-- Add Student Library Member Dialog --> | 422 | <!-- Add Student Library Member Dialog --> |
| 423 | 423 | ||
| 424 | <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary" persistent> | 424 | <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary" persistent> |
| 425 | <v-card flat class="card-style pa-2" dark> | 425 | <v-card flat class="Card-style pa-2"> |
| 426 | <v-layout> | 426 | <v-layout> |
| 427 | <v-flex xs12> | 427 | <v-flex xs12> |
| 428 | <label class="title text-xs-center">Add Library Member</label> | 428 | <label class="title text-xs-center">Add Library Member</label> |
| 429 | <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon> | 429 | <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | <v-card-text> | 432 | <v-card-text> |
| 433 | <v-layout wrap justify-center> | 433 | <v-layout wrap justify-center> |
| 434 | <v-flex xs12 sm12 md10> | 434 | <v-flex xs12 sm12 md10> |
| 435 | <v-form ref="form" v-model="valid" lazy-validation> | 435 | <v-form ref="form" v-model="valid" lazy-validation> |
| 436 | <v-layout> | 436 | <v-layout> |
| 437 | <v-flex xs4 class="pt-4 subheading"> | 437 | <v-flex xs4 class="pt-4 subheading"> |
| 438 | <label class="right pr-3">Library Id:</label> | 438 | <label class="right pr-3">Library Id:</label> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | <v-flex xs8> | 440 | <v-flex xs8> |
| 441 | <v-text-field | 441 | <v-text-field |
| 442 | v-model="addBook.libraryId" | 442 | v-model="addBook.libraryId" |
| 443 | :rules="libraryIdRules" | 443 | :rules="libraryIdRules" |
| 444 | type="number" | 444 | type="number" |
| 445 | placeholder="fill your Library ID" | 445 | placeholder="fill your Library ID" |
| 446 | ></v-text-field> | 446 | ></v-text-field> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | </v-layout> | 448 | </v-layout> |
| 449 | <v-layout> | 449 | <v-layout> |
| 450 | <v-flex xs4 class="pt-4 subheading"> | 450 | <v-flex xs4 class="pt-4 subheading"> |
| 451 | <label class="right pr-3">Library Fee:</label> | 451 | <label class="right pr-3">Library Fee:</label> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | <v-flex xs8> | 453 | <v-flex xs8> |
| 454 | <v-text-field | 454 | <v-text-field |
| 455 | v-model="addBook.libraryFee" | 455 | v-model="addBook.libraryFee" |
| 456 | type="number" | 456 | type="number" |
| 457 | :rules="libraryFeeRules" | 457 | :rules="libraryFeeRules" |
| 458 | placeholder="fill your Library Fee" | 458 | placeholder="fill your Library Fee" |
| 459 | ></v-text-field> | 459 | ></v-text-field> |
| 460 | </v-flex> | 460 | </v-flex> |
| 461 | </v-layout> | 461 | </v-layout> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs12 sm12> | 463 | <v-flex xs12 sm12> |
| 464 | <v-layout class="right"> | 464 | <v-layout class="right"> |
| 465 | <v-btn | 465 | <v-btn |
| 466 | round | 466 | round |
| 467 | dark | 467 | dark |
| 468 | class="clear-button" | 468 | class="clear-button" |
| 469 | @click.native="addLibrary = false" | 469 | @click.native="addLibrary = false" |
| 470 | >Cancel</v-btn> | 470 | >Cancel</v-btn> |
| 471 | <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn> | 471 | <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn> |
| 472 | </v-layout> | 472 | </v-layout> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | </v-form> | 475 | </v-form> |
| 476 | </v-flex> | 476 | </v-flex> |
| 477 | </v-layout> | 477 | </v-layout> |
| 478 | </v-card-text> | 478 | </v-card-text> |
| 479 | </v-card> | 479 | </v-card> |
| 480 | </v-dialog> | 480 | </v-dialog> |
| 481 | <!-- ****** EXISTING MEMBER TABLE ****** --> | 481 | <!-- ****** EXISTING MEMBER TABLE ****** --> |
| 482 | <v-card flat> | 482 | <v-card flat> |
| 483 | <!-- <h4 | 483 | <!-- <h4 |
| 484 | class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" | 484 | class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" |
| 485 | >Library Member</h4>--> | 485 | >Library Member</h4>--> |
| 486 | <v-card-actions> | 486 | <v-card-actions> |
| 487 | <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> --> | 487 | <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> --> |
| 488 | <v-spacer></v-spacer> | 488 | <v-spacer></v-spacer> |
| 489 | <v-flex xs12 sm4 md2> | 489 | <v-flex xs12 sm4 md2> |
| 490 | <v-select | 490 | <v-select |
| 491 | outline | 491 | outline |
| 492 | small | 492 | small |
| 493 | :items="addclass" | 493 | :items="addclass" |
| 494 | label="Select Class" | 494 | label="Select Class" |
| 495 | v-model="selectStudents" | 495 | v-model="selectStudents" |
| 496 | item-text="classNum" | 496 | item-text="classNum" |
| 497 | item-value="_id" | 497 | item-value="_id" |
| 498 | name="Select Class" | 498 | name="Select Class" |
| 499 | @change="getAllStudents(selectStudents)" | 499 | @change="getAllStudents(selectStudents)" |
| 500 | class="px-2" | 500 | class="px-2" |
| 501 | required | 501 | required |
| 502 | ></v-select> | 502 | ></v-select> |
| 503 | </v-flex> | 503 | </v-flex> |
| 504 | </v-card-actions> | 504 | </v-card-actions> |
| 505 | </v-card> | 505 | </v-card> |
| 506 | <v-card class="transparent"> | 506 | <v-card class="transparent"> |
| 507 | <v-data-table | 507 | <v-data-table |
| 508 | :headers="headers" | 508 | :headers="headers" |
| 509 | :items="studentData" | 509 | :items="studentData" |
| 510 | :pagination.sync="pagination" | 510 | :pagination.sync="pagination" |
| 511 | :search="search" | 511 | :search="search" |
| 512 | > | 512 | > |
| 513 | <template slot="items" slot-scope="props"> | 513 | <template slot="items" slot-scope="props"> |
| 514 | <tr class="tr"> | 514 | <tr class="tr"> |
| 515 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> | 515 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> |
| 516 | <td class="td td-row text-xs-center"> | 516 | <td class="td td-row text-xs-center"> |
| 517 | <v-avatar> | 517 | <v-avatar> |
| 518 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 518 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 519 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 519 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 520 | </v-avatar> | 520 | </v-avatar> |
| 521 | </td> | 521 | </td> |
| 522 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 522 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 523 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> | 523 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> |
| 524 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 524 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 525 | <td class="td td-row text-xs-center"> | 525 | <td class="td td-row text-xs-center"> |
| 526 | <v-tooltip top> | 526 | <v-tooltip top> |
| 527 | <img | 527 | <img |
| 528 | slot="activator" | 528 | slot="activator" |
| 529 | v-if="!props.item.libraryId" | 529 | v-if="!props.item.libraryId" |
| 530 | style="cursor:pointer; width:25px; height:18px; " | 530 | style="cursor:pointer; width:25px; height:18px; " |
| 531 | @click="addLibraryData(props.item)" | 531 | @click="addLibraryData(props.item)" |
| 532 | src="/static/icon/add.png" | 532 | src="/static/icon/add.png" |
| 533 | /> | 533 | /> |
| 534 | <span>Add</span> | 534 | <span>Add</span> |
| 535 | </v-tooltip> | 535 | </v-tooltip> |
| 536 | <span v-if="props.item.libraryId"> | 536 | <span v-if="props.item.libraryId"> |
| 537 | <v-tooltip top> | 537 | <v-tooltip top> |
| 538 | <img | 538 | <img |
| 539 | slot="activator" | 539 | slot="activator" |
| 540 | style="cursor:pointer; width:25px; height:18px; " | 540 | style="cursor:pointer; width:25px; height:18px; " |
| 541 | class="mr5" | 541 | class="mr5" |
| 542 | @click="profile(props.item)" | 542 | @click="profile(props.item)" |
| 543 | src="/static/icon/eye1.png" | 543 | src="/static/icon/eye1.png" |
| 544 | /> | 544 | /> |
| 545 | <span>View</span> | 545 | <span>View</span> |
| 546 | </v-tooltip> | 546 | </v-tooltip> |
| 547 | <v-tooltip top> | 547 | <v-tooltip top> |
| 548 | <img | 548 | <img |
| 549 | slot="activator" | 549 | slot="activator" |
| 550 | style="cursor:pointer; width:20px; height:18px; " | 550 | style="cursor:pointer; width:20px; height:18px; " |
| 551 | class="mr5" | 551 | class="mr5" |
| 552 | @click="editItem(props.item)" | 552 | @click="editItem(props.item)" |
| 553 | src="/static/icon/edit1.png" | 553 | src="/static/icon/edit1.png" |
| 554 | /> | 554 | /> |
| 555 | <span>Edit</span> | 555 | <span>Edit</span> |
| 556 | </v-tooltip> | 556 | </v-tooltip> |
| 557 | <v-tooltip top> | 557 | <v-tooltip top> |
| 558 | <img | 558 | <img |
| 559 | slot="activator" | 559 | slot="activator" |
| 560 | style="cursor:pointer; width:20px; height:20px; " | 560 | style="cursor:pointer; width:20px; height:20px; " |
| 561 | class="mr5" | 561 | class="mr5" |
| 562 | @click="deleteItem(props.item)" | 562 | @click="deleteItem(props.item)" |
| 563 | src="/static/icon/delete1.png" | 563 | src="/static/icon/delete1.png" |
| 564 | /> | 564 | /> |
| 565 | <span>Delete</span> | 565 | <span>Delete</span> |
| 566 | </v-tooltip> | 566 | </v-tooltip> |
| 567 | </span> | 567 | </span> |
| 568 | </td> | 568 | </td> |
| 569 | </tr> | 569 | </tr> |
| 570 | </template> | 570 | </template> |
| 571 | <v-alert | 571 | <v-alert |
| 572 | slot="no-results" | 572 | slot="no-results" |
| 573 | :value="true" | 573 | :value="true" |
| 574 | color="error" | 574 | color="error" |
| 575 | icon="warning" | 575 | icon="warning" |
| 576 | >Your search for "{{ search }}" found no results.</v-alert> | 576 | >Your search for "{{ search }}" found no results.</v-alert> |
| 577 | </v-data-table> | 577 | </v-data-table> |
| 578 | </v-card> | 578 | </v-card> |
| 579 | <div class="loader" v-if="showLoader"> | 579 | <div class="loader" v-if="showLoader"> |
| 580 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 580 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 581 | </div> | 581 | </div> |
| 582 | </div> | 582 | </div> |
| 583 | </template> | 583 | </template> |
| 584 | 584 | ||
| 585 | <script> | 585 | <script> |
| 586 | import http from "@/Services/http.js"; | 586 | import http from "@/Services/http.js"; |
| 587 | import Util from "@/util"; | 587 | import Util from "@/util"; |
| 588 | import moment from "moment"; | 588 | import moment from "moment"; |
| 589 | 589 | ||
| 590 | export default { | 590 | export default { |
| 591 | data: () => ({ | 591 | data: () => ({ |
| 592 | snackbar: false, | 592 | snackbar: false, |
| 593 | y: "top", | 593 | y: "top", |
| 594 | x: "right", | 594 | x: "right", |
| 595 | mode: "", | 595 | mode: "", |
| 596 | timeout: 3000, | 596 | timeout: 3000, |
| 597 | text: "", | 597 | text: "", |
| 598 | showLoader: false, | 598 | showLoader: false, |
| 599 | loading: false, | 599 | loading: false, |
| 600 | addLibrary: false, | 600 | addLibrary: false, |
| 601 | dialogStudents: false, | 601 | dialogStudents: false, |
| 602 | editStudentdialog: false, | 602 | editStudentdialog: false, |
| 603 | valid: true, | 603 | valid: true, |
| 604 | libraryIdRules: [(v) => !!v || "Library Id Fee is required"], | 604 | libraryIdRules: [(v) => !!v || "Library Id Fee is required"], |
| 605 | libraryFeeRules: [(v) => !!v || "Library Fee is required"], | 605 | libraryFeeRules: [(v) => !!v || "Library Fee is required"], |
| 606 | date: null, | 606 | date: null, |
| 607 | search: "", | 607 | search: "", |
| 608 | addclass: [], | 608 | addclass: [], |
| 609 | pagination: { | 609 | pagination: { |
| 610 | rowsPerPage: 15, | 610 | rowsPerPage: 15, |
| 611 | }, | 611 | }, |
| 612 | addBook: {}, | 612 | addBook: {}, |
| 613 | imageName: "", | 613 | imageName: "", |
| 614 | imageUrl: "", | 614 | imageUrl: "", |
| 615 | imageFile: "", | 615 | imageFile: "", |
| 616 | headers: [ | 616 | headers: [ |
| 617 | { | 617 | { |
| 618 | text: "No", | 618 | text: "No", |
| 619 | align: "center", | 619 | align: "center", |
| 620 | sortable: false, | 620 | sortable: false, |
| 621 | value: "index", | 621 | value: "index", |
| 622 | }, | 622 | }, |
| 623 | { | 623 | { |
| 624 | text: "Photo", | 624 | text: "Photo", |
| 625 | value: "uploadCover", | 625 | value: "uploadCover", |
| 626 | sortable: false, | 626 | sortable: false, |
| 627 | align: "center", | 627 | align: "center", |
| 628 | }, | 628 | }, |
| 629 | { text: "Name", value: "name", sortable: false, align: "center" }, | 629 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 630 | { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, | 630 | { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, |
| 631 | { text: "Email", value: "email", sortable: false, align: "center" }, | 631 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 632 | { text: "Action", value: "", sortable: false, align: "center" }, | 632 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 633 | ], | 633 | ], |
| 634 | studentData: [], | 634 | studentData: [], |
| 635 | editedItem: {}, | 635 | editedItem: {}, |
| 636 | parentId: "", | 636 | parentId: "", |
| 637 | token: "", | 637 | token: "", |
| 638 | selectStudents: {}, | 638 | selectStudents: {}, |
| 639 | editedIndex: -1, | 639 | editedIndex: -1, |
| 640 | }), | 640 | }), |
| 641 | watch: { | 641 | watch: { |
| 642 | addLibrary: function (val) { | 642 | addLibrary: function (val) { |
| 643 | if (!val) { | 643 | if (!val) { |
| 644 | this.addBook = []; | 644 | this.addBook = []; |
| 645 | } | 645 | } |
| 646 | }, | 646 | }, |
| 647 | }, | 647 | }, |
| 648 | methods: { | 648 | methods: { |
| 649 | getAllStudents() { | 649 | getAllStudents() { |
| 650 | this.showLoader = true; | 650 | this.showLoader = true; |
| 651 | http() | 651 | http() |
| 652 | .get("/getStudentsList", { | 652 | .get("/getStudentsList", { |
| 653 | params: { | 653 | params: { |
| 654 | classId: this.selectStudents, | 654 | classId: this.selectStudents, |
| 655 | schoolId: this.$store.state.schoolId, | 655 | schoolId: this.$store.state.schoolId, |
| 656 | }, | 656 | }, |
| 657 | headers: { Authorization: "Bearer " + this.token }, | 657 | headers: { Authorization: "Bearer " + this.token }, |
| 658 | }) | 658 | }) |
| 659 | .then((response) => { | 659 | .then((response) => { |
| 660 | this.studentData = response.data.data; | 660 | this.studentData = response.data.data; |
| 661 | this.showLoader = false; | 661 | this.showLoader = false; |
| 662 | }) | 662 | }) |
| 663 | .catch((error) => { | 663 | .catch((error) => { |
| 664 | // console.log("err====>", err); | 664 | // console.log("err====>", err); |
| 665 | if (error.response.status === 401) { | 665 | if (error.response.status === 401) { |
| 666 | this.$router.replace({ path: "/" }); | 666 | this.$router.replace({ path: "/" }); |
| 667 | this.$store.dispatch("setToken", null); | 667 | this.$store.dispatch("setToken", null); |
| 668 | this.$store.dispatch("Id", null); | 668 | this.$store.dispatch("Id", null); |
| 669 | this.$store.dispatch("Role", null); | 669 | this.$store.dispatch("Role", null); |
| 670 | } | 670 | } |
| 671 | }); | 671 | }); |
| 672 | }, | 672 | }, |
| 673 | addLibraryData(item) { | 673 | addLibraryData(item) { |
| 674 | this.addBook.studentId = item._id; | 674 | this.addBook.studentId = item._id; |
| 675 | this.addLibrary = true; | 675 | this.addLibrary = true; |
| 676 | }, | 676 | }, |
| 677 | editItem(item) { | 677 | editItem(item) { |
| 678 | this.editedIndex = this.studentData.indexOf(item); | 678 | this.editedIndex = this.studentData.indexOf(item); |
| 679 | this.editedItem = Object.assign({}, item); | 679 | this.editedItem = Object.assign({}, item); |
| 680 | this.editStudentdialog = true; | 680 | this.editStudentdialog = true; |
| 681 | }, | 681 | }, |
| 682 | dates: function (date) { | 682 | dates: function (date) { |
| 683 | return moment(date).format("MMMM DD, YYYY"); | 683 | return moment(date).format("MMMM DD, YYYY"); |
| 684 | }, | 684 | }, |
| 685 | profile(item) { | 685 | profile(item) { |
| 686 | // console.log("item", item); | 686 | // console.log("item", item); |
| 687 | this.editedIndex = this.studentData.indexOf(item); | 687 | this.editedIndex = this.studentData.indexOf(item); |
| 688 | this.editedItem = Object.assign({}, item); | 688 | this.editedItem = Object.assign({}, item); |
| 689 | this.dialogStudents = true; | 689 | this.dialogStudents = true; |
| 690 | }, | 690 | }, |
| 691 | deleteItem(item) { | 691 | deleteItem(item) { |
| 692 | let deleteStudentLibraryData = { | 692 | let deleteStudentLibraryData = { |
| 693 | studentId: item._id, | 693 | studentId: item._id, |
| 694 | libraryId: item.libraryId, | 694 | libraryId: item.libraryId, |
| 695 | }; | 695 | }; |
| 696 | http() | 696 | http() |
| 697 | .put( | 697 | .put( |
| 698 | "/deleteLibrary", | 698 | "/deleteLibrary", |
| 699 | confirm("Are you sure you want to delete this?") && | 699 | confirm("Are you sure you want to delete this?") && |
| 700 | deleteStudentLibraryData | 700 | deleteStudentLibraryData |
| 701 | ) | 701 | ) |
| 702 | .then((response) => { | 702 | .then((response) => { |
| 703 | this.snackbar = true; | 703 | this.snackbar = true; |
| 704 | this.text = "Delete Successfully"; | 704 | this.text = "Delete Successfully"; |
| 705 | this.getAllStudents(); | 705 | this.getAllStudents(); |
| 706 | }) | 706 | }) |
| 707 | .catch((error) => { | 707 | .catch((error) => { |
| 708 | // console.log(error); | 708 | // console.log(error); |
| 709 | }); | 709 | }); |
| 710 | }, | 710 | }, |
| 711 | close() { | 711 | close() { |
| 712 | this.dialog = false; | 712 | this.dialog = false; |
| 713 | }, | 713 | }, |
| 714 | closeEditStudentDialog() { | 714 | closeEditStudentDialog() { |
| 715 | this.editStudentdialog = false; | 715 | this.editStudentdialog = false; |
| 716 | }, | 716 | }, |
| 717 | closeViewStudent() { | 717 | closeViewStudent() { |
| 718 | this.dialogStudents = false; | 718 | this.dialogStudents = false; |
| 719 | }, | 719 | }, |
| 720 | closeAddLibraryModel() { | 720 | closeAddLibraryModel() { |
| 721 | this.addLibrary = false; | 721 | this.addLibrary = false; |
| 722 | this.addclass = []; | 722 | this.addclass = []; |
| 723 | this.addBook = []; | 723 | this.addBook = []; |
| 724 | }, | 724 | }, |
| 725 | submit() { | 725 | submit() { |
| 726 | if (this.$refs.form.validate()) { | 726 | if (this.$refs.form.validate()) { |
| 727 | this.loading = true; | 727 | this.loading = true; |
| 728 | this.addBook.schoolId = this.$store.state.schoolId; | 728 | this.addBook.schoolId = this.$store.state.schoolId; |
| 729 | http() | 729 | http() |
| 730 | .put("/addLibrary", this.addBook) | 730 | .put("/addLibrary", this.addBook) |
| 731 | .then((response) => { | 731 | .then((response) => { |
| 732 | this.snackbar = true; | 732 | this.snackbar = true; |
| 733 | this.text = "New Library Member added successfully"; | 733 | this.text = "New Library Member added successfully"; |
| 734 | this.getAllStudents(); | 734 | this.getAllStudents(); |
| 735 | this.clear(); | 735 | this.clear(); |
| 736 | this.addLibrary = false; | 736 | this.addLibrary = false; |
| 737 | this.loading = false; | 737 | this.loading = false; |
| 738 | }) | 738 | }) |
| 739 | .catch((error) => { | 739 | .catch((error) => { |
| 740 | // console.log(error); | 740 | // console.log(error); |
| 741 | this.snackbar = true; | 741 | this.snackbar = true; |
| 742 | this.text = error.response.data.message; | 742 | this.text = error.response.data.message; |
| 743 | this.loading = false; | 743 | this.loading = false; |
| 744 | }); | 744 | }); |
| 745 | } | 745 | } |
| 746 | }, | 746 | }, |
| 747 | clear() { | 747 | clear() { |
| 748 | this.$refs.form.reset(); | 748 | this.$refs.form.reset(); |
| 749 | }, | 749 | }, |
| 750 | save() { | 750 | save() { |
| 751 | this.editedItem.studentId = this.editedItem._id; | 751 | this.editedItem.studentId = this.editedItem._id; |
| 752 | http() | 752 | http() |
| 753 | .put("/updateLibrary", this.editedItem) | 753 | .put("/updateLibrary", this.editedItem) |
| 754 | .then((response) => { | 754 | .then((response) => { |
| 755 | this.snackbar = true; | 755 | this.snackbar = true; |
| 756 | this.text = "Edit Library Member Successfully"; | 756 | this.text = "Edit Library Member Successfully"; |
| 757 | this.getAllStudents(); | 757 | this.getAllStudents(); |
| 758 | this.closeEditStudentDialog(); | 758 | this.closeEditStudentDialog(); |
| 759 | }) | 759 | }) |
| 760 | .catch((error) => { | 760 | .catch((error) => { |
| 761 | this.snackbar = true; | 761 | this.snackbar = true; |
| 762 | this.text = error.response.data.statusText; | 762 | this.text = error.response.data.statusText; |
| 763 | }); | 763 | }); |
| 764 | }, | 764 | }, |
| 765 | getAllClass() { | 765 | getAllClass() { |
| 766 | http() | 766 | http() |
| 767 | .get("/getClassesList", { | 767 | .get("/getClassesList", { |
| 768 | params: { | 768 | params: { |
| 769 | schoolId: this.$store.state.schoolId, | 769 | schoolId: this.$store.state.schoolId, |
| 770 | }, | 770 | }, |
| 771 | headers: { Authorization: "Bearer " + this.token }, | 771 | headers: { Authorization: "Bearer " + this.token }, |
| 772 | }) | 772 | }) |
| 773 | .then((response) => { | 773 | .then((response) => { |
| 774 | this.addclass = response.data.data; | 774 | this.addclass = response.data.data; |
| 775 | }) | 775 | }) |
| 776 | .catch((err) => { | 776 | .catch((err) => { |
| 777 | // console.log("err====>", err); | 777 | // console.log("err====>", err); |
| 778 | this.$router.replace({ path: "/" }); | 778 | this.$router.replace({ path: "/" }); |
| 779 | }); | 779 | }); |
| 780 | }, | 780 | }, |
| 781 | }, | 781 | }, |
| 782 | mounted() { | 782 | mounted() { |
| 783 | // this.getStudentList(); | 783 | // this.getStudentList(); |
| 784 | this.token = this.$store.state.token; | 784 | this.token = this.$store.state.token; |
| 785 | this.getAllClass(); | 785 | this.getAllClass(); |
| 786 | }, | 786 | }, |
| 787 | created() { | 787 | created() { |
| 788 | this.$root.$on("app:search", (search) => { | 788 | this.$root.$on("app:search", (search) => { |
| 789 | this.search = search; | 789 | this.search = search; |
| 790 | }); | 790 | }); |
| 791 | }, | 791 | }, |
| 792 | beforeDestroy() { | 792 | beforeDestroy() { |
| 793 | // dont forget to remove the listener | 793 | // dont forget to remove the listener |
| 794 | this.$root.$off("app:search"); | 794 | this.$root.$off("app:search"); |
| 795 | }, | 795 | }, |
| 796 | }; | 796 | }; |
| 797 | </script> | 797 | </script> |
| 798 | <style scoped> | 798 | <style scoped> |
| 799 | .active { | 799 | .active { |
| 800 | background-color: gray; | 800 | background-color: gray; |
| 801 | color: white !important; | 801 | color: white !important; |
| 802 | } | 802 | } |
| 803 | .activebtn { | 803 | .activebtn { |
| 804 | color: black !important; | 804 | color: black !important; |
| 805 | } | 805 | } |
| 806 | </style> | 806 | </style> |
src/pages/Mark/mark.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EXISTING MARK TABLE ****** --> | 3 | <!-- ****** EXISTING MARK TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addMarkDialog = true" | 10 | @click="addMarkDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | round | 15 | round |
| 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 17 | dark | 17 | dark |
| 18 | @click="addMarkDialog = true" | 18 | @click="addMarkDialog = true" |
| 19 | > | 19 | > |
| 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark | 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark |
| 21 | </v-btn> | 21 | </v-btn> |
| 22 | <v-layout class="hidden-sm-only hidden-xs-only"> | 22 | <v-layout class="hidden-sm-only hidden-xs-only"> |
| 23 | <v-flex md3 lg2 class="ml-2"> | 23 | <v-flex md3 lg2 class="ml-2"> |
| 24 | <v-select | 24 | <v-select |
| 25 | v-model="getMark.classId" | 25 | v-model="getMark.classId" |
| 26 | label="Select your class" | 26 | label="Select your class" |
| 27 | type="text" | 27 | type="text" |
| 28 | :items="classList" | 28 | :items="classList" |
| 29 | item-text="classNum" | 29 | item-text="classNum" |
| 30 | item-value="_id" | 30 | item-value="_id" |
| 31 | @change="getSections(getMark.classId)" | 31 | @change="getSections(getMark.classId)" |
| 32 | required | 32 | required |
| 33 | ></v-select> | 33 | ></v-select> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex md3 lg2 class="ml-2"> | 35 | <v-flex md3 lg2 class="ml-2"> |
| 36 | <v-select | 36 | <v-select |
| 37 | :items="addSection" | 37 | :items="addSection" |
| 38 | label="Select your Section" | 38 | label="Select your Section" |
| 39 | v-model="getMark.sectionId" | 39 | v-model="getMark.sectionId" |
| 40 | item-text="name" | 40 | item-text="name" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | name="Select Section" | 42 | name="Select Section" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-spacer></v-spacer> | 46 | <v-spacer></v-spacer> |
| 47 | <v-btn | 47 | <v-btn |
| 48 | @click="getStudents" | 48 | @click="getStudents" |
| 49 | round | 49 | round |
| 50 | dark | 50 | dark |
| 51 | :loading="loading" | 51 | :loading="loading" |
| 52 | class="right open-dialog-button mt-2" | 52 | class="right open-dialog-button mt-2" |
| 53 | >Mark</v-btn> | 53 | >Mark</v-btn> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> | 55 | <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> |
| 56 | <v-card-title class="body-1" v-show="show"> | 56 | <v-card-title class="body-1" v-show="show"> |
| 57 | <v-btn icon large flat @click="displaySearch"> | 57 | <v-btn icon large flat @click="displaySearch"> |
| 58 | <v-avatar size="27"> | 58 | <v-avatar size="27"> |
| 59 | <img src="/static/icon/search.png" alt="icon" /> | 59 | <img src="/static/icon/search.png" alt="icon" /> |
| 60 | </v-avatar> | 60 | </v-avatar> |
| 61 | </v-btn> | 61 | </v-btn> |
| 62 | </v-card-title> | 62 | </v-card-title> |
| 63 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 63 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-text-field | 65 | <v-text-field |
| 66 | autofocus | 66 | autofocus |
| 67 | v-model="search" | 67 | v-model="search" |
| 68 | label="Search" | 68 | label="Search" |
| 69 | prepend-inner-icon="search" | 69 | prepend-inner-icon="search" |
| 70 | color="primary" | 70 | color="primary" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | <v-icon @click="closeSearch" color="error">close</v-icon> | 72 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-toolbar> | 75 | </v-toolbar> |
| 76 | <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> | 76 | <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> |
| 77 | <v-flex xs12 sm12 lg12> | 77 | <v-flex xs12 sm12 lg12> |
| 78 | <v-layout wrap> | 78 | <v-layout wrap> |
| 79 | <v-flex xs12 sm12 lg3> | 79 | <v-flex xs12 sm12 lg3> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 81 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 82 | <label class="right">Class:</label> | 82 | <label class="right">Class:</label> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | <v-flex xs12 sm12 lg8 class="ml-2"> | 84 | <v-flex xs12 sm12 lg8 class="ml-2"> |
| 85 | <v-select | 85 | <v-select |
| 86 | v-model="getMark.classId" | 86 | v-model="getMark.classId" |
| 87 | label="Select your class" | 87 | label="Select your class" |
| 88 | type="text" | 88 | type="text" |
| 89 | :items="classList" | 89 | :items="classList" |
| 90 | item-text="classNum" | 90 | item-text="classNum" |
| 91 | item-value="_id" | 91 | item-value="_id" |
| 92 | @change="getSections(getMark.classId)" | 92 | @change="getSections(getMark.classId)" |
| 93 | required | 93 | required |
| 94 | ></v-select> | 94 | ></v-select> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | <v-flex xs12 sm12 lg3> | 98 | <v-flex xs12 sm12 lg3> |
| 99 | <v-layout> | 99 | <v-layout> |
| 100 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 100 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 101 | <label class="right">Section:</label> | 101 | <label class="right">Section:</label> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12 sm12 lg8 class="ml-2"> | 103 | <v-flex xs12 sm12 lg8 class="ml-2"> |
| 104 | <v-select | 104 | <v-select |
| 105 | :items="addSection" | 105 | :items="addSection" |
| 106 | label="Select your Section" | 106 | label="Select your Section" |
| 107 | v-model="getMark.sectionId" | 107 | v-model="getMark.sectionId" |
| 108 | item-text="name" | 108 | item-text="name" |
| 109 | item-value="_id" | 109 | item-value="_id" |
| 110 | name="Select Section" | 110 | name="Select Section" |
| 111 | required | 111 | required |
| 112 | ></v-select> | 112 | ></v-select> |
| 113 | </v-flex> | 113 | </v-flex> |
| 114 | </v-layout> | 114 | </v-layout> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs12 sm12 lg6> | 116 | <v-flex xs12 sm12 lg6> |
| 117 | <v-btn | 117 | <v-btn |
| 118 | @click="getStudents" | 118 | @click="getStudents" |
| 119 | round | 119 | round |
| 120 | dark | 120 | dark |
| 121 | :loading="loading" | 121 | :loading="loading" |
| 122 | class="right mt-3 open-dialog-button" | 122 | class="right mt-3 open-dialog-button" |
| 123 | >Mark</v-btn> | 123 | >Mark</v-btn> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-layout> | 125 | </v-layout> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | </v-card> | 127 | </v-card> |
| 128 | <v-data-table | 128 | <v-data-table |
| 129 | :headers="headers" | 129 | :headers="headers" |
| 130 | :items="getStudentsList" | 130 | :items="getStudentsList" |
| 131 | :pagination.sync="pagination" | 131 | :pagination.sync="pagination" |
| 132 | :search="search" | 132 | :search="search" |
| 133 | > | 133 | > |
| 134 | <template slot="items" slot-scope="props"> | 134 | <template slot="items" slot-scope="props"> |
| 135 | <tr class="tr"> | 135 | <tr class="tr"> |
| 136 | <td class="td td-row">{{ props.index + 1}}</td> | 136 | <td class="td td-row">{{ props.index + 1}}</td> |
| 137 | <td class="td td-row text-xs-center"> | 137 | <td class="td td-row text-xs-center"> |
| 138 | <v-avatar size="40"> | 138 | <v-avatar size="40"> |
| 139 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 139 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 140 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 140 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 141 | </v-avatar> | 141 | </v-avatar> |
| 142 | </td> | 142 | </td> |
| 143 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 143 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 144 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> | 144 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> |
| 145 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 145 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 146 | <td class="td td-row text-xs-center"> | 146 | <td class="td td-row text-xs-center"> |
| 147 | <span> | 147 | <span> |
| 148 | <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> | 148 | <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> |
| 149 | <v-tooltip top> | 149 | <v-tooltip top> |
| 150 | <img | 150 | <img |
| 151 | slot="activator" | 151 | slot="activator" |
| 152 | style="cursor:pointer; width:25px; height:25px; " | 152 | style="cursor:pointer; width:25px; height:25px; " |
| 153 | src="/static/icon/view.png" | 153 | src="/static/icon/view.png" |
| 154 | /> | 154 | /> |
| 155 | <span>View</span> | 155 | <span>View</span> |
| 156 | </v-tooltip> | 156 | </v-tooltip> |
| 157 | </router-link> | 157 | </router-link> |
| 158 | </span> | 158 | </span> |
| 159 | </td> | 159 | </td> |
| 160 | </tr> | 160 | </tr> |
| 161 | </template> | 161 | </template> |
| 162 | <v-alert | 162 | <v-alert |
| 163 | slot="no-results" | 163 | slot="no-results" |
| 164 | :value="true" | 164 | :value="true" |
| 165 | color="error" | 165 | color="error" |
| 166 | icon="warning" | 166 | icon="warning" |
| 167 | >Your search for "{{ search }}" found no results.</v-alert> | 167 | >Your search for "{{ search }}" found no results.</v-alert> |
| 168 | </v-data-table> | 168 | </v-data-table> |
| 169 | <!-- ****** ADD Mark Schedule ****** --> | 169 | <!-- ****** ADD Mark Schedule ****** --> |
| 170 | <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent> | 170 | <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent> |
| 171 | <v-card flat class> | 171 | <v-card flat class> |
| 172 | <v-layout class="pa-3 card-style white--text"> | 172 | <v-layout class="pa-3 Card-style"> |
| 173 | <v-flex xs12> | 173 | <v-flex xs12> |
| 174 | <label class="title text-xs-center">Add Mark</label> | 174 | <label class="title text-xs-center">Add Mark</label> |
| 175 | <v-icon | 175 | <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDialog = false">cancel</v-icon> |
| 176 | size="24" | ||
| 177 | class="right white--text" | ||
| 178 | @click="$refs.form.reset();addMarkDialog = false" | ||
| 179 | >cancel</v-icon> | ||
| 180 | </v-flex> | 176 | </v-flex> |
| 181 | </v-layout> | 177 | </v-layout> |
| 182 | <v-form ref="form" v-model="valid" lazy-validation> | 178 | <v-form ref="form" v-model="valid" lazy-validation> |
| 183 | <v-container fluid> | 179 | <v-container fluid> |
| 184 | <v-flex xs12 sm12 lg12> | 180 | <v-flex xs12 sm12 lg12> |
| 185 | <v-layout wrap> | 181 | <v-layout wrap> |
| 186 | <v-flex xs12 sm12 lg10> | 182 | <v-flex xs12 sm12 lg10> |
| 187 | <v-layout wrap> | 183 | <v-layout wrap> |
| 188 | <v-flex xs12 sm12 lg3> | 184 | <v-flex xs12 sm12 lg3> |
| 189 | <v-flex xs3 sm2 lg2 class="subheading"> | 185 | <v-flex xs3 sm2 lg2 class="subheading"> |
| 190 | <label>Exam:</label> | 186 | <label>Exam:</label> |
| 191 | </v-flex> | 187 | </v-flex> |
| 192 | <v-flex xs12 sm12 lg10> | 188 | <v-flex xs12 sm12 lg10> |
| 193 | <v-select | 189 | <v-select |
| 194 | label="Select your Exam Name" | 190 | label="Select your Exam Name" |
| 195 | :items="examList" | 191 | :items="examList" |
| 196 | v-model="addMark.examId" | 192 | v-model="addMark.examId" |
| 197 | :rules="examRules" | 193 | :rules="examRules" |
| 198 | item-text="examName" | 194 | item-text="examName" |
| 199 | item-value="_id" | 195 | item-value="_id" |
| 200 | ></v-select> | 196 | ></v-select> |
| 201 | </v-flex> | 197 | </v-flex> |
| 202 | </v-flex> | 198 | </v-flex> |
| 203 | <v-flex xs12 sm12 lg3> | 199 | <v-flex xs12 sm12 lg3> |
| 204 | <v-flex xs3 sm6 lg2 class="subheading"> | 200 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 205 | <label>Class:</label> | 201 | <label>Class:</label> |
| 206 | </v-flex> | 202 | </v-flex> |
| 207 | <v-flex xs12 sm12 lg10 class> | 203 | <v-flex xs12 sm12 lg10 class> |
| 208 | <v-select | 204 | <v-select |
| 209 | v-model="addMark.classId" | 205 | v-model="addMark.classId" |
| 210 | label="Select your class" | 206 | label="Select your class" |
| 211 | type="text" | 207 | type="text" |
| 212 | :items="classList" | 208 | :items="classList" |
| 213 | item-text="classNum" | 209 | item-text="classNum" |
| 214 | item-value="_id" | 210 | item-value="_id" |
| 215 | :rules="classRules" | 211 | :rules="classRules" |
| 216 | @change="getSections(addMark.classId)" | 212 | @change="getSections(addMark.classId)" |
| 217 | required | 213 | required |
| 218 | ></v-select> | 214 | ></v-select> |
| 219 | </v-flex> | 215 | </v-flex> |
| 220 | </v-flex> | 216 | </v-flex> |
| 221 | <v-flex xs12 sm12 lg3> | 217 | <v-flex xs12 sm12 lg3> |
| 222 | <v-flex xs3 sm6 lg2 class="subheading"> | 218 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 223 | <label>Section:</label> | 219 | <label>Section:</label> |
| 224 | </v-flex> | 220 | </v-flex> |
| 225 | <v-flex xs12 sm12 lg10 class> | 221 | <v-flex xs12 sm12 lg10 class> |
| 226 | <v-select | 222 | <v-select |
| 227 | :items="addSection" | 223 | :items="addSection" |
| 228 | label="Select your Section" | 224 | label="Select your Section" |
| 229 | v-model="addMark.sectionId" | 225 | v-model="addMark.sectionId" |
| 230 | item-text="name" | 226 | item-text="name" |
| 231 | item-value="_id" | 227 | item-value="_id" |
| 232 | name="Select Section" | 228 | name="Select Section" |
| 233 | :rules="sectionRules" | 229 | :rules="sectionRules" |
| 234 | required | 230 | required |
| 235 | ></v-select> | 231 | ></v-select> |
| 236 | </v-flex> | 232 | </v-flex> |
| 237 | </v-flex> | 233 | </v-flex> |
| 238 | <v-flex xs12 sm12 lg3> | 234 | <v-flex xs12 sm12 lg3> |
| 239 | <v-flex xs3 sm6 lg2 class="subheading"> | 235 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 240 | <label>Subject:</label> | 236 | <label>Subject:</label> |
| 241 | </v-flex> | 237 | </v-flex> |
| 242 | <v-flex xs12 sm12 lg10 class> | 238 | <v-flex xs12 sm12 lg10 class> |
| 243 | <v-select | 239 | <v-select |
| 244 | :items="subjects" | 240 | :items="subjects" |
| 245 | label="Select your Subject" | 241 | label="Select your Subject" |
| 246 | v-model="addMark.subjectId" | 242 | v-model="addMark.subjectId" |
| 247 | item-text="subjectName" | 243 | item-text="subjectName" |
| 248 | item-value="_id" | 244 | item-value="_id" |
| 249 | name="Select Section" | 245 | name="Select Section" |
| 250 | :rules="subjectRules" | 246 | :rules="subjectRules" |
| 251 | required | 247 | required |
| 252 | ></v-select> | 248 | ></v-select> |
| 253 | </v-flex> | 249 | </v-flex> |
| 254 | </v-flex> | 250 | </v-flex> |
| 255 | </v-layout> | 251 | </v-layout> |
| 256 | </v-flex> | 252 | </v-flex> |
| 257 | <v-flex xs12 sm12 lg2> | 253 | <v-flex xs12 sm12 lg2> |
| 258 | <v-flex xs12 sm12 lg12> | 254 | <v-flex xs12 sm12 lg12> |
| 259 | <v-btn | 255 | <v-btn |
| 260 | @click="findStudents" | 256 | @click="findStudents" |
| 261 | round | 257 | round |
| 262 | dark | 258 | dark |
| 263 | :loading="loading" | 259 | :loading="loading" |
| 264 | class="right mt-4 open-dialog-button" | 260 | class="right mt-4 add-button" |
| 265 | >Mark</v-btn> | 261 | >Mark</v-btn> |
| 266 | </v-flex> | 262 | </v-flex> |
| 267 | </v-flex> | 263 | </v-flex> |
| 268 | </v-layout> | 264 | </v-layout> |
| 269 | </v-flex> | 265 | </v-flex> |
| 270 | <!-- ****** ADD MARK TABLE DATA ****** --> | 266 | <!-- ****** ADD MARK TABLE DATA ****** --> |
| 271 | <v-card class="mt-4 elevation-0 body-color"> | 267 | <v-card class="mt-4 elevation-0 body-color"> |
| 272 | <v-data-table | 268 | <v-data-table |
| 273 | :headers="headerOfMark" | 269 | :headers="headerOfMark" |
| 274 | :items="getStudentData" | 270 | :items="getStudentData" |
| 275 | :pagination.sync="pagination" | 271 | :pagination.sync="pagination" |
| 276 | :search="search" | 272 | :search="search" |
| 277 | class="body-color" | 273 | class="body-color" |
| 278 | > | 274 | > |
| 279 | <template slot="items" slot-scope="props"> | 275 | <template slot="items" slot-scope="props"> |
| 280 | <tr class="tr"> | 276 | <tr class="tr"> |
| 281 | <td class="td td-row">{{ props.index + 1}}</td> | 277 | <td class="td td-row">{{ props.index + 1}}</td> |
| 282 | <td class="text-xs-center td td-row"> | 278 | <td class="text-xs-center td td-row"> |
| 283 | <v-avatar size="40"> | 279 | <v-avatar size="40"> |
| 284 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 280 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 285 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 281 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 286 | </v-avatar> | 282 | </v-avatar> |
| 287 | </td> | 283 | </td> |
| 288 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 284 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 289 | <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> | 285 | <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> |
| 290 | <td | 286 | <td |
| 291 | class="text-xs-center markTable td td-row" | 287 | class="text-xs-center markTable td td-row" |
| 292 | v-for="(marks, index) in props.item.marksObtained" | 288 | v-for="(marks, index) in props.item.marksObtained" |
| 293 | :key="'A'+ index" | 289 | :key="'A'+ index" |
| 294 | > | 290 | > |
| 295 | <v-text-field v-model="marks.marksScored"></v-text-field> | 291 | <v-text-field v-model="marks.marksScored"></v-text-field> |
| 296 | </td> | 292 | </td> |
| 297 | </tr> | 293 | </tr> |
| 298 | </template> | 294 | </template> |
| 299 | <v-alert | 295 | <v-alert |
| 300 | slot="no-results" | 296 | slot="no-results" |
| 301 | :value="true" | 297 | :value="true" |
| 302 | color="error" | 298 | color="error" |
| 303 | icon="warning" | 299 | icon="warning" |
| 304 | >Your search for "{{ search }}" found no results.</v-alert> | 300 | >Your search for "{{ search }}" found no results.</v-alert> |
| 305 | </v-data-table> | 301 | </v-data-table> |
| 306 | </v-card> | 302 | </v-card> |
| 307 | <v-layout class="mt-2"> | 303 | <v-layout class="mt-2"> |
| 308 | <v-flex xs12 sm12> | 304 | <v-flex xs12 sm12> |
| 309 | <v-layout> | 305 | <v-layout> |
| 310 | <v-flex xs12> | 306 | <v-flex xs12> |
| 311 | <v-btn | 307 | <v-btn |
| 312 | @click="submit" | 308 | @click="submit" |
| 313 | round | 309 | round |
| 314 | dark | 310 | dark |
| 315 | :loading="loading" | 311 | :loading="loading" |
| 316 | class="right add-button" | 312 | class="right add-button" |
| 317 | >Add Mark</v-btn> | 313 | >Add Mark</v-btn> |
| 318 | </v-flex> | 314 | </v-flex> |
| 319 | </v-layout> | 315 | </v-layout> |
| 320 | </v-flex> | 316 | </v-flex> |
| 321 | </v-layout> | 317 | </v-layout> |
| 322 | </v-container> | 318 | </v-container> |
| 323 | </v-form> | 319 | </v-form> |
| 324 | </v-card> | 320 | </v-card> |
| 325 | </v-dialog> | 321 | </v-dialog> |
| 326 | <div class="loader" v-if="showLoader"> | 322 | <div class="loader" v-if="showLoader"> |
| 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 323 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 328 | </div> | 324 | </div> |
| 329 | <v-snackbar | 325 | <v-snackbar |
| 330 | :timeout="timeout" | 326 | :timeout="timeout" |
| 331 | :top="y === 'top'" | 327 | :top="y === 'top'" |
| 332 | :right="x === 'right'" | 328 | :right="x === 'right'" |
| 333 | :vertical="mode === 'vertical'" | 329 | :vertical="mode === 'vertical'" |
| 334 | v-model="snackbar" | 330 | v-model="snackbar" |
| 335 | :color="color" | 331 | :color="color" |
| 336 | >{{ text }}</v-snackbar> | 332 | >{{ text }}</v-snackbar> |
| 337 | </v-container> | 333 | </v-container> |
| 338 | </template> | 334 | </template> |
| 339 | 335 | ||
| 340 | <script> | 336 | <script> |
| 341 | import http from "@/Services/http.js"; | 337 | import http from "@/Services/http.js"; |
| 342 | import moment from "moment"; | 338 | import moment from "moment"; |
| 343 | 339 | ||
| 344 | export default { | 340 | export default { |
| 345 | data: () => ({ | 341 | data: () => ({ |
| 346 | show: true, | 342 | show: true, |
| 347 | showSearch: false, | 343 | showSearch: false, |
| 348 | snackbar: false, | 344 | snackbar: false, |
| 349 | date: null, | 345 | date: null, |
| 350 | color: "", | 346 | color: "", |
| 351 | y: "top", | 347 | y: "top", |
| 352 | x: "right", | 348 | x: "right", |
| 353 | mode: "", | 349 | mode: "", |
| 354 | timeout: 10000, | 350 | timeout: 10000, |
| 355 | text: "", | 351 | text: "", |
| 356 | loading: false, | 352 | loading: false, |
| 357 | search: "", | 353 | search: "", |
| 358 | show: true, | 354 | show: true, |
| 359 | showSearch: false, | 355 | showSearch: false, |
| 360 | showLoader: false, | 356 | showLoader: false, |
| 361 | dialog: false, | 357 | dialog: false, |
| 362 | dialog1: false, | 358 | dialog1: false, |
| 363 | valid: true, | 359 | valid: true, |
| 364 | 360 | ||
| 365 | addMarkDialog: false, | 361 | addMarkDialog: false, |
| 366 | addSection: [], | 362 | addSection: [], |
| 367 | pagination: { | 363 | pagination: { |
| 368 | rowsPerPage: 10, | 364 | rowsPerPage: 10, |
| 369 | }, | 365 | }, |
| 370 | classRules: [(v) => !!v || "Class is required"], | 366 | classRules: [(v) => !!v || "Class is required"], |
| 371 | sectionRules: [(v) => !!v || "section is required"], | 367 | sectionRules: [(v) => !!v || "section is required"], |
| 372 | subjectRules: [(v) => !!v || "Subject is required"], | 368 | subjectRules: [(v) => !!v || "Subject is required"], |
| 373 | examRules: [(v) => !!v || "Exam is required"], | 369 | examRules: [(v) => !!v || "Exam is required"], |
| 374 | 370 | ||
| 375 | headerOfMark: [ | 371 | headerOfMark: [ |
| 376 | { | 372 | { |
| 377 | align: "", | 373 | align: "", |
| 378 | text: "No", | 374 | text: "No", |
| 379 | sortable: false, | 375 | sortable: false, |
| 380 | value: "No", | 376 | value: "No", |
| 381 | }, | 377 | }, |
| 382 | { | 378 | { |
| 383 | text: "Profile Pic", | 379 | text: "Profile Pic", |
| 384 | vaue: "profilePicUrl", | 380 | vaue: "profilePicUrl", |
| 385 | sortable: false, | 381 | sortable: false, |
| 386 | align: "center", | 382 | align: "center", |
| 387 | }, | 383 | }, |
| 388 | { | 384 | { |
| 389 | text: "Name", | 385 | text: "Name", |
| 390 | vaue: "name", | 386 | vaue: "name", |
| 391 | sortable: false, | 387 | sortable: false, |
| 392 | align: "center", | 388 | align: "center", |
| 393 | }, | 389 | }, |
| 394 | { | 390 | { |
| 395 | text: "Roll No.", | 391 | text: "Roll No.", |
| 396 | value: "rollNo", | 392 | value: "rollNo", |
| 397 | sortable: false, | 393 | sortable: false, |
| 398 | align: "center", | 394 | align: "center", |
| 399 | }, | 395 | }, |
| 400 | ], | 396 | ], |
| 401 | headers: [ | 397 | headers: [ |
| 402 | { | 398 | { |
| 403 | align: "", | 399 | align: "", |
| 404 | text: "No", | 400 | text: "No", |
| 405 | sortable: false, | 401 | sortable: false, |
| 406 | value: "No", | 402 | value: "No", |
| 407 | }, | 403 | }, |
| 408 | { | 404 | { |
| 409 | text: "Profile Pic", | 405 | text: "Profile Pic", |
| 410 | vaue: "profilePicUrl", | 406 | vaue: "profilePicUrl", |
| 411 | sortable: false, | 407 | sortable: false, |
| 412 | align: "center", | 408 | align: "center", |
| 413 | }, | 409 | }, |
| 414 | { | 410 | { |
| 415 | text: "Name", | 411 | text: "Name", |
| 416 | vaue: "name", | 412 | vaue: "name", |
| 417 | sortable: false, | 413 | sortable: false, |
| 418 | align: "center", | 414 | align: "center", |
| 419 | }, | 415 | }, |
| 420 | { | 416 | { |
| 421 | text: "Roll No.", | 417 | text: "Roll No.", |
| 422 | value: "rollNo", | 418 | value: "rollNo", |
| 423 | sortable: false, | 419 | sortable: false, |
| 424 | align: "center", | 420 | align: "center", |
| 425 | }, | 421 | }, |
| 426 | { | 422 | { |
| 427 | text: "Email", | 423 | text: "Email", |
| 428 | value: "email", | 424 | value: "email", |
| 429 | sortable: false, | 425 | sortable: false, |
| 430 | align: "center", | 426 | align: "center", |
| 431 | }, | 427 | }, |
| 432 | { text: "Action", value: "", sortable: false, align: "center" }, | 428 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 433 | ], | 429 | ], |
| 434 | classList: [], | 430 | classList: [], |
| 435 | examList: [], | 431 | examList: [], |
| 436 | subjects: [], | 432 | subjects: [], |
| 437 | addMark: {}, | 433 | addMark: {}, |
| 438 | getMark: {}, | 434 | getMark: {}, |
| 439 | getScheduleData: {}, | 435 | getScheduleData: {}, |
| 440 | markData: [], | 436 | markData: [], |
| 441 | getStudentData: [], | 437 | getStudentData: [], |
| 442 | getStudentsList: [], | 438 | getStudentsList: [], |
| 443 | token: "", | 439 | token: "", |
| 444 | }), | 440 | }), |
| 445 | watch: { | 441 | watch: { |
| 446 | addMarkDialog: function (val) { | 442 | addMarkDialog: function (val) { |
| 447 | if (!val) { | 443 | if (!val) { |
| 448 | this.addMark = []; | 444 | this.addMark = []; |
| 449 | this.getStudentData = []; | 445 | this.getStudentData = []; |
| 450 | } | 446 | } |
| 451 | }, | 447 | }, |
| 452 | }, | 448 | }, |
| 453 | methods: { | 449 | methods: { |
| 454 | getClass() { | 450 | getClass() { |
| 455 | this.showLoader = true; | 451 | this.showLoader = true; |
| 456 | http() | 452 | http() |
| 457 | .get("/getClassesList", { | 453 | .get("/getClassesList", { |
| 458 | headers: { Authorization: "Bearer " + this.token }, | 454 | headers: { Authorization: "Bearer " + this.token }, |
| 459 | }) | 455 | }) |
| 460 | .then((response) => { | 456 | .then((response) => { |
| 461 | this.classList = response.data.data; | 457 | this.classList = response.data.data; |
| 462 | this.showLoader = false; | 458 | this.showLoader = false; |
| 463 | }) | 459 | }) |
| 464 | .catch((err) => { | 460 | .catch((err) => { |
| 465 | // console.log("err====>", err); | 461 | // console.log("err====>", err); |
| 466 | this.showLoader = false; | 462 | this.showLoader = false; |
| 467 | }); | 463 | }); |
| 468 | }, | 464 | }, |
| 469 | getSections(_id) { | 465 | getSections(_id) { |
| 470 | this.showLoader = true; | 466 | this.showLoader = true; |
| 471 | for (let i = 0; i < this.classList.length; i++) { | 467 | for (let i = 0; i < this.classList.length; i++) { |
| 472 | if (_id == this.classList[i]._id) { | 468 | if (_id == this.classList[i]._id) { |
| 473 | this.subjects = this.classList[i].subjects; | 469 | this.subjects = this.classList[i].subjects; |
| 474 | } | 470 | } |
| 475 | } | 471 | } |
| 476 | this.getStudentsList = []; | 472 | this.getStudentsList = []; |
| 477 | http() | 473 | http() |
| 478 | .get( | 474 | .get( |
| 479 | "/getSectionsList", | 475 | "/getSectionsList", |
| 480 | { params: { classId: _id } }, | 476 | { params: { classId: _id } }, |
| 481 | { | 477 | { |
| 482 | headers: { Authorization: "Bearer " + this.token }, | 478 | headers: { Authorization: "Bearer " + this.token }, |
| 483 | } | 479 | } |
| 484 | ) | 480 | ) |
| 485 | .then((response) => { | 481 | .then((response) => { |
| 486 | this.addSection = response.data.data; | 482 | this.addSection = response.data.data; |
| 487 | this.showLoader = false; | 483 | this.showLoader = false; |
| 488 | }) | 484 | }) |
| 489 | .catch((err) => { | 485 | .catch((err) => { |
| 490 | this.showLoader = false; | 486 | this.showLoader = false; |
| 491 | // console.log("err====>", err); | 487 | // console.log("err====>", err); |
| 492 | }); | 488 | }); |
| 493 | }, | 489 | }, |
| 494 | getExamList() { | 490 | getExamList() { |
| 495 | this.showLoader = true; | 491 | this.showLoader = true; |
| 496 | this.loadingSearch = true; | 492 | this.loadingSearch = true; |
| 497 | http() | 493 | http() |
| 498 | .get("/getExamsList", { | 494 | .get("/getExamsList", { |
| 499 | headers: { Authorization: "Bearer " + this.token }, | 495 | headers: { Authorization: "Bearer " + this.token }, |
| 500 | }) | 496 | }) |
| 501 | .then((response) => { | 497 | .then((response) => { |
| 502 | this.examList = response.data.data; | 498 | this.examList = response.data.data; |
| 503 | this.showLoader = false; | 499 | this.showLoader = false; |
| 504 | this.loadingSearch = false; | 500 | this.loadingSearch = false; |
| 505 | }) | 501 | }) |
| 506 | .catch((error) => { | 502 | .catch((error) => { |
| 507 | // console.log("err====>", err); | 503 | // console.log("err====>", err); |
| 508 | this.showLoader = false; | 504 | this.showLoader = false; |
| 509 | this.loadingSearch = false; | 505 | this.loadingSearch = false; |
| 510 | this.snackbar = true; | 506 | this.snackbar = true; |
| 511 | this.text = error.response.data.message; | 507 | this.text = error.response.data.message; |
| 512 | if (error.response.status === 401) { | 508 | if (error.response.status === 401) { |
| 513 | this.$router.replace({ path: "/" }); | 509 | this.$router.replace({ path: "/" }); |
| 514 | this.$store.dispatch("setToken", null); | 510 | this.$store.dispatch("setToken", null); |
| 515 | this.$store.dispatch("Id", null); | 511 | this.$store.dispatch("Id", null); |
| 516 | this.$store.dispatch("Role", null); | 512 | this.$store.dispatch("Role", null); |
| 517 | } | 513 | } |
| 518 | }); | 514 | }); |
| 519 | }, | 515 | }, |
| 520 | findStudents() { | 516 | findStudents() { |
| 521 | this.getStudentData = []; | 517 | this.getStudentData = []; |
| 522 | if (this.$refs.form.validate()) { | 518 | if (this.$refs.form.validate()) { |
| 523 | this.showLoader = true; | 519 | this.showLoader = true; |
| 524 | http() | 520 | http() |
| 525 | .get("/getStudentWithClass", { | 521 | .get("/getStudentWithClass", { |
| 526 | params: { | 522 | params: { |
| 527 | classId: this.addMark.classId, | 523 | classId: this.addMark.classId, |
| 528 | sectionId: this.addMark.sectionId, | 524 | sectionId: this.addMark.sectionId, |
| 529 | }, | 525 | }, |
| 530 | }) | 526 | }) |
| 531 | .then((response) => { | 527 | .then((response) => { |
| 532 | this.getStudentData = response.data.data; | 528 | this.getStudentData = response.data.data; |
| 533 | // this.showLoader = false; | 529 | // this.showLoader = false; |
| 534 | this.showLoader = true; | 530 | this.showLoader = true; |
| 535 | http() | 531 | http() |
| 536 | .get("/getMarkDistributionsList", { | 532 | .get("/getMarkDistributionsList", { |
| 537 | params: this.addMark, | 533 | params: this.addMark, |
| 538 | }) | 534 | }) |
| 539 | .then((response) => { | 535 | .then((response) => { |
| 540 | this.showLoader = false; | 536 | this.showLoader = false; |
| 541 | this.headerOfMark.length = 4; | 537 | this.headerOfMark.length = 4; |
| 542 | for (var i = 0; i < response.data.data.length; i++) { | 538 | for (var i = 0; i < response.data.data.length; i++) { |
| 543 | this.headerOfMark.push({ | 539 | this.headerOfMark.push({ |
| 544 | text: | 540 | text: |
| 545 | response.data.data[i].distributionType + | 541 | response.data.data[i].distributionType + |
| 546 | " (" + | 542 | " (" + |
| 547 | response.data.data[i].markValue + | 543 | response.data.data[i].markValue + |
| 548 | ")", | 544 | ")", |
| 549 | sortable: false, | 545 | sortable: false, |
| 550 | align: "center", | 546 | align: "center", |
| 551 | }); | 547 | }); |
| 552 | } | 548 | } |
| 553 | for (var n = 0; n < this.getStudentData.length; n++) { | 549 | for (var n = 0; n < this.getStudentData.length; n++) { |
| 554 | this.getStudentData[n].marksObtained = []; | 550 | this.getStudentData[n].marksObtained = []; |
| 555 | for (var j = 0; j < response.data.data.length; j++) { | 551 | for (var j = 0; j < response.data.data.length; j++) { |
| 556 | this.getStudentData[n].marksObtained.push({ | 552 | this.getStudentData[n].marksObtained.push({ |
| 557 | markDistributionId: response.data.data[j]._id, | 553 | markDistributionId: response.data.data[j]._id, |
| 558 | marksScored: 0, | 554 | marksScored: 0, |
| 559 | markValue: response.data.data[j].markValue, | 555 | markValue: response.data.data[j].markValue, |
| 560 | distributionType: response.data.data[j].distributionType, | 556 | distributionType: response.data.data[j].distributionType, |
| 561 | }); | 557 | }); |
| 562 | } | 558 | } |
| 563 | // if (marks.marksScored > marks.marksObtained) { | 559 | // if (marks.marksScored > marks.marksObtained) { |
| 564 | // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; | 560 | // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; |
| 565 | // this.marks.marksScored = marks.marksObtained; | 561 | // this.marks.marksScored = marks.marksObtained; |
| 566 | // } | 562 | // } |
| 567 | } | 563 | } |
| 568 | }) | 564 | }) |
| 569 | .catch((error) => { | 565 | .catch((error) => { |
| 570 | this.showLoader = false; | 566 | this.showLoader = false; |
| 571 | }); | 567 | }); |
| 572 | }) | 568 | }) |
| 573 | .catch((error) => { | 569 | .catch((error) => { |
| 574 | this.showLoader = false; | 570 | this.showLoader = false; |
| 575 | }); | 571 | }); |
| 576 | } | 572 | } |
| 577 | }, | 573 | }, |
| 578 | async submit() { | 574 | async submit() { |
| 579 | for (let [j, item] of this.getStudentData.entries()) { | 575 | for (let [j, item] of this.getStudentData.entries()) { |
| 580 | for (var k = 0; k < item.marksObtained.length; k++) { | 576 | for (var k = 0; k < item.marksObtained.length; k++) { |
| 581 | if ( | 577 | if ( |
| 582 | item.marksObtained[k].marksScored > item.marksObtained[k].markValue | 578 | item.marksObtained[k].marksScored > item.marksObtained[k].markValue |
| 583 | ) { | 579 | ) { |
| 584 | this.snackbar = true; | 580 | this.snackbar = true; |
| 585 | this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in | 581 | this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in |
| 586 | "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; | 582 | "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; |
| 587 | this.color = "error"; | 583 | this.color = "error"; |
| 588 | return; | 584 | return; |
| 589 | } | 585 | } |
| 590 | } | 586 | } |
| 591 | let data = { | 587 | let data = { |
| 592 | examId: this.addMark.examId, | 588 | examId: this.addMark.examId, |
| 593 | classId: this.addMark.classId, | 589 | classId: this.addMark.classId, |
| 594 | sectionId: this.addMark.sectionId, | 590 | sectionId: this.addMark.sectionId, |
| 595 | subjectId: this.addMark.subjectId, | 591 | subjectId: this.addMark.subjectId, |
| 596 | studentId: item._id, | 592 | studentId: item._id, |
| 597 | studentsMarks: item.marksObtained, | 593 | studentsMarks: item.marksObtained, |
| 598 | }; | 594 | }; |
| 599 | try { | 595 | try { |
| 600 | let response = await http().post("/createMark", data); | 596 | let response = await http().post("/createMark", data); |
| 601 | if (j + 1 === this.getStudentData.length) { | 597 | if (j + 1 === this.getStudentData.length) { |
| 602 | this.getStudentData = []; | 598 | this.getStudentData = []; |
| 603 | this.snackbar = true; | 599 | this.snackbar = true; |
| 604 | this.addMarkDialog = false; | 600 | this.addMarkDialog = false; |
| 605 | this.text = response.data.message; | 601 | this.text = response.data.message; |
| 606 | this.color = "green"; | 602 | this.color = "green"; |
| 607 | this.$refs.form.reset(); | 603 | this.$refs.form.reset(); |
| 608 | } | 604 | } |
| 609 | } catch (error) { | 605 | } catch (error) { |
| 610 | this.snackbar = true; | 606 | this.snackbar = true; |
| 611 | this.text = error.response.data.message; | 607 | this.text = error.response.data.message; |
| 612 | this.color = "red"; | 608 | this.color = "red"; |
| 613 | } | 609 | } |
| 614 | } | 610 | } |
| 615 | }, | 611 | }, |
| 616 | getStudents() { | 612 | getStudents() { |
| 617 | this.showLoader = true; | 613 | this.showLoader = true; |
| 618 | http() | 614 | http() |
| 619 | .get("/getStudentWithClass", { | 615 | .get("/getStudentWithClass", { |
| 620 | params: { | 616 | params: { |
| 621 | classId: this.getMark.classId, | 617 | classId: this.getMark.classId, |
| 622 | sectionId: this.getMark.sectionId, | 618 | sectionId: this.getMark.sectionId, |
| 623 | }, | 619 | }, |
| 624 | }) | 620 | }) |
| 625 | .then((response) => { | 621 | .then((response) => { |
| 626 | this.getStudentsList = response.data.data; | 622 | this.getStudentsList = response.data.data; |
| 627 | this.showLoader = false; | 623 | this.showLoader = false; |
| 628 | }) | 624 | }) |
| 629 | .catch((error) => { | 625 | .catch((error) => { |
| 630 | // console.log("err====>", error); | 626 | // console.log("err====>", error); |
| 631 | this.showLoader = false; | 627 | this.showLoader = false; |
| 632 | this.snackbar = true; | 628 | this.snackbar = true; |
| 633 | this.color = "error"; | 629 | this.color = "error"; |
| 634 | this.text = error.response.data.message; | 630 | this.text = error.response.data.message; |
| 635 | }); | 631 | }); |
| 636 | }, | 632 | }, |
| 637 | displaySearch() { | 633 | displaySearch() { |
| 638 | (this.show = false), (this.showSearch = true); | 634 | (this.show = false), (this.showSearch = true); |
| 639 | }, | 635 | }, |
| 640 | closeSearch() { | 636 | closeSearch() { |
| 641 | this.showSearch = false; | 637 | this.showSearch = false; |
| 642 | this.show = true; | 638 | this.show = true; |
| 643 | this.search = ""; | 639 | this.search = ""; |
| 644 | }, | 640 | }, |
| 645 | }, | 641 | }, |
| 646 | mounted() { | 642 | mounted() { |
| 647 | this.token = this.$store.state.token; | 643 | this.token = this.$store.state.token; |
| 648 | this.getClass(); | 644 | this.getClass(); |
| 649 | this.getExamList(); | 645 | this.getExamList(); |
| 650 | }, | 646 | }, |
| 651 | }; | 647 | }; |
| 652 | </script> | 648 | </script> |
| 653 | <style scoped> | 649 | <style scoped> |
| 654 | .markTable { | 650 | .markTable { |
| 655 | max-width: 80px !important; | 651 | max-width: 80px !important; |
| 656 | } | 652 | } |
| 657 | </style> | 653 | </style> |
| 658 | 654 | ||
| 659 | 655 | ||
| 660 | 656 | ||
| 661 | 657 | ||
| 662 | 658 | ||
| 663 | 659 | ||
| 664 | 660 | ||
| 665 | 661 | ||
| 666 | 662 | ||
| 667 | 663 | ||
| 668 | 664 | ||
| 669 | 665 | ||
| 670 | 666 | ||
| 671 | 667 | ||
| 672 | 668 | ||
| 673 | 669 | ||
| 674 | 670 | ||
| 675 | 671 | ||
| 676 | 672 | ||
| 677 | 673 | ||
| 678 | 674 | ||
| 679 | 675 |
src/pages/Mark/markDistribution.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Mark Distribution ****** --> | 3 | <!-- ****** EDIT Mark Distribution ****** --> |
| 4 | <v-dialog v-model="editMarkDistributionDialog" max-width="500px" persistent> | 4 | <v-dialog v-model="editMarkDistributionDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Mark Distribution</label> | 8 | <label class="title text-xs-center">Edit Mark Distribution</label> |
| 9 | <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Mark Distribution:</label> | 17 | <label class="right">Mark Distribution:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm6 class="ml-3"> | 19 | <v-flex xs8 sm6 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.distributionType" | 21 | v-model="editedItem.distributionType" |
| 22 | placeholder="fill your Distribution Type" | 22 | placeholder="fill your Distribution Type" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs4 class="pt-4 subheading"> | 29 | <v-flex xs4 class="pt-4 subheading"> |
| 30 | <label class="right">Mark Value:</label> | 30 | <label class="right">Mark Value:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm6 class="ml-3"> | 32 | <v-flex xs8 sm6 class="ml-3"> |
| 33 | <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> | 33 | <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | </v-layout> | 35 | </v-layout> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-layout> | 37 | <v-layout> |
| 38 | <v-flex xs12 sm11> | 38 | <v-flex xs12 sm11> |
| 39 | <v-card-actions> | 39 | <v-card-actions> |
| 40 | <v-spacer></v-spacer> | 40 | <v-spacer></v-spacer> |
| 41 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 41 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 42 | </v-card-actions> | 42 | </v-card-actions> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | </v-layout> | 44 | </v-layout> |
| 45 | </v-container> | 45 | </v-container> |
| 46 | </v-form> | 46 | </v-form> |
| 47 | </v-card> | 47 | </v-card> |
| 48 | </v-dialog> | 48 | </v-dialog> |
| 49 | <!-- ****** MARK DISTRIBUTATION TABLE ****** --> | 49 | <!-- ****** MARK DISTRIBUTATION TABLE ****** --> |
| 50 | <v-toolbar color="transparent" flat> | 50 | <v-toolbar color="transparent" flat> |
| 51 | <v-btn | 51 | <v-btn |
| 52 | fab | 52 | fab |
| 53 | dark | 53 | dark |
| 54 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 54 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 55 | small | 55 | small |
| 56 | @click="addMarkDistributionDialog = true" | 56 | @click="addMarkDistributionDialog = true" |
| 57 | > | 57 | > |
| 58 | <v-icon dark>add</v-icon> | 58 | <v-icon dark>add</v-icon> |
| 59 | </v-btn> | 59 | </v-btn> |
| 60 | <v-btn | 60 | <v-btn |
| 61 | round | 61 | round |
| 62 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 62 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 63 | dark | 63 | dark |
| 64 | @click="addMarkDistributionDialog = true" | 64 | @click="addMarkDistributionDialog = true" |
| 65 | > | 65 | > |
| 66 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution | 66 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution |
| 67 | </v-btn> | 67 | </v-btn> |
| 68 | <v-spacer></v-spacer> | 68 | <v-spacer></v-spacer> |
| 69 | <v-card-title class="body-1" v-show="show"> | 69 | <v-card-title class="body-1" v-show="show"> |
| 70 | <v-btn icon large flat @click="displaySearch"> | 70 | <v-btn icon large flat @click="displaySearch"> |
| 71 | <v-avatar size="27"> | 71 | <v-avatar size="27"> |
| 72 | <img src="/static/icon/search.png" alt="icon" /> | 72 | <img src="/static/icon/search.png" alt="icon" /> |
| 73 | </v-avatar> | 73 | </v-avatar> |
| 74 | </v-btn> | 74 | </v-btn> |
| 75 | </v-card-title> | 75 | </v-card-title> |
| 76 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 76 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-text-field | 78 | <v-text-field |
| 79 | autofocus | 79 | autofocus |
| 80 | v-model="search" | 80 | v-model="search" |
| 81 | label="Search" | 81 | label="Search" |
| 82 | prepend-inner-icon="search" | 82 | prepend-inner-icon="search" |
| 83 | color="primary" | 83 | color="primary" |
| 84 | ></v-text-field> | 84 | ></v-text-field> |
| 85 | <v-icon @click="closeSearch" color="error">close</v-icon> | 85 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | </v-toolbar> | 88 | </v-toolbar> |
| 89 | <v-data-table | 89 | <v-data-table |
| 90 | :headers="headers" | 90 | :headers="headers" |
| 91 | :items="markList" | 91 | :items="markList" |
| 92 | :pagination.sync="pagination" | 92 | :pagination.sync="pagination" |
| 93 | :search="search" | 93 | :search="search" |
| 94 | > | 94 | > |
| 95 | <template slot="items" slot-scope="props"> | 95 | <template slot="items" slot-scope="props"> |
| 96 | <tr class="tr"> | 96 | <tr class="tr"> |
| 97 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> | 97 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> |
| 98 | <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> | 98 | <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> |
| 99 | <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> | 99 | <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> |
| 100 | <td class="td td-row text-xs-center"> | 100 | <td class="td td-row text-xs-center"> |
| 101 | <span> | 101 | <span> |
| 102 | <img | 102 | <img |
| 103 | style="cursor:pointer; width:20px; height:18px; " | 103 | style="cursor:pointer; width:20px; height:18px; " |
| 104 | class="mr-3" | 104 | class="mr-3" |
| 105 | @click="editItem(props.item)" | 105 | @click="editItem(props.item)" |
| 106 | src="/static/icon/edit.png" | 106 | src="/static/icon/edit.png" |
| 107 | /> | 107 | /> |
| 108 | <img | 108 | <img |
| 109 | style="cursor:pointer; width:20px; height:20px; " | 109 | style="cursor:pointer; width:20px; height:20px; " |
| 110 | @click="deleteItem(props.item)" | 110 | @click="deleteItem(props.item)" |
| 111 | src="/static/icon/delete.png" | 111 | src="/static/icon/delete.png" |
| 112 | /> | 112 | /> |
| 113 | </span> | 113 | </span> |
| 114 | </td> | 114 | </td> |
| 115 | </tr> | 115 | </tr> |
| 116 | </template> | 116 | </template> |
| 117 | <v-alert | 117 | <v-alert |
| 118 | slot="no-results" | 118 | slot="no-results" |
| 119 | :value="true" | 119 | :value="true" |
| 120 | color="error" | 120 | color="error" |
| 121 | icon="warning" | 121 | icon="warning" |
| 122 | >Your search for "{{ search }}" found no results.</v-alert> | 122 | >Your search for "{{ search }}" found no results.</v-alert> |
| 123 | </v-data-table> | 123 | </v-data-table> |
| 124 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 124 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 125 | <v-dialog v-model="addMarkDistributionDialog" max-width="500px" persistent> | 125 | <v-dialog v-model="addMarkDistributionDialog" max-width="500px" persistent> |
| 126 | <v-card flat class="card-style pa-2" dark> | 126 | <v-card flat class="Card-style pa-2"> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs12> | 128 | <v-flex xs12> |
| 129 | <label class="title text-xs-center">Add Mark Distribution</label> | 129 | <label class="title text-xs-center">Add Mark Distribution</label> |
| 130 | <v-icon | 130 | <v-icon |
| 131 | size="24" | 131 | size="24" |
| 132 | class="right" | 132 | class="right" |
| 133 | @click="$refs.form.reset();addMarkDistributionDialog = false" | 133 | @click="$refs.form.reset();addMarkDistributionDialog = false" |
| 134 | >cancel</v-icon> | 134 | >cancel</v-icon> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-layout> | 136 | </v-layout> |
| 137 | <v-form ref="form" v-model="valid" lazy-validation> | 137 | <v-form ref="form" v-model="valid" lazy-validation> |
| 138 | <v-container fluid> | 138 | <v-container fluid> |
| 139 | <v-flex xs12> | 139 | <v-flex xs12> |
| 140 | <v-layout wrap> | 140 | <v-layout wrap> |
| 141 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 141 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 142 | <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> | 142 | <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> |
| 143 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> | 143 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs12 sm12 md7 class="ml-3"> | 145 | <v-flex xs12 sm12 md7 class="ml-3"> |
| 146 | <v-text-field | 146 | <v-text-field |
| 147 | v-model="mark.distributionType" | 147 | v-model="mark.distributionType" |
| 148 | placeholder="fill your Mark Distribution" | 148 | placeholder="fill your Mark Distribution" |
| 149 | :rules="markDistributionRules" | 149 | :rules="markDistributionRules" |
| 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> | 154 | <v-flex xs12> |
| 155 | <v-layout wrap> | 155 | <v-layout wrap> |
| 156 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 156 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 157 | <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> | 157 | <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> |
| 158 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> | 158 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> |
| 159 | </v-flex> | 159 | </v-flex> |
| 160 | <v-flex xs12 sm12 md7 class="ml-3"> | 160 | <v-flex xs12 sm12 md7 class="ml-3"> |
| 161 | <v-text-field | 161 | <v-text-field |
| 162 | placeholder="fill your Mark Value" | 162 | placeholder="fill your Mark Value" |
| 163 | :rules="markValueRules" | 163 | :rules="markValueRules" |
| 164 | v-model="mark.markValue" | 164 | v-model="mark.markValue" |
| 165 | type="text" | 165 | type="text" |
| 166 | required | 166 | required |
| 167 | ></v-text-field> | 167 | ></v-text-field> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-layout> | 169 | </v-layout> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | <v-layout> | 171 | <v-layout> |
| 172 | <v-flex xs12 sm12> | 172 | <v-flex xs12 sm12> |
| 173 | <v-layout> | 173 | <v-layout> |
| 174 | <v-spacer></v-spacer> | 174 | <v-spacer></v-spacer> |
| 175 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 175 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 176 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 176 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | </v-layout> | 179 | </v-layout> |
| 180 | </v-container> | 180 | </v-container> |
| 181 | </v-form> | 181 | </v-form> |
| 182 | </v-card> | 182 | </v-card> |
| 183 | </v-dialog> | 183 | </v-dialog> |
| 184 | <v-snackbar | 184 | <v-snackbar |
| 185 | :timeout="timeout" | 185 | :timeout="timeout" |
| 186 | :top="y === 'top'" | 186 | :top="y === 'top'" |
| 187 | :right="x === 'right'" | 187 | :right="x === 'right'" |
| 188 | :vertical="mode === 'vertical'" | 188 | :vertical="mode === 'vertical'" |
| 189 | v-model="snackbar" | 189 | v-model="snackbar" |
| 190 | :color="color" | 190 | :color="color" |
| 191 | >{{ text }}</v-snackbar> | 191 | >{{ text }}</v-snackbar> |
| 192 | <div class="loader" v-if="showLoader"> | 192 | <div class="loader" v-if="showLoader"> |
| 193 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 193 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 194 | </div> | 194 | </div> |
| 195 | </v-container> | 195 | </v-container> |
| 196 | </template> | 196 | </template> |
| 197 | 197 | ||
| 198 | <script> | 198 | <script> |
| 199 | import http from "@/Services/http.js"; | 199 | import http from "@/Services/http.js"; |
| 200 | import Util from "@/util"; | 200 | import Util from "@/util"; |
| 201 | 201 | ||
| 202 | export default { | 202 | export default { |
| 203 | data: () => ({ | 203 | data: () => ({ |
| 204 | snackbar: false, | 204 | snackbar: false, |
| 205 | y: "top", | 205 | y: "top", |
| 206 | x: "right", | 206 | x: "right", |
| 207 | mode: "", | 207 | mode: "", |
| 208 | color: "", | 208 | color: "", |
| 209 | timeout: 5000, | 209 | timeout: 5000, |
| 210 | text: "", | 210 | text: "", |
| 211 | loading: false, | 211 | loading: false, |
| 212 | search: "", | 212 | search: "", |
| 213 | showLoader: false, | 213 | showLoader: false, |
| 214 | show: true, | 214 | show: true, |
| 215 | showSearch: false, | 215 | showSearch: false, |
| 216 | editMarkDistributionDialog: false, | 216 | editMarkDistributionDialog: false, |
| 217 | addMarkDistributionDialog: false, | 217 | addMarkDistributionDialog: false, |
| 218 | valid: true, | 218 | valid: true, |
| 219 | isActive: true, | 219 | isActive: true, |
| 220 | newActive: false, | 220 | newActive: false, |
| 221 | pagination: { | 221 | pagination: { |
| 222 | rowsPerPage: 15, | 222 | rowsPerPage: 15, |
| 223 | }, | 223 | }, |
| 224 | markDistributionRules: [ | 224 | markDistributionRules: [ |
| 225 | (v) => !!v || " Mark Distribution type is required", | 225 | (v) => !!v || " Mark Distribution type is required", |
| 226 | ], | 226 | ], |
| 227 | markValueRules: [(v) => !!v || "Mark Value is required"], | 227 | markValueRules: [(v) => !!v || "Mark Value is required"], |
| 228 | headers: [ | 228 | headers: [ |
| 229 | { | 229 | { |
| 230 | text: "No", | 230 | text: "No", |
| 231 | align: "center", | 231 | align: "center", |
| 232 | sortable: false, | 232 | sortable: false, |
| 233 | value: "No", | 233 | value: "No", |
| 234 | }, | 234 | }, |
| 235 | { | 235 | { |
| 236 | text: " Mark Distribution Type", | 236 | text: " Mark Distribution Type", |
| 237 | value: " distributionType", | 237 | value: " distributionType", |
| 238 | sortable: false, | 238 | sortable: false, |
| 239 | align: "center", | 239 | align: "center", |
| 240 | }, | 240 | }, |
| 241 | { | 241 | { |
| 242 | text: " Mark Value", | 242 | text: " Mark Value", |
| 243 | value: "markValue", | 243 | value: "markValue", |
| 244 | sortable: false, | 244 | sortable: false, |
| 245 | align: "center", | 245 | align: "center", |
| 246 | }, | 246 | }, |
| 247 | { text: "Action", value: "", sortable: false, align: "center" }, | 247 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 248 | ], | 248 | ], |
| 249 | markList: [], | 249 | markList: [], |
| 250 | editedIndex: -1, | 250 | editedIndex: -1, |
| 251 | mark: {}, | 251 | mark: {}, |
| 252 | editedItem: {}, | 252 | editedItem: {}, |
| 253 | token: "", | 253 | token: "", |
| 254 | }), | 254 | }), |
| 255 | methods: { | 255 | methods: { |
| 256 | getMarkDistributions() { | 256 | getMarkDistributions() { |
| 257 | this.showLoader = true; | 257 | this.showLoader = true; |
| 258 | http() | 258 | http() |
| 259 | .get("/getMarkDistributionsList", { | 259 | .get("/getMarkDistributionsList", { |
| 260 | headers: { Authorization: "Bearer " + this.token }, | 260 | headers: { Authorization: "Bearer " + this.token }, |
| 261 | }) | 261 | }) |
| 262 | .then((response) => { | 262 | .then((response) => { |
| 263 | this.markList = response.data.data; | 263 | this.markList = response.data.data; |
| 264 | this.showLoader = false; | 264 | this.showLoader = false; |
| 265 | }) | 265 | }) |
| 266 | .catch((error) => { | 266 | .catch((error) => { |
| 267 | this.showLoader = false; | 267 | this.showLoader = false; |
| 268 | // if (error.response.status === 401) { | 268 | // if (error.response.status === 401) { |
| 269 | // this.$router.replace({ path: "/" }); | 269 | // this.$router.replace({ path: "/" }); |
| 270 | // this.$store.dispatch("setToken", null); | 270 | // this.$store.dispatch("setToken", null); |
| 271 | // this.$store.dispatch("Id", null); | 271 | // this.$store.dispatch("Id", null); |
| 272 | // } | 272 | // } |
| 273 | }); | 273 | }); |
| 274 | }, | 274 | }, |
| 275 | editItem(item) { | 275 | editItem(item) { |
| 276 | this.editedIndex = this.markList.indexOf(item); | 276 | this.editedIndex = this.markList.indexOf(item); |
| 277 | this.editedItem = Object.assign({}, item); | 277 | this.editedItem = Object.assign({}, item); |
| 278 | this.editMarkDistributionDialog = true; | 278 | this.editMarkDistributionDialog = true; |
| 279 | }, | 279 | }, |
| 280 | deleteItem(item) { | 280 | deleteItem(item) { |
| 281 | let deleteParticularMark = { | 281 | let deleteParticularMark = { |
| 282 | markDistributionId: item._id, | 282 | markDistributionId: item._id, |
| 283 | }; | 283 | }; |
| 284 | http() | 284 | http() |
| 285 | .delete( | 285 | .delete( |
| 286 | "/deleteMarkDistribution", | 286 | "/deleteMarkDistribution", |
| 287 | confirm("Are you sure you want to delete this?") && { | 287 | confirm("Are you sure you want to delete this?") && { |
| 288 | params: deleteParticularMark, | 288 | params: deleteParticularMark, |
| 289 | } | 289 | } |
| 290 | ) | 290 | ) |
| 291 | .then((response) => { | 291 | .then((response) => { |
| 292 | this.snackbar = true; | 292 | this.snackbar = true; |
| 293 | this.text = response.data.message; | 293 | this.text = response.data.message; |
| 294 | this.getMarkDistributions(); | 294 | this.getMarkDistributions(); |
| 295 | }) | 295 | }) |
| 296 | .catch((error) => { | 296 | .catch((error) => { |
| 297 | // console.log(error); | 297 | // console.log(error); |
| 298 | this.snackbar = true; | 298 | this.snackbar = true; |
| 299 | this.color = "error"; | 299 | this.color = "error"; |
| 300 | this.text = error.response.data.message; | 300 | this.text = error.response.data.message; |
| 301 | }); | 301 | }); |
| 302 | }, | 302 | }, |
| 303 | close() { | 303 | close() { |
| 304 | this.editMarkDistributionDialog = false; | 304 | this.editMarkDistributionDialog = false; |
| 305 | }, | 305 | }, |
| 306 | submit() { | 306 | submit() { |
| 307 | if (this.$refs.form.validate()) { | 307 | if (this.$refs.form.validate()) { |
| 308 | this.loading = true; | 308 | this.loading = true; |
| 309 | http() | 309 | http() |
| 310 | .post("/createMarkDistribution", this.mark) | 310 | .post("/createMarkDistribution", this.mark) |
| 311 | .then((response) => { | 311 | .then((response) => { |
| 312 | this.snackbar = true; | 312 | this.snackbar = true; |
| 313 | this.text = response.data.message; | 313 | this.text = response.data.message; |
| 314 | this.getMarkDistributions(); | 314 | this.getMarkDistributions(); |
| 315 | this.clear(); | 315 | this.clear(); |
| 316 | this.addMarkDistributionDialog = false; | 316 | this.addMarkDistributionDialog = false; |
| 317 | this.loading = false; | 317 | this.loading = false; |
| 318 | }) | 318 | }) |
| 319 | .catch((error) => { | 319 | .catch((error) => { |
| 320 | this.snackbar = true; | 320 | this.snackbar = true; |
| 321 | this.text = error.response.data.message; | 321 | this.text = error.response.data.message; |
| 322 | this.loading = false; | 322 | this.loading = false; |
| 323 | }); | 323 | }); |
| 324 | } | 324 | } |
| 325 | }, | 325 | }, |
| 326 | clear() { | 326 | clear() { |
| 327 | this.$refs.form.reset(); | 327 | this.$refs.form.reset(); |
| 328 | }, | 328 | }, |
| 329 | save() { | 329 | save() { |
| 330 | (this.editedItem.markDistributionId = this.editedItem._id), | 330 | (this.editedItem.markDistributionId = this.editedItem._id), |
| 331 | http() | 331 | http() |
| 332 | .put("/updateMarkDistribution", this.editedItem) | 332 | .put("/updateMarkDistribution", this.editedItem) |
| 333 | .then((response) => { | 333 | .then((response) => { |
| 334 | this.snackbar = true; | 334 | this.snackbar = true; |
| 335 | this.text = "Successfully Edit Notification"; | 335 | this.text = "Successfully Edit Notification"; |
| 336 | this.color = "green"; | 336 | this.color = "green"; |
| 337 | this.getMarkDistributions(); | 337 | this.getMarkDistributions(); |
| 338 | this.close(); | 338 | this.close(); |
| 339 | }) | 339 | }) |
| 340 | .catch((error) => { | 340 | .catch((error) => { |
| 341 | // console.log(error); | 341 | // console.log(error); |
| 342 | this.snackbar = true; | 342 | this.snackbar = true; |
| 343 | this.text = error.response.data.message; | 343 | this.text = error.response.data.message; |
| 344 | this.color = "red"; | 344 | this.color = "red"; |
| 345 | }); | 345 | }); |
| 346 | }, | 346 | }, |
| 347 | displaySearch() { | 347 | displaySearch() { |
| 348 | (this.show = false), (this.showSearch = true); | 348 | (this.show = false), (this.showSearch = true); |
| 349 | }, | 349 | }, |
| 350 | closeSearch() { | 350 | closeSearch() { |
| 351 | this.showSearch = false; | 351 | this.showSearch = false; |
| 352 | this.show = true; | 352 | this.show = true; |
| 353 | this.search = ""; | 353 | this.search = ""; |
| 354 | }, | 354 | }, |
| 355 | }, | 355 | }, |
| 356 | mounted() { | 356 | mounted() { |
| 357 | this.token = this.$store.state.token; | 357 | this.token = this.$store.state.token; |
| 358 | this.getMarkDistributions(); | 358 | this.getMarkDistributions(); |
| 359 | }, | 359 | }, |
| 360 | }; | 360 | }; |
| 361 | </script> | 361 | </script> |
| 362 | <style scoped> | 362 | <style scoped> |
src/pages/News/news.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT NEWS ****** --> | 3 | <!-- ****** EDIT NEWS ****** --> |
| 4 | <v-dialog v-model="editNewsDialog" max-width="600px" persistent> | 4 | <v-dialog v-model="editNewsDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit News</label> | 8 | <label class="title text-xs-center">Edit News</label> |
| 9 | <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout row> | 13 | <v-layout row> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <input | 15 | <input |
| 16 | type="file" | 16 | type="file" |
| 17 | style="display: none" | 17 | style="display: none" |
| 18 | ref="image" | 18 | ref="image" |
| 19 | accept="image/*" | 19 | accept="image/*" |
| 20 | multiple | 20 | multiple |
| 21 | @change="onFilePicked" | 21 | @change="onFilePicked" |
| 22 | /> | 22 | /> |
| 23 | <v-layout justify-center> | 23 | <v-layout justify-center> |
| 24 | <v-flex | 24 | <v-flex |
| 25 | xs12 | 25 | xs12 |
| 26 | sm12 | 26 | sm12 |
| 27 | md3 | 27 | md3 |
| 28 | v-for="Image in editedItem.newsImageUrl" | 28 | v-for="Image in editedItem.newsImageUrl" |
| 29 | :key="Image._id" | 29 | :key="Image._id" |
| 30 | v-if="editedItem.newsImageUrl" | 30 | v-if="editedItem.newsImageUrl" |
| 31 | class="profile-image-wrapper" | 31 | class="profile-image-wrapper" |
| 32 | > | 32 | > |
| 33 | <img | 33 | <img |
| 34 | :src="Image.imageUrl" | 34 | :src="Image.imageUrl" |
| 35 | height="100" | 35 | height="100" |
| 36 | width="100" | 36 | width="100" |
| 37 | alt="News" | 37 | alt="News" |
| 38 | class="pa-2 imgNews" | 38 | class="pa-2 imgNews" |
| 39 | /> | 39 | /> |
| 40 | <v-icon | 40 | <v-icon |
| 41 | class="red edit-profile-icon" | 41 | class="red edit-profile-icon" |
| 42 | dark | 42 | dark |
| 43 | @click="deleteImage(Image._id,editedItem._id)" | 43 | @click="deleteImage(Image._id,editedItem._id)" |
| 44 | >close</v-icon> | 44 | >close</v-icon> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex v-for="(file, index) in files" :key="index"> | 46 | <v-flex v-for="(file, index) in files" :key="index"> |
| 47 | <img :src="file" height="100" width="100" class="pa-2" /> | 47 | <img :src="file" height="100" width="100" class="pa-2" /> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <img | 49 | <img |
| 50 | src="/static/icon/user.png" | 50 | src="/static/icon/user.png" |
| 51 | v-if="files == '' && editedItem.newsImageUrl == ''" | 51 | v-if="files == '' && editedItem.newsImageUrl == ''" |
| 52 | height="100" | 52 | height="100" |
| 53 | width="100" | 53 | width="100" |
| 54 | alt="News" | 54 | alt="News" |
| 55 | /> | 55 | /> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <!-- </v-layout> --> | 59 | <!-- </v-layout> --> |
| 60 | <v-layout wrap> | 60 | <v-layout wrap> |
| 61 | <v-flex xs12 sm12> | 61 | <v-flex xs12 sm12> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right">Title:</label> | 64 | <label class="right">Title:</label> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex sm6 xs8 class="ml-3"> | 66 | <v-flex sm6 xs8 class="ml-3"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | v-model="editedItem.title" | 68 | v-model="editedItem.title" |
| 69 | placeholder="fill your Title" | 69 | placeholder="fill your Title" |
| 70 | name="name" | 70 | name="name" |
| 71 | type="text" | 71 | type="text" |
| 72 | required | 72 | required |
| 73 | ></v-text-field> | 73 | ></v-text-field> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex xs12 sm12> | 77 | <v-flex xs12 sm12> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs4 class="pt-4 subheading"> | 79 | <v-flex xs4 class="pt-4 subheading"> |
| 80 | <label class="right">Description:</label> | 80 | <label class="right">Description:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm6 xs8 class="ml-3"> | 82 | <v-flex sm6 xs8 class="ml-3"> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | placeholder="fill your Description" | 84 | placeholder="fill your Description" |
| 85 | v-model="editedItem.description" | 85 | v-model="editedItem.description" |
| 86 | type="text" | 86 | type="text" |
| 87 | name="email" | 87 | name="email" |
| 88 | required | 88 | required |
| 89 | ></v-text-field> | 89 | ></v-text-field> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | </v-layout> | 91 | </v-layout> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs12> | 93 | <v-flex xs12> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 class="pt-4 subheading"> | 95 | <v-flex xs4 class="pt-4 subheading"> |
| 96 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> | 96 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> |
| 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-flex sm6 xs8 class="ml-3"> | 99 | <v-flex sm6 xs8 class="ml-3"> |
| 100 | <v-text-field | 100 | <v-text-field |
| 101 | label="Select Image" | 101 | label="Select Image" |
| 102 | @click="pickFile" | 102 | @click="pickFile" |
| 103 | v-model="imageName" | 103 | v-model="imageName" |
| 104 | append-icon="attach_file" | 104 | append-icon="attach_file" |
| 105 | multiple | 105 | multiple |
| 106 | ></v-text-field> | 106 | ></v-text-field> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> | 112 | <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> |
| 113 | <v-card-actions> | 113 | <v-card-actions> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 115 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 116 | </v-card-actions> | 116 | </v-card-actions> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> | 118 | <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> |
| 119 | <v-card-actions> | 119 | <v-card-actions> |
| 120 | <v-spacer></v-spacer> | 120 | <v-spacer></v-spacer> |
| 121 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 121 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 122 | <v-spacer></v-spacer> | 122 | <v-spacer></v-spacer> |
| 123 | </v-card-actions> | 123 | </v-card-actions> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-layout> | 125 | </v-layout> |
| 126 | </v-card-text> | 126 | </v-card-text> |
| 127 | </v-card> | 127 | </v-card> |
| 128 | </v-dialog> | 128 | </v-dialog> |
| 129 | <!-- ****** PROFILE NEWS ****** --> | 129 | <!-- ****** PROFILE NEWS ****** --> |
| 130 | <v-dialog v-model="dialog1" max-width="500px" persistent> | 130 | <v-dialog v-model="dialog1" max-width="500px" persistent> |
| 131 | <v-card flat class="card-style pa-3" dark> | 131 | <v-card flat class="Card-style pa-3"> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs12> | 133 | <v-flex xs12> |
| 134 | <label class="title text-xs-center">View News</label> | 134 | <label class="title text-xs-center">View News</label> |
| 135 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> | 135 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | </v-layout> | 137 | </v-layout> |
| 138 | <v-card-text> | 138 | <v-card-text> |
| 139 | <v-flex align-center justify-center layout text-xs-center> | 139 | <v-flex align-center justify-center layout text-xs-center> |
| 140 | <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> | 140 | <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> |
| 141 | <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> | 141 | <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> |
| 142 | </span> | 142 | </span> |
| 143 | <img | 143 | <img |
| 144 | src="/static/icon/user.png" | 144 | src="/static/icon/user.png" |
| 145 | v-if="editedItem.newsImageUrl == ''" | 145 | v-if="editedItem.newsImageUrl == ''" |
| 146 | height="80" | 146 | height="80" |
| 147 | width="80" | 147 | width="80" |
| 148 | alt="News" | 148 | alt="News" |
| 149 | /> | 149 | /> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | <v-container grid-list-md> | 151 | <v-container grid-list-md> |
| 152 | <v-layout wrap> | 152 | <v-layout wrap> |
| 153 | <v-flex> | 153 | <v-flex> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs5 sm6> | 155 | <v-flex xs5 sm6> |
| 156 | <h5 class="right my-1"> | 156 | <h5 class="right my-1"> |
| 157 | <b>Title:</b> | 157 | <b>Title:</b> |
| 158 | </h5> | 158 | </h5> |
| 159 | </v-flex> | 159 | </v-flex> |
| 160 | <v-flex sm6 xs8> | 160 | <v-flex sm6 xs8> |
| 161 | <h5 class="my-1">{{ editedItem.title }}</h5> | 161 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs5 sm6> | 165 | <v-flex xs5 sm6> |
| 166 | <h5 class="right my-1"> | 166 | <h5 class="right my-1"> |
| 167 | <b>Description:</b> | 167 | <b>Description:</b> |
| 168 | </h5> | 168 | </h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex sm6 xs8> | 170 | <v-flex sm6 xs8> |
| 171 | <h5 class="my-1">{{ editedItem.description }}</h5> | 171 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-container> | 176 | </v-container> |
| 177 | </v-card-text> | 177 | </v-card-text> |
| 178 | </v-card> | 178 | </v-card> |
| 179 | </v-dialog> | 179 | </v-dialog> |
| 180 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> | 180 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> |
| 181 | <v-toolbar color="transparent" flat> | 181 | <v-toolbar color="transparent" flat> |
| 182 | <v-btn | 182 | <v-btn |
| 183 | fab | 183 | fab |
| 184 | dark | 184 | dark |
| 185 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 185 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 186 | small | 186 | small |
| 187 | @click="addNewsDialog = true" | 187 | @click="addNewsDialog = true" |
| 188 | > | 188 | > |
| 189 | <v-icon dark>add</v-icon> | 189 | <v-icon dark>add</v-icon> |
| 190 | </v-btn> | 190 | </v-btn> |
| 191 | <v-btn | 191 | <v-btn |
| 192 | round | 192 | round |
| 193 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 193 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 194 | dark | 194 | dark |
| 195 | @click="addNewsDialog = true" | 195 | @click="addNewsDialog = true" |
| 196 | > | 196 | > |
| 197 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add News | 197 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add News |
| 198 | </v-btn> | 198 | </v-btn> |
| 199 | <v-spacer></v-spacer> | 199 | <v-spacer></v-spacer> |
| 200 | <v-card-title class="body-1" v-show="show"> | 200 | <v-card-title class="body-1" v-show="show"> |
| 201 | <v-btn icon large flat @click="displaySearch"> | 201 | <v-btn icon large flat @click="displaySearch"> |
| 202 | <v-avatar size="27"> | 202 | <v-avatar size="27"> |
| 203 | <img src="/static/icon/search.png" alt="icon" /> | 203 | <img src="/static/icon/search.png" alt="icon" /> |
| 204 | </v-avatar> | 204 | </v-avatar> |
| 205 | </v-btn> | 205 | </v-btn> |
| 206 | </v-card-title> | 206 | </v-card-title> |
| 207 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 207 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 208 | <v-layout> | 208 | <v-layout> |
| 209 | <v-text-field | 209 | <v-text-field |
| 210 | autofocus | 210 | autofocus |
| 211 | v-model="search" | 211 | v-model="search" |
| 212 | label="Search" | 212 | label="Search" |
| 213 | prepend-inner-icon="search" | 213 | prepend-inner-icon="search" |
| 214 | color="primary" | 214 | color="primary" |
| 215 | ></v-text-field> | 215 | ></v-text-field> |
| 216 | <v-icon @click="closeSearch" color="error">close</v-icon> | 216 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 217 | </v-layout> | 217 | </v-layout> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | </v-toolbar> | 219 | </v-toolbar> |
| 220 | <v-data-table | 220 | <v-data-table |
| 221 | :headers="headers" | 221 | :headers="headers" |
| 222 | :items="desserts" | 222 | :items="desserts" |
| 223 | :pagination.sync="pagination" | 223 | :pagination.sync="pagination" |
| 224 | :search="search" | 224 | :search="search" |
| 225 | > | 225 | > |
| 226 | <template slot="items" slot-scope="props"> | 226 | <template slot="items" slot-scope="props"> |
| 227 | <tr class="tr"> | 227 | <tr class="tr"> |
| 228 | <td class="td td-row">{{ props.index + 1}}</td> | 228 | <td class="td td-row">{{ props.index + 1}}</td> |
| 229 | <td class="td td-row text-xs-center"> | 229 | <td class="td td-row text-xs-center"> |
| 230 | <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> | 230 | <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> |
| 231 | <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> | 231 | <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> |
| 232 | </span> | 232 | </span> |
| 233 | <img | 233 | <img |
| 234 | src="/static/icon/user.png" | 234 | src="/static/icon/user.png" |
| 235 | v-if="props.item.newsImageUrl == ''" | 235 | v-if="props.item.newsImageUrl == ''" |
| 236 | width="40" | 236 | width="40" |
| 237 | alt="News" | 237 | alt="News" |
| 238 | /> | 238 | /> |
| 239 | </td> | 239 | </td> |
| 240 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 240 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 241 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 241 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 242 | 242 | ||
| 243 | <td class="td td-row text-xs-center"> | 243 | <td class="td td-row text-xs-center"> |
| 244 | <span> | 244 | <span> |
| 245 | <v-tooltip top> | 245 | <v-tooltip top> |
| 246 | <img | 246 | <img |
| 247 | slot="activator" | 247 | slot="activator" |
| 248 | style="cursor:pointer; width:25px; height:25px; " | 248 | style="cursor:pointer; width:25px; height:25px; " |
| 249 | class="mr-3" | 249 | class="mr-3" |
| 250 | @click="profile(props.item)" | 250 | @click="profile(props.item)" |
| 251 | src="/static/icon/view.png" | 251 | src="/static/icon/view.png" |
| 252 | /> | 252 | /> |
| 253 | <span>View</span> | 253 | <span>View</span> |
| 254 | </v-tooltip> | 254 | </v-tooltip> |
| 255 | <v-tooltip top> | 255 | <v-tooltip top> |
| 256 | <img | 256 | <img |
| 257 | slot="activator" | 257 | slot="activator" |
| 258 | style="cursor:pointer; width:20px; height:18px; " | 258 | style="cursor:pointer; width:20px; height:18px; " |
| 259 | class="mr-3" | 259 | class="mr-3" |
| 260 | @click="editItem(props.item)" | 260 | @click="editItem(props.item)" |
| 261 | src="/static/icon/edit.png" | 261 | src="/static/icon/edit.png" |
| 262 | /> | 262 | /> |
| 263 | <span>Edit</span> | 263 | <span>Edit</span> |
| 264 | </v-tooltip> | 264 | </v-tooltip> |
| 265 | <v-tooltip top> | 265 | <v-tooltip top> |
| 266 | <img | 266 | <img |
| 267 | slot="activator" | 267 | slot="activator" |
| 268 | style="cursor:pointer; width:20px; height:20px; " | 268 | style="cursor:pointer; width:20px; height:20px; " |
| 269 | @click="deleteItem(props.item)" | 269 | @click="deleteItem(props.item)" |
| 270 | src="/static/icon/delete.png" | 270 | src="/static/icon/delete.png" |
| 271 | /> | 271 | /> |
| 272 | <span>Delete</span> | 272 | <span>Delete</span> |
| 273 | </v-tooltip> | 273 | </v-tooltip> |
| 274 | </span> | 274 | </span> |
| 275 | </td> | 275 | </td> |
| 276 | </tr> | 276 | </tr> |
| 277 | </template> | 277 | </template> |
| 278 | <v-alert | 278 | <v-alert |
| 279 | slot="no-results" | 279 | slot="no-results" |
| 280 | :value="true" | 280 | :value="true" |
| 281 | color="error" | 281 | color="error" |
| 282 | icon="warning" | 282 | icon="warning" |
| 283 | >Your search for "{{ search }}" found no results.</v-alert> | 283 | >Your search for "{{ search }}" found no results.</v-alert> |
| 284 | </v-data-table> | 284 | </v-data-table> |
| 285 | <!-- ****** ADD NEWS ****** --> | 285 | <!-- ****** ADD NEWS ****** --> |
| 286 | <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog" persistent> | 286 | <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog" persistent> |
| 287 | <v-card flat class="card-style pa-2" dark> | 287 | <v-card flat class="Card-style pa-2"> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs12> | 289 | <v-flex xs12> |
| 290 | <label class="title text-xs-center">Add News</label> | 290 | <label class="title text-xs-center">Add News</label> |
| 291 | <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon> | 291 | <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon> |
| 292 | </v-flex> | 292 | </v-flex> |
| 293 | </v-layout> | 293 | </v-layout> |
| 294 | <v-form ref="form" v-model="valid" lazy-validation> | 294 | <v-form ref="form" v-model="valid" lazy-validation> |
| 295 | <v-container fluid> | 295 | <v-container fluid> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 297 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 298 | <input | 298 | <input |
| 299 | type="file" | 299 | type="file" |
| 300 | style="display: none" | 300 | style="display: none" |
| 301 | ref="image" | 301 | ref="image" |
| 302 | accept="image/*" | 302 | accept="image/*" |
| 303 | multiple | 303 | multiple |
| 304 | @change="onFilePicked" | 304 | @change="onFilePicked" |
| 305 | /> | 305 | /> |
| 306 | <v-layout justify-center> | 306 | <v-layout justify-center> |
| 307 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> | 307 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> |
| 308 | <img :src="file" height="100" width="100;" class="imgNews" /> | 308 | <img :src="file" height="100" width="100;" class="imgNews" /> |
| 309 | </v-flex> | 309 | </v-flex> |
| 310 | </v-layout> | 310 | </v-layout> |
| 311 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> | 311 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 sm4 class="pt-4 subheading"> | 316 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 317 | <label class="right">Title:</label> | 317 | <label class="right">Title:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex sm6 xs8 class="ml-3"> | 319 | <v-flex sm6 xs8 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="addNews.title" | 321 | v-model="addNews.title" |
| 322 | placeholder="fill your Title" | 322 | placeholder="fill your Title" |
| 323 | name="name" | 323 | name="name" |
| 324 | type="text" | 324 | type="text" |
| 325 | :rules="titleRules" | 325 | :rules="titleRules" |
| 326 | required | 326 | required |
| 327 | ></v-text-field> | 327 | ></v-text-field> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | </v-layout> | 329 | </v-layout> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | <v-flex xs12> | 331 | <v-flex xs12> |
| 332 | <v-layout> | 332 | <v-layout> |
| 333 | <v-flex xs4 class="pt-4 subheading"> | 333 | <v-flex xs4 class="pt-4 subheading"> |
| 334 | <label class="right">Description:</label> | 334 | <label class="right">Description:</label> |
| 335 | </v-flex> | 335 | </v-flex> |
| 336 | <v-flex sm6 xs8 class="ml-3"> | 336 | <v-flex sm6 xs8 class="ml-3"> |
| 337 | <v-text-field | 337 | <v-text-field |
| 338 | placeholder="fill your Description" | 338 | placeholder="fill your Description" |
| 339 | :rules="descriptionRules" | 339 | :rules="descriptionRules" |
| 340 | v-model="addNews.description" | 340 | v-model="addNews.description" |
| 341 | type="text" | 341 | type="text" |
| 342 | name="email" | 342 | name="email" |
| 343 | required | 343 | required |
| 344 | ></v-text-field> | 344 | ></v-text-field> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | <v-flex xs12> | 348 | <v-flex xs12> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs4 class="pt-4 subheading"> | 350 | <v-flex xs4 class="pt-4 subheading"> |
| 351 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 351 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | <v-flex xs8 sm6 class="ml-3"> | 354 | <v-flex xs8 sm6 class="ml-3"> |
| 355 | <v-text-field | 355 | <v-text-field |
| 356 | label="Select Image" | 356 | label="Select Image" |
| 357 | @click="pickFile" | 357 | @click="pickFile" |
| 358 | v-model="imageName" | 358 | v-model="imageName" |
| 359 | append-icon="attach_file" | 359 | append-icon="attach_file" |
| 360 | multiple | 360 | multiple |
| 361 | ></v-text-field> | 361 | ></v-text-field> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | <v-layout> | 365 | <v-layout> |
| 366 | <v-flex xs11> | 366 | <v-flex xs11> |
| 367 | <v-layout> | 367 | <v-layout> |
| 368 | <v-spacer></v-spacer> | 368 | <v-spacer></v-spacer> |
| 369 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 369 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 370 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 370 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | </v-layout> | 373 | </v-layout> |
| 374 | </v-container> | 374 | </v-container> |
| 375 | </v-form> | 375 | </v-form> |
| 376 | </v-card> | 376 | </v-card> |
| 377 | </v-dialog> | 377 | </v-dialog> |
| 378 | <div class="loader" v-if="showLoader"> | 378 | <div class="loader" v-if="showLoader"> |
| 379 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 379 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 380 | </div> | 380 | </div> |
| 381 | </v-container> | 381 | </v-container> |
| 382 | </template> | 382 | </template> |
| 383 | 383 | ||
| 384 | <script> | 384 | <script> |
| 385 | import http from "@/Services/http.js"; | 385 | import http from "@/Services/http.js"; |
| 386 | 386 | ||
| 387 | export default { | 387 | export default { |
| 388 | data: () => ({ | 388 | data: () => ({ |
| 389 | snackbar: false, | 389 | snackbar: false, |
| 390 | y: "top", | 390 | y: "top", |
| 391 | x: "right", | 391 | x: "right", |
| 392 | mode: "", | 392 | mode: "", |
| 393 | timeout: 5000, | 393 | timeout: 5000, |
| 394 | color: "", | 394 | color: "", |
| 395 | text: "", | 395 | text: "", |
| 396 | loading: false, | 396 | loading: false, |
| 397 | date: null, | 397 | date: null, |
| 398 | search: "", | 398 | search: "", |
| 399 | show: true, | 399 | show: true, |
| 400 | showSearch: false, | 400 | showSearch: false, |
| 401 | showLoader: false, | 401 | showLoader: false, |
| 402 | editNewsDialog: false, | 402 | editNewsDialog: false, |
| 403 | addNewsDialog: false, | 403 | addNewsDialog: false, |
| 404 | dialog1: false, | 404 | dialog1: false, |
| 405 | valid: true, | 405 | valid: true, |
| 406 | addclass: [], | 406 | addclass: [], |
| 407 | addSection: [], | 407 | addSection: [], |
| 408 | pagination: { | 408 | pagination: { |
| 409 | rowsPerPage: 10, | 409 | rowsPerPage: 10, |
| 410 | }, | 410 | }, |
| 411 | imageName: "", | 411 | imageName: "", |
| 412 | imageUrl: "", | 412 | imageUrl: "", |
| 413 | imageFile: "", | 413 | imageFile: "", |
| 414 | image: [], | 414 | image: [], |
| 415 | upload: "", | 415 | upload: "", |
| 416 | files: [], | 416 | files: [], |
| 417 | titleRules: [(v) => !!v || " Tilte is required"], | 417 | titleRules: [(v) => !!v || " Tilte is required"], |
| 418 | descriptionRules: [(v) => !!v || " Description is required"], | 418 | descriptionRules: [(v) => !!v || " Description is required"], |
| 419 | headers: [ | 419 | headers: [ |
| 420 | { | 420 | { |
| 421 | align: "justify-center", | 421 | align: "justify-center", |
| 422 | text: "No", | 422 | text: "No", |
| 423 | sortable: false, | 423 | sortable: false, |
| 424 | value: "No", | 424 | value: "No", |
| 425 | }, | 425 | }, |
| 426 | { text: "Image", vaue: "image", sortable: false, align: "center" }, | 426 | { text: "Image", vaue: "image", sortable: false, align: "center" }, |
| 427 | { text: "Title", value: "title", sortable: false, align: "center" }, | 427 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 428 | { | 428 | { |
| 429 | text: "Description", | 429 | text: "Description", |
| 430 | value: "description", | 430 | value: "description", |
| 431 | sortable: false, | 431 | sortable: false, |
| 432 | align: "center", | 432 | align: "center", |
| 433 | }, | 433 | }, |
| 434 | { text: "Action", value: "", sortable: false, align: "center" }, | 434 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 435 | ], | 435 | ], |
| 436 | desserts: [], | 436 | desserts: [], |
| 437 | editedIndex: -1, | 437 | editedIndex: -1, |
| 438 | addNews: { | 438 | addNews: { |
| 439 | title: "", | 439 | title: "", |
| 440 | description: "", | 440 | description: "", |
| 441 | }, | 441 | }, |
| 442 | editedItem: { | 442 | editedItem: { |
| 443 | title: "", | 443 | title: "", |
| 444 | description: "", | 444 | description: "", |
| 445 | }, | 445 | }, |
| 446 | defaultItem: { | 446 | defaultItem: { |
| 447 | title: "", | 447 | title: "", |
| 448 | description: "", | 448 | description: "", |
| 449 | }, | 449 | }, |
| 450 | }), | 450 | }), |
| 451 | watch: { | 451 | watch: { |
| 452 | addNewsDialog: function (val) { | 452 | addNewsDialog: function (val) { |
| 453 | if (!val) { | 453 | if (!val) { |
| 454 | this.addNews = []; | 454 | this.addNews = []; |
| 455 | this.imageName = ""; | 455 | this.imageName = ""; |
| 456 | this.imageFile = ""; | 456 | this.imageFile = ""; |
| 457 | this.imageUrl = ""; | 457 | this.imageUrl = ""; |
| 458 | this.files = []; | 458 | this.files = []; |
| 459 | } | 459 | } |
| 460 | }, | 460 | }, |
| 461 | }, | 461 | }, |
| 462 | methods: { | 462 | methods: { |
| 463 | getSections(_id) { | 463 | getSections(_id) { |
| 464 | var token = this.$store.state.token; | 464 | var token = this.$store.state.token; |
| 465 | http() | 465 | http() |
| 466 | .get( | 466 | .get( |
| 467 | "/getSectionsList", | 467 | "/getSectionsList", |
| 468 | { params: { classId: _id } }, | 468 | { params: { classId: _id } }, |
| 469 | { | 469 | { |
| 470 | headers: { Authorization: "Bearer " + token }, | 470 | headers: { Authorization: "Bearer " + token }, |
| 471 | } | 471 | } |
| 472 | ) | 472 | ) |
| 473 | .then((response) => { | 473 | .then((response) => { |
| 474 | this.addSection = response.data.data; | 474 | this.addSection = response.data.data; |
| 475 | }) | 475 | }) |
| 476 | .catch((err) => { | 476 | .catch((err) => { |
| 477 | // console.log("err====>", err); | 477 | // console.log("err====>", err); |
| 478 | this.snackbar = true; | 478 | this.snackbar = true; |
| 479 | this.color = "error"; | 479 | this.color = "error"; |
| 480 | this.text = error.response.data.message; | 480 | this.text = error.response.data.message; |
| 481 | }); | 481 | }); |
| 482 | }, | 482 | }, |
| 483 | pickFile() { | 483 | pickFile() { |
| 484 | this.$refs.image.click(); | 484 | this.$refs.image.click(); |
| 485 | }, | 485 | }, |
| 486 | onFilePicked(e) { | 486 | onFilePicked(e) { |
| 487 | // console.log(e) | 487 | // console.log(e) |
| 488 | const files = e.target.files; | 488 | const files = e.target.files; |
| 489 | /** fetch Image Name **/ | 489 | /** fetch Image Name **/ |
| 490 | if (files[0] !== undefined) { | 490 | if (files[0] !== undefined) { |
| 491 | this.imageName = files[0].name; | 491 | this.imageName = files[0].name; |
| 492 | if (this.imageName.lastIndexOf(".") <= 0) { | 492 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 493 | return; | 493 | return; |
| 494 | } | 494 | } |
| 495 | this.files = []; | 495 | this.files = []; |
| 496 | // console.log("files", this.files); | 496 | // console.log("files", this.files); |
| 497 | /** Select many image and showing many image add to news card **/ | 497 | /** Select many image and showing many image add to news card **/ |
| 498 | const test = Array.from(files).forEach((file, idx) => { | 498 | const test = Array.from(files).forEach((file, idx) => { |
| 499 | const fr = new FileReader(); | 499 | const fr = new FileReader(); |
| 500 | const getResult = new Promise((resolve) => { | 500 | const getResult = new Promise((resolve) => { |
| 501 | fr.onload = (e) => { | 501 | fr.onload = (e) => { |
| 502 | this.files.push( | 502 | this.files.push( |
| 503 | // id: idx, | 503 | // id: idx, |
| 504 | e.target.result | 504 | e.target.result |
| 505 | ); | 505 | ); |
| 506 | }; | 506 | }; |
| 507 | }); | 507 | }); |
| 508 | fr.readAsDataURL(file); | 508 | fr.readAsDataURL(file); |
| 509 | return getResult.then((file) => { | 509 | return getResult.then((file) => { |
| 510 | return file; | 510 | return file; |
| 511 | }); | 511 | }); |
| 512 | }); | 512 | }); |
| 513 | const fr = new FileReader(); | 513 | const fr = new FileReader(); |
| 514 | fr.readAsDataURL(files[0]); | 514 | fr.readAsDataURL(files[0]); |
| 515 | fr.addEventListener("load", () => { | 515 | fr.addEventListener("load", () => { |
| 516 | this.imageFile = files; // this is an image file that can be sent to server... | 516 | this.imageFile = files; // this is an image file that can be sent to server... |
| 517 | // console.log("uploadImage=======>", this.imageFile ); | 517 | // console.log("uploadImage=======>", this.imageFile ); |
| 518 | }); | 518 | }); |
| 519 | } else { | 519 | } else { |
| 520 | this.imageName = ""; | 520 | this.imageName = ""; |
| 521 | this.imageFile = ""; | 521 | this.imageFile = ""; |
| 522 | this.imageUrl = ""; | 522 | this.imageUrl = ""; |
| 523 | } | 523 | } |
| 524 | }, | 524 | }, |
| 525 | getNewsList() { | 525 | getNewsList() { |
| 526 | this.showLoader = true; | 526 | this.showLoader = true; |
| 527 | var token = this.$store.state.token; | 527 | var token = this.$store.state.token; |
| 528 | http() | 528 | http() |
| 529 | .get("/getNewsList", { | 529 | .get("/getNewsList", { |
| 530 | headers: { Authorization: "Bearer " + token }, | 530 | headers: { Authorization: "Bearer " + token }, |
| 531 | }) | 531 | }) |
| 532 | .then((response) => { | 532 | .then((response) => { |
| 533 | this.desserts = response.data.data; | 533 | this.desserts = response.data.data; |
| 534 | this.showLoader = false; | 534 | this.showLoader = false; |
| 535 | }) | 535 | }) |
| 536 | .catch((error) => { | 536 | .catch((error) => { |
| 537 | this.showLoader = false; | 537 | this.showLoader = false; |
| 538 | if (error.response.status === 401) { | 538 | if (error.response.status === 401) { |
| 539 | this.$router.replace({ path: "/" }); | 539 | this.$router.replace({ path: "/" }); |
| 540 | this.$store.dispatch("setToken", null); | 540 | this.$store.dispatch("setToken", null); |
| 541 | this.$store.dispatch("Id", null); | 541 | this.$store.dispatch("Id", null); |
| 542 | } | 542 | } |
| 543 | }); | 543 | }); |
| 544 | }, | 544 | }, |
| 545 | editItem(item) { | 545 | editItem(item) { |
| 546 | this.files = []; | 546 | this.files = []; |
| 547 | this.editedIndex = this.desserts.indexOf(item); | 547 | this.editedIndex = this.desserts.indexOf(item); |
| 548 | this.editedItem = Object.assign({}, item); | 548 | this.editedItem = Object.assign({}, item); |
| 549 | this.editNewsDialog = true; | 549 | this.editNewsDialog = true; |
| 550 | }, | 550 | }, |
| 551 | profile(item) { | 551 | profile(item) { |
| 552 | this.editedIndex = this.desserts.indexOf(item); | 552 | this.editedIndex = this.desserts.indexOf(item); |
| 553 | this.editedItem = Object.assign({}, item); | 553 | this.editedItem = Object.assign({}, item); |
| 554 | this.dialog1 = true; | 554 | this.dialog1 = true; |
| 555 | }, | 555 | }, |
| 556 | deleteItem(item) { | 556 | deleteItem(item) { |
| 557 | let deleteNews = { | 557 | let deleteNews = { |
| 558 | newsId: item._id, | 558 | newsId: item._id, |
| 559 | }; | 559 | }; |
| 560 | http() | 560 | http() |
| 561 | .delete( | 561 | .delete( |
| 562 | "/deleteNews", | 562 | "/deleteNews", |
| 563 | confirm("Are you sure you want to delete this?") && { | 563 | confirm("Are you sure you want to delete this?") && { |
| 564 | params: deleteNews, | 564 | params: deleteNews, |
| 565 | } | 565 | } |
| 566 | ) | 566 | ) |
| 567 | .then((response) => { | 567 | .then((response) => { |
| 568 | this.snackbar = true; | 568 | this.snackbar = true; |
| 569 | this.text = response.data.message; | 569 | this.text = response.data.message; |
| 570 | this.color = "green"; | 570 | this.color = "green"; |
| 571 | this.getNewsList(); | 571 | this.getNewsList(); |
| 572 | }) | 572 | }) |
| 573 | .catch((error) => { | 573 | .catch((error) => { |
| 574 | this.snackbar = true; | 574 | this.snackbar = true; |
| 575 | this.color = "error"; | 575 | this.color = "error"; |
| 576 | this.text = error.response.data.message; | 576 | this.text = error.response.data.message; |
| 577 | }); | 577 | }); |
| 578 | }, | 578 | }, |
| 579 | deleteImage(imageId, newsId) { | 579 | deleteImage(imageId, newsId) { |
| 580 | let deleteImages = { | 580 | let deleteImages = { |
| 581 | newsId: newsId, | 581 | newsId: newsId, |
| 582 | imageId: imageId, | 582 | imageId: imageId, |
| 583 | }; | 583 | }; |
| 584 | http() | 584 | http() |
| 585 | .put("/deleteImages", deleteImages) | 585 | .put("/deleteImages", deleteImages) |
| 586 | .then((response) => { | 586 | .then((response) => { |
| 587 | this.snackbar = true; | 587 | this.snackbar = true; |
| 588 | this.text = response.data.message; | 588 | this.text = response.data.message; |
| 589 | this.color = "green"; | 589 | this.color = "green"; |
| 590 | this.close(); | 590 | this.close(); |
| 591 | }) | 591 | }) |
| 592 | .catch((error) => { | 592 | .catch((error) => { |
| 593 | this.snackbar = true; | 593 | this.snackbar = true; |
| 594 | this.color = "error"; | 594 | this.color = "error"; |
| 595 | this.text = error.response.data.message; | 595 | this.text = error.response.data.message; |
| 596 | }); | 596 | }); |
| 597 | }, | 597 | }, |
| 598 | close() { | 598 | close() { |
| 599 | this.dialog = false; | 599 | this.dialog = false; |
| 600 | }, | 600 | }, |
| 601 | close1() { | 601 | close1() { |
| 602 | this.dialog1 = false; | 602 | this.dialog1 = false; |
| 603 | }, | 603 | }, |
| 604 | closeAddNewsModel() { | 604 | closeAddNewsModel() { |
| 605 | this.addNewsDialog = false; | 605 | this.addNewsDialog = false; |
| 606 | this.addNews = []; | 606 | this.addNews = []; |
| 607 | this.imageName = ""; | 607 | this.imageName = ""; |
| 608 | this.imageFile = ""; | 608 | this.imageFile = ""; |
| 609 | this.imageUrl = ""; | 609 | this.imageUrl = ""; |
| 610 | this.files = []; | 610 | this.files = []; |
| 611 | }, | 611 | }, |
| 612 | submit() { | 612 | submit() { |
| 613 | if (this.$refs.form.validate()) { | 613 | if (this.$refs.form.validate()) { |
| 614 | let newsData = { | 614 | let newsData = { |
| 615 | title: this.addNews.title, | 615 | title: this.addNews.title, |
| 616 | description: this.addNews.description, | 616 | description: this.addNews.description, |
| 617 | }; | 617 | }; |
| 618 | if (this.files) { | 618 | if (this.files) { |
| 619 | var ary = []; | 619 | var ary = []; |
| 620 | var imageData = []; | 620 | var imageData = []; |
| 621 | ary = this.files; | 621 | ary = this.files; |
| 622 | for (let i = 0; i < ary.length; i++) { | 622 | for (let i = 0; i < ary.length; i++) { |
| 623 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 623 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 624 | imageData.push(imageUrl); | 624 | imageData.push(imageUrl); |
| 625 | newsData.upload = imageData; | 625 | newsData.upload = imageData; |
| 626 | } | 626 | } |
| 627 | } | 627 | } |
| 628 | this.loading = true; | 628 | this.loading = true; |
| 629 | http() | 629 | http() |
| 630 | .post("/createNews", newsData) | 630 | .post("/createNews", newsData) |
| 631 | .then((response) => { | 631 | .then((response) => { |
| 632 | this.files = []; | 632 | this.files = []; |
| 633 | this.snackbar = true; | 633 | this.snackbar = true; |
| 634 | this.text = response.data.message; | 634 | this.text = response.data.message; |
| 635 | this.getNewsList(); | 635 | this.getNewsList(); |
| 636 | this.color = "green"; | 636 | this.color = "green"; |
| 637 | this.addNewsDialog = false; | 637 | this.addNewsDialog = false; |
| 638 | this.loading = false; | 638 | this.loading = false; |
| 639 | this.clear(); | 639 | this.clear(); |
| 640 | }) | 640 | }) |
| 641 | .catch((error) => { | 641 | .catch((error) => { |
| 642 | this.snackbar = true; | 642 | this.snackbar = true; |
| 643 | this.text = error.response.data.message; | 643 | this.text = error.response.data.message; |
| 644 | this.color = "error"; | 644 | this.color = "error"; |
| 645 | }); | 645 | }); |
| 646 | } | 646 | } |
| 647 | }, | 647 | }, |
| 648 | clear() { | 648 | clear() { |
| 649 | this.$refs.form.reset(); | 649 | this.$refs.form.reset(); |
| 650 | this.files = []; | 650 | this.files = []; |
| 651 | }, | 651 | }, |
| 652 | save() { | 652 | save() { |
| 653 | let editNews = { | 653 | let editNews = { |
| 654 | title: this.editedItem.title, | 654 | title: this.editedItem.title, |
| 655 | description: this.editedItem.description, | 655 | description: this.editedItem.description, |
| 656 | newsId: this.editedItem._id, | 656 | newsId: this.editedItem._id, |
| 657 | }; | 657 | }; |
| 658 | if (this.files) { | 658 | if (this.files) { |
| 659 | var ary = []; | 659 | var ary = []; |
| 660 | var imageData = []; | 660 | var imageData = []; |
| 661 | ary = this.files; | 661 | ary = this.files; |
| 662 | for (let i = 0; i < ary.length; i++) { | 662 | for (let i = 0; i < ary.length; i++) { |
| 663 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 663 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 664 | imageData.push(imageUrl); | 664 | imageData.push(imageUrl); |
| 665 | editNews.upload = imageData; | 665 | editNews.upload = imageData; |
| 666 | } | 666 | } |
| 667 | } | 667 | } |
| 668 | http() | 668 | http() |
| 669 | .put("/updateNews", editNews) | 669 | .put("/updateNews", editNews) |
| 670 | .then((response) => { | 670 | .then((response) => { |
| 671 | this.snackbar = true; | 671 | this.snackbar = true; |
| 672 | this.text = "Successfully updated News"; | 672 | this.text = "Successfully updated News"; |
| 673 | this.color = "green"; | 673 | this.color = "green"; |
| 674 | this.editNewsDialog = false; | 674 | this.editNewsDialog = false; |
| 675 | this.getNewsList(); | 675 | this.getNewsList(); |
| 676 | this.close(); | 676 | this.close(); |
| 677 | }) | 677 | }) |
| 678 | .catch((error) => { | 678 | .catch((error) => { |
| 679 | this.snackbar = true; | 679 | this.snackbar = true; |
| 680 | this.color = "error"; | 680 | this.color = "error"; |
| 681 | this.text = error.response.data.message; | 681 | this.text = error.response.data.message; |
| 682 | }); | 682 | }); |
| 683 | }, | 683 | }, |
| 684 | displaySearch() { | 684 | displaySearch() { |
| 685 | (this.show = false), (this.showSearch = true); | 685 | (this.show = false), (this.showSearch = true); |
| 686 | }, | 686 | }, |
| 687 | closeSearch() { | 687 | closeSearch() { |
| 688 | this.showSearch = false; | 688 | this.showSearch = false; |
| 689 | this.show = true; | 689 | this.show = true; |
| 690 | this.search = ""; | 690 | this.search = ""; |
| 691 | }, | 691 | }, |
| 692 | }, | 692 | }, |
| 693 | mounted() { | 693 | mounted() { |
| 694 | this.getNewsList(); | 694 | this.getNewsList(); |
| 695 | this.editItem; | 695 | this.editItem; |
| 696 | }, | 696 | }, |
| 697 | }; | 697 | }; |
| 698 | </script> | 698 | </script> |
src/pages/NoticeBoard/noticeBoard.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Notice Board ****** --> | 3 | <!-- ****** Edit Notice Board ****** --> |
| 4 | <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable persistent> | 4 | <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Notice Board</label> | 8 | <label class="title text-xs-center">Edit Notice Board</label> |
| 9 | <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 15 | <img | 15 | <img |
| 16 | src="/static/icon/user.png" | 16 | src="/static/icon/user.png" |
| 17 | v-if="!editedItem.eventImageUrl && !imageUrl" | 17 | v-if="!editedItem.eventImageUrl && !imageUrl" |
| 18 | width="100px" | 18 | width="100px" |
| 19 | /> | 19 | /> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.eventImageUrl" | 21 | :src="editedItem.eventImageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | v-else-if="editedItem.eventImageUrl && !imageUrl" | 23 | v-else-if="editedItem.eventImageUrl && !imageUrl" |
| 24 | width="150px" | 24 | width="150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="imageUrl" | 27 | v-if="imageUrl" |
| 28 | :src="imageUrl" | 28 | :src="imageUrl" |
| 29 | height="150" | 29 | height="150" |
| 30 | style="border-radius:50%; width:150px" | 30 | style="border-radius:50%; width:150px" |
| 31 | /> | 31 | /> |
| 32 | <input | 32 | <input |
| 33 | type="file" | 33 | type="file" |
| 34 | style="display: none" | 34 | style="display: none" |
| 35 | ref="image" | 35 | ref="image" |
| 36 | accept="image/*" | 36 | accept="image/*" |
| 37 | @change="onFilePicked" | 37 | @change="onFilePicked" |
| 38 | /> | 38 | /> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | <v-layout wrap> | 41 | <v-layout wrap> |
| 42 | <v-flex xs12> | 42 | <v-flex xs12> |
| 43 | <v-layout> | 43 | <v-layout> |
| 44 | <v-flex xs4 class="pt-4 subheading"> | 44 | <v-flex xs4 class="pt-4 subheading"> |
| 45 | <label class="right">Title:</label> | 45 | <label class="right">Title:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 class="ml-3"> | 47 | <v-flex xs8 class="ml-3"> |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | v-model="editedItem.title" | 49 | v-model="editedItem.title" |
| 50 | placeholder="fill your Title" | 50 | placeholder="fill your Title" |
| 51 | name="name" | 51 | name="name" |
| 52 | type="text" | 52 | type="text" |
| 53 | required | 53 | required |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | </v-flex> | 55 | </v-flex> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | <v-flex xs12> | 58 | <v-flex xs12> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs4 class="pt-4 subheading"> | 60 | <v-flex xs4 class="pt-4 subheading"> |
| 61 | <label class="right">Description:</label> | 61 | <label class="right">Description:</label> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-flex xs7 class="ml-3"> | 63 | <v-flex xs7 class="ml-3"> |
| 64 | <v-text-field | 64 | <v-text-field |
| 65 | placeholder="fill your Description" | 65 | placeholder="fill your Description" |
| 66 | v-model="editedItem.description" | 66 | v-model="editedItem.description" |
| 67 | type="text" | 67 | type="text" |
| 68 | name="email" | 68 | name="email" |
| 69 | required | 69 | required |
| 70 | ></v-text-field> | 70 | ></v-text-field> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | <v-flex xs12> | 74 | <v-flex xs12> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs4 class="pt-4 subheading"> | 76 | <v-flex xs4 class="pt-4 subheading"> |
| 77 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 77 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 78 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 78 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs7 class="ml-3"> | 80 | <v-flex xs7 class="ml-3"> |
| 81 | <v-text-field | 81 | <v-text-field |
| 82 | label="Select Image" | 82 | label="Select Image" |
| 83 | @click="pickFile" | 83 | @click="pickFile" |
| 84 | v-model="imageName" | 84 | v-model="imageName" |
| 85 | append-icon="attach_file" | 85 | append-icon="attach_file" |
| 86 | ></v-text-field> | 86 | ></v-text-field> |
| 87 | <input | 87 | <input |
| 88 | type="file" | 88 | type="file" |
| 89 | style="display: none" | 89 | style="display: none" |
| 90 | ref="image" | 90 | ref="image" |
| 91 | accept="image/*" | 91 | accept="image/*" |
| 92 | @change="onFilePicked" | 92 | @change="onFilePicked" |
| 93 | /> | 93 | /> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs12> | 97 | <v-flex xs12> |
| 98 | <v-card-actions> | 98 | <v-card-actions> |
| 99 | <v-spacer></v-spacer> | 99 | <v-spacer></v-spacer> |
| 100 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 100 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 101 | </v-card-actions> | 101 | </v-card-actions> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | </v-layout> | 103 | </v-layout> |
| 104 | </v-card-text> | 104 | </v-card-text> |
| 105 | </v-card> | 105 | </v-card> |
| 106 | </v-dialog> | 106 | </v-dialog> |
| 107 | 107 | ||
| 108 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 108 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 109 | 109 | ||
| 110 | <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable persistent> | 110 | <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable persistent> |
| 111 | <v-card flat class="card-style pa-3" dark> | 111 | <v-card flat class="Card-style pa-3"> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs12> | 113 | <v-flex xs12> |
| 114 | <label class="title text-xs-center">View Notice Board</label> | 114 | <label class="title text-xs-center">View Notice Board</label> |
| 115 | <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> | 115 | <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | </v-layout> | 117 | </v-layout> |
| 118 | <v-card-text> | 118 | <v-card-text> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex align-center justify-center layout text-xs-center> | 120 | <v-flex align-center justify-center layout text-xs-center> |
| 121 | <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> | 121 | <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> |
| 122 | <img | 122 | <img |
| 123 | :src="editedItem.eventImageUrl" | 123 | :src="editedItem.eventImageUrl" |
| 124 | v-else-if="editedItem.eventImageUrl" | 124 | v-else-if="editedItem.eventImageUrl" |
| 125 | class="img" | 125 | class="img" |
| 126 | width="200" | 126 | width="200" |
| 127 | /> | 127 | /> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | <v-container grid-list-md> | 130 | <v-container grid-list-md> |
| 131 | <v-layout wrap> | 131 | <v-layout wrap> |
| 132 | <v-flex> | 132 | <v-flex> |
| 133 | <v-layout> | 133 | <v-layout> |
| 134 | <v-flex xs5 sm6> | 134 | <v-flex xs5 sm6> |
| 135 | <h5 class="right my-1"> | 135 | <h5 class="right my-1"> |
| 136 | <b>Title:</b> | 136 | <b>Title:</b> |
| 137 | </h5> | 137 | </h5> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-flex sm6 xs8> | 139 | <v-flex sm6 xs8> |
| 140 | <h5 class="my-1">{{ editedItem.title }}</h5> | 140 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | <v-layout> | 143 | <v-layout> |
| 144 | <v-flex xs5 sm6> | 144 | <v-flex xs5 sm6> |
| 145 | <h5 class="right my-1"> | 145 | <h5 class="right my-1"> |
| 146 | <b>Description:</b> | 146 | <b>Description:</b> |
| 147 | </h5> | 147 | </h5> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | <v-flex sm6 xs8> | 149 | <v-flex sm6 xs8> |
| 150 | <h5 class="my-1">{{ editedItem.description }}</h5> | 150 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-flex> | 153 | </v-flex> |
| 154 | </v-layout> | 154 | </v-layout> |
| 155 | </v-container> | 155 | </v-container> |
| 156 | </v-card-text> | 156 | </v-card-text> |
| 157 | </v-card> | 157 | </v-card> |
| 158 | </v-dialog> | 158 | </v-dialog> |
| 159 | <!-- ****** EXISTING Notice Board TABLE ****** --> | 159 | <!-- ****** EXISTING Notice Board TABLE ****** --> |
| 160 | <v-toolbar color="transparent" flat> | 160 | <v-toolbar color="transparent" flat> |
| 161 | <v-btn | 161 | <v-btn |
| 162 | fab | 162 | fab |
| 163 | dark | 163 | dark |
| 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 165 | small | 165 | small |
| 166 | @click="addNoticeBoardDialog = true" | 166 | @click="addNoticeBoardDialog = true" |
| 167 | > | 167 | > |
| 168 | <v-icon dark>add</v-icon> | 168 | <v-icon dark>add</v-icon> |
| 169 | </v-btn> | 169 | </v-btn> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 173 | dark | 173 | dark |
| 174 | @click="addNoticeBoardDialog = true" | 174 | @click="addNoticeBoardDialog = true" |
| 175 | > | 175 | > |
| 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board | 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board |
| 177 | </v-btn> | 177 | </v-btn> |
| 178 | <v-spacer></v-spacer> | 178 | <v-spacer></v-spacer> |
| 179 | <v-card-title class="body-1" v-show="show"> | 179 | <v-card-title class="body-1" v-show="show"> |
| 180 | <v-btn icon large flat @click="displaySearch"> | 180 | <v-btn icon large flat @click="displaySearch"> |
| 181 | <v-avatar size="27"> | 181 | <v-avatar size="27"> |
| 182 | <img src="/static/icon/search.png" alt="icon" /> | 182 | <img src="/static/icon/search.png" alt="icon" /> |
| 183 | </v-avatar> | 183 | </v-avatar> |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | </v-card-title> | 185 | </v-card-title> |
| 186 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 186 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-text-field | 188 | <v-text-field |
| 189 | autofocus | 189 | autofocus |
| 190 | v-model="search" | 190 | v-model="search" |
| 191 | label="Search" | 191 | label="Search" |
| 192 | prepend-inner-icon="search" | 192 | prepend-inner-icon="search" |
| 193 | color="primary" | 193 | color="primary" |
| 194 | ></v-text-field> | 194 | ></v-text-field> |
| 195 | <v-icon @click="closeSearch" color="error">close</v-icon> | 195 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 196 | </v-layout> | 196 | </v-layout> |
| 197 | </v-flex> | 197 | </v-flex> |
| 198 | </v-toolbar> | 198 | </v-toolbar> |
| 199 | <v-data-table | 199 | <v-data-table |
| 200 | :headers="headers" | 200 | :headers="headers" |
| 201 | :items="notices" | 201 | :items="notices" |
| 202 | :pagination.sync="pagination" | 202 | :pagination.sync="pagination" |
| 203 | :search="search" | 203 | :search="search" |
| 204 | > | 204 | > |
| 205 | <template slot="items" slot-scope="props"> | 205 | <template slot="items" slot-scope="props"> |
| 206 | <tr class="tr"> | 206 | <tr class="tr"> |
| 207 | <td class="td td-row">{{ props.index + 1}}</td> | 207 | <td class="td td-row">{{ props.index + 1}}</td> |
| 208 | <td class="td td-row text-xs-center"> | 208 | <td class="td td-row text-xs-center"> |
| 209 | <v-avatar size="40"> | 209 | <v-avatar size="40"> |
| 210 | <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> | 210 | <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> |
| 211 | <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> | 211 | <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> |
| 212 | </v-avatar> | 212 | </v-avatar> |
| 213 | </td> | 213 | </td> |
| 214 | <td class="text-xs-center td td-row">{{ props.item.title}}</td> | 214 | <td class="text-xs-center td td-row">{{ props.item.title}}</td> |
| 215 | <td class="text-xs-center td td-row"> | 215 | <td class="text-xs-center td td-row"> |
| 216 | <!-- <v-btn | 216 | <!-- <v-btn |
| 217 | class="add-button" | 217 | class="add-button" |
| 218 | @click="generatePDF2Canvas(props.item)" | 218 | @click="generatePDF2Canvas(props.item)" |
| 219 | :loading="loadingPdf" | 219 | :loading="loadingPdf" |
| 220 | dark | 220 | dark |
| 221 | >{{ props.item.fileType }}</v-btn>--> | 221 | >{{ props.item.fileType }}</v-btn>--> |
| 222 | <a | 222 | <a |
| 223 | class="hover" | 223 | class="hover" |
| 224 | :href="props.item.eventImageUrl" | 224 | :href="props.item.eventImageUrl" |
| 225 | target="_blank" | 225 | target="_blank" |
| 226 | style="text-decoration: none!important; color: grey" | 226 | style="text-decoration: none!important; color: grey" |
| 227 | > | 227 | > |
| 228 | <h5>{{props.item.fileName}}</h5> | 228 | <h5>{{props.item.fileName}}</h5> |
| 229 | </a> | 229 | </a> |
| 230 | </td> | 230 | </td> |
| 231 | <td class="text-xs-center td td-row"> | 231 | <td class="text-xs-center td td-row"> |
| 232 | <span> | 232 | <span> |
| 233 | <v-tooltip top> | 233 | <v-tooltip top> |
| 234 | <img | 234 | <img |
| 235 | slot="activator" | 235 | slot="activator" |
| 236 | style="cursor:pointer; width:25px; height:25px; " | 236 | style="cursor:pointer; width:25px; height:25px; " |
| 237 | class="mr-3" | 237 | class="mr-3" |
| 238 | @click="profile(props.item)" | 238 | @click="profile(props.item)" |
| 239 | src="/static/icon/view.png" | 239 | src="/static/icon/view.png" |
| 240 | /> | 240 | /> |
| 241 | <span>View</span> | 241 | <span>View</span> |
| 242 | </v-tooltip> | 242 | </v-tooltip> |
| 243 | <v-tooltip top> | 243 | <v-tooltip top> |
| 244 | <img | 244 | <img |
| 245 | slot="activator" | 245 | slot="activator" |
| 246 | style="cursor:pointer; width:20px; height:18px; " | 246 | style="cursor:pointer; width:20px; height:18px; " |
| 247 | class="mr-3" | 247 | class="mr-3" |
| 248 | @click="editItem(props.item)" | 248 | @click="editItem(props.item)" |
| 249 | src="/static/icon/edit.png" | 249 | src="/static/icon/edit.png" |
| 250 | /> | 250 | /> |
| 251 | <span>Edit</span> | 251 | <span>Edit</span> |
| 252 | </v-tooltip> | 252 | </v-tooltip> |
| 253 | <v-tooltip top> | 253 | <v-tooltip top> |
| 254 | <img | 254 | <img |
| 255 | slot="activator" | 255 | slot="activator" |
| 256 | style="cursor:pointer; width:20px; height:20px; " | 256 | style="cursor:pointer; width:20px; height:20px; " |
| 257 | @click="deleteItem(props.item)" | 257 | @click="deleteItem(props.item)" |
| 258 | src="/static/icon/delete.png" | 258 | src="/static/icon/delete.png" |
| 259 | /> | 259 | /> |
| 260 | <span>Delete</span> | 260 | <span>Delete</span> |
| 261 | </v-tooltip> | 261 | </v-tooltip> |
| 262 | </span> | 262 | </span> |
| 263 | </td> | 263 | </td> |
| 264 | </tr> | 264 | </tr> |
| 265 | </template> | 265 | </template> |
| 266 | <v-alert | 266 | <v-alert |
| 267 | slot="no-results" | 267 | slot="no-results" |
| 268 | :value="true" | 268 | :value="true" |
| 269 | color="error" | 269 | color="error" |
| 270 | icon="warning" | 270 | icon="warning" |
| 271 | >Your search for "{{ search }}" found no results.</v-alert> | 271 | >Your search for "{{ search }}" found no results.</v-alert> |
| 272 | </v-data-table> | 272 | </v-data-table> |
| 273 | <!-- ****** ADD Notice Board ****** --> | 273 | <!-- ****** ADD Notice Board ****** --> |
| 274 | <v-dialog | 274 | <v-dialog |
| 275 | v-model="addNoticeBoardDialog" | 275 | v-model="addNoticeBoardDialog" |
| 276 | max-width="600px" | 276 | max-width="600px" |
| 277 | v-if="addNoticeBoardDialog" | 277 | v-if="addNoticeBoardDialog" |
| 278 | persistent | 278 | persistent |
| 279 | > | 279 | > |
| 280 | <v-card flat class="card-style pa-2" dark> | 280 | <v-card flat class="Card-style pa-2"> |
| 281 | <v-layout> | 281 | <v-layout> |
| 282 | <v-flex xs12> | 282 | <v-flex xs12> |
| 283 | <label class="title text-xs-center">Add Notice Board</label> | 283 | <label class="title text-xs-center">Add Notice Board</label> |
| 284 | <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon> | 284 | <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon> |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | </v-layout> | 286 | </v-layout> |
| 287 | <v-container fluid fill-height> | 287 | <v-container fluid fill-height> |
| 288 | <v-layout align-center> | 288 | <v-layout align-center> |
| 289 | <v-flex xs12> | 289 | <v-flex xs12> |
| 290 | <v-form ref="form" v-model="valid" lazy-validation> | 290 | <v-form ref="form" v-model="valid" lazy-validation> |
| 291 | <v-layout> | 291 | <v-layout> |
| 292 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 292 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 293 | <v-avatar size="80px" v-if="!imageUrl"> | 293 | <v-avatar size="80px" v-if="!imageUrl"> |
| 294 | <img src="/static/icon/user.png" /> | 294 | <img src="/static/icon/user.png" /> |
| 295 | </v-avatar> | 295 | </v-avatar> |
| 296 | <input | 296 | <input |
| 297 | type="file" | 297 | type="file" |
| 298 | style="display: none" | 298 | style="display: none" |
| 299 | ref="image" | 299 | ref="image" |
| 300 | accept="image/*" | 300 | accept="image/*" |
| 301 | @change="onFilePicked" | 301 | @change="onFilePicked" |
| 302 | /> | 302 | /> |
| 303 | 303 | ||
| 304 | <v-avatar size="150px" v-if="imageUrl"> | 304 | <v-avatar size="150px" v-if="imageUrl"> |
| 305 | <img :src="imageUrl" height="150" /> | 305 | <img :src="imageUrl" height="150" /> |
| 306 | </v-avatar> | 306 | </v-avatar> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs4 class="pt-4 subheading"> | 310 | <v-flex xs4 class="pt-4 subheading"> |
| 311 | <label class="right">Title:</label> | 311 | <label class="right">Title:</label> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | <v-flex xs7 class="ml-3"> | 313 | <v-flex xs7 class="ml-3"> |
| 314 | <v-text-field | 314 | <v-text-field |
| 315 | v-model="addNoticeBoard.title" | 315 | v-model="addNoticeBoard.title" |
| 316 | placeholder="fill your Title" | 316 | placeholder="fill your Title" |
| 317 | name="name" | 317 | name="name" |
| 318 | type="text" | 318 | type="text" |
| 319 | :rules="titleRules" | 319 | :rules="titleRules" |
| 320 | required | 320 | required |
| 321 | ></v-text-field> | 321 | ></v-text-field> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | </v-layout> | 323 | </v-layout> |
| 324 | <v-layout> | 324 | <v-layout> |
| 325 | <v-flex xs4 class="pt-4 subheading"> | 325 | <v-flex xs4 class="pt-4 subheading"> |
| 326 | <label class="right">Description:</label> | 326 | <label class="right">Description:</label> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | <v-flex xs7 class="ml-3"> | 328 | <v-flex xs7 class="ml-3"> |
| 329 | <v-text-field | 329 | <v-text-field |
| 330 | v-model="addNoticeBoard.description" | 330 | v-model="addNoticeBoard.description" |
| 331 | placeholder="fill your Description" | 331 | placeholder="fill your Description" |
| 332 | name="name" | 332 | name="name" |
| 333 | type="text" | 333 | type="text" |
| 334 | :rules="descriptionRules" | 334 | :rules="descriptionRules" |
| 335 | required | 335 | required |
| 336 | ></v-text-field> | 336 | ></v-text-field> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | </v-layout> | 338 | </v-layout> |
| 339 | <v-layout> | 339 | <v-layout> |
| 340 | <v-flex xs4 class="pt-4 subheading"> | 340 | <v-flex xs4 class="pt-4 subheading"> |
| 341 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 341 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 342 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 342 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex xs7 class="ml-3"> | 344 | <v-flex xs7 class="ml-3"> |
| 345 | <v-text-field | 345 | <v-text-field |
| 346 | label="Select Image" | 346 | label="Select Image" |
| 347 | @click="pickFile" | 347 | @click="pickFile" |
| 348 | v-model="imageName" | 348 | v-model="imageName" |
| 349 | append-icon="attach_file" | 349 | append-icon="attach_file" |
| 350 | ></v-text-field> | 350 | ></v-text-field> |
| 351 | <input | 351 | <input |
| 352 | type="file" | 352 | type="file" |
| 353 | style="display:none" | 353 | style="display:none" |
| 354 | ref="image" | 354 | ref="image" |
| 355 | accept="image/*" | 355 | accept="image/*" |
| 356 | @change="onFilePicked" | 356 | @change="onFilePicked" |
| 357 | /> | 357 | /> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | <v-layout> | 360 | <v-layout> |
| 361 | <v-flex xs12> | 361 | <v-flex xs12> |
| 362 | <v-card-actions> | 362 | <v-card-actions> |
| 363 | <v-spacer></v-spacer> | 363 | <v-spacer></v-spacer> |
| 364 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 364 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 365 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 365 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 366 | </v-card-actions> | 366 | </v-card-actions> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | </v-layout> | 368 | </v-layout> |
| 369 | </v-form> | 369 | </v-form> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | </v-container> | 372 | </v-container> |
| 373 | </v-card> | 373 | </v-card> |
| 374 | </v-dialog> | 374 | </v-dialog> |
| 375 | <v-snackbar | 375 | <v-snackbar |
| 376 | :timeout="timeout" | 376 | :timeout="timeout" |
| 377 | :top="y === 'top'" | 377 | :top="y === 'top'" |
| 378 | :right="x === 'right'" | 378 | :right="x === 'right'" |
| 379 | :vertical="mode === 'vertical'" | 379 | :vertical="mode === 'vertical'" |
| 380 | v-model="snackbar" | 380 | v-model="snackbar" |
| 381 | :color="color" | 381 | :color="color" |
| 382 | >{{ text }}</v-snackbar> | 382 | >{{ text }}</v-snackbar> |
| 383 | <div class="loader" v-if="showLoader"> | 383 | <div class="loader" v-if="showLoader"> |
| 384 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 384 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 385 | </div> | 385 | </div> |
| 386 | </v-container> | 386 | </v-container> |
| 387 | </template> | 387 | </template> |
| 388 | 388 | ||
| 389 | <script> | 389 | <script> |
| 390 | import http from "@/Services/http.js"; | 390 | import http from "@/Services/http.js"; |
| 391 | 391 | ||
| 392 | export default { | 392 | export default { |
| 393 | data: () => ({ | 393 | data: () => ({ |
| 394 | snackbar: false, | 394 | snackbar: false, |
| 395 | y: "top", | 395 | y: "top", |
| 396 | x: "right", | 396 | x: "right", |
| 397 | mode: "", | 397 | mode: "", |
| 398 | timeout: 3000, | 398 | timeout: 3000, |
| 399 | text: "", | 399 | text: "", |
| 400 | color: "", | 400 | color: "", |
| 401 | show: true, | 401 | show: true, |
| 402 | showSearch: false, | 402 | showSearch: false, |
| 403 | showLoader: false, | 403 | showLoader: false, |
| 404 | loading: false, | 404 | loading: false, |
| 405 | date: null, | 405 | date: null, |
| 406 | search: "", | 406 | search: "", |
| 407 | addNoticeBoardDialog: false, | 407 | addNoticeBoardDialog: false, |
| 408 | editNoticeBoardDialog: false, | 408 | editNoticeBoardDialog: false, |
| 409 | viewNoticeBoardDialog: false, | 409 | viewNoticeBoardDialog: false, |
| 410 | valid: true, | 410 | valid: true, |
| 411 | addclass: [], | 411 | addclass: [], |
| 412 | addSection: [], | 412 | addSection: [], |
| 413 | gender: ["Male", "Female"], | 413 | gender: ["Male", "Female"], |
| 414 | pagination: { | 414 | pagination: { |
| 415 | rowsPerPage: 10, | 415 | rowsPerPage: 10, |
| 416 | }, | 416 | }, |
| 417 | imageData: {}, | 417 | imageData: {}, |
| 418 | imageName: "", | 418 | imageName: "", |
| 419 | imageUrl: "", | 419 | imageUrl: "", |
| 420 | imageFile: "", | 420 | imageFile: "", |
| 421 | upload: "", | 421 | upload: "", |
| 422 | loadingPdf: false, | 422 | loadingPdf: false, |
| 423 | 423 | ||
| 424 | titleRules: [(v) => !!v || " Title is required"], | 424 | titleRules: [(v) => !!v || " Title is required"], |
| 425 | descriptionRules: [(v) => !!v || " Description is required"], | 425 | descriptionRules: [(v) => !!v || " Description is required"], |
| 426 | headers: [ | 426 | headers: [ |
| 427 | { | 427 | { |
| 428 | text: "No", | 428 | text: "No", |
| 429 | align: "", | 429 | align: "", |
| 430 | sortable: false, | 430 | sortable: false, |
| 431 | value: "No", | 431 | value: "No", |
| 432 | }, | 432 | }, |
| 433 | { | 433 | { |
| 434 | text: "Event Image", | 434 | text: "Event Image", |
| 435 | align: "center", | 435 | align: "center", |
| 436 | sortable: false, | 436 | sortable: false, |
| 437 | value: "eventImageUrl", | 437 | value: "eventImageUrl", |
| 438 | }, | 438 | }, |
| 439 | { text: "Title", value: "title", sortable: false, align: "center" }, | 439 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 440 | { | 440 | { |
| 441 | text: "File", | 441 | text: "File", |
| 442 | value: "eventImageUrl", | 442 | value: "eventImageUrl", |
| 443 | sortable: false, | 443 | sortable: false, |
| 444 | align: "center", | 444 | align: "center", |
| 445 | }, | 445 | }, |
| 446 | { text: "Action", value: "", sortable: false, align: "center" }, | 446 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 447 | ], | 447 | ], |
| 448 | notices: [], | 448 | notices: [], |
| 449 | editedIndex: -1, | 449 | editedIndex: -1, |
| 450 | addNoticeBoard: {}, | 450 | addNoticeBoard: {}, |
| 451 | editedItem: { | 451 | editedItem: { |
| 452 | title: "", | 452 | title: "", |
| 453 | description: "", | 453 | description: "", |
| 454 | }, | 454 | }, |
| 455 | }), | 455 | }), |
| 456 | watch: { | 456 | watch: { |
| 457 | // addNoticeBoardDialog: function (val) { | 457 | // addNoticeBoardDialog: function (val) { |
| 458 | // if (!val) { | 458 | // if (!val) { |
| 459 | // this.addNoticeBoard = []; | 459 | // this.addNoticeBoard = []; |
| 460 | // this.imageName = ""; | 460 | // this.imageName = ""; |
| 461 | // this.imageFile = ""; | 461 | // this.imageFile = ""; |
| 462 | // this.imageUrl = ""; | 462 | // this.imageUrl = ""; |
| 463 | // } | 463 | // } |
| 464 | // }, | 464 | // }, |
| 465 | }, | 465 | }, |
| 466 | methods: { | 466 | methods: { |
| 467 | pickFile() { | 467 | pickFile() { |
| 468 | this.$refs.image.click(); | 468 | this.$refs.image.click(); |
| 469 | }, | 469 | }, |
| 470 | getNoticeDataList() { | 470 | getNoticeDataList() { |
| 471 | this.showLoader = true; | 471 | this.showLoader = true; |
| 472 | var token = this.$store.state.token; | 472 | var token = this.$store.state.token; |
| 473 | http() | 473 | http() |
| 474 | .get("/getEventsList", { | 474 | .get("/getEventsList", { |
| 475 | headers: { Authorization: "Bearer " + token }, | 475 | headers: { Authorization: "Bearer " + token }, |
| 476 | }) | 476 | }) |
| 477 | .then((response) => { | 477 | .then((response) => { |
| 478 | this.notices = response.data.data; | 478 | this.notices = response.data.data; |
| 479 | this.showLoader = false; | 479 | this.showLoader = false; |
| 480 | }) | 480 | }) |
| 481 | .catch((error) => { | 481 | .catch((error) => { |
| 482 | this.showLoader = false; | 482 | this.showLoader = false; |
| 483 | if (error.response.status === 401) { | 483 | if (error.response.status === 401) { |
| 484 | this.$router.replace({ path: "/" }); | 484 | this.$router.replace({ path: "/" }); |
| 485 | this.$store.dispatch("setToken", null); | 485 | this.$store.dispatch("setToken", null); |
| 486 | this.$store.dispatch("Id", null); | 486 | this.$store.dispatch("Id", null); |
| 487 | } | 487 | } |
| 488 | }); | 488 | }); |
| 489 | }, | 489 | }, |
| 490 | editItem(item) { | 490 | editItem(item) { |
| 491 | this.editedIndex = this.notices.indexOf(item); | 491 | this.editedIndex = this.notices.indexOf(item); |
| 492 | this.editedItem = Object.assign({}, item); | 492 | this.editedItem = Object.assign({}, item); |
| 493 | this.editNoticeBoardDialog = true; | 493 | this.editNoticeBoardDialog = true; |
| 494 | }, | 494 | }, |
| 495 | profile(item) { | 495 | profile(item) { |
| 496 | this.editedIndex = this.notices.indexOf(item); | 496 | this.editedIndex = this.notices.indexOf(item); |
| 497 | this.editedItem = Object.assign({}, item); | 497 | this.editedItem = Object.assign({}, item); |
| 498 | this.viewNoticeBoardDialog = true; | 498 | this.viewNoticeBoardDialog = true; |
| 499 | }, | 499 | }, |
| 500 | deleteItem(item) { | 500 | deleteItem(item) { |
| 501 | let deleteEvent = { | 501 | let deleteEvent = { |
| 502 | eventId: item._id, | 502 | eventId: item._id, |
| 503 | }; | 503 | }; |
| 504 | http() | 504 | http() |
| 505 | .delete( | 505 | .delete( |
| 506 | "/deleteEvent", | 506 | "/deleteEvent", |
| 507 | confirm("Are you sure you want to delete this?") && { | 507 | confirm("Are you sure you want to delete this?") && { |
| 508 | params: deleteEvent, | 508 | params: deleteEvent, |
| 509 | } | 509 | } |
| 510 | ) | 510 | ) |
| 511 | .then((response) => { | 511 | .then((response) => { |
| 512 | // console.log("deleteUers",deleteEvent) | 512 | // console.log("deleteUers",deleteEvent) |
| 513 | if ((this.snackbar = true)) { | 513 | if ((this.snackbar = true)) { |
| 514 | this.text = "Successfully delete Existing Notice Data"; | 514 | this.text = "Successfully delete Existing Notice Data"; |
| 515 | } | 515 | } |
| 516 | this.snackbar = true; | 516 | this.snackbar = true; |
| 517 | this.color = "green"; | 517 | this.color = "green"; |
| 518 | this.getNoticeDataList(); | 518 | this.getNoticeDataList(); |
| 519 | }) | 519 | }) |
| 520 | .catch((error) => { | 520 | .catch((error) => { |
| 521 | // console.log(error); | 521 | // console.log(error); |
| 522 | this.snackbar = true; | 522 | this.snackbar = true; |
| 523 | this.text = error.response.data.message; | 523 | this.text = error.response.data.message; |
| 524 | this.color = "error"; | 524 | this.color = "error"; |
| 525 | }); | 525 | }); |
| 526 | }, | 526 | }, |
| 527 | close() { | 527 | close() { |
| 528 | this.editNoticeBoardDialog = false; | 528 | this.editNoticeBoardDialog = false; |
| 529 | }, | 529 | }, |
| 530 | closeNoticeBoardModel() { | 530 | closeNoticeBoardModel() { |
| 531 | this.addNoticeBoardDialog = false; | 531 | this.addNoticeBoardDialog = false; |
| 532 | this.addNoticeBoard = []; | 532 | this.addNoticeBoard = []; |
| 533 | this.imageName = ""; | 533 | this.imageName = ""; |
| 534 | this.imageFile = ""; | 534 | this.imageFile = ""; |
| 535 | this.imageUrl = ""; | 535 | this.imageUrl = ""; |
| 536 | }, | 536 | }, |
| 537 | submit() { | 537 | submit() { |
| 538 | var signatures = { | 538 | var signatures = { |
| 539 | // JVBERi0: "other", | 539 | // JVBERi0: "other", |
| 540 | // iVBORw0KGgo: "image", | 540 | // iVBORw0KGgo: "image", |
| 541 | // UEsDBBQ: "other", | 541 | // UEsDBBQ: "other", |
| 542 | // "/": "image", | 542 | // "/": "image", |
| 543 | // AAABAA: "image", | 543 | // AAABAA: "image", |
| 544 | // IywiV2hhdC: "other", | 544 | // IywiV2hhdC: "other", |
| 545 | // bmFtZSxl: "other", | 545 | // bmFtZSxl: "other", |
| 546 | }; | 546 | }; |
| 547 | function detectMimeType(b64) { | 547 | function detectMimeType(b64) { |
| 548 | for (var s in signatures) { | 548 | for (var s in signatures) { |
| 549 | if (b64.indexOf(s) === 0) { | 549 | if (b64.indexOf(s) === 0) { |
| 550 | return signatures[s]; | 550 | return signatures[s]; |
| 551 | } | 551 | } |
| 552 | } | 552 | } |
| 553 | } | 553 | } |
| 554 | if (this.$refs.form.validate()) { | 554 | if (this.$refs.form.validate()) { |
| 555 | if (this.imageUrl) { | 555 | if (this.imageUrl) { |
| 556 | var str = this.imageUrl; | 556 | var str = this.imageUrl; |
| 557 | const [baseUrl, imageUrl] = str.split(/,/); | 557 | const [baseUrl, imageUrl] = str.split(/,/); |
| 558 | this.addNoticeBoard.upload = imageUrl; | 558 | this.addNoticeBoard.upload = imageUrl; |
| 559 | this.addNoticeBoard.fileType = detectMimeType(imageUrl); | 559 | this.addNoticeBoard.fileType = detectMimeType(imageUrl); |
| 560 | this.addNoticeBoard.fileName = this.imageName; | 560 | this.addNoticeBoard.fileName = this.imageName; |
| 561 | } | 561 | } |
| 562 | http() | 562 | http() |
| 563 | .post("/createEvent", this.addNoticeBoard) | 563 | .post("/createEvent", this.addNoticeBoard) |
| 564 | .then((response) => { | 564 | .then((response) => { |
| 565 | this.imageUrl = ""; | 565 | this.imageUrl = ""; |
| 566 | this.snackbar = true; | 566 | this.snackbar = true; |
| 567 | this.color = "green"; | 567 | this.color = "green"; |
| 568 | this.text = response.data.message; | 568 | this.text = response.data.message; |
| 569 | this.getNoticeDataList(); | 569 | this.getNoticeDataList(); |
| 570 | this.addNoticeBoardDialog = false; | 570 | this.addNoticeBoardDialog = false; |
| 571 | this.clear(); | 571 | this.clear(); |
| 572 | }) | 572 | }) |
| 573 | .catch((error) => { | 573 | .catch((error) => { |
| 574 | this.snackbar = true; | 574 | this.snackbar = true; |
| 575 | this.text = error.response.data.message; | 575 | this.text = error.response.data.message; |
| 576 | this.color = "error"; | 576 | this.color = "error"; |
| 577 | }); | 577 | }); |
| 578 | } | 578 | } |
| 579 | }, | 579 | }, |
| 580 | onFilePicked(e) { | 580 | onFilePicked(e) { |
| 581 | const files = e.target.files; | 581 | const files = e.target.files; |
| 582 | this.upload = e.target.files[0]; | 582 | this.upload = e.target.files[0]; |
| 583 | if (files[0] !== undefined) { | 583 | if (files[0] !== undefined) { |
| 584 | this.imageName = files[0].name; | 584 | this.imageName = files[0].name; |
| 585 | if (this.imageName.lastIndexOf(".") <= 0) { | 585 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 586 | return; | 586 | return; |
| 587 | } | 587 | } |
| 588 | const fr = new FileReader(); | 588 | const fr = new FileReader(); |
| 589 | fr.readAsDataURL(files[0]); | 589 | fr.readAsDataURL(files[0]); |
| 590 | fr.addEventListener("load", () => { | 590 | fr.addEventListener("load", () => { |
| 591 | this.imageUrl = fr.result; | 591 | this.imageUrl = fr.result; |
| 592 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 592 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 593 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 593 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 594 | }); | 594 | }); |
| 595 | } else { | 595 | } else { |
| 596 | this.imageName = ""; | 596 | this.imageName = ""; |
| 597 | this.imageFile = ""; | 597 | this.imageFile = ""; |
| 598 | this.imageUrl = ""; | 598 | this.imageUrl = ""; |
| 599 | } | 599 | } |
| 600 | }, | 600 | }, |
| 601 | clear() { | 601 | clear() { |
| 602 | this.$refs.form.reset(); | 602 | this.$refs.form.reset(); |
| 603 | this.imageUrl = ""; | 603 | this.imageUrl = ""; |
| 604 | }, | 604 | }, |
| 605 | save() { | 605 | save() { |
| 606 | let editNoticeBoard = { | 606 | let editNoticeBoard = { |
| 607 | eventId: this.editedItem._id, | 607 | eventId: this.editedItem._id, |
| 608 | title: this.editedItem.title, | 608 | title: this.editedItem.title, |
| 609 | description: this.editedItem.description, | 609 | description: this.editedItem.description, |
| 610 | fileName: this.imageName, | 610 | fileName: this.imageName, |
| 611 | }; | 611 | }; |
| 612 | var signatures = { | 612 | var signatures = { |
| 613 | // JVBERi0: "other", | 613 | // JVBERi0: "other", |
| 614 | // iVBORw0KGgo: "image", | 614 | // iVBORw0KGgo: "image", |
| 615 | // UEsDBBQ: "other", | 615 | // UEsDBBQ: "other", |
| 616 | // "/": "image", | 616 | // "/": "image", |
| 617 | // AAABAA: "image", | 617 | // AAABAA: "image", |
| 618 | // IywiV2hhdC: "other", | 618 | // IywiV2hhdC: "other", |
| 619 | }; | 619 | }; |
| 620 | function detectMimeType(b64) { | 620 | function detectMimeType(b64) { |
| 621 | for (var s in signatures) { | 621 | for (var s in signatures) { |
| 622 | if (b64.indexOf(s) === 0) { | 622 | if (b64.indexOf(s) === 0) { |
| 623 | return signatures[s]; | 623 | return signatures[s]; |
| 624 | } | 624 | } |
| 625 | } | 625 | } |
| 626 | } | 626 | } |
| 627 | if (this.imageUrl) { | 627 | if (this.imageUrl) { |
| 628 | var str = this.imageUrl; | 628 | var str = this.imageUrl; |
| 629 | const [baseUrl, imageUrl] = str.split(/,/); | 629 | const [baseUrl, imageUrl] = str.split(/,/); |
| 630 | editNoticeBoard.upload = imageUrl; | 630 | editNoticeBoard.upload = imageUrl; |
| 631 | editNoticeBoard.fileType = detectMimeType(imageUrl); | 631 | editNoticeBoard.fileType = detectMimeType(imageUrl); |
| 632 | } | 632 | } |
| 633 | http() | 633 | http() |
| 634 | .put("/updateEvent", editNoticeBoard) | 634 | .put("/updateEvent", editNoticeBoard) |
| 635 | .then((response) => { | 635 | .then((response) => { |
| 636 | if ((this.snackbar = true)) { | 636 | if ((this.snackbar = true)) { |
| 637 | this.text = "Successfully Edit Existing Notice Data"; | 637 | this.text = "Successfully Edit Existing Notice Data"; |
| 638 | } | 638 | } |
| 639 | this.color = "green"; | 639 | this.color = "green"; |
| 640 | this.snackbar = true; | 640 | this.snackbar = true; |
| 641 | this.getNoticeDataList(); | 641 | this.getNoticeDataList(); |
| 642 | this.close(); | 642 | this.close(); |
| 643 | }) | 643 | }) |
| 644 | .catch((error) => { | 644 | .catch((error) => { |
| 645 | // console.log(error); | 645 | // console.log(error); |
| 646 | this.snackbar = true; | 646 | this.snackbar = true; |
| 647 | this.text = error.response.data.message; | 647 | this.text = error.response.data.message; |
| 648 | this.color = "red"; | 648 | this.color = "red"; |
| 649 | }); | 649 | }); |
| 650 | }, | 650 | }, |
| 651 | displaySearch() { | 651 | displaySearch() { |
| 652 | (this.show = false), (this.showSearch = true); | 652 | (this.show = false), (this.showSearch = true); |
| 653 | }, | 653 | }, |
| 654 | closeSearch() { | 654 | closeSearch() { |
| 655 | this.showSearch = false; | 655 | this.showSearch = false; |
| 656 | this.show = true; | 656 | this.show = true; |
| 657 | this.search = ""; | 657 | this.search = ""; |
| 658 | }, | 658 | }, |
| 659 | async generatePDF2Canvas(item) { | 659 | async generatePDF2Canvas(item) { |
| 660 | var dataType = ""; | 660 | var dataType = ""; |
| 661 | var type = ""; | 661 | var type = ""; |
| 662 | if (item.fileType == "image") { | 662 | if (item.fileType == "image") { |
| 663 | dataType = "file.jpg"; | 663 | dataType = "file.jpg"; |
| 664 | } else if (item.fileType == "other") { | 664 | } else if (item.fileType == "other") { |
| 665 | dataType = "file.pdf"; | 665 | dataType = "file.pdf"; |
| 666 | type = "application/pdf"; | 666 | type = "application/pdf"; |
| 667 | } | 667 | } |
| 668 | var FileSaver = require("file-saver"); | 668 | var FileSaver = require("file-saver"); |
| 669 | FileSaver.saveAs(item.eventImageUrl, "image.jpg"); | 669 | FileSaver.saveAs(item.eventImageUrl, "image.jpg"); |
| 670 | }, | 670 | }, |
| 671 | }, | 671 | }, |
| 672 | mounted() { | 672 | mounted() { |
| 673 | this.getNoticeDataList(); | 673 | this.getNoticeDataList(); |
| 674 | }, | 674 | }, |
| 675 | }; | 675 | }; |
| 676 | </script> | 676 | </script> |
| 677 | 677 | ||
| 678 | <style scoped> | 678 | <style scoped> |
| 679 | a:hover :hover { | 679 | a:hover :hover { |
| 680 | text-decoration: underline !important; | 680 | text-decoration: underline !important; |
| 681 | color: blue; | 681 | color: blue; |
| 682 | } | 682 | } |
| 683 | </style> | 683 | </style> |
src/pages/Notification/notification.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS NOTIFICATION DETAILS ****** --> | 3 | <!-- ****** EDITS NOTIFICATION DETAILS ****** --> |
| 4 | <v-dialog v-model="editNotificationDialog" max-width="500px" persistent> | 4 | <v-dialog v-model="editNotificationDialog" max-width="500px" persistent> |
| 5 | <v-flex xs12 sm12> | 5 | <v-flex xs12 sm12> |
| 6 | <v-card flat class="card-style pa-3" dark> | 6 | <v-card flat class="Card-style pa-3"> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Notification</label> | 9 | <label class="title text-xs-center">Edit Notification</label> |
| 10 | <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 class="pt-4 subheading"> | 15 | <v-flex xs4 class="pt-4 subheading"> |
| 16 | <label class="right">Title:</label> | 16 | <label class="right">Title:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.title" | 20 | v-model="editedItem.title" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Description:</label> | 31 | <label class="right">Description:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 sm8 class="ml-3"> | 33 | <v-flex xs8 sm8 class="ml-3"> |
| 34 | <v-text-field | 34 | <v-text-field |
| 35 | placeholder="fill your Description" | 35 | placeholder="fill your Description" |
| 36 | v-model="editedItem.description" | 36 | v-model="editedItem.description" |
| 37 | type="text" | 37 | type="text" |
| 38 | ></v-text-field> | 38 | ></v-text-field> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-card-actions> | 44 | <v-card-actions> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 46 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 47 | <v-spacer></v-spacer> | 47 | <v-spacer></v-spacer> |
| 48 | </v-card-actions> | 48 | </v-card-actions> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-dialog> | 53 | </v-dialog> |
| 54 | 54 | ||
| 55 | <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> | 55 | <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> |
| 56 | 56 | ||
| 57 | <v-dialog v-model="profileNotificationDialog" max-width="400px" persistent> | 57 | <v-dialog v-model="profileNotificationDialog" max-width="400px" persistent> |
| 58 | <v-card flat class="card-style pa-3" dark> | 58 | <v-card flat class="Card-style pa-3"> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <label class="title text-xs-center">View Notification</label> | 61 | <label class="title text-xs-center">View Notification</label> |
| 62 | <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon> | 62 | <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | </v-layout> | 64 | </v-layout> |
| 65 | <v-card-text> | 65 | <v-card-text> |
| 66 | <v-container grid-list-md> | 66 | <v-container grid-list-md> |
| 67 | <v-layout wrap> | 67 | <v-layout wrap> |
| 68 | <v-flex xs12> | 68 | <v-flex xs12> |
| 69 | <v-layout> | 69 | <v-layout> |
| 70 | <v-flex xs4 sm6> | 70 | <v-flex xs4 sm6> |
| 71 | <h5 class="right my-1"> | 71 | <h5 class="right my-1"> |
| 72 | <b>Title:</b> | 72 | <b>Title:</b> |
| 73 | </h5> | 73 | </h5> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex sm6 xs8> | 75 | <v-flex sm6 xs8> |
| 76 | <h5 class="my-1">{{ editedItem.title }}</h5> | 76 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-layout> | 78 | </v-layout> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs4 sm6> | 81 | <v-flex xs4 sm6> |
| 82 | <h5 class="right my-1"> | 82 | <h5 class="right my-1"> |
| 83 | <b>Description:</b> | 83 | <b>Description:</b> |
| 84 | </h5> | 84 | </h5> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex sm6 xs8> | 86 | <v-flex sm6 xs8> |
| 87 | <h5 class="my-1">{{ editedItem.description }}</h5> | 87 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-container> | 91 | </v-container> |
| 92 | </v-card-text> | 92 | </v-card-text> |
| 93 | </v-card> | 93 | </v-card> |
| 94 | </v-dialog> | 94 | </v-dialog> |
| 95 | <!-- ****** NOTIFICATION TABLE ****** --> | 95 | <!-- ****** NOTIFICATION TABLE ****** --> |
| 96 | <v-toolbar color="transparent" flat> | 96 | <v-toolbar color="transparent" flat> |
| 97 | <v-btn | 97 | <v-btn |
| 98 | fab | 98 | fab |
| 99 | dark | 99 | dark |
| 100 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 100 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 101 | small | 101 | small |
| 102 | @click="addNotificationDialog = true" | 102 | @click="addNotificationDialog = true" |
| 103 | > | 103 | > |
| 104 | <v-icon dark>add</v-icon> | 104 | <v-icon dark>add</v-icon> |
| 105 | </v-btn> | 105 | </v-btn> |
| 106 | <v-btn | 106 | <v-btn |
| 107 | round | 107 | round |
| 108 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 108 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 109 | dark | 109 | dark |
| 110 | @click="addNotificationDialog = true" | 110 | @click="addNotificationDialog = true" |
| 111 | > | 111 | > |
| 112 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification | 112 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification |
| 113 | </v-btn> | 113 | </v-btn> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | <v-card-title class="body-1" v-show="show"> | 115 | <v-card-title class="body-1" v-show="show"> |
| 116 | <v-btn icon large flat @click="displaySearch"> | 116 | <v-btn icon large flat @click="displaySearch"> |
| 117 | <v-avatar size="27"> | 117 | <v-avatar size="27"> |
| 118 | <img src="/static/icon/search.png" alt="icon" /> | 118 | <img src="/static/icon/search.png" alt="icon" /> |
| 119 | </v-avatar> | 119 | </v-avatar> |
| 120 | </v-btn> | 120 | </v-btn> |
| 121 | </v-card-title> | 121 | </v-card-title> |
| 122 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 122 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-text-field | 124 | <v-text-field |
| 125 | autofocus | 125 | autofocus |
| 126 | v-model="search" | 126 | v-model="search" |
| 127 | label="Search" | 127 | label="Search" |
| 128 | prepend-inner-icon="search" | 128 | prepend-inner-icon="search" |
| 129 | color="primary" | 129 | color="primary" |
| 130 | ></v-text-field> | 130 | ></v-text-field> |
| 131 | <v-icon @click="closeSearch" color="error">close</v-icon> | 131 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-toolbar> | 134 | </v-toolbar> |
| 135 | <v-data-table | 135 | <v-data-table |
| 136 | :headers="headers" | 136 | :headers="headers" |
| 137 | :items="notifications" | 137 | :items="notifications" |
| 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 | <tr class="tr"> | 142 | <tr class="tr"> |
| 143 | <td class="td td-row">{{ props.index + 1}}</td> | 143 | <td class="td td-row">{{ props.index + 1}}</td> |
| 144 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 144 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 145 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 145 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 146 | <td class="td td-row text-xs-center"> | 146 | <td class="td td-row text-xs-center"> |
| 147 | <span> | 147 | <span> |
| 148 | <v-tooltip top> | 148 | <v-tooltip top> |
| 149 | <img | 149 | <img |
| 150 | slot="activator" | 150 | slot="activator" |
| 151 | style="cursor:pointer; width:25px; height:25px; " | 151 | style="cursor:pointer; width:25px; height:25px; " |
| 152 | class="mr-3" | 152 | class="mr-3" |
| 153 | @click="profile(props.item)" | 153 | @click="profile(props.item)" |
| 154 | src="/static/icon/view.png" | 154 | src="/static/icon/view.png" |
| 155 | /> | 155 | /> |
| 156 | <span>View</span> | 156 | <span>View</span> |
| 157 | </v-tooltip> | 157 | </v-tooltip> |
| 158 | <v-tooltip top> | 158 | <v-tooltip top> |
| 159 | <img | 159 | <img |
| 160 | slot="activator" | 160 | slot="activator" |
| 161 | style="cursor:pointer; width:20px; height:18px; " | 161 | style="cursor:pointer; width:20px; height:18px; " |
| 162 | class="mr-3" | 162 | class="mr-3" |
| 163 | @click="editItem(props.item)" | 163 | @click="editItem(props.item)" |
| 164 | src="/static/icon/edit.png" | 164 | src="/static/icon/edit.png" |
| 165 | /> | 165 | /> |
| 166 | <span>Edit</span> | 166 | <span>Edit</span> |
| 167 | </v-tooltip> | 167 | </v-tooltip> |
| 168 | <v-tooltip top> | 168 | <v-tooltip top> |
| 169 | <img | 169 | <img |
| 170 | slot="activator" | 170 | slot="activator" |
| 171 | style="cursor:pointer; width:20px; height:20px; " | 171 | style="cursor:pointer; width:20px; height:20px; " |
| 172 | class="mr-3" | 172 | class="mr-3" |
| 173 | @click="deleteItem(props.item)" | 173 | @click="deleteItem(props.item)" |
| 174 | src="/static/icon/delete.png" | 174 | src="/static/icon/delete.png" |
| 175 | /> | 175 | /> |
| 176 | <span>Delete</span> | 176 | <span>Delete</span> |
| 177 | </v-tooltip> | 177 | </v-tooltip> |
| 178 | </span> | 178 | </span> |
| 179 | </td> | 179 | </td> |
| 180 | </tr> | 180 | </tr> |
| 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 | 189 | ||
| 190 | <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> | 190 | <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> |
| 191 | <v-dialog v-model="addNotificationDialog" max-width="480px" v-if="addNotificationDialog" persistent> | 191 | <v-dialog |
| 192 | <v-card flat class="card-style pa-2" dark> | 192 | v-model="addNotificationDialog" |
| 193 | max-width="480px" | ||
| 194 | v-if="addNotificationDialog" | ||
| 195 | persistent | ||
| 196 | > | ||
| 197 | <v-card flat class="Card-style pa-2"> | ||
| 193 | <v-layout> | 198 | <v-layout> |
| 194 | <v-flex xs12> | 199 | <v-flex xs12> |
| 195 | <label class="title text-xs-center">Add Notification</label> | 200 | <label class="title text-xs-center">Add Notification</label> |
| 196 | <v-icon size="24" class="right" @click="closeAddNotificationModel">cancel</v-icon> | 201 | <v-icon size="24" class="right" @click="closeAddNotificationModel">cancel</v-icon> |
| 197 | </v-flex> | 202 | </v-flex> |
| 198 | </v-layout> | 203 | </v-layout> |
| 199 | <v-form ref="form" v-model="valid" lazy-validation> | 204 | <v-form ref="form" v-model="valid" lazy-validation> |
| 200 | <v-container fluid fill-height> | 205 | <v-container fluid fill-height> |
| 201 | <v-layout align-center wrap> | 206 | <v-layout align-center wrap> |
| 202 | <v-flex xs12> | 207 | <v-flex xs12> |
| 203 | <v-layout> | 208 | <v-layout> |
| 204 | <v-flex xs4 class="pt-4 subheading"> | 209 | <v-flex xs4 class="pt-4 subheading"> |
| 205 | <label class="right">Title:</label> | 210 | <label class="right">Title:</label> |
| 206 | </v-flex> | 211 | </v-flex> |
| 207 | <v-flex xs8 sm8 class="ml-3"> | 212 | <v-flex xs8 sm8 class="ml-3"> |
| 208 | <v-text-field | 213 | <v-text-field |
| 209 | v-model="addNotification.title" | 214 | v-model="addNotification.title" |
| 210 | placeholder="fill your Title" | 215 | placeholder="fill your Title" |
| 211 | type="text" | 216 | type="text" |
| 212 | :rules="titleRules" | 217 | :rules="titleRules" |
| 213 | required | 218 | required |
| 214 | ></v-text-field> | 219 | ></v-text-field> |
| 215 | </v-flex> | 220 | </v-flex> |
| 216 | </v-layout> | 221 | </v-layout> |
| 217 | </v-flex> | 222 | </v-flex> |
| 218 | <v-flex xs12> | 223 | <v-flex xs12> |
| 219 | <v-layout> | 224 | <v-layout> |
| 220 | <v-flex xs4 class="pt-4 subheading"> | 225 | <v-flex xs4 class="pt-4 subheading"> |
| 221 | <label class="right">Description:</label> | 226 | <label class="right">Description:</label> |
| 222 | </v-flex> | 227 | </v-flex> |
| 223 | <v-flex xs8 sm8 class="ml-3"> | 228 | <v-flex xs8 sm8 class="ml-3"> |
| 224 | <v-text-field | 229 | <v-text-field |
| 225 | placeholder="fill your Description" | 230 | placeholder="fill your Description" |
| 226 | :rules="descriptionRules" | 231 | :rules="descriptionRules" |
| 227 | v-model="addNotification.description" | 232 | v-model="addNotification.description" |
| 228 | type="text" | 233 | type="text" |
| 229 | required | 234 | required |
| 230 | ></v-text-field> | 235 | ></v-text-field> |
| 231 | </v-flex> | 236 | </v-flex> |
| 232 | </v-layout> | 237 | </v-layout> |
| 233 | </v-flex> | 238 | </v-flex> |
| 234 | <v-layout> | 239 | <v-layout> |
| 235 | <v-flex xs12 sm12> | 240 | <v-flex xs12 sm12> |
| 236 | <v-layout class="hidden-xs-only hidden-sm-only right"> | 241 | <v-layout class="hidden-xs-only hidden-sm-only right"> |
| 237 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> | 242 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> |
| 238 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 243 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 239 | </v-layout> | 244 | </v-layout> |
| 240 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 245 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 241 | <v-spacer></v-spacer> | 246 | <v-spacer></v-spacer> |
| 242 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> | 247 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> |
| 243 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 248 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 244 | <v-spacer></v-spacer> | 249 | <v-spacer></v-spacer> |
| 245 | </v-card-actions> | 250 | </v-card-actions> |
| 246 | </v-flex> | 251 | </v-flex> |
| 247 | </v-layout> | 252 | </v-layout> |
| 248 | </v-layout> | 253 | </v-layout> |
| 249 | </v-container> | 254 | </v-container> |
| 250 | </v-form> | 255 | </v-form> |
| 251 | </v-card> | 256 | </v-card> |
| 252 | </v-dialog> | 257 | </v-dialog> |
| 253 | <v-snackbar | 258 | <v-snackbar |
| 254 | :timeout="timeout" | 259 | :timeout="timeout" |
| 255 | :top="y === 'top'" | 260 | :top="y === 'top'" |
| 256 | :right="x === 'right'" | 261 | :right="x === 'right'" |
| 257 | :vertical="mode === 'vertical'" | 262 | :vertical="mode === 'vertical'" |
| 258 | v-model="snackbar" | 263 | v-model="snackbar" |
| 259 | :color="color" | 264 | :color="color" |
| 260 | >{{ text }}</v-snackbar> | 265 | >{{ text }}</v-snackbar> |
| 261 | <div class="loader" v-if="showLoader"> | 266 | <div class="loader" v-if="showLoader"> |
| 262 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 267 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 263 | </div> | 268 | </div> |
| 264 | </v-container> | 269 | </v-container> |
| 265 | </template> | 270 | </template> |
| 266 | 271 | ||
| 267 | <script> | 272 | <script> |
| 268 | import http from "@/Services/http.js"; | 273 | import http from "@/Services/http.js"; |
| 269 | import Util from "@/util"; | 274 | import Util from "@/util"; |
| 270 | 275 | ||
| 271 | export default { | 276 | export default { |
| 272 | data: () => ({ | 277 | data: () => ({ |
| 273 | snackbar: false, | 278 | snackbar: false, |
| 274 | y: "top", | 279 | y: "top", |
| 275 | x: "right", | 280 | x: "right", |
| 276 | mode: "", | 281 | mode: "", |
| 277 | timeout: 3000, | 282 | timeout: 3000, |
| 278 | text: "", | 283 | text: "", |
| 279 | loading: false, | 284 | loading: false, |
| 280 | editLoading: false, | 285 | editLoading: false, |
| 281 | date: null, | 286 | date: null, |
| 282 | search: "", | 287 | search: "", |
| 283 | color: "", | 288 | color: "", |
| 284 | show: true, | 289 | show: true, |
| 285 | showSearch: false, | 290 | showSearch: false, |
| 286 | showLoader: false, | 291 | showLoader: false, |
| 287 | profileNotificationDialog: false, | 292 | profileNotificationDialog: false, |
| 288 | editNotificationDialog: false, | 293 | editNotificationDialog: false, |
| 289 | valid: true, | 294 | valid: true, |
| 290 | addNotificationDialog: false, | 295 | addNotificationDialog: false, |
| 291 | pagination: { | 296 | pagination: { |
| 292 | rowsPerPage: 10, | 297 | rowsPerPage: 10, |
| 293 | }, | 298 | }, |
| 294 | imageData: {}, | 299 | imageData: {}, |
| 295 | imageName: "", | 300 | imageName: "", |
| 296 | imageUrl: "", | 301 | imageUrl: "", |
| 297 | imageFile: "", | 302 | imageFile: "", |
| 298 | titleRules: [(v) => !!v || " Tilte is required"], | 303 | titleRules: [(v) => !!v || " Tilte is required"], |
| 299 | descriptionRules: [(v) => !!v || " Description is required"], | 304 | descriptionRules: [(v) => !!v || " Description is required"], |
| 300 | headers: [ | 305 | headers: [ |
| 301 | { | 306 | { |
| 302 | text: "No", | 307 | text: "No", |
| 303 | align: "", | 308 | align: "", |
| 304 | sortable: false, | 309 | sortable: false, |
| 305 | value: "No", | 310 | value: "No", |
| 306 | }, | 311 | }, |
| 307 | { text: "Title", value: "title", sortable: false, align: "center" }, | 312 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 308 | { | 313 | { |
| 309 | text: "Description", | 314 | text: "Description", |
| 310 | value: "description", | 315 | value: "description", |
| 311 | sortable: false, | 316 | sortable: false, |
| 312 | align: "center", | 317 | align: "center", |
| 313 | }, | 318 | }, |
| 314 | { text: "Action", value: "", sortable: false, align: "center" }, | 319 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 315 | ], | 320 | ], |
| 316 | notifications: [], | 321 | notifications: [], |
| 317 | editedIndex: -1, | 322 | editedIndex: -1, |
| 318 | addNotification: { | 323 | addNotification: { |
| 319 | title: "", | 324 | title: "", |
| 320 | description: "", | 325 | description: "", |
| 321 | }, | 326 | }, |
| 322 | editedItem: { | 327 | editedItem: { |
| 323 | title: "", | 328 | title: "", |
| 324 | description: "", | 329 | description: "", |
| 325 | }, | 330 | }, |
| 326 | }), | 331 | }), |
| 327 | watch: { | 332 | watch: { |
| 328 | addNotificationDialog: function (val) { | 333 | addNotificationDialog: function (val) { |
| 329 | if (!val) { | 334 | if (!val) { |
| 330 | this.addNotification = []; | 335 | this.addNotification = []; |
| 331 | } | 336 | } |
| 332 | }, | 337 | }, |
| 333 | }, | 338 | }, |
| 334 | methods: { | 339 | methods: { |
| 335 | pickFile() { | 340 | pickFile() { |
| 336 | this.$refs.image.click(); | 341 | this.$refs.image.click(); |
| 337 | }, | 342 | }, |
| 338 | 343 | ||
| 339 | onFilePicked(e) { | 344 | onFilePicked(e) { |
| 340 | const files = e.target.files; | 345 | const files = e.target.files; |
| 341 | this.imageData.upload = e.target.files[0]; | 346 | this.imageData.upload = e.target.files[0]; |
| 342 | if (files[0] !== undefined) { | 347 | if (files[0] !== undefined) { |
| 343 | this.imageName = files[0].name; | 348 | this.imageName = files[0].name; |
| 344 | if (this.imageName.lastIndexOf(".") <= 0) { | 349 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 345 | return; | 350 | return; |
| 346 | } | 351 | } |
| 347 | const fr = new FileReader(); | 352 | const fr = new FileReader(); |
| 348 | fr.readAsDataURL(files[0]); | 353 | fr.readAsDataURL(files[0]); |
| 349 | fr.addEventListener("load", () => { | 354 | fr.addEventListener("load", () => { |
| 350 | this.imageUrl = fr.result; | 355 | this.imageUrl = fr.result; |
| 351 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 356 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 352 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 357 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 353 | }); | 358 | }); |
| 354 | } else { | 359 | } else { |
| 355 | this.imageName = ""; | 360 | this.imageName = ""; |
| 356 | this.imageFile = ""; | 361 | this.imageFile = ""; |
| 357 | this.imageUrl = ""; | 362 | this.imageUrl = ""; |
| 358 | } | 363 | } |
| 359 | }, | 364 | }, |
| 360 | getNotifications() { | 365 | getNotifications() { |
| 361 | this.showLoader = true; | 366 | this.showLoader = true; |
| 362 | var token = this.$store.state.token; | 367 | var token = this.$store.state.token; |
| 363 | http() | 368 | http() |
| 364 | .get("/getNotificationsList", { | 369 | .get("/getNotificationsList", { |
| 365 | headers: { Authorization: "Bearer " + token }, | 370 | headers: { Authorization: "Bearer " + token }, |
| 366 | }) | 371 | }) |
| 367 | .then((response) => { | 372 | .then((response) => { |
| 368 | this.notifications = response.data.data; | 373 | this.notifications = response.data.data; |
| 369 | this.showLoader = false; | 374 | this.showLoader = false; |
| 370 | }) | 375 | }) |
| 371 | .catch((error) => { | 376 | .catch((error) => { |
| 372 | this.showLoader = false; | 377 | this.showLoader = false; |
| 373 | if (error.response.status === 401) { | 378 | if (error.response.status === 401) { |
| 374 | this.$router.replace({ path: "/" }); | 379 | this.$router.replace({ path: "/" }); |
| 375 | this.$store.dispatch("setToken", null); | 380 | this.$store.dispatch("setToken", null); |
| 376 | this.$store.dispatch("Id", null); | 381 | this.$store.dispatch("Id", null); |
| 377 | } | 382 | } |
| 378 | }); | 383 | }); |
| 379 | }, | 384 | }, |
| 380 | editItem(item) { | 385 | editItem(item) { |
| 381 | this.editedIndex = this.notifications.indexOf(item); | 386 | this.editedIndex = this.notifications.indexOf(item); |
| 382 | this.editedItem = Object.assign({}, item); | 387 | this.editedItem = Object.assign({}, item); |
| 383 | this.editNotificationDialog = true; | 388 | this.editNotificationDialog = true; |
| 384 | }, | 389 | }, |
| 385 | profile(item) { | 390 | profile(item) { |
| 386 | this.editedIndex = this.notifications.indexOf(item); | 391 | this.editedIndex = this.notifications.indexOf(item); |
| 387 | this.editedItem = Object.assign({}, item); | 392 | this.editedItem = Object.assign({}, item); |
| 388 | this.profileNotificationDialog = true; | 393 | this.profileNotificationDialog = true; |
| 389 | }, | 394 | }, |
| 390 | 395 | ||
| 391 | deleteItem(item) { | 396 | deleteItem(item) { |
| 392 | let deleteNotification = { | 397 | let deleteNotification = { |
| 393 | notificationId: item._id, | 398 | notificationId: item._id, |
| 394 | }; | 399 | }; |
| 395 | http() | 400 | http() |
| 396 | .delete( | 401 | .delete( |
| 397 | "/deleteNotification", | 402 | "/deleteNotification", |
| 398 | confirm("Are you sure you want to delete this?") && { | 403 | confirm("Are you sure you want to delete this?") && { |
| 399 | params: deleteNotification, | 404 | params: deleteNotification, |
| 400 | } | 405 | } |
| 401 | ) | 406 | ) |
| 402 | .then((response) => { | 407 | .then((response) => { |
| 403 | this.snackbar = true; | 408 | this.snackbar = true; |
| 404 | this.text = response.data.message; | 409 | this.text = response.data.message; |
| 405 | this.color = "green"; | 410 | this.color = "green"; |
| 406 | this.getNotifications(); | 411 | this.getNotifications(); |
| 407 | }) | 412 | }) |
| 408 | .catch((error) => { | 413 | .catch((error) => { |
| 409 | this.snackbar = true; | 414 | this.snackbar = true; |
| 410 | this.text = error.response.data.message; | 415 | this.text = error.response.data.message; |
| 411 | this.color = "error"; | 416 | this.color = "error"; |
| 412 | }); | 417 | }); |
| 413 | }, | 418 | }, |
| 414 | close() { | 419 | close() { |
| 415 | this.editNotificationDialog = false; | 420 | this.editNotificationDialog = false; |
| 416 | }, | 421 | }, |
| 417 | closeNotificationDialog() { | 422 | closeNotificationDialog() { |
| 418 | this.profileNotificationDialog = false; | 423 | this.profileNotificationDialog = false; |
| 419 | }, | 424 | }, |
| 420 | closeAddNotificationModel() { | 425 | closeAddNotificationModel() { |
| 421 | this.addNotificationDialog = false; | 426 | this.addNotificationDialog = false; |
| 422 | this.addNotification = []; | 427 | this.addNotification = []; |
| 423 | }, | 428 | }, |
| 424 | submit() { | 429 | submit() { |
| 425 | if (this.$refs.form.validate()) { | 430 | if (this.$refs.form.validate()) { |
| 426 | let imageData = new FormData(); | 431 | let imageData = new FormData(); |
| 427 | imageData.append("upload", this.imageFile); | 432 | imageData.append("upload", this.imageFile); |
| 428 | let create = { | 433 | let create = { |
| 429 | title: this.addNotification.title, | 434 | title: this.addNotification.title, |
| 430 | description: this.addNotification.description, | 435 | description: this.addNotification.description, |
| 431 | }; | 436 | }; |
| 432 | this.loading = true; | 437 | this.loading = true; |
| 433 | http() | 438 | http() |
| 434 | .post("/createNotification", create) | 439 | .post("/createNotification", create) |
| 435 | .then((response) => { | 440 | .then((response) => { |
| 436 | this.snackbar = true; | 441 | this.snackbar = true; |
| 437 | this.text = response.data.message; | 442 | this.text = response.data.message; |
| 438 | this.color = "green"; | 443 | this.color = "green"; |
| 439 | this.getNotifications(); | 444 | this.getNotifications(); |
| 440 | this.addNotificationDialog = false; | 445 | this.addNotificationDialog = false; |
| 441 | this.clear(); | 446 | this.clear(); |
| 442 | this.loading = false; | 447 | this.loading = false; |
| 443 | }) | 448 | }) |
| 444 | .catch((error) => { | 449 | .catch((error) => { |
| 445 | this.snackbar = true; | 450 | this.snackbar = true; |
| 446 | this.text = error.response.data.message; | 451 | this.text = error.response.data.message; |
| 447 | this.color = "error"; | 452 | this.color = "error"; |
| 448 | this.loading = false; | 453 | this.loading = false; |
| 449 | }); | 454 | }); |
| 450 | } | 455 | } |
| 451 | }, | 456 | }, |
| 452 | clear() { | 457 | clear() { |
| 453 | this.$refs.form.reset(); | 458 | this.$refs.form.reset(); |
| 454 | }, | 459 | }, |
| 455 | save() { | 460 | save() { |
| 456 | let imageData = new FormData(); | 461 | let imageData = new FormData(); |
| 457 | imageData.append("upload", this.imageFile); | 462 | imageData.append("upload", this.imageFile); |
| 458 | let editNotification = { | 463 | let editNotification = { |
| 459 | notificationId: this.editedItem._id, | 464 | notificationId: this.editedItem._id, |
| 460 | title: this.editedItem.title, | 465 | title: this.editedItem.title, |
| 461 | description: this.editedItem.description, | 466 | description: this.editedItem.description, |
| 462 | }; | 467 | }; |
| 463 | this.editLoading = true; | 468 | this.editLoading = true; |
| 464 | http() | 469 | http() |
| 465 | .put("/updateNotification", editNotification) | 470 | .put("/updateNotification", editNotification) |
| 466 | .then((response) => { | 471 | .then((response) => { |
| 467 | this.snackbar = true; | 472 | this.snackbar = true; |
| 468 | this.text = response.data.message; | 473 | this.text = response.data.message; |
| 469 | this.color = "green"; | 474 | this.color = "green"; |
| 470 | this.getNotifications(); | 475 | this.getNotifications(); |
| 471 | this.close(); | 476 | this.close(); |
| 472 | this.editLoading = false; | 477 | this.editLoading = false; |
| 473 | }) | 478 | }) |
| 474 | .catch((error) => { | 479 | .catch((error) => { |
| 475 | this.editLoading = false; | 480 | this.editLoading = false; |
| 476 | this.snackbar = true; | 481 | this.snackbar = true; |
| 477 | this.color = "error"; | 482 | this.color = "error"; |
| 478 | this.text = error.response.data.message; | 483 | this.text = error.response.data.message; |
| 479 | }); | 484 | }); |
| 480 | }, | 485 | }, |
| 481 | displaySearch() { | 486 | displaySearch() { |
| 482 | (this.show = false), (this.showSearch = true); | 487 | (this.show = false), (this.showSearch = true); |
| 483 | }, | 488 | }, |
| 484 | closeSearch() { | 489 | closeSearch() { |
| 485 | this.showSearch = false; | 490 | this.showSearch = false; |
| 486 | this.show = true; | 491 | this.show = true; |
| 487 | this.search = ""; | 492 | this.search = ""; |
| 488 | }, | 493 | }, |
| 489 | }, | 494 | }, |
| 490 | mounted() { | 495 | mounted() { |
| 491 | this.getNotifications(); | 496 | this.getNotifications(); |
| 492 | }, | 497 | }, |
| 493 | }; | 498 | }; |
| 494 | </script> | 499 | </script> |
src/pages/Payroll/hourlyTemplate.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Hourly Template ****** --> | 3 | <!-- ****** Edit Hourly Template ****** --> |
| 4 | <v-dialog v-model="editHourDialog" max-width="400px" persistent> | 4 | <v-dialog v-model="editHourDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Hourly Template</label> | 8 | <label class="title text-xs-center">Edit Hourly Template</label> |
| 9 | <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs3 class="pt-4 subheading"> | 16 | <v-flex xs3 class="pt-4 subheading"> |
| 17 | <label class="right">Hourly Grades:</label> | 17 | <label class="right">Hourly Grades:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm7 class="ml-3"> | 19 | <v-flex xs8 sm7 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.hourlyGrades" | 21 | v-model="editedItem.hourlyGrades" |
| 22 | placeholder="please fill this field" | 22 | placeholder="please fill this field" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs3 class="pt-4 subheading"> | 29 | <v-flex xs3 class="pt-4 subheading"> |
| 30 | <label class="right">Hourly Reates:</label> | 30 | <label class="right">Hourly Reates:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm7 class="ml-3"> | 32 | <v-flex xs8 sm7 class="ml-3"> |
| 33 | <v-text-field | 33 | <v-text-field |
| 34 | v-model="editedItem.hourlyRate" | 34 | v-model="editedItem.hourlyRate" |
| 35 | placeholder="please fill this field" | 35 | placeholder="please fill this field" |
| 36 | ></v-text-field> | 36 | ></v-text-field> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-layout> | 40 | <v-layout> |
| 41 | <v-flex xs12> | 41 | <v-flex xs12> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-spacer></v-spacer> | 43 | <v-spacer></v-spacer> |
| 44 | <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn> | 44 | <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | </v-layout> | 46 | </v-layout> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-container> | 49 | </v-container> |
| 50 | </v-form> | 50 | </v-form> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-dialog> | 52 | </v-dialog> |
| 53 | 53 | ||
| 54 | <!-- **** HOURLY TEMPLATE **** --> | 54 | <!-- **** HOURLY TEMPLATE **** --> |
| 55 | <v-toolbar color="transparent" flat> | 55 | <v-toolbar color="transparent" flat> |
| 56 | <v-btn | 56 | <v-btn |
| 57 | fab | 57 | fab |
| 58 | dark | 58 | dark |
| 59 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 59 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 60 | small | 60 | small |
| 61 | @click="addHourDialog = true" | 61 | @click="addHourDialog = true" |
| 62 | > | 62 | > |
| 63 | <v-icon dark>add</v-icon> | 63 | <v-icon dark>add</v-icon> |
| 64 | </v-btn> | 64 | </v-btn> |
| 65 | <v-btn | 65 | <v-btn |
| 66 | round | 66 | round |
| 67 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 67 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 68 | dark | 68 | dark |
| 69 | @click="addHourDialog = true" | 69 | @click="addHourDialog = true" |
| 70 | > | 70 | > |
| 71 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template | 71 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template |
| 72 | </v-btn> | 72 | </v-btn> |
| 73 | <v-spacer></v-spacer> | 73 | <v-spacer></v-spacer> |
| 74 | <v-card-title class="body-1" v-show="show"> | 74 | <v-card-title class="body-1" v-show="show"> |
| 75 | <v-btn icon large flat @click="displaySearch"> | 75 | <v-btn icon large flat @click="displaySearch"> |
| 76 | <v-avatar size="27"> | 76 | <v-avatar size="27"> |
| 77 | <img src="/static/icon/search.png" alt="icon" /> | 77 | <img src="/static/icon/search.png" alt="icon" /> |
| 78 | </v-avatar> | 78 | </v-avatar> |
| 79 | </v-btn> | 79 | </v-btn> |
| 80 | </v-card-title> | 80 | </v-card-title> |
| 81 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 81 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 82 | <v-layout> | 82 | <v-layout> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | autofocus | 84 | autofocus |
| 85 | v-model="search" | 85 | v-model="search" |
| 86 | label="Search" | 86 | label="Search" |
| 87 | prepend-inner-icon="search" | 87 | prepend-inner-icon="search" |
| 88 | color="primary" | 88 | color="primary" |
| 89 | ></v-text-field> | 89 | ></v-text-field> |
| 90 | <v-icon @click="closeSearch" color="error">close</v-icon> | 90 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 91 | </v-layout> | 91 | </v-layout> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-toolbar> | 93 | </v-toolbar> |
| 94 | 94 | ||
| 95 | <v-data-table | 95 | <v-data-table |
| 96 | :headers="headers" | 96 | :headers="headers" |
| 97 | :items="hourlyData" | 97 | :items="hourlyData" |
| 98 | :pagination.sync="pagination" | 98 | :pagination.sync="pagination" |
| 99 | :search="search" | 99 | :search="search" |
| 100 | > | 100 | > |
| 101 | <template slot="items" slot-scope="props"> | 101 | <template slot="items" slot-scope="props"> |
| 102 | <tr class="tr"> | 102 | <tr class="tr"> |
| 103 | <td class="td td-row">{{ props.index + 1}}</td> | 103 | <td class="td td-row">{{ props.index + 1}}</td> |
| 104 | <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td> | 104 | <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td> |
| 105 | <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td> | 105 | <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td> |
| 106 | <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> --> | 106 | <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> --> |
| 107 | <td class="td td-row text-xs-center"> | 107 | <td class="td td-row text-xs-center"> |
| 108 | <span> | 108 | <span> |
| 109 | <v-tooltip top> | 109 | <v-tooltip top> |
| 110 | <img | 110 | <img |
| 111 | slot="activator" | 111 | slot="activator" |
| 112 | style="cursor:pointer; width:20px; height:18px; " | 112 | style="cursor:pointer; width:20px; height:18px; " |
| 113 | class="mr-3" | 113 | class="mr-3" |
| 114 | @click="editItem(props.item)" | 114 | @click="editItem(props.item)" |
| 115 | src="/static/icon/edit.png" | 115 | src="/static/icon/edit.png" |
| 116 | /> | 116 | /> |
| 117 | <span>Edit</span> | 117 | <span>Edit</span> |
| 118 | </v-tooltip> | 118 | </v-tooltip> |
| 119 | <v-tooltip top> | 119 | <v-tooltip top> |
| 120 | <img | 120 | <img |
| 121 | slot="activator" | 121 | slot="activator" |
| 122 | style="cursor:pointer; width:20px; height:20px; " | 122 | style="cursor:pointer; width:20px; height:20px; " |
| 123 | class="mr-3" | 123 | class="mr-3" |
| 124 | @click="deleteItem(props.item)" | 124 | @click="deleteItem(props.item)" |
| 125 | src="/static/icon/delete.png" | 125 | src="/static/icon/delete.png" |
| 126 | /> | 126 | /> |
| 127 | <span>Delete</span> | 127 | <span>Delete</span> |
| 128 | </v-tooltip> | 128 | </v-tooltip> |
| 129 | </span> | 129 | </span> |
| 130 | </td> | 130 | </td> |
| 131 | </tr> | 131 | </tr> |
| 132 | </template> | 132 | </template> |
| 133 | <v-alert | 133 | <v-alert |
| 134 | slot="no-results" | 134 | slot="no-results" |
| 135 | :value="true" | 135 | :value="true" |
| 136 | color="error" | 136 | color="error" |
| 137 | icon="warning" | 137 | icon="warning" |
| 138 | >Your search for "{{ search }}" found no results.</v-alert> | 138 | >Your search for "{{ search }}" found no results.</v-alert> |
| 139 | </v-data-table> | 139 | </v-data-table> |
| 140 | 140 | ||
| 141 | <!-- **** Add Hourly Template **** --> | 141 | <!-- **** Add Hourly Template **** --> |
| 142 | <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog" persistent> | 142 | <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog" persistent> |
| 143 | <v-card flat class="card-style pa-2" dark> | 143 | <v-card flat class="Card-style pa-2"> |
| 144 | <v-layout> | 144 | <v-layout> |
| 145 | <v-flex xs12> | 145 | <v-flex xs12> |
| 146 | <label class="title text-xs-center">Add Hourly Template</label> | 146 | <label class="title text-xs-center">Add Hourly Template</label> |
| 147 | <v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon> | 147 | <v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | <v-form ref="form" v-model="valid" lazy-validation> | 150 | <v-form ref="form" v-model="valid" lazy-validation> |
| 151 | <v-container fluid> | 151 | <v-container fluid> |
| 152 | <v-flex xs12> | 152 | <v-flex xs12> |
| 153 | <v-layout> | 153 | <v-layout> |
| 154 | <v-flex xs4 class="pt-4 subheading"> | 154 | <v-flex xs4 class="pt-4 subheading"> |
| 155 | <label class="right">Hourly Grades:</label> | 155 | <label class="right">Hourly Grades:</label> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | <v-flex xs8 sm7 class="ml-3"> | 157 | <v-flex xs8 sm7 class="ml-3"> |
| 158 | <v-text-field | 158 | <v-text-field |
| 159 | placeholder="Please fill this field" | 159 | placeholder="Please fill this field" |
| 160 | :rules="hourRules" | 160 | :rules="hourRules" |
| 161 | v-model="hourlyTypes.hourlyGrades" | 161 | v-model="hourlyTypes.hourlyGrades" |
| 162 | ></v-text-field> | 162 | ></v-text-field> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | </v-layout> | 164 | </v-layout> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs12> | 166 | <v-flex xs12> |
| 167 | <v-layout> | 167 | <v-layout> |
| 168 | <v-flex xs4 class="pt-4 subheading"> | 168 | <v-flex xs4 class="pt-4 subheading"> |
| 169 | <label class="right">Hourly Rate:</label> | 169 | <label class="right">Hourly Rate:</label> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | <v-flex xs8 sm7 class="ml-3"> | 171 | <v-flex xs8 sm7 class="ml-3"> |
| 172 | <v-text-field | 172 | <v-text-field |
| 173 | placeholder="Please fill this field" | 173 | placeholder="Please fill this field" |
| 174 | :rules="hourRules" | 174 | :rules="hourRules" |
| 175 | v-model="hourlyTypes.hourlyRate" | 175 | v-model="hourlyTypes.hourlyRate" |
| 176 | ></v-text-field> | 176 | ></v-text-field> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex xs12 sm12> | 181 | <v-flex xs12 sm12> |
| 182 | <v-layout> | 182 | <v-layout> |
| 183 | <v-spacer></v-spacer> | 183 | <v-spacer></v-spacer> |
| 184 | <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> --> | 184 | <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> --> |
| 185 | <v-btn | 185 | <v-btn |
| 186 | @click="submit" | 186 | @click="submit" |
| 187 | round | 187 | round |
| 188 | dark | 188 | dark |
| 189 | :loading="loading" | 189 | :loading="loading" |
| 190 | class="add-button" | 190 | class="add-button" |
| 191 | >Add Hourly Template</v-btn> | 191 | >Add Hourly Template</v-btn> |
| 192 | <v-spacer></v-spacer> | 192 | <v-spacer></v-spacer> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | </v-container> | 196 | </v-container> |
| 197 | </v-form> | 197 | </v-form> |
| 198 | </v-card> | 198 | </v-card> |
| 199 | </v-dialog> | 199 | </v-dialog> |
| 200 | 200 | ||
| 201 | <v-snackbar | 201 | <v-snackbar |
| 202 | :timeout="timeout" | 202 | :timeout="timeout" |
| 203 | :top="y === 'top'" | 203 | :top="y === 'top'" |
| 204 | :right="x === 'right'" | 204 | :right="x === 'right'" |
| 205 | :vertical="mode === 'vertical'" | 205 | :vertical="mode === 'vertical'" |
| 206 | v-model="snackbar" | 206 | v-model="snackbar" |
| 207 | :color="color" | 207 | :color="color" |
| 208 | >{{ text }}</v-snackbar> | 208 | >{{ text }}</v-snackbar> |
| 209 | <div class="loader" v-if="showLoader"> | 209 | <div class="loader" v-if="showLoader"> |
| 210 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 210 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 211 | </div> | 211 | </div> |
| 212 | </v-container> | 212 | </v-container> |
| 213 | </template> | 213 | </template> |
| 214 | 214 | ||
| 215 | <script> | 215 | <script> |
| 216 | import http from "@/Services/http.js"; | 216 | import http from "@/Services/http.js"; |
| 217 | import moment from "moment"; | 217 | import moment from "moment"; |
| 218 | 218 | ||
| 219 | export default { | 219 | export default { |
| 220 | data: () => ({ | 220 | data: () => ({ |
| 221 | snackbar: false, | 221 | snackbar: false, |
| 222 | date: null, | 222 | date: null, |
| 223 | color: "", | 223 | color: "", |
| 224 | y: "top", | 224 | y: "top", |
| 225 | x: "right", | 225 | x: "right", |
| 226 | mode: "", | 226 | mode: "", |
| 227 | timeout: 10000, | 227 | timeout: 10000, |
| 228 | text: "", | 228 | text: "", |
| 229 | show: true, | 229 | show: true, |
| 230 | showSearch: false, | 230 | showSearch: false, |
| 231 | addHourDialog: false, | 231 | addHourDialog: false, |
| 232 | loading: false, | 232 | loading: false, |
| 233 | loadingSearch: false, | 233 | loadingSearch: false, |
| 234 | search: "", | 234 | search: "", |
| 235 | showLoader: false, | 235 | showLoader: false, |
| 236 | editHourDialog: false, | 236 | editHourDialog: false, |
| 237 | valid: true, | 237 | valid: true, |
| 238 | disabled: true, | 238 | disabled: true, |
| 239 | pagination: { | 239 | pagination: { |
| 240 | rowsPerPage: 10, | 240 | rowsPerPage: 10, |
| 241 | }, | 241 | }, |
| 242 | hourRules: [(v) => !!v || "Field is required"], | 242 | hourRules: [(v) => !!v || "Field is required"], |
| 243 | 243 | ||
| 244 | headers: [ | 244 | headers: [ |
| 245 | { | 245 | { |
| 246 | align: "", | 246 | align: "", |
| 247 | text: "No", | 247 | text: "No", |
| 248 | sortable: false, | 248 | sortable: false, |
| 249 | value: "No", | 249 | value: "No", |
| 250 | }, | 250 | }, |
| 251 | { | 251 | { |
| 252 | text: "Hourly Grades", | 252 | text: "Hourly Grades", |
| 253 | value: "hourlyGrades", | 253 | value: "hourlyGrades", |
| 254 | sortable: false, | 254 | sortable: false, |
| 255 | align: "center", | 255 | align: "center", |
| 256 | }, | 256 | }, |
| 257 | { | 257 | { |
| 258 | text: "Hourly Rate", | 258 | text: "Hourly Rate", |
| 259 | value: "hourlyRate", | 259 | value: "hourlyRate", |
| 260 | sortable: false, | 260 | sortable: false, |
| 261 | align: "center", | 261 | align: "center", |
| 262 | }, | 262 | }, |
| 263 | { text: "Action", value: "", sortable: false, align: "center" }, | 263 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 264 | ], | 264 | ], |
| 265 | hourlyTypes: [], | 265 | hourlyTypes: [], |
| 266 | hourlyData: [], | 266 | hourlyData: [], |
| 267 | editedItem: {}, | 267 | editedItem: {}, |
| 268 | }), | 268 | }), |
| 269 | watch: { | 269 | watch: { |
| 270 | addHourDialog: function (val) { | 270 | addHourDialog: function (val) { |
| 271 | if (!val) { | 271 | if (!val) { |
| 272 | this.hourlyTypes = []; | 272 | this.hourlyTypes = []; |
| 273 | } | 273 | } |
| 274 | }, | 274 | }, |
| 275 | }, | 275 | }, |
| 276 | methods: { | 276 | methods: { |
| 277 | close() { | 277 | close() { |
| 278 | this.editHourDialog = false; | 278 | this.editHourDialog = false; |
| 279 | }, | 279 | }, |
| 280 | closeAddHourModel() { | 280 | closeAddHourModel() { |
| 281 | this.addHourDialog = false; | 281 | this.addHourDialog = false; |
| 282 | // this.hourlyData = []; | 282 | // this.hourlyData = []; |
| 283 | this.hourlyTypes = []; | 283 | this.hourlyTypes = []; |
| 284 | }, | 284 | }, |
| 285 | submit() { | 285 | submit() { |
| 286 | var Hour = { | 286 | var Hour = { |
| 287 | hourlyGrades: this.hourlyTypes.hourlyGrades, | 287 | hourlyGrades: this.hourlyTypes.hourlyGrades, |
| 288 | hourlyRate: this.hourlyTypes.hourlyRate, | 288 | hourlyRate: this.hourlyTypes.hourlyRate, |
| 289 | }; | 289 | }; |
| 290 | if (this.$refs.form.validate()) { | 290 | if (this.$refs.form.validate()) { |
| 291 | this.loading = true; | 291 | this.loading = true; |
| 292 | http() | 292 | http() |
| 293 | .post("/createHourly", Hour, { | 293 | .post("/createHourly", Hour, { |
| 294 | headers: { Authorization: "Bearer " + this.token }, | 294 | headers: { Authorization: "Bearer " + this.token }, |
| 295 | }) | 295 | }) |
| 296 | .then((response) => { | 296 | .then((response) => { |
| 297 | this.snackbar = true; | 297 | this.snackbar = true; |
| 298 | this.text = response.data.message; | 298 | this.text = response.data.message; |
| 299 | this.getHourlyList(); | 299 | this.getHourlyList(); |
| 300 | this.color = "green"; | 300 | this.color = "green"; |
| 301 | this.addHourDialog = false; | 301 | this.addHourDialog = false; |
| 302 | // this.color = "success"; | 302 | // this.color = "success"; |
| 303 | this.clear(); | 303 | this.clear(); |
| 304 | this.loading = false; | 304 | this.loading = false; |
| 305 | }) | 305 | }) |
| 306 | .catch((error) => { | 306 | .catch((error) => { |
| 307 | // console.log("error", error); | 307 | // console.log("error", error); |
| 308 | this.snackbar = true; | 308 | this.snackbar = true; |
| 309 | this.color = "red"; | 309 | this.color = "red"; |
| 310 | // this.text = error.response.data.message; | 310 | // this.text = error.response.data.message; |
| 311 | this.loading = false; | 311 | this.loading = false; |
| 312 | }); | 312 | }); |
| 313 | } | 313 | } |
| 314 | }, | 314 | }, |
| 315 | getHourlyList() { | 315 | getHourlyList() { |
| 316 | this.showLoader = true; | 316 | this.showLoader = true; |
| 317 | this.loadingSearch = true; | 317 | this.loadingSearch = true; |
| 318 | http() | 318 | http() |
| 319 | .get("/getHourlyList", { | 319 | .get("/getHourlyList", { |
| 320 | headers: { Authorization: "Bearer " + this.token }, | 320 | headers: { Authorization: "Bearer " + this.token }, |
| 321 | }) | 321 | }) |
| 322 | .then((response) => { | 322 | .then((response) => { |
| 323 | this.hourlyData = response.data.data; | 323 | this.hourlyData = response.data.data; |
| 324 | this.showLoader = false; | 324 | this.showLoader = false; |
| 325 | this.loadingSearch = false; | 325 | this.loadingSearch = false; |
| 326 | }) | 326 | }) |
| 327 | .catch((error) => { | 327 | .catch((error) => { |
| 328 | // console.log("err====>", err); | 328 | // console.log("err====>", err); |
| 329 | this.showLoader = false; | 329 | this.showLoader = false; |
| 330 | this.loadingSearch = false; | 330 | this.loadingSearch = false; |
| 331 | this.snackbar = true; | 331 | this.snackbar = true; |
| 332 | this.text = error.response.data.message; | 332 | this.text = error.response.data.message; |
| 333 | if (error.response.status === 401) { | 333 | if (error.response.status === 401) { |
| 334 | this.$router.replace({ path: "/" }); | 334 | this.$router.replace({ path: "/" }); |
| 335 | this.$store.dispatch("setToken", null); | 335 | this.$store.dispatch("setToken", null); |
| 336 | this.$store.dispatch("Id", null); | 336 | this.$store.dispatch("Id", null); |
| 337 | } | 337 | } |
| 338 | }); | 338 | }); |
| 339 | }, | 339 | }, |
| 340 | 340 | ||
| 341 | editItem(item) { | 341 | editItem(item) { |
| 342 | this.editedIndex = this.hourlyData.indexOf(item); | 342 | this.editedIndex = this.hourlyData.indexOf(item); |
| 343 | this.editedItem = Object.assign({}, item); | 343 | this.editedItem = Object.assign({}, item); |
| 344 | this.editHourDialog = true; | 344 | this.editHourDialog = true; |
| 345 | }, | 345 | }, |
| 346 | deleteItem(item) { | 346 | deleteItem(item) { |
| 347 | let deleteGrade = { | 347 | let deleteGrade = { |
| 348 | hourlyId: item._id, | 348 | hourlyId: item._id, |
| 349 | }; | 349 | }; |
| 350 | http() | 350 | http() |
| 351 | .delete( | 351 | .delete( |
| 352 | "/deleteHourly", | 352 | "/deleteHourly", |
| 353 | confirm("Are you sure you want to delete this?") && { | 353 | confirm("Are you sure you want to delete this?") && { |
| 354 | params: deleteGrade, | 354 | params: deleteGrade, |
| 355 | }, | 355 | }, |
| 356 | { | 356 | { |
| 357 | headers: { | 357 | headers: { |
| 358 | Authorization: "Bearer " + this.token, | 358 | Authorization: "Bearer " + this.token, |
| 359 | }, | 359 | }, |
| 360 | } | 360 | } |
| 361 | ) | 361 | ) |
| 362 | .then((response) => { | 362 | .then((response) => { |
| 363 | this.snackbar = true; | 363 | this.snackbar = true; |
| 364 | // this.text = "Successfully Delete Salary "; | 364 | // this.text = "Successfully Delete Salary "; |
| 365 | this.text = response.data.message; | 365 | this.text = response.data.message; |
| 366 | this.color = "green"; | 366 | this.color = "green"; |
| 367 | this.getHourlyList(); | 367 | this.getHourlyList(); |
| 368 | }) | 368 | }) |
| 369 | .catch((error) => { | 369 | .catch((error) => { |
| 370 | // console.log("error", error); | 370 | // console.log("error", error); |
| 371 | this.snackbar = true; | 371 | this.snackbar = true; |
| 372 | this.text = error.response.data.message; | 372 | this.text = error.response.data.message; |
| 373 | this.color = "red"; | 373 | this.color = "red"; |
| 374 | }); | 374 | }); |
| 375 | }, | 375 | }, |
| 376 | 376 | ||
| 377 | save() { | 377 | save() { |
| 378 | var updateHourly = { | 378 | var updateHourly = { |
| 379 | hourlyId: this.editedItem._id, | 379 | hourlyId: this.editedItem._id, |
| 380 | hourlyGrades: this.editedItem.hourlyGrades, | 380 | hourlyGrades: this.editedItem.hourlyGrades, |
| 381 | hourlyRate: this.editedItem.hourlyRate, | 381 | hourlyRate: this.editedItem.hourlyRate, |
| 382 | }; | 382 | }; |
| 383 | http() | 383 | http() |
| 384 | .put("/updateHourly", updateHourly, { | 384 | .put("/updateHourly", updateHourly, { |
| 385 | headers: { | 385 | headers: { |
| 386 | Authorization: "Bearer " + this.token, | 386 | Authorization: "Bearer " + this.token, |
| 387 | }, | 387 | }, |
| 388 | }) | 388 | }) |
| 389 | .then((response) => { | 389 | .then((response) => { |
| 390 | // this.text = "Successfully Edit Notification"; | 390 | // this.text = "Successfully Edit Notification"; |
| 391 | this.getHourlyList(); | 391 | this.getHourlyList(); |
| 392 | this.close(); | 392 | this.close(); |
| 393 | this.snackbar = true; | 393 | this.snackbar = true; |
| 394 | this.text = response.data.message; | 394 | this.text = response.data.message; |
| 395 | this.color = "green"; | 395 | this.color = "green"; |
| 396 | this.editHourDialog = false; | 396 | this.editHourDialog = false; |
| 397 | }) | 397 | }) |
| 398 | .catch((error) => { | 398 | .catch((error) => { |
| 399 | // console.log("error", error); | 399 | // console.log("error", error); |
| 400 | this.snackbar = true; | 400 | this.snackbar = true; |
| 401 | // this.text = error.response.data.message; | 401 | // this.text = error.response.data.message; |
| 402 | this.snackbar = true; | 402 | this.snackbar = true; |
| 403 | this.color = "error"; | 403 | this.color = "error"; |
| 404 | this.text = error.response.data.message; | 404 | this.text = error.response.data.message; |
| 405 | }); | 405 | }); |
| 406 | }, | 406 | }, |
| 407 | 407 | ||
| 408 | displaySearch() { | 408 | displaySearch() { |
| 409 | (this.show = false), (this.showSearch = true); | 409 | (this.show = false), (this.showSearch = true); |
| 410 | }, | 410 | }, |
| 411 | closeSearch() { | 411 | closeSearch() { |
| 412 | this.showSearch = false; | 412 | this.showSearch = false; |
| 413 | this.show = true; | 413 | this.show = true; |
| 414 | this.search = ""; | 414 | this.search = ""; |
| 415 | }, | 415 | }, |
| 416 | clear() { | 416 | clear() { |
| 417 | this.$refs.form.reset(); | 417 | this.$refs.form.reset(); |
| 418 | }, | 418 | }, |
| 419 | }, | 419 | }, |
| 420 | mounted() { | 420 | mounted() { |
| 421 | this.token = this.$store.state.token; | 421 | this.token = this.$store.state.token; |
| 422 | this.getHourlyList(); | 422 | this.getHourlyList(); |
| 423 | }, | 423 | }, |
| 424 | }; | 424 | }; |
| 425 | </script> | 425 | </script> |
| 426 | 426 | ||
| 427 | <style scoped> | 427 | <style scoped> |
| 428 | </style> | 428 | </style> |
src/pages/Payroll/manageSalary.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-layout wrap> | 3 | <v-layout wrap> |
| 4 | <v-flex xs12 sm6> | 4 | <v-flex xs12 sm6> |
| 5 | <v-layout> | 5 | <v-layout> |
| 6 | <v-flex xs4 class="pt-4 subheading"> | 6 | <v-flex xs4 class="pt-4 subheading"> |
| 7 | <label class="right hidden-sm-only hidden-xs-only">Role:</label> | 7 | <label class="right hidden-sm-only hidden-xs-only">Role:</label> |
| 8 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 8 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | <v-flex xs8 class="ml-3"> | 10 | <v-flex xs8 class="ml-3"> |
| 11 | <v-autocomplete | 11 | <v-autocomplete |
| 12 | v-model="getReport.role" | 12 | v-model="getReport.role" |
| 13 | :rules="role" | 13 | :rules="role" |
| 14 | :items="getRoles" | 14 | :items="getRoles" |
| 15 | item-text="name" | 15 | item-text="name" |
| 16 | item-value="role" | 16 | item-value="role" |
| 17 | placeholder="Select Role" | 17 | placeholder="Select Role" |
| 18 | @change="getUserDetailWithRoles" | 18 | @change="getUserDetailWithRoles" |
| 19 | required | 19 | required |
| 20 | ></v-autocomplete> | 20 | ></v-autocomplete> |
| 21 | </v-flex> | 21 | </v-flex> |
| 22 | </v-layout> | 22 | </v-layout> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | 25 | ||
| 26 | <!-- *** Salary Data *** --> | 26 | <!-- *** Salary Data *** --> |
| 27 | <v-data-table | 27 | <v-data-table |
| 28 | :headers="headers" | 28 | :headers="headers" |
| 29 | :items="roleList" | 29 | :items="roleList" |
| 30 | :pagination.sync="pagination" | 30 | :pagination.sync="pagination" |
| 31 | :search="search" | 31 | :search="search" |
| 32 | > | 32 | > |
| 33 | <template slot="items" slot-scope="props"> | 33 | <template slot="items" slot-scope="props"> |
| 34 | <tr class="tr"> | 34 | <tr class="tr"> |
| 35 | <td class="td td-row">{{ props.index + 1}}</td> | 35 | <td class="td td-row">{{ props.index + 1}}</td> |
| 36 | <td class="td td-row text-xs-center"> | 36 | <td class="td td-row text-xs-center"> |
| 37 | <v-avatar size="40"> | 37 | <v-avatar size="40"> |
| 38 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 38 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 39 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 39 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 40 | </v-avatar> | 40 | </v-avatar> |
| 41 | </td> | 41 | </td> |
| 42 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 42 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 43 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> | 43 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> |
| 44 | <td class="text-xs-center td td-row"> | 44 | <td class="text-xs-center td td-row"> |
| 45 | <span> | 45 | <span> |
| 46 | <v-tooltip top> | 46 | <v-tooltip top> |
| 47 | <img | 47 | <img |
| 48 | slot="activator" | 48 | slot="activator" |
| 49 | style="cursor:pointer; width:25px; height:25px; " | 49 | style="cursor:pointer; width:25px; height:25px; " |
| 50 | class="mr-3" | 50 | class="mr-3" |
| 51 | @click="profile(props.item)" | 51 | @click="profile(props.item)" |
| 52 | src="/static/icon/view.png" | 52 | src="/static/icon/view.png" |
| 53 | /> | 53 | /> |
| 54 | <span>View</span> | 54 | <span>View</span> |
| 55 | </v-tooltip> | 55 | </v-tooltip> |
| 56 | <v-tooltip top> | 56 | <v-tooltip top> |
| 57 | <img | 57 | <img |
| 58 | slot="activator" | 58 | slot="activator" |
| 59 | style="cursor:pointer; width:20px; height:18px; " | 59 | style="cursor:pointer; width:20px; height:18px; " |
| 60 | class="mr-3" | 60 | class="mr-3" |
| 61 | @click="editItem(props.item)" | 61 | @click="editItem(props.item)" |
| 62 | src="/static/icon/edit.png" | 62 | src="/static/icon/edit.png" |
| 63 | /> | 63 | /> |
| 64 | <span>Edit</span> | 64 | <span>Edit</span> |
| 65 | </v-tooltip> | 65 | </v-tooltip> |
| 66 | <v-tooltip top> | 66 | <v-tooltip top> |
| 67 | <img | 67 | <img |
| 68 | slot="activator" | 68 | slot="activator" |
| 69 | style="cursor:pointer; width:20px; height:20px; " | 69 | style="cursor:pointer; width:20px; height:20px; " |
| 70 | @click="deleteItem(props.item)" | 70 | @click="deleteItem(props.item)" |
| 71 | src="/static/icon/delete.png" | 71 | src="/static/icon/delete.png" |
| 72 | class="mr-3" | 72 | class="mr-3" |
| 73 | /> | 73 | /> |
| 74 | <span>Delete</span> | 74 | <span>Delete</span> |
| 75 | </v-tooltip> | 75 | </v-tooltip> |
| 76 | </span> | 76 | </span> |
| 77 | </td> | 77 | </td> |
| 78 | </tr> | 78 | </tr> |
| 79 | </template> | 79 | </template> |
| 80 | <v-alert | 80 | <v-alert |
| 81 | slot="no-results" | 81 | slot="no-results" |
| 82 | :value="true" | 82 | :value="true" |
| 83 | color="error" | 83 | color="error" |
| 84 | icon="warning" | 84 | icon="warning" |
| 85 | >Your search for "{{ search }}" found no results.</v-alert> | 85 | >Your search for "{{ search }}" found no results.</v-alert> |
| 86 | </v-data-table> | 86 | </v-data-table> |
| 87 | 87 | ||
| 88 | <!-- ****** PROFILE VIEW ****** --> | 88 | <!-- ****** PROFILE VIEW ****** --> |
| 89 | 89 | ||
| 90 | <v-dialog v-model="profileSalaryDialog" persistent> | 90 | <v-dialog v-model="profileSalaryDialog" persistent> |
| 91 | <v-card flat class="text-xs-center white--text"> | 91 | <v-card flat class="text-xs-center"> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs12 class="card-style pa-2"> | 93 | <v-flex xs12 class="Card-style pa-2"> |
| 94 | <label class="title text-xs-center">View Manage Salary</label> | 94 | <label class="title text-xs-center">View Manage Salary</label> |
| 95 | <v-icon | 95 | <v-icon size="24" class="right" @click="profileSalaryDialog = false">cancel</v-icon> |
| 96 | size="24" | ||
| 97 | color="white" | ||
| 98 | class="right" | ||
| 99 | @click="profileSalaryDialog = false" | ||
| 100 | >cancel</v-icon> | ||
| 101 | </v-flex> | 96 | </v-flex> |
| 102 | </v-layout> | 97 | </v-layout> |
| 103 | <v-layout wrap> | 98 | <v-layout wrap> |
| 104 | <v-flex xs12 sm12 md4> | 99 | <v-flex xs12 sm12 md4> |
| 105 | <v-card flat> | 100 | <v-card flat> |
| 106 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> | 101 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> |
| 107 | <v-card-text> | 102 | <v-card-text> |
| 108 | <v-container> | 103 | <v-container> |
| 109 | <v-layout wrap> | 104 | <v-layout wrap> |
| 110 | <v-flex xs12> | 105 | <v-flex xs12> |
| 111 | <v-layout> | 106 | <v-layout> |
| 112 | <v-flex | 107 | <v-flex |
| 113 | xs12 | 108 | xs12 |
| 114 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 109 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 115 | > | 110 | > |
| 116 | <v-avatar size="80px"> | 111 | <v-avatar size="80px"> |
| 117 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 112 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 118 | <img | 113 | <img |
| 119 | :src="editedItem.profilePicUrl" | 114 | :src="editedItem.profilePicUrl" |
| 120 | v-else-if="editedItem.profilePicUrl" | 115 | v-else-if="editedItem.profilePicUrl" |
| 121 | /> | 116 | /> |
| 122 | </v-avatar> | 117 | </v-avatar> |
| 123 | </v-flex> | 118 | </v-flex> |
| 124 | </v-layout> | 119 | </v-layout> |
| 125 | <v-layout> | 120 | <v-layout> |
| 126 | <v-flex xs12 sm12> | 121 | <v-flex xs12 sm12> |
| 127 | <h3 class="text-xs-center"> | 122 | <h3 class="text-xs-center"> |
| 128 | <b>{{ editedItem.name }}</b> | 123 | <b>{{ editedItem.name }}</b> |
| 129 | </h3> | 124 | </h3> |
| 130 | <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p> | 125 | <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p> |
| 131 | </v-flex> | 126 | </v-flex> |
| 132 | </v-layout> | 127 | </v-layout> |
| 133 | <v-layout style="border: 1px solid lightgrey;"> | 128 | <v-layout style="border: 1px solid lightgrey;"> |
| 134 | <v-flex xs6 sm6 class="pa-0"> | 129 | <v-flex xs6 sm6 class="pa-0"> |
| 135 | <h4 class="right"> | 130 | <h4 class="right"> |
| 136 | <b>Join Date :</b> | 131 | <b>Join Date :</b> |
| 137 | </h4> | 132 | </h4> |
| 138 | </v-flex> | 133 | </v-flex> |
| 139 | <v-flex sm6 xs6 class="pa-0"> | 134 | <v-flex sm6 xs6 class="pa-0"> |
| 140 | <h4>{{ editedItem.joinDate }}</h4> | 135 | <h4>{{ editedItem.joinDate }}</h4> |
| 141 | </v-flex> | 136 | </v-flex> |
| 142 | </v-layout> | 137 | </v-layout> |
| 143 | <v-layout style="border: 1px solid lightgrey;"> | 138 | <v-layout style="border: 1px solid lightgrey;"> |
| 144 | <v-flex xs6 sm6 class="pa-0"> | 139 | <v-flex xs6 sm6 class="pa-0"> |
| 145 | <h4 class="right"> | 140 | <h4 class="right"> |
| 146 | <b>Date of Birth :</b> | 141 | <b>Date of Birth :</b> |
| 147 | </h4> | 142 | </h4> |
| 148 | </v-flex> | 143 | </v-flex> |
| 149 | <v-flex sm6 xs6 class="pa-0"> | 144 | <v-flex sm6 xs6 class="pa-0"> |
| 150 | <h4>{{ editedItem.dob }}</h4> | 145 | <h4>{{ editedItem.dob }}</h4> |
| 151 | </v-flex> | 146 | </v-flex> |
| 152 | </v-layout> | 147 | </v-layout> |
| 153 | <v-layout style="border: 1px solid lightgrey;"> | 148 | <v-layout style="border: 1px solid lightgrey;"> |
| 154 | <v-flex xs6 sm6 class="pa-0"> | 149 | <v-flex xs6 sm6 class="pa-0"> |
| 155 | <h4 class="right"> | 150 | <h4 class="right"> |
| 156 | <b>Phone No :</b> | 151 | <b>Phone No :</b> |
| 157 | </h4> | 152 | </h4> |
| 158 | </v-flex> | 153 | </v-flex> |
| 159 | <v-flex sm6 xs6 class="pa-0"> | 154 | <v-flex sm6 xs6 class="pa-0"> |
| 160 | <h4>{{ editedItem.mobileNo }}</h4> | 155 | <h4>{{ editedItem.mobileNo }}</h4> |
| 161 | </v-flex> | 156 | </v-flex> |
| 162 | </v-layout> | 157 | </v-layout> |
| 163 | </v-flex> | 158 | </v-flex> |
| 164 | </v-layout> | 159 | </v-layout> |
| 165 | </v-container> | 160 | </v-container> |
| 166 | </v-card-text> | 161 | </v-card-text> |
| 167 | </v-card> | 162 | </v-card> |
| 168 | </v-flex> | 163 | </v-flex> |
| 169 | <v-flex xs12 sm12 md8 v-if="viewSalary"> | 164 | <v-flex xs12 sm12 md8 v-if="viewSalary"> |
| 170 | <v-card flat> | 165 | <v-card flat> |
| 171 | <v-flex xs12 sm12> | 166 | <v-flex xs12 sm12> |
| 172 | <v-container fluid grid-list-md> | 167 | <v-container fluid grid-list-md> |
| 173 | <v-layout wrap> | 168 | <v-layout wrap> |
| 174 | <v-flex xs12 sm12 md6> | 169 | <v-flex xs12 sm12 md6> |
| 175 | <v-card flat> | 170 | <v-card flat> |
| 176 | <v-form ref="form" lazy-validation class="py-4"> | 171 | <v-form ref="form" lazy-validation class="py-4"> |
| 177 | <v-layout> | 172 | <v-layout> |
| 178 | <v-flex xs4 class="pt-4 subheading"> | 173 | <v-flex xs4 class="pt-4 subheading"> |
| 179 | <label class="right hidden-xs-only">Salary Grades :</label> | 174 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 180 | </v-flex> | 175 | </v-flex> |
| 181 | <v-flex xs8 sm7 class="ml-3"> | 176 | <v-flex xs8 sm7 class="ml-3"> |
| 182 | <v-flex xs8 sm7 class="ml-3"> | 177 | <v-flex xs8 sm7 class="ml-3"> |
| 183 | <v-text-field | 178 | <v-text-field |
| 184 | solo | 179 | solo |
| 185 | v-model="editedItem.salaryTemplate.salaryGrades" | 180 | v-model="editedItem.salaryTemplate.salaryGrades" |
| 186 | readonly | 181 | readonly |
| 187 | ></v-text-field> | 182 | ></v-text-field> |
| 188 | </v-flex> | 183 | </v-flex> |
| 189 | </v-flex> | 184 | </v-flex> |
| 190 | </v-layout> | 185 | </v-layout> |
| 191 | <v-layout> | 186 | <v-layout> |
| 192 | <v-flex xs4 class="pt-4 subheading"> | 187 | <v-flex xs4 class="pt-4 subheading"> |
| 193 | <label class="right">Basic Salary :</label> | 188 | <label class="right">Basic Salary :</label> |
| 194 | </v-flex> | 189 | </v-flex> |
| 195 | <v-flex xs8 sm7 class="ml-3"> | 190 | <v-flex xs8 sm7 class="ml-3"> |
| 196 | <v-flex xs8 sm7 class="ml-3"> | 191 | <v-flex xs8 sm7 class="ml-3"> |
| 197 | <v-text-field | 192 | <v-text-field |
| 198 | solo | 193 | solo |
| 199 | v-model="editedItem.salaryTemplate.basicSalary" | 194 | v-model="editedItem.salaryTemplate.basicSalary" |
| 200 | readonly | 195 | readonly |
| 201 | ></v-text-field> | 196 | ></v-text-field> |
| 202 | </v-flex> | 197 | </v-flex> |
| 203 | </v-flex> | 198 | </v-flex> |
| 204 | </v-layout> | 199 | </v-layout> |
| 205 | </v-form> | 200 | </v-form> |
| 206 | </v-card> | 201 | </v-card> |
| 207 | </v-flex> | 202 | </v-flex> |
| 208 | <v-flex xs12 sm12 md5></v-flex> | 203 | <v-flex xs12 sm12 md5></v-flex> |
| 209 | <v-flex xs12 sm12 md6> | 204 | <v-flex xs12 sm12 md6> |
| 210 | <v-card flat> | 205 | <v-card flat> |
| 211 | <v-toolbar> | 206 | <v-toolbar> |
| 212 | <h3>Allowances</h3> | 207 | <h3>Allowances</h3> |
| 213 | </v-toolbar> | 208 | </v-toolbar> |
| 214 | <v-layout | 209 | <v-layout |
| 215 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" | 210 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" |
| 216 | :key="index" | 211 | :key="index" |
| 217 | > | 212 | > |
| 218 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 213 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 219 | <v-text-field | 214 | <v-text-field |
| 220 | readonly | 215 | readonly |
| 221 | solo | 216 | solo |
| 222 | label="Enter Allowances Label" | 217 | label="Enter Allowances Label" |
| 223 | v-model="editedItem.allowancesName" | 218 | v-model="editedItem.allowancesName" |
| 224 | ></v-text-field> | 219 | ></v-text-field> |
| 225 | </v-flex> | 220 | </v-flex> |
| 226 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 221 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 227 | <v-text-field | 222 | <v-text-field |
| 228 | readonly | 223 | readonly |
| 229 | solo | 224 | solo |
| 230 | v-model="editedItem.allowancesValue" | 225 | v-model="editedItem.allowancesValue" |
| 231 | label="Enter Allowances Value" | 226 | label="Enter Allowances Value" |
| 232 | ></v-text-field> | 227 | ></v-text-field> |
| 233 | </v-flex> | 228 | </v-flex> |
| 234 | </v-layout> | 229 | </v-layout> |
| 235 | </v-card> | 230 | </v-card> |
| 236 | </v-flex> | 231 | </v-flex> |
| 237 | <v-flex xs12 sm12 md6> | 232 | <v-flex xs12 sm12 md6> |
| 238 | <v-card flat> | 233 | <v-card flat> |
| 239 | <v-toolbar> | 234 | <v-toolbar> |
| 240 | <h3>Deduction</h3> | 235 | <h3>Deduction</h3> |
| 241 | </v-toolbar> | 236 | </v-toolbar> |
| 242 | <v-layout | 237 | <v-layout |
| 243 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" | 238 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" |
| 244 | :key="index" | 239 | :key="index" |
| 245 | > | 240 | > |
| 246 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 241 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 247 | <v-text-field | 242 | <v-text-field |
| 248 | readonly | 243 | readonly |
| 249 | solo | 244 | solo |
| 250 | label="Enter Deduction Label" | 245 | label="Enter Deduction Label" |
| 251 | v-model="editedItem.deductionName" | 246 | v-model="editedItem.deductionName" |
| 252 | ></v-text-field> | 247 | ></v-text-field> |
| 253 | </v-flex> | 248 | </v-flex> |
| 254 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 249 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 255 | <v-text-field | 250 | <v-text-field |
| 256 | readonly | 251 | readonly |
| 257 | solo | 252 | solo |
| 258 | label="Enter Deduction Value" | 253 | label="Enter Deduction Value" |
| 259 | v-model="editedItem.deductionValue" | 254 | v-model="editedItem.deductionValue" |
| 260 | ></v-text-field> | 255 | ></v-text-field> |
| 261 | </v-flex> | 256 | </v-flex> |
| 262 | </v-layout> | 257 | </v-layout> |
| 263 | <!-- <v-layout> | 258 | <!-- <v-layout> |
| 264 | <v-flex xs4 class="pt-4 subheading"> | 259 | <v-flex xs4 class="pt-4 subheading"> |
| 265 | <v-text-field | 260 | <v-text-field |
| 266 | v-model="editedItem.salaryTemplate.deduction.deductionName" | 261 | v-model="editedItem.salaryTemplate.deduction.deductionName" |
| 267 | readonly | 262 | readonly |
| 268 | ></v-text-field> | 263 | ></v-text-field> |
| 269 | </v-flex> | 264 | </v-flex> |
| 270 | <v-flex xs8 sm7 class="ml-3"> | 265 | <v-flex xs8 sm7 class="ml-3"> |
| 271 | <v-flex xs8 sm7 class="ml-3"> | 266 | <v-flex xs8 sm7 class="ml-3"> |
| 272 | <v-text-field | 267 | <v-text-field |
| 273 | v-model="editedItem.salaryTemplate.deduction.deductionValue" | 268 | v-model="editedItem.salaryTemplate.deduction.deductionValue" |
| 274 | readonly | 269 | readonly |
| 275 | ></v-text-field> | 270 | ></v-text-field> |
| 276 | </v-flex> | 271 | </v-flex> |
| 277 | </v-flex> | 272 | </v-flex> |
| 278 | </v-layout>--> | 273 | </v-layout>--> |
| 279 | </v-card> | 274 | </v-card> |
| 280 | </v-flex> | 275 | </v-flex> |
| 281 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 276 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 282 | <v-card> | 277 | <v-card> |
| 283 | <v-toolbar> | 278 | <v-toolbar> |
| 284 | <h3>Total Salary Details</h3> | 279 | <h3>Total Salary Details</h3> |
| 285 | </v-toolbar> | 280 | </v-toolbar> |
| 286 | <v-layout> | 281 | <v-layout> |
| 287 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 282 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 288 | <v-text-field solo value="Gross Salary"></v-text-field> | 283 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 289 | </v-flex> | 284 | </v-flex> |
| 290 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 285 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 291 | <v-flex xs8 sm7 class="ml-3"> | 286 | <v-flex xs8 sm7 class="ml-3"> |
| 292 | <v-text-field | 287 | <v-text-field |
| 293 | v-model="editedItem.salaryTemplate.grossSalary" | 288 | v-model="editedItem.salaryTemplate.grossSalary" |
| 294 | solo | 289 | solo |
| 295 | readonly | 290 | readonly |
| 296 | ></v-text-field> | 291 | ></v-text-field> |
| 297 | </v-flex> | 292 | </v-flex> |
| 298 | </v-flex> | 293 | </v-flex> |
| 299 | </v-layout> | 294 | </v-layout> |
| 300 | <v-layout> | 295 | <v-layout> |
| 301 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 296 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 302 | <v-text-field solo value="Total Deduction"></v-text-field> | 297 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 303 | </v-flex> | 298 | </v-flex> |
| 304 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 299 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 305 | <v-flex xs8 sm7 class="ml-3"> | 300 | <v-flex xs8 sm7 class="ml-3"> |
| 306 | <v-text-field | 301 | <v-text-field |
| 307 | v-model="editedItem.salaryTemplate.totalDeduction" | 302 | v-model="editedItem.salaryTemplate.totalDeduction" |
| 308 | solo | 303 | solo |
| 309 | readonly | 304 | readonly |
| 310 | ></v-text-field> | 305 | ></v-text-field> |
| 311 | </v-flex> | 306 | </v-flex> |
| 312 | </v-flex> | 307 | </v-flex> |
| 313 | </v-layout> | 308 | </v-layout> |
| 314 | <v-layout> | 309 | <v-layout> |
| 315 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 310 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 316 | <v-text-field solo value="Net Salary"></v-text-field> | 311 | <v-text-field solo value="Net Salary"></v-text-field> |
| 317 | </v-flex> | 312 | </v-flex> |
| 318 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 313 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 319 | <v-flex xs8 sm7 class="ml-3"> | 314 | <v-flex xs8 sm7 class="ml-3"> |
| 320 | <v-text-field | 315 | <v-text-field |
| 321 | v-model="editedItem.salaryTemplate.netSalary" | 316 | v-model="editedItem.salaryTemplate.netSalary" |
| 322 | solo | 317 | solo |
| 323 | readonly | 318 | readonly |
| 324 | ></v-text-field> | 319 | ></v-text-field> |
| 325 | </v-flex> | 320 | </v-flex> |
| 326 | </v-flex> | 321 | </v-flex> |
| 327 | </v-layout> | 322 | </v-layout> |
| 328 | </v-card> | 323 | </v-card> |
| 329 | </v-flex> | 324 | </v-flex> |
| 330 | </v-layout> | 325 | </v-layout> |
| 331 | </v-container> | 326 | </v-container> |
| 332 | </v-flex> | 327 | </v-flex> |
| 333 | </v-card> | 328 | </v-card> |
| 334 | </v-flex> | 329 | </v-flex> |
| 335 | <v-flex xs12 sm12 md8 v-if="viewHourly"> | 330 | <v-flex xs12 sm12 md8 v-if="viewHourly"> |
| 336 | <v-card flat> | 331 | <v-card flat> |
| 337 | <v-flex xs12 sm12> | 332 | <v-flex xs12 sm12> |
| 338 | <v-container fluid grid-list-md> | 333 | <v-container fluid grid-list-md> |
| 339 | <v-layout wrap> | 334 | <v-layout wrap> |
| 340 | <v-flex xs12 sm12 md6> | 335 | <v-flex xs12 sm12 md6> |
| 341 | <v-card flat> | 336 | <v-card flat> |
| 342 | <v-form ref="form" lazy-validation class="py-4"> | 337 | <v-form ref="form" lazy-validation class="py-4"> |
| 343 | <v-layout> | 338 | <v-layout> |
| 344 | <v-flex xs4 class="pt-4 subheading"> | 339 | <v-flex xs4 class="pt-4 subheading"> |
| 345 | <label class="right hidden-xs-only">Hourly Grades :</label> | 340 | <label class="right hidden-xs-only">Hourly Grades :</label> |
| 346 | </v-flex> | 341 | </v-flex> |
| 347 | <v-flex xs8 sm7 class="ml-3"> | 342 | <v-flex xs8 sm7 class="ml-3"> |
| 348 | <v-flex xs8 sm7 class="ml-3"> | 343 | <v-flex xs8 sm7 class="ml-3"> |
| 349 | <v-text-field | 344 | <v-text-field |
| 350 | solo | 345 | solo |
| 351 | v-model="editedItem.hourlyTemplate.hourlyGrades" | 346 | v-model="editedItem.hourlyTemplate.hourlyGrades" |
| 352 | readonly | 347 | readonly |
| 353 | ></v-text-field> | 348 | ></v-text-field> |
| 354 | </v-flex> | 349 | </v-flex> |
| 355 | </v-flex> | 350 | </v-flex> |
| 356 | </v-layout> | 351 | </v-layout> |
| 357 | <v-layout> | 352 | <v-layout> |
| 358 | <v-flex xs4 class="pt-4 subheading"> | 353 | <v-flex xs4 class="pt-4 subheading"> |
| 359 | <label class="right">Hourly Rate :</label> | 354 | <label class="right">Hourly Rate :</label> |
| 360 | </v-flex> | 355 | </v-flex> |
| 361 | <v-flex xs8 sm7 class="ml-3"> | 356 | <v-flex xs8 sm7 class="ml-3"> |
| 362 | <v-flex xs8 sm7 class="ml-3"> | 357 | <v-flex xs8 sm7 class="ml-3"> |
| 363 | <v-text-field | 358 | <v-text-field |
| 364 | solo | 359 | solo |
| 365 | v-model="editedItem.hourlyTemplate.hourlyRate" | 360 | v-model="editedItem.hourlyTemplate.hourlyRate" |
| 366 | readonly | 361 | readonly |
| 367 | ></v-text-field> | 362 | ></v-text-field> |
| 368 | </v-flex> | 363 | </v-flex> |
| 369 | </v-flex> | 364 | </v-flex> |
| 370 | </v-layout> | 365 | </v-layout> |
| 371 | </v-form> | 366 | </v-form> |
| 372 | </v-card> | 367 | </v-card> |
| 373 | </v-flex> | 368 | </v-flex> |
| 374 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 369 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 375 | <v-card> | 370 | <v-card> |
| 376 | <v-toolbar> | 371 | <v-toolbar> |
| 377 | <h3>Total Salary Details</h3> | 372 | <h3>Total Salary Details</h3> |
| 378 | </v-toolbar> | 373 | </v-toolbar> |
| 379 | <v-layout> | 374 | <v-layout> |
| 380 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 375 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 381 | <v-text-field solo value="Gross Salary"></v-text-field> | 376 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 382 | </v-flex> | 377 | </v-flex> |
| 383 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 378 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 384 | <v-flex xs8 sm7 class="ml-3"> | 379 | <v-flex xs8 sm7 class="ml-3"> |
| 385 | <v-text-field | 380 | <v-text-field |
| 386 | v-model="editedItem.hourlyTemplate.grossSalary" | 381 | v-model="editedItem.hourlyTemplate.grossSalary" |
| 387 | solo | 382 | solo |
| 388 | readonly | 383 | readonly |
| 389 | ></v-text-field> | 384 | ></v-text-field> |
| 390 | </v-flex> | 385 | </v-flex> |
| 391 | </v-flex> | 386 | </v-flex> |
| 392 | </v-layout> | 387 | </v-layout> |
| 393 | <v-layout> | 388 | <v-layout> |
| 394 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 389 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 395 | <v-text-field solo value="Total Deduction"></v-text-field> | 390 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 396 | </v-flex> | 391 | </v-flex> |
| 397 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 392 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 398 | <v-flex xs8 sm7 class="ml-3"> | 393 | <v-flex xs8 sm7 class="ml-3"> |
| 399 | <v-text-field | 394 | <v-text-field |
| 400 | v-model="editedItem.hourlyTemplate.totalDeduction" | 395 | v-model="editedItem.hourlyTemplate.totalDeduction" |
| 401 | solo | 396 | solo |
| 402 | readonly | 397 | readonly |
| 403 | ></v-text-field> | 398 | ></v-text-field> |
| 404 | </v-flex> | 399 | </v-flex> |
| 405 | </v-flex> | 400 | </v-flex> |
| 406 | </v-layout> | 401 | </v-layout> |
| 407 | <v-layout> | 402 | <v-layout> |
| 408 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 403 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 409 | <v-text-field solo value="Net Hourly Rate"></v-text-field> | 404 | <v-text-field solo value="Net Hourly Rate"></v-text-field> |
| 410 | </v-flex> | 405 | </v-flex> |
| 411 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 406 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 412 | <v-flex xs8 sm7 class="ml-3"> | 407 | <v-flex xs8 sm7 class="ml-3"> |
| 413 | <v-text-field | 408 | <v-text-field |
| 414 | v-model="editedItem.hourlyTemplate.netSalary" | 409 | v-model="editedItem.hourlyTemplate.netSalary" |
| 415 | solo | 410 | solo |
| 416 | readonly | 411 | readonly |
| 417 | ></v-text-field> | 412 | ></v-text-field> |
| 418 | </v-flex> | 413 | </v-flex> |
| 419 | </v-flex> | 414 | </v-flex> |
| 420 | </v-layout> | 415 | </v-layout> |
| 421 | </v-card> | 416 | </v-card> |
| 422 | </v-flex> | 417 | </v-flex> |
| 423 | </v-layout> | 418 | </v-layout> |
| 424 | </v-container> | 419 | </v-container> |
| 425 | </v-flex> | 420 | </v-flex> |
| 426 | </v-card> | 421 | </v-card> |
| 427 | </v-flex> | 422 | </v-flex> |
| 428 | </v-layout> | 423 | </v-layout> |
| 429 | </v-card> | 424 | </v-card> |
| 430 | </v-dialog> | 425 | </v-dialog> |
| 431 | 426 | ||
| 432 | <!-- ****** Edit Hourly Template ****** --> | 427 | <!-- ****** Edit Hourly Template ****** --> |
| 433 | <v-dialog v-model="editSalaryDialog" max-width="400px" persistent> | 428 | <v-dialog v-model="editSalaryDialog" max-width="400px" persistent> |
| 434 | <v-card flat class="card-style pa-2" dark> | 429 | <v-card flat class="Card-style pa-2"> |
| 435 | <v-layout> | 430 | <v-layout> |
| 436 | <v-flex xs12> | 431 | <v-flex xs12> |
| 437 | <label class="title text-xs-center">Edit Manage Salary</label> | 432 | <label class="title text-xs-center">Edit Manage Salary</label> |
| 438 | <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> | 433 | <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> |
| 439 | </v-flex> | 434 | </v-flex> |
| 440 | </v-layout> | 435 | </v-layout> |
| 441 | <v-form ref="form"> | 436 | <v-form ref="form"> |
| 442 | <v-container fluid> | 437 | <v-container fluid> |
| 443 | <v-flex xs12 sm12> | 438 | <v-flex xs12 sm12> |
| 444 | <v-layout> | 439 | <v-layout> |
| 445 | <v-flex xs3 class="pt-4 subheading"> | 440 | <v-flex xs3 class="pt-4 subheading"> |
| 446 | <label class="right">Salary:</label> | 441 | <label class="right">Salary:</label> |
| 447 | </v-flex> | 442 | </v-flex> |
| 448 | <v-flex xs8 sm7 class="ml-3"> | 443 | <v-flex xs8 sm7 class="ml-3"> |
| 449 | <v-select | 444 | <v-select |
| 450 | :items="salary" | 445 | :items="salary" |
| 451 | v-model="editedItem.salary" | 446 | v-model="editedItem.salary" |
| 452 | placeholder="please fill this field" | 447 | placeholder="please fill this field" |
| 453 | @change="selectSalary()" | 448 | @change="selectSalary()" |
| 454 | ></v-select> | 449 | ></v-select> |
| 455 | </v-flex> | 450 | </v-flex> |
| 456 | </v-layout> | 451 | </v-layout> |
| 457 | </v-flex> | 452 | </v-flex> |
| 458 | <v-flex xs12 sm12> | 453 | <v-flex xs12 sm12> |
| 459 | <v-layout> | 454 | <v-layout> |
| 460 | <v-flex xs3 class="pt-4 subheading"> | 455 | <v-flex xs3 class="pt-4 subheading"> |
| 461 | <label class="right">Template:</label> | 456 | <label class="right">Template:</label> |
| 462 | </v-flex> | 457 | </v-flex> |
| 463 | <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade"> | 458 | <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade"> |
| 464 | <v-autocomplete | 459 | <v-autocomplete |
| 465 | v-model="editedItem.salaryId" | 460 | v-model="editedItem.salaryId" |
| 466 | :items="salaryData" | 461 | :items="salaryData" |
| 467 | item-text="salaryGrades" | 462 | item-text="salaryGrades" |
| 468 | item-value="_id" | 463 | item-value="_id" |
| 469 | placeholder="please fill this field" | 464 | placeholder="please fill this field" |
| 470 | @change="selectGrade()" | 465 | @change="selectGrade()" |
| 471 | required | 466 | required |
| 472 | ></v-autocomplete> | 467 | ></v-autocomplete> |
| 473 | </v-flex> | 468 | </v-flex> |
| 474 | <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades"> | 469 | <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades"> |
| 475 | <v-autocomplete | 470 | <v-autocomplete |
| 476 | v-model="editedItem.salaryId" | 471 | v-model="editedItem.salaryId" |
| 477 | :items="hourlyData" | 472 | :items="hourlyData" |
| 478 | item-text="hourlyGrades" | 473 | item-text="hourlyGrades" |
| 479 | item-value="_id" | 474 | item-value="_id" |
| 480 | placeholder="please fill this field" | 475 | placeholder="please fill this field" |
| 481 | @change="selectGrade()" | 476 | @change="selectGrade()" |
| 482 | required | 477 | required |
| 483 | ></v-autocomplete> | 478 | ></v-autocomplete> |
| 484 | </v-flex> | 479 | </v-flex> |
| 485 | </v-layout> | 480 | </v-layout> |
| 486 | </v-flex> | 481 | </v-flex> |
| 487 | <v-layout> | 482 | <v-layout> |
| 488 | <v-flex xs12> | 483 | <v-flex xs12> |
| 489 | <v-layout> | 484 | <v-layout> |
| 490 | <v-spacer></v-spacer> | 485 | <v-spacer></v-spacer> |
| 491 | <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn> | 486 | <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn> |
| 492 | <v-spacer></v-spacer> | 487 | <v-spacer></v-spacer> |
| 493 | </v-layout> | 488 | </v-layout> |
| 494 | </v-flex> | 489 | </v-flex> |
| 495 | </v-layout> | 490 | </v-layout> |
| 496 | </v-container> | 491 | </v-container> |
| 497 | </v-form> | 492 | </v-form> |
| 498 | </v-card> | 493 | </v-card> |
| 499 | </v-dialog> | 494 | </v-dialog> |
| 500 | </v-container> | 495 | </v-container> |
| 501 | </template> | 496 | </template> |
| 502 | 497 | ||
| 503 | <script> | 498 | <script> |
| 504 | import http from "@/Services/http.js"; | 499 | import http from "@/Services/http.js"; |
| 505 | import Util from "@/util"; | 500 | import Util from "@/util"; |
| 506 | import moment from "moment"; | 501 | import moment from "moment"; |
| 507 | export default { | 502 | export default { |
| 508 | data: () => ({ | 503 | data: () => ({ |
| 509 | search: "", | 504 | search: "", |
| 510 | pagination: { | 505 | pagination: { |
| 511 | rowsPerPage: 10, | 506 | rowsPerPage: 10, |
| 512 | }, | 507 | }, |
| 513 | 508 | ||
| 514 | role: [(v) => !!v || "Role Name is required"], | 509 | role: [(v) => !!v || "Role Name is required"], |
| 515 | getRoles: [], | 510 | getRoles: [], |
| 516 | teacherList: [], | 511 | teacherList: [], |
| 517 | roleList: [], | 512 | roleList: [], |
| 518 | salaryData: [], | 513 | salaryData: [], |
| 519 | hourlyData: [], | 514 | hourlyData: [], |
| 520 | salary: ["Monthly", "Hourly"], | 515 | salary: ["Monthly", "Hourly"], |
| 521 | 516 | ||
| 522 | salaryItem: "", | 517 | salaryItem: "", |
| 523 | 518 | ||
| 524 | getReport: { | 519 | getReport: { |
| 525 | role: "", | 520 | role: "", |
| 526 | }, | 521 | }, |
| 527 | 522 | ||
| 528 | showTeacher: false, | 523 | showTeacher: false, |
| 529 | editSalaryDialog: false, | 524 | editSalaryDialog: false, |
| 530 | profileSalaryDialog: false, | 525 | profileSalaryDialog: false, |
| 531 | monthlyGrade: false, | 526 | monthlyGrade: false, |
| 532 | hourlyGrades: false, | 527 | hourlyGrades: false, |
| 533 | viewSalary: false, | 528 | viewSalary: false, |
| 534 | viewHourly: false, | 529 | viewHourly: false, |
| 535 | 530 | ||
| 536 | editedItem: { | 531 | editedItem: { |
| 537 | salaryTemplate: { | 532 | salaryTemplate: { |
| 538 | allowances: {}, | 533 | allowances: {}, |
| 539 | deduction: {}, | 534 | deduction: {}, |
| 540 | }, | 535 | }, |
| 541 | hourlyTemplate: {}, | 536 | hourlyTemplate: {}, |
| 542 | }, | 537 | }, |
| 543 | 538 | ||
| 544 | // salaryGrades: {}, | 539 | // salaryGrades: {}, |
| 545 | // salaryTemplate: { | 540 | // salaryTemplate: { |
| 546 | // salaryGrades: "" | 541 | // salaryGrades: "" |
| 547 | // }, | 542 | // }, |
| 548 | // salaryTemplate :{ | 543 | // salaryTemplate :{ |
| 549 | // allowances: { | 544 | // allowances: { |
| 550 | // allowancesName: "", | 545 | // allowancesName: "", |
| 551 | // allowancesValue: "" | 546 | // allowancesValue: "" |
| 552 | // }, | 547 | // }, |
| 553 | // deduction: { | 548 | // deduction: { |
| 554 | // deductionName: "", | 549 | // deductionName: "", |
| 555 | // deductionValue: "" | 550 | // deductionValue: "" |
| 556 | // } | 551 | // } |
| 557 | // }, | 552 | // }, |
| 558 | 553 | ||
| 559 | headers: [ | 554 | headers: [ |
| 560 | { | 555 | { |
| 561 | text: "No", | 556 | text: "No", |
| 562 | align: "", | 557 | align: "", |
| 563 | sortable: false, | 558 | sortable: false, |
| 564 | value: "No", | 559 | value: "No", |
| 565 | }, | 560 | }, |
| 566 | { | 561 | { |
| 567 | text: "Profile Pic", | 562 | text: "Profile Pic", |
| 568 | value: "profilePicUrl", | 563 | value: "profilePicUrl", |
| 569 | sortable: false, | 564 | sortable: false, |
| 570 | align: "center", | 565 | align: "center", |
| 571 | }, | 566 | }, |
| 572 | { text: "Name", value: "name", sortable: false, align: "center" }, | 567 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 573 | { | 568 | { |
| 574 | text: "Join Date", | 569 | text: "Join Date", |
| 575 | value: "joinDate", | 570 | value: "joinDate", |
| 576 | sortable: false, | 571 | sortable: false, |
| 577 | align: "center", | 572 | align: "center", |
| 578 | }, | 573 | }, |
| 579 | { text: "Action", value: "", sortable: false, align: "center" }, | 574 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 580 | ], | 575 | ], |
| 581 | desserts: [], | 576 | desserts: [], |
| 582 | }), | 577 | }), |
| 583 | 578 | ||
| 584 | methods: { | 579 | methods: { |
| 585 | close() { | 580 | close() { |
| 586 | this.editHourDialog = false; | 581 | this.editHourDialog = false; |
| 587 | }, | 582 | }, |
| 588 | dates: function (date) { | 583 | dates: function (date) { |
| 589 | return moment(date).format("MMMM DD, YYYY"); | 584 | return moment(date).format("MMMM DD, YYYY"); |
| 590 | }, | 585 | }, |
| 591 | editItem(item) { | 586 | editItem(item) { |
| 592 | this.editedIndex = this.roleList.indexOf(item); | 587 | this.editedIndex = this.roleList.indexOf(item); |
| 593 | this.editedItem = Object.assign({}, item); | 588 | this.editedItem = Object.assign({}, item); |
| 594 | this.editSalaryDialog = true; | 589 | this.editSalaryDialog = true; |
| 595 | }, | 590 | }, |
| 596 | profile(item) { | 591 | profile(item) { |
| 597 | this.editedIndex = this.roleList.indexOf(item); | 592 | this.editedIndex = this.roleList.indexOf(item); |
| 598 | this.editedItem = Object.assign({}, item); | 593 | this.editedItem = Object.assign({}, item); |
| 599 | this.profileSalaryDialog = true; | 594 | this.profileSalaryDialog = true; |
| 600 | // console.log("item", item); | 595 | // console.log("item", item); |
| 601 | if (item.salaryTemplate) { | 596 | if (item.salaryTemplate) { |
| 602 | this.viewSalary = true; | 597 | this.viewSalary = true; |
| 603 | this.viewHourly = false; | 598 | this.viewHourly = false; |
| 604 | } else { | 599 | } else { |
| 605 | this.viewHourly = true; | 600 | this.viewHourly = true; |
| 606 | this.viewSalary = false; | 601 | this.viewSalary = false; |
| 607 | } | 602 | } |
| 608 | }, | 603 | }, |
| 609 | getRole() { | 604 | getRole() { |
| 610 | this.showLoader = true; | 605 | this.showLoader = true; |
| 611 | var token = this.$store.state.token; | 606 | var token = this.$store.state.token; |
| 612 | http() | 607 | http() |
| 613 | .get("/getRolesList", { | 608 | .get("/getRolesList", { |
| 614 | headers: { Authorization: "Bearer " + token }, | 609 | headers: { Authorization: "Bearer " + token }, |
| 615 | }) | 610 | }) |
| 616 | .then((response) => { | 611 | .then((response) => { |
| 617 | this.getRoles = response.data.data; | 612 | this.getRoles = response.data.data; |
| 618 | // if (this.getRoles[2].role !== 3) { | 613 | // if (this.getRoles[2].role !== 3) { |
| 619 | // this.getRoles = response.data.data; | 614 | // this.getRoles = response.data.data; |
| 620 | // console.log("roles", this.getRoles[2].role); | 615 | // console.log("roles", this.getRoles[2].role); |
| 621 | // } | 616 | // } |
| 622 | 617 | ||
| 623 | // var removedRoles = _.remove(this.getRoles, function (c) { | 618 | // var removedRoles = _.remove(this.getRoles, function (c) { |
| 624 | // //remove if color is green or yellow | 619 | // //remove if color is green or yellow |
| 625 | // return c.role === 1 || c.role === 4 || c.role === 5; | 620 | // return c.role === 1 || c.role === 4 || c.role === 5; |
| 626 | // // console.log(c); | 621 | // // console.log(c); |
| 627 | // }); | 622 | // }); |
| 628 | this.showLoader = false; | 623 | this.showLoader = false; |
| 629 | }) | 624 | }) |
| 630 | .catch((error) => { | 625 | .catch((error) => { |
| 631 | this.showLoader = false; | 626 | this.showLoader = false; |
| 632 | }); | 627 | }); |
| 633 | }, | 628 | }, |
| 634 | 629 | ||
| 635 | getRoleInputs(role) { | 630 | getRoleInputs(role) { |
| 636 | // console.log("role", role); | 631 | // console.log("role", role); |
| 637 | if (role === 3) { | 632 | if (role === 3) { |
| 638 | this.showTeacher = true; | 633 | this.showTeacher = true; |
| 639 | this.getTeacherList(); | 634 | this.getTeacherList(); |
| 640 | } | 635 | } |
| 641 | }, | 636 | }, |
| 642 | 637 | ||
| 643 | getTeacherList() { | 638 | getTeacherList() { |
| 644 | this.showLoader = true; | 639 | this.showLoader = true; |
| 645 | var token = this.$store.state.token; | 640 | var token = this.$store.state.token; |
| 646 | http() | 641 | http() |
| 647 | .get("/getTeachersList", { | 642 | .get("/getTeachersList", { |
| 648 | headers: { Authorization: "Bearer " + token }, | 643 | headers: { Authorization: "Bearer " + token }, |
| 649 | }) | 644 | }) |
| 650 | .then((response) => { | 645 | .then((response) => { |
| 651 | this.teacherList = response.data.data; | 646 | this.teacherList = response.data.data; |
| 652 | this.showTeacher = true; | 647 | this.showTeacher = true; |
| 653 | this.showLoader = false; | 648 | this.showLoader = false; |
| 654 | }) | 649 | }) |
| 655 | .catch((error) => { | 650 | .catch((error) => { |
| 656 | this.showLoader = false; | 651 | this.showLoader = false; |
| 657 | if (error.response.status === 401) { | 652 | if (error.response.status === 401) { |
| 658 | this.$router.replace({ path: "/" }); | 653 | this.$router.replace({ path: "/" }); |
| 659 | this.$store.dispatch("setToken", null); | 654 | this.$store.dispatch("setToken", null); |
| 660 | this.$store.dispatch("Id", null); | 655 | this.$store.dispatch("Id", null); |
| 661 | } | 656 | } |
| 662 | }); | 657 | }); |
| 663 | }, | 658 | }, |
| 664 | 659 | ||
| 665 | getUserDetailWithRoles() { | 660 | getUserDetailWithRoles() { |
| 666 | this.showLoader = true; | 661 | this.showLoader = true; |
| 667 | http() | 662 | http() |
| 668 | .get( | 663 | .get( |
| 669 | "/getUserDetailWithRoles", | 664 | "/getUserDetailWithRoles", |
| 670 | { params: { role: this.getReport.role } }, | 665 | { params: { role: this.getReport.role } }, |
| 671 | { | 666 | { |
| 672 | headers: { Authorization: "Bearer " + this.token }, | 667 | headers: { Authorization: "Bearer " + this.token }, |
| 673 | } | 668 | } |
| 674 | ) | 669 | ) |
| 675 | .then((response) => { | 670 | .then((response) => { |
| 676 | this.roleList = response.data.data; | 671 | this.roleList = response.data.data; |
| 677 | this.showLoader = false; | 672 | this.showLoader = false; |
| 678 | }) | 673 | }) |
| 679 | .catch((err) => { | 674 | .catch((err) => { |
| 680 | this.showLoader = false; | 675 | this.showLoader = false; |
| 681 | }); | 676 | }); |
| 682 | }, | 677 | }, |
| 683 | getSalaryList() { | 678 | getSalaryList() { |
| 684 | this.showLoader = true; | 679 | this.showLoader = true; |
| 685 | this.loadingSearch = true; | 680 | this.loadingSearch = true; |
| 686 | http() | 681 | http() |
| 687 | .get("/getSalaryList", { | 682 | .get("/getSalaryList", { |
| 688 | headers: { Authorization: "Bearer " + this.token }, | 683 | headers: { Authorization: "Bearer " + this.token }, |
| 689 | }) | 684 | }) |
| 690 | .then((response) => { | 685 | .then((response) => { |
| 691 | this.salaryData = response.data.data; | 686 | this.salaryData = response.data.data; |
| 692 | this.showLoader = false; | 687 | this.showLoader = false; |
| 693 | this.loadingSearch = false; | 688 | this.loadingSearch = false; |
| 694 | }) | 689 | }) |
| 695 | .catch((error) => { | 690 | .catch((error) => { |
| 696 | // console.log("err====>", err); | 691 | // console.log("err====>", err); |
| 697 | this.showLoader = false; | 692 | this.showLoader = false; |
| 698 | this.loadingSearch = false; | 693 | this.loadingSearch = false; |
| 699 | this.snackbar = true; | 694 | this.snackbar = true; |
| 700 | this.text = error.response.data.message; | 695 | this.text = error.response.data.message; |
| 701 | if (error.response.status === 401) { | 696 | if (error.response.status === 401) { |
| 702 | this.$router.replace({ path: "/" }); | 697 | this.$router.replace({ path: "/" }); |
| 703 | this.$store.dispatch("setToken", null); | 698 | this.$store.dispatch("setToken", null); |
| 704 | this.$store.dispatch("Id", null); | 699 | this.$store.dispatch("Id", null); |
| 705 | } | 700 | } |
| 706 | }); | 701 | }); |
| 707 | }, | 702 | }, |
| 708 | getHourlyList() { | 703 | getHourlyList() { |
| 709 | this.showLoader = true; | 704 | this.showLoader = true; |
| 710 | this.loadingSearch = true; | 705 | this.loadingSearch = true; |
| 711 | http() | 706 | http() |
| 712 | .get("/getHourlyList", { | 707 | .get("/getHourlyList", { |
| 713 | headers: { Authorization: "Bearer " + this.token }, | 708 | headers: { Authorization: "Bearer " + this.token }, |
| 714 | }) | 709 | }) |
| 715 | .then((response) => { | 710 | .then((response) => { |
| 716 | this.hourlyData = response.data.data; | 711 | this.hourlyData = response.data.data; |
| 717 | this.showLoader = false; | 712 | this.showLoader = false; |
| 718 | this.loadingSearch = false; | 713 | this.loadingSearch = false; |
| 719 | }) | 714 | }) |
| 720 | .catch((error) => { | 715 | .catch((error) => { |
| 721 | // console.log("err====>", err); | 716 | // console.log("err====>", err); |
| 722 | this.showLoader = false; | 717 | this.showLoader = false; |
| 723 | this.loadingSearch = false; | 718 | this.loadingSearch = false; |
| 724 | this.snackbar = true; | 719 | this.snackbar = true; |
| 725 | this.text = error.response.data.message; | 720 | this.text = error.response.data.message; |
| 726 | if (error.response.status === 401) { | 721 | if (error.response.status === 401) { |
| 727 | this.$router.replace({ path: "/" }); | 722 | this.$router.replace({ path: "/" }); |
| 728 | this.$store.dispatch("setToken", null); | 723 | this.$store.dispatch("setToken", null); |
| 729 | this.$store.dispatch("Id", null); | 724 | this.$store.dispatch("Id", null); |
| 730 | } | 725 | } |
| 731 | }); | 726 | }); |
| 732 | }, | 727 | }, |
| 733 | editItem(item) { | 728 | editItem(item) { |
| 734 | this.editedIndex = this.salaryData.indexOf(item); | 729 | this.editedIndex = this.salaryData.indexOf(item); |
| 735 | this.editedIndex = this.hourlyData.indexOf(item); | 730 | this.editedIndex = this.hourlyData.indexOf(item); |
| 736 | this.editedItem = Object.assign({}, item); | 731 | this.editedItem = Object.assign({}, item); |
| 737 | this.editedItem.date = | 732 | this.editedItem.date = |
| 738 | this.editedItem.date != undefined | 733 | this.editedItem.date != undefined |
| 739 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 734 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 740 | : (this.editedItem.date = ""); | 735 | : (this.editedItem.date = ""); |
| 741 | this.editSalaryDialog = true; | 736 | this.editSalaryDialog = true; |
| 742 | }, | 737 | }, |
| 743 | selectSalary() { | 738 | selectSalary() { |
| 744 | if (this.editedItem.salary === "Monthly") { | 739 | if (this.editedItem.salary === "Monthly") { |
| 745 | this.monthlyGrade = true; | 740 | this.monthlyGrade = true; |
| 746 | this.hourlyGrades = false; | 741 | this.hourlyGrades = false; |
| 747 | } else { | 742 | } else { |
| 748 | this.monthlyGrade = false; | 743 | this.monthlyGrade = false; |
| 749 | this.hourlyGrades = true; | 744 | this.hourlyGrades = true; |
| 750 | } | 745 | } |
| 751 | }, | 746 | }, |
| 752 | selectGrade() { | 747 | selectGrade() { |
| 753 | // console.log("this.editedItem", this.editedItem); | 748 | // console.log("this.editedItem", this.editedItem); |
| 754 | }, | 749 | }, |
| 755 | selectView() { | 750 | selectView() { |
| 756 | if (this.editedItem.view.png === "Monthly") { | 751 | if (this.editedItem.view.png === "Monthly") { |
| 757 | this.viewSalary = true; | 752 | this.viewSalary = true; |
| 758 | this.viewHourly = false; | 753 | this.viewHourly = false; |
| 759 | } else { | 754 | } else { |
| 760 | this.viewSalary = false; | 755 | this.viewSalary = false; |
| 761 | this.viewHourly = true; | 756 | this.viewHourly = true; |
| 762 | } | 757 | } |
| 763 | }, | 758 | }, |
| 764 | 759 | ||
| 765 | save() { | 760 | save() { |
| 766 | var updateSalary = { | 761 | var updateSalary = { |
| 767 | role: this.editedItem.role, | 762 | role: this.editedItem.role, |
| 768 | userId: this.editedItem._id, | 763 | userId: this.editedItem._id, |
| 769 | templateName: this.editedItem.salary, | 764 | templateName: this.editedItem.salary, |
| 770 | templateId: this.editedItem.salaryId, | 765 | templateId: this.editedItem.salaryId, |
| 771 | }; | 766 | }; |
| 772 | http() | 767 | http() |
| 773 | .put("/updateUserSalary", updateSalary, { | 768 | .put("/updateUserSalary", updateSalary, { |
| 774 | headers: { | 769 | headers: { |
| 775 | Authorization: "Bearer " + this.token, | 770 | Authorization: "Bearer " + this.token, |
| 776 | }, | 771 | }, |
| 777 | }) | 772 | }) |
| 778 | .then((response) => { | 773 | .then((response) => { |
| 779 | this.getUserDetailWithRoles(); | 774 | this.getUserDetailWithRoles(); |
| 780 | this.close(); | 775 | this.close(); |
| 781 | this.snackbar = true; | 776 | this.snackbar = true; |
| 782 | this.text = response.data.message; | 777 | this.text = response.data.message; |
| 783 | this.color = "green"; | 778 | this.color = "green"; |
| 784 | this.editSalaryDialog = false; | 779 | this.editSalaryDialog = false; |
| 785 | }) | 780 | }) |
| 786 | .catch((error) => { | 781 | .catch((error) => { |
| 787 | // console.log("error", error); | 782 | // console.log("error", error); |
| 788 | this.snackbar = true; | 783 | this.snackbar = true; |
| 789 | this.snackbar = true; | 784 | this.snackbar = true; |
| 790 | this.color = "error"; | 785 | this.color = "error"; |
| 791 | this.text = error.response.data.message; | 786 | this.text = error.response.data.message; |
| 792 | }); | 787 | }); |
| 793 | }, | 788 | }, |
| 794 | 789 | ||
| 795 | deleteItem(item) { | 790 | deleteItem(item) { |
| 796 | // let deleteGrade = { | 791 | // let deleteGrade = { |
| 797 | // hourlyId: item._id | 792 | // hourlyId: item._id |
| 798 | // }; | 793 | // }; |
| 799 | // http() | 794 | // http() |
| 800 | // .delete( | 795 | // .delete( |
| 801 | // "/deleteHourly", | 796 | // "/deleteHourly", |
| 802 | // confirm("Are you sure you want to delete this?") && { | 797 | // confirm("Are you sure you want to delete this?") && { |
| 803 | // params: deleteGrade | 798 | // params: deleteGrade |
| 804 | // }, | 799 | // }, |
| 805 | // { | 800 | // { |
| 806 | // headers: { | 801 | // headers: { |
| 807 | // Authorization: "Bearer " + this.token | 802 | // Authorization: "Bearer " + this.token |
| 808 | // } | 803 | // } |
| 809 | // } | 804 | // } |
| 810 | // ) | 805 | // ) |
| 811 | // .then(response => { | 806 | // .then(response => { |
| 812 | // this.snackbar = true; | 807 | // this.snackbar = true; |
| 813 | // // this.text = "Successfully Delete Salary "; | 808 | // // this.text = "Successfully Delete Salary "; |
| 814 | // this.text = response.data.message; | 809 | // this.text = response.data.message; |
| 815 | // this.color = "green"; | 810 | // this.color = "green"; |
| 816 | // this.getUserDetailWithRoles(); | 811 | // this.getUserDetailWithRoles(); |
| 817 | // }) | 812 | // }) |
| 818 | // .catch(error => { | 813 | // .catch(error => { |
| 819 | // console.log("error", error); | 814 | // console.log("error", error); |
| 820 | // this.snackbar = true; | 815 | // this.snackbar = true; |
| 821 | // this.text = error.response.data.message; | 816 | // this.text = error.response.data.message; |
| 822 | // this.color = "red"; | 817 | // this.color = "red"; |
| 823 | // }); | 818 | // }); |
| 824 | }, | 819 | }, |
| 825 | 820 | ||
| 826 | // selectAllowances() { | 821 | // selectAllowances() { |
| 827 | // this.salaryTypeData.push({ | 822 | // this.salaryTypeData.push({ |
| 828 | // allowancesValue: (this.salaryType.allowancesValue = "") | 823 | // allowancesValue: (this.salaryType.allowancesValue = "") |
| 829 | // }); | 824 | // }); |
| 830 | // // console.log("this.salaryTypeData", this.salaryTypeData); | 825 | // // console.log("this.salaryTypeData", this.salaryTypeData); |
| 831 | // var totalAllowances = ""; | 826 | // var totalAllowances = ""; |
| 832 | // this.salaryTypeData.forEach(allowancesValue_ => { | 827 | // this.salaryTypeData.forEach(allowancesValue_ => { |
| 833 | // if (allowancesValue_.allowancesValue != "") { | 828 | // if (allowancesValue_.allowancesValue != "") { |
| 834 | // // console.log("allowances", allowancesValue_.allowancesValue); | 829 | // // console.log("allowances", allowancesValue_.allowancesValue); |
| 835 | // totalAllowances = | 830 | // totalAllowances = |
| 836 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 831 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 837 | // } | 832 | // } |
| 838 | // this.grossSalary = | 833 | // this.grossSalary = |
| 839 | // totalAllowances + Number(this.salaryType.basicSalary); | 834 | // totalAllowances + Number(this.salaryType.basicSalary); |
| 840 | // }); | 835 | // }); |
| 841 | // }, | 836 | // }, |
| 842 | // allowancesAdd() { | 837 | // allowancesAdd() { |
| 843 | // this.editedItem.allowances.push({ | 838 | // this.editedItem.allowances.push({ |
| 844 | // allowancesValue: (this.salaryType.allowancesValue = "") | 839 | // allowancesValue: (this.salaryType.allowancesValue = "") |
| 845 | // }); | 840 | // }); |
| 846 | // var totalAllowances = ""; | 841 | // var totalAllowances = ""; |
| 847 | // this.editedItem.allowances.forEach(allowancesValue_ => { | 842 | // this.editedItem.allowances.forEach(allowancesValue_ => { |
| 848 | // if (allowancesValue_.allowancesValue != "") { | 843 | // if (allowancesValue_.allowancesValue != "") { |
| 849 | // // console.log("allowances", allowancesValue_.allowancesValue); | 844 | // // console.log("allowances", allowancesValue_.allowancesValue); |
| 850 | // totalAllowances = | 845 | // totalAllowances = |
| 851 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 846 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 852 | // console.log("totalAllowances", totalAllowances); | 847 | // console.log("totalAllowances", totalAllowances); |
| 853 | // } | 848 | // } |
| 854 | // this.editedItem.grossSalary = | 849 | // this.editedItem.grossSalary = |
| 855 | // totalAllowances + Number(this.editedItem.basicSalary); | 850 | // totalAllowances + Number(this.editedItem.basicSalary); |
| 856 | // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); | 851 | // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); |
| 857 | // }); | 852 | // }); |
| 858 | // }, | 853 | // }, |
| 859 | // selectDeduction() { | 854 | // selectDeduction() { |
| 860 | // this.salaryTypeDeductionData.push({ | 855 | // this.salaryTypeDeductionData.push({ |
| 861 | // deductionValue: (this.salaryType.deductionValue = "") | 856 | // deductionValue: (this.salaryType.deductionValue = "") |
| 862 | // }); | 857 | // }); |
| 863 | // var totalDeductions = ""; | 858 | // var totalDeductions = ""; |
| 864 | // this.salaryTypeDeductionData.forEach(deductionValue_ => { | 859 | // this.salaryTypeDeductionData.forEach(deductionValue_ => { |
| 865 | // if (deductionValue_.deductionValue != "") { | 860 | // if (deductionValue_.deductionValue != "") { |
| 866 | // // console.log("deduction", deductionValue_.deductionValue); | 861 | // // console.log("deduction", deductionValue_.deductionValue); |
| 867 | // totalDeductions = | 862 | // totalDeductions = |
| 868 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); | 863 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 869 | // } | 864 | // } |
| 870 | // }); | 865 | // }); |
| 871 | // }, | 866 | // }, |
| 872 | // deductionAdd() { | 867 | // deductionAdd() { |
| 873 | // this.editedItem.deduction.push({ | 868 | // this.editedItem.deduction.push({ |
| 874 | // deductionValue: (this.salaryType.deductionValue = "") | 869 | // deductionValue: (this.salaryType.deductionValue = "") |
| 875 | // }); | 870 | // }); |
| 876 | // var totalDeductions = ""; | 871 | // var totalDeductions = ""; |
| 877 | // this.editedItem.deduction.forEach(deductionValue_ => { | 872 | // this.editedItem.deduction.forEach(deductionValue_ => { |
| 878 | // if (deductionValue_.deductionValue != "") { | 873 | // if (deductionValue_.deductionValue != "") { |
| 879 | // // console.log("deduction", deductionValue_.deductionValue); | 874 | // // console.log("deduction", deductionValue_.deductionValue); |
| 880 | // totalDeductions = | 875 | // totalDeductions = |
| 881 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); | 876 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 882 | // console.log("this.totalDeductions", totalDeductions); | 877 | // console.log("this.totalDeductions", totalDeductions); |
| 883 | // } | 878 | // } |
| 884 | // // this.editedItem.totalDeduction = totalDeductions; | 879 | // // this.editedItem.totalDeduction = totalDeductions; |
| 885 | // // console.log("this.totalDeduction", this.editedItem.totalDeduction); | 880 | // // console.log("this.totalDeduction", this.editedItem.totalDeduction); |
| 886 | // }); | 881 | // }); |
| 887 | // }, | 882 | // }, |
| 888 | // deleteSelectAllowances: function(index) { | 883 | // deleteSelectAllowances: function(index) { |
| 889 | // this.salaryTypeData.splice(index, 1); | 884 | // this.salaryTypeData.splice(index, 1); |
| 890 | // }, | 885 | // }, |
| 891 | // deleteallowancesAdd: function(index) { | 886 | // deleteallowancesAdd: function(index) { |
| 892 | // this.editedItem.allowances.splice(index, 1); | 887 | // this.editedItem.allowances.splice(index, 1); |
| 893 | // }, | 888 | // }, |
| 894 | // deleteSelectDeduction: function(index) { | 889 | // deleteSelectDeduction: function(index) { |
| 895 | // this.salaryTypeDeductionData.splice(index, 1); | 890 | // this.salaryTypeDeductionData.splice(index, 1); |
| 896 | // }, | 891 | // }, |
| 897 | // deletedeductionAdd: function(index) { | 892 | // deletedeductionAdd: function(index) { |
| 898 | // this.editedItem.deduction.splice(index, 1); | 893 | // this.editedItem.deduction.splice(index, 1); |
| 899 | // }, | 894 | // }, |
| 900 | // clear() { | 895 | // clear() { |
| 901 | // this.$refs.form.reset(); | 896 | // this.$refs.form.reset(); |
| 902 | // this.disable = false; | 897 | // this.disable = false; |
| 903 | // } | 898 | // } |
| 904 | }, | 899 | }, |
| 905 | 900 | ||
| 906 | mounted() { | 901 | mounted() { |
| 907 | this.token = this.$store.state.token; | 902 | this.token = this.$store.state.token; |
| 908 | this.getRole(); | 903 | this.getRole(); |
| 909 | this.getSalaryList(); | 904 | this.getSalaryList(); |
| 910 | this.getHourlyList(); | 905 | this.getHourlyList(); |
| 911 | }, | 906 | }, |
| 912 | }; | 907 | }; |
| 913 | </script> | 908 | </script> |
src/pages/Payroll/salaryTemplate.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color" style="box-sizing: border-box;"> | 2 | <v-container fluid class="body-color" style="box-sizing: border-box;"> |
| 3 | <!-- ****** EDIT SALARY ****** --> | 3 | <!-- ****** EDIT SALARY ****** --> |
| 4 | <v-dialog v-model="editSalaryDialog" persistent> | 4 | <v-dialog v-model="editSalaryDialog" persistent> |
| 5 | <v-card flat class="text-xs-center white--text"> | 5 | <v-card flat class="text-xs-center"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12 class="card-style pa-2"> | 7 | <v-flex xs12 class="Card-style pa-2"> |
| 8 | <label class="title text-xs-center">Edit Salary</label> | 8 | <label class="title text-xs-center">Edit Salary</label> |
| 9 | <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | 12 | ||
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-container fluid grid-list-md> | 14 | <v-container fluid grid-list-md> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12 md6> | 16 | <v-flex xs12 sm12 md6> |
| 17 | <v-card flat> | 17 | <v-card flat> |
| 18 | <v-toolbar dark class="card-styles" flat> | 18 | <v-toolbar dark class="card-styles" flat> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <h3>Salary Template</h3> | 20 | <h3>Salary Template</h3> |
| 21 | <v-spacer></v-spacer> | 21 | <v-spacer></v-spacer> |
| 22 | </v-toolbar> | 22 | </v-toolbar> |
| 23 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 23 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs4 class="pt-4 subheading"> | 25 | <v-flex xs4 class="pt-4 subheading"> |
| 26 | <label class="right hidden-xs-only">Salary Grades :</label> | 26 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs8 sm7 class="ml-3"> | 28 | <v-flex xs8 sm7 class="ml-3"> |
| 29 | <v-flex xs8 sm7 class="ml-3"> | 29 | <v-flex xs8 sm7 class="ml-3"> |
| 30 | <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field> | 30 | <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs4 class="pt-4 subheading"> | 35 | <v-flex xs4 class="pt-4 subheading"> |
| 36 | <label class="right">Basic Salary :</label> | 36 | <label class="right">Basic Salary :</label> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | <v-flex xs8 sm7 class="ml-3"> | 38 | <v-flex xs8 sm7 class="ml-3"> |
| 39 | <v-flex xs8 sm7 class="ml-3"> | 39 | <v-flex xs8 sm7 class="ml-3"> |
| 40 | <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field> | 40 | <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 class="pt-4 subheading"> | 45 | <v-flex xs4 class="pt-4 subheading"> |
| 46 | <label class="right">Overtime Rate (Per Hour) :</label> | 46 | <label class="right">Overtime Rate (Per Hour) :</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8 sm7 class="ml-3"> | 48 | <v-flex xs8 sm7 class="ml-3"> |
| 49 | <v-flex xs8 sm7 class="ml-3"> | 49 | <v-flex xs8 sm7 class="ml-3"> |
| 50 | <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field> | 50 | <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-form> | 54 | </v-form> |
| 55 | </v-card> | 55 | </v-card> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <!-- <v-flex xs12 sm12 md5></v-flex> --> | 57 | <!-- <v-flex xs12 sm12 md5></v-flex> --> |
| 58 | <v-flex xs12 sm12 md6> | 58 | <v-flex xs12 sm12 md6> |
| 59 | <v-card flat> | 59 | <v-card flat> |
| 60 | <v-toolbar dark class="card-styles" flat> | 60 | <v-toolbar dark class="card-styles" flat> |
| 61 | <v-spacer></v-spacer> | 61 | <v-spacer></v-spacer> |
| 62 | <h3>Allowances</h3> | 62 | <h3>Allowances</h3> |
| 63 | <v-spacer></v-spacer> | 63 | <v-spacer></v-spacer> |
| 64 | </v-toolbar> | 64 | </v-toolbar> |
| 65 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> | 65 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> |
| 66 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 66 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | solo | 68 | solo |
| 69 | label="Enter Allowances Label" | 69 | label="Enter Allowances Label" |
| 70 | v-model="editedItem.allowancesName" | 70 | v-model="editedItem.allowancesName" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 73 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 74 | <v-text-field | 74 | <v-text-field |
| 75 | solo | 75 | solo |
| 76 | v-model="editedItem.allowancesValue" | 76 | v-model="editedItem.allowancesValue" |
| 77 | label="Enter Allowances Value" | 77 | label="Enter Allowances Value" |
| 78 | v-on:keyup="addAllowancesValue" | 78 | v-on:keyup="addAllowancesValue" |
| 79 | ></v-text-field> | 79 | ></v-text-field> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 81 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 82 | <v-btn | 82 | <v-btn |
| 83 | color="white" | 83 | color="white" |
| 84 | round | 84 | round |
| 85 | class="right mt-3" | 85 | class="right mt-3" |
| 86 | @click="deleteallowancesAdd(index)" | 86 | @click="deleteallowancesAdd(index)" |
| 87 | v-if="index != 0" | 87 | v-if="index != 0" |
| 88 | > | 88 | > |
| 89 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 89 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 90 | </v-btn> | 90 | </v-btn> |
| 91 | <v-btn color="white" round class="right mt-3" @click="allowancesAdd"> | 91 | <v-btn color="white" round class="right mt-3" @click="allowancesAdd"> |
| 92 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 92 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 93 | </v-btn> | 93 | </v-btn> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | <!-- <v-flex xs12 sm12 md6> --> | 96 | <!-- <v-flex xs12 sm12 md6> --> |
| 97 | <v-card flat> | 97 | <v-card flat> |
| 98 | <v-toolbar dark class="card-styles" flat> | 98 | <v-toolbar dark class="card-styles" flat> |
| 99 | <v-spacer></v-spacer> | 99 | <v-spacer></v-spacer> |
| 100 | <h3>Deduction</h3> | 100 | <h3>Deduction</h3> |
| 101 | <v-spacer></v-spacer> | 101 | <v-spacer></v-spacer> |
| 102 | </v-toolbar> | 102 | </v-toolbar> |
| 103 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 103 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 104 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 104 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 105 | <v-text-field | 105 | <v-text-field |
| 106 | solo | 106 | solo |
| 107 | label="Enter Deduction Label" | 107 | label="Enter Deduction Label" |
| 108 | v-model="editedItem.deductionName" | 108 | v-model="editedItem.deductionName" |
| 109 | ></v-text-field> | 109 | ></v-text-field> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 111 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 112 | <v-text-field | 112 | <v-text-field |
| 113 | solo | 113 | solo |
| 114 | label="Enter Deduction Value" | 114 | label="Enter Deduction Value" |
| 115 | v-model="editedItem.deductionValue" | 115 | v-model="editedItem.deductionValue" |
| 116 | v-on:keyup="addDeductionValue" | 116 | v-on:keyup="addDeductionValue" |
| 117 | ></v-text-field> | 117 | ></v-text-field> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 119 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 120 | <v-btn | 120 | <v-btn |
| 121 | color="white" | 121 | color="white" |
| 122 | round | 122 | round |
| 123 | class="right mt-3" | 123 | class="right mt-3" |
| 124 | @click="deletedeductionAdd(index)" | 124 | @click="deletedeductionAdd(index)" |
| 125 | v-if="index != 0" | 125 | v-if="index != 0" |
| 126 | > | 126 | > |
| 127 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 127 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 128 | </v-btn> | 128 | </v-btn> |
| 129 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> | 129 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> |
| 130 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 130 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 131 | </v-btn> | 131 | </v-btn> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-card> | 134 | </v-card> |
| 135 | <!-- </v-flex> --> | 135 | <!-- </v-flex> --> |
| 136 | </v-card> | 136 | </v-card> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <!-- <v-flex xs12 sm12 md6> | 138 | <!-- <v-flex xs12 sm12 md6> |
| 139 | <v-card flat> | 139 | <v-card flat> |
| 140 | <v-toolbar dark class="card-styles" flat> | 140 | <v-toolbar dark class="card-styles" flat> |
| 141 | <v-spacer></v-spacer> | 141 | <v-spacer></v-spacer> |
| 142 | <h3>Deduction</h3> | 142 | <h3>Deduction</h3> |
| 143 | <v-spacer></v-spacer> | 143 | <v-spacer></v-spacer> |
| 144 | </v-toolbar> | 144 | </v-toolbar> |
| 145 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 145 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 146 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 146 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 147 | <v-text-field | 147 | <v-text-field |
| 148 | solo | 148 | solo |
| 149 | label="Enter Deduction Label" | 149 | label="Enter Deduction Label" |
| 150 | v-model="editedItem.deductionName" | 150 | v-model="editedItem.deductionName" |
| 151 | ></v-text-field> | 151 | ></v-text-field> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 153 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 154 | <v-text-field | 154 | <v-text-field |
| 155 | solo | 155 | solo |
| 156 | label="Enter Deduction Value" | 156 | label="Enter Deduction Value" |
| 157 | v-model="editedItem.deductionValue" | 157 | v-model="editedItem.deductionValue" |
| 158 | v-on:keyup="addDeductionValue" | 158 | v-on:keyup="addDeductionValue" |
| 159 | ></v-text-field> | 159 | ></v-text-field> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 161 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 162 | <v-btn | 162 | <v-btn |
| 163 | color="white" | 163 | color="white" |
| 164 | round | 164 | round |
| 165 | class="right mt-3" | 165 | class="right mt-3" |
| 166 | @click="deletedeductionAdd(index)" | 166 | @click="deletedeductionAdd(index)" |
| 167 | v-if="index != 0" | 167 | v-if="index != 0" |
| 168 | > | 168 | > |
| 169 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 169 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 170 | </v-btn> | 170 | </v-btn> |
| 171 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> | 171 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> |
| 172 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 172 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 173 | </v-btn> | 173 | </v-btn> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-card> | 176 | </v-card> |
| 177 | </v-flex>--> | 177 | </v-flex>--> |
| 178 | <!-- <v-flex xs12 sm12 md4></v-flex> --> | 178 | <!-- <v-flex xs12 sm12 md4></v-flex> --> |
| 179 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 179 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 180 | <v-card flat> | 180 | <v-card flat> |
| 181 | <v-toolbar dark class="card-styles" flat> | 181 | <v-toolbar dark class="card-styles" flat> |
| 182 | <v-spacer></v-spacer> | 182 | <v-spacer></v-spacer> |
| 183 | <h3>Total Salary Details</h3> | 183 | <h3>Total Salary Details</h3> |
| 184 | <v-spacer></v-spacer> | 184 | <v-spacer></v-spacer> |
| 185 | </v-toolbar> | 185 | </v-toolbar> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 187 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 188 | <v-text-field solo value="Gross Salary"></v-text-field> | 188 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 190 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 191 | <v-flex xs8 sm7 class="ml-3"> | 191 | <v-flex xs8 sm7 class="ml-3"> |
| 192 | <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field> | 192 | <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field> |
| 193 | </v-flex> | 193 | </v-flex> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | <v-layout> | 196 | <v-layout> |
| 197 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 197 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 198 | <v-text-field solo value="Total Deduction"></v-text-field> | 198 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 200 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 201 | <v-flex xs8 sm7 class="ml-3"> | 201 | <v-flex xs8 sm7 class="ml-3"> |
| 202 | <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field> | 202 | <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | <v-layout> | 206 | <v-layout> |
| 207 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 207 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 208 | <v-text-field solo value="Net Salary"></v-text-field> | 208 | <v-text-field solo value="Net Salary"></v-text-field> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 210 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 211 | <v-flex xs8 sm7 class="ml-3"> | 211 | <v-flex xs8 sm7 class="ml-3"> |
| 212 | <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field> | 212 | <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-card> | 216 | </v-card> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs12> | 218 | <v-flex xs12> |
| 219 | <v-card-actions> | 219 | <v-card-actions> |
| 220 | <v-spacer class="hidden-xs-only"></v-spacer> | 220 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 221 | <v-btn | 221 | <v-btn |
| 222 | color="open-dialog-button" | 222 | round |
| 223 | dark | 223 | dark |
| 224 | class="right add-button" | 224 | class="right add-button" |
| 225 | @click="save" | 225 | @click="save" |
| 226 | >Update Salary Template</v-btn> | 226 | >Update Salary Template</v-btn> |
| 227 | </v-card-actions> | 227 | </v-card-actions> |
| 228 | </v-flex> | 228 | </v-flex> |
| 229 | </v-layout> | 229 | </v-layout> |
| 230 | </v-flex> | 230 | </v-flex> |
| 231 | </v-layout> | 231 | </v-layout> |
| 232 | </v-container> | 232 | </v-container> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | </v-card> | 234 | </v-card> |
| 235 | </v-dialog> | 235 | </v-dialog> |
| 236 | 236 | ||
| 237 | <!-- ****** PROFILE VIEW ****** --> | 237 | <!-- ****** PROFILE VIEW ****** --> |
| 238 | 238 | ||
| 239 | <v-dialog v-model="profileSalaryDialog" persistent> | 239 | <v-dialog v-model="profileSalaryDialog" persistent> |
| 240 | <v-card flat class="text-xs-center white--text"> | 240 | <v-card flat class="text-xs-center"> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-flex xs12 class="card-style pa-2"> | 242 | <v-flex xs12 class="Card-style pa-2"> |
| 243 | <label class="title text-xs-center">View Salary</label> | 243 | <label class="title text-xs-center">View Salary</label> |
| 244 | <v-icon | 244 | <v-icon size="24" class="right" @click="profileSalaryDialog = false">cancel</v-icon> |
| 245 | size="24" | ||
| 246 | color="white" | ||
| 247 | class="right" | ||
| 248 | @click="profileSalaryDialog = false" | ||
| 249 | >cancel</v-icon> | ||
| 250 | </v-flex> | 245 | </v-flex> |
| 251 | </v-layout> | 246 | </v-layout> |
| 252 | 247 | ||
| 253 | <v-flex xs12 sm12> | 248 | <v-flex xs12 sm12> |
| 254 | <v-container fluid grid-list-md> | 249 | <v-container fluid grid-list-md> |
| 255 | <v-layout wrap> | 250 | <v-layout wrap> |
| 256 | <v-flex xs12 sm12 md6> | 251 | <v-flex xs12 sm12 md6> |
| 257 | <v-card flat> | 252 | <v-card flat> |
| 258 | <v-toolbar dark class="card-styles" flat> | 253 | <v-toolbar dark class="card-styles" flat> |
| 259 | <v-spacer></v-spacer> | 254 | <v-spacer></v-spacer> |
| 260 | <h3>Salary Template</h3> | 255 | <h3>Salary Template</h3> |
| 261 | <v-spacer></v-spacer> | 256 | <v-spacer></v-spacer> |
| 262 | </v-toolbar> | 257 | </v-toolbar> |
| 263 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 258 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 264 | <v-layout> | 259 | <v-layout> |
| 265 | <v-flex xs4 class="pt-4 subheading"> | 260 | <v-flex xs4 class="pt-4 subheading"> |
| 266 | <label class="right hidden-xs-only">Salary Grades :</label> | 261 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 267 | </v-flex> | 262 | </v-flex> |
| 268 | <v-flex xs8 sm7 class="ml-3"> | 263 | <v-flex xs8 sm7 class="ml-3"> |
| 269 | <v-flex xs8 sm7 class="ml-3"> | 264 | <v-flex xs8 sm7 class="ml-3"> |
| 270 | <v-text-field | 265 | <v-text-field |
| 271 | :rules="salaryRules" | 266 | :rules="salaryRules" |
| 272 | v-model="editedItem.salaryGrades" | 267 | v-model="editedItem.salaryGrades" |
| 273 | readonly | 268 | readonly |
| 274 | ></v-text-field> | 269 | ></v-text-field> |
| 275 | </v-flex> | 270 | </v-flex> |
| 276 | </v-flex> | 271 | </v-flex> |
| 277 | </v-layout> | 272 | </v-layout> |
| 278 | <v-layout> | 273 | <v-layout> |
| 279 | <v-flex xs4 class="pt-4 subheading"> | 274 | <v-flex xs4 class="pt-4 subheading"> |
| 280 | <label class="right">Basic Salary :</label> | 275 | <label class="right">Basic Salary :</label> |
| 281 | </v-flex> | 276 | </v-flex> |
| 282 | <v-flex xs8 sm7 class="ml-3"> | 277 | <v-flex xs8 sm7 class="ml-3"> |
| 283 | <v-flex xs8 sm7 class="ml-3"> | 278 | <v-flex xs8 sm7 class="ml-3"> |
| 284 | <v-text-field | 279 | <v-text-field |
| 285 | :rules="basicRules" | 280 | :rules="basicRules" |
| 286 | v-model="editedItem.basicSalary" | 281 | v-model="editedItem.basicSalary" |
| 287 | readonly | 282 | readonly |
| 288 | ></v-text-field> | 283 | ></v-text-field> |
| 289 | </v-flex> | 284 | </v-flex> |
| 290 | </v-flex> | 285 | </v-flex> |
| 291 | </v-layout> | 286 | </v-layout> |
| 292 | <v-layout> | 287 | <v-layout> |
| 293 | <v-flex xs4 class="pt-4 subheading"> | 288 | <v-flex xs4 class="pt-4 subheading"> |
| 294 | <label class="right">Overtime Rate (Per Hour) :</label> | 289 | <label class="right">Overtime Rate (Per Hour) :</label> |
| 295 | </v-flex> | 290 | </v-flex> |
| 296 | <v-flex xs8 sm7 class="ml-3"> | 291 | <v-flex xs8 sm7 class="ml-3"> |
| 297 | <v-flex xs8 sm7 class="ml-3"> | 292 | <v-flex xs8 sm7 class="ml-3"> |
| 298 | <v-text-field | 293 | <v-text-field |
| 299 | :rules="overtimeRules" | 294 | :rules="overtimeRules" |
| 300 | v-model="editedItem.overtimeRate" | 295 | v-model="editedItem.overtimeRate" |
| 301 | readonly | 296 | readonly |
| 302 | ></v-text-field> | 297 | ></v-text-field> |
| 303 | </v-flex> | 298 | </v-flex> |
| 304 | </v-flex> | 299 | </v-flex> |
| 305 | </v-layout> | 300 | </v-layout> |
| 306 | </v-form> | 301 | </v-form> |
| 307 | </v-card> | 302 | </v-card> |
| 308 | </v-flex> | 303 | </v-flex> |
| 309 | <!-- <v-flex xs12 sm12 md5></v-flex> --> | 304 | <!-- <v-flex xs12 sm12 md5></v-flex> --> |
| 310 | <v-flex xs12 sm12 md6> | 305 | <v-flex xs12 sm12 md6> |
| 311 | <v-card flat> | 306 | <v-card flat> |
| 312 | <v-toolbar dark class="card-styles" flat> | 307 | <v-toolbar dark class="card-styles" flat> |
| 313 | <v-spacer></v-spacer> | 308 | <v-spacer></v-spacer> |
| 314 | <h3>Allowances</h3> | 309 | <h3>Allowances</h3> |
| 315 | <v-spacer></v-spacer> | 310 | <v-spacer></v-spacer> |
| 316 | </v-toolbar> | 311 | </v-toolbar> |
| 317 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> | 312 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> |
| 318 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 313 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 319 | <v-text-field | 314 | <v-text-field |
| 320 | solo | 315 | solo |
| 321 | readonly | 316 | readonly |
| 322 | label="Enter Allowances Label" | 317 | label="Enter Allowances Label" |
| 323 | v-model="editedItem.allowancesName" | 318 | v-model="editedItem.allowancesName" |
| 324 | ></v-text-field> | 319 | ></v-text-field> |
| 325 | </v-flex> | 320 | </v-flex> |
| 326 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 321 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 327 | <v-text-field | 322 | <v-text-field |
| 328 | solo | 323 | solo |
| 329 | readonly | 324 | readonly |
| 330 | v-model="editedItem.allowancesValue" | 325 | v-model="editedItem.allowancesValue" |
| 331 | label="Enter Allowances Value" | 326 | label="Enter Allowances Value" |
| 332 | ></v-text-field> | 327 | ></v-text-field> |
| 333 | </v-flex> | 328 | </v-flex> |
| 334 | </v-layout> | 329 | </v-layout> |
| 335 | <!-- <v-flex xs12 sm12 md6> --> | 330 | <!-- <v-flex xs12 sm12 md6> --> |
| 336 | <v-card flat> | 331 | <v-card flat> |
| 337 | <v-toolbar dark class="card-styles" flat> | 332 | <v-toolbar dark class="card-styles" flat> |
| 338 | <v-spacer></v-spacer> | 333 | <v-spacer></v-spacer> |
| 339 | <h3>Deduction</h3> | 334 | <h3>Deduction</h3> |
| 340 | <v-spacer></v-spacer> | 335 | <v-spacer></v-spacer> |
| 341 | </v-toolbar> | 336 | </v-toolbar> |
| 342 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 337 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 343 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 338 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 344 | <v-text-field | 339 | <v-text-field |
| 345 | solo | 340 | solo |
| 346 | readonly | 341 | readonly |
| 347 | label="Enter Deduction Label" | 342 | label="Enter Deduction Label" |
| 348 | v-model="editedItem.deductionName" | 343 | v-model="editedItem.deductionName" |
| 349 | ></v-text-field> | 344 | ></v-text-field> |
| 350 | </v-flex> | 345 | </v-flex> |
| 351 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 346 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 352 | <v-text-field | 347 | <v-text-field |
| 353 | solo | 348 | solo |
| 354 | readonly | 349 | readonly |
| 355 | label="Enter Deduction Value" | 350 | label="Enter Deduction Value" |
| 356 | v-model="editedItem.deductionValue" | 351 | v-model="editedItem.deductionValue" |
| 357 | ></v-text-field> | 352 | ></v-text-field> |
| 358 | </v-flex> | 353 | </v-flex> |
| 359 | </v-layout> | 354 | </v-layout> |
| 360 | </v-card> | 355 | </v-card> |
| 361 | <!-- </v-flex> --> | 356 | <!-- </v-flex> --> |
| 362 | </v-card> | 357 | </v-card> |
| 363 | </v-flex> | 358 | </v-flex> |
| 364 | <!-- <v-flex xs12 sm12 md6> | 359 | <!-- <v-flex xs12 sm12 md6> |
| 365 | <v-card flat> | 360 | <v-card flat> |
| 366 | <v-toolbar dark class="card-styles" flat> | 361 | <v-toolbar dark class="card-styles" flat> |
| 367 | <v-spacer></v-spacer> | 362 | <v-spacer></v-spacer> |
| 368 | <h3>Deduction</h3> | 363 | <h3>Deduction</h3> |
| 369 | <v-spacer></v-spacer> | 364 | <v-spacer></v-spacer> |
| 370 | </v-toolbar> | 365 | </v-toolbar> |
| 371 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 366 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 372 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 367 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 373 | <v-text-field | 368 | <v-text-field |
| 374 | solo | 369 | solo |
| 375 | label="Enter Deduction Label" | 370 | label="Enter Deduction Label" |
| 376 | v-model="editedItem.deductionName" | 371 | v-model="editedItem.deductionName" |
| 377 | ></v-text-field> | 372 | ></v-text-field> |
| 378 | </v-flex> | 373 | </v-flex> |
| 379 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 374 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 380 | <v-text-field | 375 | <v-text-field |
| 381 | solo | 376 | solo |
| 382 | label="Enter Deduction Value" | 377 | label="Enter Deduction Value" |
| 383 | v-model="editedItem.deductionValue" | 378 | v-model="editedItem.deductionValue" |
| 384 | ></v-text-field> | 379 | ></v-text-field> |
| 385 | </v-flex> | 380 | </v-flex> |
| 386 | </v-layout> | 381 | </v-layout> |
| 387 | </v-card> | 382 | </v-card> |
| 388 | </v-flex>--> | 383 | </v-flex>--> |
| 389 | <v-flex xs12 sm12 md4></v-flex> | 384 | <v-flex xs12 sm12 md4></v-flex> |
| 390 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 385 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 391 | <v-card flat> | 386 | <v-card flat> |
| 392 | <v-toolbar dark class="card-styles" flat> | 387 | <v-toolbar dark class="card-styles" flat> |
| 393 | <v-spacer></v-spacer> | 388 | <v-spacer></v-spacer> |
| 394 | <h3>Total Salary Details</h3> | 389 | <h3>Total Salary Details</h3> |
| 395 | <v-spacer></v-spacer> | 390 | <v-spacer></v-spacer> |
| 396 | </v-toolbar> | 391 | </v-toolbar> |
| 397 | <v-layout> | 392 | <v-layout> |
| 398 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 393 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 399 | <v-text-field solo value="Gross Salary"></v-text-field> | 394 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 400 | </v-flex> | 395 | </v-flex> |
| 401 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 396 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 402 | <v-flex xs8 sm7 class="ml-3"> | 397 | <v-flex xs8 sm7 class="ml-3"> |
| 403 | <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field> | 398 | <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field> |
| 404 | </v-flex> | 399 | </v-flex> |
| 405 | </v-flex> | 400 | </v-flex> |
| 406 | </v-layout> | 401 | </v-layout> |
| 407 | <v-layout> | 402 | <v-layout> |
| 408 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 403 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 409 | <v-text-field solo value="Total Deduction"></v-text-field> | 404 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 410 | </v-flex> | 405 | </v-flex> |
| 411 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 406 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 412 | <v-flex xs8 sm7 class="ml-3"> | 407 | <v-flex xs8 sm7 class="ml-3"> |
| 413 | <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field> | 408 | <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field> |
| 414 | </v-flex> | 409 | </v-flex> |
| 415 | </v-flex> | 410 | </v-flex> |
| 416 | </v-layout> | 411 | </v-layout> |
| 417 | <v-layout> | 412 | <v-layout> |
| 418 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 413 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 419 | <v-text-field solo value="Net Salary"></v-text-field> | 414 | <v-text-field solo value="Net Salary"></v-text-field> |
| 420 | </v-flex> | 415 | </v-flex> |
| 421 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 416 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 422 | <v-flex xs8 sm7 class="ml-3"> | 417 | <v-flex xs8 sm7 class="ml-3"> |
| 423 | <b> | 418 | <b> |
| 424 | <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field> | 419 | <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field> |
| 425 | </b> | 420 | </b> |
| 426 | </v-flex> | 421 | </v-flex> |
| 427 | </v-flex> | 422 | </v-flex> |
| 428 | </v-layout> | 423 | </v-layout> |
| 429 | </v-card> | 424 | </v-card> |
| 430 | </v-flex> | 425 | </v-flex> |
| 431 | </v-layout> | 426 | </v-layout> |
| 432 | </v-container> | 427 | </v-container> |
| 433 | </v-flex> | 428 | </v-flex> |
| 434 | </v-card> | 429 | </v-card> |
| 435 | </v-dialog> | 430 | </v-dialog> |
| 436 | <!-- ****** EXAM TABLE****** --> | 431 | <!-- ****** EXAM TABLE****** --> |
| 437 | 432 | ||
| 438 | <v-toolbar color="transparent" flat> | 433 | <v-toolbar color="transparent" flat> |
| 439 | <v-btn | 434 | <v-btn |
| 440 | fab | 435 | fab |
| 441 | dark | 436 | dark |
| 442 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 437 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 443 | small | 438 | small |
| 444 | @click="addSalaryDialog = true" | 439 | @click="addSalaryDialog = true" |
| 445 | > | 440 | > |
| 446 | <v-icon dark>add</v-icon> | 441 | <v-icon dark>add</v-icon> |
| 447 | </v-btn> | 442 | </v-btn> |
| 448 | <v-btn | 443 | <v-btn |
| 449 | round | 444 | round |
| 450 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 445 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 451 | dark | 446 | dark |
| 452 | @click="addSalaryDialog = true" | 447 | @click="addSalaryDialog = true" |
| 453 | > | 448 | > |
| 454 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary | 449 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary |
| 455 | </v-btn> | 450 | </v-btn> |
| 456 | <v-spacer></v-spacer> | 451 | <v-spacer></v-spacer> |
| 457 | <v-card-title class="body-1" v-show="show"> | 452 | <v-card-title class="body-1" v-show="show"> |
| 458 | <v-btn icon large flat @click="displaySearch"> | 453 | <v-btn icon large flat @click="displaySearch"> |
| 459 | <v-avatar size="27"> | 454 | <v-avatar size="27"> |
| 460 | <img src="/static/icon/search.png" alt="icon" /> | 455 | <img src="/static/icon/search.png" alt="icon" /> |
| 461 | </v-avatar> | 456 | </v-avatar> |
| 462 | </v-btn> | 457 | </v-btn> |
| 463 | </v-card-title> | 458 | </v-card-title> |
| 464 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 459 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 465 | <v-layout> | 460 | <v-layout> |
| 466 | <v-text-field | 461 | <v-text-field |
| 467 | autofocus | 462 | autofocus |
| 468 | v-model="search" | 463 | v-model="search" |
| 469 | label="Search" | 464 | label="Search" |
| 470 | prepend-inner-icon="search" | 465 | prepend-inner-icon="search" |
| 471 | color="primary" | 466 | color="primary" |
| 472 | ></v-text-field> | 467 | ></v-text-field> |
| 473 | <v-icon @click="closeSearch" color="error">close</v-icon> | 468 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 474 | </v-layout> | 469 | </v-layout> |
| 475 | </v-flex> | 470 | </v-flex> |
| 476 | </v-toolbar> | 471 | </v-toolbar> |
| 477 | <v-data-table | 472 | <v-data-table |
| 478 | :headers="headers" | 473 | :headers="headers" |
| 479 | :items="salaryData" | 474 | :items="salaryData" |
| 480 | :pagination.sync="pagination" | 475 | :pagination.sync="pagination" |
| 481 | :search="search" | 476 | :search="search" |
| 482 | > | 477 | > |
| 483 | <template slot="items" slot-scope="props"> | 478 | <template slot="items" slot-scope="props"> |
| 484 | <tr class="tr"> | 479 | <tr class="tr"> |
| 485 | <td class="td td-row">{{ props.index + 1}}</td> | 480 | <td class="td td-row">{{ props.index + 1}}</td> |
| 486 | <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td> | 481 | <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td> |
| 487 | <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td> | 482 | <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td> |
| 488 | <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> | 483 | <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> |
| 489 | <td class="td td-row text-xs-center"> | 484 | <td class="td td-row text-xs-center"> |
| 490 | <span> | 485 | <span> |
| 491 | <v-tooltip top> | 486 | <v-tooltip top> |
| 492 | <img | 487 | <img |
| 493 | slot="activator" | 488 | slot="activator" |
| 494 | style="cursor:pointer; width:25px; height:25px; " | 489 | style="cursor:pointer; width:25px; height:25px; " |
| 495 | class="mr-3" | 490 | class="mr-3" |
| 496 | @click="profile(props.item)" | 491 | @click="profile(props.item)" |
| 497 | src="/static/icon/view.png" | 492 | src="/static/icon/view.png" |
| 498 | /> | 493 | /> |
| 499 | <span>View</span> | 494 | <span>View</span> |
| 500 | </v-tooltip> | 495 | </v-tooltip> |
| 501 | <v-tooltip top> | 496 | <v-tooltip top> |
| 502 | <img | 497 | <img |
| 503 | slot="activator" | 498 | slot="activator" |
| 504 | style="cursor:pointer; width:20px; height:18px; " | 499 | style="cursor:pointer; width:20px; height:18px; " |
| 505 | class="mr-3" | 500 | class="mr-3" |
| 506 | @click="editItem(props.item)" | 501 | @click="editItem(props.item)" |
| 507 | src="/static/icon/edit.png" | 502 | src="/static/icon/edit.png" |
| 508 | /> | 503 | /> |
| 509 | <span>Edit</span> | 504 | <span>Edit</span> |
| 510 | </v-tooltip> | 505 | </v-tooltip> |
| 511 | <v-tooltip top> | 506 | <v-tooltip top> |
| 512 | <img | 507 | <img |
| 513 | slot="activator" | 508 | slot="activator" |
| 514 | style="cursor:pointer; width:20px; height:20px; " | 509 | style="cursor:pointer; width:20px; height:20px; " |
| 515 | class="mr-3" | 510 | class="mr-3" |
| 516 | @click="deleteItem(props.item)" | 511 | @click="deleteItem(props.item)" |
| 517 | src="/static/icon/delete.png" | 512 | src="/static/icon/delete.png" |
| 518 | /> | 513 | /> |
| 519 | <span>Delete</span> | 514 | <span>Delete</span> |
| 520 | </v-tooltip> | 515 | </v-tooltip> |
| 521 | </span> | 516 | </span> |
| 522 | </td> | 517 | </td> |
| 523 | </tr> | 518 | </tr> |
| 524 | </template> | 519 | </template> |
| 525 | <v-alert | 520 | <v-alert |
| 526 | slot="no-results" | 521 | slot="no-results" |
| 527 | :value="true" | 522 | :value="true" |
| 528 | color="error" | 523 | color="error" |
| 529 | icon="warning" | 524 | icon="warning" |
| 530 | >Your search for "{{ search }}" found no results.</v-alert> | 525 | >Your search for "{{ search }}" found no results.</v-alert> |
| 531 | </v-data-table> | 526 | </v-data-table> |
| 532 | 527 | ||
| 533 | <!-- ****** ADD SALARY ****** --> | 528 | <!-- ****** ADD SALARY ****** --> |
| 534 | <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog" persistent> | 529 | <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog" persistent> |
| 535 | <v-card flat class="text-xs-center white--text"> | 530 | <v-card flat class="text-xs-center"> |
| 536 | <v-layout> | 531 | <v-layout> |
| 537 | <v-flex xs12 class="card-style pa-2"> | 532 | <v-flex xs12 class="Card-style pa-2"> |
| 538 | <label class="title text-xs-center">Add Salary</label> | 533 | <label class="title text-xs-center">Add Salary</label> |
| 539 | <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon> | 534 | <v-icon size="24" class="right" @click="closeAddSalaryModel">cancel</v-icon> |
| 540 | </v-flex> | 535 | </v-flex> |
| 541 | </v-layout> | 536 | </v-layout> |
| 542 | 537 | ||
| 543 | <v-flex xs12 sm12> | 538 | <v-flex xs12 sm12> |
| 544 | <v-container fluid grid-list-md> | 539 | <v-container fluid grid-list-md> |
| 545 | <v-layout wrap> | 540 | <v-layout wrap> |
| 546 | <v-flex xs12 sm12 md6> | 541 | <v-flex xs12 sm12 md6> |
| 547 | <v-card flat> | 542 | <v-card flat> |
| 548 | <v-toolbar dark class="card-styles" flat> | 543 | <v-toolbar dark class="card-styles" flat> |
| 549 | <v-spacer></v-spacer> | 544 | <v-spacer></v-spacer> |
| 550 | <h3>Salary Template</h3> | 545 | <h3>Salary Template</h3> |
| 551 | <v-spacer></v-spacer> | 546 | <v-spacer></v-spacer> |
| 552 | </v-toolbar> | 547 | </v-toolbar> |
| 553 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 548 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 554 | <v-layout> | 549 | <v-layout> |
| 555 | <v-flex xs4 class="pt-4 subheading"> | 550 | <v-flex xs4 class="pt-4 subheading"> |
| 556 | <label class="right hidden-xs-only">Salary Grades :</label> | 551 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 557 | </v-flex> | 552 | </v-flex> |
| 558 | <v-flex xs8 sm7 class="ml-3"> | 553 | <v-flex xs8 sm7 class="ml-3"> |
| 559 | <v-flex xs8 sm7 class="ml-3"> | 554 | <v-flex xs8 sm7 class="ml-3"> |
| 560 | <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field> | 555 | <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field> |
| 561 | </v-flex> | 556 | </v-flex> |
| 562 | </v-flex> | 557 | </v-flex> |
| 563 | </v-layout> | 558 | </v-layout> |
| 564 | <v-layout> | 559 | <v-layout> |
| 565 | <v-flex xs4 class="pt-4 subheading"> | 560 | <v-flex xs4 class="pt-4 subheading"> |
| 566 | <label class="right">Basic Salary :</label> | 561 | <label class="right">Basic Salary :</label> |
| 567 | </v-flex> | 562 | </v-flex> |
| 568 | <v-flex xs8 sm7 class="ml-3"> | 563 | <v-flex xs8 sm7 class="ml-3"> |
| 569 | <v-flex xs8 sm7 class="ml-3"> | 564 | <v-flex xs8 sm7 class="ml-3"> |
| 570 | <v-text-field | 565 | <v-text-field |
| 571 | :rules="basicRules" | 566 | :rules="basicRules" |
| 572 | v-on:keyup="addSalary" | 567 | v-on:keyup="addSalary" |
| 573 | v-model="salaryType.basicSalary" | 568 | v-model="salaryType.basicSalary" |
| 574 | ></v-text-field> | 569 | ></v-text-field> |
| 575 | </v-flex> | 570 | </v-flex> |
| 576 | </v-flex> | 571 | </v-flex> |
| 577 | </v-layout> | 572 | </v-layout> |
| 578 | <v-layout> | 573 | <v-layout> |
| 579 | <v-flex xs4 class="pt-4 subheading"> | 574 | <v-flex xs4 class="pt-4 subheading"> |
| 580 | <label class="right">Overtime Rate (Per Hour) :</label> | 575 | <label class="right">Overtime Rate (Per Hour) :</label> |
| 581 | </v-flex> | 576 | </v-flex> |
| 582 | <v-flex xs8 sm7 class="ml-3"> | 577 | <v-flex xs8 sm7 class="ml-3"> |
| 583 | <v-flex xs8 sm7 class="ml-3"> | 578 | <v-flex xs8 sm7 class="ml-3"> |
| 584 | <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field> | 579 | <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field> |
| 585 | </v-flex> | 580 | </v-flex> |
| 586 | </v-flex> | 581 | </v-flex> |
| 587 | </v-layout> | 582 | </v-layout> |
| 588 | </v-form> | 583 | </v-form> |
| 589 | </v-card> | 584 | </v-card> |
| 590 | </v-flex> | 585 | </v-flex> |
| 591 | <!-- <v-flex xs12 sm12 md5></v-flex> --> | 586 | <!-- <v-flex xs12 sm12 md5></v-flex> --> |
| 592 | <v-flex xs12 sm12 md6> | 587 | <v-flex xs12 sm12 md6> |
| 593 | <v-card flat> | 588 | <v-card flat> |
| 594 | <v-toolbar dark class="card-styles" flat> | 589 | <v-toolbar dark class="card-styles" flat> |
| 595 | <v-spacer></v-spacer> | 590 | <v-spacer></v-spacer> |
| 596 | <h3>Allowances</h3> | 591 | <h3>Allowances</h3> |
| 597 | <v-spacer></v-spacer> | 592 | <v-spacer></v-spacer> |
| 598 | </v-toolbar> | 593 | </v-toolbar> |
| 599 | <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index"> | 594 | <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index"> |
| 600 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 595 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 601 | <v-text-field | 596 | <v-text-field |
| 602 | solo | 597 | solo |
| 603 | label="Enter Allowances Label" | 598 | label="Enter Allowances Label" |
| 604 | v-model="salaryType.allowancesName" | 599 | v-model="salaryType.allowancesName" |
| 605 | ></v-text-field> | 600 | ></v-text-field> |
| 606 | </v-flex> | 601 | </v-flex> |
| 607 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 602 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 608 | <v-text-field | 603 | <v-text-field |
| 609 | solo | 604 | solo |
| 610 | v-model="salaryType.allowancesValue" | 605 | v-model="salaryType.allowancesValue" |
| 611 | label="Enter Allowances Value" | 606 | label="Enter Allowances Value" |
| 612 | v-on:keyup="addAllowances" | 607 | v-on:keyup="addAllowances" |
| 613 | ></v-text-field> | 608 | ></v-text-field> |
| 614 | </v-flex> | 609 | </v-flex> |
| 615 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 610 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 616 | <v-btn | 611 | <v-btn |
| 617 | color="white" | 612 | color="white" |
| 618 | round | 613 | round |
| 619 | class="right mt-3" | 614 | class="right mt-3" |
| 620 | @click="deleteSelectAllowances(index)" | 615 | @click="deleteSelectAllowances(index)" |
| 621 | v-if="index != 0" | 616 | v-if="index != 0" |
| 622 | > | 617 | > |
| 623 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 618 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 624 | </v-btn> | 619 | </v-btn> |
| 625 | <v-btn color="white" round class="right mt-3" @click="selectAllowances"> | 620 | <v-btn color="white" round class="right mt-3" @click="selectAllowances"> |
| 626 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 621 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 627 | </v-btn> | 622 | </v-btn> |
| 628 | </v-flex> | 623 | </v-flex> |
| 629 | </v-layout> | 624 | </v-layout> |
| 630 | <!-- <v-flex xs12 sm12 md6> --> | 625 | <!-- <v-flex xs12 sm12 md6> --> |
| 631 | <v-card flat> | 626 | <v-card flat> |
| 632 | <v-toolbar dark class="card-styles" flat> | 627 | <v-toolbar dark class="card-styles" flat> |
| 633 | <v-spacer></v-spacer> | 628 | <v-spacer></v-spacer> |
| 634 | <h3>Deduction</h3> | 629 | <h3>Deduction</h3> |
| 635 | <v-spacer></v-spacer> | 630 | <v-spacer></v-spacer> |
| 636 | </v-toolbar> | 631 | </v-toolbar> |
| 637 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> | 632 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> |
| 638 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 633 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 639 | <v-text-field | 634 | <v-text-field |
| 640 | solo | 635 | solo |
| 641 | label="Enter Deduction Label" | 636 | label="Enter Deduction Label" |
| 642 | v-model="salaryType.deductionName" | 637 | v-model="salaryType.deductionName" |
| 643 | ></v-text-field> | 638 | ></v-text-field> |
| 644 | </v-flex> | 639 | </v-flex> |
| 645 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 640 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 646 | <v-text-field | 641 | <v-text-field |
| 647 | solo | 642 | solo |
| 648 | label="Enter Deduction Value" | 643 | label="Enter Deduction Value" |
| 649 | v-model="salaryType.deductionValue" | 644 | v-model="salaryType.deductionValue" |
| 650 | v-on:keyup="addDeduction" | 645 | v-on:keyup="addDeduction" |
| 651 | ></v-text-field> | 646 | ></v-text-field> |
| 652 | </v-flex> | 647 | </v-flex> |
| 653 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 648 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 654 | <v-btn | 649 | <v-btn |
| 655 | color="white" | 650 | color="white" |
| 656 | round | 651 | round |
| 657 | class="right mt-3" | 652 | class="right mt-3" |
| 658 | @click="deleteSelectDeduction(index)" | 653 | @click="deleteSelectDeduction(index)" |
| 659 | v-if="index != 0" | 654 | v-if="index != 0" |
| 660 | > | 655 | > |
| 661 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 656 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 662 | </v-btn> | 657 | </v-btn> |
| 663 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> | 658 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> |
| 664 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 659 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 665 | </v-btn> | 660 | </v-btn> |
| 666 | </v-flex> | 661 | </v-flex> |
| 667 | </v-layout> | 662 | </v-layout> |
| 668 | </v-card> | 663 | </v-card> |
| 669 | <!-- </v-flex> --> | 664 | <!-- </v-flex> --> |
| 670 | </v-card> | 665 | </v-card> |
| 671 | </v-flex> | 666 | </v-flex> |
| 672 | <!-- <v-flex xs12 sm12 md6> | 667 | <!-- <v-flex xs12 sm12 md6> |
| 673 | <v-card flat> | 668 | <v-card flat> |
| 674 | <v-toolbar dark class="card-styles" flat> | 669 | <v-toolbar dark class="card-styles" flat> |
| 675 | <v-spacer></v-spacer> | 670 | <v-spacer></v-spacer> |
| 676 | <h3>Deduction</h3> | 671 | <h3>Deduction</h3> |
| 677 | <v-spacer></v-spacer> | 672 | <v-spacer></v-spacer> |
| 678 | </v-toolbar> | 673 | </v-toolbar> |
| 679 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> | 674 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> |
| 680 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 675 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 681 | <v-text-field | 676 | <v-text-field |
| 682 | solo | 677 | solo |
| 683 | label="Enter Deduction Label" | 678 | label="Enter Deduction Label" |
| 684 | v-model="salaryType.deductionName" | 679 | v-model="salaryType.deductionName" |
| 685 | ></v-text-field> | 680 | ></v-text-field> |
| 686 | </v-flex> | 681 | </v-flex> |
| 687 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 682 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 688 | <v-text-field | 683 | <v-text-field |
| 689 | solo | 684 | solo |
| 690 | label="Enter Deduction Value" | 685 | label="Enter Deduction Value" |
| 691 | v-model="salaryType.deductionValue" | 686 | v-model="salaryType.deductionValue" |
| 692 | v-on:keyup="addDeduction" | 687 | v-on:keyup="addDeduction" |
| 693 | ></v-text-field> | 688 | ></v-text-field> |
| 694 | </v-flex> | 689 | </v-flex> |
| 695 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 690 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 696 | <v-btn | 691 | <v-btn |
| 697 | color="white" | 692 | color="white" |
| 698 | round | 693 | round |
| 699 | class="right mt-3" | 694 | class="right mt-3" |
| 700 | @click="deleteSelectDeduction(index)" | 695 | @click="deleteSelectDeduction(index)" |
| 701 | v-if="index != 0" | 696 | v-if="index != 0" |
| 702 | > | 697 | > |
| 703 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 698 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 704 | </v-btn> | 699 | </v-btn> |
| 705 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> | 700 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> |
| 706 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 701 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 707 | </v-btn> | 702 | </v-btn> |
| 708 | </v-flex> | 703 | </v-flex> |
| 709 | </v-layout> | 704 | </v-layout> |
| 710 | </v-card> | 705 | </v-card> |
| 711 | </v-flex>--> | 706 | </v-flex>--> |
| 712 | <!-- <v-flex xs12 sm12 md4></v-flex> --> | 707 | <!-- <v-flex xs12 sm12 md4></v-flex> --> |
| 713 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 708 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 714 | <v-card flat> | 709 | <v-card flat> |
| 715 | <v-toolbar dark class="card-styles" flat> | 710 | <v-toolbar dark class="card-styles" flat> |
| 716 | <v-spacer></v-spacer> | 711 | <v-spacer></v-spacer> |
| 717 | <h3>Total Salary Details</h3> | 712 | <h3>Total Salary Details</h3> |
| 718 | <v-spacer></v-spacer> | 713 | <v-spacer></v-spacer> |
| 719 | </v-toolbar> | 714 | </v-toolbar> |
| 720 | <v-layout> | 715 | <v-layout> |
| 721 | <v-flex xs4 class="pt-4 subheading"> | 716 | <v-flex xs4 class="pt-4 subheading"> |
| 722 | <v-text-field solo value="Gross Salary"></v-text-field> | 717 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 723 | </v-flex> | 718 | </v-flex> |
| 724 | <v-flex xs8 sm7 class="ml-3"> | 719 | <v-flex xs8 sm7 class="ml-3"> |
| 725 | <v-flex xs8 sm7 class="ml-3"> | 720 | <v-flex xs8 sm7 class="ml-3"> |
| 726 | <v-text-field v-model="grossSalary" box readonly></v-text-field> | 721 | <v-text-field v-model="grossSalary" box readonly></v-text-field> |
| 727 | </v-flex> | 722 | </v-flex> |
| 728 | </v-flex> | 723 | </v-flex> |
| 729 | </v-layout> | 724 | </v-layout> |
| 730 | <v-layout> | 725 | <v-layout> |
| 731 | <v-flex xs4 class="pt-4 subheading"> | 726 | <v-flex xs4 class="pt-4 subheading"> |
| 732 | <v-text-field solo value="Total Deduction"></v-text-field> | 727 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 733 | </v-flex> | 728 | </v-flex> |
| 734 | <v-flex xs8 sm7 class="ml-3"> | 729 | <v-flex xs8 sm7 class="ml-3"> |
| 735 | <v-flex xs8 sm7 class="ml-3"> | 730 | <v-flex xs8 sm7 class="ml-3"> |
| 736 | <v-text-field v-model="totalDeduction" box readonly></v-text-field> | 731 | <v-text-field v-model="totalDeduction" box readonly></v-text-field> |
| 737 | </v-flex> | 732 | </v-flex> |
| 738 | </v-flex> | 733 | </v-flex> |
| 739 | </v-layout> | 734 | </v-layout> |
| 740 | <v-layout> | 735 | <v-layout> |
| 741 | <v-flex xs4 class="pt-4 subheading"> | 736 | <v-flex xs4 class="pt-4 subheading"> |
| 742 | <v-text-field solo value="Net Salary"></v-text-field> | 737 | <v-text-field solo value="Net Salary"></v-text-field> |
| 743 | </v-flex> | 738 | </v-flex> |
| 744 | <v-flex xs8 sm7 class="ml-3"> | 739 | <v-flex xs8 sm7 class="ml-3"> |
| 745 | <v-flex xs8 sm7 class="ml-3"> | 740 | <v-flex xs8 sm7 class="ml-3"> |
| 746 | <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field> | 741 | <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field> |
| 747 | </v-flex> | 742 | </v-flex> |
| 748 | </v-flex> | 743 | </v-flex> |
| 749 | </v-layout> | 744 | </v-layout> |
| 750 | </v-card> | 745 | </v-card> |
| 751 | <v-layout> | 746 | <v-layout> |
| 752 | <v-flex xs12> | 747 | <v-flex xs12> |
| 753 | <v-card-actions> | 748 | <v-card-actions> |
| 754 | <v-spacer class="hidden-xs-only"></v-spacer> | 749 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 755 | <v-btn | 750 | <v-btn |
| 756 | color="open-dialog-button" | 751 | color="open-dialog-button" |
| 752 | round | ||
| 757 | dark | 753 | dark |
| 758 | class="right add-button" | 754 | class="right add-button" |
| 759 | @click="submit" | 755 | @click="submit" |
| 760 | >Add Salary Template</v-btn> | 756 | >Add Salary Template</v-btn> |
| 761 | </v-card-actions> | 757 | </v-card-actions> |
| 762 | </v-flex> | 758 | </v-flex> |
| 763 | </v-layout> | 759 | </v-layout> |
| 764 | </v-flex> | 760 | </v-flex> |
| 765 | </v-layout> | 761 | </v-layout> |
| 766 | </v-container> | 762 | </v-container> |
| 767 | </v-flex> | 763 | </v-flex> |
| 768 | </v-card> | 764 | </v-card> |
| 769 | </v-dialog> | 765 | </v-dialog> |
| 770 | <v-snackbar | 766 | <v-snackbar |
| 771 | :timeout="timeout" | 767 | :timeout="timeout" |
| 772 | :top="y === 'top'" | 768 | :top="y === 'top'" |
| 773 | :right="x === 'right'" | 769 | :right="x === 'right'" |
| 774 | :vertical="mode === 'vertical'" | 770 | :vertical="mode === 'vertical'" |
| 775 | v-model="snackbar" | 771 | v-model="snackbar" |
| 776 | :color="color" | 772 | :color="color" |
| 777 | >{{ text }}</v-snackbar> | 773 | >{{ text }}</v-snackbar> |
| 778 | <div class="loader" v-if="showLoader"> | 774 | <div class="loader" v-if="showLoader"> |
| 779 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 775 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 780 | </div> | 776 | </div> |
| 781 | </v-container> | 777 | </v-container> |
| 782 | </template> | 778 | </template> |
| 783 | 779 | ||
| 784 | <script> | 780 | <script> |
| 785 | import http from "@/Services/http.js"; | 781 | import http from "@/Services/http.js"; |
| 786 | import moment from "moment"; | 782 | import moment from "moment"; |
| 787 | 783 | ||
| 788 | export default { | 784 | export default { |
| 789 | data: () => ({ | 785 | data: () => ({ |
| 790 | snackbar: false, | 786 | snackbar: false, |
| 791 | date: null, | 787 | date: null, |
| 792 | color: "", | 788 | color: "", |
| 793 | y: "top", | 789 | y: "top", |
| 794 | x: "right", | 790 | x: "right", |
| 795 | mode: "", | 791 | mode: "", |
| 796 | timeout: 10000, | 792 | timeout: 10000, |
| 797 | text: "", | 793 | text: "", |
| 798 | show: true, | 794 | show: true, |
| 799 | showSearch: false, | 795 | showSearch: false, |
| 800 | addSalaryDialog: false, | 796 | addSalaryDialog: false, |
| 801 | loading: false, | 797 | loading: false, |
| 802 | loadingSearch: false, | 798 | loadingSearch: false, |
| 803 | search: "", | 799 | search: "", |
| 804 | showLoader: false, | 800 | showLoader: false, |
| 805 | editSalaryDialog: false, | 801 | editSalaryDialog: false, |
| 806 | profileSalaryDialog: false, | 802 | profileSalaryDialog: false, |
| 807 | valid: true, | 803 | valid: true, |
| 808 | disabled: true, | 804 | disabled: true, |
| 809 | showAllowances: false, | 805 | showAllowances: false, |
| 810 | showDeduction: false, | 806 | showDeduction: false, |
| 811 | pagination: { | 807 | pagination: { |
| 812 | rowsPerPage: 10, | 808 | rowsPerPage: 10, |
| 813 | }, | 809 | }, |
| 814 | salaryTypes: [], | 810 | salaryTypes: [], |
| 815 | salaryTypeData: [ | 811 | salaryTypeData: [ |
| 816 | { | 812 | { |
| 817 | allowancesValue: "", | 813 | allowancesValue: "", |
| 818 | allowancesName: "House Rent", | 814 | allowancesName: "House Rent", |
| 819 | totalAllowances: 0, | 815 | totalAllowances: 0, |
| 820 | }, | 816 | }, |
| 821 | ], | 817 | ], |
| 822 | salaryTypeDeductionData: [ | 818 | salaryTypeDeductionData: [ |
| 823 | { | 819 | { |
| 824 | deductionValue: "", | 820 | deductionValue: "", |
| 825 | deductionName: "Provident fund", | 821 | deductionName: "Provident fund", |
| 826 | totalDeductions: 0, | 822 | totalDeductions: 0, |
| 827 | }, | 823 | }, |
| 828 | ], | 824 | ], |
| 829 | grossSalary: 0, | 825 | grossSalary: 0, |
| 830 | totalDeduction: 0, | 826 | totalDeduction: 0, |
| 831 | salaryType: { | 827 | salaryType: { |
| 832 | netSalary: 0, | 828 | netSalary: 0, |
| 833 | salaryGrades: "", | 829 | salaryGrades: "", |
| 834 | allowancesValue: "", | 830 | allowancesValue: "", |
| 835 | deductionValue: "", | 831 | deductionValue: "", |
| 836 | overtimeRate: "", | 832 | overtimeRate: "", |
| 837 | }, | 833 | }, |
| 838 | 834 | ||
| 839 | basicRules: [(v) => !!v || " Basic Salary is required"], | 835 | basicRules: [(v) => !!v || " Basic Salary is required"], |
| 840 | salaryRules: [(v) => !!v || "Salary Grades is required"], | 836 | salaryRules: [(v) => !!v || "Salary Grades is required"], |
| 841 | overtimeRules: [(v) => !!v || "Overtime Rate is required"], | 837 | overtimeRules: [(v) => !!v || "Overtime Rate is required"], |
| 842 | 838 | ||
| 843 | headers: [ | 839 | headers: [ |
| 844 | { | 840 | { |
| 845 | align: "", | 841 | align: "", |
| 846 | text: "No", | 842 | text: "No", |
| 847 | sortable: false, | 843 | sortable: false, |
| 848 | value: "No", | 844 | value: "No", |
| 849 | }, | 845 | }, |
| 850 | { | 846 | { |
| 851 | text: "Salary Grades", | 847 | text: "Salary Grades", |
| 852 | value: "salaryGrades", | 848 | value: "salaryGrades", |
| 853 | sortable: false, | 849 | sortable: false, |
| 854 | align: "center", | 850 | align: "center", |
| 855 | }, | 851 | }, |
| 856 | { | 852 | { |
| 857 | text: "Basic Salary", | 853 | text: "Basic Salary", |
| 858 | value: "basicSalary", | 854 | value: "basicSalary", |
| 859 | sortable: false, | 855 | sortable: false, |
| 860 | align: "center", | 856 | align: "center", |
| 861 | }, | 857 | }, |
| 862 | { | 858 | { |
| 863 | text: "Overtime Rate", | 859 | text: "Overtime Rate", |
| 864 | value: "overtimeRate", | 860 | value: "overtimeRate", |
| 865 | sortable: false, | 861 | sortable: false, |
| 866 | align: "center", | 862 | align: "center", |
| 867 | }, | 863 | }, |
| 868 | { text: "Action", value: "", sortable: false, align: "center" }, | 864 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 869 | ], | 865 | ], |
| 870 | salaryData: [], | 866 | salaryData: [], |
| 871 | editedItem: {}, | 867 | editedItem: {}, |
| 872 | token: "", | 868 | token: "", |
| 873 | }), | 869 | }), |
| 874 | watch: { | 870 | watch: { |
| 875 | addSalaryDialog: function (val) { | 871 | addSalaryDialog: function (val) { |
| 876 | if (!val) { | 872 | if (!val) { |
| 877 | this.salaryType = []; | 873 | this.salaryType = []; |
| 878 | this.grossSalary = 0; | 874 | this.grossSalary = 0; |
| 879 | this.totalDeduction = 0; | 875 | this.totalDeduction = 0; |
| 880 | (this.salaryTypeData = [ | 876 | (this.salaryTypeData = [ |
| 881 | { | 877 | { |
| 882 | allowancesValue: "", | 878 | allowancesValue: "", |
| 883 | allowancesName: "", | 879 | allowancesName: "", |
| 884 | totalAllowances: 0, | 880 | totalAllowances: 0, |
| 885 | }, | 881 | }, |
| 886 | ]), | 882 | ]), |
| 887 | (this.salaryTypeDeductionData = [ | 883 | (this.salaryTypeDeductionData = [ |
| 888 | { | 884 | { |
| 889 | deductionValue: "", | 885 | deductionValue: "", |
| 890 | deductionName: "", | 886 | deductionName: "", |
| 891 | totalDeductions: 0, | 887 | totalDeductions: 0, |
| 892 | }, | 888 | }, |
| 893 | ]); | 889 | ]); |
| 894 | } | 890 | } |
| 895 | }, | 891 | }, |
| 896 | }, | 892 | }, |
| 897 | methods: { | 893 | methods: { |
| 898 | getSalaryList() { | 894 | getSalaryList() { |
| 899 | this.showLoader = true; | 895 | this.showLoader = true; |
| 900 | this.loadingSearch = true; | 896 | this.loadingSearch = true; |
| 901 | http() | 897 | http() |
| 902 | .get("/getSalaryList", { | 898 | .get("/getSalaryList", { |
| 903 | headers: { Authorization: "Bearer " + this.token }, | 899 | headers: { Authorization: "Bearer " + this.token }, |
| 904 | }) | 900 | }) |
| 905 | .then((response) => { | 901 | .then((response) => { |
| 906 | this.salaryData = response.data.data; | 902 | this.salaryData = response.data.data; |
| 907 | this.showLoader = false; | 903 | this.showLoader = false; |
| 908 | this.loadingSearch = false; | 904 | this.loadingSearch = false; |
| 909 | }) | 905 | }) |
| 910 | .catch((error) => { | 906 | .catch((error) => { |
| 911 | // console.log("err====>", err); | 907 | // console.log("err====>", err); |
| 912 | this.showLoader = false; | 908 | this.showLoader = false; |
| 913 | this.loadingSearch = false; | 909 | this.loadingSearch = false; |
| 914 | this.snackbar = true; | 910 | this.snackbar = true; |
| 915 | this.text = error.response.data.message; | 911 | this.text = error.response.data.message; |
| 916 | if (error.response.status === 401) { | 912 | if (error.response.status === 401) { |
| 917 | this.$router.replace({ path: "/" }); | 913 | this.$router.replace({ path: "/" }); |
| 918 | this.$store.dispatch("setToken", null); | 914 | this.$store.dispatch("setToken", null); |
| 919 | this.$store.dispatch("Id", null); | 915 | this.$store.dispatch("Id", null); |
| 920 | } | 916 | } |
| 921 | }); | 917 | }); |
| 922 | }, | 918 | }, |
| 923 | editItem(item) { | 919 | editItem(item) { |
| 924 | this.editedIndex = this.salaryData.indexOf(item); | 920 | this.editedIndex = this.salaryData.indexOf(item); |
| 925 | this.editedItem = Object.assign({}, item); | 921 | this.editedItem = Object.assign({}, item); |
| 926 | this.editedItem.date = | 922 | this.editedItem.date = |
| 927 | this.editedItem.date != undefined | 923 | this.editedItem.date != undefined |
| 928 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 924 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 929 | : (this.editedItem.date = ""); | 925 | : (this.editedItem.date = ""); |
| 930 | this.editSalaryDialog = true; | 926 | this.editSalaryDialog = true; |
| 931 | }, | 927 | }, |
| 932 | profile(item) { | 928 | profile(item) { |
| 933 | this.editedIndex = this.salaryData.indexOf(item); | 929 | this.editedIndex = this.salaryData.indexOf(item); |
| 934 | this.editedItem = Object.assign({}, item); | 930 | this.editedItem = Object.assign({}, item); |
| 935 | this.profileSalaryDialog = true; | 931 | this.profileSalaryDialog = true; |
| 936 | }, | 932 | }, |
| 937 | deleteItem(item) { | 933 | deleteItem(item) { |
| 938 | let Salary = { | 934 | let Salary = { |
| 939 | salaryId: item._id, | 935 | salaryId: item._id, |
| 940 | }; | 936 | }; |
| 941 | http() | 937 | http() |
| 942 | .delete( | 938 | .delete( |
| 943 | "/deleteSalary", | 939 | "/deleteSalary", |
| 944 | confirm("Are you sure you want to Delete this?") && { | 940 | confirm("Are you sure you want to Delete this?") && { |
| 945 | params: Salary, | 941 | params: Salary, |
| 946 | }, | 942 | }, |
| 947 | { | 943 | { |
| 948 | headers: { Authorization: "Bearer " + this.token }, | 944 | headers: { Authorization: "Bearer " + this.token }, |
| 949 | } | 945 | } |
| 950 | ) | 946 | ) |
| 951 | .then((response) => { | 947 | .then((response) => { |
| 952 | this.snackbar = true; | 948 | this.snackbar = true; |
| 953 | this.text = "Successfully Delete Salary "; | 949 | this.text = "Successfully Delete Salary "; |
| 954 | this.text = response.data.message; | 950 | this.text = response.data.message; |
| 955 | this.color = "green"; | 951 | this.color = "green"; |
| 956 | this.getSalaryList(); | 952 | this.getSalaryList(); |
| 957 | }) | 953 | }) |
| 958 | .catch((error) => { | 954 | .catch((error) => { |
| 959 | this.snackbar = true; | 955 | this.snackbar = true; |
| 960 | this.text = error.response.data.message; | 956 | this.text = error.response.data.message; |
| 961 | this.color = "red"; | 957 | this.color = "red"; |
| 962 | }); | 958 | }); |
| 963 | }, | 959 | }, |
| 964 | close() { | 960 | close() { |
| 965 | this.editSalaryDialog = false; | 961 | this.editSalaryDialog = false; |
| 966 | }, | 962 | }, |
| 967 | closeAddSalaryModel() { | 963 | closeAddSalaryModel() { |
| 968 | this.addSalaryDialog = false; | 964 | this.addSalaryDialog = false; |
| 969 | // this.salaryData = []; | 965 | // this.salaryData = []; |
| 970 | this.salaryType = []; | 966 | this.salaryType = []; |
| 971 | this.grossSalary = 0; | 967 | this.grossSalary = 0; |
| 972 | this.totalDeduction = 0; | 968 | this.totalDeduction = 0; |
| 973 | (this.salaryTypeData = [ | 969 | (this.salaryTypeData = [ |
| 974 | { | 970 | { |
| 975 | allowancesValue: "", | 971 | allowancesValue: "", |
| 976 | allowancesName: "", | 972 | allowancesName: "", |
| 977 | totalAllowances: 0, | 973 | totalAllowances: 0, |
| 978 | }, | 974 | }, |
| 979 | ]), | 975 | ]), |
| 980 | (this.salaryTypeDeductionData = [ | 976 | (this.salaryTypeDeductionData = [ |
| 981 | { | 977 | { |
| 982 | deductionValue: "", | 978 | deductionValue: "", |
| 983 | deductionName: "", | 979 | deductionName: "", |
| 984 | totalDeductions: 0, | 980 | totalDeductions: 0, |
| 985 | }, | 981 | }, |
| 986 | ]); | 982 | ]); |
| 987 | }, | 983 | }, |
| 988 | submit() { | 984 | submit() { |
| 989 | var salary = { | 985 | var salary = { |
| 990 | salaryGrades: this.salaryType.salaryGrades, | 986 | salaryGrades: this.salaryType.salaryGrades, |
| 991 | basicSalary: this.salaryType.basicSalary, | 987 | basicSalary: this.salaryType.basicSalary, |
| 992 | overtimeRate: this.salaryType.overtimeRate, | 988 | overtimeRate: this.salaryType.overtimeRate, |
| 993 | allowances: this.salaryTypeData, | 989 | allowances: this.salaryTypeData, |
| 994 | deduction: this.salaryTypeDeductionData, | 990 | deduction: this.salaryTypeDeductionData, |
| 995 | grossSalary: this.grossSalary, | 991 | grossSalary: this.grossSalary, |
| 996 | totalDeduction: this.totalDeduction, | 992 | totalDeduction: this.totalDeduction, |
| 997 | netSalary: this.salaryType.netSalary, | 993 | netSalary: this.salaryType.netSalary, |
| 998 | }; | 994 | }; |
| 999 | if (this.$refs.form.validate()) { | 995 | if (this.$refs.form.validate()) { |
| 1000 | this.loading = true; | 996 | this.loading = true; |
| 1001 | // console.log("api data", this.salaryType); | 997 | // console.log("api data", this.salaryType); |
| 1002 | http() | 998 | http() |
| 1003 | .post("/createSalary", salary) | 999 | .post("/createSalary", salary) |
| 1004 | .then((response) => { | 1000 | .then((response) => { |
| 1005 | // console.log("response", response); | 1001 | // console.log("response", response); |
| 1006 | this.snackbar = true; | 1002 | this.snackbar = true; |
| 1007 | this.text = "Successfully Created Salary "; | 1003 | this.text = "Successfully Created Salary "; |
| 1008 | this.text = response.data.message; | 1004 | this.text = response.data.message; |
| 1009 | this.color = "green"; | 1005 | this.color = "green"; |
| 1010 | this.addSalaryDialog = false; | 1006 | this.addSalaryDialog = false; |
| 1011 | this.getSalaryList(); | 1007 | this.getSalaryList(); |
| 1012 | this.color = "success"; | 1008 | this.color = "success"; |
| 1013 | this.salaryTypeData = []; | 1009 | this.salaryTypeData = []; |
| 1014 | this.salaryTypeDeductionData = []; | 1010 | this.salaryTypeDeductionData = []; |
| 1015 | this.salaryType = ""; | 1011 | this.salaryType = ""; |
| 1016 | this.grossSalary = ""; | 1012 | this.grossSalary = ""; |
| 1017 | this.totalDeduction = ""; | 1013 | this.totalDeduction = ""; |
| 1018 | this.loading = false; | 1014 | this.loading = false; |
| 1019 | this.clear(); | 1015 | this.clear(); |
| 1020 | }) | 1016 | }) |
| 1021 | .catch((error) => { | 1017 | .catch((error) => { |
| 1022 | // console.log("error", error); | 1018 | // console.log("error", error); |
| 1023 | this.snackbar = true; | 1019 | this.snackbar = true; |
| 1024 | this.text = error.response.data.message; | 1020 | this.text = error.response.data.message; |
| 1025 | this.color = "red"; | 1021 | this.color = "red"; |
| 1026 | this.loading = false; | 1022 | this.loading = false; |
| 1027 | }); | 1023 | }); |
| 1028 | } | 1024 | } |
| 1029 | }, | 1025 | }, |
| 1030 | selectAllowances() { | 1026 | selectAllowances() { |
| 1031 | this.salaryTypeData.push({ | 1027 | this.salaryTypeData.push({ |
| 1032 | allowancesValue: (this.salaryType.allowancesValue = ""), | 1028 | allowancesValue: (this.salaryType.allowancesValue = ""), |
| 1033 | }); | 1029 | }); |
| 1034 | // console.log("this.salaryTypeData", this.salaryTypeData); | 1030 | // console.log("this.salaryTypeData", this.salaryTypeData); |
| 1035 | var totalAllowances = ""; | 1031 | var totalAllowances = ""; |
| 1036 | this.salaryTypeData.forEach((allowancesValue_) => { | 1032 | this.salaryTypeData.forEach((allowancesValue_) => { |
| 1037 | if (allowancesValue_.allowancesValue != "") { | 1033 | if (allowancesValue_.allowancesValue != "") { |
| 1038 | // console.log("allowances", allowancesValue_.allowancesValue); | 1034 | // console.log("allowances", allowancesValue_.allowancesValue); |
| 1039 | totalAllowances = | 1035 | totalAllowances = |
| 1040 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1036 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1041 | } | 1037 | } |
| 1042 | this.grossSalary = | 1038 | this.grossSalary = |
| 1043 | totalAllowances + Number(this.salaryType.basicSalary); | 1039 | totalAllowances + Number(this.salaryType.basicSalary); |
| 1044 | }); | 1040 | }); |
| 1045 | }, | 1041 | }, |
| 1046 | allowancesAdd() { | 1042 | allowancesAdd() { |
| 1047 | this.editedItem.allowances.push({ | 1043 | this.editedItem.allowances.push({ |
| 1048 | allowancesValue: (this.salaryType.allowancesValue = ""), | 1044 | allowancesValue: (this.salaryType.allowancesValue = ""), |
| 1049 | }); | 1045 | }); |
| 1050 | var totalAllowances = ""; | 1046 | var totalAllowances = ""; |
| 1051 | this.editedItem.allowances.forEach((allowancesValue_) => { | 1047 | this.editedItem.allowances.forEach((allowancesValue_) => { |
| 1052 | if (allowancesValue_.allowancesValue != "") { | 1048 | if (allowancesValue_.allowancesValue != "") { |
| 1053 | // console.log("allowances", allowancesValue_.allowancesValue); | 1049 | // console.log("allowances", allowancesValue_.allowancesValue); |
| 1054 | totalAllowances = | 1050 | totalAllowances = |
| 1055 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1051 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1056 | // console.log("totalAllowances", totalAllowances); | 1052 | // console.log("totalAllowances", totalAllowances); |
| 1057 | } | 1053 | } |
| 1058 | this.editedItem.grossSalary = | 1054 | this.editedItem.grossSalary = |
| 1059 | totalAllowances + Number(this.editedItem.basicSalary); | 1055 | totalAllowances + Number(this.editedItem.basicSalary); |
| 1060 | // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); | 1056 | // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); |
| 1061 | }); | 1057 | }); |
| 1062 | }, | 1058 | }, |
| 1063 | selectDeduction() { | 1059 | selectDeduction() { |
| 1064 | this.salaryTypeDeductionData.push({ | 1060 | this.salaryTypeDeductionData.push({ |
| 1065 | deductionValue: (this.salaryType.deductionValue = ""), | 1061 | deductionValue: (this.salaryType.deductionValue = ""), |
| 1066 | }); | 1062 | }); |
| 1067 | var totalDeductions = ""; | 1063 | var totalDeductions = ""; |
| 1068 | this.salaryTypeDeductionData.forEach((deductionValue_) => { | 1064 | this.salaryTypeDeductionData.forEach((deductionValue_) => { |
| 1069 | if (deductionValue_.deductionValue != "") { | 1065 | if (deductionValue_.deductionValue != "") { |
| 1070 | // console.log("deduction", deductionValue_.deductionValue); | 1066 | // console.log("deduction", deductionValue_.deductionValue); |
| 1071 | totalDeductions = | 1067 | totalDeductions = |
| 1072 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1068 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1073 | } | 1069 | } |
| 1074 | }); | 1070 | }); |
| 1075 | }, | 1071 | }, |
| 1076 | deductionAdd() { | 1072 | deductionAdd() { |
| 1077 | this.editedItem.deduction.push({ | 1073 | this.editedItem.deduction.push({ |
| 1078 | deductionValue: (this.salaryType.deductionValue = ""), | 1074 | deductionValue: (this.salaryType.deductionValue = ""), |
| 1079 | }); | 1075 | }); |
| 1080 | var totalDeductions = ""; | 1076 | var totalDeductions = ""; |
| 1081 | this.editedItem.deduction.forEach((deductionValue_) => { | 1077 | this.editedItem.deduction.forEach((deductionValue_) => { |
| 1082 | if (deductionValue_.deductionValue != "") { | 1078 | if (deductionValue_.deductionValue != "") { |
| 1083 | // console.log("deduction", deductionValue_.deductionValue); | 1079 | // console.log("deduction", deductionValue_.deductionValue); |
| 1084 | totalDeductions = | 1080 | totalDeductions = |
| 1085 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1081 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1086 | // console.log("this.totalDeductions", totalDeductions); | 1082 | // console.log("this.totalDeductions", totalDeductions); |
| 1087 | } | 1083 | } |
| 1088 | // this.editedItem.totalDeduction = totalDeductions; | 1084 | // this.editedItem.totalDeduction = totalDeductions; |
| 1089 | // console.log("this.totalDeduction", this.editedItem.totalDeduction); | 1085 | // console.log("this.totalDeduction", this.editedItem.totalDeduction); |
| 1090 | }); | 1086 | }); |
| 1091 | }, | 1087 | }, |
| 1092 | deleteSelectAllowances: function (index) { | 1088 | deleteSelectAllowances: function (index) { |
| 1093 | this.salaryTypeData.splice(index, 1); | 1089 | this.salaryTypeData.splice(index, 1); |
| 1094 | }, | 1090 | }, |
| 1095 | deleteallowancesAdd: function (index) { | 1091 | deleteallowancesAdd: function (index) { |
| 1096 | this.editedItem.allowances.splice(index, 1); | 1092 | this.editedItem.allowances.splice(index, 1); |
| 1097 | }, | 1093 | }, |
| 1098 | deleteSelectDeduction: function (index) { | 1094 | deleteSelectDeduction: function (index) { |
| 1099 | this.salaryTypeDeductionData.splice(index, 1); | 1095 | this.salaryTypeDeductionData.splice(index, 1); |
| 1100 | }, | 1096 | }, |
| 1101 | deletedeductionAdd: function (index) { | 1097 | deletedeductionAdd: function (index) { |
| 1102 | this.editedItem.deduction.splice(index, 1); | 1098 | this.editedItem.deduction.splice(index, 1); |
| 1103 | }, | 1099 | }, |
| 1104 | clear() { | 1100 | clear() { |
| 1105 | this.$refs.form.reset(); | 1101 | this.$refs.form.reset(); |
| 1106 | this.disable = false; | 1102 | this.disable = false; |
| 1107 | }, | 1103 | }, |
| 1108 | save() { | 1104 | save() { |
| 1109 | var updateSalary = { | 1105 | var updateSalary = { |
| 1110 | salaryId: this.editedItem._id, | 1106 | salaryId: this.editedItem._id, |
| 1111 | salaryGrades: this.editedItem.salaryGrades, | 1107 | salaryGrades: this.editedItem.salaryGrades, |
| 1112 | basicSalary: this.editedItem.basicSalary, | 1108 | basicSalary: this.editedItem.basicSalary, |
| 1113 | overtimeRate: this.editedItem.overtimeRate, | 1109 | overtimeRate: this.editedItem.overtimeRate, |
| 1114 | allowances: this.salaryTypeData, | 1110 | allowances: this.salaryTypeData, |
| 1115 | deduction: this.salaryTypeDeductionData, | 1111 | deduction: this.salaryTypeDeductionData, |
| 1116 | grossSalary: this.editedItem.grossSalary, | 1112 | grossSalary: this.editedItem.grossSalary, |
| 1117 | totalDeduction: this.editedItem.totalDeduction, | 1113 | totalDeduction: this.editedItem.totalDeduction, |
| 1118 | netSalary: this.editedItem.netSalary, | 1114 | netSalary: this.editedItem.netSalary, |
| 1119 | }; | 1115 | }; |
| 1120 | http() | 1116 | http() |
| 1121 | .put("/updateSalary", updateSalary) | 1117 | .put("/updateSalary", updateSalary) |
| 1122 | .then((response) => { | 1118 | .then((response) => { |
| 1123 | this.snackbar = true; | 1119 | this.snackbar = true; |
| 1124 | this.text = response.data.message; | 1120 | this.text = response.data.message; |
| 1125 | this.color = "green"; | 1121 | this.color = "green"; |
| 1126 | this.getSalaryList(); | 1122 | this.getSalaryList(); |
| 1127 | this.close(); | 1123 | this.close(); |
| 1128 | }) | 1124 | }) |
| 1129 | .catch((error) => { | 1125 | .catch((error) => { |
| 1130 | this.snackbar = true; | 1126 | this.snackbar = true; |
| 1131 | this.text = error.response.data.message; | 1127 | this.text = error.response.data.message; |
| 1132 | this.color = "red"; | 1128 | this.color = "red"; |
| 1133 | }); | 1129 | }); |
| 1134 | }, | 1130 | }, |
| 1135 | displaySearch() { | 1131 | displaySearch() { |
| 1136 | (this.show = false), (this.showSearch = true); | 1132 | (this.show = false), (this.showSearch = true); |
| 1137 | }, | 1133 | }, |
| 1138 | closeSearch() { | 1134 | closeSearch() { |
| 1139 | this.showSearch = false; | 1135 | this.showSearch = false; |
| 1140 | this.show = true; | 1136 | this.show = true; |
| 1141 | this.search = ""; | 1137 | this.search = ""; |
| 1142 | }, | 1138 | }, |
| 1143 | addSalary: function () { | 1139 | addSalary: function () { |
| 1144 | var showSalary = this.salaryType.basicSalary; | 1140 | var showSalary = this.salaryType.basicSalary; |
| 1145 | this.grossSalary = showSalary; | 1141 | this.grossSalary = showSalary; |
| 1146 | // console.log("salary", this.grossSalary); | 1142 | // console.log("salary", this.grossSalary); |
| 1147 | }, | 1143 | }, |
| 1148 | addAllowances: function () { | 1144 | addAllowances: function () { |
| 1149 | var totalAllowances = ""; | 1145 | var totalAllowances = ""; |
| 1150 | this.salaryTypeData.forEach((allowancesValue_) => { | 1146 | this.salaryTypeData.forEach((allowancesValue_) => { |
| 1151 | if (allowancesValue_.allowancesValue != "") { | 1147 | if (allowancesValue_.allowancesValue != "") { |
| 1152 | totalAllowances = | 1148 | totalAllowances = |
| 1153 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1149 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1154 | } | 1150 | } |
| 1155 | this.grossSalary = | 1151 | this.grossSalary = |
| 1156 | totalAllowances + | 1152 | totalAllowances + |
| 1157 | Number(this.salaryType.basicSalary) + | 1153 | Number(this.salaryType.basicSalary) + |
| 1158 | Number(this.salaryType.allowancesValue); | 1154 | Number(this.salaryType.allowancesValue); |
| 1159 | }); | 1155 | }); |
| 1160 | }, | 1156 | }, |
| 1161 | addAllowancesValue: function () { | 1157 | addAllowancesValue: function () { |
| 1162 | var totalAllowances = ""; | 1158 | var totalAllowances = ""; |
| 1163 | this.editedItem.allowances.forEach((allowancesValue_) => { | 1159 | this.editedItem.allowances.forEach((allowancesValue_) => { |
| 1164 | if (allowancesValue_.allowancesValue != "") { | 1160 | if (allowancesValue_.allowancesValue != "") { |
| 1165 | totalAllowances = | 1161 | totalAllowances = |
| 1166 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1162 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1167 | } | 1163 | } |
| 1168 | this.grossSalary = | 1164 | this.grossSalary = |
| 1169 | totalAllowances + | 1165 | totalAllowances + |
| 1170 | Number(this.editedItem.basicSalary) + | 1166 | Number(this.editedItem.basicSalary) + |
| 1171 | Number(this.editedItem.allowancesValue); | 1167 | Number(this.editedItem.allowancesValue); |
| 1172 | }); | 1168 | }); |
| 1173 | }, | 1169 | }, |
| 1174 | addDeduction: function () { | 1170 | addDeduction: function () { |
| 1175 | // console.log( | 1171 | // console.log( |
| 1176 | // "this.salaryType.deductionValue", | 1172 | // "this.salaryType.deductionValue", |
| 1177 | // this.salaryType.deductionValue | 1173 | // this.salaryType.deductionValue |
| 1178 | // ); | 1174 | // ); |
| 1179 | var totalDeductions = ""; | 1175 | var totalDeductions = ""; |
| 1180 | this.salaryTypeDeductionData.forEach((deductionValue_) => { | 1176 | this.salaryTypeDeductionData.forEach((deductionValue_) => { |
| 1181 | if (deductionValue_.deductionValue != "") { | 1177 | if (deductionValue_.deductionValue != "") { |
| 1182 | totalDeductions = | 1178 | totalDeductions = |
| 1183 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1179 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1184 | } | 1180 | } |
| 1185 | }); | 1181 | }); |
| 1186 | // console.log("deduction", totalDeductions); | 1182 | // console.log("deduction", totalDeductions); |
| 1187 | this.totalDeduction = totalDeductions; | 1183 | this.totalDeduction = totalDeductions; |
| 1188 | this.salaryType.netSalary = this.grossSalary - this.totalDeduction; | 1184 | this.salaryType.netSalary = this.grossSalary - this.totalDeduction; |
| 1189 | }, | 1185 | }, |
| 1190 | addDeductionValue: function () { | 1186 | addDeductionValue: function () { |
| 1191 | var totalDeductions = ""; | 1187 | var totalDeductions = ""; |
| 1192 | this.editedItem.deduction.forEach((deductionValue_) => { | 1188 | this.editedItem.deduction.forEach((deductionValue_) => { |
| 1193 | if (deductionValue_.deductionValue != "") { | 1189 | if (deductionValue_.deductionValue != "") { |
| 1194 | totalDeductions = | 1190 | totalDeductions = |
| 1195 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1191 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1196 | } | 1192 | } |
| 1197 | // this.totalDeduction = totalDeductions; | 1193 | // this.totalDeduction = totalDeductions; |
| 1198 | // console.log("this.totalDeductions", this.totalDeduction); | 1194 | // console.log("this.totalDeductions", this.totalDeduction); |
| 1199 | }); | 1195 | }); |
| 1200 | this.editedItem.totalDeduction = totalDeductions; | 1196 | this.editedItem.totalDeduction = totalDeductions; |
| 1201 | this.editedItem.netSalary = | 1197 | this.editedItem.netSalary = |
| 1202 | this.editedItem.grossSalary - this.editedItem.totalDeduction; | 1198 | this.editedItem.grossSalary - this.editedItem.totalDeduction; |
| 1203 | }, | 1199 | }, |
| 1204 | }, | 1200 | }, |
| 1205 | 1201 | ||
| 1206 | mounted() { | 1202 | mounted() { |
| 1207 | this.token = this.$store.state.token; | 1203 | this.token = this.$store.state.token; |
| 1208 | this.getSalaryList(); | 1204 | this.getSalaryList(); |
| 1209 | }, | 1205 | }, |
| 1210 | }; | 1206 | }; |
| 1211 | </script> | 1207 | </script> |
| 1212 | 1208 | ||
| 1213 | <style scoped> | 1209 | <style scoped> |
src/pages/Section/section.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-dialog v-model="editSectionDialog" max-width="460px" persistent> | 3 | <v-dialog v-model="editSectionDialog" max-width="460px" persistent> |
| 4 | <v-card flat class="card-style pa-2" dark> | 4 | <v-card flat class="Card-style pa-2"> |
| 5 | <v-layout> | 5 | <v-layout> |
| 6 | <v-flex xs12> | 6 | <v-flex xs12> |
| 7 | <label class="title text-xs-center">Edit Section</label> | 7 | <label class="title text-xs-center">Edit Section</label> |
| 8 | <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon> | 8 | <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | </v-layout> | 10 | </v-layout> |
| 11 | <v-container fluid> | 11 | <v-container fluid> |
| 12 | <v-layout wrap justify-center> | 12 | <v-layout wrap justify-center> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-form> | 14 | <v-form> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs5 sm4 class="pt-4 subheading"> | 16 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 17 | <label class="right">Class :</label> | 17 | <label class="right">Class :</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs7 sm8> | 19 | <v-flex xs7 sm8> |
| 20 | <v-autocomplete | 20 | <v-autocomplete |
| 21 | :items="addclass" | 21 | :items="addclass" |
| 22 | :label="editedItem.classData.classNum" | 22 | :label="editedItem.classData.classNum" |
| 23 | v-model="editItem.classId" | 23 | v-model="editItem.classId" |
| 24 | item-text="classNum" | 24 | item-text="classNum" |
| 25 | item-value="_id" | 25 | item-value="_id" |
| 26 | class="ml-2" | 26 | class="ml-2" |
| 27 | ></v-autocomplete> | 27 | ></v-autocomplete> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | </v-layout> | 29 | </v-layout> |
| 30 | <v-layout> | 30 | <v-layout> |
| 31 | <v-flex xs5 sm4 class="pt-4 subheading"> | 31 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 32 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5> | 32 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5> |
| 33 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5> | 33 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 sm8> | 35 | <v-flex xs7 sm8> |
| 36 | <v-autocomplete | 36 | <v-autocomplete |
| 37 | v-model="editedItem.name" | 37 | v-model="editedItem.name" |
| 38 | placeholder="fill your Section Name" | 38 | placeholder="fill your Section Name" |
| 39 | :items="SectionName" | 39 | :items="SectionName" |
| 40 | class="ml-2" | 40 | class="ml-2" |
| 41 | ></v-autocomplete> | 41 | ></v-autocomplete> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs5 sm4 class="pt-4 subheading"> | 45 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 46 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5> | 46 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5> |
| 47 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5> | 47 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs7 sm8> | 49 | <v-flex xs7 sm8> |
| 50 | <v-select | 50 | <v-select |
| 51 | :items="teacherList" | 51 | :items="teacherList" |
| 52 | v-model="editedItem.classInchargeId" | 52 | v-model="editedItem.classInchargeId" |
| 53 | :label="editedItem.teacherData[0].name" | 53 | :label="editedItem.teacherData[0].name" |
| 54 | item-text="name" | 54 | item-text="name" |
| 55 | item-value="_id" | 55 | item-value="_id" |
| 56 | class="ml-2" | 56 | class="ml-2" |
| 57 | ></v-select> | 57 | ></v-select> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <v-card-actions> | 61 | <v-card-actions> |
| 62 | <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn> | 62 | <v-btn round dark @click.native="closeSectionDialog" class="cancel-btn">Cancel</v-btn> |
| 63 | <v-spacer></v-spacer> | 63 | <v-spacer></v-spacer> |
| 64 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 64 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 65 | </v-card-actions> | 65 | </v-card-actions> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | </v-form> | 67 | </v-form> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-container> | 70 | </v-container> |
| 71 | </v-card> | 71 | </v-card> |
| 72 | </v-dialog> | 72 | </v-dialog> |
| 73 | 73 | ||
| 74 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> | 74 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> |
| 75 | 75 | ||
| 76 | <v-dialog v-model="viewSectionDialog" max-width="500px" persistent> | 76 | <v-dialog v-model="viewSectionDialog" max-width="500px" persistent> |
| 77 | <v-card flat class="card-style pa-3" dark> | 77 | <v-card flat class="Card-style pa-3"> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs12> | 79 | <v-flex xs12> |
| 80 | <label class="title text-xs-center">View Section</label> | 80 | <label class="title text-xs-center">View Section</label> |
| 81 | <v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon> | 81 | <v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon> |
| 82 | </v-flex> | 82 | </v-flex> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | <v-card-text> | 84 | <v-card-text> |
| 85 | <v-container grid-list-md> | 85 | <v-container grid-list-md> |
| 86 | <v-layout wrap> | 86 | <v-layout wrap> |
| 87 | <v-flex> | 87 | <v-flex> |
| 88 | <v-layout> | 88 | <v-layout> |
| 89 | <v-flex xs7 sm6> | 89 | <v-flex xs7 sm6> |
| 90 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 90 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 91 | <b>Class Name :</b> | 91 | <b>Class Name :</b> |
| 92 | </h5> | 92 | </h5> |
| 93 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> | 93 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> |
| 94 | <b>Class :</b> | 94 | <b>Class :</b> |
| 95 | </h5> | 95 | </h5> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex sm6 xs5> | 97 | <v-flex sm6 xs5> |
| 98 | <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> | 98 | <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | </v-layout> | 100 | </v-layout> |
| 101 | <v-layout> | 101 | <v-layout> |
| 102 | <v-flex xs7 sm6> | 102 | <v-flex xs7 sm6> |
| 103 | <h5 class="right my-1"> | 103 | <h5 class="right my-1"> |
| 104 | <b>Section Name :</b> | 104 | <b>Section Name :</b> |
| 105 | </h5> | 105 | </h5> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex sm6 xs5> | 107 | <v-flex sm6 xs5> |
| 108 | <h5 class="my-1">{{ editedItem.name }}</h5> | 108 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs7 sm6> | 112 | <v-flex xs7 sm6> |
| 113 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 113 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 114 | <b>Class Incharge :</b> | 114 | <b>Class Incharge :</b> |
| 115 | </h5> | 115 | </h5> |
| 116 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> | 116 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> |
| 117 | <b>Incharge :</b> | 117 | <b>Incharge :</b> |
| 118 | </h5> | 118 | </h5> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex sm6 xs5> | 120 | <v-flex sm6 xs5> |
| 121 | <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> | 121 | <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout> | 124 | <v-layout> |
| 125 | <v-flex xs7 sm6> | 125 | <v-flex xs7 sm6> |
| 126 | <h5 class="right my-1"> | 126 | <h5 class="right my-1"> |
| 127 | <b>Session :</b> | 127 | <b>Session :</b> |
| 128 | </h5> | 128 | </h5> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex sm6 xs5> | 130 | <v-flex sm6 xs5> |
| 131 | <h5 class="my-1">{{ editedItem.session }}</h5> | 131 | <h5 class="my-1">{{ editedItem.session }}</h5> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | </v-layout> | 135 | </v-layout> |
| 136 | </v-container> | 136 | </v-container> |
| 137 | </v-card-text> | 137 | </v-card-text> |
| 138 | </v-card> | 138 | </v-card> |
| 139 | </v-dialog> | 139 | </v-dialog> |
| 140 | <!-- ****** Section Table ****** --> | 140 | <!-- ****** Section Table ****** --> |
| 141 | <v-toolbar color="transparent" flat> | 141 | <v-toolbar color="transparent" flat> |
| 142 | <v-btn | 142 | <v-btn |
| 143 | fab | 143 | fab |
| 144 | dark | 144 | dark |
| 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 146 | small | 146 | small |
| 147 | @click="addSectionDialog = true" | 147 | @click="addSectionDialog = true" |
| 148 | > | 148 | > |
| 149 | <v-icon dark>add</v-icon> | 149 | <v-icon dark>add</v-icon> |
| 150 | </v-btn> | 150 | </v-btn> |
| 151 | <v-btn | 151 | <v-btn |
| 152 | round | 152 | round |
| 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 154 | dark | 154 | dark |
| 155 | @click="addSectionDialog = true" | 155 | @click="addSectionDialog = true" |
| 156 | > | 156 | > |
| 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section | 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section |
| 158 | </v-btn> | 158 | </v-btn> |
| 159 | <v-spacer></v-spacer> | 159 | <v-spacer></v-spacer> |
| 160 | <v-card-title class="body-1" v-show="show"> | 160 | <v-card-title class="body-1" v-show="show"> |
| 161 | <v-btn icon large flat @click="displaySearch"> | 161 | <v-btn icon large flat @click="displaySearch"> |
| 162 | <v-avatar size="27"> | 162 | <v-avatar size="27"> |
| 163 | <img src="/static/icon/search.png" alt="icon" /> | 163 | <img src="/static/icon/search.png" alt="icon" /> |
| 164 | </v-avatar> | 164 | </v-avatar> |
| 165 | </v-btn> | 165 | </v-btn> |
| 166 | </v-card-title> | 166 | </v-card-title> |
| 167 | <v-flex xs8 v-if="showSearch"> | 167 | <v-flex xs8 v-if="showSearch"> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-text-field | 169 | <v-text-field |
| 170 | autofocus | 170 | autofocus |
| 171 | v-model="search" | 171 | v-model="search" |
| 172 | label="Search" | 172 | label="Search" |
| 173 | prepend-inner-icon="search" | 173 | prepend-inner-icon="search" |
| 174 | color="primary" | 174 | color="primary" |
| 175 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 175 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 176 | ></v-text-field> | 176 | ></v-text-field> |
| 177 | <v-icon @click="closeSearch" color="error">close</v-icon> | 177 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-toolbar> | 180 | </v-toolbar> |
| 181 | <v-data-table | 181 | <v-data-table |
| 182 | :headers="headers" | 182 | :headers="headers" |
| 183 | :items="sectionList" | 183 | :items="sectionList" |
| 184 | :pagination.sync="pagination" | 184 | :pagination.sync="pagination" |
| 185 | :search="search" | 185 | :search="search" |
| 186 | > | 186 | > |
| 187 | <template slot="items" slot-scope="props"> | 187 | <template slot="items" slot-scope="props"> |
| 188 | <tr class="tr"> | 188 | <tr class="tr"> |
| 189 | <td class="td td-row">{{ props.index + 1 }}</td> | 189 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 190 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> | 190 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> |
| 191 | <td class="text-xs-center td td-row">{{ props.item.name }}</td> | 191 | <td class="text-xs-center td td-row">{{ props.item.name }}</td> |
| 192 | <td class="text-xs-center td td-row">{{ props.item.session }}</td> | 192 | <td class="text-xs-center td td-row">{{ props.item.session }}</td> |
| 193 | <td class="text-xs-center td td-row"> | 193 | <td class="text-xs-center td td-row"> |
| 194 | <span> | 194 | <span> |
| 195 | <v-tooltip top> | 195 | <v-tooltip top> |
| 196 | <img | 196 | <img |
| 197 | slot="activator" | 197 | slot="activator" |
| 198 | style="cursor:pointer; width:25px; height:25px;" | 198 | style="cursor:pointer; width:25px; height:25px;" |
| 199 | class="mr-3" | 199 | class="mr-3" |
| 200 | @click="profile(props.item)" | 200 | @click="profile(props.item)" |
| 201 | src="/static/icon/view.png" | 201 | src="/static/icon/view.png" |
| 202 | /> | 202 | /> |
| 203 | <span>View</span> | 203 | <span>View</span> |
| 204 | </v-tooltip> | 204 | </v-tooltip> |
| 205 | <v-tooltip top> | 205 | <v-tooltip top> |
| 206 | <img | 206 | <img |
| 207 | slot="activator" | 207 | slot="activator" |
| 208 | style="cursor:pointer; width:20px; height:18px; " | 208 | style="cursor:pointer; width:20px; height:18px; " |
| 209 | class="mr-3" | 209 | class="mr-3" |
| 210 | @click="editItem(props.item)" | 210 | @click="editItem(props.item)" |
| 211 | src="/static/icon/edit.png" | 211 | src="/static/icon/edit.png" |
| 212 | /> | 212 | /> |
| 213 | <span>Edit</span> | 213 | <span>Edit</span> |
| 214 | </v-tooltip> | 214 | </v-tooltip> |
| 215 | <!-- <v-tooltip top> | 215 | <!-- <v-tooltip top> |
| 216 | <img | 216 | <img |
| 217 | slot="activator" | 217 | slot="activator" |
| 218 | style="cursor:pointer; width:20px; height:20px; " | 218 | style="cursor:pointer; width:20px; height:20px; " |
| 219 | @click="deleteItem(props.item)" | 219 | @click="deleteItem(props.item)" |
| 220 | src="/static/icon/delete.png" | 220 | src="/static/icon/delete.png" |
| 221 | class="mr-3" | 221 | class="mr-3" |
| 222 | /> | 222 | /> |
| 223 | <span>Delete</span> | 223 | <span>Delete</span> |
| 224 | </v-tooltip>--> | 224 | </v-tooltip>--> |
| 225 | </span> | 225 | </span> |
| 226 | </td> | 226 | </td> |
| 227 | </tr> | 227 | </tr> |
| 228 | </template> | 228 | </template> |
| 229 | <v-alert | 229 | <v-alert |
| 230 | slot="no-results" | 230 | slot="no-results" |
| 231 | :value="true" | 231 | :value="true" |
| 232 | color="error" | 232 | color="error" |
| 233 | icon="warning" | 233 | icon="warning" |
| 234 | >Your search for "{{ search }}" found no results.</v-alert> | 234 | >Your search for "{{ search }}" found no results.</v-alert> |
| 235 | </v-data-table> | 235 | </v-data-table> |
| 236 | <!-- </v-tab-item> --> | 236 | <!-- </v-tab-item> --> |
| 237 | 237 | ||
| 238 | <!-- DIALOG BOX - ADD Students Dialog box --> | 238 | <!-- DIALOG BOX - ADD Students Dialog box --> |
| 239 | <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog" persistent> | 239 | <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog" persistent> |
| 240 | <v-card flat class="card-style pa-2" dark> | 240 | <v-card flat class="Card-style pa-2"> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-flex xs12> | 242 | <v-flex xs12> |
| 243 | <label class="title text-xs-center">Add Section</label> | 243 | <label class="title text-xs-center">Add Section</label> |
| 244 | <v-icon | 244 | <v-icon |
| 245 | size="24" | 245 | size="24" |
| 246 | class="right" | 246 | class="right" |
| 247 | @click="$refs.form.reset();addSectionDialog = false" | 247 | @click="$refs.form.reset();addSectionDialog = false" |
| 248 | >cancel</v-icon> | 248 | >cancel</v-icon> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | </v-layout> | 250 | </v-layout> |
| 251 | <v-container fluid fill-height> | 251 | <v-container fluid fill-height> |
| 252 | <v-layout align-center> | 252 | <v-layout align-center> |
| 253 | <v-flex xs12> | 253 | <v-flex xs12> |
| 254 | <v-form ref="form" v-model="valid" lazy-validation> | 254 | <v-form ref="form" v-model="valid" lazy-validation> |
| 255 | <v-layout> | 255 | <v-layout> |
| 256 | <v-flex xs4 class="pt-4 subheading"> | 256 | <v-flex xs4 class="pt-4 subheading"> |
| 257 | <label class="right">Section :</label> | 257 | <label class="right">Section :</label> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | <v-flex xs8 class="ml-3"> | 259 | <v-flex xs8 class="ml-3"> |
| 260 | <v-autocomplete | 260 | <v-autocomplete |
| 261 | v-model="sectionData.name" | 261 | v-model="sectionData.name" |
| 262 | placeholder="fill your Section Name" | 262 | placeholder="fill your Section Name" |
| 263 | :items="SectionName" | 263 | :items="SectionName" |
| 264 | :rules="nameRules" | 264 | :rules="nameRules" |
| 265 | required | 265 | required |
| 266 | ></v-autocomplete> | 266 | ></v-autocomplete> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | </v-layout> | 268 | </v-layout> |
| 269 | <v-layout> | 269 | <v-layout> |
| 270 | <v-flex xs4 class="pt-4 subheading"> | 270 | <v-flex xs4 class="pt-4 subheading"> |
| 271 | <label class="right">Class :</label> | 271 | <label class="right">Class :</label> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | <v-flex xs8 class="ml-3"> | 273 | <v-flex xs8 class="ml-3"> |
| 274 | <v-select | 274 | <v-select |
| 275 | :items="addclass" | 275 | :items="addclass" |
| 276 | label="Select Class" | 276 | label="Select Class" |
| 277 | v-model="sectionData.classNum" | 277 | v-model="sectionData.classNum" |
| 278 | item-text="classNum" | 278 | item-text="classNum" |
| 279 | item-value="_id" | 279 | item-value="_id" |
| 280 | name="Select Class" | 280 | name="Select Class" |
| 281 | :rules="classRules" | 281 | :rules="classRules" |
| 282 | required | 282 | required |
| 283 | ></v-select> | 283 | ></v-select> |
| 284 | </v-flex> | 284 | </v-flex> |
| 285 | </v-layout> | 285 | </v-layout> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-flex xs4 class="pt-4 subheading"> | 287 | <v-flex xs4 class="pt-4 subheading"> |
| 288 | <label class="right">Incharge :</label> | 288 | <label class="right">Incharge :</label> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | <v-flex xs8 class="ml-3"> | 290 | <v-flex xs8 class="ml-3"> |
| 291 | <v-select | 291 | <v-select |
| 292 | :items="teacherList" | 292 | :items="teacherList" |
| 293 | label="Select Incharge" | 293 | label="Select Incharge" |
| 294 | v-model="sectionData.sectionId" | 294 | v-model="sectionData.sectionId" |
| 295 | item-text="name" | 295 | item-text="name" |
| 296 | item-value="_id" | 296 | item-value="_id" |
| 297 | name="Select Class" | 297 | name="Select Class" |
| 298 | :rules="inchargeRules" | 298 | :rules="inchargeRules" |
| 299 | required | 299 | required |
| 300 | ></v-select> | 300 | ></v-select> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | <v-layout> | 303 | <v-layout> |
| 304 | <v-flex xs4 class="pt-4 subheading"> | 304 | <v-flex xs4 class="pt-4 subheading"> |
| 305 | <label class="right">Session:</label> | 305 | <label class="right">Session:</label> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | <v-flex xs8 class="ml-3"> | 307 | <v-flex xs8 class="ml-3"> |
| 308 | <v-text-field | 308 | <v-text-field |
| 309 | v-model="sectionData.session" | 309 | v-model="sectionData.session" |
| 310 | placeholder="fill your Session" | 310 | placeholder="fill your Session" |
| 311 | name="name" | 311 | name="name" |
| 312 | type="text" | 312 | type="text" |
| 313 | :rules="sessionRules" | 313 | :rules="sessionRules" |
| 314 | required | 314 | required |
| 315 | ></v-text-field> | 315 | ></v-text-field> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | <v-layout> | 318 | <v-layout> |
| 319 | <v-flex xs12 sm12> | 319 | <v-flex xs12 sm12> |
| 320 | <v-card-actions> | 320 | <v-card-actions> |
| 321 | <v-btn @click="clear" class="clear-button" round dark>Clear</v-btn> | 321 | <v-btn @click="clear" class="clear-button" round dark>Clear</v-btn> |
| 322 | <v-spacer></v-spacer> | 322 | <v-spacer></v-spacer> |
| 323 | <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> | 323 | <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> |
| 324 | </v-card-actions> | 324 | </v-card-actions> |
| 325 | </v-flex> | 325 | </v-flex> |
| 326 | </v-layout> | 326 | </v-layout> |
| 327 | </v-form> | 327 | </v-form> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | </v-layout> | 329 | </v-layout> |
| 330 | </v-container> | 330 | </v-container> |
| 331 | </v-card> | 331 | </v-card> |
| 332 | </v-dialog> | 332 | </v-dialog> |
| 333 | <v-snackbar | 333 | <v-snackbar |
| 334 | :timeout="timeout" | 334 | :timeout="timeout" |
| 335 | :top="y === 'top'" | 335 | :top="y === 'top'" |
| 336 | :right="x === 'right'" | 336 | :right="x === 'right'" |
| 337 | :vertical="mode === 'vertical'" | 337 | :vertical="mode === 'vertical'" |
| 338 | v-model="snackbar" | 338 | v-model="snackbar" |
| 339 | :color="color" | 339 | :color="color" |
| 340 | >{{ text }}</v-snackbar> | 340 | >{{ text }}</v-snackbar> |
| 341 | <div class="loader" v-if="showLoader"> | 341 | <div class="loader" v-if="showLoader"> |
| 342 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 342 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 343 | </div> | 343 | </div> |
| 344 | </v-container> | 344 | </v-container> |
| 345 | </template> | 345 | </template> |
| 346 | 346 | ||
| 347 | <script> | 347 | <script> |
| 348 | import http from "@/Services/http.js"; | 348 | import http from "@/Services/http.js"; |
| 349 | // import { apiCollection } from "@/schoolApi/apiCollection"; | 349 | // import { apiCollection } from "@/schoolApi/apiCollection"; |
| 350 | // const getSectionData = apiCollection.get("posts"); | 350 | // const getSectionData = apiCollection.get("posts"); |
| 351 | 351 | ||
| 352 | export default { | 352 | export default { |
| 353 | data: () => ({ | 353 | data: () => ({ |
| 354 | snackbar: false, | 354 | snackbar: false, |
| 355 | y: "top", | 355 | y: "top", |
| 356 | x: "right", | 356 | x: "right", |
| 357 | mode: "", | 357 | mode: "", |
| 358 | timeout: 5000, | 358 | timeout: 5000, |
| 359 | text: "", | 359 | text: "", |
| 360 | color: "", | 360 | color: "", |
| 361 | show: true, | 361 | show: true, |
| 362 | showSearch: false, | 362 | showSearch: false, |
| 363 | showLoader: false, | 363 | showLoader: false, |
| 364 | loading: false, | 364 | loading: false, |
| 365 | date: null, | 365 | date: null, |
| 366 | search: "", | 366 | search: "", |
| 367 | editSectionDialog: false, | 367 | editSectionDialog: false, |
| 368 | viewSectionDialog: false, | 368 | viewSectionDialog: false, |
| 369 | valid: true, | 369 | valid: true, |
| 370 | validEdit: true, | 370 | validEdit: true, |
| 371 | addSectionDialog: false, | 371 | addSectionDialog: false, |
| 372 | editLoading: false, | 372 | editLoading: false, |
| 373 | details: [], | 373 | details: [], |
| 374 | pagination: { | 374 | pagination: { |
| 375 | rowsPerPage: 10, | 375 | rowsPerPage: 10, |
| 376 | }, | 376 | }, |
| 377 | nameRules: [(v) => !!v || " Section Name is required"], | 377 | nameRules: [(v) => !!v || " Section Name is required"], |
| 378 | classRules: [(v) => !!v || " Class Name is required"], | 378 | classRules: [(v) => !!v || " Class Name is required"], |
| 379 | sessionRules: [(v) => !!v || " Session is required"], | 379 | sessionRules: [(v) => !!v || " Session is required"], |
| 380 | inchargeRules: [(v) => !!v || " Incharge Name is required"], | 380 | inchargeRules: [(v) => !!v || " Incharge Name is required"], |
| 381 | SectionName: ["A", "B", "C", "D", "E", "F"], | 381 | SectionName: ["A", "B", "C", "D", "E", "F"], |
| 382 | headers: [ | 382 | headers: [ |
| 383 | { | 383 | { |
| 384 | text: "No", | 384 | text: "No", |
| 385 | align: "", | 385 | align: "", |
| 386 | sortable: false, | 386 | sortable: false, |
| 387 | value: "No", | 387 | value: "No", |
| 388 | }, | 388 | }, |
| 389 | { | 389 | { |
| 390 | text: "Class Name", | 390 | text: "Class Name", |
| 391 | value: "classData.classNum", | 391 | value: "classData.classNum", |
| 392 | sortable: false, | 392 | sortable: false, |
| 393 | align: "center", | 393 | align: "center", |
| 394 | }, | 394 | }, |
| 395 | { text: "Section Name", value: "name", sortable: false, align: "center" }, | 395 | { text: "Section Name", value: "name", sortable: false, align: "center" }, |
| 396 | { text: "Session", value: "session", sortable: false, align: "center" }, | 396 | { text: "Session", value: "session", sortable: false, align: "center" }, |
| 397 | { text: "Action", value: "", sortable: false, align: "center" }, | 397 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 398 | ], | 398 | ], |
| 399 | sectionList: [], | 399 | sectionList: [], |
| 400 | addclass: [], | 400 | addclass: [], |
| 401 | teacherList: [], | 401 | teacherList: [], |
| 402 | select: "", | 402 | select: "", |
| 403 | selectId: "", | 403 | selectId: "", |
| 404 | token: "", | 404 | token: "", |
| 405 | editedIndex: -1, | 405 | editedIndex: -1, |
| 406 | editedItem: { | 406 | editedItem: { |
| 407 | classData: { | 407 | classData: { |
| 408 | classNum: "", | 408 | classNum: "", |
| 409 | }, | 409 | }, |
| 410 | teacherData: [ | 410 | teacherData: [ |
| 411 | { | 411 | { |
| 412 | name: "", | 412 | name: "", |
| 413 | }, | 413 | }, |
| 414 | ], | 414 | ], |
| 415 | // name: "", | 415 | // name: "", |
| 416 | // session: new Date().getFullYear() | 416 | // session: new Date().getFullYear() |
| 417 | }, | 417 | }, |
| 418 | sectionData: { | 418 | sectionData: { |
| 419 | session: new Date().getFullYear(), | 419 | session: new Date().getFullYear(), |
| 420 | }, | 420 | }, |
| 421 | }), | 421 | }), |
| 422 | watch: { | 422 | watch: { |
| 423 | addSectionDialog: function (val) { | 423 | addSectionDialog: function (val) { |
| 424 | if (!val) { | 424 | if (!val) { |
| 425 | this.sectionData = []; | 425 | this.sectionData = []; |
| 426 | } | 426 | } |
| 427 | }, | 427 | }, |
| 428 | }, | 428 | }, |
| 429 | methods: { | 429 | methods: { |
| 430 | getSectionList() { | 430 | getSectionList() { |
| 431 | // const { data } = await getSectionData.get(); | 431 | // const { data } = await getSectionData.get(); |
| 432 | this.showLoader = true; | 432 | this.showLoader = true; |
| 433 | http() | 433 | http() |
| 434 | .get("/getAllSections", { | 434 | .get("/getAllSections", { |
| 435 | headers: { Authorization: "Bearer " + this.token }, | 435 | headers: { Authorization: "Bearer " + this.token }, |
| 436 | }) | 436 | }) |
| 437 | .then((response) => { | 437 | .then((response) => { |
| 438 | this.sectionList = response.data.data; | 438 | this.sectionList = response.data.data; |
| 439 | this.showLoader = false; | 439 | this.showLoader = false; |
| 440 | // console.log("getAllSections=====>",response.data.data) | 440 | // console.log("getAllSections=====>",response.data.data) |
| 441 | }) | 441 | }) |
| 442 | .catch((error) => { | 442 | .catch((error) => { |
| 443 | this.showLoader = false; | 443 | this.showLoader = false; |
| 444 | if (error.response.status === 401) { | 444 | if (error.response.status === 401) { |
| 445 | this.$router.replace({ path: "/" }); | 445 | this.$router.replace({ path: "/" }); |
| 446 | this.$store.dispatch("setToken", null); | 446 | this.$store.dispatch("setToken", null); |
| 447 | this.$store.dispatch("Id", null); | 447 | this.$store.dispatch("Id", null); |
| 448 | } | 448 | } |
| 449 | }); | 449 | }); |
| 450 | }, | 450 | }, |
| 451 | editItem(item) { | 451 | editItem(item) { |
| 452 | this.editedIndex = this.sectionList.indexOf(item); | 452 | this.editedIndex = this.sectionList.indexOf(item); |
| 453 | this.editedItem = Object.assign({}, item); | 453 | this.editedItem = Object.assign({}, item); |
| 454 | this.editSectionDialog = true; | 454 | this.editSectionDialog = true; |
| 455 | }, | 455 | }, |
| 456 | profile(item) { | 456 | profile(item) { |
| 457 | this.editedIndex = this.sectionList.indexOf(item); | 457 | this.editedIndex = this.sectionList.indexOf(item); |
| 458 | this.editedItem = Object.assign({}, item); | 458 | this.editedItem = Object.assign({}, item); |
| 459 | this.viewSectionDialog = true; | 459 | this.viewSectionDialog = true; |
| 460 | }, | 460 | }, |
| 461 | deleteItem(item) { | 461 | deleteItem(item) { |
| 462 | let deleteStudent = { | 462 | let deleteStudent = { |
| 463 | sectionId: item._id, | 463 | sectionId: item._id, |
| 464 | }; | 464 | }; |
| 465 | http() | 465 | http() |
| 466 | .delete( | 466 | .delete( |
| 467 | "/deleteSection", | 467 | "/deleteSection", |
| 468 | confirm("Are you sure you want to delete this?") && { | 468 | confirm("Are you sure you want to delete this?") && { |
| 469 | params: deleteStudent, | 469 | params: deleteStudent, |
| 470 | } | 470 | } |
| 471 | ) | 471 | ) |
| 472 | .then((response) => { | 472 | .then((response) => { |
| 473 | this.snackbar = true; | 473 | this.snackbar = true; |
| 474 | this.text = response.data.message; | 474 | this.text = response.data.message; |
| 475 | this.color = "green"; | 475 | this.color = "green"; |
| 476 | this.getSectionList(); | 476 | this.getSectionList(); |
| 477 | }) | 477 | }) |
| 478 | .catch((error) => { | 478 | .catch((error) => { |
| 479 | this.snackbar = true; | 479 | this.snackbar = true; |
| 480 | this.text = error.response.data.message; | 480 | this.text = error.response.data.message; |
| 481 | this.color = "green"; | 481 | this.color = "green"; |
| 482 | }); | 482 | }); |
| 483 | }, | 483 | }, |
| 484 | closeSectionDialog() { | 484 | closeSectionDialog() { |
| 485 | this.editSectionDialog = false; | 485 | this.editSectionDialog = false; |
| 486 | }, | 486 | }, |
| 487 | closeviewSectionDialog() { | 487 | closeviewSectionDialog() { |
| 488 | this.viewSectionDialog = false; | 488 | this.viewSectionDialog = false; |
| 489 | }, | 489 | }, |
| 490 | submit() { | 490 | submit() { |
| 491 | if (this.$refs.form.validate()) { | 491 | if (this.$refs.form.validate()) { |
| 492 | let addSection = { | 492 | let addSection = { |
| 493 | name: this.sectionData.name, | 493 | name: this.sectionData.name, |
| 494 | classId: this.sectionData.classNum, | 494 | classId: this.sectionData.classNum, |
| 495 | session: this.sectionData.session, | 495 | session: this.sectionData.session, |
| 496 | classInchargeId: this.sectionData.sectionId, | 496 | classInchargeId: this.sectionData.sectionId, |
| 497 | }; | 497 | }; |
| 498 | this.loading = true; | 498 | this.loading = true; |
| 499 | http() | 499 | http() |
| 500 | .post("/createSection", addSection) | 500 | .post("/createSection", addSection) |
| 501 | .then((response) => { | 501 | .then((response) => { |
| 502 | this.getSectionList(); | 502 | this.getSectionList(); |
| 503 | this.snackbar = true; | 503 | this.snackbar = true; |
| 504 | this.color = "green"; | 504 | this.color = "green"; |
| 505 | this.text = "New Section added successfully"; | 505 | this.text = "New Section added successfully"; |
| 506 | this.clear(); | 506 | this.clear(); |
| 507 | this.addSectionDialog = false; | 507 | this.addSectionDialog = false; |
| 508 | this.loading = false; | 508 | this.loading = false; |
| 509 | }) | 509 | }) |
| 510 | .catch((error) => { | 510 | .catch((error) => { |
| 511 | this.snackbar = true; | 511 | this.snackbar = true; |
| 512 | this.color = "error"; | 512 | this.color = "error"; |
| 513 | this.text = error.response.data.message; | 513 | this.text = error.response.data.message; |
| 514 | this.loading = false; | 514 | this.loading = false; |
| 515 | }); | 515 | }); |
| 516 | } | 516 | } |
| 517 | }, | 517 | }, |
| 518 | clear() { | 518 | clear() { |
| 519 | this.$refs.form.reset(); | 519 | this.$refs.form.reset(); |
| 520 | }, | 520 | }, |
| 521 | save() { | 521 | save() { |
| 522 | this.editedItem.sectionId = this.editedItem._id; | 522 | this.editedItem.sectionId = this.editedItem._id; |
| 523 | this.editLoading = true; | 523 | this.editLoading = true; |
| 524 | http() | 524 | http() |
| 525 | .put("/updateSection", this.editedItem) | 525 | .put("/updateSection", this.editedItem) |
| 526 | .then((response) => { | 526 | .then((response) => { |
| 527 | this.editLoading = false; | 527 | this.editLoading = false; |
| 528 | this.snackbar = true; | 528 | this.snackbar = true; |
| 529 | this.color = "green"; | 529 | this.color = "green"; |
| 530 | this.text = response.data.message; | 530 | this.text = response.data.message; |
| 531 | this.getSectionList(); | 531 | this.getSectionList(); |
| 532 | this.closeSectionDialog(); | 532 | this.closeSectionDialog(); |
| 533 | }) | 533 | }) |
| 534 | .catch((error) => { | 534 | .catch((error) => { |
| 535 | this.editLoading = false; | 535 | this.editLoading = false; |
| 536 | this.snackbar = true; | 536 | this.snackbar = true; |
| 537 | this.color = "error"; | 537 | this.color = "error"; |
| 538 | this.text = error.response.data.message; | 538 | this.text = error.response.data.message; |
| 539 | }); | 539 | }); |
| 540 | }, | 540 | }, |
| 541 | getAllTeacher() { | 541 | getAllTeacher() { |
| 542 | http() | 542 | http() |
| 543 | .get("/getTeachersList", { | 543 | .get("/getTeachersList", { |
| 544 | headers: { Authorization: "Bearer " + this.token }, | 544 | headers: { Authorization: "Bearer " + this.token }, |
| 545 | }) | 545 | }) |
| 546 | .then((response) => { | 546 | .then((response) => { |
| 547 | this.teacherList = response.data.data; | 547 | this.teacherList = response.data.data; |
| 548 | this.showLoader = false; | 548 | this.showLoader = false; |
| 549 | }) | 549 | }) |
| 550 | .catch((err) => { | 550 | .catch((err) => { |
| 551 | // console.log("err====>", err); | 551 | // console.log("err====>", err); |
| 552 | this.showLoader = false; | 552 | this.showLoader = false; |
| 553 | }); | 553 | }); |
| 554 | }, | 554 | }, |
| 555 | getAllClasses() { | 555 | getAllClasses() { |
| 556 | http() | 556 | http() |
| 557 | .get("/getClassesList", { | 557 | .get("/getClassesList", { |
| 558 | headers: { Authorization: "Bearer " + this.token }, | 558 | headers: { Authorization: "Bearer " + this.token }, |
| 559 | }) | 559 | }) |
| 560 | .then((response) => { | 560 | .then((response) => { |
| 561 | this.addclass = response.data.data; | 561 | this.addclass = response.data.data; |
| 562 | }) | 562 | }) |
| 563 | .catch((err) => { | 563 | .catch((err) => { |
| 564 | // console.log("err====>", err); | 564 | // console.log("err====>", err); |
| 565 | // this.$router.replace({ path: "/" }); | 565 | // this.$router.replace({ path: "/" }); |
| 566 | }); | 566 | }); |
| 567 | }, | 567 | }, |
| 568 | displaySearch() { | 568 | displaySearch() { |
| 569 | (this.show = false), (this.showSearch = true); | 569 | (this.show = false), (this.showSearch = true); |
| 570 | }, | 570 | }, |
| 571 | closeSearch() { | 571 | closeSearch() { |
| 572 | this.showSearch = false; | 572 | this.showSearch = false; |
| 573 | this.show = true; | 573 | this.show = true; |
| 574 | this.search = ""; | 574 | this.search = ""; |
| 575 | }, | 575 | }, |
| 576 | }, | 576 | }, |
| 577 | mounted() { | 577 | mounted() { |
| 578 | this.token = this.$store.state.token; | 578 | this.token = this.$store.state.token; |
| 579 | this.getSectionList(); | 579 | this.getSectionList(); |
| 580 | this.getAllClasses(); | 580 | this.getAllClasses(); |
| 581 | this.getAllTeacher(); | 581 | this.getAllTeacher(); |
| 582 | }, | 582 | }, |
| 583 | }; | 583 | }; |
| 584 | </script> | 584 | </script> |
| 585 | 585 |
src/pages/Students/students.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS STUDENTS DETAILS ****** --> | 3 | <!-- ****** EDITS STUDENTS DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent> | 4 | <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Student Details</label> | 8 | <label class="title text-xs-center">Edit Student Details</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> |
| 18 | <img src="/static/icon/user.png" /> | 18 | <img src="/static/icon/user.png" /> |
| 19 | </v-avatar> | 19 | </v-avatar> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.profilePicUrl" | 21 | :src="editedItem.profilePicUrl" |
| 22 | v-else-if="editedItem.profilePicUrl && !editImageUrl" | 22 | v-else-if="editedItem.profilePicUrl && !editImageUrl" |
| 23 | height="150" | 23 | height="150" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="editImageUrl" | 27 | v-if="editImageUrl" |
| 28 | :src="editImageUrl" | 28 | :src="editImageUrl" |
| 29 | style="border-radius:50%; width:150px;height:150px" | 29 | style="border-radius:50%; width:150px;height:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display: none" | 33 | style="display: none" |
| 34 | ref="editDataImage" | 34 | ref="editDataImage" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onEditFilePicked" | 36 | @change="onEditFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm4> | 41 | <v-flex xs12 sm4> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 class="pt-4 subheading"> | 43 | <v-flex xs4 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 class="ml-3"> | 47 | <v-flex xs8 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="addclass" | 49 | :items="addclass" |
| 50 | label="Select Class" | 50 | label="Select Class" |
| 51 | v-model="editedItem.select" | 51 | v-model="editedItem.select" |
| 52 | item-text="classNum" | 52 | item-text="classNum" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | name="Select Class" | 54 | name="Select Class" |
| 55 | @change="getSections(editedItem.select)" | 55 | @change="getSections(editedItem.select)" |
| 56 | required | 56 | required |
| 57 | ></v-select> | 57 | ></v-select> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs12 sm4> | 61 | <v-flex xs12 sm4> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 64 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 65 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 65 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | <v-flex xs8 class="ml-3"> | 67 | <v-flex xs8 class="ml-3"> |
| 68 | <v-select | 68 | <v-select |
| 69 | :items="addSection" | 69 | :items="addSection" |
| 70 | label="Select Section" | 70 | label="Select Section" |
| 71 | v-model="editedItem.selectSection" | 71 | v-model="editedItem.selectSection" |
| 72 | item-text="name" | 72 | item-text="name" |
| 73 | item-value="_id" | 73 | item-value="_id" |
| 74 | name="Select Section" | 74 | name="Select Section" |
| 75 | required | 75 | required |
| 76 | ></v-select> | 76 | ></v-select> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-layout> | 78 | </v-layout> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs12 sm4> | 80 | <v-flex xs12 sm4> |
| 81 | <v-layout> | 81 | <v-layout> |
| 82 | <v-flex xs4 class="pt-4 subheading"> | 82 | <v-flex xs4 class="pt-4 subheading"> |
| 83 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 83 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 84 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 84 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex xs8 class="ml-3"> | 86 | <v-flex xs8 class="ml-3"> |
| 87 | <v-text-field | 87 | <v-text-field |
| 88 | v-model="editedItem.name" | 88 | v-model="editedItem.name" |
| 89 | placeholder="fill your full Name" | 89 | placeholder="fill your full Name" |
| 90 | name="name" | 90 | name="name" |
| 91 | type="text" | 91 | type="text" |
| 92 | required | 92 | required |
| 93 | ></v-text-field> | 93 | ></v-text-field> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | <v-layout wrap> | 98 | <v-layout wrap> |
| 99 | <v-flex xs12 sm4> | 99 | <v-flex xs12 sm4> |
| 100 | <v-layout> | 100 | <v-layout> |
| 101 | <v-flex xs4 class="pt-4 subheading"> | 101 | <v-flex xs4 class="pt-4 subheading"> |
| 102 | <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> | 102 | <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> |
| 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> | 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs8 class="ml-3"> | 105 | <v-flex xs8 class="ml-3"> |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | placeholder="fill your email" | 107 | placeholder="fill your email" |
| 108 | v-model="editedItem.email" | 108 | v-model="editedItem.email" |
| 109 | type="text" | 109 | type="text" |
| 110 | name="email" | 110 | name="email" |
| 111 | required | 111 | required |
| 112 | ></v-text-field> | 112 | ></v-text-field> |
| 113 | </v-flex> | 113 | </v-flex> |
| 114 | </v-layout> | 114 | </v-layout> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs12 sm4> | 116 | <v-flex xs12 sm4> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs4 class="pt-4 subheading"> | 118 | <v-flex xs4 class="pt-4 subheading"> |
| 119 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 119 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 120 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 120 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | <v-flex xs8 class="ml-3"> | 122 | <v-flex xs8 class="ml-3"> |
| 123 | <v-menu | 123 | <v-menu |
| 124 | ref="menu" | 124 | ref="menu" |
| 125 | :close-on-content-click="false" | 125 | :close-on-content-click="false" |
| 126 | v-model="menu1" | 126 | v-model="menu1" |
| 127 | :nudge-right="40" | 127 | :nudge-right="40" |
| 128 | lazy | 128 | lazy |
| 129 | transition="scale-transition" | 129 | transition="scale-transition" |
| 130 | offset-y | 130 | offset-y |
| 131 | full-width | 131 | full-width |
| 132 | min-width="290px" | 132 | min-width="290px" |
| 133 | > | 133 | > |
| 134 | <v-text-field | 134 | <v-text-field |
| 135 | slot="activator" | 135 | slot="activator" |
| 136 | v-model="editedItem.dob" | 136 | v-model="editedItem.dob" |
| 137 | placeholder="Select Dob" | 137 | placeholder="Select Dob" |
| 138 | ></v-text-field> | 138 | ></v-text-field> |
| 139 | <v-date-picker | 139 | <v-date-picker |
| 140 | ref="picker" | 140 | ref="picker" |
| 141 | v-model="editedItem.dob" | 141 | v-model="editedItem.dob" |
| 142 | :max="new Date().toISOString().substr(0, 10)" | 142 | :max="new Date().toISOString().substr(0, 10)" |
| 143 | min="1950-01-01" | 143 | min="1950-01-01" |
| 144 | @input="menu1 = false" | 144 | @input="menu1 = false" |
| 145 | ></v-date-picker> | 145 | ></v-date-picker> |
| 146 | </v-menu> | 146 | </v-menu> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-flex xs12 sm4> | 150 | <v-flex xs12 sm4> |
| 151 | <v-layout> | 151 | <v-layout> |
| 152 | <v-flex xs4 class="pt-4 subheading"> | 152 | <v-flex xs4 class="pt-4 subheading"> |
| 153 | <label class="right">City:</label> | 153 | <label class="right">City:</label> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | <v-flex xs8 class="ml-3"> | 155 | <v-flex xs8 class="ml-3"> |
| 156 | <v-text-field | 156 | <v-text-field |
| 157 | v-model="editedItem.city" | 157 | v-model="editedItem.city" |
| 158 | placeholder="fill your City Name" | 158 | placeholder="fill your City Name" |
| 159 | name="City" | 159 | name="City" |
| 160 | type="text" | 160 | type="text" |
| 161 | required | 161 | required |
| 162 | ></v-text-field> | 162 | ></v-text-field> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | </v-layout> | 164 | </v-layout> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | <v-layout wrap> | 167 | <v-layout wrap> |
| 168 | <v-flex xs12 sm4> | 168 | <v-flex xs12 sm4> |
| 169 | <v-layout> | 169 | <v-layout> |
| 170 | <v-flex xs4 class="pt-4 subheading"> | 170 | <v-flex xs4 class="pt-4 subheading"> |
| 171 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> | 171 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> |
| 172 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> | 172 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> |
| 173 | </v-flex> | 173 | </v-flex> |
| 174 | <v-flex xs8 class="ml-3"> | 174 | <v-flex xs8 class="ml-3"> |
| 175 | <v-text-field | 175 | <v-text-field |
| 176 | v-model="editedItem.bloodGroup" | 176 | v-model="editedItem.bloodGroup" |
| 177 | placeholder="fill your BloodGroup" | 177 | placeholder="fill your BloodGroup" |
| 178 | name="state" | 178 | name="state" |
| 179 | type="text" | 179 | type="text" |
| 180 | required | 180 | required |
| 181 | ></v-text-field> | 181 | ></v-text-field> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | <v-flex xs12 sm4> | 185 | <v-flex xs12 sm4> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs4 class="pt-4 subheading"> | 187 | <v-flex xs4 class="pt-4 subheading"> |
| 188 | <label class="right">Gender:</label> | 188 | <label class="right">Gender:</label> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex xs8 class="ml-3"> | 190 | <v-flex xs8 class="ml-3"> |
| 191 | <v-select | 191 | <v-select |
| 192 | :items="gender" | 192 | :items="gender" |
| 193 | v-model="editedItem.gender" | 193 | v-model="editedItem.gender" |
| 194 | placeholder="Select Gender" | 194 | placeholder="Select Gender" |
| 195 | required | 195 | required |
| 196 | ></v-select> | 196 | ></v-select> |
| 197 | </v-flex> | 197 | </v-flex> |
| 198 | </v-layout> | 198 | </v-layout> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex xs12 sm4> | 200 | <v-flex xs12 sm4> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs4 class="pt-4 subheading"> | 202 | <v-flex xs4 class="pt-4 subheading"> |
| 203 | <label class="right">Medical Notes:</label> | 203 | <label class="right">Medical Notes:</label> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | <v-flex xs8 class="ml-3"> | 205 | <v-flex xs8 class="ml-3"> |
| 206 | <v-text-field | 206 | <v-text-field |
| 207 | v-model="editedItem.medicalNotes" | 207 | v-model="editedItem.medicalNotes" |
| 208 | placeholder="fill your medicalNotes" | 208 | placeholder="fill your medicalNotes" |
| 209 | required | 209 | required |
| 210 | ></v-text-field> | 210 | ></v-text-field> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | <v-layout wrap> | 215 | <v-layout wrap> |
| 216 | <v-flex xs12 sm4> | 216 | <v-flex xs12 sm4> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs4 class="pt-4 subheading"> | 218 | <v-flex xs4 class="pt-4 subheading"> |
| 219 | <label class="right">Height:</label> | 219 | <label class="right">Height:</label> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | <v-flex xs8 class="ml-3"> | 221 | <v-flex xs8 class="ml-3"> |
| 222 | <v-text-field | 222 | <v-text-field |
| 223 | v-model="editedItem.height" | 223 | v-model="editedItem.height" |
| 224 | placeholder="fill your Height" | 224 | placeholder="fill your Height" |
| 225 | name="state" | 225 | name="state" |
| 226 | type="text" | 226 | type="text" |
| 227 | required | 227 | required |
| 228 | ></v-text-field> | 228 | ></v-text-field> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-layout> | 230 | </v-layout> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs12 sm4> | 232 | <v-flex xs12 sm4> |
| 233 | <v-layout> | 233 | <v-layout> |
| 234 | <v-flex xs4 class="pt-4 subheading"> | 234 | <v-flex xs4 class="pt-4 subheading"> |
| 235 | <label class="right">Weight:</label> | 235 | <label class="right">Weight:</label> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex xs8 class="ml-3"> | 237 | <v-flex xs8 class="ml-3"> |
| 238 | <v-text-field | 238 | <v-text-field |
| 239 | v-model="editedItem.weight" | 239 | v-model="editedItem.weight" |
| 240 | placeholder="fill your Weight" | 240 | placeholder="fill your Weight" |
| 241 | name="pincode" | 241 | name="pincode" |
| 242 | required | 242 | required |
| 243 | ></v-text-field> | 243 | ></v-text-field> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs12 sm4> | 247 | <v-flex xs12 sm4> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs4 class="pt-4 subheading"> | 249 | <v-flex xs4 class="pt-4 subheading"> |
| 250 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 250 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 251 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 251 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs8 class="ml-3"> | 253 | <v-flex xs8 class="ml-3"> |
| 254 | <v-text-field | 254 | <v-text-field |
| 255 | label="Select Image" | 255 | label="Select Image" |
| 256 | @click="pickEditFile" | 256 | @click="pickEditFile" |
| 257 | v-model="editImageName" | 257 | v-model="editImageName" |
| 258 | append-icon="attach_file" | 258 | append-icon="attach_file" |
| 259 | ></v-text-field> | 259 | ></v-text-field> |
| 260 | </v-flex> | 260 | </v-flex> |
| 261 | </v-layout> | 261 | </v-layout> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | </v-layout> | 263 | </v-layout> |
| 264 | <v-layout wrap> | 264 | <v-layout wrap> |
| 265 | <v-flex xs12 sm4> | 265 | <v-flex xs12 sm4> |
| 266 | <v-layout> | 266 | <v-layout> |
| 267 | <v-flex xs4 class="pt-4 subheading"> | 267 | <v-flex xs4 class="pt-4 subheading"> |
| 268 | <label class="right">State:</label> | 268 | <label class="right">State:</label> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <v-flex xs8 class="ml-3"> | 270 | <v-flex xs8 class="ml-3"> |
| 271 | <v-text-field | 271 | <v-text-field |
| 272 | v-model="editedItem.state" | 272 | v-model="editedItem.state" |
| 273 | placeholder="fill your State Name" | 273 | placeholder="fill your State Name" |
| 274 | name="state" | 274 | name="state" |
| 275 | type="text" | 275 | type="text" |
| 276 | required | 276 | required |
| 277 | ></v-text-field> | 277 | ></v-text-field> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | </v-layout> | 279 | </v-layout> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs12 sm4> | 281 | <v-flex xs12 sm4> |
| 282 | <v-layout> | 282 | <v-layout> |
| 283 | <v-flex xs4 class="pt-4 subheading"> | 283 | <v-flex xs4 class="pt-4 subheading"> |
| 284 | <label class="right">Pincode:</label> | 284 | <label class="right">Pincode:</label> |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | <v-flex xs8 class="ml-3"> | 286 | <v-flex xs8 class="ml-3"> |
| 287 | <v-text-field | 287 | <v-text-field |
| 288 | v-model="editedItem.pincode" | 288 | v-model="editedItem.pincode" |
| 289 | placeholder="fill your pincode" | 289 | placeholder="fill your pincode" |
| 290 | name="pincode" | 290 | name="pincode" |
| 291 | type="number" | 291 | type="number" |
| 292 | required | 292 | required |
| 293 | ></v-text-field> | 293 | ></v-text-field> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | <!-- EDIT DETAILS - MOBILE NUMBER --> | 297 | <!-- EDIT DETAILS - MOBILE NUMBER --> |
| 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 hidden-xs-only hidden-sm-only">Mobile No:</label> | 301 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 302 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 302 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | <v-flex xs8 class="ml-3"> | 304 | <v-flex xs8 class="ml-3"> |
| 305 | <v-layout row wrap> | 305 | <v-layout row wrap> |
| 306 | <v-flex xs3 class="mt-3"> | 306 | <v-flex xs3 class="mt-3"> |
| 307 | <vue-country-code @onSelect="editStudentMobileCode" class="black--text"></vue-country-code> | 307 | <vue-country-code @onSelect="editStudentMobileCode" class="black--text"></vue-country-code> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <v-flex xs9> | 309 | <v-flex xs9> |
| 310 | <v-text-field | 310 | <v-text-field |
| 311 | v-model="editedItem.mobile" | 311 | v-model="editedItem.mobile" |
| 312 | placeholder="fill your MobileNo" | 312 | placeholder="fill your MobileNo" |
| 313 | name="mobileNo" | 313 | name="mobileNo" |
| 314 | type="number" | 314 | type="number" |
| 315 | required | 315 | required |
| 316 | ></v-text-field> | 316 | ></v-text-field> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | </v-layout> | 318 | </v-layout> |
| 319 | </v-flex> | 319 | </v-flex> |
| 320 | </v-layout> | 320 | </v-layout> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | <v-layout wrap> | 323 | <v-layout wrap> |
| 324 | <v-flex xs12 sm4> | 324 | <v-flex xs12 sm4> |
| 325 | <v-layout> | 325 | <v-layout> |
| 326 | <v-flex xs4 class="pt-4 subheading"> | 326 | <v-flex xs4 class="pt-4 subheading"> |
| 327 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 327 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 328 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 328 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs8 class="ml-3"> | 330 | <v-flex xs8 class="ml-3"> |
| 331 | <v-autocomplete | 331 | <v-autocomplete |
| 332 | v-model="editedItem.country" | 332 | v-model="editedItem.country" |
| 333 | :items="countries" | 333 | :items="countries" |
| 334 | placeholder="Select Country Name" | 334 | placeholder="Select Country Name" |
| 335 | required | 335 | required |
| 336 | ></v-autocomplete> | 336 | ></v-autocomplete> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | </v-layout> | 338 | </v-layout> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> | 340 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> |
| 341 | <v-layout> | 341 | <v-layout> |
| 342 | <v-flex xs4 class="pt-4 subheading"> | 342 | <v-flex xs4 class="pt-4 subheading"> |
| 343 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 343 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 344 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> | 344 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | <v-flex xs8 class="ml-3"> | 346 | <v-flex xs8 class="ml-3"> |
| 347 | <v-text-field | 347 | <v-text-field |
| 348 | v-model="editedItem.rollNo" | 348 | v-model="editedItem.rollNo" |
| 349 | placeholder="fill roll number" | 349 | placeholder="fill roll number" |
| 350 | required | 350 | required |
| 351 | ></v-text-field> | 351 | ></v-text-field> |
| 352 | </v-flex> | 352 | </v-flex> |
| 353 | </v-layout> | 353 | </v-layout> |
| 354 | </v-flex> | 354 | </v-flex> |
| 355 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> | 355 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> |
| 356 | <v-layout> | 356 | <v-layout> |
| 357 | <v-flex xs4 sm4 class="pt-4 subheading"> | 357 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 358 | <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> | 358 | <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> |
| 359 | <label | 359 | <label |
| 360 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 360 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 361 | >Permanent Address:</label> | 361 | >Permanent Address:</label> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | <v-flex xs12 sm8 class="ml-3"> | 363 | <v-flex xs12 sm8 class="ml-3"> |
| 364 | <v-text-field | 364 | <v-text-field |
| 365 | v-model="editedItem.permanentAddress" | 365 | v-model="editedItem.permanentAddress" |
| 366 | placeholder="fill Your Permanent Address" | 366 | placeholder="fill Your Permanent Address" |
| 367 | required | 367 | required |
| 368 | ></v-text-field> | 368 | ></v-text-field> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | </v-layout> | 370 | </v-layout> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | </v-layout> | 372 | </v-layout> |
| 373 | <v-layout class="hidden-xs-only hidden-sm-only"> | 373 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 374 | <v-flex xs12 sm4> | 374 | <v-flex xs12 sm4> |
| 375 | <v-layout> | 375 | <v-layout> |
| 376 | <v-flex xs4 class="pt-4 subheading"> | 376 | <v-flex xs4 class="pt-4 subheading"> |
| 377 | <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> | 377 | <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> |
| 378 | <label | 378 | <label |
| 379 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 379 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 380 | >Present Address:</label> | 380 | >Present Address:</label> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | <v-flex xs8 class="ml-3"> | 382 | <v-flex xs8 class="ml-3"> |
| 383 | <v-text-field | 383 | <v-text-field |
| 384 | v-model="editedItem.presentAddress" | 384 | v-model="editedItem.presentAddress" |
| 385 | placeholder="Select Country Name" | 385 | placeholder="Select Country Name" |
| 386 | required | 386 | required |
| 387 | ></v-text-field> | 387 | ></v-text-field> |
| 388 | </v-flex> | 388 | </v-flex> |
| 389 | </v-layout> | 389 | </v-layout> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | </v-layout> | 391 | </v-layout> |
| 392 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 392 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 393 | <v-flex xs12 sm12> | 393 | <v-flex xs12 sm12> |
| 394 | <v-layout> | 394 | <v-layout> |
| 395 | <v-flex xs4 class="pt-4 subheading"> | 395 | <v-flex xs4 class="pt-4 subheading"> |
| 396 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 396 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 397 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> | 397 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex xs8 class="ml-3"> | 399 | <v-flex xs8 class="ml-3"> |
| 400 | <v-text-field | 400 | <v-text-field |
| 401 | v-model="editedItem.rollNo" | 401 | v-model="editedItem.rollNo" |
| 402 | placeholder="fill roll number" | 402 | placeholder="fill roll number" |
| 403 | required | 403 | required |
| 404 | ></v-text-field> | 404 | ></v-text-field> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | </v-layout> | 406 | </v-layout> |
| 407 | </v-flex> | 407 | </v-flex> |
| 408 | </v-layout> | 408 | </v-layout> |
| 409 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 409 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 410 | <v-flex xs12 sm12> | 410 | <v-flex xs12 sm12> |
| 411 | <v-layout> | 411 | <v-layout> |
| 412 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 412 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 413 | <label class>Present Address :</label> | 413 | <label class>Present Address :</label> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-layout> | 415 | </v-layout> |
| 416 | <v-layout> | 416 | <v-layout> |
| 417 | <v-flex xs12 sm12> | 417 | <v-flex xs12 sm12> |
| 418 | <v-textarea | 418 | <v-textarea |
| 419 | v-model="editedItem.presentAddress" | 419 | v-model="editedItem.presentAddress" |
| 420 | placeholder="fill Your present Address" | 420 | placeholder="fill Your present Address" |
| 421 | required | 421 | required |
| 422 | ></v-textarea> | 422 | ></v-textarea> |
| 423 | </v-flex> | 423 | </v-flex> |
| 424 | </v-layout> | 424 | </v-layout> |
| 425 | </v-flex> | 425 | </v-flex> |
| 426 | <v-flex xs12 sm12> | 426 | <v-flex xs12 sm12> |
| 427 | <v-layout> | 427 | <v-layout> |
| 428 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 428 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 429 | <label>Permanent addr:</label> | 429 | <label>Permanent addr:</label> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs12 sm12> | 433 | <v-flex xs12 sm12> |
| 434 | <v-textarea | 434 | <v-textarea |
| 435 | name="input-4-3" | 435 | name="input-4-3" |
| 436 | v-model="editedItem.permanentAddress" | 436 | v-model="editedItem.permanentAddress" |
| 437 | placeholder="fill Your Permanent Address" | 437 | placeholder="fill Your Permanent Address" |
| 438 | required | 438 | required |
| 439 | ></v-textarea> | 439 | ></v-textarea> |
| 440 | </v-flex> | 440 | </v-flex> |
| 441 | </v-layout> | 441 | </v-layout> |
| 442 | </v-flex> | 442 | </v-flex> |
| 443 | </v-layout> | 443 | </v-layout> |
| 444 | <v-layout> | 444 | <v-layout> |
| 445 | <v-flex xs12 sm12> | 445 | <v-flex xs12 sm12> |
| 446 | <v-layout class="right"> | 446 | <v-layout class="right"> |
| 447 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 447 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 448 | </v-layout> | 448 | </v-layout> |
| 449 | </v-flex> | 449 | </v-flex> |
| 450 | </v-layout> | 450 | </v-layout> |
| 451 | </v-container> | 451 | </v-container> |
| 452 | </v-form> | 452 | </v-form> |
| 453 | </v-card-text> | 453 | </v-card-text> |
| 454 | </v-card> | 454 | </v-card> |
| 455 | </v-dialog> | 455 | </v-dialog> |
| 456 | 456 | ||
| 457 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 457 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 458 | 458 | ||
| 459 | <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent> | 459 | <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent> |
| 460 | <v-card flat class="card-style pa-3" dark> | 460 | <v-card flat class="Card-style pa-3"> |
| 461 | <v-layout> | 461 | <v-layout> |
| 462 | <v-flex xs12> | 462 | <v-flex xs12> |
| 463 | <label class="title text-xs-center">View Student Details</label> | 463 | <label class="title text-xs-center">View Student Details</label> |
| 464 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 464 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | </v-layout> | 466 | </v-layout> |
| 467 | <v-card-text> | 467 | <v-card-text> |
| 468 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 468 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 469 | <v-avatar size="100px"> | 469 | <v-avatar size="100px"> |
| 470 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 470 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 471 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 471 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 472 | </v-avatar> | 472 | </v-avatar> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | <v-container grid-list-md> | 474 | <v-container grid-list-md> |
| 475 | <v-layout wrap> | 475 | <v-layout wrap> |
| 476 | <v-flex xs12 sm5> | 476 | <v-flex xs12 sm5> |
| 477 | <v-layout> | 477 | <v-layout> |
| 478 | <v-flex xs6 sm6> | 478 | <v-flex xs6 sm6> |
| 479 | <h5 class="right my-1"> | 479 | <h5 class="right my-1"> |
| 480 | <b>Full Name:</b> | 480 | <b>Full Name:</b> |
| 481 | </h5> | 481 | </h5> |
| 482 | </v-flex> | 482 | </v-flex> |
| 483 | <v-flex sm6 xs6> | 483 | <v-flex sm6 xs6> |
| 484 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 484 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 485 | </v-flex> | 485 | </v-flex> |
| 486 | </v-layout> | 486 | </v-layout> |
| 487 | </v-flex> | 487 | </v-flex> |
| 488 | <v-flex xs12 sm7> | 488 | <v-flex xs12 sm7> |
| 489 | <v-layout> | 489 | <v-layout> |
| 490 | <v-flex xs6 sm4> | 490 | <v-flex xs6 sm4> |
| 491 | <h5 class="right my-1"> | 491 | <h5 class="right my-1"> |
| 492 | <b>Email:</b> | 492 | <b>Email:</b> |
| 493 | </h5> | 493 | </h5> |
| 494 | </v-flex> | 494 | </v-flex> |
| 495 | <v-flex sm8 xs6> | 495 | <v-flex sm8 xs6> |
| 496 | <h5 class="my-1 left">{{ editedItem.email }}</h5> | 496 | <h5 class="my-1 left">{{ editedItem.email }}</h5> |
| 497 | </v-flex> | 497 | </v-flex> |
| 498 | </v-layout> | 498 | </v-layout> |
| 499 | </v-flex> | 499 | </v-flex> |
| 500 | </v-layout> | 500 | </v-layout> |
| 501 | <v-layout wrap> | 501 | <v-layout wrap> |
| 502 | <v-flex xs12 sm5> | 502 | <v-flex xs12 sm5> |
| 503 | <v-layout> | 503 | <v-layout> |
| 504 | <v-flex xs6 sm6> | 504 | <v-flex xs6 sm6> |
| 505 | <b> | 505 | <b> |
| 506 | <h5 class="right my-1"> | 506 | <h5 class="right my-1"> |
| 507 | <b>Gender:</b> | 507 | <b>Gender:</b> |
| 508 | </h5> | 508 | </h5> |
| 509 | </b> | 509 | </b> |
| 510 | </v-flex> | 510 | </v-flex> |
| 511 | <v-flex sm6 xs6> | 511 | <v-flex sm6 xs6> |
| 512 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> | 512 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> |
| 513 | </v-flex> | 513 | </v-flex> |
| 514 | </v-layout> | 514 | </v-layout> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | <v-flex xs12 sm7> | 516 | <v-flex xs12 sm7> |
| 517 | <v-layout> | 517 | <v-layout> |
| 518 | <v-flex xs6 sm4> | 518 | <v-flex xs6 sm4> |
| 519 | <b> | 519 | <b> |
| 520 | <h5 class="right my-1"> | 520 | <h5 class="right my-1"> |
| 521 | <b>D.O.B:</b> | 521 | <b>D.O.B:</b> |
| 522 | </h5> | 522 | </h5> |
| 523 | </b> | 523 | </b> |
| 524 | </v-flex> | 524 | </v-flex> |
| 525 | <v-flex sm8 xs6> | 525 | <v-flex sm8 xs6> |
| 526 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 526 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 527 | </v-flex> | 527 | </v-flex> |
| 528 | </v-layout> | 528 | </v-layout> |
| 529 | </v-flex> | 529 | </v-flex> |
| 530 | </v-layout> | 530 | </v-layout> |
| 531 | <v-layout wrap> | 531 | <v-layout wrap> |
| 532 | <v-flex xs12 sm5> | 532 | <v-flex xs12 sm5> |
| 533 | <v-layout> | 533 | <v-layout> |
| 534 | <v-flex xs6 sm6> | 534 | <v-flex xs6 sm6> |
| 535 | <b> | 535 | <b> |
| 536 | <h5 class="right my-1"> | 536 | <h5 class="right my-1"> |
| 537 | <b>BloodGroup:</b> | 537 | <b>BloodGroup:</b> |
| 538 | </h5> | 538 | </h5> |
| 539 | </b> | 539 | </b> |
| 540 | </v-flex> | 540 | </v-flex> |
| 541 | <v-flex sm6 xs6> | 541 | <v-flex sm6 xs6> |
| 542 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> | 542 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> |
| 543 | </v-flex> | 543 | </v-flex> |
| 544 | </v-layout> | 544 | </v-layout> |
| 545 | </v-flex> | 545 | </v-flex> |
| 546 | <v-flex xs12 sm7> | 546 | <v-flex xs12 sm7> |
| 547 | <v-layout> | 547 | <v-layout> |
| 548 | <v-flex xs6 sm4> | 548 | <v-flex xs6 sm4> |
| 549 | <b> | 549 | <b> |
| 550 | <h5 class="right my-1"> | 550 | <h5 class="right my-1"> |
| 551 | <b>Roll No. :</b> | 551 | <b>Roll No. :</b> |
| 552 | </h5> | 552 | </h5> |
| 553 | </b> | 553 | </b> |
| 554 | </v-flex> | 554 | </v-flex> |
| 555 | <v-flex sm8 xs6> | 555 | <v-flex sm8 xs6> |
| 556 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> | 556 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> |
| 557 | </v-flex> | 557 | </v-flex> |
| 558 | </v-layout> | 558 | </v-layout> |
| 559 | </v-flex> | 559 | </v-flex> |
| 560 | </v-layout> | 560 | </v-layout> |
| 561 | <v-layout wrap> | 561 | <v-layout wrap> |
| 562 | <v-flex xs12 sm5> | 562 | <v-flex xs12 sm5> |
| 563 | <v-layout> | 563 | <v-layout> |
| 564 | <v-flex xs6 sm6> | 564 | <v-flex xs6 sm6> |
| 565 | <b> | 565 | <b> |
| 566 | <h5 class="right my-1"> | 566 | <h5 class="right my-1"> |
| 567 | <b>Height:</b> | 567 | <b>Height:</b> |
| 568 | </h5> | 568 | </h5> |
| 569 | </b> | 569 | </b> |
| 570 | </v-flex> | 570 | </v-flex> |
| 571 | <v-flex sm6 xs6> | 571 | <v-flex sm6 xs6> |
| 572 | <h5 class="my-1 left">{{ editedItem.height }}</h5> | 572 | <h5 class="my-1 left">{{ editedItem.height }}</h5> |
| 573 | </v-flex> | 573 | </v-flex> |
| 574 | </v-layout> | 574 | </v-layout> |
| 575 | </v-flex> | 575 | </v-flex> |
| 576 | <v-flex xs12 sm7> | 576 | <v-flex xs12 sm7> |
| 577 | <v-layout> | 577 | <v-layout> |
| 578 | <v-flex xs6 sm4> | 578 | <v-flex xs6 sm4> |
| 579 | <b> | 579 | <b> |
| 580 | <h5 class="right my-1"> | 580 | <h5 class="right my-1"> |
| 581 | <b>Weight:</b> | 581 | <b>Weight:</b> |
| 582 | </h5> | 582 | </h5> |
| 583 | </b> | 583 | </b> |
| 584 | </v-flex> | 584 | </v-flex> |
| 585 | <v-flex sm8 xs6> | 585 | <v-flex sm8 xs6> |
| 586 | <h5 class="my-1">{{ editedItem.weight }}</h5> | 586 | <h5 class="my-1">{{ editedItem.weight }}</h5> |
| 587 | </v-flex> | 587 | </v-flex> |
| 588 | </v-layout> | 588 | </v-layout> |
| 589 | </v-flex> | 589 | </v-flex> |
| 590 | </v-layout> | 590 | </v-layout> |
| 591 | <v-layout wrap> | 591 | <v-layout wrap> |
| 592 | <v-flex xs12 sm5> | 592 | <v-flex xs12 sm5> |
| 593 | <v-layout> | 593 | <v-layout> |
| 594 | <v-flex xs6 sm6> | 594 | <v-flex xs6 sm6> |
| 595 | <b> | 595 | <b> |
| 596 | <h5 class="right my-1"> | 596 | <h5 class="right my-1"> |
| 597 | <b>City:</b> | 597 | <b>City:</b> |
| 598 | </h5> | 598 | </h5> |
| 599 | </b> | 599 | </b> |
| 600 | </v-flex> | 600 | </v-flex> |
| 601 | <v-flex sm6 xs6> | 601 | <v-flex sm6 xs6> |
| 602 | <h5 class="my-1 left">{{ editedItem.city }}</h5> | 602 | <h5 class="my-1 left">{{ editedItem.city }}</h5> |
| 603 | </v-flex> | 603 | </v-flex> |
| 604 | </v-layout> | 604 | </v-layout> |
| 605 | </v-flex> | 605 | </v-flex> |
| 606 | <v-flex xs12 sm7> | 606 | <v-flex xs12 sm7> |
| 607 | <v-layout> | 607 | <v-layout> |
| 608 | <v-flex xs6 sm4> | 608 | <v-flex xs6 sm4> |
| 609 | <b> | 609 | <b> |
| 610 | <h5 class="right my-1"> | 610 | <h5 class="right my-1"> |
| 611 | <b>State:</b> | 611 | <b>State:</b> |
| 612 | </h5> | 612 | </h5> |
| 613 | </b> | 613 | </b> |
| 614 | </v-flex> | 614 | </v-flex> |
| 615 | <v-flex sm8 xs6> | 615 | <v-flex sm8 xs6> |
| 616 | <h5 class="my-1">{{ editedItem.state }}</h5> | 616 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 617 | </v-flex> | 617 | </v-flex> |
| 618 | </v-layout> | 618 | </v-layout> |
| 619 | </v-flex> | 619 | </v-flex> |
| 620 | </v-layout> | 620 | </v-layout> |
| 621 | <v-layout wrap> | 621 | <v-layout wrap> |
| 622 | <v-flex xs12 sm5> | 622 | <v-flex xs12 sm5> |
| 623 | <v-layout> | 623 | <v-layout> |
| 624 | <v-flex xs6 sm6> | 624 | <v-flex xs6 sm6> |
| 625 | <b> | 625 | <b> |
| 626 | <h5 class="right my-1"> | 626 | <h5 class="right my-1"> |
| 627 | <b>Pincode:</b> | 627 | <b>Pincode:</b> |
| 628 | </h5> | 628 | </h5> |
| 629 | </b> | 629 | </b> |
| 630 | </v-flex> | 630 | </v-flex> |
| 631 | <v-flex sm6 xs6> | 631 | <v-flex sm6 xs6> |
| 632 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 632 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 633 | </v-flex> | 633 | </v-flex> |
| 634 | </v-layout> | 634 | </v-layout> |
| 635 | </v-flex> | 635 | </v-flex> |
| 636 | <v-flex xs12 sm7> | 636 | <v-flex xs12 sm7> |
| 637 | <v-layout> | 637 | <v-layout> |
| 638 | <v-flex xs6 sm4> | 638 | <v-flex xs6 sm4> |
| 639 | <b> | 639 | <b> |
| 640 | <h5 class="right my-1"> | 640 | <h5 class="right my-1"> |
| 641 | <b>Country:</b> | 641 | <b>Country:</b> |
| 642 | </h5> | 642 | </h5> |
| 643 | </b> | 643 | </b> |
| 644 | </v-flex> | 644 | </v-flex> |
| 645 | <v-flex sm7 xs6> | 645 | <v-flex sm7 xs6> |
| 646 | <h5 class="my-1">{{ editedItem.country }}</h5> | 646 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 647 | </v-flex> | 647 | </v-flex> |
| 648 | </v-layout> | 648 | </v-layout> |
| 649 | </v-flex> | 649 | </v-flex> |
| 650 | </v-layout> | 650 | </v-layout> |
| 651 | <v-layout wrap> | 651 | <v-layout wrap> |
| 652 | <v-flex xs12 sm5> | 652 | <v-flex xs12 sm5> |
| 653 | <v-layout> | 653 | <v-layout> |
| 654 | <v-flex sm6 xs6> | 654 | <v-flex sm6 xs6> |
| 655 | <b> | 655 | <b> |
| 656 | <h5 class="right my-1"> | 656 | <h5 class="right my-1"> |
| 657 | <b>Mobile No:</b> | 657 | <b>Mobile No:</b> |
| 658 | </h5> | 658 | </h5> |
| 659 | </b> | 659 | </b> |
| 660 | </v-flex> | 660 | </v-flex> |
| 661 | <v-flex sm6 xs6> | 661 | <v-flex sm6 xs6> |
| 662 | <h5 class="my-1">{{ editedItem.mobile }}</h5> | 662 | <h5 class="my-1">{{ editedItem.mobile }}</h5> |
| 663 | </v-flex> | 663 | </v-flex> |
| 664 | </v-layout> | 664 | </v-layout> |
| 665 | </v-flex> | 665 | </v-flex> |
| 666 | <v-flex xs12 sm7> | 666 | <v-flex xs12 sm7> |
| 667 | <v-layout> | 667 | <v-layout> |
| 668 | <v-flex xs6 sm4> | 668 | <v-flex xs6 sm4> |
| 669 | <b> | 669 | <b> |
| 670 | <h5 class="right my-1"> | 670 | <h5 class="right my-1"> |
| 671 | <b>FahterName:</b> | 671 | <b>FahterName:</b> |
| 672 | </h5> | 672 | </h5> |
| 673 | </b> | 673 | </b> |
| 674 | </v-flex> | 674 | </v-flex> |
| 675 | <v-flex sm8 xs6> | 675 | <v-flex sm8 xs6> |
| 676 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> | 676 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> |
| 677 | </v-flex> | 677 | </v-flex> |
| 678 | </v-layout> | 678 | </v-layout> |
| 679 | </v-flex> | 679 | </v-flex> |
| 680 | </v-layout> | 680 | </v-layout> |
| 681 | <v-layout wrap> | 681 | <v-layout wrap> |
| 682 | <v-flex xs12 sm5> | 682 | <v-flex xs12 sm5> |
| 683 | <v-layout> | 683 | <v-layout> |
| 684 | <v-flex xs6 sm6> | 684 | <v-flex xs6 sm6> |
| 685 | <b> | 685 | <b> |
| 686 | <h5 class="right my-1"> | 686 | <h5 class="right my-1"> |
| 687 | <b>MotherName:</b> | 687 | <b>MotherName:</b> |
| 688 | </h5> | 688 | </h5> |
| 689 | </b> | 689 | </b> |
| 690 | </v-flex> | 690 | </v-flex> |
| 691 | <v-flex sm6 xs6> | 691 | <v-flex sm6 xs6> |
| 692 | <h5 class="my-1">{{ editedItem.motherName }}</h5> | 692 | <h5 class="my-1">{{ editedItem.motherName }}</h5> |
| 693 | </v-flex> | 693 | </v-flex> |
| 694 | </v-layout> | 694 | </v-layout> |
| 695 | </v-flex> | 695 | </v-flex> |
| 696 | <v-flex xs12 sm7> | 696 | <v-flex xs12 sm7> |
| 697 | <v-layout> | 697 | <v-layout> |
| 698 | <v-flex xs6 sm4> | 698 | <v-flex xs6 sm4> |
| 699 | <b> | 699 | <b> |
| 700 | <h5 class="right my-1"> | 700 | <h5 class="right my-1"> |
| 701 | <b>FatherCellNo:</b> | 701 | <b>FatherCellNo:</b> |
| 702 | </h5> | 702 | </h5> |
| 703 | </b> | 703 | </b> |
| 704 | </v-flex> | 704 | </v-flex> |
| 705 | <v-flex sm6 xs6> | 705 | <v-flex sm6 xs6> |
| 706 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> | 706 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> |
| 707 | </v-flex> | 707 | </v-flex> |
| 708 | </v-layout> | 708 | </v-layout> |
| 709 | </v-flex> | 709 | </v-flex> |
| 710 | </v-layout> | 710 | </v-layout> |
| 711 | <v-layout wrap> | 711 | <v-layout wrap> |
| 712 | <v-flex xs12 sm5> | 712 | <v-flex xs12 sm5> |
| 713 | <v-layout> | 713 | <v-layout> |
| 714 | <v-flex xs6 sm6> | 714 | <v-flex xs6 sm6> |
| 715 | <b> | 715 | <b> |
| 716 | <h5 class="right my-1"> | 716 | <h5 class="right my-1"> |
| 717 | <b>MotherCellNo:</b> | 717 | <b>MotherCellNo:</b> |
| 718 | </h5> | 718 | </h5> |
| 719 | </b> | 719 | </b> |
| 720 | </v-flex> | 720 | </v-flex> |
| 721 | <v-flex sm6 xs6> | 721 | <v-flex sm6 xs6> |
| 722 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> | 722 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> |
| 723 | </v-flex> | 723 | </v-flex> |
| 724 | </v-layout> | 724 | </v-layout> |
| 725 | </v-flex> | 725 | </v-flex> |
| 726 | <v-flex xs12 sm7> | 726 | <v-flex xs12 sm7> |
| 727 | <v-layout> | 727 | <v-layout> |
| 728 | <v-flex xs6 sm4> | 728 | <v-flex xs6 sm4> |
| 729 | <b> | 729 | <b> |
| 730 | <h5 class="my-1 right"> | 730 | <h5 class="my-1 right"> |
| 731 | <b>AcademicYear:</b> | 731 | <b>AcademicYear:</b> |
| 732 | </h5> | 732 | </h5> |
| 733 | </b> | 733 | </b> |
| 734 | </v-flex> | 734 | </v-flex> |
| 735 | <v-flex sm5 xs8> | 735 | <v-flex sm5 xs8> |
| 736 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> | 736 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> |
| 737 | </v-flex> | 737 | </v-flex> |
| 738 | </v-layout> | 738 | </v-layout> |
| 739 | </v-flex> | 739 | </v-flex> |
| 740 | </v-layout> | 740 | </v-layout> |
| 741 | <v-layout wrap> | 741 | <v-layout wrap> |
| 742 | <v-flex xs12 sm5> | 742 | <v-flex xs12 sm5> |
| 743 | <v-layout> | 743 | <v-layout> |
| 744 | <v-flex xs6 sm6> | 744 | <v-flex xs6 sm6> |
| 745 | <b> | 745 | <b> |
| 746 | <h5 class="my-1 right"> | 746 | <h5 class="my-1 right"> |
| 747 | <b>MedicalNotes:</b> | 747 | <b>MedicalNotes:</b> |
| 748 | </h5> | 748 | </h5> |
| 749 | </b> | 749 | </b> |
| 750 | </v-flex> | 750 | </v-flex> |
| 751 | <v-flex sm5 xs6> | 751 | <v-flex sm5 xs6> |
| 752 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> | 752 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> |
| 753 | </v-flex> | 753 | </v-flex> |
| 754 | </v-layout> | 754 | </v-layout> |
| 755 | </v-flex> | 755 | </v-flex> |
| 756 | <v-flex xs12 sm7 class="hidden-xs-only"> | 756 | <v-flex xs12 sm7 class="hidden-xs-only"> |
| 757 | <v-layout wrap> | 757 | <v-layout wrap> |
| 758 | <v-flex sm4> | 758 | <v-flex sm4> |
| 759 | <b> | 759 | <b> |
| 760 | <h5 class="my-1 right"> | 760 | <h5 class="my-1 right"> |
| 761 | <b>present Address:</b> | 761 | <b>present Address:</b> |
| 762 | </h5> | 762 | </h5> |
| 763 | </b> | 763 | </b> |
| 764 | </v-flex> | 764 | </v-flex> |
| 765 | <v-flex sm8> | 765 | <v-flex sm8> |
| 766 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 766 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 767 | </v-flex> | 767 | </v-flex> |
| 768 | </v-layout> | 768 | </v-layout> |
| 769 | </v-flex> | 769 | </v-flex> |
| 770 | <v-flex sm6 class="hidden-xs-only"> | 770 | <v-flex sm6 class="hidden-xs-only"> |
| 771 | <v-layout wrap> | 771 | <v-layout wrap> |
| 772 | <v-flex sm5> | 772 | <v-flex sm5> |
| 773 | <b> | 773 | <b> |
| 774 | <h5 class="my-1 right"> | 774 | <h5 class="my-1 right"> |
| 775 | <b>Permanent Address:</b> | 775 | <b>Permanent Address:</b> |
| 776 | </h5> | 776 | </h5> |
| 777 | </b> | 777 | </b> |
| 778 | </v-flex> | 778 | </v-flex> |
| 779 | <v-flex sm7> | 779 | <v-flex sm7> |
| 780 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 780 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 781 | </v-flex> | 781 | </v-flex> |
| 782 | </v-layout> | 782 | </v-layout> |
| 783 | </v-flex> | 783 | </v-flex> |
| 784 | </v-layout> | 784 | </v-layout> |
| 785 | <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> | 785 | <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> |
| 786 | <v-flex xs12 sm5> | 786 | <v-flex xs12 sm5> |
| 787 | <v-layout wrap> | 787 | <v-layout wrap> |
| 788 | <v-flex xs12 sm6> | 788 | <v-flex xs12 sm6> |
| 789 | <b> | 789 | <b> |
| 790 | <h5 class="my-1"> | 790 | <h5 class="my-1"> |
| 791 | <b>present Address:-</b> | 791 | <b>present Address:-</b> |
| 792 | </h5> | 792 | </h5> |
| 793 | </b> | 793 | </b> |
| 794 | </v-flex> | 794 | </v-flex> |
| 795 | <v-flex sm5 xs12> | 795 | <v-flex sm5 xs12> |
| 796 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 796 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 797 | </v-flex> | 797 | </v-flex> |
| 798 | </v-layout> | 798 | </v-layout> |
| 799 | </v-flex> | 799 | </v-flex> |
| 800 | <v-flex xs12 sm6> | 800 | <v-flex xs12 sm6> |
| 801 | <v-layout wrap> | 801 | <v-layout wrap> |
| 802 | <v-flex xs12 sm6> | 802 | <v-flex xs12 sm6> |
| 803 | <b> | 803 | <b> |
| 804 | <h5 class="my-1"> | 804 | <h5 class="my-1"> |
| 805 | <b>Permanent Address:-</b> | 805 | <b>Permanent Address:-</b> |
| 806 | </h5> | 806 | </h5> |
| 807 | </b> | 807 | </b> |
| 808 | </v-flex> | 808 | </v-flex> |
| 809 | <v-flex sm6 xs12> | 809 | <v-flex sm6 xs12> |
| 810 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 810 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 811 | </v-flex> | 811 | </v-flex> |
| 812 | </v-layout> | 812 | </v-layout> |
| 813 | </v-flex> | 813 | </v-flex> |
| 814 | </v-layout> | 814 | </v-layout> |
| 815 | </v-container> | 815 | </v-container> |
| 816 | </v-card-text> | 816 | </v-card-text> |
| 817 | </v-card> | 817 | </v-card> |
| 818 | </v-dialog> | 818 | </v-dialog> |
| 819 | 819 | ||
| 820 | <!-- ****** STUDENTS TABLE ****** --> | 820 | <!-- ****** STUDENTS TABLE ****** --> |
| 821 | <v-toolbar color="transparent" flat> | 821 | <v-toolbar color="transparent" flat> |
| 822 | <v-btn | 822 | <v-btn |
| 823 | fab | 823 | fab |
| 824 | dark | 824 | dark |
| 825 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 825 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 826 | small | 826 | small |
| 827 | @click="addStudentDialog = true" | 827 | @click="addStudentDialog = true" |
| 828 | > | 828 | > |
| 829 | <v-icon dark>add</v-icon> | 829 | <v-icon dark>add</v-icon> |
| 830 | </v-btn> | 830 | </v-btn> |
| 831 | <v-btn | 831 | <v-btn |
| 832 | v-if="role != 'TEACHER' " | 832 | v-if="role != 'TEACHER' " |
| 833 | round | 833 | round |
| 834 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 834 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 835 | dark | 835 | dark |
| 836 | @click="addStudentDialog = true" | 836 | @click="addStudentDialog = true" |
| 837 | > | 837 | > |
| 838 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student | 838 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student |
| 839 | </v-btn> | 839 | </v-btn> |
| 840 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 840 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 841 | <v-flex md13 lg12> | 841 | <v-flex md13 lg12> |
| 842 | <v-layout> | 842 | <v-layout> |
| 843 | <v-flex lg3 md4> | 843 | <v-flex lg3 md4> |
| 844 | <v-select | 844 | <v-select |
| 845 | :items="addclass" | 845 | :items="addclass" |
| 846 | label="Select Class" | 846 | label="Select Class" |
| 847 | v-model="selectStudents.select" | 847 | v-model="selectStudents.select" |
| 848 | item-text="classNum" | 848 | item-text="classNum" |
| 849 | item-value="_id" | 849 | item-value="_id" |
| 850 | name="Select Class" | 850 | name="Select Class" |
| 851 | :rules="classRules" | 851 | :rules="classRules" |
| 852 | @change="getSections(selectStudents.select)" | 852 | @change="getSections(selectStudents.select)" |
| 853 | required | 853 | required |
| 854 | class="ml-2" | 854 | class="ml-2" |
| 855 | ></v-select> | 855 | ></v-select> |
| 856 | </v-flex> | 856 | </v-flex> |
| 857 | <v-flex lg3 md4 class="ml-2"> | 857 | <v-flex lg3 md4 class="ml-2"> |
| 858 | <v-layout> | 858 | <v-layout> |
| 859 | <v-select | 859 | <v-select |
| 860 | :items="addSection" | 860 | :items="addSection" |
| 861 | label="Select Section" | 861 | label="Select Section" |
| 862 | v-model="selectStudents.selectSection" | 862 | v-model="selectStudents.selectSection" |
| 863 | item-text="name" | 863 | item-text="name" |
| 864 | item-value="_id" | 864 | item-value="_id" |
| 865 | name="Select Section" | 865 | name="Select Section" |
| 866 | required | 866 | required |
| 867 | ></v-select> | 867 | ></v-select> |
| 868 | </v-layout> | 868 | </v-layout> |
| 869 | </v-flex> | 869 | </v-flex> |
| 870 | </v-layout> | 870 | </v-layout> |
| 871 | </v-flex> | 871 | </v-flex> |
| 872 | </v-card-actions> | 872 | </v-card-actions> |
| 873 | <v-spacer></v-spacer> | 873 | <v-spacer></v-spacer> |
| 874 | <v-btn | 874 | <v-btn |
| 875 | @click="findStudents()" | 875 | @click="findStudents()" |
| 876 | round | 876 | round |
| 877 | dark | 877 | dark |
| 878 | :loading="loading" | 878 | :loading="loading" |
| 879 | class="open-dialog-button hidden-xs-only hidden-sm-only" | 879 | class="open-dialog-button hidden-xs-only hidden-sm-only" |
| 880 | >Find</v-btn> | 880 | >Find</v-btn> |
| 881 | <v-card-title class="body-1" v-show="show"> | 881 | <v-card-title class="body-1" v-show="show"> |
| 882 | <v-btn icon large flat @click="displaySearch"> | 882 | <v-btn icon large flat @click="displaySearch"> |
| 883 | <v-avatar size="27"> | 883 | <v-avatar size="27"> |
| 884 | <img src="/static/icon/search.png" alt="icon" /> | 884 | <img src="/static/icon/search.png" alt="icon" /> |
| 885 | </v-avatar> | 885 | </v-avatar> |
| 886 | </v-btn> | 886 | </v-btn> |
| 887 | </v-card-title> | 887 | </v-card-title> |
| 888 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> | 888 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> |
| 889 | <v-layout> | 889 | <v-layout> |
| 890 | <v-text-field | 890 | <v-text-field |
| 891 | autofocus | 891 | autofocus |
| 892 | v-model="search" | 892 | v-model="search" |
| 893 | label="Search" | 893 | label="Search" |
| 894 | prepend-inner-icon="search" | 894 | prepend-inner-icon="search" |
| 895 | color="primary" | 895 | color="primary" |
| 896 | ></v-text-field> | 896 | ></v-text-field> |
| 897 | <v-icon @click="closeSearch" color="error">close</v-icon> | 897 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 898 | </v-layout> | 898 | </v-layout> |
| 899 | </v-flex> | 899 | </v-flex> |
| 900 | </v-toolbar> | 900 | </v-toolbar> |
| 901 | <v-card flat class="elevation-0 transparent"> | 901 | <v-card flat class="elevation-0 transparent"> |
| 902 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 902 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 903 | <v-layout> | 903 | <v-layout> |
| 904 | <v-flex xs4> | 904 | <v-flex xs4> |
| 905 | <label class="right mt-4">Select Class:</label> | 905 | <label class="right mt-4">Select Class:</label> |
| 906 | </v-flex> | 906 | </v-flex> |
| 907 | <v-flex xs8> | 907 | <v-flex xs8> |
| 908 | <v-select | 908 | <v-select |
| 909 | :items="addclass" | 909 | :items="addclass" |
| 910 | label="Select Class" | 910 | label="Select Class" |
| 911 | v-model="selectStudents.select" | 911 | v-model="selectStudents.select" |
| 912 | item-text="classNum" | 912 | item-text="classNum" |
| 913 | item-value="_id" | 913 | item-value="_id" |
| 914 | name="Select Class" | 914 | name="Select Class" |
| 915 | :rules="classRules" | 915 | :rules="classRules" |
| 916 | @change="getSections(selectStudents.select)" | 916 | @change="getSections(selectStudents.select)" |
| 917 | class="px-2" | 917 | class="px-2" |
| 918 | ></v-select> | 918 | ></v-select> |
| 919 | </v-flex> | 919 | </v-flex> |
| 920 | </v-layout> | 920 | </v-layout> |
| 921 | <v-layout> | 921 | <v-layout> |
| 922 | <v-flex xs4> | 922 | <v-flex xs4> |
| 923 | <label class="right mt-4">Select Section:</label> | 923 | <label class="right mt-4">Select Section:</label> |
| 924 | </v-flex> | 924 | </v-flex> |
| 925 | <v-flex xs8> | 925 | <v-flex xs8> |
| 926 | <v-select | 926 | <v-select |
| 927 | :items="addSection" | 927 | :items="addSection" |
| 928 | label="Select Section" | 928 | label="Select Section" |
| 929 | v-model="selectStudents.selectSection" | 929 | v-model="selectStudents.selectSection" |
| 930 | item-text="name" | 930 | item-text="name" |
| 931 | item-value="_id" | 931 | item-value="_id" |
| 932 | name="Select Section" | 932 | name="Select Section" |
| 933 | :rules="sectionRules" | 933 | :rules="sectionRules" |
| 934 | class="px-2" | 934 | class="px-2" |
| 935 | required | 935 | required |
| 936 | ></v-select> | 936 | ></v-select> |
| 937 | </v-flex> | 937 | </v-flex> |
| 938 | </v-layout> | 938 | </v-layout> |
| 939 | <v-layout> | 939 | <v-layout> |
| 940 | <v-flex xs5 class="mx-auto mb-2"> | 940 | <v-flex xs5 class="mx-auto mb-2"> |
| 941 | <v-btn | 941 | <v-btn |
| 942 | @click="findStudents()" | 942 | @click="findStudents()" |
| 943 | block | 943 | block |
| 944 | round | 944 | round |
| 945 | dark | 945 | dark |
| 946 | :loading="loading" | 946 | :loading="loading" |
| 947 | class="add-button" | 947 | class="add-button" |
| 948 | >Find</v-btn> | 948 | >Find</v-btn> |
| 949 | </v-flex> | 949 | </v-flex> |
| 950 | </v-layout> | 950 | </v-layout> |
| 951 | </v-flex> | 951 | </v-flex> |
| 952 | </v-card> | 952 | </v-card> |
| 953 | <v-data-table | 953 | <v-data-table |
| 954 | :headers="headers" | 954 | :headers="headers" |
| 955 | :items="studentsData" | 955 | :items="studentsData" |
| 956 | :pagination.sync="pagination" | 956 | :pagination.sync="pagination" |
| 957 | :search="search" | 957 | :search="search" |
| 958 | > | 958 | > |
| 959 | <template slot="items" slot-scope="props"> | 959 | <template slot="items" slot-scope="props"> |
| 960 | <tr class="tr"> | 960 | <tr class="tr"> |
| 961 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> | 961 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> |
| 962 | <td class="text-xs-center td td-row"> | 962 | <td class="text-xs-center td td-row"> |
| 963 | <v-avatar size="40"> | 963 | <v-avatar size="40"> |
| 964 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 964 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 965 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 965 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 966 | </v-avatar> | 966 | </v-avatar> |
| 967 | </td> | 967 | </td> |
| 968 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 968 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 969 | <td class="text-xs-center td td-row">{{ props.item.gender }}</td> | 969 | <td class="text-xs-center td td-row">{{ props.item.gender }}</td> |
| 970 | <td | 970 | <td |
| 971 | class="text-xs-center td td-row" | 971 | class="text-xs-center td td-row" |
| 972 | >{{ props.item.parentId ? props.item.parentId.fatherName: '-' }}</td> | 972 | >{{ props.item.parentId ? props.item.parentId.fatherName: '-' }}</td> |
| 973 | <td | 973 | <td |
| 974 | class="text-xs-center td td-row" | 974 | class="text-xs-center td td-row" |
| 975 | >{{ props.item.parentId ? props.item.parentId.motherName: '-' }}</td> | 975 | >{{ props.item.parentId ? props.item.parentId.motherName: '-' }}</td> |
| 976 | <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> | 976 | <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> |
| 977 | <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> | 977 | <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> |
| 978 | <td class="text-xs-center td td-row"> | 978 | <td class="text-xs-center td td-row"> |
| 979 | <v-switch | 979 | <v-switch |
| 980 | class="pl-3" | 980 | class="pl-3" |
| 981 | :disabled="role === 'TEACHER'" | 981 | :disabled="role === 'TEACHER'" |
| 982 | v-model="props.item.status" | 982 | v-model="props.item.status" |
| 983 | @change="suspendStudentStatus(props.item.status,props.item._id)" | 983 | @change="suspendStudentStatus(props.item.status,props.item._id)" |
| 984 | ></v-switch> | 984 | ></v-switch> |
| 985 | </td> | 985 | </td> |
| 986 | <td class="text-xs-center td td-row"> | 986 | <td class="text-xs-center td td-row"> |
| 987 | <span> | 987 | <span> |
| 988 | <v-tooltip top> | 988 | <v-tooltip top> |
| 989 | <img | 989 | <img |
| 990 | slot="activator" | 990 | slot="activator" |
| 991 | style="cursor:pointer; width:25px; height:25px; " | 991 | style="cursor:pointer; width:25px; height:25px; " |
| 992 | class="mr-3" | 992 | class="mr-3" |
| 993 | @click="profile(props.item)" | 993 | @click="profile(props.item)" |
| 994 | src="/static/icon/view.png" | 994 | src="/static/icon/view.png" |
| 995 | /> | 995 | /> |
| 996 | <span>View</span> | 996 | <span>View</span> |
| 997 | </v-tooltip> | 997 | </v-tooltip> |
| 998 | <v-tooltip top v-if="role != 'TEACHER' "> | 998 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 999 | <img | 999 | <img |
| 1000 | slot="activator" | 1000 | slot="activator" |
| 1001 | style="cursor:pointer; width:20px; height:18px; " | 1001 | style="cursor:pointer; width:20px; height:18px; " |
| 1002 | class="mr-3" | 1002 | class="mr-3" |
| 1003 | @click="editItem(props.item)" | 1003 | @click="editItem(props.item)" |
| 1004 | src="/static/icon/edit.png" | 1004 | src="/static/icon/edit.png" |
| 1005 | /> | 1005 | /> |
| 1006 | <span>Edit</span> | 1006 | <span>Edit</span> |
| 1007 | </v-tooltip> | 1007 | </v-tooltip> |
| 1008 | <v-tooltip top v-if="role != 'TEACHER' "> | 1008 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 1009 | <img | 1009 | <img |
| 1010 | slot="activator" | 1010 | slot="activator" |
| 1011 | style="cursor:pointer; width:20px; height:20px; " | 1011 | style="cursor:pointer; width:20px; height:20px; " |
| 1012 | class="mr-3" | 1012 | class="mr-3" |
| 1013 | @click="deleteItem(props.item)" | 1013 | @click="deleteItem(props.item)" |
| 1014 | src="/static/icon/delete.png" | 1014 | src="/static/icon/delete.png" |
| 1015 | /> | 1015 | /> |
| 1016 | <span>Delete</span> | 1016 | <span>Delete</span> |
| 1017 | </v-tooltip> | 1017 | </v-tooltip> |
| 1018 | </span> | 1018 | </span> |
| 1019 | </td> | 1019 | </td> |
| 1020 | </tr> | 1020 | </tr> |
| 1021 | </template> | 1021 | </template> |
| 1022 | <v-alert | 1022 | <v-alert |
| 1023 | slot="no-results" | 1023 | slot="no-results" |
| 1024 | :value="true" | 1024 | :value="true" |
| 1025 | color="error" | 1025 | color="error" |
| 1026 | icon="warning" | 1026 | icon="warning" |
| 1027 | >Your search for "{{ search }}" found no results.</v-alert> | 1027 | >Your search for "{{ search }}" found no results.</v-alert> |
| 1028 | </v-data-table> | 1028 | </v-data-table> |
| 1029 | <!-- DIALOG -- ADD STUDENTS DETAILS --> | 1029 | <!-- DIALOG -- ADD STUDENTS DETAILS --> |
| 1030 | <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent> | 1030 | <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent> |
| 1031 | <v-card flat class="card-style pa-2" dark> | 1031 | <v-card flat class="Card-style pa-2"> |
| 1032 | <v-layout> | 1032 | <v-layout> |
| 1033 | <v-flex xs12> | 1033 | <v-flex xs12> |
| 1034 | <label class="title text-xs-center">Add Student</label> | 1034 | <label class="title text-xs-center">Add Student</label> |
| 1035 | <v-icon | 1035 | <v-icon |
| 1036 | size="24" | 1036 | size="24" |
| 1037 | class="right" | 1037 | class="right" |
| 1038 | @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false" | 1038 | @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false" |
| 1039 | >cancel</v-icon> | 1039 | >cancel</v-icon> |
| 1040 | </v-flex> | 1040 | </v-flex> |
| 1041 | </v-layout> | 1041 | </v-layout> |
| 1042 | <v-container fluid> | 1042 | <v-container fluid> |
| 1043 | <v-layout align-center> | 1043 | <v-layout align-center> |
| 1044 | <v-flex xs12> | 1044 | <v-flex xs12> |
| 1045 | <v-stepper v-model="e2" flat class="card-style elevation-0" dark> | 1045 | <v-stepper v-model="e2" flat class="Card-style elevation-0"> |
| 1046 | <v-stepper-header> | 1046 | <v-stepper-header> |
| 1047 | <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> | 1047 | <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> |
| 1048 | <v-divider></v-divider> | 1048 | <v-divider></v-divider> |
| 1049 | <v-stepper-step step="2">Fill Student Details</v-stepper-step> | 1049 | <v-stepper-step step="2">Fill Student Details</v-stepper-step> |
| 1050 | </v-stepper-header> | 1050 | </v-stepper-header> |
| 1051 | <v-stepper-items> | 1051 | <v-stepper-items> |
| 1052 | <v-stepper-content step="1"> | 1052 | <v-stepper-content step="1"> |
| 1053 | <v-container fluid class> | 1053 | <v-container fluid class> |
| 1054 | <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> | 1054 | <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 1055 | <v-form ref="parentForm" v-model="valid" lazy-validation> | 1055 | <v-form ref="parentForm" v-model="valid" lazy-validation> |
| 1056 | <v-layout wrap> | 1056 | <v-layout wrap> |
| 1057 | <v-flex xs12 sm6> | 1057 | <v-flex xs12 sm6> |
| 1058 | <!-- FATHER CELL NUMBER visible only on xs and sm screen --> | 1058 | <!-- FATHER CELL NUMBER visible only on xs and sm screen --> |
| 1059 | <v-layout wrap> | 1059 | <v-layout wrap> |
| 1060 | <v-flex xs12 class="pt-4 subheading"> | 1060 | <v-flex xs12 class="pt-4 subheading"> |
| 1061 | <label>Father Cell No:</label> | 1061 | <label>Father Cell No:</label> |
| 1062 | </v-flex> | 1062 | </v-flex> |
| 1063 | <v-flex xs12> | 1063 | <v-flex xs12> |
| 1064 | <v-layout row wrap xs12> | 1064 | <v-layout row wrap xs12> |
| 1065 | <v-flex sm3 class="mt-3"> | 1065 | <v-flex sm3 class="mt-3"> |
| 1066 | <vue-country-code | 1066 | <vue-country-code |
| 1067 | @onSelect="addFatherCellCode" | 1067 | @onSelect="addFatherCellCode" |
| 1068 | class="black--text" | 1068 | class="black--text" |
| 1069 | ></vue-country-code> | 1069 | ></vue-country-code> |
| 1070 | </v-flex> | 1070 | </v-flex> |
| 1071 | 1071 | ||
| 1072 | <v-flex sm9> | 1072 | <v-flex sm9> |
| 1073 | <v-text-field | 1073 | <v-text-field |
| 1074 | v-model.trim="parentData.fatherCellNo" | 1074 | v-model.trim="parentData.fatherCellNo" |
| 1075 | placeholder="fill your father Cell Number" | 1075 | placeholder="fill your father Cell Number" |
| 1076 | type="number" | 1076 | type="number" |
| 1077 | :rules="fatheCellNoRules" | 1077 | :rules="fatheCellNoRules" |
| 1078 | counter="10" | 1078 | counter="10" |
| 1079 | v-on:keyup="getParentDetails()" | 1079 | v-on:keyup="getParentDetails()" |
| 1080 | required | 1080 | required |
| 1081 | ></v-text-field> | 1081 | ></v-text-field> |
| 1082 | </v-flex> | 1082 | </v-flex> |
| 1083 | </v-layout> | 1083 | </v-layout> |
| 1084 | </v-flex> | 1084 | </v-flex> |
| 1085 | </v-layout> | 1085 | </v-layout> |
| 1086 | </v-flex> | 1086 | </v-flex> |
| 1087 | <v-flex xs12 sm6> | 1087 | <v-flex xs12 sm6> |
| 1088 | <v-layout wrap> | 1088 | <v-layout wrap> |
| 1089 | <v-flex xs12 class="pt-4 subheading"> | 1089 | <v-flex xs12 class="pt-4 subheading"> |
| 1090 | <label>Parent Email Id:</label> | 1090 | <label>Parent Email Id:</label> |
| 1091 | </v-flex> | 1091 | </v-flex> |
| 1092 | <v-flex xs12> | 1092 | <v-flex xs12> |
| 1093 | <v-text-field | 1093 | <v-text-field |
| 1094 | placeholder="fill Parent email" | 1094 | placeholder="fill Parent email" |
| 1095 | v-model="parentData.email" | 1095 | v-model="parentData.email" |
| 1096 | type="text" | 1096 | type="text" |
| 1097 | required | 1097 | required |
| 1098 | ></v-text-field> | 1098 | ></v-text-field> |
| 1099 | </v-flex> | 1099 | </v-flex> |
| 1100 | </v-layout> | 1100 | </v-layout> |
| 1101 | </v-flex> | 1101 | </v-flex> |
| 1102 | </v-layout> | 1102 | </v-layout> |
| 1103 | <v-layout wrap> | 1103 | <v-layout wrap> |
| 1104 | <v-flex xs12 sm6> | 1104 | <v-flex xs12 sm6> |
| 1105 | <v-layout wrap> | 1105 | <v-layout wrap> |
| 1106 | <v-flex xs12 class="pt-4 subheading"> | 1106 | <v-flex xs12 class="pt-4 subheading"> |
| 1107 | <label>Father Name:</label> | 1107 | <label>Father Name:</label> |
| 1108 | </v-flex> | 1108 | </v-flex> |
| 1109 | <v-flex xs12> | 1109 | <v-flex xs12> |
| 1110 | <v-text-field | 1110 | <v-text-field |
| 1111 | v-model="parentData.fatherName" | 1111 | v-model="parentData.fatherName" |
| 1112 | placeholder="Fill your father Name" | 1112 | placeholder="Fill your father Name" |
| 1113 | required | 1113 | required |
| 1114 | ></v-text-field> | 1114 | ></v-text-field> |
| 1115 | </v-flex> | 1115 | </v-flex> |
| 1116 | </v-layout> | 1116 | </v-layout> |
| 1117 | </v-flex> | 1117 | </v-flex> |
| 1118 | <v-flex xs12 sm6> | 1118 | <v-flex xs12 sm6> |
| 1119 | <v-layout wrap> | 1119 | <v-layout wrap> |
| 1120 | <v-flex xs12 class="pt-4 subheading"> | 1120 | <v-flex xs12 class="pt-4 subheading"> |
| 1121 | <label>Mother Name:</label> | 1121 | <label>Mother Name:</label> |
| 1122 | </v-flex> | 1122 | </v-flex> |
| 1123 | <v-flex xs12> | 1123 | <v-flex xs12> |
| 1124 | <v-text-field | 1124 | <v-text-field |
| 1125 | v-model="parentData.motherName" | 1125 | v-model="parentData.motherName" |
| 1126 | placeholder="fill your Mother Name" | 1126 | placeholder="fill your Mother Name" |
| 1127 | type="text" | 1127 | type="text" |
| 1128 | required | 1128 | required |
| 1129 | ></v-text-field> | 1129 | ></v-text-field> |
| 1130 | </v-flex> | 1130 | </v-flex> |
| 1131 | </v-layout> | 1131 | </v-layout> |
| 1132 | </v-flex> | 1132 | </v-flex> |
| 1133 | </v-layout> | 1133 | </v-layout> |
| 1134 | <v-layout wrap> | 1134 | <v-layout wrap> |
| 1135 | <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen--> | 1135 | <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen--> |
| 1136 | <v-flex xs12 sm6> | 1136 | <v-flex xs12 sm6> |
| 1137 | <v-layout wrap> | 1137 | <v-layout wrap> |
| 1138 | <v-flex xs12 class="pt-4 subheading"> | 1138 | <v-flex xs12 class="pt-4 subheading"> |
| 1139 | <label>Mother Cell No:</label> | 1139 | <label>Mother Cell No:</label> |
| 1140 | </v-flex> | 1140 | </v-flex> |
| 1141 | <v-flex xs12> | 1141 | <v-flex xs12> |
| 1142 | <v-layout row wrap> | 1142 | <v-layout row wrap> |
| 1143 | <v-flex sm3 class="mt-3"> | 1143 | <v-flex sm3 class="mt-3"> |
| 1144 | <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> | 1144 | <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> |
| 1145 | </v-flex> | 1145 | </v-flex> |
| 1146 | <v-flex sm9> | 1146 | <v-flex sm9> |
| 1147 | <v-text-field | 1147 | <v-text-field |
| 1148 | v-model="parentData.motherCellNo" | 1148 | v-model="parentData.motherCellNo" |
| 1149 | placeholder="Mother Cell Number" | 1149 | placeholder="Mother Cell Number" |
| 1150 | type="number" | 1150 | type="number" |
| 1151 | required | 1151 | required |
| 1152 | ></v-text-field> | 1152 | ></v-text-field> |
| 1153 | </v-flex> | 1153 | </v-flex> |
| 1154 | </v-layout> | 1154 | </v-layout> |
| 1155 | </v-flex> | 1155 | </v-flex> |
| 1156 | </v-layout> | 1156 | </v-layout> |
| 1157 | </v-flex> | 1157 | </v-flex> |
| 1158 | <v-flex xs12 sm6> | 1158 | <v-flex xs12 sm6> |
| 1159 | <v-layout wrap> | 1159 | <v-layout wrap> |
| 1160 | <v-flex xs12 class="pt-4 subheading"> | 1160 | <v-flex xs12 class="pt-4 subheading"> |
| 1161 | <label>Father Profession:</label> | 1161 | <label>Father Profession:</label> |
| 1162 | </v-flex> | 1162 | </v-flex> |
| 1163 | <v-flex xs12> | 1163 | <v-flex xs12> |
| 1164 | <v-text-field | 1164 | <v-text-field |
| 1165 | v-model="parentData.fatherProfession" | 1165 | v-model="parentData.fatherProfession" |
| 1166 | placeholder="fill your father profession" | 1166 | placeholder="fill your father profession" |
| 1167 | ></v-text-field> | 1167 | ></v-text-field> |
| 1168 | </v-flex> | 1168 | </v-flex> |
| 1169 | </v-layout> | 1169 | </v-layout> |
| 1170 | </v-flex> | 1170 | </v-flex> |
| 1171 | </v-layout> | 1171 | </v-layout> |
| 1172 | <v-layout wrap> | 1172 | <v-layout wrap> |
| 1173 | <v-flex xs12 sm6> | 1173 | <v-flex xs12 sm6> |
| 1174 | <v-layout wrap> | 1174 | <v-layout wrap> |
| 1175 | <v-flex xs12 class="pt-4 subheading"> | 1175 | <v-flex xs12 class="pt-4 subheading"> |
| 1176 | <label>Mother Profession:</label> | 1176 | <label>Mother Profession:</label> |
| 1177 | </v-flex> | 1177 | </v-flex> |
| 1178 | <v-flex xs12> | 1178 | <v-flex xs12> |
| 1179 | <v-text-field | 1179 | <v-text-field |
| 1180 | v-model="parentData.motherProfession" | 1180 | v-model="parentData.motherProfession" |
| 1181 | placeholder="fill your mother profession" | 1181 | placeholder="fill your mother profession" |
| 1182 | ></v-text-field> | 1182 | ></v-text-field> |
| 1183 | </v-flex> | 1183 | </v-flex> |
| 1184 | </v-layout> | 1184 | </v-layout> |
| 1185 | </v-flex> | 1185 | </v-flex> |
| 1186 | <v-flex xs12 sm6> | 1186 | <v-flex xs12 sm6> |
| 1187 | <v-layout wrap> | 1187 | <v-layout wrap> |
| 1188 | <v-flex xs12 class="pt-4 subheading"> | 1188 | <v-flex xs12 class="pt-4 subheading"> |
| 1189 | <label>Password:</label> | 1189 | <label>Password:</label> |
| 1190 | </v-flex> | 1190 | </v-flex> |
| 1191 | <v-flex xs12> | 1191 | <v-flex xs12> |
| 1192 | <v-text-field | 1192 | <v-text-field |
| 1193 | v-model="parentData.password" | 1193 | v-model="parentData.password" |
| 1194 | placeholder="Enter Your Password" | 1194 | placeholder="Enter Your Password" |
| 1195 | ></v-text-field> | 1195 | ></v-text-field> |
| 1196 | </v-flex> | 1196 | </v-flex> |
| 1197 | </v-layout> | 1197 | </v-layout> |
| 1198 | </v-flex> | 1198 | </v-flex> |
| 1199 | </v-layout> | 1199 | </v-layout> |
| 1200 | <v-flex sm12 class="hidden-xs-only"> | 1200 | <v-flex sm12 class="hidden-xs-only"> |
| 1201 | <v-card-actions> | 1201 | <v-card-actions> |
| 1202 | <v-spacer></v-spacer> | 1202 | <v-spacer></v-spacer> |
| 1203 | <v-btn | 1203 | <v-btn |
| 1204 | @click="submitParentDetails" | 1204 | @click="submitParentDetails" |
| 1205 | round | 1205 | round |
| 1206 | dark | 1206 | dark |
| 1207 | :loading="loading" | 1207 | :loading="loading" |
| 1208 | v-show="showParent" | 1208 | v-show="showParent" |
| 1209 | class="add-button" | 1209 | class="add-button" |
| 1210 | >Add</v-btn> | 1210 | >Add</v-btn> |
| 1211 | <v-btn | 1211 | <v-btn |
| 1212 | v-show="showNext" | 1212 | v-show="showNext" |
| 1213 | @click="e2 = 2" | 1213 | @click="e2 = 2" |
| 1214 | round | 1214 | round |
| 1215 | dark | 1215 | dark |
| 1216 | class="add-button" | 1216 | class="add-button" |
| 1217 | >Next</v-btn> | 1217 | >Next</v-btn> |
| 1218 | </v-card-actions> | 1218 | </v-card-actions> |
| 1219 | </v-flex> | 1219 | </v-flex> |
| 1220 | <v-flex | 1220 | <v-flex |
| 1221 | xs6 | 1221 | xs6 |
| 1222 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" | 1222 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" |
| 1223 | > | 1223 | > |
| 1224 | <v-btn | 1224 | <v-btn |
| 1225 | @click="submitParentDetails" | 1225 | @click="submitParentDetails" |
| 1226 | round | 1226 | round |
| 1227 | dark | 1227 | dark |
| 1228 | :loading="loading" | 1228 | :loading="loading" |
| 1229 | v-show="showParent" | 1229 | v-show="showParent" |
| 1230 | class="add-button" | 1230 | class="add-button" |
| 1231 | >Add</v-btn> | 1231 | >Add</v-btn> |
| 1232 | <v-btn | 1232 | <v-btn |
| 1233 | v-show="showNext" | 1233 | v-show="showNext" |
| 1234 | @click="e2 = 2" | 1234 | @click="e2 = 2" |
| 1235 | round | 1235 | round |
| 1236 | dark | 1236 | dark |
| 1237 | class="add-button" | 1237 | class="add-button" |
| 1238 | >Next</v-btn> | 1238 | >Next</v-btn> |
| 1239 | </v-flex> | 1239 | </v-flex> |
| 1240 | </v-form> | 1240 | </v-form> |
| 1241 | </v-flex> | 1241 | </v-flex> |
| 1242 | <!-- FATHER CELL NUMBER - HIDDEN xs and sm screen --> | 1242 | <!-- FATHER CELL NUMBER - HIDDEN xs and sm screen --> |
| 1243 | <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> | 1243 | <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> |
| 1244 | <v-form ref="parentFormLgScr" v-model="valid" lazy-validation> | 1244 | <v-form ref="parentFormLgScr" v-model="valid" lazy-validation> |
| 1245 | <v-layout wrap> | 1245 | <v-layout wrap> |
| 1246 | <v-flex xs12 sm6> | 1246 | <v-flex xs12 sm6> |
| 1247 | <v-layout> | 1247 | <v-layout> |
| 1248 | <v-flex xs4 class="pt-4 subheading"> | 1248 | <v-flex xs4 class="pt-4 subheading"> |
| 1249 | <label class="right">Father Cell No:</label> | 1249 | <label class="right">Father Cell No:</label> |
| 1250 | </v-flex> | 1250 | </v-flex> |
| 1251 | <v-flex xs8 class="ml-3"> | 1251 | <v-flex xs8 class="ml-3"> |
| 1252 | <v-layout row wrap> | 1252 | <v-layout row wrap> |
| 1253 | <v-flex md3 class="mt-3"> | 1253 | <v-flex md3 class="mt-3"> |
| 1254 | <vue-country-code | 1254 | <vue-country-code |
| 1255 | @onSelect="addFatherCellCode" | 1255 | @onSelect="addFatherCellCode" |
| 1256 | class="black--text" | 1256 | class="black--text" |
| 1257 | ></vue-country-code> | 1257 | ></vue-country-code> |
| 1258 | </v-flex> | 1258 | </v-flex> |
| 1259 | <v-flex md9> | 1259 | <v-flex md9> |
| 1260 | <v-text-field | 1260 | <v-text-field |
| 1261 | v-model.trim="parentData.fatherCellNo" | 1261 | v-model.trim="parentData.fatherCellNo" |
| 1262 | placeholder="fill your father Cell Number" | 1262 | placeholder="fill your father Cell Number" |
| 1263 | type="number" | 1263 | type="number" |
| 1264 | :rules="fatheCellNoRules" | 1264 | :rules="fatheCellNoRules" |
| 1265 | counter="10" | 1265 | counter="10" |
| 1266 | required | 1266 | required |
| 1267 | v-on:keyup="getParentDetails()" | 1267 | v-on:keyup="getParentDetails()" |
| 1268 | ></v-text-field> | 1268 | ></v-text-field> |
| 1269 | </v-flex> | 1269 | </v-flex> |
| 1270 | </v-layout> | 1270 | </v-layout> |
| 1271 | </v-flex> | 1271 | </v-flex> |
| 1272 | </v-layout> | 1272 | </v-layout> |
| 1273 | </v-flex> | 1273 | </v-flex> |
| 1274 | <v-flex xs12 sm6> | 1274 | <v-flex xs12 sm6> |
| 1275 | <v-layout> | 1275 | <v-layout> |
| 1276 | <v-flex xs4 class="pt-4 subheading"> | 1276 | <v-flex xs4 class="pt-4 subheading"> |
| 1277 | <label class="right">Parent Email Id:</label> | 1277 | <label class="right">Parent Email Id:</label> |
| 1278 | </v-flex> | 1278 | </v-flex> |
| 1279 | <v-flex xs8 class="ml-3"> | 1279 | <v-flex xs8 class="ml-3"> |
| 1280 | <v-text-field | 1280 | <v-text-field |
| 1281 | placeholder="fill Parent email" | 1281 | placeholder="fill Parent email" |
| 1282 | v-model="parentData.email" | 1282 | v-model="parentData.email" |
| 1283 | type="text" | 1283 | type="text" |
| 1284 | required | 1284 | required |
| 1285 | ></v-text-field> | 1285 | ></v-text-field> |
| 1286 | </v-flex> | 1286 | </v-flex> |
| 1287 | </v-layout> | 1287 | </v-layout> |
| 1288 | </v-flex> | 1288 | </v-flex> |
| 1289 | </v-layout> | 1289 | </v-layout> |
| 1290 | <v-layout wrap> | 1290 | <v-layout wrap> |
| 1291 | <v-flex xs12 sm6> | 1291 | <v-flex xs12 sm6> |
| 1292 | <v-layout> | 1292 | <v-layout> |
| 1293 | <v-flex xs4 class="pt-4 subheading"> | 1293 | <v-flex xs4 class="pt-4 subheading"> |
| 1294 | <label class="right">Father Name:</label> | 1294 | <label class="right">Father Name:</label> |
| 1295 | </v-flex> | 1295 | </v-flex> |
| 1296 | <v-flex xs8 class="ml-3"> | 1296 | <v-flex xs8 class="ml-3"> |
| 1297 | <v-text-field | 1297 | <v-text-field |
| 1298 | v-model="parentData.fatherName" | 1298 | v-model="parentData.fatherName" |
| 1299 | placeholder="Fill your father Name" | 1299 | placeholder="Fill your father Name" |
| 1300 | required | 1300 | required |
| 1301 | ></v-text-field> | 1301 | ></v-text-field> |
| 1302 | </v-flex> | 1302 | </v-flex> |
| 1303 | </v-layout> | 1303 | </v-layout> |
| 1304 | </v-flex> | 1304 | </v-flex> |
| 1305 | <v-flex xs12 sm6> | 1305 | <v-flex xs12 sm6> |
| 1306 | <v-layout> | 1306 | <v-layout> |
| 1307 | <v-flex xs4 class="pt-4 subheading"> | 1307 | <v-flex xs4 class="pt-4 subheading"> |
| 1308 | <label class="right">Mother Name:</label> | 1308 | <label class="right">Mother Name:</label> |
| 1309 | </v-flex> | 1309 | </v-flex> |
| 1310 | <v-flex xs8 class="ml-3"> | 1310 | <v-flex xs8 class="ml-3"> |
| 1311 | <v-text-field | 1311 | <v-text-field |
| 1312 | v-model="parentData.motherName" | 1312 | v-model="parentData.motherName" |
| 1313 | placeholder="fill your Mother Name" | 1313 | placeholder="fill your Mother Name" |
| 1314 | type="text" | 1314 | type="text" |
| 1315 | required | 1315 | required |
| 1316 | ></v-text-field> | 1316 | ></v-text-field> |
| 1317 | </v-flex> | 1317 | </v-flex> |
| 1318 | </v-layout> | 1318 | </v-layout> |
| 1319 | </v-flex> | 1319 | </v-flex> |
| 1320 | </v-layout> | 1320 | </v-layout> |
| 1321 | <v-layout wrap> | 1321 | <v-layout wrap> |
| 1322 | <!-- MOTHER CELL NUMBER HIDDEN ON xs and sm screen --> | 1322 | <!-- MOTHER CELL NUMBER HIDDEN ON xs and sm screen --> |
| 1323 | <v-flex xs12 sm6> | 1323 | <v-flex xs12 sm6> |
| 1324 | <v-layout> | 1324 | <v-layout> |
| 1325 | <v-flex xs4 class="pt-4 subheading"> | 1325 | <v-flex xs4 class="pt-4 subheading"> |
| 1326 | <label class="right">Mother Cell No:</label> | 1326 | <label class="right">Mother Cell No:</label> |
| 1327 | </v-flex> | 1327 | </v-flex> |
| 1328 | <v-flex xs8 class="ml-3"> | 1328 | <v-flex xs8 class="ml-3"> |
| 1329 | <v-layout row wrap> | 1329 | <v-layout row wrap> |
| 1330 | <v-flex md3 class="mt-3"> | 1330 | <v-flex md3 class="mt-3"> |
| 1331 | <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> | 1331 | <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> |
| 1332 | </v-flex> | 1332 | </v-flex> |
| 1333 | <v-flex md9> | 1333 | <v-flex md9> |
| 1334 | <v-text-field | 1334 | <v-text-field |
| 1335 | v-model="parentData.motherCellNo" | 1335 | v-model="parentData.motherCellNo" |
| 1336 | placeholder="fill your Mother Cell Number" | 1336 | placeholder="fill your Mother Cell Number" |
| 1337 | type="number" | 1337 | type="number" |
| 1338 | required | 1338 | required |
| 1339 | ></v-text-field> | 1339 | ></v-text-field> |
| 1340 | </v-flex> | 1340 | </v-flex> |
| 1341 | </v-layout> | 1341 | </v-layout> |
| 1342 | </v-flex> | 1342 | </v-flex> |
| 1343 | </v-layout> | 1343 | </v-layout> |
| 1344 | </v-flex> | 1344 | </v-flex> |
| 1345 | <v-flex xs12 sm6> | 1345 | <v-flex xs12 sm6> |
| 1346 | <v-layout> | 1346 | <v-layout> |
| 1347 | <v-flex xs4 class="pt-4 subheading"> | 1347 | <v-flex xs4 class="pt-4 subheading"> |
| 1348 | <label class="right">Father Profession:</label> | 1348 | <label class="right">Father Profession:</label> |
| 1349 | </v-flex> | 1349 | </v-flex> |
| 1350 | <v-flex xs8 class="ml-3"> | 1350 | <v-flex xs8 class="ml-3"> |
| 1351 | <v-text-field | 1351 | <v-text-field |
| 1352 | v-model="parentData.fatherProfession" | 1352 | v-model="parentData.fatherProfession" |
| 1353 | placeholder="fill your father profession" | 1353 | placeholder="fill your father profession" |
| 1354 | ></v-text-field> | 1354 | ></v-text-field> |
| 1355 | </v-flex> | 1355 | </v-flex> |
| 1356 | </v-layout> | 1356 | </v-layout> |
| 1357 | </v-flex> | 1357 | </v-flex> |
| 1358 | </v-layout> | 1358 | </v-layout> |
| 1359 | <v-layout wrap> | 1359 | <v-layout wrap> |
| 1360 | <v-flex xs12 sm6> | 1360 | <v-flex xs12 sm6> |
| 1361 | <v-layout> | 1361 | <v-layout> |
| 1362 | <v-flex xs4 class="pt-4 subheading"> | 1362 | <v-flex xs4 class="pt-4 subheading"> |
| 1363 | <label class="right">Mother Profession:</label> | 1363 | <label class="right">Mother Profession:</label> |
| 1364 | </v-flex> | 1364 | </v-flex> |
| 1365 | <v-flex xs8 class="ml-3"> | 1365 | <v-flex xs8 class="ml-3"> |
| 1366 | <v-text-field | 1366 | <v-text-field |
| 1367 | v-model="parentData.motherProfession" | 1367 | v-model="parentData.motherProfession" |
| 1368 | placeholder="fill your mother profession" | 1368 | placeholder="fill your mother profession" |
| 1369 | ></v-text-field> | 1369 | ></v-text-field> |
| 1370 | </v-flex> | 1370 | </v-flex> |
| 1371 | </v-layout> | 1371 | </v-layout> |
| 1372 | </v-flex> | 1372 | </v-flex> |
| 1373 | <v-flex xs12 sm6> | 1373 | <v-flex xs12 sm6> |
| 1374 | <v-layout> | 1374 | <v-layout> |
| 1375 | <v-flex xs4 class="pt-4 subheading"> | 1375 | <v-flex xs4 class="pt-4 subheading"> |
| 1376 | <label class="right">Password:</label> | 1376 | <label class="right">Password:</label> |
| 1377 | </v-flex> | 1377 | </v-flex> |
| 1378 | <v-flex xs8 class="ml-3"> | 1378 | <v-flex xs8 class="ml-3"> |
| 1379 | <v-text-field | 1379 | <v-text-field |
| 1380 | :append-icon="e1 ? 'visibility_off' : 'visibility'" | 1380 | :append-icon="e1 ? 'visibility_off' : 'visibility'" |
| 1381 | :append-icon-cb="() => (e1 = !e1)" | 1381 | :append-icon-cb="() => (e1 = !e1)" |
| 1382 | :type="e1 ? 'password' : 'text'" | 1382 | :type="e1 ? 'password' : 'text'" |
| 1383 | :rules="password" | 1383 | :rules="password" |
| 1384 | v-model="parentData.password" | 1384 | v-model="parentData.password" |
| 1385 | placeholder="Enter Your Password" | 1385 | placeholder="Enter Your Password" |
| 1386 | :disabled="isFatherCellExists" | 1386 | :disabled="isFatherCellExists" |
| 1387 | required | 1387 | required |
| 1388 | ></v-text-field> | 1388 | ></v-text-field> |
| 1389 | </v-flex> | 1389 | </v-flex> |
| 1390 | </v-layout> | 1390 | </v-layout> |
| 1391 | </v-flex> | 1391 | </v-flex> |
| 1392 | </v-layout> | 1392 | </v-layout> |
| 1393 | <v-flex sm12 class="hidden-xs-only"> | 1393 | <v-flex sm12 class="hidden-xs-only"> |
| 1394 | <v-card-actions> | 1394 | <v-card-actions> |
| 1395 | <v-spacer></v-spacer> | 1395 | <v-spacer></v-spacer> |
| 1396 | <v-btn | 1396 | <v-btn |
| 1397 | @click="submitParentDetails" | 1397 | @click="submitParentDetails" |
| 1398 | round | 1398 | round |
| 1399 | dark | 1399 | dark |
| 1400 | :loading="loading" | 1400 | :loading="loading" |
| 1401 | v-show="showParent" | 1401 | v-show="showParent" |
| 1402 | class="add-button" | 1402 | class="add-button" |
| 1403 | >Add</v-btn> | 1403 | >Add</v-btn> |
| 1404 | <v-btn | 1404 | <v-btn |
| 1405 | v-show="showNext" | 1405 | v-show="showNext" |
| 1406 | @click="e2 = 2" | 1406 | @click="e2 = 2" |
| 1407 | round | 1407 | round |
| 1408 | dark | 1408 | dark |
| 1409 | class="add-button" | 1409 | class="add-button" |
| 1410 | >Next</v-btn> | 1410 | >Next</v-btn> |
| 1411 | </v-card-actions> | 1411 | </v-card-actions> |
| 1412 | </v-flex> | 1412 | </v-flex> |
| 1413 | <v-flex | 1413 | <v-flex |
| 1414 | xs6 | 1414 | xs6 |
| 1415 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" | 1415 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" |
| 1416 | > | 1416 | > |
| 1417 | <v-btn | 1417 | <v-btn |
| 1418 | @click="submitParentDetails" | 1418 | @click="submitParentDetails" |
| 1419 | round | 1419 | round |
| 1420 | dark | 1420 | dark |
| 1421 | :loading="loading" | 1421 | :loading="loading" |
| 1422 | v-show="showParent" | 1422 | v-show="showParent" |
| 1423 | class="add-button" | 1423 | class="add-button" |
| 1424 | >Add</v-btn> | 1424 | >Add</v-btn> |
| 1425 | <v-btn | 1425 | <v-btn |
| 1426 | v-show="showNext" | 1426 | v-show="showNext" |
| 1427 | @click="e2 = 2" | 1427 | @click="e2 = 2" |
| 1428 | round | 1428 | round |
| 1429 | dark | 1429 | dark |
| 1430 | class="add-button" | 1430 | class="add-button" |
| 1431 | >Next</v-btn> | 1431 | >Next</v-btn> |
| 1432 | </v-flex> | 1432 | </v-flex> |
| 1433 | </v-form> | 1433 | </v-form> |
| 1434 | </v-flex> | 1434 | </v-flex> |
| 1435 | </v-container> | 1435 | </v-container> |
| 1436 | </v-stepper-content> | 1436 | </v-stepper-content> |
| 1437 | <v-stepper-content step="2"> | 1437 | <v-stepper-content step="2"> |
| 1438 | <v-flex xs12 sm12> | 1438 | <v-flex xs12 sm12> |
| 1439 | <v-form ref="form" v-model="valid" lazy-validation> | 1439 | <v-form ref="form" v-model="valid" lazy-validation> |
| 1440 | <v-layout> | 1440 | <v-layout> |
| 1441 | <v-flex | 1441 | <v-flex |
| 1442 | xs12 | 1442 | xs12 |
| 1443 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 1443 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 1444 | > | 1444 | > |
| 1445 | <v-avatar size="100px"> | 1445 | <v-avatar size="100px"> |
| 1446 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 1446 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 1447 | </v-avatar> | 1447 | </v-avatar> |
| 1448 | <input | 1448 | <input |
| 1449 | type="file" | 1449 | type="file" |
| 1450 | style="display: none" | 1450 | style="display: none" |
| 1451 | ref="image" | 1451 | ref="image" |
| 1452 | accept="image/*" | 1452 | accept="image/*" |
| 1453 | @change="onFilePicked" | 1453 | @change="onFilePicked" |
| 1454 | /> | 1454 | /> |
| 1455 | <img | 1455 | <img |
| 1456 | :src="imageData.imageUrl" | 1456 | :src="imageData.imageUrl" |
| 1457 | height="150" | 1457 | height="150" |
| 1458 | v-if="imageUrl" | 1458 | v-if="imageUrl" |
| 1459 | style="border-radius:50%; width:200px" | 1459 | style="border-radius:50%; width:200px" |
| 1460 | /> | 1460 | /> |
| 1461 | </v-flex> | 1461 | </v-flex> |
| 1462 | </v-layout> | 1462 | </v-layout> |
| 1463 | <v-layout wrap> | 1463 | <v-layout wrap> |
| 1464 | <v-flex xs12 sm6> | 1464 | <v-flex xs12 sm6> |
| 1465 | <v-layout> | 1465 | <v-layout> |
| 1466 | <v-flex x4 sm4 class="pt-4 subheading"> | 1466 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 1467 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 1467 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 1468 | <label | 1468 | <label |
| 1469 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1469 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1470 | >Class:</label> | 1470 | >Class:</label> |
| 1471 | </v-flex> | 1471 | </v-flex> |
| 1472 | <v-flex xs8 sm8 class="ml-3"> | 1472 | <v-flex xs8 sm8 class="ml-3"> |
| 1473 | <v-select | 1473 | <v-select |
| 1474 | :items="addclass" | 1474 | :items="addclass" |
| 1475 | label="Select Class" | 1475 | label="Select Class" |
| 1476 | v-model="addStudents.select" | 1476 | v-model="addStudents.select" |
| 1477 | item-text="classNum" | 1477 | item-text="classNum" |
| 1478 | item-value="_id" | 1478 | item-value="_id" |
| 1479 | name="Select Class" | 1479 | name="Select Class" |
| 1480 | :rules="classRules" | 1480 | :rules="classRules" |
| 1481 | @change="getSection(addStudents.select)" | 1481 | @change="getSection(addStudents.select)" |
| 1482 | required | 1482 | required |
| 1483 | ></v-select> | 1483 | ></v-select> |
| 1484 | </v-flex> | 1484 | </v-flex> |
| 1485 | </v-layout> | 1485 | </v-layout> |
| 1486 | </v-flex> | 1486 | </v-flex> |
| 1487 | <v-flex xs12 sm6> | 1487 | <v-flex xs12 sm6> |
| 1488 | <v-layout> | 1488 | <v-layout> |
| 1489 | <v-flex xs4 class="pt-4 subheading"> | 1489 | <v-flex xs4 class="pt-4 subheading"> |
| 1490 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 1490 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 1491 | <label | 1491 | <label |
| 1492 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1492 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1493 | >Section:</label> | 1493 | >Section:</label> |
| 1494 | </v-flex> | 1494 | </v-flex> |
| 1495 | <v-flex xs8 class="ml-3"> | 1495 | <v-flex xs8 class="ml-3"> |
| 1496 | <v-select | 1496 | <v-select |
| 1497 | :items="addSection" | 1497 | :items="addSection" |
| 1498 | label="Select Section" | 1498 | label="Select Section" |
| 1499 | v-model="addStudents.selectSection" | 1499 | v-model="addStudents.selectSection" |
| 1500 | item-text="name" | 1500 | item-text="name" |
| 1501 | item-value="_id" | 1501 | item-value="_id" |
| 1502 | name="Select Section" | 1502 | name="Select Section" |
| 1503 | :rules="sectionRules" | 1503 | :rules="sectionRules" |
| 1504 | required | 1504 | required |
| 1505 | ></v-select> | 1505 | ></v-select> |
| 1506 | </v-flex> | 1506 | </v-flex> |
| 1507 | </v-layout> | 1507 | </v-layout> |
| 1508 | </v-flex> | 1508 | </v-flex> |
| 1509 | </v-layout> | 1509 | </v-layout> |
| 1510 | <v-layout wrap> | 1510 | <v-layout wrap> |
| 1511 | <v-flex xs12 sm6> | 1511 | <v-flex xs12 sm6> |
| 1512 | <v-layout> | 1512 | <v-layout> |
| 1513 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1513 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1514 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 1514 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 1515 | <label | 1515 | <label |
| 1516 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1516 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1517 | >Name:</label> | 1517 | >Name:</label> |
| 1518 | </v-flex> | 1518 | </v-flex> |
| 1519 | <v-flex xs8 sm8 class="ml-3"> | 1519 | <v-flex xs8 sm8 class="ml-3"> |
| 1520 | <v-text-field | 1520 | <v-text-field |
| 1521 | v-model="addStudents.name" | 1521 | v-model="addStudents.name" |
| 1522 | placeholder="fill your full Name" | 1522 | placeholder="fill your full Name" |
| 1523 | name="name" | 1523 | name="name" |
| 1524 | type="text" | 1524 | type="text" |
| 1525 | :rules="nameRules" | 1525 | :rules="nameRules" |
| 1526 | required | 1526 | required |
| 1527 | ></v-text-field> | 1527 | ></v-text-field> |
| 1528 | </v-flex> | 1528 | </v-flex> |
| 1529 | </v-layout> | 1529 | </v-layout> |
| 1530 | </v-flex> | 1530 | </v-flex> |
| 1531 | <v-flex xs12 sm6> | 1531 | <v-flex xs12 sm6> |
| 1532 | <v-layout> | 1532 | <v-layout> |
| 1533 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1533 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1534 | <label class="right">Email:</label> | 1534 | <label class="right">Email:</label> |
| 1535 | </v-flex> | 1535 | </v-flex> |
| 1536 | <v-flex xs8 sm8 class="ml-3"> | 1536 | <v-flex xs8 sm8 class="ml-3"> |
| 1537 | <v-text-field | 1537 | <v-text-field |
| 1538 | placeholder="fill your email" | 1538 | placeholder="fill your email" |
| 1539 | v-model="addStudents.email" | 1539 | v-model="addStudents.email" |
| 1540 | type="text" | 1540 | type="text" |
| 1541 | name="email" | 1541 | name="email" |
| 1542 | required | 1542 | required |
| 1543 | ></v-text-field> | 1543 | ></v-text-field> |
| 1544 | </v-flex> | 1544 | </v-flex> |
| 1545 | </v-layout> | 1545 | </v-layout> |
| 1546 | </v-flex> | 1546 | </v-flex> |
| 1547 | </v-layout> | 1547 | </v-layout> |
| 1548 | <v-layout wrap> | 1548 | <v-layout wrap> |
| 1549 | <v-flex xs12 sm6> | 1549 | <v-flex xs12 sm6> |
| 1550 | <v-layout> | 1550 | <v-layout> |
| 1551 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1551 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1552 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 1552 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 1553 | <label | 1553 | <label |
| 1554 | class="right hidden-lg-only hidden-xl-only hidden-md-only" | 1554 | class="right hidden-lg-only hidden-xl-only hidden-md-only" |
| 1555 | >D.O.B:</label> | 1555 | >D.O.B:</label> |
| 1556 | </v-flex> | 1556 | </v-flex> |
| 1557 | <v-flex xs8 sm8 class="ml-3"> | 1557 | <v-flex xs8 sm8 class="ml-3"> |
| 1558 | <v-menu | 1558 | <v-menu |
| 1559 | ref="menu" | 1559 | ref="menu" |
| 1560 | :close-on-content-click="false" | 1560 | :close-on-content-click="false" |
| 1561 | v-model="menu" | 1561 | v-model="menu" |
| 1562 | :nudge-right="40" | 1562 | :nudge-right="40" |
| 1563 | lazy | 1563 | lazy |
| 1564 | transition="scale-transition" | 1564 | transition="scale-transition" |
| 1565 | offset-y | 1565 | offset-y |
| 1566 | full-width | 1566 | full-width |
| 1567 | min-width="290px" | 1567 | min-width="290px" |
| 1568 | > | 1568 | > |
| 1569 | <v-text-field | 1569 | <v-text-field |
| 1570 | slot="activator" | 1570 | slot="activator" |
| 1571 | :rules="dateRules" | 1571 | :rules="dateRules" |
| 1572 | v-model="addStudents.date" | 1572 | v-model="addStudents.date" |
| 1573 | placeholder="Select date" | 1573 | placeholder="Select date" |
| 1574 | ></v-text-field> | 1574 | ></v-text-field> |
| 1575 | <v-date-picker | 1575 | <v-date-picker |
| 1576 | ref="picker" | 1576 | ref="picker" |
| 1577 | v-model="addStudents.date" | 1577 | v-model="addStudents.date" |
| 1578 | :max="new Date().toISOString().substr(0, 10)" | 1578 | :max="new Date().toISOString().substr(0, 10)" |
| 1579 | min="1950-01-01" | 1579 | min="1950-01-01" |
| 1580 | @input="menu = false" | 1580 | @input="menu = false" |
| 1581 | ></v-date-picker> | 1581 | ></v-date-picker> |
| 1582 | </v-menu> | 1582 | </v-menu> |
| 1583 | </v-flex> | 1583 | </v-flex> |
| 1584 | </v-layout> | 1584 | </v-layout> |
| 1585 | </v-flex> | 1585 | </v-flex> |
| 1586 | <v-flex xs12 sm6> | 1586 | <v-flex xs12 sm6> |
| 1587 | <v-layout> | 1587 | <v-layout> |
| 1588 | <v-flex xs4 class="pt-4 subheading"> | 1588 | <v-flex xs4 class="pt-4 subheading"> |
| 1589 | <label class="right">City:</label> | 1589 | <label class="right">City:</label> |
| 1590 | </v-flex> | 1590 | </v-flex> |
| 1591 | <v-flex xs8 class="ml-3"> | 1591 | <v-flex xs8 class="ml-3"> |
| 1592 | <v-text-field | 1592 | <v-text-field |
| 1593 | v-model="addStudents.city" | 1593 | v-model="addStudents.city" |
| 1594 | placeholder="fill your City Name" | 1594 | placeholder="fill your City Name" |
| 1595 | name="City" | 1595 | name="City" |
| 1596 | type="text" | 1596 | type="text" |
| 1597 | :rules="cityRules" | 1597 | :rules="cityRules" |
| 1598 | required | 1598 | required |
| 1599 | ></v-text-field> | 1599 | ></v-text-field> |
| 1600 | </v-flex> | 1600 | </v-flex> |
| 1601 | </v-layout> | 1601 | </v-layout> |
| 1602 | </v-flex> | 1602 | </v-flex> |
| 1603 | </v-layout> | 1603 | </v-layout> |
| 1604 | <v-layout wrap> | 1604 | <v-layout wrap> |
| 1605 | <v-flex xs12 sm6> | 1605 | <v-flex xs12 sm6> |
| 1606 | <v-layout> | 1606 | <v-layout> |
| 1607 | <v-flex xs4 class="pt-4 subheading"> | 1607 | <v-flex xs4 class="pt-4 subheading"> |
| 1608 | <label class="right">State:</label> | 1608 | <label class="right">State:</label> |
| 1609 | </v-flex> | 1609 | </v-flex> |
| 1610 | <v-flex xs8 class="ml-3"> | 1610 | <v-flex xs8 class="ml-3"> |
| 1611 | <v-text-field | 1611 | <v-text-field |
| 1612 | v-model="addStudents.state" | 1612 | v-model="addStudents.state" |
| 1613 | placeholder="fill your State Name" | 1613 | placeholder="fill your State Name" |
| 1614 | name="state" | 1614 | name="state" |
| 1615 | type="text" | 1615 | type="text" |
| 1616 | :rules="stateRules" | 1616 | :rules="stateRules" |
| 1617 | required | 1617 | required |
| 1618 | ></v-text-field> | 1618 | ></v-text-field> |
| 1619 | </v-flex> | 1619 | </v-flex> |
| 1620 | </v-layout> | 1620 | </v-layout> |
| 1621 | </v-flex> | 1621 | </v-flex> |
| 1622 | <v-flex xs12 sm6> | 1622 | <v-flex xs12 sm6> |
| 1623 | <v-layout> | 1623 | <v-layout> |
| 1624 | <v-flex xs4 class="pt-4 subheading"> | 1624 | <v-flex xs4 class="pt-4 subheading"> |
| 1625 | <label class="right">Pincode:</label> | 1625 | <label class="right">Pincode:</label> |
| 1626 | </v-flex> | 1626 | </v-flex> |
| 1627 | <v-flex xs8 class="ml-3"> | 1627 | <v-flex xs8 class="ml-3"> |
| 1628 | <v-text-field | 1628 | <v-text-field |
| 1629 | v-model="addStudents.pincode" | 1629 | v-model="addStudents.pincode" |
| 1630 | placeholder="fill your pincode" | 1630 | placeholder="fill your pincode" |
| 1631 | name="pincode" | 1631 | name="pincode" |
| 1632 | type="number" | 1632 | type="number" |
| 1633 | :rules="pincode" | 1633 | :rules="pincode" |
| 1634 | required | 1634 | required |
| 1635 | ></v-text-field> | 1635 | ></v-text-field> |
| 1636 | </v-flex> | 1636 | </v-flex> |
| 1637 | </v-layout> | 1637 | </v-layout> |
| 1638 | </v-flex> | 1638 | </v-flex> |
| 1639 | </v-layout> | 1639 | </v-layout> |
| 1640 | <v-layout wrap> | 1640 | <v-layout wrap> |
| 1641 | <v-flex xs12 sm6> | 1641 | <v-flex xs12 sm6> |
| 1642 | <v-layout> | 1642 | <v-layout> |
| 1643 | <v-flex xs4 class="pt-4 subheading"> | 1643 | <v-flex xs4 class="pt-4 subheading"> |
| 1644 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 1644 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 1645 | <label | 1645 | <label |
| 1646 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1646 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1647 | >Mobile:</label> | 1647 | >Mobile:</label> |
| 1648 | </v-flex> | 1648 | </v-flex> |
| 1649 | <v-flex xs8 class="ml-3"> | 1649 | <v-flex xs8 class="ml-3"> |
| 1650 | <v-layout row wrap> | 1650 | <v-layout row wrap> |
| 1651 | <v-flex xs3 class="mt-3"> | 1651 | <v-flex xs3 class="mt-3"> |
| 1652 | <vue-country-code | 1652 | <vue-country-code |
| 1653 | @onSelect="addStudentMobileCode" | 1653 | @onSelect="addStudentMobileCode" |
| 1654 | class="black--text" | 1654 | class="black--text" |
| 1655 | ></vue-country-code> | 1655 | ></vue-country-code> |
| 1656 | </v-flex> | 1656 | </v-flex> |
| 1657 | <v-flex xs9> | 1657 | <v-flex xs9> |
| 1658 | <v-text-field | 1658 | <v-text-field |
| 1659 | v-model="addStudents.mobile" | 1659 | v-model="addStudents.mobile" |
| 1660 | placeholder="fill your MobileNo" | 1660 | placeholder="fill your MobileNo" |
| 1661 | name="mobileNo" | 1661 | name="mobileNo" |
| 1662 | type="number" | 1662 | type="number" |
| 1663 | ></v-text-field> | 1663 | ></v-text-field> |
| 1664 | </v-flex> | 1664 | </v-flex> |
| 1665 | </v-layout> | 1665 | </v-layout> |
| 1666 | </v-flex> | 1666 | </v-flex> |
| 1667 | </v-layout> | 1667 | </v-layout> |
| 1668 | </v-flex> | 1668 | </v-flex> |
| 1669 | <v-flex xs12 sm6> | 1669 | <v-flex xs12 sm6> |
| 1670 | <v-layout> | 1670 | <v-layout> |
| 1671 | <v-flex xs4 class="pt-4 subheading"> | 1671 | <v-flex xs4 class="pt-4 subheading"> |
| 1672 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 1672 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 1673 | <label | 1673 | <label |
| 1674 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1674 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1675 | >Country:</label> | 1675 | >Country:</label> |
| 1676 | </v-flex> | 1676 | </v-flex> |
| 1677 | <v-flex xs8 class="ml-3"> | 1677 | <v-flex xs8 class="ml-3"> |
| 1678 | <v-autocomplete | 1678 | <v-autocomplete |
| 1679 | v-model="addStudents.country" | 1679 | v-model="addStudents.country" |
| 1680 | :rules="country" | 1680 | :rules="country" |
| 1681 | :items="countries" | 1681 | :items="countries" |
| 1682 | placeholder="Select Country Name" | 1682 | placeholder="Select Country Name" |
| 1683 | required | 1683 | required |
| 1684 | ></v-autocomplete> | 1684 | ></v-autocomplete> |
| 1685 | </v-flex> | 1685 | </v-flex> |
| 1686 | </v-layout> | 1686 | </v-layout> |
| 1687 | </v-flex> | 1687 | </v-flex> |
| 1688 | </v-layout> | 1688 | </v-layout> |
| 1689 | <v-layout wrap> | 1689 | <v-layout wrap> |
| 1690 | <v-flex xs12 sm6> | 1690 | <v-flex xs12 sm6> |
| 1691 | <v-layout> | 1691 | <v-layout> |
| 1692 | <v-flex xs4 class="pt-4 subheading"> | 1692 | <v-flex xs4 class="pt-4 subheading"> |
| 1693 | <label class="right">Gender:</label> | 1693 | <label class="right">Gender:</label> |
| 1694 | </v-flex> | 1694 | </v-flex> |
| 1695 | <v-flex xs8 class="ml-3"> | 1695 | <v-flex xs8 class="ml-3"> |
| 1696 | <v-select | 1696 | <v-select |
| 1697 | :items="gender" | 1697 | :items="gender" |
| 1698 | v-model="addStudents.gender" | 1698 | v-model="addStudents.gender" |
| 1699 | :rules="genderRules" | 1699 | :rules="genderRules" |
| 1700 | label="Select Gender" | 1700 | label="Select Gender" |
| 1701 | required | 1701 | required |
| 1702 | ></v-select> | 1702 | ></v-select> |
| 1703 | </v-flex> | 1703 | </v-flex> |
| 1704 | </v-layout> | 1704 | </v-layout> |
| 1705 | </v-flex> | 1705 | </v-flex> |
| 1706 | <v-flex xs12 sm6> | 1706 | <v-flex xs12 sm6> |
| 1707 | <v-layout> | 1707 | <v-layout> |
| 1708 | <v-flex xs4 class="pt-4 subheading"> | 1708 | <v-flex xs4 class="pt-4 subheading"> |
| 1709 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> | 1709 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> |
| 1710 | <label | 1710 | <label |
| 1711 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1711 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1712 | >Blood:</label> | 1712 | >Blood:</label> |
| 1713 | </v-flex> | 1713 | </v-flex> |
| 1714 | <v-flex xs8 class="ml-3"> | 1714 | <v-flex xs8 class="ml-3"> |
| 1715 | <v-text-field | 1715 | <v-text-field |
| 1716 | v-model="addStudents.bloodGroup" | 1716 | v-model="addStudents.bloodGroup" |
| 1717 | placeholder="Fill your Blood Group" | 1717 | placeholder="Fill your Blood Group" |
| 1718 | required | 1718 | required |
| 1719 | ></v-text-field> | 1719 | ></v-text-field> |
| 1720 | </v-flex> | 1720 | </v-flex> |
| 1721 | </v-layout> | 1721 | </v-layout> |
| 1722 | </v-flex> | 1722 | </v-flex> |
| 1723 | </v-layout> | 1723 | </v-layout> |
| 1724 | <v-layout wrap> | 1724 | <v-layout wrap> |
| 1725 | <v-flex xs12 sm6> | 1725 | <v-flex xs12 sm6> |
| 1726 | <v-layout> | 1726 | <v-layout> |
| 1727 | <v-flex xs4 class="pt-4 subheading"> | 1727 | <v-flex xs4 class="pt-4 subheading"> |
| 1728 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 1728 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 1729 | <label | 1729 | <label |
| 1730 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1730 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1731 | >Roll No:</label> | 1731 | >Roll No:</label> |
| 1732 | </v-flex> | 1732 | </v-flex> |
| 1733 | <v-flex xs8 class="ml-3"> | 1733 | <v-flex xs8 class="ml-3"> |
| 1734 | <v-text-field | 1734 | <v-text-field |
| 1735 | v-model="addStudents.rollNo" | 1735 | v-model="addStudents.rollNo" |
| 1736 | placeholder="Fill your Roll Number" | 1736 | placeholder="Fill your Roll Number" |
| 1737 | :rules="rollNo" | 1737 | :rules="rollNo" |
| 1738 | required | 1738 | required |
| 1739 | ></v-text-field> | 1739 | ></v-text-field> |
| 1740 | </v-flex> | 1740 | </v-flex> |
| 1741 | </v-layout> | 1741 | </v-layout> |
| 1742 | </v-flex> | 1742 | </v-flex> |
| 1743 | <v-flex xs12 sm6> | 1743 | <v-flex xs12 sm6> |
| 1744 | <v-layout> | 1744 | <v-layout> |
| 1745 | <v-flex xs4 class="pt-4 subheading"> | 1745 | <v-flex xs4 class="pt-4 subheading"> |
| 1746 | <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> | 1746 | <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> |
| 1747 | <label | 1747 | <label |
| 1748 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1748 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1749 | >Medical:</label> | 1749 | >Medical:</label> |
| 1750 | </v-flex> | 1750 | </v-flex> |
| 1751 | <v-flex xs8 class="ml-3"> | 1751 | <v-flex xs8 class="ml-3"> |
| 1752 | <v-text-field | 1752 | <v-text-field |
| 1753 | v-model="addStudents.medicalNotes" | 1753 | v-model="addStudents.medicalNotes" |
| 1754 | placeholder="Fill your Medical Notes" | 1754 | placeholder="Fill your Medical Notes" |
| 1755 | required | 1755 | required |
| 1756 | ></v-text-field> | 1756 | ></v-text-field> |
| 1757 | </v-flex> | 1757 | </v-flex> |
| 1758 | </v-layout> | 1758 | </v-layout> |
| 1759 | </v-flex> | 1759 | </v-flex> |
| 1760 | </v-layout> | 1760 | </v-layout> |
| 1761 | <v-layout wrap> | 1761 | <v-layout wrap> |
| 1762 | <v-flex xs12 sm6> | 1762 | <v-flex xs12 sm6> |
| 1763 | <v-layout> | 1763 | <v-layout> |
| 1764 | <v-flex xs4 class="pt-4 subheading"> | 1764 | <v-flex xs4 class="pt-4 subheading"> |
| 1765 | <label class="right">Height:</label> | 1765 | <label class="right">Height:</label> |
| 1766 | </v-flex> | 1766 | </v-flex> |
| 1767 | <v-flex xs8 class="ml-3"> | 1767 | <v-flex xs8 class="ml-3"> |
| 1768 | <v-text-field | 1768 | <v-text-field |
| 1769 | v-model="addStudents.height" | 1769 | v-model="addStudents.height" |
| 1770 | placeholder="Fill your Height" | 1770 | placeholder="Fill your Height" |
| 1771 | required | 1771 | required |
| 1772 | ></v-text-field> | 1772 | ></v-text-field> |
| 1773 | </v-flex> | 1773 | </v-flex> |
| 1774 | </v-layout> | 1774 | </v-layout> |
| 1775 | </v-flex> | 1775 | </v-flex> |
| 1776 | <v-flex xs12 sm6> | 1776 | <v-flex xs12 sm6> |
| 1777 | <v-layout> | 1777 | <v-layout> |
| 1778 | <v-flex xs4 class="pt-4 subheading"> | 1778 | <v-flex xs4 class="pt-4 subheading"> |
| 1779 | <label class="right">Weight:</label> | 1779 | <label class="right">Weight:</label> |
| 1780 | </v-flex> | 1780 | </v-flex> |
| 1781 | <v-flex xs8 class="ml-3"> | 1781 | <v-flex xs8 class="ml-3"> |
| 1782 | <v-text-field | 1782 | <v-text-field |
| 1783 | v-model="addStudents.weight" | 1783 | v-model="addStudents.weight" |
| 1784 | placeholder="Fill your Weight" | 1784 | placeholder="Fill your Weight" |
| 1785 | required | 1785 | required |
| 1786 | ></v-text-field> | 1786 | ></v-text-field> |
| 1787 | </v-flex> | 1787 | </v-flex> |
| 1788 | </v-layout> | 1788 | </v-layout> |
| 1789 | </v-flex> | 1789 | </v-flex> |
| 1790 | </v-layout> | 1790 | </v-layout> |
| 1791 | <v-layout wrap> | 1791 | <v-layout wrap> |
| 1792 | <v-flex xs12 sm6> | 1792 | <v-flex xs12 sm6> |
| 1793 | <v-layout> | 1793 | <v-layout> |
| 1794 | <v-flex xs4 class="pt-4 subheading"> | 1794 | <v-flex xs4 class="pt-4 subheading"> |
| 1795 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 1795 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 1796 | <label | 1796 | <label |
| 1797 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1797 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1798 | >Uplaod :</label> | 1798 | >Uplaod :</label> |
| 1799 | </v-flex> | 1799 | </v-flex> |
| 1800 | <v-flex xs8 class="ml-3"> | 1800 | <v-flex xs8 class="ml-3"> |
| 1801 | <v-text-field | 1801 | <v-text-field |
| 1802 | label="Select Image" | 1802 | label="Select Image" |
| 1803 | @click="pickFile" | 1803 | @click="pickFile" |
| 1804 | v-model="imageName" | 1804 | v-model="imageName" |
| 1805 | append-icon="attach_file" | 1805 | append-icon="attach_file" |
| 1806 | ></v-text-field> | 1806 | ></v-text-field> |
| 1807 | </v-flex> | 1807 | </v-flex> |
| 1808 | </v-layout> | 1808 | </v-layout> |
| 1809 | </v-flex> | 1809 | </v-flex> |
| 1810 | <v-flex xs12 sm6> | 1810 | <v-flex xs12 sm6> |
| 1811 | <v-layout> | 1811 | <v-layout> |
| 1812 | <v-flex xs4 class="pt-4 subheading"> | 1812 | <v-flex xs4 class="pt-4 subheading"> |
| 1813 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> | 1813 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> |
| 1814 | <label | 1814 | <label |
| 1815 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1815 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1816 | >Year:</label> | 1816 | >Year:</label> |
| 1817 | </v-flex> | 1817 | </v-flex> |
| 1818 | <v-flex xs8 class="ml-3"> | 1818 | <v-flex xs8 class="ml-3"> |
| 1819 | <v-text-field | 1819 | <v-text-field |
| 1820 | v-model="addStudents.establishmentYear" | 1820 | v-model="addStudents.establishmentYear" |
| 1821 | placeholder="fill your Academic Year" | 1821 | placeholder="fill your Academic Year" |
| 1822 | name="state" | 1822 | name="state" |
| 1823 | type="number" | 1823 | type="number" |
| 1824 | :rules="establishmentYearRules" | 1824 | :rules="establishmentYearRules" |
| 1825 | required | 1825 | required |
| 1826 | ></v-text-field> | 1826 | ></v-text-field> |
| 1827 | </v-flex> | 1827 | </v-flex> |
| 1828 | </v-layout> | 1828 | </v-layout> |
| 1829 | </v-flex> | 1829 | </v-flex> |
| 1830 | </v-layout> | 1830 | </v-layout> |
| 1831 | <v-layout wrap class="hidden-xs-only hidden-sm-only"> | 1831 | <v-layout wrap class="hidden-xs-only hidden-sm-only"> |
| 1832 | <v-flex xs12 sm6> | 1832 | <v-flex xs12 sm6> |
| 1833 | <v-layout> | 1833 | <v-layout> |
| 1834 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1834 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1835 | <label class="right">Present Address:</label> | 1835 | <label class="right">Present Address:</label> |
| 1836 | </v-flex> | 1836 | </v-flex> |
| 1837 | <v-flex xs8 sm8 class="ml-3"> | 1837 | <v-flex xs8 sm8 class="ml-3"> |
| 1838 | <v-text-field | 1838 | <v-text-field |
| 1839 | v-model="addStudents.presentAddress" | 1839 | v-model="addStudents.presentAddress" |
| 1840 | :rules="presentAddress" | 1840 | :rules="presentAddress" |
| 1841 | placeholder="fill Your present Address" | 1841 | placeholder="fill Your present Address" |
| 1842 | @keyup="copyData" | 1842 | @keyup="copyData" |
| 1843 | ></v-text-field> | 1843 | ></v-text-field> |
| 1844 | </v-flex> | 1844 | </v-flex> |
| 1845 | </v-layout> | 1845 | </v-layout> |
| 1846 | </v-flex> | 1846 | </v-flex> |
| 1847 | <v-flex xs12 sm6> | 1847 | <v-flex xs12 sm6> |
| 1848 | <v-layout> | 1848 | <v-layout> |
| 1849 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> | 1849 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> |
| 1850 | <label class="right">Permanent Address:</label> | 1850 | <label class="right">Permanent Address:</label> |
| 1851 | </v-flex> | 1851 | </v-flex> |
| 1852 | <v-flex xs12 sm8 class="ml-3"> | 1852 | <v-flex xs12 sm8 class="ml-3"> |
| 1853 | <v-switch | 1853 | <v-switch |
| 1854 | v-model="addStudents.permanentAddress" | 1854 | v-model="addStudents.permanentAddress" |
| 1855 | label="Select Permanent Address" | 1855 | label="Select Permanent Address" |
| 1856 | :value="addStudents.presentAddress" | 1856 | :value="addStudents.presentAddress" |
| 1857 | ></v-switch> | 1857 | ></v-switch> |
| 1858 | </v-flex> | 1858 | </v-flex> |
| 1859 | </v-layout> | 1859 | </v-layout> |
| 1860 | </v-flex> | 1860 | </v-flex> |
| 1861 | </v-layout> | 1861 | </v-layout> |
| 1862 | <v-layout class="hidden-xs-only hidden-sm-only"> | 1862 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 1863 | <v-flex xs12 sm6> | 1863 | <v-flex xs12 sm6> |
| 1864 | <v-layout> | 1864 | <v-layout> |
| 1865 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> | 1865 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> |
| 1866 | <label class="right">Permanent Address:</label> | 1866 | <label class="right">Permanent Address:</label> |
| 1867 | </v-flex> | 1867 | </v-flex> |
| 1868 | <v-flex xs12 sm8 class="ml-3"> | 1868 | <v-flex xs12 sm8 class="ml-3"> |
| 1869 | <v-text-field | 1869 | <v-text-field |
| 1870 | v-model="addStudents.permanentAddress" | 1870 | v-model="addStudents.permanentAddress" |
| 1871 | :rules="permanentAddress" | 1871 | :rules="permanentAddress" |
| 1872 | placeholder="fill Your Permanent Address" | 1872 | placeholder="fill Your Permanent Address" |
| 1873 | ></v-text-field> | 1873 | ></v-text-field> |
| 1874 | </v-flex> | 1874 | </v-flex> |
| 1875 | </v-layout> | 1875 | </v-layout> |
| 1876 | </v-flex> | 1876 | </v-flex> |
| 1877 | </v-layout> | 1877 | </v-layout> |
| 1878 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 1878 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 1879 | <v-flex xs12 sm12> | 1879 | <v-flex xs12 sm12> |
| 1880 | <v-layout> | 1880 | <v-layout> |
| 1881 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 1881 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 1882 | <label class>Present Address:</label> | 1882 | <label class>Present Address:</label> |
| 1883 | </v-flex> | 1883 | </v-flex> |
| 1884 | </v-layout> | 1884 | </v-layout> |
| 1885 | <v-layout> | 1885 | <v-layout> |
| 1886 | <v-flex xs12 sm12> | 1886 | <v-flex xs12 sm12> |
| 1887 | <v-textarea | 1887 | <v-textarea |
| 1888 | name="input-4-3" | 1888 | name="input-4-3" |
| 1889 | v-model="addStudents.presentAddress" | 1889 | v-model="addStudents.presentAddress" |
| 1890 | :rules="presentAddress" | 1890 | :rules="presentAddress" |
| 1891 | placeholder="fill Your present Address" | 1891 | placeholder="fill Your present Address" |
| 1892 | required | 1892 | required |
| 1893 | ></v-textarea> | 1893 | ></v-textarea> |
| 1894 | </v-flex> | 1894 | </v-flex> |
| 1895 | </v-layout> | 1895 | </v-layout> |
| 1896 | </v-flex> | 1896 | </v-flex> |
| 1897 | <v-flex xs12 sm12> | 1897 | <v-flex xs12 sm12> |
| 1898 | <v-layout> | 1898 | <v-layout> |
| 1899 | <v-flex | 1899 | <v-flex |
| 1900 | xs12 | 1900 | xs12 |
| 1901 | sm12 | 1901 | sm12 |
| 1902 | class="pt-4 pr-4 subheading text-xs-center addressForm" | 1902 | class="pt-4 pr-4 subheading text-xs-center addressForm" |
| 1903 | > | 1903 | > |
| 1904 | <label>Permanent Address:</label> | 1904 | <label>Permanent Address:</label> |
| 1905 | </v-flex> | 1905 | </v-flex> |
| 1906 | </v-layout> | 1906 | </v-layout> |
| 1907 | <v-layout> | 1907 | <v-layout> |
| 1908 | <v-flex xs12 sm12> | 1908 | <v-flex xs12 sm12> |
| 1909 | <v-textarea | 1909 | <v-textarea |
| 1910 | name="input-4-3" | 1910 | name="input-4-3" |
| 1911 | v-model="addStudents.permanentAddress" | 1911 | v-model="addStudents.permanentAddress" |
| 1912 | :rules="permanentAddress" | 1912 | :rules="permanentAddress" |
| 1913 | placeholder="fill Your Permanent Address" | 1913 | placeholder="fill Your Permanent Address" |
| 1914 | required | 1914 | required |
| 1915 | ></v-textarea> | 1915 | ></v-textarea> |
| 1916 | </v-flex> | 1916 | </v-flex> |
| 1917 | </v-layout> | 1917 | </v-layout> |
| 1918 | </v-flex> | 1918 | </v-flex> |
| 1919 | </v-layout> | 1919 | </v-layout> |
| 1920 | <v-layout> | 1920 | <v-layout> |
| 1921 | <v-flex xs12 sm12> | 1921 | <v-flex xs12 sm12> |
| 1922 | <v-layout class="right"> | 1922 | <v-layout class="right"> |
| 1923 | <!-- <v-flex xs6> --> | 1923 | <!-- <v-flex xs6> --> |
| 1924 | <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> | 1924 | <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> |
| 1925 | <!-- </v-flex> | 1925 | <!-- </v-flex> |
| 1926 | <v-flex xs6>--> | 1926 | <v-flex xs6>--> |
| 1927 | <v-btn | 1927 | <v-btn |
| 1928 | @click="submit" | 1928 | @click="submit" |
| 1929 | round | 1929 | round |
| 1930 | dark | 1930 | dark |
| 1931 | :loading="loading" | 1931 | :loading="loading" |
| 1932 | class="add-button" | 1932 | class="add-button" |
| 1933 | >Add</v-btn> | 1933 | >Add</v-btn> |
| 1934 | <!-- </v-flex> --> | 1934 | <!-- </v-flex> --> |
| 1935 | </v-layout> | 1935 | </v-layout> |
| 1936 | </v-flex> | 1936 | </v-flex> |
| 1937 | </v-layout> | 1937 | </v-layout> |
| 1938 | </v-form> | 1938 | </v-form> |
| 1939 | </v-flex> | 1939 | </v-flex> |
| 1940 | </v-stepper-content> | 1940 | </v-stepper-content> |
| 1941 | </v-stepper-items> | 1941 | </v-stepper-items> |
| 1942 | </v-stepper> | 1942 | </v-stepper> |
| 1943 | </v-flex> | 1943 | </v-flex> |
| 1944 | </v-layout> | 1944 | </v-layout> |
| 1945 | </v-container> | 1945 | </v-container> |
| 1946 | </v-card> | 1946 | </v-card> |
| 1947 | </v-dialog> | 1947 | </v-dialog> |
| 1948 | <v-snackbar | 1948 | <v-snackbar |
| 1949 | :timeout="timeout" | 1949 | :timeout="timeout" |
| 1950 | :top="y === 'top'" | 1950 | :top="y === 'top'" |
| 1951 | :right="x === 'right'" | 1951 | :right="x === 'right'" |
| 1952 | :vertical="mode === 'vertical'" | 1952 | :vertical="mode === 'vertical'" |
| 1953 | v-model="snackbar" | 1953 | v-model="snackbar" |
| 1954 | :color="color" | 1954 | :color="color" |
| 1955 | >{{ text }}</v-snackbar> | 1955 | >{{ text }}</v-snackbar> |
| 1956 | <div class="loader" v-if="showLoader"> | 1956 | <div class="loader" v-if="showLoader"> |
| 1957 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 1957 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 1958 | </div> | 1958 | </div> |
| 1959 | </v-container> | 1959 | </v-container> |
| 1960 | </template> | 1960 | </template> |
| 1961 | 1961 | ||
| 1962 | <script> | 1962 | <script> |
| 1963 | import http from "@/Services/http.js"; | 1963 | import http from "@/Services/http.js"; |
| 1964 | import moment from "moment"; | 1964 | import moment from "moment"; |
| 1965 | import countryList from "@/script/country.js"; | 1965 | import countryList from "@/script/country.js"; |
| 1966 | import parent from "@/script/parents.js"; | 1966 | import parent from "@/script/parents.js"; |
| 1967 | 1967 | ||
| 1968 | export default { | 1968 | export default { |
| 1969 | data: () => ({ | 1969 | data: () => ({ |
| 1970 | /* EDIT DETAILS MOBILE */ | 1970 | /* EDIT DETAILS MOBILE */ |
| 1971 | editedStudentMobileCode: "", | 1971 | editedStudentMobileCode: "", |
| 1972 | /* ADD FATHER CELL */ | 1972 | /* ADD FATHER CELL */ |
| 1973 | addedFatherCellCode: "", | 1973 | addedFatherCellCode: "", |
| 1974 | addedStudentMobileCode: '', | 1974 | addedStudentMobileCode: "", |
| 1975 | e1: true, | 1975 | e1: true, |
| 1976 | e2: 0, | 1976 | e2: 0, |
| 1977 | showParent: true, | 1977 | showParent: true, |
| 1978 | showNext: false, | 1978 | showNext: false, |
| 1979 | snackbar: false, | 1979 | snackbar: false, |
| 1980 | y: "top", | 1980 | y: "top", |
| 1981 | x: "right", | 1981 | x: "right", |
| 1982 | role: "", | 1982 | role: "", |
| 1983 | mode: "", | 1983 | mode: "", |
| 1984 | append: "", | 1984 | append: "", |
| 1985 | timeout: 3000, | 1985 | timeout: 3000, |
| 1986 | text: "", | 1986 | text: "", |
| 1987 | show: true, | 1987 | show: true, |
| 1988 | color: "", | 1988 | color: "", |
| 1989 | showSearch: false, | 1989 | showSearch: false, |
| 1990 | showLoader: false, | 1990 | showLoader: false, |
| 1991 | loading: false, | 1991 | loading: false, |
| 1992 | editLoading: false, | 1992 | editLoading: false, |
| 1993 | date: null, | 1993 | date: null, |
| 1994 | search: "", | 1994 | search: "", |
| 1995 | password: "", | 1995 | password: "", |
| 1996 | menu: false, | 1996 | menu: false, |
| 1997 | menu1: false, | 1997 | menu1: false, |
| 1998 | editStudentDialog: false, | 1998 | editStudentDialog: false, |
| 1999 | profileStudentDialog: false, | 1999 | profileStudentDialog: false, |
| 2000 | addStudentDialog: false, | 2000 | addStudentDialog: false, |
| 2001 | valid: true, | 2001 | valid: true, |
| 2002 | addclass: [], | 2002 | addclass: [], |
| 2003 | addSection: [], | 2003 | addSection: [], |
| 2004 | gender: ["Male", "Female"], | 2004 | gender: ["Male", "Female"], |
| 2005 | pagination: { | 2005 | pagination: { |
| 2006 | rowsPerPage: 10, | 2006 | rowsPerPage: 10, |
| 2007 | }, | 2007 | }, |
| 2008 | imageData: {}, | 2008 | imageData: {}, |
| 2009 | imageName: "", | 2009 | imageName: "", |
| 2010 | imageUrl: "", | 2010 | imageUrl: "", |
| 2011 | imageFile: "", | 2011 | imageFile: "", |
| 2012 | editImageName: "", | 2012 | editImageName: "", |
| 2013 | editImageUrl: "", | 2013 | editImageUrl: "", |
| 2014 | nameRules: [(v) => !!v || " Full Name is required"], | 2014 | nameRules: [(v) => !!v || " Full Name is required"], |
| 2015 | dateRules: [(v) => !!v || " DOB is required"], | 2015 | dateRules: [(v) => !!v || " DOB is required"], |
| 2016 | cityRules: [(v) => !!v || " City Name is required"], | 2016 | cityRules: [(v) => !!v || " City Name is required"], |
| 2017 | pincode: [(v) => !!v || " Pincode is required"], | 2017 | pincode: [(v) => !!v || " Pincode is required"], |
| 2018 | country: [(v) => !!v || " Country Name is required"], | 2018 | country: [(v) => !!v || " Country Name is required"], |
| 2019 | rollNo: [(v) => !!v || "Roll No is required"], | 2019 | rollNo: [(v) => !!v || "Roll No is required"], |
| 2020 | permanentAddress: [(v) => !!v || " Permanent Address is required"], | 2020 | permanentAddress: [(v) => !!v || " Permanent Address is required"], |
| 2021 | presentAddress: [(v) => !!v || " Present Address is required"], | 2021 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 2022 | stateRules: [(v) => !!v || "State Name is required"], | 2022 | stateRules: [(v) => !!v || "State Name is required"], |
| 2023 | classRules: [(v) => !!v || " Class Name is required"], | 2023 | classRules: [(v) => !!v || " Class Name is required"], |
| 2024 | sectionRules: [(v) => !!v || " Section Name is required"], | 2024 | sectionRules: [(v) => !!v || " Section Name is required"], |
| 2025 | genderRules: [(v) => !!v || " Select Gender is required"], | 2025 | genderRules: [(v) => !!v || " Select Gender is required"], |
| 2026 | fatheCellNoRules: [ | 2026 | fatheCellNoRules: [ |
| 2027 | (v) => !!v || " father Cell Number is required", | 2027 | (v) => !!v || " father Cell Number is required", |
| 2028 | (v) => v <= 10000000000 || "Max 10 characters is required", | 2028 | (v) => v <= 10000000000 || "Max 10 characters is required", |
| 2029 | ], | 2029 | ], |
| 2030 | password: [ | 2030 | password: [ |
| 2031 | (v) => !!v || "Password field is Required.", | 2031 | (v) => !!v || "Password field is Required.", |
| 2032 | // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 | 2032 | // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 |
| 2033 | ], | 2033 | ], |
| 2034 | mobileNoRule: [(v) => !!v || " Mobile Number is required"], | 2034 | mobileNoRule: [(v) => !!v || " Mobile Number is required"], |
| 2035 | establishmentYearRules: [(v) => !!v || " Academic Year is required"], | 2035 | establishmentYearRules: [(v) => !!v || " Academic Year is required"], |
| 2036 | errorMessages: "", | 2036 | errorMessages: "", |
| 2037 | countries: [], | 2037 | countries: [], |
| 2038 | headers: [ | 2038 | headers: [ |
| 2039 | { | 2039 | { |
| 2040 | text: "Roll No.", | 2040 | text: "Roll No.", |
| 2041 | align: "center", | 2041 | align: "center", |
| 2042 | sortable: false, | 2042 | sortable: false, |
| 2043 | value: "rollNo", | 2043 | value: "rollNo", |
| 2044 | }, | 2044 | }, |
| 2045 | { | 2045 | { |
| 2046 | text: "Profile Pic", | 2046 | text: "Profile Pic", |
| 2047 | value: "profilePicUrl", | 2047 | value: "profilePicUrl", |
| 2048 | sortable: false, | 2048 | sortable: false, |
| 2049 | align: "center", | 2049 | align: "center", |
| 2050 | }, | 2050 | }, |
| 2051 | { text: "Name", value: "name", sortable: false, align: "center" }, | 2051 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 2052 | { text: "Gender", value: "gender", sortable: false, align: "center" }, | 2052 | { text: "Gender", value: "gender", sortable: false, align: "center" }, |
| 2053 | { | 2053 | { |
| 2054 | text: "Father Name", | 2054 | text: "Father Name", |
| 2055 | value: "fatherName", | 2055 | value: "fatherName", |
| 2056 | sortable: false, | 2056 | sortable: false, |
| 2057 | align: "center", | 2057 | align: "center", |
| 2058 | }, | 2058 | }, |
| 2059 | { | 2059 | { |
| 2060 | text: "Mother Name", | 2060 | text: "Mother Name", |
| 2061 | value: "motherName", | 2061 | value: "motherName", |
| 2062 | sortable: false, | 2062 | sortable: false, |
| 2063 | align: "center", | 2063 | align: "center", |
| 2064 | }, | 2064 | }, |
| 2065 | { | 2065 | { |
| 2066 | text: "Academic Year", | 2066 | text: "Academic Year", |
| 2067 | value: "establishmentYear", | 2067 | value: "establishmentYear", |
| 2068 | sortable: false, | 2068 | sortable: false, |
| 2069 | align: "center", | 2069 | align: "center", |
| 2070 | }, | 2070 | }, |
| 2071 | // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, | 2071 | // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, |
| 2072 | { | 2072 | { |
| 2073 | text: "Status", | 2073 | text: "Status", |
| 2074 | value: "status", | 2074 | value: "status", |
| 2075 | sortable: false, | 2075 | sortable: false, |
| 2076 | align: "center", | 2076 | align: "center", |
| 2077 | }, | 2077 | }, |
| 2078 | { text: "Action", value: "", sortable: false, align: "center" }, | 2078 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 2079 | ], | 2079 | ], |
| 2080 | studentsData: [], | 2080 | studentsData: [], |
| 2081 | parentId: "", | 2081 | parentId: "", |
| 2082 | editedIndex: -1, | 2082 | editedIndex: -1, |
| 2083 | parentData: {}, | 2083 | parentData: {}, |
| 2084 | addStudents: { | 2084 | addStudents: { |
| 2085 | role: "STUDENT", | 2085 | role: "STUDENT", |
| 2086 | name: "", | 2086 | name: "", |
| 2087 | email: "", | 2087 | email: "", |
| 2088 | date: "", | 2088 | date: "", |
| 2089 | city: "", | 2089 | city: "", |
| 2090 | pincode: "", | 2090 | pincode: "", |
| 2091 | country: "", | 2091 | country: "", |
| 2092 | permanentAddress: "", | 2092 | permanentAddress: "", |
| 2093 | presentAddress: "", | 2093 | presentAddress: "", |
| 2094 | mobile: "", | 2094 | mobile: "", |
| 2095 | state: "", | 2095 | state: "", |
| 2096 | gender: "", | 2096 | gender: "", |
| 2097 | select: "", | 2097 | select: "", |
| 2098 | selectSection: "", | 2098 | selectSection: "", |
| 2099 | bloodGroup: "", | 2099 | bloodGroup: "", |
| 2100 | allergies: "", | 2100 | allergies: "", |
| 2101 | medicalNotes: "", | 2101 | medicalNotes: "", |
| 2102 | height: "", | 2102 | height: "", |
| 2103 | weight: "", | 2103 | weight: "", |
| 2104 | rollNo: "", | 2104 | rollNo: "", |
| 2105 | establishmentYear: new Date().getFullYear(), | 2105 | establishmentYear: new Date().getFullYear(), |
| 2106 | }, | 2106 | }, |
| 2107 | selectStudents: { | 2107 | selectStudents: { |
| 2108 | select: "", | 2108 | select: "", |
| 2109 | selectSection: "", | 2109 | selectSection: "", |
| 2110 | }, | 2110 | }, |
| 2111 | editedItem: { | 2111 | editedItem: { |
| 2112 | role: "STUDENT", | 2112 | role: "STUDENT", |
| 2113 | name: "", | 2113 | name: "", |
| 2114 | email: "", | 2114 | email: "", |
| 2115 | dob: "", | 2115 | dob: "", |
| 2116 | city: "", | 2116 | city: "", |
| 2117 | pincode: "", | 2117 | pincode: "", |
| 2118 | country: "", | 2118 | country: "", |
| 2119 | permanentAddress: "", | 2119 | permanentAddress: "", |
| 2120 | presentAddress: "", | 2120 | presentAddress: "", |
| 2121 | mobile: "", | 2121 | mobile: "", |
| 2122 | state: "", | 2122 | state: "", |
| 2123 | gender: "", | 2123 | gender: "", |
| 2124 | select: "", | 2124 | select: "", |
| 2125 | selectSection: "", | 2125 | selectSection: "", |
| 2126 | bloodGroup: "", | 2126 | bloodGroup: "", |
| 2127 | allergies: "", | 2127 | allergies: "", |
| 2128 | medicalNotes: "", | 2128 | medicalNotes: "", |
| 2129 | height: "", | 2129 | height: "", |
| 2130 | weight: "", | 2130 | weight: "", |
| 2131 | rollNo: "", | 2131 | rollNo: "", |
| 2132 | establishmentYear: new Date().getFullYear(), | 2132 | establishmentYear: new Date().getFullYear(), |
| 2133 | }, | 2133 | }, |
| 2134 | isFatherCellExists: false, | 2134 | isFatherCellExists: false, |
| 2135 | }), | 2135 | }), |
| 2136 | watch: { | 2136 | watch: { |
| 2137 | menu(val) { | 2137 | menu(val) { |
| 2138 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 2138 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 2139 | }, | 2139 | }, |
| 2140 | menu1(val) { | 2140 | menu1(val) { |
| 2141 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 2141 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 2142 | }, | 2142 | }, |
| 2143 | addStudentDialog: function (val) { | 2143 | addStudentDialog: function (val) { |
| 2144 | if (!val) { | 2144 | if (!val) { |
| 2145 | this.parentData = []; | 2145 | this.parentData = []; |
| 2146 | this.addStudents = []; | 2146 | this.addStudents = []; |
| 2147 | this.imageName = ""; | 2147 | this.imageName = ""; |
| 2148 | this.imageFile = ""; | 2148 | this.imageFile = ""; |
| 2149 | this.imageUrl = ""; | 2149 | this.imageUrl = ""; |
| 2150 | this.e2 = 1; | 2150 | this.e2 = 1; |
| 2151 | } | 2151 | } |
| 2152 | }, | 2152 | }, |
| 2153 | }, | 2153 | }, |
| 2154 | methods: { | 2154 | methods: { |
| 2155 | editStudentMobileCode({ name, iso2, dialCode }) { | 2155 | editStudentMobileCode({ name, iso2, dialCode }) { |
| 2156 | // console.log("Edit father cell", name,iso2); | 2156 | // console.log("Edit father cell", name,iso2); |
| 2157 | this.editedStudentMobileCode = dialCode; | 2157 | this.editedStudentMobileCode = dialCode; |
| 2158 | }, | 2158 | }, |
| 2159 | addFatherCellCode({ name, iso2, dialCode }) { | 2159 | addFatherCellCode({ name, iso2, dialCode }) { |
| 2160 | this.addedFatherCellCode = dialCode; | 2160 | this.addedFatherCellCode = dialCode; |
| 2161 | }, | 2161 | }, |
| 2162 | addStudentMobileCode({ name, iso2, dialCode }){ | 2162 | addStudentMobileCode({ name, iso2, dialCode }) { |
| 2163 | this.addedStudentMobileCode =dialCode; | 2163 | this.addedStudentMobileCode = dialCode; |
| 2164 | }, | 2164 | }, |
| 2165 | onSelect({ name, iso2, dialCode }) { | 2165 | onSelect({ name, iso2, dialCode }) { |
| 2166 | // console.log("country codes", name, iso2, dialCode); | 2166 | // console.log("country codes", name, iso2, dialCode); |
| 2167 | }, | 2167 | }, |
| 2168 | findStudents() { | 2168 | findStudents() { |
| 2169 | this.showLoader = true; | 2169 | this.showLoader = true; |
| 2170 | http() | 2170 | http() |
| 2171 | .get("/getStudentWithClass", { | 2171 | .get("/getStudentWithClass", { |
| 2172 | params: { | 2172 | params: { |
| 2173 | classId: this.selectStudents.select, | 2173 | classId: this.selectStudents.select, |
| 2174 | sectionId: this.selectStudents.selectSection, | 2174 | sectionId: this.selectStudents.selectSection, |
| 2175 | }, | 2175 | }, |
| 2176 | }) | 2176 | }) |
| 2177 | .then((response) => { | 2177 | .then((response) => { |
| 2178 | this.studentsData = response.data.data; | 2178 | this.studentsData = response.data.data; |
| 2179 | this.showLoader = false; | 2179 | this.showLoader = false; |
| 2180 | }) | 2180 | }) |
| 2181 | .catch((err) => { | 2181 | .catch((err) => { |
| 2182 | // console.log("err====>", err); | 2182 | // console.log("err====>", err); |
| 2183 | this.showLoader = false; | 2183 | this.showLoader = false; |
| 2184 | this.snackbar = true; | 2184 | this.snackbar = true; |
| 2185 | this.color = "error"; | 2185 | this.color = "error"; |
| 2186 | this.text = error.response.data.message; | 2186 | this.text = error.response.data.message; |
| 2187 | }); | 2187 | }); |
| 2188 | }, | 2188 | }, |
| 2189 | getSections(_id) { | 2189 | getSections(_id) { |
| 2190 | var token = this.$store.state.token; | 2190 | var token = this.$store.state.token; |
| 2191 | this.showLoader = true; | 2191 | this.showLoader = true; |
| 2192 | this.studentsData = []; | 2192 | this.studentsData = []; |
| 2193 | http() | 2193 | http() |
| 2194 | .get( | 2194 | .get( |
| 2195 | "/getSectionsList", | 2195 | "/getSectionsList", |
| 2196 | { params: { classId: _id } }, | 2196 | { params: { classId: _id } }, |
| 2197 | { | 2197 | { |
| 2198 | headers: { Authorization: "Bearer " + token }, | 2198 | headers: { Authorization: "Bearer " + token }, |
| 2199 | } | 2199 | } |
| 2200 | ) | 2200 | ) |
| 2201 | .then((response) => { | 2201 | .then((response) => { |
| 2202 | this.addSection = response.data.data; | 2202 | this.addSection = response.data.data; |
| 2203 | this.showLoader = false; | 2203 | this.showLoader = false; |
| 2204 | }) | 2204 | }) |
| 2205 | .catch((err) => { | 2205 | .catch((err) => { |
| 2206 | this.showLoader = false; | 2206 | this.showLoader = false; |
| 2207 | }); | 2207 | }); |
| 2208 | }, | 2208 | }, |
| 2209 | getSection(_id) { | 2209 | getSection(_id) { |
| 2210 | var token = this.$store.state.token; | 2210 | var token = this.$store.state.token; |
| 2211 | this.showLoader = true; | 2211 | this.showLoader = true; |
| 2212 | http() | 2212 | http() |
| 2213 | .get( | 2213 | .get( |
| 2214 | "/getSectionsList", | 2214 | "/getSectionsList", |
| 2215 | { params: { classId: _id } }, | 2215 | { params: { classId: _id } }, |
| 2216 | { | 2216 | { |
| 2217 | headers: { Authorization: "Bearer " + token }, | 2217 | headers: { Authorization: "Bearer " + token }, |
| 2218 | } | 2218 | } |
| 2219 | ) | 2219 | ) |
| 2220 | .then((response) => { | 2220 | .then((response) => { |
| 2221 | this.addSection = response.data.data; | 2221 | this.addSection = response.data.data; |
| 2222 | this.showLoader = false; | 2222 | this.showLoader = false; |
| 2223 | }) | 2223 | }) |
| 2224 | .catch((err) => { | 2224 | .catch((err) => { |
| 2225 | this.showLoader = false; | 2225 | this.showLoader = false; |
| 2226 | }); | 2226 | }); |
| 2227 | }, | 2227 | }, |
| 2228 | pickFile() { | 2228 | pickFile() { |
| 2229 | this.$refs.image.click(); | 2229 | this.$refs.image.click(); |
| 2230 | }, | 2230 | }, |
| 2231 | pickEditFile() { | 2231 | pickEditFile() { |
| 2232 | this.$refs.editDataImage.click(); | 2232 | this.$refs.editDataImage.click(); |
| 2233 | }, | 2233 | }, |
| 2234 | dates: function (date) { | 2234 | dates: function (date) { |
| 2235 | return moment(date).format("MMMM DD, YYYY"); | 2235 | return moment(date).format("MMMM DD, YYYY"); |
| 2236 | return date; | 2236 | return date; |
| 2237 | }, | 2237 | }, |
| 2238 | onFilePicked(e) { | 2238 | onFilePicked(e) { |
| 2239 | // console.log(e) | 2239 | // console.log(e) |
| 2240 | const files = e.target.files; | 2240 | const files = e.target.files; |
| 2241 | this.imageData.upload = e.target.files[0]; | 2241 | this.imageData.upload = e.target.files[0]; |
| 2242 | if (files[0] !== undefined) { | 2242 | if (files[0] !== undefined) { |
| 2243 | this.imageName = files[0].name; | 2243 | this.imageName = files[0].name; |
| 2244 | if (this.imageName.lastIndexOf(".") <= 0) { | 2244 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 2245 | return; | 2245 | return; |
| 2246 | } | 2246 | } |
| 2247 | const fr = new FileReader(); | 2247 | const fr = new FileReader(); |
| 2248 | fr.readAsDataURL(files[0]); | 2248 | fr.readAsDataURL(files[0]); |
| 2249 | fr.addEventListener("load", () => { | 2249 | fr.addEventListener("load", () => { |
| 2250 | this.imageUrl = fr.result; | 2250 | this.imageUrl = fr.result; |
| 2251 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 2251 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 2252 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 2252 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 2253 | }); | 2253 | }); |
| 2254 | } else { | 2254 | } else { |
| 2255 | this.imageName = ""; | 2255 | this.imageName = ""; |
| 2256 | this.imageFile = ""; | 2256 | this.imageFile = ""; |
| 2257 | this.imageUrl = ""; | 2257 | this.imageUrl = ""; |
| 2258 | } | 2258 | } |
| 2259 | }, | 2259 | }, |
| 2260 | onEditFilePicked(e) { | 2260 | onEditFilePicked(e) { |
| 2261 | // console.log(e); | 2261 | // console.log(e); |
| 2262 | const files = e.target.files; | 2262 | const files = e.target.files; |
| 2263 | if (files[0] !== undefined) { | 2263 | if (files[0] !== undefined) { |
| 2264 | this.editImageName = files[0].name; | 2264 | this.editImageName = files[0].name; |
| 2265 | // console.log("this.editImageName", this.editImageName); | 2265 | // console.log("this.editImageName", this.editImageName); |
| 2266 | 2266 | ||
| 2267 | if (this.editImageName.lastIndexOf(".") <= 0) { | 2267 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 2268 | return; | 2268 | return; |
| 2269 | } | 2269 | } |
| 2270 | const fr = new FileReader(); | 2270 | const fr = new FileReader(); |
| 2271 | fr.readAsDataURL(files[0]); | 2271 | fr.readAsDataURL(files[0]); |
| 2272 | fr.addEventListener("load", () => { | 2272 | fr.addEventListener("load", () => { |
| 2273 | this.editImageUrl = fr.result; | 2273 | this.editImageUrl = fr.result; |
| 2274 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 2274 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 2275 | }); | 2275 | }); |
| 2276 | } else { | 2276 | } else { |
| 2277 | this.editImageName = ""; | 2277 | this.editImageName = ""; |
| 2278 | this.editiImageFile = ""; | 2278 | this.editiImageFile = ""; |
| 2279 | } | 2279 | } |
| 2280 | }, | 2280 | }, |
| 2281 | editItem(item) { | 2281 | editItem(item) { |
| 2282 | this.editedIndex = this.studentsData.indexOf(item); | 2282 | this.editedIndex = this.studentsData.indexOf(item); |
| 2283 | this.editedItem = Object.assign({}, item); | 2283 | this.editedItem = Object.assign({}, item); |
| 2284 | this.editedItem.fatherName = item.parentId.fatherName; | 2284 | this.editedItem.fatherName = item.parentId.fatherName; |
| 2285 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; | 2285 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; |
| 2286 | this.editedItem.motherName = item.parentId.motherName; | 2286 | this.editedItem.motherName = item.parentId.motherName; |
| 2287 | this.editedItem.motherCellNo = item.parentId.motherCellNo; | 2287 | this.editedItem.motherCellNo = item.parentId.motherCellNo; |
| 2288 | this.editedItem.dob = | 2288 | this.editedItem.dob = |
| 2289 | this.editedItem.dob != undefined | 2289 | this.editedItem.dob != undefined |
| 2290 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 2290 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 2291 | : (this.editedItem.dob = ""); | 2291 | : (this.editedItem.dob = ""); |
| 2292 | this.editStudentDialog = true; | 2292 | this.editStudentDialog = true; |
| 2293 | }, | 2293 | }, |
| 2294 | profile(item) { | 2294 | profile(item) { |
| 2295 | this.editedIndex = this.studentsData.indexOf(item); | 2295 | this.editedIndex = this.studentsData.indexOf(item); |
| 2296 | this.editedItem = Object.assign({}, item); | 2296 | this.editedItem = Object.assign({}, item); |
| 2297 | this.editedItem.fatherName = item.parentId.fatherName; | 2297 | this.editedItem.fatherName = item.parentId.fatherName; |
| 2298 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; | 2298 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; |
| 2299 | this.editedItem.motherName = item.parentId.motherName; | 2299 | this.editedItem.motherName = item.parentId.motherName; |
| 2300 | this.editedItem.motherCellNo = item.parentId.motherCellNo; | 2300 | this.editedItem.motherCellNo = item.parentId.motherCellNo; |
| 2301 | 2301 | ||
| 2302 | this.profileStudentDialog = true; | 2302 | this.profileStudentDialog = true; |
| 2303 | }, | 2303 | }, |
| 2304 | deleteItem(item) { | 2304 | deleteItem(item) { |
| 2305 | let deleteStudent = { | 2305 | let deleteStudent = { |
| 2306 | studentId: item._id, | 2306 | studentId: item._id, |
| 2307 | }; | 2307 | }; |
| 2308 | http() | 2308 | http() |
| 2309 | .delete( | 2309 | .delete( |
| 2310 | "/deleteStudent", | 2310 | "/deleteStudent", |
| 2311 | confirm("Are you sure you want to delete this?") && { | 2311 | confirm("Are you sure you want to delete this?") && { |
| 2312 | params: deleteStudent, | 2312 | params: deleteStudent, |
| 2313 | } | 2313 | } |
| 2314 | ) | 2314 | ) |
| 2315 | .then((response) => { | 2315 | .then((response) => { |
| 2316 | this.snackbar = true; | 2316 | this.snackbar = true; |
| 2317 | this.text = response.data.message; | 2317 | this.text = response.data.message; |
| 2318 | this.color = "green"; | 2318 | this.color = "green"; |
| 2319 | this.findStudents(); | 2319 | this.findStudents(); |
| 2320 | }) | 2320 | }) |
| 2321 | .catch((error) => { | 2321 | .catch((error) => { |
| 2322 | this.snackbar = true; | 2322 | this.snackbar = true; |
| 2323 | this.text = error.response.data.message; | 2323 | this.text = error.response.data.message; |
| 2324 | this.color = "error"; | 2324 | this.color = "error"; |
| 2325 | }); | 2325 | }); |
| 2326 | }, | 2326 | }, |
| 2327 | close() { | 2327 | close() { |
| 2328 | this.editStudentDialog = false; | 2328 | this.editStudentDialog = false; |
| 2329 | }, | 2329 | }, |
| 2330 | closeStudentProfile() { | 2330 | closeStudentProfile() { |
| 2331 | this.profileStudentDialog = false; | 2331 | this.profileStudentDialog = false; |
| 2332 | }, | 2332 | }, |
| 2333 | copyData() { | 2333 | copyData() { |
| 2334 | this.addStudents.permanentAddress = this.addStudents.presentAddress; | 2334 | this.addStudents.permanentAddress = this.addStudents.presentAddress; |
| 2335 | }, | 2335 | }, |
| 2336 | submit() { | 2336 | submit() { |
| 2337 | if (this.$refs.form.validate()) { | 2337 | if (this.$refs.form.validate()) { |
| 2338 | let addStudent = { | 2338 | let addStudent = { |
| 2339 | parentId: this.parentId, | 2339 | parentId: this.parentId, |
| 2340 | name: this.addStudents.name, | 2340 | name: this.addStudents.name, |
| 2341 | email: this.addStudents.email, | 2341 | email: this.addStudents.email, |
| 2342 | role: this.addStudents.role, | 2342 | role: this.addStudents.role, |
| 2343 | dob: this.addStudents.date, | 2343 | dob: this.addStudents.date, |
| 2344 | city: this.addStudents.city, | 2344 | city: this.addStudents.city, |
| 2345 | pincode: this.addStudents.pincode, | 2345 | pincode: this.addStudents.pincode, |
| 2346 | country: this.addStudents.country, | 2346 | country: this.addStudents.country, |
| 2347 | permanentAddress: this.addStudents.permanentAddress, | 2347 | permanentAddress: this.addStudents.permanentAddress, |
| 2348 | presentAddress: this.addStudents.presentAddress, | 2348 | presentAddress: this.addStudents.presentAddress, |
| 2349 | countryCode: this.addedStudentMobileCode, | 2349 | countryCode: this.addedStudentMobileCode, |
| 2350 | mobile: this.addStudents.mobile, | 2350 | mobile: this.addStudents.mobile, |
| 2351 | state: this.addStudents.state, | 2351 | state: this.addStudents.state, |
| 2352 | gender: this.addStudents.gender, | 2352 | gender: this.addStudents.gender, |
| 2353 | establishmentYear: this.addStudents.establishmentYear, | 2353 | establishmentYear: this.addStudents.establishmentYear, |
| 2354 | classId: this.addStudents.select, | 2354 | classId: this.addStudents.select, |
| 2355 | sectionId: this.addStudents.selectSection, | 2355 | sectionId: this.addStudents.selectSection, |
| 2356 | bloodGroup: this.addStudents.bloodGroup, | 2356 | bloodGroup: this.addStudents.bloodGroup, |
| 2357 | medicalNotes: this.addStudents.medicalNotes, | 2357 | medicalNotes: this.addStudents.medicalNotes, |
| 2358 | height: this.addStudents.height, | 2358 | height: this.addStudents.height, |
| 2359 | weight: this.addStudents.weight, | 2359 | weight: this.addStudents.weight, |
| 2360 | rollNo: this.addStudents.rollNo, | 2360 | rollNo: this.addStudents.rollNo, |
| 2361 | }; | 2361 | }; |
| 2362 | if (this.imageUrl) { | 2362 | if (this.imageUrl) { |
| 2363 | var str = this.imageUrl; | 2363 | var str = this.imageUrl; |
| 2364 | const [baseUrl, imageUrl] = str.split(/,/); | 2364 | const [baseUrl, imageUrl] = str.split(/,/); |
| 2365 | addStudent.upload = imageUrl; | 2365 | addStudent.upload = imageUrl; |
| 2366 | } | 2366 | } |
| 2367 | this.loading = true; | 2367 | this.loading = true; |
| 2368 | http() | 2368 | http() |
| 2369 | .post("/createStudent", addStudent) | 2369 | .post("/createStudent", addStudent) |
| 2370 | .then((response) => { | 2370 | .then((response) => { |
| 2371 | this.snackbar = true; | 2371 | this.snackbar = true; |
| 2372 | this.text = "New Student added successfully"; | 2372 | this.text = "New Student added successfully"; |
| 2373 | this.color = "green"; | 2373 | this.color = "green"; |
| 2374 | this.addStudentDialog = false; | 2374 | this.addStudentDialog = false; |
| 2375 | this.$refs.parentForm.reset(); | 2375 | this.$refs.parentForm.reset(); |
| 2376 | this.$refs.parentFormLgScr.reset(); | 2376 | this.$refs.parentFormLgScr.reset(); |
| 2377 | this.$refs.form.reset(); | 2377 | this.$refs.form.reset(); |
| 2378 | this.e2 = 1; | 2378 | this.e2 = 1; |
| 2379 | // this.clear(); | 2379 | // this.clear(); |
| 2380 | // this.clearParents(); | 2380 | // this.clearParents(); |
| 2381 | this.loading = false; | 2381 | this.loading = false; |
| 2382 | }) | 2382 | }) |
| 2383 | .catch((error) => { | 2383 | .catch((error) => { |
| 2384 | this.snackbar = true; | 2384 | this.snackbar = true; |
| 2385 | this.text = error.response.data.message; | 2385 | this.text = error.response.data.message; |
| 2386 | this.color = "error"; | 2386 | this.color = "error"; |
| 2387 | this.loading = false; | 2387 | this.loading = false; |
| 2388 | }); | 2388 | }); |
| 2389 | } | 2389 | } |
| 2390 | }, | 2390 | }, |
| 2391 | clear() { | 2391 | clear() { |
| 2392 | this.$refs.form.reset(); | 2392 | this.$refs.form.reset(); |
| 2393 | this.imageUrl = ""; | 2393 | this.imageUrl = ""; |
| 2394 | }, | 2394 | }, |
| 2395 | clearParents() { | 2395 | clearParents() { |
| 2396 | this.$refs.parentForm.reset(); | 2396 | this.$refs.parentForm.reset(); |
| 2397 | }, | 2397 | }, |
| 2398 | save() { | 2398 | save() { |
| 2399 | let editStudent = { | 2399 | let editStudent = { |
| 2400 | studentId: this.editedItem._id, | 2400 | studentId: this.editedItem._id, |
| 2401 | name: this.editedItem.name, | 2401 | name: this.editedItem.name, |
| 2402 | email: this.editedItem.email, | 2402 | email: this.editedItem.email, |
| 2403 | role: this.editedItem.role, | 2403 | role: this.editedItem.role, |
| 2404 | dob: this.editedItem.dob, | 2404 | dob: this.editedItem.dob, |
| 2405 | city: this.editedItem.city, | 2405 | city: this.editedItem.city, |
| 2406 | pincode: this.editedItem.pincode, | 2406 | pincode: this.editedItem.pincode, |
| 2407 | country: this.editedItem.country, | 2407 | country: this.editedItem.country, |
| 2408 | permanentAddress: this.editedItem.permanentAddress, | 2408 | permanentAddress: this.editedItem.permanentAddress, |
| 2409 | presentAddress: this.editedItem.presentAddress, | 2409 | presentAddress: this.editedItem.presentAddress, |
| 2410 | mobile: this.editedItem.mobile, | 2410 | mobile: this.editedItem.mobile, |
| 2411 | state: this.editedItem.state, | 2411 | state: this.editedItem.state, |
| 2412 | gender: this.editedItem.gender, | 2412 | gender: this.editedItem.gender, |
| 2413 | establishmentYear: this.editedItem.establishmentYear, | 2413 | establishmentYear: this.editedItem.establishmentYear, |
| 2414 | classId: this.editedItem.select, | 2414 | classId: this.editedItem.select, |
| 2415 | sectionId: this.editedItem.selectSection, | 2415 | sectionId: this.editedItem.selectSection, |
| 2416 | bloodGroup: this.editedItem.bloodGroup, | 2416 | bloodGroup: this.editedItem.bloodGroup, |
| 2417 | medicalNotes: this.editedItem.medicalNotes, | 2417 | medicalNotes: this.editedItem.medicalNotes, |
| 2418 | height: this.editedItem.height, | 2418 | height: this.editedItem.height, |
| 2419 | weight: this.editedItem.weight, | 2419 | weight: this.editedItem.weight, |
| 2420 | rollNo: this.editedItem.rollNo, | 2420 | rollNo: this.editedItem.rollNo, |
| 2421 | }; | 2421 | }; |
| 2422 | if (this.editImageUrl) { | 2422 | if (this.editImageUrl) { |
| 2423 | var str = this.editImageUrl; | 2423 | var str = this.editImageUrl; |
| 2424 | const [baseUrl, editImageUrl] = str.split(/,/); | 2424 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 2425 | editStudent.upload = editImageUrl; | 2425 | editStudent.upload = editImageUrl; |
| 2426 | } | 2426 | } |
| 2427 | this.editLoading = true; | 2427 | this.editLoading = true; |
| 2428 | http() | 2428 | http() |
| 2429 | .put("/updateStudent", editStudent) | 2429 | .put("/updateStudent", editStudent) |
| 2430 | .then((response) => { | 2430 | .then((response) => { |
| 2431 | this.snackbar = true; | 2431 | this.snackbar = true; |
| 2432 | this.text = response.data.message; | 2432 | this.text = response.data.message; |
| 2433 | this.color = "green"; | 2433 | this.color = "green"; |
| 2434 | this.imageUrl = ""; | 2434 | this.imageUrl = ""; |
| 2435 | this.findStudents(); | 2435 | this.findStudents(); |
| 2436 | this.close(); | 2436 | this.close(); |
| 2437 | this.editLoading = false; | 2437 | this.editLoading = false; |
| 2438 | }) | 2438 | }) |
| 2439 | .catch((error) => { | 2439 | .catch((error) => { |
| 2440 | this.snackbar = true; | 2440 | this.snackbar = true; |
| 2441 | this.text = error.response.data.statusText; | 2441 | this.text = error.response.data.statusText; |
| 2442 | this.color = "error"; | 2442 | this.color = "error"; |
| 2443 | this.editLoading = false; | 2443 | this.editLoading = false; |
| 2444 | }); | 2444 | }); |
| 2445 | }, | 2445 | }, |
| 2446 | submitParentDetails() { | 2446 | submitParentDetails() { |
| 2447 | if (this.$refs.parentForm.validate()) { | 2447 | if (this.$refs.parentForm.validate()) { |
| 2448 | this.parentData.fatherCellNo = this.parentData.fatherCellNo; | 2448 | this.parentData.fatherCellNo = this.parentData.fatherCellNo; |
| 2449 | this.parentData.motherCellNo = this.parentData.motherCellNo; | 2449 | this.parentData.motherCellNo = this.parentData.motherCellNo; |
| 2450 | let addparentDetails = { | 2450 | let addparentDetails = { |
| 2451 | email: this.parentData.email, | 2451 | email: this.parentData.email, |
| 2452 | fatherName: this.parentData.fatherName, | 2452 | fatherName: this.parentData.fatherName, |
| 2453 | countryCode: this.addedFatherCellCode, | 2453 | countryCode: this.addedFatherCellCode, |
| 2454 | fatherCellNo: this.parentData.fatherCellNo, | 2454 | fatherCellNo: this.parentData.fatherCellNo, |
| 2455 | motherName: this.parentData.motherName, | 2455 | motherName: this.parentData.motherName, |
| 2456 | motherCellNo: this.parentData.motherCellNo, | 2456 | motherCellNo: this.parentData.motherCellNo, |
| 2457 | fatherProfession: this.parentData.fatherProfession, | 2457 | fatherProfession: this.parentData.fatherProfession, |
| 2458 | motherProfession: this.parentData.motherProfession, | 2458 | motherProfession: this.parentData.motherProfession, |
| 2459 | password: this.parentData.password, | 2459 | password: this.parentData.password, |
| 2460 | role: "PARENT", | 2460 | role: "PARENT", |
| 2461 | }; | 2461 | }; |
| 2462 | this.loading = true; | 2462 | this.loading = true; |
| 2463 | http() | 2463 | http() |
| 2464 | .post("/createParent", addparentDetails) | 2464 | .post("/createParent", addparentDetails) |
| 2465 | .then((response) => { | 2465 | .then((response) => { |
| 2466 | this.parentId = response.data.data.id; | 2466 | this.parentId = response.data.data.id; |
| 2467 | this.e2 = 2; | 2467 | this.e2 = 2; |
| 2468 | this.snackbar = true; | 2468 | this.snackbar = true; |
| 2469 | this.text = response.data.message; | 2469 | this.text = response.data.message; |
| 2470 | this.color = "green"; | 2470 | this.color = "green"; |
| 2471 | // this.getStudentList(); | 2471 | // this.getStudentList(); |
| 2472 | this.clear(); | 2472 | this.clear(); |
| 2473 | this.loading = false; | 2473 | this.loading = false; |
| 2474 | }) | 2474 | }) |
| 2475 | .catch((error) => { | 2475 | .catch((error) => { |
| 2476 | this.snackbar = true; | 2476 | this.snackbar = true; |
| 2477 | this.text = error.response.data.message; | 2477 | this.text = error.response.data.message; |
| 2478 | this.color = "error"; | 2478 | this.color = "error"; |
| 2479 | if (error.response.data.statusText) { | 2479 | if (error.response.data.statusText) { |
| 2480 | this.text = error.response.data.statusText; | 2480 | this.text = error.response.data.statusText; |
| 2481 | } | 2481 | } |
| 2482 | this.loading = false; | 2482 | this.loading = false; |
| 2483 | }); | 2483 | }); |
| 2484 | } | 2484 | } |
| 2485 | }, | 2485 | }, |
| 2486 | getParentDetails() { | 2486 | getParentDetails() { |
| 2487 | if (this.parentData.fatherCellNo.length > 9) { | 2487 | if (this.parentData.fatherCellNo.length > 9) { |
| 2488 | this.showLoader = true; | 2488 | this.showLoader = true; |
| 2489 | this.isFatherCellExists = false; | 2489 | this.isFatherCellExists = false; |
| 2490 | http() | 2490 | http() |
| 2491 | .get("getParticularParent", { | 2491 | .get("getParticularParent", { |
| 2492 | params: { fatherCellNo: this.parentData.fatherCellNo }, | 2492 | params: { fatherCellNo: this.parentData.fatherCellNo }, |
| 2493 | headers: { | 2493 | headers: { |
| 2494 | Authorization: "Bearer " + this.$store.state.token, | 2494 | Authorization: "Bearer " + this.$store.state.token, |
| 2495 | }, | 2495 | }, |
| 2496 | }) | 2496 | }) |
| 2497 | .then((response) => { | 2497 | .then((response) => { |
| 2498 | this.showNext = true; | 2498 | this.showNext = true; |
| 2499 | this.showParent = false; | 2499 | this.showParent = false; |
| 2500 | this.parentData = response.data.data; | 2500 | this.parentData = response.data.data; |
| 2501 | this.parentId = response.data.data._id; | 2501 | this.parentId = response.data.data._id; |
| 2502 | this.showLoader = false; | 2502 | this.showLoader = false; |
| 2503 | this.isFatherCellExists = true; | 2503 | this.isFatherCellExists = true; |
| 2504 | }) | 2504 | }) |
| 2505 | .catch((error) => { | 2505 | .catch((error) => { |
| 2506 | // console.log("err====>", error.response.data.message); | 2506 | // console.log("err====>", error.response.data.message); |
| 2507 | this.text = error.response.data.message; | 2507 | this.text = error.response.data.message; |
| 2508 | this.snackbar = true; | 2508 | this.snackbar = true; |
| 2509 | this.color = "error"; | 2509 | this.color = "error"; |
| 2510 | if (this.text === "Data not found!") { | 2510 | if (this.text === "Data not found!") { |
| 2511 | this.showNext = false; | 2511 | this.showNext = false; |
| 2512 | this.showParent = true; | 2512 | this.showParent = true; |
| 2513 | this.parentData.email = ""; | 2513 | this.parentData.email = ""; |
| 2514 | this.parentData.fatherName = ""; | 2514 | this.parentData.fatherName = ""; |
| 2515 | this.parentData.motherName = ""; | 2515 | this.parentData.motherName = ""; |
| 2516 | this.parentData.motherCellNo = ""; | 2516 | this.parentData.motherCellNo = ""; |
| 2517 | this.parentData.fatherProfession = ""; | 2517 | this.parentData.fatherProfession = ""; |
| 2518 | this.parentData.motherProfession = ""; | 2518 | this.parentData.motherProfession = ""; |
| 2519 | this.parentData.password = ""; | 2519 | this.parentData.password = ""; |
| 2520 | } | 2520 | } |
| 2521 | this.showLoader = false; | 2521 | this.showLoader = false; |
| 2522 | }); | 2522 | }); |
| 2523 | } | 2523 | } |
| 2524 | }, | 2524 | }, |
| 2525 | suspendStudentStatus(status, id) { | 2525 | suspendStudentStatus(status, id) { |
| 2526 | let suspendStudentData = { | 2526 | let suspendStudentData = { |
| 2527 | studentId: id, | 2527 | studentId: id, |
| 2528 | status: status, | 2528 | status: status, |
| 2529 | }; | 2529 | }; |
| 2530 | http() | 2530 | http() |
| 2531 | .put("/suspendStudentAccount", suspendStudentData) | 2531 | .put("/suspendStudentAccount", suspendStudentData) |
| 2532 | .then((response) => { | 2532 | .then((response) => { |
| 2533 | this.findStudents(); | 2533 | this.findStudents(); |
| 2534 | this.text = response.data.message; | 2534 | this.text = response.data.message; |
| 2535 | this.color = "green"; | 2535 | this.color = "green"; |
| 2536 | this.snackbar = true; | 2536 | this.snackbar = true; |
| 2537 | }) | 2537 | }) |
| 2538 | .catch((error) => { | 2538 | .catch((error) => { |
| 2539 | this.snackbar = true; | 2539 | this.snackbar = true; |
| 2540 | this.color = "error"; | 2540 | this.color = "error"; |
| 2541 | this.text = error.response.data.message; | 2541 | this.text = error.response.data.message; |
| 2542 | }); | 2542 | }); |
| 2543 | }, | 2543 | }, |
| 2544 | displaySearch() { | 2544 | displaySearch() { |
| 2545 | (this.show = false), (this.showSearch = true); | 2545 | (this.show = false), (this.showSearch = true); |
| 2546 | }, | 2546 | }, |
| 2547 | closeSearch() { | 2547 | closeSearch() { |
| 2548 | this.showSearch = false; | 2548 | this.showSearch = false; |
| 2549 | this.show = true; | 2549 | this.show = true; |
| 2550 | this.search = ""; | 2550 | this.search = ""; |
| 2551 | }, | 2551 | }, |
| 2552 | }, | 2552 | }, |
| 2553 | mounted() { | 2553 | mounted() { |
| 2554 | const getCountryList = countryList(); | 2554 | const getCountryList = countryList(); |
| 2555 | this.role = this.$store.state.role; | 2555 | this.role = this.$store.state.role; |
| 2556 | this.countries = getCountryList; | 2556 | this.countries = getCountryList; |
| 2557 | var token = this.$store.state.token; | 2557 | var token = this.$store.state.token; |
| 2558 | http() | 2558 | http() |
| 2559 | .get("/getClassesList", { | 2559 | .get("/getClassesList", { |
| 2560 | headers: { Authorization: "Bearer " + token }, | 2560 | headers: { Authorization: "Bearer " + token }, |
| 2561 | }) | 2561 | }) |
| 2562 | .then((response) => { | 2562 | .then((response) => { |
| 2563 | this.addclass = response.data.data; | 2563 | this.addclass = response.data.data; |
| 2564 | }) | 2564 | }) |
| 2565 | .catch((error) => { | 2565 | .catch((error) => { |
| 2566 | this.showLoader = false; | 2566 | this.showLoader = false; |
| 2567 | if (error.response.status === 401) { | 2567 | if (error.response.status === 401) { |
| 2568 | this.$router.replace({ path: "/" }); | 2568 | this.$router.replace({ path: "/" }); |
| 2569 | this.$store.dispatch("setToken", null); | 2569 | this.$store.dispatch("setToken", null); |
| 2570 | this.$store.dispatch("Id", null); | 2570 | this.$store.dispatch("Id", null); |
| 2571 | this.$store.dispatch("Role", null); | 2571 | this.$store.dispatch("Role", null); |
| 2572 | } | 2572 | } |
| 2573 | }); | 2573 | }); |
| 2574 | }, | 2574 | }, |
| 2575 | }; | 2575 | }; |
| 2576 | </script> | 2576 | </script> |
| 2577 | <style scoped> | 2577 | <style scoped> |
| 2578 | .active { | 2578 | .active { |
| 2579 | background-color: gray; | 2579 | background-color: gray; |
| 2580 | color: white !important; | 2580 | color: white !important; |
| 2581 | } | 2581 | } |
| 2582 | .activebtn { | 2582 | .activebtn { |
| 2583 | color: black !important; | 2583 | color: black !important; |
| 2584 | } | 2584 | } |
| 2585 | </style> | 2585 | </style> |
src/pages/Teachers/teachers.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT TEACHERS DETAILS ****** --> | 3 | <!-- ****** EDIT TEACHERS DETAILS ****** --> |
| 4 | <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent> | 4 | <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent> |
| 5 | <v-card flat class="card-style" dark> | 5 | <v-card flat class="Card-style pa-3"> |
| 6 | <v-card-text> | 6 | <v-card-text> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Teacher Details</label> | 9 | <label class="title text-xs-center">Edit Teacher Details</label> |
| 10 | <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 16 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> | 16 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> |
| 17 | <img src="/static/icon/user.png" /> | 17 | <img src="/static/icon/user.png" /> |
| 18 | </v-avatar> | 18 | </v-avatar> |
| 19 | <img | 19 | <img |
| 20 | :src="editedItem.profilePicUrl" | 20 | :src="editedItem.profilePicUrl" |
| 21 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 21 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | style="border-radius:50%; width:150px" | 23 | style="border-radius:50%; width:150px" |
| 24 | /> | 24 | /> |
| 25 | <img | 25 | <img |
| 26 | v-if="imageUrl" | 26 | v-if="imageUrl" |
| 27 | :src="imageUrl" | 27 | :src="imageUrl" |
| 28 | height="150" | 28 | height="150" |
| 29 | style="border-radius:50%; width:150px" | 29 | style="border-radius:50%; width:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display:none" | 33 | style="display:none" |
| 34 | ref="image" | 34 | ref="image" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onFilePicked" | 36 | @change="onFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm6> | 41 | <v-flex xs12 sm6> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 class="pt-4 subheading"> | 43 | <v-flex xs4 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 class="ml-3"> | 47 | <v-flex xs8 class="ml-3"> |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | v-model="editedItem.name" | 49 | v-model="editedItem.name" |
| 50 | placeholder="fill your full Name" | 50 | placeholder="fill your full Name" |
| 51 | type="text" | 51 | type="text" |
| 52 | required | 52 | required |
| 53 | ></v-text-field> | 53 | ></v-text-field> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs12 sm6> | 57 | <v-flex xs12 sm6> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs4 sm4 class="pt-4 subheading"> | 59 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 60 | <label class="right">Email ID:</label> | 60 | <label class="right">Email ID:</label> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | <v-flex xs8 sm8 class="ml-3"> | 62 | <v-flex xs8 sm8 class="ml-3"> |
| 63 | <v-text-field | 63 | <v-text-field |
| 64 | placeholder="fill your email" | 64 | placeholder="fill your email" |
| 65 | v-model="editedItem.email" | 65 | v-model="editedItem.email" |
| 66 | type="text" | 66 | type="text" |
| 67 | required | 67 | required |
| 68 | ></v-text-field> | 68 | ></v-text-field> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | <v-layout wrap> | 73 | <v-layout wrap> |
| 74 | <v-flex xs12 sm6> | 74 | <v-flex xs12 sm6> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs4 class="pt-4 subheading"> | 76 | <v-flex xs4 class="pt-4 subheading"> |
| 77 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 77 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 78 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 78 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs8 class="ml-3"> | 80 | <v-flex xs8 class="ml-3"> |
| 81 | <v-menu | 81 | <v-menu |
| 82 | ref="menu" | 82 | ref="menu" |
| 83 | :close-on-content-click="false" | 83 | :close-on-content-click="false" |
| 84 | v-model="menu2" | 84 | v-model="menu2" |
| 85 | :nudge-right="40" | 85 | :nudge-right="40" |
| 86 | lazy | 86 | lazy |
| 87 | transition="scale-transition" | 87 | transition="scale-transition" |
| 88 | offset-y | 88 | offset-y |
| 89 | full-width | 89 | full-width |
| 90 | min-width="290px" | 90 | min-width="290px" |
| 91 | > | 91 | > |
| 92 | <v-text-field | 92 | <v-text-field |
| 93 | slot="activator" | 93 | slot="activator" |
| 94 | v-model="editedItem.dob" | 94 | v-model="editedItem.dob" |
| 95 | placeholder="Select date" | 95 | placeholder="Select date" |
| 96 | ></v-text-field> | 96 | ></v-text-field> |
| 97 | <v-date-picker | 97 | <v-date-picker |
| 98 | ref="picker" | 98 | ref="picker" |
| 99 | v-model="editedItem.dob" | 99 | v-model="editedItem.dob" |
| 100 | :max="new Date().toISOString().substr(0, 10)" | 100 | :max="new Date().toISOString().substr(0, 10)" |
| 101 | min="1950-01-01" | 101 | min="1950-01-01" |
| 102 | @input="menu2 = false" | 102 | @input="menu2 = false" |
| 103 | ></v-date-picker> | 103 | ></v-date-picker> |
| 104 | </v-menu> | 104 | </v-menu> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex xs12 sm6> | 108 | <v-flex xs12 sm6> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs4 class="pt-4 subheading"> | 110 | <v-flex xs4 class="pt-4 subheading"> |
| 111 | <label class="right">City:</label> | 111 | <label class="right">City:</label> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | <v-flex xs8 class="ml-3"> | 113 | <v-flex xs8 class="ml-3"> |
| 114 | <v-text-field | 114 | <v-text-field |
| 115 | v-model="editedItem.city" | 115 | v-model="editedItem.city" |
| 116 | placeholder="fill your City Name" | 116 | placeholder="fill your City Name" |
| 117 | type="text" | 117 | type="text" |
| 118 | required | 118 | required |
| 119 | ></v-text-field> | 119 | ></v-text-field> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout wrap> | 124 | <v-layout wrap> |
| 125 | <v-flex xs12 sm6> | 125 | <v-flex xs12 sm6> |
| 126 | <v-layout> | 126 | <v-layout> |
| 127 | <v-flex xs4 class="pt-4 subheading"> | 127 | <v-flex xs4 class="pt-4 subheading"> |
| 128 | <label class="right">State:</label> | 128 | <label class="right">State:</label> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex xs8 class="ml-3"> | 130 | <v-flex xs8 class="ml-3"> |
| 131 | <v-text-field | 131 | <v-text-field |
| 132 | v-model="editedItem.state" | 132 | v-model="editedItem.state" |
| 133 | placeholder="fill your State Name" | 133 | placeholder="fill your State Name" |
| 134 | type="text" | 134 | type="text" |
| 135 | required | 135 | required |
| 136 | ></v-text-field> | 136 | ></v-text-field> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs12 sm6> | 140 | <v-flex xs12 sm6> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">PinCode:</label> | 143 | <label class="right">PinCode:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs8 class="ml-3"> | 145 | <v-flex xs8 class="ml-3"> |
| 146 | <v-text-field | 146 | <v-text-field |
| 147 | v-model="editedItem.pincode" | 147 | v-model="editedItem.pincode" |
| 148 | placeholder="fill your pincode" | 148 | placeholder="fill your pincode" |
| 149 | type="number" | 149 | type="number" |
| 150 | required | 150 | required |
| 151 | ></v-text-field> | 151 | ></v-text-field> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-layout> | 153 | </v-layout> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-layout wrap> | 156 | <v-layout wrap> |
| 157 | <!-- EDIT DETAILS MOBILE NUMBER --> | 157 | <!-- EDIT DETAILS MOBILE NUMBER --> |
| 158 | <v-flex xs12 sm6> | 158 | <v-flex xs12 sm6> |
| 159 | <v-layout> | 159 | <v-layout> |
| 160 | <v-flex xs4 class="pt-4 subheading"> | 160 | <v-flex xs4 class="pt-4 subheading"> |
| 161 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 161 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 162 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 162 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | <v-flex xs8 class="ml-3"> | 164 | <v-flex xs8 class="ml-3"> |
| 165 | <v-layout row wrap> | 165 | <v-layout row wrap> |
| 166 | <v-flex xs3 class="mt-3"> | 166 | <v-flex xs3 class="mt-3"> |
| 167 | <vue-country-code @onSelect="editMobileCode" class="black--text"></vue-country-code> | 167 | <vue-country-code @onSelect="editMobileCode" class="black--text"></vue-country-code> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | <v-flex xs9> | 169 | <v-flex xs9> |
| 170 | <v-text-field | 170 | <v-text-field |
| 171 | v-model="editedItem.mobileNo" | 171 | v-model="editedItem.mobileNo" |
| 172 | placeholder="Fill MobileNo" | 172 | placeholder="Fill MobileNo" |
| 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-flex> | 180 | </v-flex> |
| 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">Select Country:</label> | 184 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 185 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 185 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | <v-flex xs8 sm8 class="ml-3"> | 187 | <v-flex xs8 sm8 class="ml-3"> |
| 188 | <v-autocomplete | 188 | <v-autocomplete |
| 189 | v-model="editedItem.country" | 189 | v-model="editedItem.country" |
| 190 | :items="countries" | 190 | :items="countries" |
| 191 | placeholder="Select Country Name" | 191 | placeholder="Select Country Name" |
| 192 | required | 192 | required |
| 193 | ></v-autocomplete> | 193 | ></v-autocomplete> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | </v-layout> | 197 | </v-layout> |
| 198 | <v-layout wrap> | 198 | <v-layout wrap> |
| 199 | <v-flex xs12 sm6> | 199 | <v-flex xs12 sm6> |
| 200 | <v-layout> | 200 | <v-layout> |
| 201 | <v-flex xs4 class="pt-4 subheading"> | 201 | <v-flex xs4 class="pt-4 subheading"> |
| 202 | <label class="right">Join Date:</label> | 202 | <label class="right">Join Date:</label> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | <v-flex xs8 sm8 class="ml-3"> | 204 | <v-flex xs8 sm8 class="ml-3"> |
| 205 | <v-menu | 205 | <v-menu |
| 206 | ref="menu" | 206 | ref="menu" |
| 207 | :close-on-content-click="false" | 207 | :close-on-content-click="false" |
| 208 | v-model="menu3" | 208 | v-model="menu3" |
| 209 | :nudge-right="40" | 209 | :nudge-right="40" |
| 210 | lazy | 210 | lazy |
| 211 | transition="scale-transition" | 211 | transition="scale-transition" |
| 212 | offset-y | 212 | offset-y |
| 213 | full-width | 213 | full-width |
| 214 | min-width="290px" | 214 | min-width="290px" |
| 215 | > | 215 | > |
| 216 | <v-text-field | 216 | <v-text-field |
| 217 | slot="activator" | 217 | slot="activator" |
| 218 | v-model="editedItem.joinDate" | 218 | v-model="editedItem.joinDate" |
| 219 | placeholder="Select date" | 219 | placeholder="Select date" |
| 220 | ></v-text-field> | 220 | ></v-text-field> |
| 221 | <v-date-picker | 221 | <v-date-picker |
| 222 | ref="picker" | 222 | ref="picker" |
| 223 | v-model="editedItem.joinDate" | 223 | v-model="editedItem.joinDate" |
| 224 | :max="new Date().toISOString().substr(0, 10)" | 224 | :max="new Date().toISOString().substr(0, 10)" |
| 225 | min="1950-01-01" | 225 | min="1950-01-01" |
| 226 | @input="menu3 = false" | 226 | @input="menu3 = false" |
| 227 | ></v-date-picker> | 227 | ></v-date-picker> |
| 228 | </v-menu> | 228 | </v-menu> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-layout> | 230 | </v-layout> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs12 sm6> | 232 | <v-flex xs12 sm6> |
| 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 hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 235 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 236 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 236 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | <v-flex xs8 sm8 class="ml-3"> | 238 | <v-flex xs8 sm8 class="ml-3"> |
| 239 | <v-text-field | 239 | <v-text-field |
| 240 | label="Select Image" | 240 | label="Select Image" |
| 241 | @click="pickFile" | 241 | @click="pickFile" |
| 242 | v-model="imageName" | 242 | v-model="imageName" |
| 243 | append-icon="attach_file" | 243 | append-icon="attach_file" |
| 244 | ></v-text-field> | 244 | ></v-text-field> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | </v-layout> | 246 | </v-layout> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | </v-layout> | 248 | </v-layout> |
| 249 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> | 249 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> |
| 250 | <v-flex xs12 sm6> | 250 | <v-flex xs12 sm6> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-flex xs4 sm4 class="pt-4 subheading"> | 252 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 253 | <label class="right">Present Address:</label> | 253 | <label class="right">Present Address:</label> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | <v-flex xs8 sm8 class="ml-3"> | 255 | <v-flex xs8 sm8 class="ml-3"> |
| 256 | <v-text-field | 256 | <v-text-field |
| 257 | name="input-4-3" | 257 | name="input-4-3" |
| 258 | v-model="editedItem.presentAddress" | 258 | v-model="editedItem.presentAddress" |
| 259 | placeholder="fill Your present Address" | 259 | placeholder="fill Your present Address" |
| 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 sm6> | 265 | <v-flex xs12 sm6> |
| 266 | <v-layout> | 266 | <v-layout> |
| 267 | <v-flex xs4 sm4 class="pt-4 subheading"> | 267 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 268 | <label class="right">Permanent Address:</label> | 268 | <label class="right">Permanent Address:</label> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <v-flex xs12 sm8 class="ml-3"> | 270 | <v-flex xs12 sm8 class="ml-3"> |
| 271 | <v-text-field | 271 | <v-text-field |
| 272 | name="input-4-3" | 272 | name="input-4-3" |
| 273 | v-model="editedItem.permanentAddress" | 273 | v-model="editedItem.permanentAddress" |
| 274 | placeholder="fill Your Permanent Address" | 274 | placeholder="fill Your Permanent Address" |
| 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-layout> | 280 | </v-layout> |
| 281 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 281 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 282 | <v-flex xs12 sm12> | 282 | <v-flex xs12 sm12> |
| 283 | <v-layout> | 283 | <v-layout> |
| 284 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 284 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 285 | <label class>Present Address:</label> | 285 | <label class>Present Address:</label> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs12 sm12> | 289 | <v-flex xs12 sm12> |
| 290 | <v-textarea | 290 | <v-textarea |
| 291 | name="input-4-3" | 291 | name="input-4-3" |
| 292 | v-model="editedItem.presentAddress" | 292 | v-model="editedItem.presentAddress" |
| 293 | placeholder="fill Your present Address" | 293 | placeholder="fill Your present Address" |
| 294 | required | 294 | required |
| 295 | ></v-textarea> | 295 | ></v-textarea> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | <v-flex xs12 sm12> | 299 | <v-flex xs12 sm12> |
| 300 | <v-layout> | 300 | <v-layout> |
| 301 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 301 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 302 | <label>Permanent Address:</label> | 302 | <label>Permanent Address:</label> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | </v-layout> | 304 | </v-layout> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs12 sm12> | 306 | <v-flex xs12 sm12> |
| 307 | <v-textarea | 307 | <v-textarea |
| 308 | name="input-4-3" | 308 | name="input-4-3" |
| 309 | v-model="editedItem.permanentAddress" | 309 | v-model="editedItem.permanentAddress" |
| 310 | placeholder="fill Your Permanent Address" | 310 | placeholder="fill Your Permanent Address" |
| 311 | required | 311 | required |
| 312 | ></v-textarea> | 312 | ></v-textarea> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | </v-flex> | 315 | </v-flex> |
| 316 | </v-layout> | 316 | </v-layout> |
| 317 | <v-layout> | 317 | <v-layout> |
| 318 | <v-flex xs12 sm12> | 318 | <v-flex xs12 sm12> |
| 319 | <v-flex xs12 sm12> | 319 | <v-flex xs12 sm12> |
| 320 | <v-layout class="right"> | 320 | <v-layout class="right"> |
| 321 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> | 321 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | </v-container> | 326 | </v-container> |
| 327 | </v-card-text> | 327 | </v-card-text> |
| 328 | </v-card> | 328 | </v-card> |
| 329 | </v-dialog> | 329 | </v-dialog> |
| 330 | 330 | ||
| 331 | <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> | 331 | <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> |
| 332 | 332 | ||
| 333 | <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent> | 333 | <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent> |
| 334 | <v-card flat class="card-style pa-3" dark> | 334 | <v-card flat class="Card-style pa-3"> |
| 335 | <v-layout> | 335 | <v-layout> |
| 336 | <v-flex xs12> | 336 | <v-flex xs12> |
| 337 | <label class="title text-xs-center">View Teacher</label> | 337 | <label class="title text-xs-center">View Teacher</label> |
| 338 | <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> | 338 | <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | </v-layout> | 340 | </v-layout> |
| 341 | <v-card-text> | 341 | <v-card-text> |
| 342 | <v-container grid-list-md> | 342 | <v-container grid-list-md> |
| 343 | <v-layout wrap> | 343 | <v-layout wrap> |
| 344 | <v-flex> | 344 | <v-flex> |
| 345 | <v-flex align-center justify-center layout text-xs-center> | 345 | <v-flex align-center justify-center layout text-xs-center> |
| 346 | <v-avatar size="80"> | 346 | <v-avatar size="80"> |
| 347 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 347 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 348 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 348 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 349 | </v-avatar> | 349 | </v-avatar> |
| 350 | </v-flex> | 350 | </v-flex> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs5 sm6> | 352 | <v-flex xs5 sm6> |
| 353 | <h5 class="right my-1"> | 353 | <h5 class="right my-1"> |
| 354 | <b>Full Name:</b> | 354 | <b>Full Name:</b> |
| 355 | </h5> | 355 | </h5> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | <v-flex sm6 xs8> | 357 | <v-flex sm6 xs8> |
| 358 | <h5 class="my-1">{{ editedItem.name }}</h5> | 358 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | </v-layout> | 360 | </v-layout> |
| 361 | <v-layout> | 361 | <v-layout> |
| 362 | <v-flex xs5 sm6> | 362 | <v-flex xs5 sm6> |
| 363 | <h5 class="right my-1"> | 363 | <h5 class="right my-1"> |
| 364 | <b>Email:</b> | 364 | <b>Email:</b> |
| 365 | </h5> | 365 | </h5> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | <v-flex sm6 xs8> | 367 | <v-flex sm6 xs8> |
| 368 | <h5 class="my-1">{{ editedItem.email }}</h5> | 368 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | </v-layout> | 370 | </v-layout> |
| 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>City:</b> | 374 | <b>City:</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.city }}</h5> | 378 | <h5 class="my-1">{{ editedItem.city }}</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>State:</b> | 384 | <b>State:</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.state }}</h5> | 388 | <h5 class="my-1">{{ editedItem.state }}</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>Country:</b> | 394 | <b>Country:</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.country }}</h5> | 398 | <h5 class="my-1">{{ editedItem.country }}</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>Pincode:</b> | 404 | <b>Pincode:</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.pincode }}</h5> | 408 | <h5 class="my-1">{{ editedItem.pincode }}</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>Mobile No:</b> | 414 | <b>Mobile No:</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.mobileNo }}</h5> | 418 | <h5 class="my-1">{{ editedItem.mobileNo }}</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>Join Date:</b> | 424 | <b>Join Date:</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">{{ dates(editedItem.joinDate) }}</h5> | 428 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</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>D.O.B :</b> | 434 | <b>D.O.B :</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">{{ dates(editedItem.dob) }}</h5> | 438 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | <v-layout> | 441 | <v-layout> |
| 442 | <v-flex xs6 sm6> | 442 | <v-flex xs6 sm6> |
| 443 | <h5 class="right my-1"> | 443 | <h5 class="right my-1"> |
| 444 | <b>Permanent Address:</b> | 444 | <b>Permanent Address:</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">{{ editedItem.permanentAddress }}</h5> | 448 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 449 | </v-flex> | 449 | </v-flex> |
| 450 | </v-layout> | 450 | </v-layout> |
| 451 | <v-layout> | 451 | <v-layout> |
| 452 | <v-flex xs6 sm6> | 452 | <v-flex xs6 sm6> |
| 453 | <h5 class="right my-1"> | 453 | <h5 class="right my-1"> |
| 454 | <b>present Address:</b> | 454 | <b>present Address:</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">{{ editedItem.presentAddress }}</h5> | 458 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | </v-layout> | 460 | </v-layout> |
| 461 | </v-flex> | 461 | </v-flex> |
| 462 | </v-layout> | 462 | </v-layout> |
| 463 | </v-container> | 463 | </v-container> |
| 464 | </v-card-text> | 464 | </v-card-text> |
| 465 | </v-card> | 465 | </v-card> |
| 466 | </v-dialog> | 466 | </v-dialog> |
| 467 | <!-- ****** EXISTING-Teachers TABLE DATA****** --> | 467 | <!-- ****** EXISTING-Teachers TABLE DATA****** --> |
| 468 | <v-toolbar color="transparent" flat> | 468 | <v-toolbar color="transparent" flat> |
| 469 | <v-btn | 469 | <v-btn |
| 470 | fab | 470 | fab |
| 471 | dark | 471 | dark |
| 472 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 472 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 473 | small | 473 | small |
| 474 | @click="addTeacherDialog = true" | 474 | @click="addTeacherDialog = true" |
| 475 | > | 475 | > |
| 476 | <v-icon dark>add</v-icon> | 476 | <v-icon dark>add</v-icon> |
| 477 | </v-btn> | 477 | </v-btn> |
| 478 | <v-btn | 478 | <v-btn |
| 479 | v-if="role != 'TEACHER' " | 479 | v-if="role != 'TEACHER' " |
| 480 | round | 480 | round |
| 481 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 481 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 482 | dark | 482 | dark |
| 483 | @click="addTeacherDialog = true" | 483 | @click="addTeacherDialog = true" |
| 484 | > | 484 | > |
| 485 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher | 485 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher |
| 486 | </v-btn> | 486 | </v-btn> |
| 487 | <v-spacer></v-spacer> | 487 | <v-spacer></v-spacer> |
| 488 | <v-card-title class="body-1" v-show="show"> | 488 | <v-card-title class="body-1" v-show="show"> |
| 489 | <v-btn icon large flat @click="displaySearch"> | 489 | <v-btn icon large flat @click="displaySearch"> |
| 490 | <v-avatar size="27"> | 490 | <v-avatar size="27"> |
| 491 | <img src="/static/icon/search.png" alt="icon" /> | 491 | <img src="/static/icon/search.png" alt="icon" /> |
| 492 | </v-avatar> | 492 | </v-avatar> |
| 493 | </v-btn> | 493 | </v-btn> |
| 494 | </v-card-title> | 494 | </v-card-title> |
| 495 | <v-flex md2 lg2 sm6 xs8 v-if="showSearch"> | 495 | <v-flex md2 lg2 sm6 xs8 v-if="showSearch"> |
| 496 | <v-layout> | 496 | <v-layout> |
| 497 | <v-text-field | 497 | <v-text-field |
| 498 | autofocus | 498 | autofocus |
| 499 | v-model="search" | 499 | v-model="search" |
| 500 | label="Search" | 500 | label="Search" |
| 501 | prepend-inner-icon="search" | 501 | prepend-inner-icon="search" |
| 502 | color="primary" | 502 | color="primary" |
| 503 | ></v-text-field> | 503 | ></v-text-field> |
| 504 | <v-icon @click="closeSearch" color="error">close</v-icon> | 504 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 505 | </v-layout> | 505 | </v-layout> |
| 506 | </v-flex> | 506 | </v-flex> |
| 507 | </v-toolbar> | 507 | </v-toolbar> |
| 508 | <v-data-table | 508 | <v-data-table |
| 509 | :headers="headers" | 509 | :headers="headers" |
| 510 | :items="desserts" | 510 | :items="desserts" |
| 511 | :pagination.sync="pagination" | 511 | :pagination.sync="pagination" |
| 512 | :search="search" | 512 | :search="search" |
| 513 | > | 513 | > |
| 514 | <template slot="items" slot-scope="props"> | 514 | <template slot="items" slot-scope="props"> |
| 515 | <tr class="tr"> | 515 | <tr class="tr"> |
| 516 | <td class="td td-row">{{ props.index + 1}}</td> | 516 | <td class="td td-row">{{ props.index + 1}}</td> |
| 517 | <td class="td td-row text-xs-center"> | 517 | <td class="td td-row text-xs-center"> |
| 518 | <v-avatar size="40"> | 518 | <v-avatar size="40"> |
| 519 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 519 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 520 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 520 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 521 | </v-avatar> | 521 | </v-avatar> |
| 522 | </td> | 522 | </td> |
| 523 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 523 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 524 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 524 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 525 | <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> | 525 | <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> |
| 526 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> | 526 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> |
| 527 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> | 527 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> |
| 528 | <td class="td td-row text-xs-center"> | 528 | <td class="td td-row text-xs-center"> |
| 529 | <v-switch | 529 | <v-switch |
| 530 | class="pl-3" | 530 | class="pl-3" |
| 531 | v-model="props.item.status" | 531 | v-model="props.item.status" |
| 532 | @change="suspendStatus(props.item.status,props.item._id)" | 532 | @change="suspendStatus(props.item.status,props.item._id)" |
| 533 | ></v-switch> | 533 | ></v-switch> |
| 534 | </td> | 534 | </td> |
| 535 | <td class="text-xs-center td td-row"> | 535 | <td class="text-xs-center td td-row"> |
| 536 | <span> | 536 | <span> |
| 537 | <v-tooltip top> | 537 | <v-tooltip top> |
| 538 | <img | 538 | <img |
| 539 | slot="activator" | 539 | slot="activator" |
| 540 | style="cursor:pointer; width:25px; height:25px; " | 540 | style="cursor:pointer; width:25px; height:25px; " |
| 541 | class="mr-3" | 541 | class="mr-3" |
| 542 | @click="profile(props.item)" | 542 | @click="profile(props.item)" |
| 543 | src="/static/icon/view.png" | 543 | src="/static/icon/view.png" |
| 544 | /> | 544 | /> |
| 545 | <span>View</span> | 545 | <span>View</span> |
| 546 | </v-tooltip> | 546 | </v-tooltip> |
| 547 | <v-tooltip top v-if="role != 'TEACHER' "> | 547 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 548 | <img | 548 | <img |
| 549 | slot="activator" | 549 | slot="activator" |
| 550 | style="cursor:pointer; width:20px; height:18px; " | 550 | style="cursor:pointer; width:20px; height:18px; " |
| 551 | class="mr-3" | 551 | class="mr-3" |
| 552 | @click="editItem(props.item)" | 552 | @click="editItem(props.item)" |
| 553 | src="/static/icon/edit.png" | 553 | src="/static/icon/edit.png" |
| 554 | /> | 554 | /> |
| 555 | <span>Edit</span> | 555 | <span>Edit</span> |
| 556 | </v-tooltip> | 556 | </v-tooltip> |
| 557 | <!-- <v-tooltip top v-if="role != 'TEACHER' "> | 557 | <!-- <v-tooltip top v-if="role != 'TEACHER' "> |
| 558 | <img | 558 | <img |
| 559 | slot="activator" | 559 | slot="activator" |
| 560 | style="cursor:pointer; width:20px; height:20px; " | 560 | style="cursor:pointer; width:20px; height:20px; " |
| 561 | @click="deleteItem(props.item)" | 561 | @click="deleteItem(props.item)" |
| 562 | src="/static/icon/delete.png" | 562 | src="/static/icon/delete.png" |
| 563 | class="mr-3" | 563 | class="mr-3" |
| 564 | /> | 564 | /> |
| 565 | <span>Delete</span> | 565 | <span>Delete</span> |
| 566 | </v-tooltip>--> | 566 | </v-tooltip>--> |
| 567 | </span> | 567 | </span> |
| 568 | </td> | 568 | </td> |
| 569 | </tr> | 569 | </tr> |
| 570 | </template> | 570 | </template> |
| 571 | <v-alert | 571 | <v-alert |
| 572 | slot="no-results" | 572 | slot="no-results" |
| 573 | :value="true" | 573 | :value="true" |
| 574 | color="error" | 574 | color="error" |
| 575 | icon="warning" | 575 | icon="warning" |
| 576 | >Your search for "{{ search }}" found no results.</v-alert> | 576 | >Your search for "{{ search }}" found no results.</v-alert> |
| 577 | </v-data-table> | 577 | </v-data-table> |
| 578 | 578 | ||
| 579 | <!-- ****** DIALOG BOX - Add Teachers Data****** --> | 579 | <!-- ****** DIALOG BOX - Add Teachers Data****** --> |
| 580 | <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent> | 580 | <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent> |
| 581 | <v-card flat class="card-style pa-2" dark> | 581 | <v-card flat class="Card-style pa-2"> |
| 582 | <v-layout> | 582 | <v-layout> |
| 583 | <v-flex xs12 class="pa-0"> | 583 | <v-flex xs12 class="pa-0"> |
| 584 | <label class="title text-xs-center">Add Teacher</label> | 584 | <label class="title text-xs-center">Add Teacher</label> |
| 585 | <v-icon | 585 | <v-icon |
| 586 | size="24" | 586 | size="24" |
| 587 | class="right" | 587 | class="right" |
| 588 | @click="$refs.form.reset();addTeacherDialog = false" | 588 | @click="$refs.form.reset();addTeacherDialog = false" |
| 589 | >cancel</v-icon> | 589 | >cancel</v-icon> |
| 590 | </v-flex> | 590 | </v-flex> |
| 591 | </v-layout> | 591 | </v-layout> |
| 592 | <v-form ref="form" v-model="valid" lazy-validation> | 592 | <v-form ref="form" v-model="valid" lazy-validation> |
| 593 | <v-container fluid> | 593 | <v-container fluid> |
| 594 | <v-layout> | 594 | <v-layout> |
| 595 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 595 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 596 | <v-avatar size="120px"> | 596 | <v-avatar size="120px"> |
| 597 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 597 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 598 | </v-avatar> | 598 | </v-avatar> |
| 599 | <img | 599 | <img |
| 600 | :src="imageUrl" | 600 | :src="imageUrl" |
| 601 | height="150" | 601 | height="150" |
| 602 | v-if="imageUrl" | 602 | v-if="imageUrl" |
| 603 | style="border-radius:50%; width:150px" | 603 | style="border-radius:50%; width:150px" |
| 604 | /> | 604 | /> |
| 605 | </v-flex> | 605 | </v-flex> |
| 606 | </v-layout> | 606 | </v-layout> |
| 607 | <v-layout wrap> | 607 | <v-layout wrap> |
| 608 | <v-flex xs12 sm6> | 608 | <v-flex xs12 sm6> |
| 609 | <v-layout> | 609 | <v-layout> |
| 610 | <v-flex xs4 class="pt-4 subheading"> | 610 | <v-flex xs4 class="pt-4 subheading"> |
| 611 | <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> | 611 | <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> |
| 612 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> | 612 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> |
| 613 | </v-flex> | 613 | </v-flex> |
| 614 | <v-flex xs8 class="ml-3"> | 614 | <v-flex xs8 class="ml-3"> |
| 615 | <v-text-field | 615 | <v-text-field |
| 616 | v-model="addTeachers.name" | 616 | v-model="addTeachers.name" |
| 617 | placeholder="fill your full Name" | 617 | placeholder="fill your full Name" |
| 618 | name="name" | 618 | name="name" |
| 619 | type="text" | 619 | type="text" |
| 620 | :rules="nameRules" | 620 | :rules="nameRules" |
| 621 | required | 621 | required |
| 622 | ></v-text-field> | 622 | ></v-text-field> |
| 623 | </v-flex> | 623 | </v-flex> |
| 624 | </v-layout> | 624 | </v-layout> |
| 625 | </v-flex> | 625 | </v-flex> |
| 626 | <v-flex xs12 sm6> | 626 | <v-flex xs12 sm6> |
| 627 | <v-layout> | 627 | <v-layout> |
| 628 | <v-flex xs4 class="pt-4 subheading"> | 628 | <v-flex xs4 class="pt-4 subheading"> |
| 629 | <label class="right">Email ID:</label> | 629 | <label class="right">Email ID:</label> |
| 630 | </v-flex> | 630 | </v-flex> |
| 631 | <v-flex xs8 class="ml-3"> | 631 | <v-flex xs8 class="ml-3"> |
| 632 | <v-text-field | 632 | <v-text-field |
| 633 | placeholder="fill your email" | 633 | placeholder="fill your email" |
| 634 | v-model="addTeachers.email" | 634 | v-model="addTeachers.email" |
| 635 | type="text" | 635 | type="text" |
| 636 | name="email" | 636 | name="email" |
| 637 | required | 637 | required |
| 638 | ></v-text-field> | 638 | ></v-text-field> |
| 639 | </v-flex> | 639 | </v-flex> |
| 640 | </v-layout> | 640 | </v-layout> |
| 641 | </v-flex> | 641 | </v-flex> |
| 642 | </v-layout> | 642 | </v-layout> |
| 643 | <v-layout wrap> | 643 | <v-layout wrap> |
| 644 | <v-flex xs12 sm6> | 644 | <v-flex xs12 sm6> |
| 645 | <v-layout> | 645 | <v-layout> |
| 646 | <v-flex xs4 sm4 class="pt-4 subheading"> | 646 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 647 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 647 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 648 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 648 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 649 | </v-flex> | 649 | </v-flex> |
| 650 | <v-flex xs8 class="ml-3"> | 650 | <v-flex xs8 class="ml-3"> |
| 651 | <v-menu | 651 | <v-menu |
| 652 | ref="menu" | 652 | ref="menu" |
| 653 | :close-on-content-click="false" | 653 | :close-on-content-click="false" |
| 654 | v-model="menu" | 654 | v-model="menu" |
| 655 | :nudge-right="40" | 655 | :nudge-right="40" |
| 656 | lazy | 656 | lazy |
| 657 | transition="scale-transition" | 657 | transition="scale-transition" |
| 658 | offset-y | 658 | offset-y |
| 659 | full-width | 659 | full-width |
| 660 | min-width="290px" | 660 | min-width="290px" |
| 661 | > | 661 | > |
| 662 | <v-text-field | 662 | <v-text-field |
| 663 | slot="activator" | 663 | slot="activator" |
| 664 | :rules="dateRules" | 664 | :rules="dateRules" |
| 665 | v-model="addTeachers.date" | 665 | v-model="addTeachers.date" |
| 666 | placeholder="Select date" | 666 | placeholder="Select date" |
| 667 | ></v-text-field> | 667 | ></v-text-field> |
| 668 | <v-date-picker | 668 | <v-date-picker |
| 669 | ref="picker" | 669 | ref="picker" |
| 670 | v-model="addTeachers.date" | 670 | v-model="addTeachers.date" |
| 671 | :max="new Date().toISOString().substr(0, 10)" | 671 | :max="new Date().toISOString().substr(0, 10)" |
| 672 | min="1950-01-01" | 672 | min="1950-01-01" |
| 673 | @input="menu = false" | 673 | @input="menu = false" |
| 674 | ></v-date-picker> | 674 | ></v-date-picker> |
| 675 | </v-menu> | 675 | </v-menu> |
| 676 | </v-flex> | 676 | </v-flex> |
| 677 | </v-layout> | 677 | </v-layout> |
| 678 | </v-flex> | 678 | </v-flex> |
| 679 | <v-flex xs12 sm6> | 679 | <v-flex xs12 sm6> |
| 680 | <v-layout> | 680 | <v-layout> |
| 681 | <v-flex xs4 class="pt-4 subheading"> | 681 | <v-flex xs4 class="pt-4 subheading"> |
| 682 | <label class="right">City:</label> | 682 | <label class="right">City:</label> |
| 683 | </v-flex> | 683 | </v-flex> |
| 684 | <v-flex xs8 class="ml-3"> | 684 | <v-flex xs8 class="ml-3"> |
| 685 | <v-text-field | 685 | <v-text-field |
| 686 | v-model="addTeachers.city" | 686 | v-model="addTeachers.city" |
| 687 | placeholder="fill your City Name" | 687 | placeholder="fill your City Name" |
| 688 | name="City" | 688 | name="City" |
| 689 | type="text" | 689 | type="text" |
| 690 | :rules="cityRules" | 690 | :rules="cityRules" |
| 691 | required | 691 | required |
| 692 | ></v-text-field> | 692 | ></v-text-field> |
| 693 | </v-flex> | 693 | </v-flex> |
| 694 | </v-layout> | 694 | </v-layout> |
| 695 | </v-flex> | 695 | </v-flex> |
| 696 | </v-layout> | 696 | </v-layout> |
| 697 | <v-layout wrap> | 697 | <v-layout wrap> |
| 698 | <v-flex xs12 sm6> | 698 | <v-flex xs12 sm6> |
| 699 | <v-layout> | 699 | <v-layout> |
| 700 | <v-flex xs4 class="pt-4 subheading"> | 700 | <v-flex xs4 class="pt-4 subheading"> |
| 701 | <label class="right">State:</label> | 701 | <label class="right">State:</label> |
| 702 | </v-flex> | 702 | </v-flex> |
| 703 | <v-flex xs8 class="ml-3"> | 703 | <v-flex xs8 class="ml-3"> |
| 704 | <v-text-field | 704 | <v-text-field |
| 705 | v-model="addTeachers.state" | 705 | v-model="addTeachers.state" |
| 706 | placeholder="fill your State Name" | 706 | placeholder="fill your State Name" |
| 707 | name="state" | 707 | name="state" |
| 708 | type="text" | 708 | type="text" |
| 709 | :rules="stateRules" | 709 | :rules="stateRules" |
| 710 | required | 710 | required |
| 711 | ></v-text-field> | 711 | ></v-text-field> |
| 712 | </v-flex> | 712 | </v-flex> |
| 713 | </v-layout> | 713 | </v-layout> |
| 714 | </v-flex> | 714 | </v-flex> |
| 715 | <v-flex xs12 sm6> | 715 | <v-flex xs12 sm6> |
| 716 | <v-layout> | 716 | <v-layout> |
| 717 | <v-flex xs4 class="pt-4 subheading"> | 717 | <v-flex xs4 class="pt-4 subheading"> |
| 718 | <label class="right">PinCode:</label> | 718 | <label class="right">PinCode:</label> |
| 719 | </v-flex> | 719 | </v-flex> |
| 720 | <v-flex xs8 class="ml-3"> | 720 | <v-flex xs8 class="ml-3"> |
| 721 | <v-text-field | 721 | <v-text-field |
| 722 | v-model="addTeachers.pincode" | 722 | v-model="addTeachers.pincode" |
| 723 | placeholder="fill your pincode" | 723 | placeholder="fill your pincode" |
| 724 | name="pincode" | 724 | name="pincode" |
| 725 | type="number" | 725 | type="number" |
| 726 | :rules="pincode" | 726 | :rules="pincode" |
| 727 | required | 727 | required |
| 728 | ></v-text-field> | 728 | ></v-text-field> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | </v-layout> | 730 | </v-layout> |
| 731 | </v-flex> | 731 | </v-flex> |
| 732 | </v-layout> | 732 | </v-layout> |
| 733 | <!-- ADD TEACHER MOBILE --> | 733 | <!-- ADD TEACHER MOBILE --> |
| 734 | <v-layout wrap> | 734 | <v-layout wrap> |
| 735 | <v-flex xs12 sm6> | 735 | <v-flex xs12 sm6> |
| 736 | <v-layout> | 736 | <v-layout> |
| 737 | <v-flex xs4 class="pt-4 subheading"> | 737 | <v-flex xs4 class="pt-4 subheading"> |
| 738 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 738 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 739 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 739 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 740 | </v-flex> | 740 | </v-flex> |
| 741 | <v-flex xs8 class="ml-3"> | 741 | <v-flex xs8 class="ml-3"> |
| 742 | <v-layout row wrap> | 742 | <v-layout row wrap> |
| 743 | <v-flex xs3 class="mt-3"> | 743 | <v-flex xs3 class="mt-3"> |
| 744 | <vue-country-code @onSelect="addTeacherMobileCode" class="black--text"></vue-country-code> | 744 | <vue-country-code @onSelect="addTeacherMobileCode" class="black--text"></vue-country-code> |
| 745 | </v-flex> | 745 | </v-flex> |
| 746 | <v-flex xs9> | 746 | <v-flex xs9> |
| 747 | <v-text-field | 747 | <v-text-field |
| 748 | v-model="addTeachers.mobileNo" | 748 | v-model="addTeachers.mobileNo" |
| 749 | placeholder="Fill your Mobile No." | 749 | placeholder="Fill your Mobile No." |
| 750 | name="mobileNo" | 750 | name="mobileNo" |
| 751 | type="number" | 751 | type="number" |
| 752 | :rules="mobileNoRules" | 752 | :rules="mobileNoRules" |
| 753 | required | 753 | required |
| 754 | ></v-text-field> | 754 | ></v-text-field> |
| 755 | </v-flex> | 755 | </v-flex> |
| 756 | </v-layout> | 756 | </v-layout> |
| 757 | </v-flex> | 757 | </v-flex> |
| 758 | </v-layout> | 758 | </v-layout> |
| 759 | </v-flex> | 759 | </v-flex> |
| 760 | <v-flex xs12 sm6> | 760 | <v-flex xs12 sm6> |
| 761 | <v-layout> | 761 | <v-layout> |
| 762 | <v-flex xs4 class="pt-4 subheading"> | 762 | <v-flex xs4 class="pt-4 subheading"> |
| 763 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 763 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 764 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 764 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 765 | </v-flex> | 765 | </v-flex> |
| 766 | <v-flex xs8 class="ml-3"> | 766 | <v-flex xs8 class="ml-3"> |
| 767 | <v-autocomplete | 767 | <v-autocomplete |
| 768 | v-model="addTeachers.country" | 768 | v-model="addTeachers.country" |
| 769 | :rules="country" | 769 | :rules="country" |
| 770 | :items="countries" | 770 | :items="countries" |
| 771 | placeholder="Select Country Name" | 771 | placeholder="Select Country Name" |
| 772 | required | 772 | required |
| 773 | ></v-autocomplete> | 773 | ></v-autocomplete> |
| 774 | </v-flex> | 774 | </v-flex> |
| 775 | </v-layout> | 775 | </v-layout> |
| 776 | </v-flex> | 776 | </v-flex> |
| 777 | </v-layout> | 777 | </v-layout> |
| 778 | <v-layout wrap> | 778 | <v-layout wrap> |
| 779 | <v-flex xs12 sm6> | 779 | <v-flex xs12 sm6> |
| 780 | <v-layout> | 780 | <v-layout> |
| 781 | <v-flex xs4 class="pt-4 subheading"> | 781 | <v-flex xs4 class="pt-4 subheading"> |
| 782 | <label class="right">Join Date:</label> | 782 | <label class="right">Join Date:</label> |
| 783 | </v-flex> | 783 | </v-flex> |
| 784 | <v-flex xs8 class="ml-3"> | 784 | <v-flex xs8 class="ml-3"> |
| 785 | <v-menu | 785 | <v-menu |
| 786 | ref="menu1" | 786 | ref="menu1" |
| 787 | :close-on-content-click="false" | 787 | :close-on-content-click="false" |
| 788 | v-model="menu1" | 788 | v-model="menu1" |
| 789 | :nudge-right="40" | 789 | :nudge-right="40" |
| 790 | lazy | 790 | lazy |
| 791 | transition="scale-transition" | 791 | transition="scale-transition" |
| 792 | offset-y | 792 | offset-y |
| 793 | full-width | 793 | full-width |
| 794 | min-width="290px" | 794 | min-width="290px" |
| 795 | > | 795 | > |
| 796 | <v-text-field | 796 | <v-text-field |
| 797 | slot="activator" | 797 | slot="activator" |
| 798 | :rules="joinDateRules" | 798 | :rules="joinDateRules" |
| 799 | v-model="addTeachers.joinDate" | 799 | v-model="addTeachers.joinDate" |
| 800 | placeholder="Select date" | 800 | placeholder="Select date" |
| 801 | ></v-text-field> | 801 | ></v-text-field> |
| 802 | <v-date-picker | 802 | <v-date-picker |
| 803 | ref="picker" | 803 | ref="picker" |
| 804 | v-model="addTeachers.joinDate" | 804 | v-model="addTeachers.joinDate" |
| 805 | :max="new Date().toISOString().substr(0, 10)" | 805 | :max="new Date().toISOString().substr(0, 10)" |
| 806 | min="1950-01-01" | 806 | min="1950-01-01" |
| 807 | @input="menu1 = false" | 807 | @input="menu1 = false" |
| 808 | ></v-date-picker> | 808 | ></v-date-picker> |
| 809 | </v-menu> | 809 | </v-menu> |
| 810 | </v-flex> | 810 | </v-flex> |
| 811 | </v-layout> | 811 | </v-layout> |
| 812 | </v-flex> | 812 | </v-flex> |
| 813 | <v-flex xs12 sm6> | 813 | <v-flex xs12 sm6> |
| 814 | <v-layout> | 814 | <v-layout> |
| 815 | <v-flex xs4 class="pt-4 subheading"> | 815 | <v-flex xs4 class="pt-4 subheading"> |
| 816 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 816 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 817 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 817 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 818 | </v-flex> | 818 | </v-flex> |
| 819 | <v-flex xs8 class="ml-3"> | 819 | <v-flex xs8 class="ml-3"> |
| 820 | <v-text-field | 820 | <v-text-field |
| 821 | label="Select Image" | 821 | label="Select Image" |
| 822 | @click="pickFile" | 822 | @click="pickFile" |
| 823 | v-model="imageName" | 823 | v-model="imageName" |
| 824 | append-icon="attach_file" | 824 | append-icon="attach_file" |
| 825 | ></v-text-field> | 825 | ></v-text-field> |
| 826 | <input | 826 | <input |
| 827 | type="file" | 827 | type="file" |
| 828 | style="display:none" | 828 | style="display:none" |
| 829 | ref="image" | 829 | ref="image" |
| 830 | accept="image/*" | 830 | accept="image/*" |
| 831 | @change="onFilePicked" | 831 | @change="onFilePicked" |
| 832 | /> | 832 | /> |
| 833 | </v-flex> | 833 | </v-flex> |
| 834 | </v-layout> | 834 | </v-layout> |
| 835 | </v-flex> | 835 | </v-flex> |
| 836 | </v-layout> | 836 | </v-layout> |
| 837 | <v-layout class="hidden-xs-only hidden-sm-only"> | 837 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 838 | <v-flex xs12 sm6> | 838 | <v-flex xs12 sm6> |
| 839 | <v-layout> | 839 | <v-layout> |
| 840 | <v-flex xs4 md4 class="pt-4 subheading"> | 840 | <v-flex xs4 md4 class="pt-4 subheading"> |
| 841 | <label class="right">Present Address:</label> | 841 | <label class="right">Present Address:</label> |
| 842 | </v-flex> | 842 | </v-flex> |
| 843 | <v-flex xs8 md8 class="ml-3"> | 843 | <v-flex xs8 md8 class="ml-3"> |
| 844 | <v-text-field | 844 | <v-text-field |
| 845 | name="input-4-3" | 845 | name="input-4-3" |
| 846 | v-model="addTeachers.presentAddress" | 846 | v-model="addTeachers.presentAddress" |
| 847 | :rules="presentAddress" | 847 | :rules="presentAddress" |
| 848 | placeholder="fill Your present Address" | 848 | placeholder="fill Your present Address" |
| 849 | @keyup="copyData" | 849 | @keyup="copyData" |
| 850 | ></v-text-field> | 850 | ></v-text-field> |
| 851 | </v-flex> | 851 | </v-flex> |
| 852 | </v-layout> | 852 | </v-layout> |
| 853 | </v-flex> | 853 | </v-flex> |
| 854 | <v-flex xs12 sm6> | 854 | <v-flex xs12 sm6> |
| 855 | <v-layout> | 855 | <v-layout> |
| 856 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> | 856 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> |
| 857 | <label class="right">Permanent Address:</label> | 857 | <label class="right">Permanent Address:</label> |
| 858 | </v-flex> | 858 | </v-flex> |
| 859 | <v-flex xs12 md8 class="ml-3"> | 859 | <v-flex xs12 md8 class="ml-3"> |
| 860 | <v-switch | 860 | <v-switch |
| 861 | v-model="addTeachers.permanentAddress" | 861 | v-model="addTeachers.permanentAddress" |
| 862 | label="Select Permanent Address" | 862 | label="Select Permanent Address" |
| 863 | :value="addTeachers.presentAddress" | 863 | :value="addTeachers.presentAddress" |
| 864 | ></v-switch> | 864 | ></v-switch> |
| 865 | </v-flex> | 865 | </v-flex> |
| 866 | </v-layout> | 866 | </v-layout> |
| 867 | </v-flex> | 867 | </v-flex> |
| 868 | </v-layout> | 868 | </v-layout> |
| 869 | <v-layout class="hidden-xs-only hidden-sm-only"> | 869 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 870 | <v-flex xs12 sm6> | 870 | <v-flex xs12 sm6> |
| 871 | <v-layout> | 871 | <v-layout> |
| 872 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> | 872 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> |
| 873 | <label class="right">Permanent Address:</label> | 873 | <label class="right">Permanent Address:</label> |
| 874 | </v-flex> | 874 | </v-flex> |
| 875 | <v-flex xs12 md8 class="ml-3"> | 875 | <v-flex xs12 md8 class="ml-3"> |
| 876 | <v-text-field | 876 | <v-text-field |
| 877 | name="input-4-3" | 877 | name="input-4-3" |
| 878 | v-model="addTeachers.permanentAddress" | 878 | v-model="addTeachers.permanentAddress" |
| 879 | :rules="permanentAddress" | 879 | :rules="permanentAddress" |
| 880 | placeholder="fill Your Permanent Address" | 880 | placeholder="fill Your Permanent Address" |
| 881 | required | 881 | required |
| 882 | ></v-text-field> | 882 | ></v-text-field> |
| 883 | </v-flex> | 883 | </v-flex> |
| 884 | </v-layout> | 884 | </v-layout> |
| 885 | </v-flex> | 885 | </v-flex> |
| 886 | </v-layout> | 886 | </v-layout> |
| 887 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 887 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 888 | <v-flex xs12 sm12> | 888 | <v-flex xs12 sm12> |
| 889 | <v-layout> | 889 | <v-layout> |
| 890 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 890 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 891 | <label class>Present Addres:</label> | 891 | <label class>Present Addres:</label> |
| 892 | </v-flex> | 892 | </v-flex> |
| 893 | </v-layout> | 893 | </v-layout> |
| 894 | <v-layout> | 894 | <v-layout> |
| 895 | <v-flex xs12 sm12> | 895 | <v-flex xs12 sm12> |
| 896 | <v-textarea | 896 | <v-textarea |
| 897 | name="input-4-3" | 897 | name="input-4-3" |
| 898 | v-model="addTeachers.presentAddress" | 898 | v-model="addTeachers.presentAddress" |
| 899 | :rules="presentAddress" | 899 | :rules="presentAddress" |
| 900 | placeholder="fill Your present Address" | 900 | placeholder="fill Your present Address" |
| 901 | required | 901 | required |
| 902 | ></v-textarea> | 902 | ></v-textarea> |
| 903 | </v-flex> | 903 | </v-flex> |
| 904 | </v-layout> | 904 | </v-layout> |
| 905 | </v-flex> | 905 | </v-flex> |
| 906 | <v-flex xs12 sm12> | 906 | <v-flex xs12 sm12> |
| 907 | <v-layout> | 907 | <v-layout> |
| 908 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 908 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 909 | <label>Permanent Address:</label> | 909 | <label>Permanent Address:</label> |
| 910 | </v-flex> | 910 | </v-flex> |
| 911 | </v-layout> | 911 | </v-layout> |
| 912 | <v-layout> | 912 | <v-layout> |
| 913 | <v-flex xs12 sm12> | 913 | <v-flex xs12 sm12> |
| 914 | <v-textarea | 914 | <v-textarea |
| 915 | name="input-4-3" | 915 | name="input-4-3" |
| 916 | v-model="addTeachers.permanentAddress" | 916 | v-model="addTeachers.permanentAddress" |
| 917 | :rules="permanentAddress" | 917 | :rules="permanentAddress" |
| 918 | placeholder="fill Your Permanent Address" | 918 | placeholder="fill Your Permanent Address" |
| 919 | required | 919 | required |
| 920 | ></v-textarea> | 920 | ></v-textarea> |
| 921 | </v-flex> | 921 | </v-flex> |
| 922 | </v-layout> | 922 | </v-layout> |
| 923 | </v-flex> | 923 | </v-flex> |
| 924 | </v-layout> | 924 | </v-layout> |
| 925 | <v-layout> | 925 | <v-layout> |
| 926 | <v-flex xs12 sm12> | 926 | <v-flex xs12 sm12> |
| 927 | <v-layout class="right"> | 927 | <v-layout class="right"> |
| 928 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 928 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 929 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 929 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 930 | </v-layout> | 930 | </v-layout> |
| 931 | </v-flex> | 931 | </v-flex> |
| 932 | </v-layout> | 932 | </v-layout> |
| 933 | </v-container> | 933 | </v-container> |
| 934 | </v-form> | 934 | </v-form> |
| 935 | </v-card> | 935 | </v-card> |
| 936 | </v-dialog> | 936 | </v-dialog> |
| 937 | <div class="loader" v-if="showLoader"> | 937 | <div class="loader" v-if="showLoader"> |
| 938 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 938 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 939 | </div> | 939 | </div> |
| 940 | </v-container> | 940 | </v-container> |
| 941 | </template> | 941 | </template> |
| 942 | 942 | ||
| 943 | <script> | 943 | <script> |
| 944 | import http from "@/Services/http.js"; | 944 | import http from "@/Services/http.js"; |
| 945 | import moment from "moment"; | 945 | import moment from "moment"; |
| 946 | import countryList from "@/script/country.js"; | 946 | import countryList from "@/script/country.js"; |
| 947 | 947 | ||
| 948 | export default { | 948 | export default { |
| 949 | data: () => ({ | 949 | data: () => ({ |
| 950 | /* EDIT MOBILE CELL */ | 950 | /* EDIT MOBILE CELL */ |
| 951 | editedMobileCode: '', | 951 | editedMobileCode: "", |
| 952 | /* ADD FATHER CELL */ | 952 | /* ADD FATHER CELL */ |
| 953 | addedTeacherMobileCode: '', | 953 | addedTeacherMobileCode: "", |
| 954 | component: "report-generate", | 954 | component: "report-generate", |
| 955 | snackbar: false, | 955 | snackbar: false, |
| 956 | y: "top", | 956 | y: "top", |
| 957 | x: "right", | 957 | x: "right", |
| 958 | role: "", | 958 | role: "", |
| 959 | mode: "", | 959 | mode: "", |
| 960 | timeout: 3000, | 960 | timeout: 3000, |
| 961 | text: "", | 961 | text: "", |
| 962 | color: "", | 962 | color: "", |
| 963 | showLoader: false, | 963 | showLoader: false, |
| 964 | loading: false, | 964 | loading: false, |
| 965 | date: null, | 965 | date: null, |
| 966 | search: "", | 966 | search: "", |
| 967 | show: true, | 967 | show: true, |
| 968 | showSearch: false, | 968 | showSearch: false, |
| 969 | menu: false, | 969 | menu: false, |
| 970 | menu1: false, | 970 | menu1: false, |
| 971 | menu2: false, | 971 | menu2: false, |
| 972 | menu3: false, | 972 | menu3: false, |
| 973 | editTeacherDialog: false, | 973 | editTeacherDialog: false, |
| 974 | viewTeacherProfileDialog: false, | 974 | viewTeacherProfileDialog: false, |
| 975 | addTeacherDialog: false, | 975 | addTeacherDialog: false, |
| 976 | valid: true, | 976 | valid: true, |
| 977 | pagination: { | 977 | pagination: { |
| 978 | rowsPerPage: 10, | 978 | rowsPerPage: 10, |
| 979 | }, | 979 | }, |
| 980 | imageData: {}, | 980 | imageData: {}, |
| 981 | imageName: "", | 981 | imageName: "", |
| 982 | imageUrl: "", | 982 | imageUrl: "", |
| 983 | imageFile: "", | 983 | imageFile: "", |
| 984 | nameRules: [(v) => !!v || " Full Name is required"], | 984 | nameRules: [(v) => !!v || " Full Name is required"], |
| 985 | dateRules: [(v) => !!v || " DOB is required"], | 985 | dateRules: [(v) => !!v || " DOB is required"], |
| 986 | cityRules: [(v) => !!v || " City Name is required"], | 986 | cityRules: [(v) => !!v || " City Name is required"], |
| 987 | pincode: [(v) => !!v || " Pincode is required"], | 987 | pincode: [(v) => !!v || " Pincode is required"], |
| 988 | country: [(v) => !!v || " Country Name is required"], | 988 | country: [(v) => !!v || " Country Name is required"], |
| 989 | permanentAddress: [(v) => !!v || " Permanent Address is required"], | 989 | permanentAddress: [(v) => !!v || " Permanent Address is required"], |
| 990 | presentAddress: [(v) => !!v || " Present Address is required"], | 990 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 991 | mobileNoRules: [(v) => !!v || "Mobile Number is required"], | 991 | mobileNoRules: [(v) => !!v || "Mobile Number is required"], |
| 992 | stateRules: [(v) => !!v || "State Name is required"], | 992 | stateRules: [(v) => !!v || "State Name is required"], |
| 993 | joinDateRules: [(v) => !!v || " Join Date is required"], | 993 | joinDateRules: [(v) => !!v || " Join Date is required"], |
| 994 | errorMessages: "", | 994 | errorMessages: "", |
| 995 | switch1: true, | 995 | switch1: true, |
| 996 | countries: [], | 996 | countries: [], |
| 997 | headers: [ | 997 | headers: [ |
| 998 | { | 998 | { |
| 999 | text: "No", | 999 | text: "No", |
| 1000 | align: "", | 1000 | align: "", |
| 1001 | sortable: false, | 1001 | sortable: false, |
| 1002 | value: "No", | 1002 | value: "No", |
| 1003 | }, | 1003 | }, |
| 1004 | { | 1004 | { |
| 1005 | text: "Profile Pic", | 1005 | text: "Profile Pic", |
| 1006 | value: "profilePicUrl", | 1006 | value: "profilePicUrl", |
| 1007 | sortable: false, | 1007 | sortable: false, |
| 1008 | align: "center", | 1008 | align: "center", |
| 1009 | }, | 1009 | }, |
| 1010 | { text: "Name", value: "name", sortable: false, align: "center" }, | 1010 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 1011 | { text: "Email", value: "email", sortable: false, align: "center" }, | 1011 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 1012 | { text: "DOB", value: "dob", sortable: false, align: "center" }, | 1012 | { text: "DOB", value: "dob", sortable: false, align: "center" }, |
| 1013 | { | 1013 | { |
| 1014 | text: "Join Date", | 1014 | text: "Join Date", |
| 1015 | value: "joinDate", | 1015 | value: "joinDate", |
| 1016 | sortable: false, | 1016 | sortable: false, |
| 1017 | align: "center", | 1017 | align: "center", |
| 1018 | }, | 1018 | }, |
| 1019 | { | 1019 | { |
| 1020 | text: "Mobile No", | 1020 | text: "Mobile No", |
| 1021 | value: "mobileNo", | 1021 | value: "mobileNo", |
| 1022 | sortable: false, | 1022 | sortable: false, |
| 1023 | align: "center", | 1023 | align: "center", |
| 1024 | }, | 1024 | }, |
| 1025 | { | 1025 | { |
| 1026 | text: "Status", | 1026 | text: "Status", |
| 1027 | value: "status", | 1027 | value: "status", |
| 1028 | sortable: false, | 1028 | sortable: false, |
| 1029 | align: "center", | 1029 | align: "center", |
| 1030 | }, | 1030 | }, |
| 1031 | { text: "Action", value: "", sortable: false, align: "center" }, | 1031 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 1032 | ], | 1032 | ], |
| 1033 | desserts: [], | 1033 | desserts: [], |
| 1034 | editedIndex: -1, | 1034 | editedIndex: -1, |
| 1035 | upload: "", | 1035 | upload: "", |
| 1036 | editedItem: { | 1036 | editedItem: { |
| 1037 | role: "TEACHER", | 1037 | role: "TEACHER", |
| 1038 | name: "", | 1038 | name: "", |
| 1039 | email: "", | 1039 | email: "", |
| 1040 | date: null, | 1040 | date: null, |
| 1041 | city: "", | 1041 | city: "", |
| 1042 | pincode: "", | 1042 | pincode: "", |
| 1043 | country: "", | 1043 | country: "", |
| 1044 | permanentAddress: "", | 1044 | permanentAddress: "", |
| 1045 | presentAddress: "", | 1045 | presentAddress: "", |
| 1046 | mobileNo: "", | 1046 | mobileNo: "", |
| 1047 | state: "", | 1047 | state: "", |
| 1048 | joinDate: null, | 1048 | joinDate: null, |
| 1049 | }, | 1049 | }, |
| 1050 | addTeachers: { | 1050 | addTeachers: { |
| 1051 | role: "TEACHER", | 1051 | role: "TEACHER", |
| 1052 | name: "", | 1052 | name: "", |
| 1053 | email: "", | 1053 | email: "", |
| 1054 | date: null, | 1054 | date: null, |
| 1055 | city: "", | 1055 | city: "", |
| 1056 | pincode: "", | 1056 | pincode: "", |
| 1057 | country: "", | 1057 | country: "", |
| 1058 | permanentAddress: "", | 1058 | permanentAddress: "", |
| 1059 | presentAddress: "", | 1059 | presentAddress: "", |
| 1060 | mobileNo: "", | 1060 | mobileNo: "", |
| 1061 | state: "", | 1061 | state: "", |
| 1062 | joinDate: null, | 1062 | joinDate: null, |
| 1063 | }, | 1063 | }, |
| 1064 | status: "", | 1064 | status: "", |
| 1065 | }), | 1065 | }), |
| 1066 | watch: { | 1066 | watch: { |
| 1067 | menu(val) { | 1067 | menu(val) { |
| 1068 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1068 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1069 | }, | 1069 | }, |
| 1070 | menu1(val) { | 1070 | menu1(val) { |
| 1071 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1071 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1072 | }, | 1072 | }, |
| 1073 | addTeacherDialog: function (val) { | 1073 | addTeacherDialog: function (val) { |
| 1074 | if (!val) { | 1074 | if (!val) { |
| 1075 | this.addTeachers = { | 1075 | this.addTeachers = { |
| 1076 | role: "TEACHER", | 1076 | role: "TEACHER", |
| 1077 | }; | 1077 | }; |
| 1078 | this.imageName = ""; | 1078 | this.imageName = ""; |
| 1079 | this.imageFile = ""; | 1079 | this.imageFile = ""; |
| 1080 | this.imageUrl = ""; | 1080 | this.imageUrl = ""; |
| 1081 | } | 1081 | } |
| 1082 | }, | 1082 | }, |
| 1083 | }, | 1083 | }, |
| 1084 | methods: { | 1084 | methods: { |
| 1085 | onSelect({ name, iso2, dialCode }) { | 1085 | onSelect({ name, iso2, dialCode }) { |
| 1086 | // console.log("country codes", name, iso2, dialCode); | 1086 | // console.log("country codes", name, iso2, dialCode); |
| 1087 | }, | 1087 | }, |
| 1088 | editMobileCode({ name, iso2, dialCode }){ | 1088 | editMobileCode({ name, iso2, dialCode }) { |
| 1089 | // console.log("Edit father cell", name,iso2); | 1089 | // console.log("Edit father cell", name,iso2); |
| 1090 | this.editedMobileCode = dialCode | 1090 | this.editedMobileCode = dialCode; |
| 1091 | }, | 1091 | }, |
| 1092 | addTeacherMobileCode({ name, iso2, dialCode }){ | 1092 | addTeacherMobileCode({ name, iso2, dialCode }) { |
| 1093 | this.addedTeacherMobileCode = dialCode | 1093 | this.addedTeacherMobileCode = dialCode; |
| 1094 | }, | 1094 | }, |
| 1095 | save(date) { | 1095 | save(date) { |
| 1096 | this.$refs.menu.save(date); | 1096 | this.$refs.menu.save(date); |
| 1097 | }, | 1097 | }, |
| 1098 | save(date) { | 1098 | save(date) { |
| 1099 | this.$refs.menu1.save(date); | 1099 | this.$refs.menu1.save(date); |
| 1100 | }, | 1100 | }, |
| 1101 | pickFile() { | 1101 | pickFile() { |
| 1102 | this.$refs.image.click(); | 1102 | this.$refs.image.click(); |
| 1103 | }, | 1103 | }, |
| 1104 | onFilePicked(e) { | 1104 | onFilePicked(e) { |
| 1105 | const files = e.target.files; | 1105 | const files = e.target.files; |
| 1106 | this.upload = e.target.files[0]; | 1106 | this.upload = e.target.files[0]; |
| 1107 | if (files[0] !== undefined) { | 1107 | if (files[0] !== undefined) { |
| 1108 | this.imageName = files[0].name; | 1108 | this.imageName = files[0].name; |
| 1109 | if (this.imageName.lastIndexOf(".") <= 0) { | 1109 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 1110 | return; | 1110 | return; |
| 1111 | } | 1111 | } |
| 1112 | const fr = new FileReader(); | 1112 | const fr = new FileReader(); |
| 1113 | fr.readAsDataURL(files[0]); | 1113 | fr.readAsDataURL(files[0]); |
| 1114 | fr.addEventListener("load", () => { | 1114 | fr.addEventListener("load", () => { |
| 1115 | this.imageUrl = fr.result; | 1115 | this.imageUrl = fr.result; |
| 1116 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1116 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1117 | }); | 1117 | }); |
| 1118 | } else { | 1118 | } else { |
| 1119 | this.imageName = ""; | 1119 | this.imageName = ""; |
| 1120 | this.imageFile = ""; | 1120 | this.imageFile = ""; |
| 1121 | this.imageUrl = ""; | 1121 | this.imageUrl = ""; |
| 1122 | } | 1122 | } |
| 1123 | }, | 1123 | }, |
| 1124 | dates: function (date) { | 1124 | dates: function (date) { |
| 1125 | return moment(date).format("MMMM DD, YYYY"); | 1125 | return moment(date).format("MMMM DD, YYYY"); |
| 1126 | }, | 1126 | }, |
| 1127 | getTeacherList() { | 1127 | getTeacherList() { |
| 1128 | this.showLoader = true; | 1128 | this.showLoader = true; |
| 1129 | var token = this.$store.state.token; | 1129 | var token = this.$store.state.token; |
| 1130 | http() | 1130 | http() |
| 1131 | .get("/getTeachersList", { | 1131 | .get("/getTeachersList", { |
| 1132 | headers: { Authorization: "Bearer " + token }, | 1132 | headers: { Authorization: "Bearer " + token }, |
| 1133 | }) | 1133 | }) |
| 1134 | .then((response) => { | 1134 | .then((response) => { |
| 1135 | this.desserts = response.data.data; | 1135 | this.desserts = response.data.data; |
| 1136 | this.showLoader = false; | 1136 | this.showLoader = false; |
| 1137 | // console.log("getTeacherList=====>",this.desserts) | 1137 | // console.log("getTeacherList=====>",this.desserts) |
| 1138 | }) | 1138 | }) |
| 1139 | .catch((error) => { | 1139 | .catch((error) => { |
| 1140 | this.showLoader = false; | 1140 | this.showLoader = false; |
| 1141 | if (error.response.status === 401) { | 1141 | if (error.response.status === 401) { |
| 1142 | this.$router.replace({ path: "/" }); | 1142 | this.$router.replace({ path: "/" }); |
| 1143 | this.$store.dispatch("setToken", null); | 1143 | this.$store.dispatch("setToken", null); |
| 1144 | this.$store.dispatch("Id", null); | 1144 | this.$store.dispatch("Id", null); |
| 1145 | } | 1145 | } |
| 1146 | }); | 1146 | }); |
| 1147 | }, | 1147 | }, |
| 1148 | editItem(item) { | 1148 | editItem(item) { |
| 1149 | this.editedIndex = this.desserts.indexOf(item); | 1149 | this.editedIndex = this.desserts.indexOf(item); |
| 1150 | this.editedItem = Object.assign({}, item); | 1150 | this.editedItem = Object.assign({}, item); |
| 1151 | this.editedItem.dob = | 1151 | this.editedItem.dob = |
| 1152 | this.editedItem.dob != undefined | 1152 | this.editedItem.dob != undefined |
| 1153 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 1153 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 1154 | : (this.editedItem.dob = ""); | 1154 | : (this.editedItem.dob = ""); |
| 1155 | this.editedItem.joinDate = | 1155 | this.editedItem.joinDate = |
| 1156 | this.editedItem.joinDate != undefined | 1156 | this.editedItem.joinDate != undefined |
| 1157 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( | 1157 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( |
| 1158 | 0, | 1158 | 0, |
| 1159 | 10 | 1159 | 10 |
| 1160 | )) | 1160 | )) |
| 1161 | : (this.editedItem.joinDate = ""); | 1161 | : (this.editedItem.joinDate = ""); |
| 1162 | 1162 | ||
| 1163 | this.editTeacherDialog = true; | 1163 | this.editTeacherDialog = true; |
| 1164 | }, | 1164 | }, |
| 1165 | profile(item) { | 1165 | profile(item) { |
| 1166 | this.editedIndex = this.desserts.indexOf(item); | 1166 | this.editedIndex = this.desserts.indexOf(item); |
| 1167 | this.editedItem = Object.assign({}, item); | 1167 | this.editedItem = Object.assign({}, item); |
| 1168 | this.viewTeacherProfileDialog = true; | 1168 | this.viewTeacherProfileDialog = true; |
| 1169 | }, | 1169 | }, |
| 1170 | deleteItem(item) { | 1170 | deleteItem(item) { |
| 1171 | let deleteTeachers = { | 1171 | let deleteTeachers = { |
| 1172 | teacherId: item._id, | 1172 | teacherId: item._id, |
| 1173 | }; | 1173 | }; |
| 1174 | http() | 1174 | http() |
| 1175 | .delete( | 1175 | .delete( |
| 1176 | "/deleteTeacher", | 1176 | "/deleteTeacher", |
| 1177 | confirm("Are you sure you want to delete this?") && { | 1177 | confirm("Are you sure you want to delete this?") && { |
| 1178 | params: deleteTeachers, | 1178 | params: deleteTeachers, |
| 1179 | } | 1179 | } |
| 1180 | ) | 1180 | ) |
| 1181 | .then((response) => { | 1181 | .then((response) => { |
| 1182 | this.snackbar = true; | 1182 | this.snackbar = true; |
| 1183 | this.text = "Successfully delete Existing Teacher"; | 1183 | this.text = "Successfully delete Existing Teacher"; |
| 1184 | this.color = "green"; | 1184 | this.color = "green"; |
| 1185 | this.getTeacherList(); | 1185 | this.getTeacherList(); |
| 1186 | }) | 1186 | }) |
| 1187 | .catch((error) => { | 1187 | .catch((error) => { |
| 1188 | this.snackbar = true; | 1188 | this.snackbar = true; |
| 1189 | this.text = error.response.data.message; | 1189 | this.text = error.response.data.message; |
| 1190 | this.color = "error"; | 1190 | this.color = "error"; |
| 1191 | }); | 1191 | }); |
| 1192 | }, | 1192 | }, |
| 1193 | closeEditTeacherDialog() { | 1193 | closeEditTeacherDialog() { |
| 1194 | this.editTeacherDialog = false; | 1194 | this.editTeacherDialog = false; |
| 1195 | }, | 1195 | }, |
| 1196 | close1() { | 1196 | close1() { |
| 1197 | this.viewTeacherProfileDialog = false; | 1197 | this.viewTeacherProfileDialog = false; |
| 1198 | }, | 1198 | }, |
| 1199 | copyData() { | 1199 | copyData() { |
| 1200 | this.addTeachers.permanentAddress = this.addTeachers.presentAddress; | 1200 | this.addTeachers.permanentAddress = this.addTeachers.presentAddress; |
| 1201 | }, | 1201 | }, |
| 1202 | submit() { | 1202 | submit() { |
| 1203 | if (this.$refs.form.validate()) { | 1203 | if (this.$refs.form.validate()) { |
| 1204 | let addTeacher = { | 1204 | let addTeacher = { |
| 1205 | name: this.addTeachers.name, | 1205 | name: this.addTeachers.name, |
| 1206 | email: this.addTeachers.email, | 1206 | email: this.addTeachers.email, |
| 1207 | role: this.addTeachers.role, | 1207 | role: this.addTeachers.role, |
| 1208 | dob: this.addTeachers.date, | 1208 | dob: this.addTeachers.date, |
| 1209 | city: this.addTeachers.city, | 1209 | city: this.addTeachers.city, |
| 1210 | pincode: this.addTeachers.pincode, | 1210 | pincode: this.addTeachers.pincode, |
| 1211 | country: this.addTeachers.country, | 1211 | country: this.addTeachers.country, |
| 1212 | permanentAddress: this.addTeachers.permanentAddress, | 1212 | permanentAddress: this.addTeachers.permanentAddress, |
| 1213 | presentAddress: this.addTeachers.presentAddress, | 1213 | presentAddress: this.addTeachers.presentAddress, |
| 1214 | countryCode: this.addedTeacherMobileCode, | 1214 | countryCode: this.addedTeacherMobileCode, |
| 1215 | mobileNo: this.addTeachers.mobileNo, | 1215 | mobileNo: this.addTeachers.mobileNo, |
| 1216 | state: this.addTeachers.state, | 1216 | state: this.addTeachers.state, |
| 1217 | joinDate: this.addTeachers.joinDate, | 1217 | joinDate: this.addTeachers.joinDate, |
| 1218 | }; | 1218 | }; |
| 1219 | if (this.imageUrl) { | 1219 | if (this.imageUrl) { |
| 1220 | var str = this.imageUrl; | 1220 | var str = this.imageUrl; |
| 1221 | const [baseUrl, imageUrl] = str.split(/,/); | 1221 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1222 | addTeacher.upload = imageUrl; | 1222 | addTeacher.upload = imageUrl; |
| 1223 | } | 1223 | } |
| 1224 | this.loading = true; | 1224 | this.loading = true; |
| 1225 | http() | 1225 | http() |
| 1226 | .post("/createTeacher", addTeacher) | 1226 | .post("/createTeacher", addTeacher) |
| 1227 | .then((response) => { | 1227 | .then((response) => { |
| 1228 | this.imageUrl = ""; | 1228 | this.imageUrl = ""; |
| 1229 | this.getTeacherList(); | 1229 | this.getTeacherList(); |
| 1230 | this.snackbar = true; | 1230 | this.snackbar = true; |
| 1231 | this.text = "New Teacher added successfully"; | 1231 | this.text = "New Teacher added successfully"; |
| 1232 | this.color = "green"; | 1232 | this.color = "green"; |
| 1233 | this.clear(); | 1233 | this.clear(); |
| 1234 | this.loading = false; | 1234 | this.loading = false; |
| 1235 | this.addTeacherDialog = false; | 1235 | this.addTeacherDialog = false; |
| 1236 | }) | 1236 | }) |
| 1237 | .catch((error) => { | 1237 | .catch((error) => { |
| 1238 | this.snackbar = true; | 1238 | this.snackbar = true; |
| 1239 | this.text = error.response.data.message; | 1239 | this.text = error.response.data.message; |
| 1240 | this.color = "error"; | 1240 | this.color = "error"; |
| 1241 | this.loading = false; | 1241 | this.loading = false; |
| 1242 | }); | 1242 | }); |
| 1243 | } | 1243 | } |
| 1244 | }, | 1244 | }, |
| 1245 | clear() { | 1245 | clear() { |
| 1246 | this.$refs.form.reset(); | 1246 | this.$refs.form.reset(); |
| 1247 | this.imageUrl = ""; | 1247 | this.imageUrl = ""; |
| 1248 | }, | 1248 | }, |
| 1249 | save() { | 1249 | save() { |
| 1250 | this.loading = true; | 1250 | this.loading = true; |
| 1251 | let editTeacher = { | 1251 | let editTeacher = { |
| 1252 | teacherId: this.editedItem._id, | 1252 | teacherId: this.editedItem._id, |
| 1253 | name: this.editedItem.name, | 1253 | name: this.editedItem.name, |
| 1254 | email: this.editedItem.email, | 1254 | email: this.editedItem.email, |
| 1255 | role: this.editedItem.role, | 1255 | role: this.editedItem.role, |
| 1256 | dob: this.editedItem.dob, | 1256 | dob: this.editedItem.dob, |
| 1257 | city: this.editedItem.city, | 1257 | city: this.editedItem.city, |
| 1258 | pincode: this.editedItem.pincode, | 1258 | pincode: this.editedItem.pincode, |
| 1259 | country: this.editedItem.country, | 1259 | country: this.editedItem.country, |
| 1260 | permanentAddress: this.editedItem.permanentAddress, | 1260 | permanentAddress: this.editedItem.permanentAddress, |
| 1261 | presentAddress: this.editedItem.presentAddress, | 1261 | presentAddress: this.editedItem.presentAddress, |
| 1262 | countryCode: this.editedMobileCode, | 1262 | countryCode: this.editedMobileCode, |
| 1263 | mobileNo: this.editedItem.mobileNo, | 1263 | mobileNo: this.editedItem.mobileNo, |
| 1264 | state: this.editedItem.state, | 1264 | state: this.editedItem.state, |
| 1265 | joinDate: this.editedItem.joinDate, | 1265 | joinDate: this.editedItem.joinDate, |
| 1266 | }; | 1266 | }; |
| 1267 | if (this.imageUrl) { | 1267 | if (this.imageUrl) { |
| 1268 | var str = this.imageUrl; | 1268 | var str = this.imageUrl; |
| 1269 | const [baseUrl, imageUrl] = str.split(/,/); | 1269 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1270 | editTeacher.upload = imageUrl; | 1270 | editTeacher.upload = imageUrl; |
| 1271 | } | 1271 | } |
| 1272 | http() | 1272 | http() |
| 1273 | .put("/updateTeacher", editTeacher) | 1273 | .put("/updateTeacher", editTeacher) |
| 1274 | .then((response) => { | 1274 | .then((response) => { |
| 1275 | this.snackbar = true; | 1275 | this.snackbar = true; |
| 1276 | this.text = "Successfully Edit Existing Teacher"; | 1276 | this.text = "Successfully Edit Existing Teacher"; |
| 1277 | this.color = "green"; | 1277 | this.color = "green"; |
| 1278 | this.loading = false; | 1278 | this.loading = false; |
| 1279 | this.getTeacherList(); | 1279 | this.getTeacherList(); |
| 1280 | this.closeEditTeacherDialog(); | 1280 | this.closeEditTeacherDialog(); |
| 1281 | }) | 1281 | }) |
| 1282 | .catch((error) => { | 1282 | .catch((error) => { |
| 1283 | this.snackbar = true; | 1283 | this.snackbar = true; |
| 1284 | this.text = error.response.data.message; | 1284 | this.text = error.response.data.message; |
| 1285 | this.color = "error"; | 1285 | this.color = "error"; |
| 1286 | this.loading = false; | 1286 | this.loading = false; |
| 1287 | }); | 1287 | }); |
| 1288 | }, | 1288 | }, |
| 1289 | suspendStatus(suspendStatus, id) { | 1289 | suspendStatus(suspendStatus, id) { |
| 1290 | let suspendStatusData = { | 1290 | let suspendStatusData = { |
| 1291 | teacherId: id, | 1291 | teacherId: id, |
| 1292 | status: suspendStatus, | 1292 | status: suspendStatus, |
| 1293 | }; | 1293 | }; |
| 1294 | this.showLoader = true; | 1294 | this.showLoader = true; |
| 1295 | http() | 1295 | http() |
| 1296 | .put("/suspendAccount", suspendStatusData) | 1296 | .put("/suspendAccount", suspendStatusData) |
| 1297 | .then((response) => { | 1297 | .then((response) => { |
| 1298 | this.getTeacherList(); | 1298 | this.getTeacherList(); |
| 1299 | this.text = response.data.message; | 1299 | this.text = response.data.message; |
| 1300 | this.color = "green"; | 1300 | this.color = "green"; |
| 1301 | this.snackbar = true; | 1301 | this.snackbar = true; |
| 1302 | this.showLoader = false; | 1302 | this.showLoader = false; |
| 1303 | }) | 1303 | }) |
| 1304 | .catch((error) => { | 1304 | .catch((error) => { |
| 1305 | this.snackbar = true; | 1305 | this.snackbar = true; |
| 1306 | this.color = "error"; | 1306 | this.color = "error"; |
| 1307 | this.text = error.response.data.message; | 1307 | this.text = error.response.data.message; |
| 1308 | this.showLoader = false; | 1308 | this.showLoader = false; |
| 1309 | }); | 1309 | }); |
| 1310 | }, | 1310 | }, |
| 1311 | displaySearch() { | 1311 | displaySearch() { |
| 1312 | (this.show = false), (this.showSearch = true); | 1312 | (this.show = false), (this.showSearch = true); |
| 1313 | }, | 1313 | }, |
| 1314 | closeSearch() { | 1314 | closeSearch() { |
| 1315 | this.showSearch = false; | 1315 | this.showSearch = false; |
| 1316 | this.show = true; | 1316 | this.show = true; |
| 1317 | this.search = ""; | 1317 | this.search = ""; |
| 1318 | }, | 1318 | }, |
| 1319 | }, | 1319 | }, |
| 1320 | mounted() { | 1320 | mounted() { |
| 1321 | const getCountryList = countryList(); | 1321 | const getCountryList = countryList(); |
| 1322 | this.countries = getCountryList; | 1322 | this.countries = getCountryList; |
| 1323 | this.getTeacherList(); | 1323 | this.getTeacherList(); |
| 1324 | this.role = this.$store.state.role; | 1324 | this.role = this.$store.state.role; |
| 1325 | }, | 1325 | }, |
| 1326 | }; | 1326 | }; |
| 1327 | </script> | 1327 | </script> |
| 1328 | <style scoped> | 1328 | <style scoped> |
| 1329 | .active { | 1329 | .active { |
| 1330 | background-color: gray; | 1330 | background-color: gray; |
| 1331 | color: white !important; | 1331 | color: white !important; |
| 1332 | } | 1332 | } |
| 1333 | .activebtn { | 1333 | .activebtn { |
| 1334 | color: black !important; | 1334 | color: black !important; |
| 1335 | } | 1335 | } |
| 1336 | </style> | 1336 | </style> |
src/pages/TimeTable/timeTable.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT TIME-TABLE****** --> | 3 | <!-- ****** EDIT TIME-TABLE****** --> |
| 4 | <v-dialog v-model="dialog" max-width="600px" persistent> | 4 | <v-dialog v-model="dialog" max-width="600px" persistent> |
| 5 | <v-flex xs12 sm12> | 5 | <v-flex xs12 sm12> |
| 6 | <v-card flat class="card-style pa-2" dark> | 6 | <v-card flat class="Card-style pa-2"> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Time Table</label> | 9 | <label class="title text-xs-center">Edit Time Table</label> |
| 10 | <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <!-- <v-layout> | 13 | <!-- <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="100px"> | 18 | <v-avatar size="100px"> |
| 19 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 19 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 20 | </v-avatar> | 20 | </v-avatar> |
| 21 | <input | 21 | <input |
| 22 | type="file" | 22 | type="file" |
| 23 | style="display: none" | 23 | style="display: none" |
| 24 | ref="image" | 24 | ref="image" |
| 25 | accept="image/*" | 25 | accept="image/*" |
| 26 | @change="onFilePicked" | 26 | @change="onFilePicked" |
| 27 | /> | 27 | /> |
| 28 | <img | 28 | <img |
| 29 | :src="imageData.imageUrl" | 29 | :src="imageData.imageUrl" |
| 30 | height="150" | 30 | height="150" |
| 31 | v-if="imageUrl" | 31 | v-if="imageUrl" |
| 32 | style="border-radius:50%; width:200px" | 32 | style="border-radius:50%; width:200px" |
| 33 | /> | 33 | /> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | </v-layout>--> | 35 | </v-layout>--> |
| 36 | <v-flex xs12 sm12> | 36 | <v-flex xs12 sm12> |
| 37 | <v-layout> | 37 | <v-layout> |
| 38 | <v-flex xs4 class="pt-4 subheading"> | 38 | <v-flex xs4 class="pt-4 subheading"> |
| 39 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 39 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 40 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 40 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-flex xs8 sm5 class="ml-3"> | 42 | <v-flex xs8 sm5 class="ml-3"> |
| 43 | <v-select | 43 | <v-select |
| 44 | :items="addclass" | 44 | :items="addclass" |
| 45 | label="Select Class" | 45 | label="Select Class" |
| 46 | v-model="editedItem.classNum" | 46 | v-model="editedItem.classNum" |
| 47 | item-text="classNum" | 47 | item-text="classNum" |
| 48 | item-value="_id" | 48 | item-value="_id" |
| 49 | @change="getSections(editedItem.classNum)" | 49 | @change="getSections(editedItem.classNum)" |
| 50 | ></v-select> | 50 | ></v-select> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | <v-flex xs12 sm12> | 54 | <v-flex xs12 sm12> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> | 57 | <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> |
| 58 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 58 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs8 sm5 class="ml-3"> | 60 | <v-flex xs8 sm5 class="ml-3"> |
| 61 | <v-select | 61 | <v-select |
| 62 | :items="addSection" | 62 | :items="addSection" |
| 63 | label="Select Section" | 63 | label="Select Section" |
| 64 | v-model="editedItem.selectSection" | 64 | v-model="editedItem.selectSection" |
| 65 | item-text="name" | 65 | item-text="name" |
| 66 | item-value="_id" | 66 | item-value="_id" |
| 67 | ></v-select> | 67 | ></v-select> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs12 sm9 offset-sm1> | 72 | <v-flex xs12 sm9 offset-sm1> |
| 73 | <v-card-actions> | 73 | <v-card-actions> |
| 74 | <v-spacer></v-spacer> | 74 | <v-spacer></v-spacer> |
| 75 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> | 75 | <v-btn round dark @click.native="close" class="cancel-btn">Cancel</v-btn> |
| 76 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 76 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 77 | </v-card-actions> | 77 | </v-card-actions> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | </v-layout> | 79 | </v-layout> |
| 80 | </v-card> | 80 | </v-card> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-dialog> | 82 | </v-dialog> |
| 83 | 83 | ||
| 84 | <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> | 84 | <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> |
| 85 | 85 | ||
| 86 | <v-dialog v-model="dialogSchedule" max-width="600px" persistent> | 86 | <v-dialog v-model="dialogSchedule" max-width="600px" persistent> |
| 87 | <v-flex xs12 sm12> | 87 | <v-flex xs12 sm12> |
| 88 | <v-card flat class="card-style pa-2" dark> | 88 | <v-card flat class="Card-style pa-2"> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs12> | 90 | <v-flex xs12> |
| 91 | <label class="title text-xs-center">Add Schedule</label> | 91 | <label class="title text-xs-center">Add Schedule</label> |
| 92 | <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> | 92 | <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> |
| 93 | </v-flex> | 93 | </v-flex> |
| 94 | </v-layout> | 94 | </v-layout> |
| 95 | <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> | 95 | <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> |
| 96 | <v-container fluid> | 96 | <v-container fluid> |
| 97 | <v-flex xs12 sm12 class="py-3"> | 97 | <v-flex xs12 sm12 class="py-3"> |
| 98 | <v-layout> | 98 | <v-layout> |
| 99 | <v-flex xs4 class="pt-4 subheading"> | 99 | <v-flex xs4 class="pt-4 subheading"> |
| 100 | <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> | 100 | <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> |
| 101 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> | 101 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12 sm5 class="pl-3"> | 103 | <v-flex xs12 sm5 class="pl-3"> |
| 104 | <v-select | 104 | <v-select |
| 105 | :items="addOneDay" | 105 | :items="addOneDay" |
| 106 | label="Select Day" | 106 | label="Select Day" |
| 107 | v-model="schedule.selectDay" | 107 | v-model="schedule.selectDay" |
| 108 | :rules="selecDayRule" | 108 | :rules="selecDayRule" |
| 109 | ></v-select> | 109 | ></v-select> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs12 sm8 offset-sm2> | 114 | <v-flex xs12 sm8 offset-sm2> |
| 115 | <v-card-actions> | 115 | <v-card-actions> |
| 116 | <v-spacer></v-spacer> | 116 | <v-spacer></v-spacer> |
| 117 | <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> | 117 | <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> |
| 118 | <v-spacer></v-spacer> | 118 | <v-spacer></v-spacer> |
| 119 | </v-card-actions> | 119 | </v-card-actions> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-container> | 122 | </v-container> |
| 123 | </v-form> | 123 | </v-form> |
| 124 | </v-card> | 124 | </v-card> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-dialog> | 126 | </v-dialog> |
| 127 | 127 | ||
| 128 | <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> | 128 | <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> |
| 129 | 129 | ||
| 130 | <v-dialog v-model="dialogAddLecture" max-width="600px" persistent> | 130 | <v-dialog v-model="dialogAddLecture" max-width="600px" persistent> |
| 131 | <v-flex xs12 sm12> | 131 | <v-flex xs12 sm12> |
| 132 | <v-card flat class="card-style pa-2" dark> | 132 | <v-card flat class="Card-style pa-2"> |
| 133 | <v-layout> | 133 | <v-layout> |
| 134 | <v-flex xs12> | 134 | <v-flex xs12> |
| 135 | <label class="title text-xs-center">Add Lecture</label> | 135 | <label class="title text-xs-center">Add Lecture</label> |
| 136 | <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> | 136 | <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | <v-form ref="lectureForm" v-model="valid" lazy-validation> | 139 | <v-form ref="lectureForm" v-model="valid" lazy-validation> |
| 140 | <v-container fluid> | 140 | <v-container fluid> |
| 141 | <v-flex xs12 sm12> | 141 | <v-flex xs12 sm12> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs4 class="pt-4 subheading"> | 143 | <v-flex xs4 class="pt-4 subheading"> |
| 144 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 144 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 145 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 145 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | <v-flex xs5 class="ml-3"> | 147 | <v-flex xs5 class="ml-3"> |
| 148 | <v-select | 148 | <v-select |
| 149 | :items="addclass" | 149 | :items="addclass" |
| 150 | label="Select Class" | 150 | label="Select Class" |
| 151 | v-model="timeTable.select" | 151 | v-model="timeTable.select" |
| 152 | item-text="classNum" | 152 | item-text="classNum" |
| 153 | item-value="_id" | 153 | item-value="_id" |
| 154 | @change="getClassSubject(timeTable.select)" | 154 | @change="getClassSubject(timeTable.select)" |
| 155 | :rules="classRules" | 155 | :rules="classRules" |
| 156 | required | 156 | required |
| 157 | ></v-select> | 157 | ></v-select> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs12 sm12> | 161 | <v-flex xs12 sm12> |
| 162 | <v-layout> | 162 | <v-layout> |
| 163 | <v-flex xs4 class="pt-4 subheading"> | 163 | <v-flex xs4 class="pt-4 subheading"> |
| 164 | <label class="right">Subject Name:</label> | 164 | <label class="right">Subject Name:</label> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs5 class="ml-3"> | 166 | <v-flex xs5 class="ml-3"> |
| 167 | <v-select | 167 | <v-select |
| 168 | :items="subjectList.subjects" | 168 | :items="subjectList.subjects" |
| 169 | label="Select Subject" | 169 | label="Select Subject" |
| 170 | v-model="addlectures.subjectName" | 170 | v-model="addlectures.subjectName" |
| 171 | item-text="subjectName" | 171 | item-text="subjectName" |
| 172 | item-value="subjectName" | 172 | item-value="subjectName" |
| 173 | :rules="subjectNameRules" | 173 | :rules="subjectNameRules" |
| 174 | required | 174 | required |
| 175 | ></v-select> | 175 | ></v-select> |
| 176 | <!-- <v-text-field | 176 | <!-- <v-text-field |
| 177 | v-model="addlectures.subjectName" | 177 | v-model="addlectures.subjectName" |
| 178 | :rules="subjectNameRules" | 178 | :rules="subjectNameRules" |
| 179 | placeholder="fill your Subject Name" | 179 | placeholder="fill your Subject Name" |
| 180 | type="text" | 180 | type="text" |
| 181 | ></v-text-field>--> | 181 | ></v-text-field>--> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | <v-flex xs12 sm12> | 185 | <v-flex xs12 sm12> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs4 class="pt-4 subheading"> | 187 | <v-flex xs4 class="pt-4 subheading"> |
| 188 | <label class="right">Time In:</label> | 188 | <label class="right">Time In:</label> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex xs5 class="ml-3"> | 190 | <v-flex xs5 class="ml-3"> |
| 191 | <v-menu | 191 | <v-menu |
| 192 | ref="menuD" | 192 | ref="menuD" |
| 193 | :close-on-content-click="false" | 193 | :close-on-content-click="false" |
| 194 | v-model="menu5" | 194 | v-model="menu5" |
| 195 | :nudge-right="40" | 195 | :nudge-right="40" |
| 196 | lazy | 196 | lazy |
| 197 | transition="scale-transition" | 197 | transition="scale-transition" |
| 198 | offset-y | 198 | offset-y |
| 199 | full-width | 199 | full-width |
| 200 | max-width="290px" | 200 | max-width="290px" |
| 201 | min-width="290px" | 201 | min-width="290px" |
| 202 | > | 202 | > |
| 203 | <v-text-field | 203 | <v-text-field |
| 204 | slot="activator" | 204 | slot="activator" |
| 205 | v-model="addlectures.timeIn" | 205 | v-model="addlectures.timeIn" |
| 206 | label="Select your Time In" | 206 | label="Select your Time In" |
| 207 | append-icon="access_time" | 207 | append-icon="access_time" |
| 208 | :rules="timeInRules" | 208 | :rules="timeInRules" |
| 209 | readonly | 209 | readonly |
| 210 | ></v-text-field> | 210 | ></v-text-field> |
| 211 | <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> | 211 | <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> |
| 212 | </v-menu> | 212 | </v-menu> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | <v-flex xs12 sm12> | 216 | <v-flex xs12 sm12> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs4 class="pt-4 subheading"> | 218 | <v-flex xs4 class="pt-4 subheading"> |
| 219 | <label class="right">Time Out:</label> | 219 | <label class="right">Time Out:</label> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | <v-flex xs5 class="ml-3"> | 221 | <v-flex xs5 class="ml-3"> |
| 222 | <v-menu | 222 | <v-menu |
| 223 | ref="menuE" | 223 | ref="menuE" |
| 224 | :close-on-content-click="false" | 224 | :close-on-content-click="false" |
| 225 | v-model="menu6" | 225 | v-model="menu6" |
| 226 | :nudge-right="40" | 226 | :nudge-right="40" |
| 227 | lazy | 227 | lazy |
| 228 | transition="scale-transition" | 228 | transition="scale-transition" |
| 229 | offset-y | 229 | offset-y |
| 230 | full-width | 230 | full-width |
| 231 | max-width="290px" | 231 | max-width="290px" |
| 232 | min-width="290px" | 232 | min-width="290px" |
| 233 | > | 233 | > |
| 234 | <v-text-field | 234 | <v-text-field |
| 235 | slot="activator" | 235 | slot="activator" |
| 236 | :rules="timeOutRules" | 236 | :rules="timeOutRules" |
| 237 | v-model="addlectures.timeOut" | 237 | v-model="addlectures.timeOut" |
| 238 | label="Select your Time Out" | 238 | label="Select your Time Out" |
| 239 | append-icon="access_time" | 239 | append-icon="access_time" |
| 240 | readonly | 240 | readonly |
| 241 | ></v-text-field> | 241 | ></v-text-field> |
| 242 | <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> | 242 | <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> |
| 243 | </v-menu> | 243 | </v-menu> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs12 sm12> | 247 | <v-flex xs12 sm12> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs4 class="pt-4 subheading"> | 249 | <v-flex xs4 class="pt-4 subheading"> |
| 250 | <label class="right">Select Teacher:</label> | 250 | <label class="right">Select Teacher:</label> |
| 251 | </v-flex> | 251 | </v-flex> |
| 252 | <v-flex xs5 class="ml-3"> | 252 | <v-flex xs5 class="ml-3"> |
| 253 | <v-select | 253 | <v-select |
| 254 | :items="addTeachers" | 254 | :items="addTeachers" |
| 255 | label="Select Teacher" | 255 | label="Select Teacher" |
| 256 | v-model="addlectures.teacherId" | 256 | v-model="addlectures.teacherId" |
| 257 | :rules="teacherRules" | 257 | :rules="teacherRules" |
| 258 | item-text="name" | 258 | item-text="name" |
| 259 | item-value="_id" | 259 | item-value="_id" |
| 260 | required | 260 | required |
| 261 | ></v-select> | 261 | ></v-select> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | </v-layout> | 263 | </v-layout> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | <v-layout> | 265 | <v-layout> |
| 266 | <v-flex xs12 sm8 offset-sm2> | 266 | <v-flex xs12 sm8 offset-sm2> |
| 267 | <v-card-actions> | 267 | <v-card-actions> |
| 268 | <v-spacer></v-spacer> | 268 | <v-spacer></v-spacer> |
| 269 | <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> | 269 | <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> |
| 270 | </v-card-actions> | 270 | </v-card-actions> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | </v-layout> | 272 | </v-layout> |
| 273 | </v-container> | 273 | </v-container> |
| 274 | </v-form> | 274 | </v-form> |
| 275 | </v-card> | 275 | </v-card> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | </v-dialog> | 277 | </v-dialog> |
| 278 | 278 | ||
| 279 | <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> | 279 | <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> |
| 280 | 280 | ||
| 281 | <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent> | 281 | <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent> |
| 282 | <v-flex xs12 sm12 class> | 282 | <v-flex xs12 sm12 class> |
| 283 | <v-card flat class="card-style pa-2" dark> | 283 | <v-card flat class="Card-style pa-2"> |
| 284 | <v-layout> | 284 | <v-layout> |
| 285 | <v-flex xs12> | 285 | <v-flex xs12> |
| 286 | <label class="title text-xs-center">Edit Lecture</label> | 286 | <label class="title text-xs-center">Edit Lecture</label> |
| 287 | <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> | 287 | <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | <v-flex xs12 sm12> | 290 | <v-flex xs12 sm12> |
| 291 | <v-layout> | 291 | <v-layout> |
| 292 | <v-flex xs4 class="pt-4 subheading"> | 292 | <v-flex xs4 class="pt-4 subheading"> |
| 293 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 293 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 294 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 294 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | <v-flex xs7 sm6 class="ml-3"> | 296 | <v-flex xs7 sm6 class="ml-3"> |
| 297 | <v-select | 297 | <v-select |
| 298 | :items="addclass" | 298 | :items="addclass" |
| 299 | label="Select Class" | 299 | label="Select Class" |
| 300 | v-model="updateLectures.select" | 300 | v-model="updateLectures.select" |
| 301 | item-text="classNum" | 301 | item-text="classNum" |
| 302 | item-value="_id" | 302 | item-value="_id" |
| 303 | @change="getClassSubject(updateLectures.select)" | 303 | @change="getClassSubject(updateLectures.select)" |
| 304 | required | 304 | required |
| 305 | ></v-select> | 305 | ></v-select> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <v-flex xs12 sm12> | 309 | <v-flex xs12 sm12> |
| 310 | <v-layout> | 310 | <v-layout> |
| 311 | <v-flex xs4 class="pt-4 subheading"> | 311 | <v-flex xs4 class="pt-4 subheading"> |
| 312 | <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label> | 312 | <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label> |
| 313 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 313 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | <v-flex xs7 sm6 class="ml-3"> | 315 | <v-flex xs7 sm6 class="ml-3"> |
| 316 | <v-select | 316 | <v-select |
| 317 | :items="subjectList.subjects" | 317 | :items="subjectList.subjects" |
| 318 | label="Select Subject" | 318 | label="Select Subject" |
| 319 | v-model="updateLectures.subjectName" | 319 | v-model="updateLectures.subjectName" |
| 320 | item-text="subjectName" | 320 | item-text="subjectName" |
| 321 | item-value="subjectName" | 321 | item-value="subjectName" |
| 322 | required | 322 | required |
| 323 | ></v-select> | 323 | ></v-select> |
| 324 | <!-- <v-text-field | 324 | <!-- <v-text-field |
| 325 | v-model="updateLectures.subjectName" | 325 | v-model="updateLectures.subjectName" |
| 326 | placeholder="fill your Subject Name" | 326 | placeholder="fill your Subject Name" |
| 327 | type="text" | 327 | type="text" |
| 328 | ></v-text-field>--> | 328 | ></v-text-field>--> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | </v-layout> | 330 | </v-layout> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex xs12 sm12> | 332 | <v-flex xs12 sm12> |
| 333 | <v-layout> | 333 | <v-layout> |
| 334 | <v-flex xs5 sm4 class="pt-4 subheading"> | 334 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 335 | <label class="right">Time In:</label> | 335 | <label class="right">Time In:</label> |
| 336 | </v-flex> | 336 | </v-flex> |
| 337 | <v-flex xs7 sm6 class="ml-3"> | 337 | <v-flex xs7 sm6 class="ml-3"> |
| 338 | <v-menu | 338 | <v-menu |
| 339 | ref="menuC" | 339 | ref="menuC" |
| 340 | :close-on-content-click="false" | 340 | :close-on-content-click="false" |
| 341 | v-model="menu4" | 341 | v-model="menu4" |
| 342 | :nudge-right="40" | 342 | :nudge-right="40" |
| 343 | lazy | 343 | lazy |
| 344 | transition="scale-transition" | 344 | transition="scale-transition" |
| 345 | offset-y | 345 | offset-y |
| 346 | full-width | 346 | full-width |
| 347 | max-width="290px" | 347 | max-width="290px" |
| 348 | min-width="290px" | 348 | min-width="290px" |
| 349 | > | 349 | > |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | slot="activator" | 351 | slot="activator" |
| 352 | v-model="updateLectures.timeIn" | 352 | v-model="updateLectures.timeIn" |
| 353 | placeholder="Select your Time In" | 353 | placeholder="Select your Time In" |
| 354 | append-icon="access_time" | 354 | append-icon="access_time" |
| 355 | readonly | 355 | readonly |
| 356 | ></v-text-field> | 356 | ></v-text-field> |
| 357 | <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> | 357 | <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> |
| 358 | </v-menu> | 358 | </v-menu> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | </v-layout> | 360 | </v-layout> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | <v-flex xs12 sm12> | 362 | <v-flex xs12 sm12> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs5 sm4 class="pt-4 subheading"> | 364 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 365 | <label class="right">Time Out:</label> | 365 | <label class="right">Time Out:</label> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | <v-flex xs7 sm6 class="ml-3"> | 367 | <v-flex xs7 sm6 class="ml-3"> |
| 368 | <v-menu | 368 | <v-menu |
| 369 | ref="menuB" | 369 | ref="menuB" |
| 370 | :close-on-content-click="false" | 370 | :close-on-content-click="false" |
| 371 | v-model="menu3" | 371 | v-model="menu3" |
| 372 | :nudge-right="40" | 372 | :nudge-right="40" |
| 373 | lazy | 373 | lazy |
| 374 | transition="scale-transition" | 374 | transition="scale-transition" |
| 375 | offset-y | 375 | offset-y |
| 376 | full-width | 376 | full-width |
| 377 | max-width="290px" | 377 | max-width="290px" |
| 378 | min-width="290px" | 378 | min-width="290px" |
| 379 | > | 379 | > |
| 380 | <v-text-field | 380 | <v-text-field |
| 381 | slot="activator" | 381 | slot="activator" |
| 382 | v-model="updateLectures.timeOut" | 382 | v-model="updateLectures.timeOut" |
| 383 | placeholder="Select your Time Out" | 383 | placeholder="Select your Time Out" |
| 384 | append-icon="access_time" | 384 | append-icon="access_time" |
| 385 | readonly | 385 | readonly |
| 386 | ></v-text-field> | 386 | ></v-text-field> |
| 387 | <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> | 387 | <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> |
| 388 | </v-menu> | 388 | </v-menu> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | <v-flex xs12 sm12> | 392 | <v-flex xs12 sm12> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs5 sm4 class="pt-4 subheading"> | 394 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 395 | <label class="right">Select Teacher:</label> | 395 | <label class="right">Select Teacher:</label> |
| 396 | </v-flex> | 396 | </v-flex> |
| 397 | <v-flex xs7 sm6 class="ml-3"> | 397 | <v-flex xs7 sm6 class="ml-3"> |
| 398 | <v-select | 398 | <v-select |
| 399 | :items="addTeachers" | 399 | :items="addTeachers" |
| 400 | label="Select Teacher" | 400 | label="Select Teacher" |
| 401 | v-model="updateLectures.teacherId" | 401 | v-model="updateLectures.teacherId" |
| 402 | item-text="name" | 402 | item-text="name" |
| 403 | item-value="_id" | 403 | item-value="_id" |
| 404 | required | 404 | required |
| 405 | ></v-select> | 405 | ></v-select> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | <v-layout> | 409 | <v-layout> |
| 410 | <v-flex xs12 sm10 offset-sm1> | 410 | <v-flex xs12 sm10 offset-sm1> |
| 411 | <v-card-actions> | 411 | <v-card-actions> |
| 412 | <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> | 412 | <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> |
| 413 | <v-spacer></v-spacer> | 413 | <v-spacer></v-spacer> |
| 414 | <v-btn | 414 | <v-btn |
| 415 | round | 415 | round |
| 416 | dark | 416 | dark |
| 417 | class="add-button" | 417 | class="add-button" |
| 418 | @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" | 418 | @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" |
| 419 | >Save</v-btn> | 419 | >Save</v-btn> |
| 420 | </v-card-actions> | 420 | </v-card-actions> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | </v-layout> | 422 | </v-layout> |
| 423 | </v-card> | 423 | </v-card> |
| 424 | </v-flex> | 424 | </v-flex> |
| 425 | </v-dialog> | 425 | </v-dialog> |
| 426 | <!-- ****** EXISTING-USERS TIME-TABLE ****** --> | 426 | <!-- ****** EXISTING-USERS TIME-TABLE ****** --> |
| 427 | 427 | ||
| 428 | <!-- <v-card flat> | 428 | <!-- <v-card flat> |
| 429 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 429 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 430 | <v-layout> | 430 | <v-layout> |
| 431 | <label class="right mt-4 ml-5">Select Class:</label> | 431 | <label class="right mt-4 ml-5">Select Class:</label> |
| 432 | <v-select | 432 | <v-select |
| 433 | :items="addclass" | 433 | :items="addclass" |
| 434 | label="Select Class" | 434 | label="Select Class" |
| 435 | v-model="selectTimeTable.select" | 435 | v-model="selectTimeTable.select" |
| 436 | item-text="classNum" | 436 | item-text="classNum" |
| 437 | item-value="_id" | 437 | item-value="_id" |
| 438 | name="Select Class" | 438 | name="Select Class" |
| 439 | @change="getSections(selectTimeTable.select)" | 439 | @change="getSections(selectTimeTable.select)" |
| 440 | class="px-4" | 440 | class="px-4" |
| 441 | required | 441 | required |
| 442 | ></v-select> | 442 | ></v-select> |
| 443 | <label class="right mt-4">Select Section:</label> | 443 | <label class="right mt-4">Select Section:</label> |
| 444 | <v-select | 444 | <v-select |
| 445 | :items="addSection" | 445 | :items="addSection" |
| 446 | label="Select Section" | 446 | label="Select Section" |
| 447 | v-model="selectTimeTable.selectSection" | 447 | v-model="selectTimeTable.selectSection" |
| 448 | item-text="name" | 448 | item-text="name" |
| 449 | item-value="_id" | 449 | item-value="_id" |
| 450 | name="Select Section" | 450 | name="Select Section" |
| 451 | class="pl-3" | 451 | class="pl-3" |
| 452 | required | 452 | required |
| 453 | ></v-select> | 453 | ></v-select> |
| 454 | </v-layout> | 454 | </v-layout> |
| 455 | <v-spacer></v-spacer> | 455 | <v-spacer></v-spacer> |
| 456 | <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> | 456 | <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> |
| 457 | </v-card-actions> | 457 | </v-card-actions> |
| 458 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 458 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 459 | <v-flex xs4 sm2 class="mt-4 ml-2"> | 459 | <v-flex xs4 sm2 class="mt-4 ml-2"> |
| 460 | <label>Select Class:</label> | 460 | <label>Select Class:</label> |
| 461 | </v-flex> | 461 | </v-flex> |
| 462 | <v-flex xs6 sm9> | 462 | <v-flex xs6 sm9> |
| 463 | <v-select | 463 | <v-select |
| 464 | :items="addclass" | 464 | :items="addclass" |
| 465 | label="Select Class" | 465 | label="Select Class" |
| 466 | v-model="selectTimeTable.select" | 466 | v-model="selectTimeTable.select" |
| 467 | item-text="classNum" | 467 | item-text="classNum" |
| 468 | item-value="_id" | 468 | item-value="_id" |
| 469 | name="Select Class" | 469 | name="Select Class" |
| 470 | @change="getSections(selectTimeTable.select)" | 470 | @change="getSections(selectTimeTable.select)" |
| 471 | required | 471 | required |
| 472 | ></v-select> | 472 | ></v-select> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 475 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 476 | <v-flex xs4 sm2 class="mt-4 ml-2"> | 476 | <v-flex xs4 sm2 class="mt-4 ml-2"> |
| 477 | <label>Select Section:</label> | 477 | <label>Select Section:</label> |
| 478 | </v-flex> | 478 | </v-flex> |
| 479 | <v-flex xs6 sm9> | 479 | <v-flex xs6 sm9> |
| 480 | <v-select | 480 | <v-select |
| 481 | :items="addSection" | 481 | :items="addSection" |
| 482 | label="Select Section" | 482 | label="Select Section" |
| 483 | v-model="selectTimeTable.selectSection" | 483 | v-model="selectTimeTable.selectSection" |
| 484 | item-text="name" | 484 | item-text="name" |
| 485 | item-value="_id" | 485 | item-value="_id" |
| 486 | name="Select Section" | 486 | name="Select Section" |
| 487 | required | 487 | required |
| 488 | ></v-select> | 488 | ></v-select> |
| 489 | </v-flex> | 489 | </v-flex> |
| 490 | </v-layout> | 490 | </v-layout> |
| 491 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 491 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 492 | <v-flex xs12> | 492 | <v-flex xs12> |
| 493 | <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> | 493 | <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> |
| 494 | </v-flex> | 494 | </v-flex> |
| 495 | </v-layout> | 495 | </v-layout> |
| 496 | </v-card>--> | 496 | </v-card>--> |
| 497 | <v-flex xs12> | 497 | <v-flex xs12> |
| 498 | <v-toolbar color="transparent" flat> | 498 | <v-toolbar color="transparent" flat> |
| 499 | <v-btn | 499 | <v-btn |
| 500 | fab | 500 | fab |
| 501 | dark | 501 | dark |
| 502 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 502 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 503 | small | 503 | small |
| 504 | @click="addTimeTableDialog = true" | 504 | @click="addTimeTableDialog = true" |
| 505 | > | 505 | > |
| 506 | <v-icon dark>add</v-icon> | 506 | <v-icon dark>add</v-icon> |
| 507 | </v-btn> | 507 | </v-btn> |
| 508 | <v-btn | 508 | <v-btn |
| 509 | round | 509 | round |
| 510 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 510 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 511 | dark | 511 | dark |
| 512 | @click="addTimeTableDialog = true" | 512 | @click="addTimeTableDialog = true" |
| 513 | > | 513 | > |
| 514 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table | 514 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table |
| 515 | </v-btn> | 515 | </v-btn> |
| 516 | <v-flex xs4 md2> | 516 | <v-flex xs4 md2> |
| 517 | <v-select | 517 | <v-select |
| 518 | :items="addclass" | 518 | :items="addclass" |
| 519 | label="Select Class" | 519 | label="Select Class" |
| 520 | v-model="selectTimeTable.select" | 520 | v-model="selectTimeTable.select" |
| 521 | item-text="classNum" | 521 | item-text="classNum" |
| 522 | item-value="_id" | 522 | item-value="_id" |
| 523 | name="Select Class" | 523 | name="Select Class" |
| 524 | @change="getSections(selectTimeTable.select)" | 524 | @change="getSections(selectTimeTable.select)" |
| 525 | required | 525 | required |
| 526 | ></v-select> | 526 | ></v-select> |
| 527 | </v-flex> | 527 | </v-flex> |
| 528 | <v-flex xs4 md2 class="ml-4"> | 528 | <v-flex xs4 md2 class="ml-4"> |
| 529 | <v-select | 529 | <v-select |
| 530 | :items="addSection" | 530 | :items="addSection" |
| 531 | label="Select Section" | 531 | label="Select Section" |
| 532 | v-model="selectTimeTable.selectSection" | 532 | v-model="selectTimeTable.selectSection" |
| 533 | item-text="name" | 533 | item-text="name" |
| 534 | item-value="_id" | 534 | item-value="_id" |
| 535 | name="Select Section" | 535 | name="Select Section" |
| 536 | required | 536 | required |
| 537 | ></v-select> | 537 | ></v-select> |
| 538 | </v-flex> | 538 | </v-flex> |
| 539 | <v-spacer></v-spacer> | 539 | <v-spacer></v-spacer> |
| 540 | <v-btn | 540 | <v-btn |
| 541 | @click="findTimeTable()" | 541 | @click="findTimeTable()" |
| 542 | round | 542 | round |
| 543 | dark | 543 | dark |
| 544 | :loading="loading" | 544 | :loading="loading" |
| 545 | class="right mb-2 open-dialog-button" | 545 | class="right mb-2 open-dialog-button" |
| 546 | >Find</v-btn> | 546 | >Find</v-btn> |
| 547 | <v-card-title class="body-1" v-show="show"> | 547 | <v-card-title class="body-1" v-show="show"> |
| 548 | <v-btn icon large flat @click="displaySearch"> | 548 | <v-btn icon large flat @click="displaySearch"> |
| 549 | <v-avatar size="27"> | 549 | <v-avatar size="27"> |
| 550 | <img src="/static/icon/search.png" alt="icon" /> | 550 | <img src="/static/icon/search.png" alt="icon" /> |
| 551 | </v-avatar> | 551 | </v-avatar> |
| 552 | </v-btn> | 552 | </v-btn> |
| 553 | </v-card-title> | 553 | </v-card-title> |
| 554 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 554 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 555 | <v-layout> | 555 | <v-layout> |
| 556 | <v-text-field | 556 | <v-text-field |
| 557 | autofocus | 557 | autofocus |
| 558 | v-model="search" | 558 | v-model="search" |
| 559 | label="Search" | 559 | label="Search" |
| 560 | prepend-inner-icon="search" | 560 | prepend-inner-icon="search" |
| 561 | color="primary" | 561 | color="primary" |
| 562 | ></v-text-field> | 562 | ></v-text-field> |
| 563 | <v-icon @click="closeSearch" color="error">close</v-icon> | 563 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 564 | </v-layout> | 564 | </v-layout> |
| 565 | </v-flex> | 565 | </v-flex> |
| 566 | </v-toolbar> | 566 | </v-toolbar> |
| 567 | <v-data-table | 567 | <v-data-table |
| 568 | :headers="headers" | 568 | :headers="headers" |
| 569 | :items="desserts" | 569 | :items="desserts" |
| 570 | :pagination.sync="pagination" | 570 | :pagination.sync="pagination" |
| 571 | :search="search" | 571 | :search="search" |
| 572 | item-key="_id" | 572 | item-key="_id" |
| 573 | > | 573 | > |
| 574 | <template slot="items" slot-scope="props"> | 574 | <template slot="items" slot-scope="props"> |
| 575 | <tr | 575 | <tr |
| 576 | style="cursor: pointer;" | 576 | style="cursor: pointer;" |
| 577 | class="tr" | 577 | class="tr" |
| 578 | @click="getTimeTable(props.item), props.expanded = !props.expanded" | 578 | @click="getTimeTable(props.item), props.expanded = !props.expanded" |
| 579 | > | 579 | > |
| 580 | <td class="td td-row">{{ props.index + 1}}</td> | 580 | <td class="td td-row">{{ props.index + 1}}</td> |
| 581 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> | 581 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> |
| 582 | <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> | 582 | <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> |
| 583 | <td class="text-xs-center td td-row"> | 583 | <td class="text-xs-center td td-row"> |
| 584 | <span> | 584 | <span> |
| 585 | <v-tooltip top> | 585 | <v-tooltip top> |
| 586 | <img | 586 | <img |
| 587 | slot="activator" | 587 | slot="activator" |
| 588 | style="cursor:pointer; width:20px; height:20px; " | 588 | style="cursor:pointer; width:20px; height:20px; " |
| 589 | class="mr-3" | 589 | class="mr-3" |
| 590 | @click="editItem(props.item)" | 590 | @click="editItem(props.item)" |
| 591 | src="/static/icon/edit.png" | 591 | src="/static/icon/edit.png" |
| 592 | /> | 592 | /> |
| 593 | <span>Edit</span> | 593 | <span>Edit</span> |
| 594 | </v-tooltip> | 594 | </v-tooltip> |
| 595 | <v-tooltip top> | 595 | <v-tooltip top> |
| 596 | <img | 596 | <img |
| 597 | slot="activator" | 597 | slot="activator" |
| 598 | style="cursor:pointer; width:20px; height:20px; " | 598 | style="cursor:pointer; width:20px; height:20px; " |
| 599 | class="mr-3" | 599 | class="mr-3" |
| 600 | @click="deleteItem(props.item)" | 600 | @click="deleteItem(props.item)" |
| 601 | src="/static/icon/delete.png" | 601 | src="/static/icon/delete.png" |
| 602 | /> | 602 | /> |
| 603 | <span>Delete</span> | 603 | <span>Delete</span> |
| 604 | </v-tooltip> | 604 | </v-tooltip> |
| 605 | <v-tooltip top> | 605 | <v-tooltip top> |
| 606 | <img | 606 | <img |
| 607 | slot="activator" | 607 | slot="activator" |
| 608 | style="cursor:pointer; width:20px; height:20px; " | 608 | style="cursor:pointer; width:20px; height:20px; " |
| 609 | class="mr-3" | 609 | class="mr-3" |
| 610 | src="/static/icon/add1.png" | 610 | src="/static/icon/add1.png" |
| 611 | @click="addSchedule(props.item._id)" | 611 | @click="addSchedule(props.item._id)" |
| 612 | /> | 612 | /> |
| 613 | <span>Add</span> | 613 | <span>Add</span> |
| 614 | </v-tooltip> | 614 | </v-tooltip> |
| 615 | </span> | 615 | </span> |
| 616 | </td> | 616 | </td> |
| 617 | </tr> | 617 | </tr> |
| 618 | </template> | 618 | </template> |
| 619 | <template slot="expand" slot-scope="props"> | 619 | <template slot="expand" slot-scope="props"> |
| 620 | <v-data-table | 620 | <v-data-table |
| 621 | :items="timeTableList.schedule" | 621 | :items="timeTableList.schedule" |
| 622 | hide-actions | 622 | hide-actions |
| 623 | item-key="title" | 623 | item-key="title" |
| 624 | style="width: auto;" | 624 | style="width: auto;" |
| 625 | > | 625 | > |
| 626 | <template slot="items" slot-scope="props"> | 626 | <template slot="items" slot-scope="props"> |
| 627 | <tr class="tr"> | 627 | <tr class="tr"> |
| 628 | <td class="text-xs-left subheading table-td td td-row"> | 628 | <td class="text-xs-left subheading table-td td td-row"> |
| 629 | <b>{{ props.item.day }}</b> | 629 | <b>{{ props.item.day }}</b> |
| 630 | </td> | 630 | </td> |
| 631 | <td class="table-td td td-row"> | 631 | <td class="table-td td td-row"> |
| 632 | <b>Subject</b> | 632 | <b>Subject</b> |
| 633 | <br /> | 633 | <br /> |
| 634 | <b>Time In</b> | 634 | <b>Time In</b> |
| 635 | <br /> | 635 | <br /> |
| 636 | <b>Time Out</b> | 636 | <b>Time Out</b> |
| 637 | </td> | 637 | </td> |
| 638 | <td v-for="list in props.item.lectures" class="table-td td td-row"> | 638 | <td v-for="list in props.item.lectures" class="table-td td td-row"> |
| 639 | <b>{{ list.subjectName }}</b> | 639 | <b>{{ list.subjectName }}</b> |
| 640 | <img | 640 | <img |
| 641 | style="cursor:pointer; width:20px; height:18px; " | 641 | style="cursor:pointer; width:20px; height:18px; " |
| 642 | class="mr-2 ml-2" | 642 | class="mr-2 ml-2" |
| 643 | src="/static/icon/edit1.png" | 643 | src="/static/icon/edit1.png" |
| 644 | @click="updateTimeTable(list, timeTableList,props.item._id)" | 644 | @click="updateTimeTable(list, timeTableList,props.item._id)" |
| 645 | /> | 645 | /> |
| 646 | <img | 646 | <img |
| 647 | style="cursor:pointer; width:20px; height:20px; " | 647 | style="cursor:pointer; width:20px; height:20px; " |
| 648 | src="/static/icon/delete1.png" | 648 | src="/static/icon/delete1.png" |
| 649 | @click="deleteTimeTable(list,props.item.lectures)" | 649 | @click="deleteTimeTable(list,props.item.lectures)" |
| 650 | /> | 650 | /> |
| 651 | <br /> | 651 | <br /> |
| 652 | {{list.timeIn}} | 652 | {{list.timeIn}} |
| 653 | <br /> | 653 | <br /> |
| 654 | {{list.timeOut}} | 654 | {{list.timeOut}} |
| 655 | </td> | 655 | </td> |
| 656 | <td class="td td-row"> | 656 | <td class="td td-row"> |
| 657 | <v-tooltip top> | 657 | <v-tooltip top> |
| 658 | <v-icon | 658 | <v-icon |
| 659 | slot="activator" | 659 | slot="activator" |
| 660 | color="black" | 660 | color="black" |
| 661 | @click="addLecture(props.item._id, timeTableList._id)" | 661 | @click="addLecture(props.item._id, timeTableList._id)" |
| 662 | >add_circle_outline</v-icon> | 662 | >add_circle_outline</v-icon> |
| 663 | <span>Add</span> | 663 | <span>Add</span> |
| 664 | </v-tooltip> | 664 | </v-tooltip> |
| 665 | </td> | 665 | </td> |
| 666 | </tr> | 666 | </tr> |
| 667 | </template> | 667 | </template> |
| 668 | </v-data-table> | 668 | </v-data-table> |
| 669 | </template> | 669 | </template> |
| 670 | <v-alert | 670 | <v-alert |
| 671 | slot="no-results" | 671 | slot="no-results" |
| 672 | :value="true" | 672 | :value="true" |
| 673 | color="error" | 673 | color="error" |
| 674 | icon="warning" | 674 | icon="warning" |
| 675 | >Your search for "{{ search }}" found no results.</v-alert> | 675 | >Your search for "{{ search }}" found no results.</v-alert> |
| 676 | </v-data-table> | 676 | </v-data-table> |
| 677 | <br /> | 677 | <br /> |
| 678 | <br /> | 678 | <br /> |
| 679 | </v-flex> | 679 | </v-flex> |
| 680 | 680 | ||
| 681 | <!-- ****** ADD TIME-TABLE ****** --> | 681 | <!-- ****** ADD TIME-TABLE ****** --> |
| 682 | <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent> | 682 | <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent> |
| 683 | <v-card flat class="card-style pa-2" dark> | 683 | <v-card flat class="Card-style pa-2"> |
| 684 | <v-layout> | 684 | <v-layout> |
| 685 | <v-flex xs12> | 685 | <v-flex xs12> |
| 686 | <label class="title text-xs-center">Add Time Table</label> | 686 | <label class="title text-xs-center">Add Time Table</label> |
| 687 | <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon> | 687 | <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon> |
| 688 | </v-flex> | 688 | </v-flex> |
| 689 | </v-layout> | 689 | </v-layout> |
| 690 | <v-form ref="form" v-model="valid" lazy-validation> | 690 | <v-form ref="form" v-model="valid" lazy-validation> |
| 691 | <v-container fluid class="pt-3"> | 691 | <v-container fluid class="pt-3"> |
| 692 | <v-flex xs12> | 692 | <v-flex xs12> |
| 693 | <v-layout> | 693 | <v-layout> |
| 694 | <v-flex xs4 class="pt-4 subheading"> | 694 | <v-flex xs4 class="pt-4 subheading"> |
| 695 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 695 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 696 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 696 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 697 | </v-flex> | 697 | </v-flex> |
| 698 | <v-flex xs8 sm6 class="ml-3"> | 698 | <v-flex xs8 sm6 class="ml-3"> |
| 699 | <v-select | 699 | <v-select |
| 700 | :items="addclass" | 700 | :items="addclass" |
| 701 | label="Select Class" | 701 | label="Select Class" |
| 702 | v-model="timeTable.select" | 702 | v-model="timeTable.select" |
| 703 | item-text="classNum" | 703 | item-text="classNum" |
| 704 | item-value="_id" | 704 | item-value="_id" |
| 705 | @change="getSections(timeTable.select)" | 705 | @change="getSections(timeTable.select)" |
| 706 | :rules="classRules" | 706 | :rules="classRules" |
| 707 | required | 707 | required |
| 708 | ></v-select> | 708 | ></v-select> |
| 709 | </v-flex> | 709 | </v-flex> |
| 710 | </v-layout> | 710 | </v-layout> |
| 711 | </v-flex> | 711 | </v-flex> |
| 712 | <v-flex xs12> | 712 | <v-flex xs12> |
| 713 | <v-layout> | 713 | <v-layout> |
| 714 | <v-flex xs4 class="pt-4 subheading"> | 714 | <v-flex xs4 class="pt-4 subheading"> |
| 715 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 715 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 716 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 716 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 717 | </v-flex> | 717 | </v-flex> |
| 718 | <v-flex sm6 xs8 class="ml-3"> | 718 | <v-flex sm6 xs8 class="ml-3"> |
| 719 | <v-select | 719 | <v-select |
| 720 | :items="addSection" | 720 | :items="addSection" |
| 721 | label="Select Section" | 721 | label="Select Section" |
| 722 | v-model="timeTable.selectSection" | 722 | v-model="timeTable.selectSection" |
| 723 | item-text="name" | 723 | item-text="name" |
| 724 | item-value="_id" | 724 | item-value="_id" |
| 725 | :rules="sectionRules" | 725 | :rules="sectionRules" |
| 726 | @change="getClassSubject(timeTable.select)" | 726 | @change="getClassSubject(timeTable.select)" |
| 727 | required | 727 | required |
| 728 | ></v-select> | 728 | ></v-select> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | </v-layout> | 730 | </v-layout> |
| 731 | <v-layout> | 731 | <v-layout> |
| 732 | <v-flex xs4 class="pt-4 subheading"> | 732 | <v-flex xs4 class="pt-4 subheading"> |
| 733 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> | 733 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> |
| 734 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 734 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 735 | </v-flex> | 735 | </v-flex> |
| 736 | <v-flex xs8 sm6 class="ml-3"> | 736 | <v-flex xs8 sm6 class="ml-3"> |
| 737 | <v-select | 737 | <v-select |
| 738 | :items="subjectList.subjects" | 738 | :items="subjectList.subjects" |
| 739 | label="Select Subject" | 739 | label="Select Subject" |
| 740 | v-model="timeTable.subjectName" | 740 | v-model="timeTable.subjectName" |
| 741 | item-text="subjectName" | 741 | item-text="subjectName" |
| 742 | item-value="subjectName" | 742 | item-value="subjectName" |
| 743 | :rules="subjectNameRules" | 743 | :rules="subjectNameRules" |
| 744 | required | 744 | required |
| 745 | ></v-select> | 745 | ></v-select> |
| 746 | </v-flex> | 746 | </v-flex> |
| 747 | </v-layout> | 747 | </v-layout> |
| 748 | </v-flex> | 748 | </v-flex> |
| 749 | <v-flex xs12> | 749 | <v-flex xs12> |
| 750 | <v-layout> | 750 | <v-layout> |
| 751 | <v-flex xs4 class="pt-4 subheading"> | 751 | <v-flex xs4 class="pt-4 subheading"> |
| 752 | <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> | 752 | <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> |
| 753 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> | 753 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> |
| 754 | </v-flex> | 754 | </v-flex> |
| 755 | <v-flex xs8 sm6 class="ml-3"> | 755 | <v-flex xs8 sm6 class="ml-3"> |
| 756 | <v-select | 756 | <v-select |
| 757 | :items="addTeachers" | 757 | :items="addTeachers" |
| 758 | label="Select Teacher" | 758 | label="Select Teacher" |
| 759 | v-model="timeTable.selectTeacher" | 759 | v-model="timeTable.selectTeacher" |
| 760 | item-text="name" | 760 | item-text="name" |
| 761 | item-value="_id" | 761 | item-value="_id" |
| 762 | :rules="teacherRules" | 762 | :rules="teacherRules" |
| 763 | required | 763 | required |
| 764 | ></v-select> | 764 | ></v-select> |
| 765 | </v-flex> | 765 | </v-flex> |
| 766 | </v-layout> | 766 | </v-layout> |
| 767 | </v-flex> | 767 | </v-flex> |
| 768 | <v-flex xs12> | 768 | <v-flex xs12> |
| 769 | <v-layout> | 769 | <v-layout> |
| 770 | <v-flex xs4 class="pt-4 subheading"> | 770 | <v-flex xs4 class="pt-4 subheading"> |
| 771 | <label class="right">Select Day:</label> | 771 | <label class="right">Select Day:</label> |
| 772 | </v-flex> | 772 | </v-flex> |
| 773 | <v-flex xs8 sm6 class="ml-3"> | 773 | <v-flex xs8 sm6 class="ml-3"> |
| 774 | <v-select | 774 | <v-select |
| 775 | :items="addOneDay" | 775 | :items="addOneDay" |
| 776 | label="Select Day" | 776 | label="Select Day" |
| 777 | v-model="timeTable.selectDay" | 777 | v-model="timeTable.selectDay" |
| 778 | :rules="dayRules" | 778 | :rules="dayRules" |
| 779 | item-text="name" | 779 | item-text="name" |
| 780 | item-value="_id" | 780 | item-value="_id" |
| 781 | required | 781 | required |
| 782 | ></v-select> | 782 | ></v-select> |
| 783 | </v-flex> | 783 | </v-flex> |
| 784 | </v-layout> | 784 | </v-layout> |
| 785 | </v-flex> | 785 | </v-flex> |
| 786 | <!-- <v-flex xs12> | 786 | <!-- <v-flex xs12> |
| 787 | <v-layout> | 787 | <v-layout> |
| 788 | <v-flex xs4 class="pt-4 subheading"> | 788 | <v-flex xs4 class="pt-4 subheading"> |
| 789 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> | 789 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> |
| 790 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 790 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 791 | </v-flex> | 791 | </v-flex> |
| 792 | <v-flex xs8 sm6 class="ml-3"> | 792 | <v-flex xs8 sm6 class="ml-3"> |
| 793 | <v-text-field | 793 | <v-text-field |
| 794 | placeholder="fill your Subject Name" | 794 | placeholder="fill your Subject Name" |
| 795 | :rules="subjectNameRules" | 795 | :rules="subjectNameRules" |
| 796 | v-model="timeTable.subjectName" | 796 | v-model="timeTable.subjectName" |
| 797 | type="text" | 797 | type="text" |
| 798 | required | 798 | required |
| 799 | ></v-text-field> | 799 | ></v-text-field> |
| 800 | </v-flex> | 800 | </v-flex> |
| 801 | </v-layout> | 801 | </v-layout> |
| 802 | </v-flex>--> | 802 | </v-flex>--> |
| 803 | <v-flex xs12> | 803 | <v-flex xs12> |
| 804 | <v-layout> | 804 | <v-layout> |
| 805 | <v-flex xs4 class="pt-4 subheading"> | 805 | <v-flex xs4 class="pt-4 subheading"> |
| 806 | <label class="right">Time In:</label> | 806 | <label class="right">Time In:</label> |
| 807 | </v-flex> | 807 | </v-flex> |
| 808 | <v-flex xs8 sm6 class="ml-3"> | 808 | <v-flex xs8 sm6 class="ml-3"> |
| 809 | <v-menu | 809 | <v-menu |
| 810 | ref="menuA" | 810 | ref="menuA" |
| 811 | :close-on-content-click="false" | 811 | :close-on-content-click="false" |
| 812 | v-model="menu2" | 812 | v-model="menu2" |
| 813 | :nudge-right="40" | 813 | :nudge-right="40" |
| 814 | :return-value.sync="timeTable.timeIn" | 814 | :return-value.sync="timeTable.timeIn" |
| 815 | lazy | 815 | lazy |
| 816 | transition="scale-transition" | 816 | transition="scale-transition" |
| 817 | offset-y | 817 | offset-y |
| 818 | full-width | 818 | full-width |
| 819 | max-width="290px" | 819 | max-width="290px" |
| 820 | min-width="290px" | 820 | min-width="290px" |
| 821 | > | 821 | > |
| 822 | <v-text-field | 822 | <v-text-field |
| 823 | slot="activator" | 823 | slot="activator" |
| 824 | v-model="timeTable.timeIn" | 824 | v-model="timeTable.timeIn" |
| 825 | label="Select your timeIn" | 825 | label="Select your timeIn" |
| 826 | append-icon="access_time" | 826 | append-icon="access_time" |
| 827 | :rules="timeInRules" | 827 | :rules="timeInRules" |
| 828 | readonly | 828 | readonly |
| 829 | ></v-text-field> | 829 | ></v-text-field> |
| 830 | <v-time-picker | 830 | <v-time-picker |
| 831 | v-model="timeTable.timeIn" | 831 | v-model="timeTable.timeIn" |
| 832 | @change="$refs.menuA.save(timeTable.timeIn)" | 832 | @change="$refs.menuA.save(timeTable.timeIn)" |
| 833 | ></v-time-picker> | 833 | ></v-time-picker> |
| 834 | </v-menu> | 834 | </v-menu> |
| 835 | </v-flex> | 835 | </v-flex> |
| 836 | </v-layout> | 836 | </v-layout> |
| 837 | </v-flex> | 837 | </v-flex> |
| 838 | <v-flex xs12> | 838 | <v-flex xs12> |
| 839 | <v-layout> | 839 | <v-layout> |
| 840 | <v-flex xs4 class="pt-4 subheading"> | 840 | <v-flex xs4 class="pt-4 subheading"> |
| 841 | <label class="right">Time Out:</label> | 841 | <label class="right">Time Out:</label> |
| 842 | </v-flex> | 842 | </v-flex> |
| 843 | <v-flex xs8 sm6 class="ml-3"> | 843 | <v-flex xs8 sm6 class="ml-3"> |
| 844 | <v-menu | 844 | <v-menu |
| 845 | ref="menu" | 845 | ref="menu" |
| 846 | :close-on-content-click="false" | 846 | :close-on-content-click="false" |
| 847 | v-model="menu1" | 847 | v-model="menu1" |
| 848 | :nudge-right="40" | 848 | :nudge-right="40" |
| 849 | :return-value.sync="timeTable.timeOut" | 849 | :return-value.sync="timeTable.timeOut" |
| 850 | lazy | 850 | lazy |
| 851 | transition="scale-transition" | 851 | transition="scale-transition" |
| 852 | offset-y | 852 | offset-y |
| 853 | full-width | 853 | full-width |
| 854 | max-width="290px" | 854 | max-width="290px" |
| 855 | min-width="290px" | 855 | min-width="290px" |
| 856 | > | 856 | > |
| 857 | <v-text-field | 857 | <v-text-field |
| 858 | slot="activator" | 858 | slot="activator" |
| 859 | v-model="timeTable.timeOut" | 859 | v-model="timeTable.timeOut" |
| 860 | label="Select your Time Out" | 860 | label="Select your Time Out" |
| 861 | append-icon="access_time" | 861 | append-icon="access_time" |
| 862 | :rules="timeOutRules" | 862 | :rules="timeOutRules" |
| 863 | readonly | 863 | readonly |
| 864 | ></v-text-field> | 864 | ></v-text-field> |
| 865 | <v-time-picker | 865 | <v-time-picker |
| 866 | v-model="timeTable.timeOut" | 866 | v-model="timeTable.timeOut" |
| 867 | @change="$refs.menu.save(timeTable.timeOut)" | 867 | @change="$refs.menu.save(timeTable.timeOut)" |
| 868 | ></v-time-picker> | 868 | ></v-time-picker> |
| 869 | </v-menu> | 869 | </v-menu> |
| 870 | </v-flex> | 870 | </v-flex> |
| 871 | </v-layout> | 871 | </v-layout> |
| 872 | </v-flex> | 872 | </v-flex> |
| 873 | <v-layout> | 873 | <v-layout> |
| 874 | <v-flex xs12 sm11> | 874 | <v-flex xs12 sm11> |
| 875 | <v-layout> | 875 | <v-layout> |
| 876 | <v-spacer></v-spacer> | 876 | <v-spacer></v-spacer> |
| 877 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 877 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 878 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 878 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 879 | </v-layout> | 879 | </v-layout> |
| 880 | </v-flex> | 880 | </v-flex> |
| 881 | </v-layout> | 881 | </v-layout> |
| 882 | </v-container> | 882 | </v-container> |
| 883 | </v-form> | 883 | </v-form> |
| 884 | </v-card> | 884 | </v-card> |
| 885 | </v-dialog> | 885 | </v-dialog> |
| 886 | <div class="loader" v-if="showLoader"> | 886 | <div class="loader" v-if="showLoader"> |
| 887 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 887 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 888 | </div> | 888 | </div> |
| 889 | <v-snackbar | 889 | <v-snackbar |
| 890 | :timeout="timeout" | 890 | :timeout="timeout" |
| 891 | :top="y === 'top'" | 891 | :top="y === 'top'" |
| 892 | :right="x === 'right'" | 892 | :right="x === 'right'" |
| 893 | :vertical="mode === 'vertical'" | 893 | :vertical="mode === 'vertical'" |
| 894 | v-model="snackbar" | 894 | v-model="snackbar" |
| 895 | :color="color" | 895 | :color="color" |
| 896 | >{{ text }}</v-snackbar> | 896 | >{{ text }}</v-snackbar> |
| 897 | </v-container> | 897 | </v-container> |
| 898 | </template> | 898 | </template> |
| 899 | <script> | 899 | <script> |
| 900 | import http from "@/Services/http.js"; | 900 | import http from "@/Services/http.js"; |
| 901 | import Util from "@/util"; | 901 | import Util from "@/util"; |
| 902 | 902 | ||
| 903 | export default { | 903 | export default { |
| 904 | data: () => ({ | 904 | data: () => ({ |
| 905 | y: "top", | 905 | y: "top", |
| 906 | x: "right", | 906 | x: "right", |
| 907 | mode: "", | 907 | mode: "", |
| 908 | timeout: 3000, | 908 | timeout: 3000, |
| 909 | text: "", | 909 | text: "", |
| 910 | search: "", | 910 | search: "", |
| 911 | color: "", | 911 | color: "", |
| 912 | snackbar: false, | 912 | snackbar: false, |
| 913 | loading: false, | 913 | loading: false, |
| 914 | showLoader: false, | 914 | showLoader: false, |
| 915 | dialog: false, | 915 | dialog: false, |
| 916 | show: true, | 916 | show: true, |
| 917 | showSearch: false, | 917 | showSearch: false, |
| 918 | dialogAddLecture: false, | 918 | dialogAddLecture: false, |
| 919 | dialogUpdateLectures: false, | 919 | dialogUpdateLectures: false, |
| 920 | dialogSchedule: false, | 920 | dialogSchedule: false, |
| 921 | dialog1: false, | 921 | dialog1: false, |
| 922 | valid: true, | 922 | valid: true, |
| 923 | addTimeTableDialog: false, | 923 | addTimeTableDialog: false, |
| 924 | validAddDay: true, | 924 | validAddDay: true, |
| 925 | loadingFindData: false, | 925 | loadingFindData: false, |
| 926 | addclass: [], | 926 | addclass: [], |
| 927 | addSection: [], | 927 | addSection: [], |
| 928 | subjectList: [], | 928 | subjectList: [], |
| 929 | addTeachers: [], | 929 | addTeachers: [], |
| 930 | gender: ["Male", "Female"], | 930 | gender: ["Male", "Female"], |
| 931 | pagination: { | 931 | pagination: { |
| 932 | rowsPerPage: 15, | 932 | rowsPerPage: 15, |
| 933 | }, | 933 | }, |
| 934 | imageData: {}, | 934 | imageData: {}, |
| 935 | imageName: "", | 935 | imageName: "", |
| 936 | imageUrl: "", | 936 | imageUrl: "", |
| 937 | imageFile: "", | 937 | imageFile: "", |
| 938 | timeInRules: [(v) => !!v || "Time In is required"], | 938 | timeInRules: [(v) => !!v || "Time In is required"], |
| 939 | timeOutRules: [(v) => !!v || "Time Out is required"], | 939 | timeOutRules: [(v) => !!v || "Time Out is required"], |
| 940 | lectureRules: [(v) => !!v || "Lecture No is required"], | 940 | lectureRules: [(v) => !!v || "Lecture No is required"], |
| 941 | subjectNameRules: [(v) => !!v || "Subject Name is required"], | 941 | subjectNameRules: [(v) => !!v || "Subject Name is required"], |
| 942 | classRules: [(v) => !!v || "Class Name is required"], | 942 | classRules: [(v) => !!v || "Class Name is required"], |
| 943 | sectionRules: [(v) => !!v || "Section Name is required"], | 943 | sectionRules: [(v) => !!v || "Section Name is required"], |
| 944 | sectionRules: [(v) => !!v || "Section Name is required"], | 944 | sectionRules: [(v) => !!v || "Section Name is required"], |
| 945 | teacherRules: [(v) => !!v || "Teacher Name is required"], | 945 | teacherRules: [(v) => !!v || "Teacher Name is required"], |
| 946 | selecDayRule: [(v) => !!v || "Day is required"], | 946 | selecDayRule: [(v) => !!v || "Day is required"], |
| 947 | dayRules: [(v) => !!v || "Day is required"], | 947 | dayRules: [(v) => !!v || "Day is required"], |
| 948 | getParticulerLecture: "", | 948 | getParticulerLecture: "", |
| 949 | headers: [ | 949 | headers: [ |
| 950 | { | 950 | { |
| 951 | text: "No", | 951 | text: "No", |
| 952 | align: "", | 952 | align: "", |
| 953 | sortable: false, | 953 | sortable: false, |
| 954 | value: "No", | 954 | value: "No", |
| 955 | }, | 955 | }, |
| 956 | { | 956 | { |
| 957 | text: "Class Name", | 957 | text: "Class Name", |
| 958 | value: "classData.classNum", | 958 | value: "classData.classNum", |
| 959 | sortable: false, | 959 | sortable: false, |
| 960 | align: "center", | 960 | align: "center", |
| 961 | }, | 961 | }, |
| 962 | { | 962 | { |
| 963 | text: "Section Name", | 963 | text: "Section Name", |
| 964 | value: "sectionData.name", | 964 | value: "sectionData.name", |
| 965 | sortable: false, | 965 | sortable: false, |
| 966 | align: "center", | 966 | align: "center", |
| 967 | }, | 967 | }, |
| 968 | { text: "Action", value: "", sortable: false, align: "center" }, | 968 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 969 | ], | 969 | ], |
| 970 | daysHeaders: [ | 970 | daysHeaders: [ |
| 971 | { text: "Day", value: "dayday", sortable: false, align: "center" }, | 971 | { text: "Day", value: "dayday", sortable: false, align: "center" }, |
| 972 | { | 972 | { |
| 973 | text: "Subject Name", | 973 | text: "Subject Name", |
| 974 | value: "subjectName", | 974 | value: "subjectName", |
| 975 | sortable: false, | 975 | sortable: false, |
| 976 | align: "center", | 976 | align: "center", |
| 977 | }, | 977 | }, |
| 978 | { text: "Time In", value: "timeIn", sortable: false, align: "center" }, | 978 | { text: "Time In", value: "timeIn", sortable: false, align: "center" }, |
| 979 | { text: "Time Out", value: "timeOut", sortable: false, align: "center" }, | 979 | { text: "Time Out", value: "timeOut", sortable: false, align: "center" }, |
| 980 | ], | 980 | ], |
| 981 | addOneDay: [ | 981 | addOneDay: [ |
| 982 | "Monday", | 982 | "Monday", |
| 983 | "Tuesday", | 983 | "Tuesday", |
| 984 | "Wednesday", | 984 | "Wednesday", |
| 985 | "Thursday", | 985 | "Thursday", |
| 986 | "Friday", | 986 | "Friday", |
| 987 | "Saturday", | 987 | "Saturday", |
| 988 | "Sunday", | 988 | "Sunday", |
| 989 | ], | 989 | ], |
| 990 | schedule: { | 990 | schedule: { |
| 991 | selectDay: "", | 991 | selectDay: "", |
| 992 | }, | 992 | }, |
| 993 | desserts: [], | 993 | desserts: [], |
| 994 | timeTableList: [], | 994 | timeTableList: [], |
| 995 | editedIndex: -1, | 995 | editedIndex: -1, |
| 996 | selectTimeTable: { | 996 | selectTimeTable: { |
| 997 | select: "", | 997 | select: "", |
| 998 | selectSection: "", | 998 | selectSection: "", |
| 999 | }, | 999 | }, |
| 1000 | timeTable: { | 1000 | timeTable: { |
| 1001 | select: "", | 1001 | select: "", |
| 1002 | selectSection: "", | 1002 | selectSection: "", |
| 1003 | selectDay: "", | 1003 | selectDay: "", |
| 1004 | timeIn: null, | 1004 | timeIn: null, |
| 1005 | timeOut: null, | 1005 | timeOut: null, |
| 1006 | subjectName: "", | 1006 | subjectName: "", |
| 1007 | selectTeacher: "", | 1007 | selectTeacher: "", |
| 1008 | }, | 1008 | }, |
| 1009 | editedItem: { | 1009 | editedItem: { |
| 1010 | classNum: "", | 1010 | classNum: "", |
| 1011 | selectSection: "", | 1011 | selectSection: "", |
| 1012 | }, | 1012 | }, |
| 1013 | addlectures: { | 1013 | addlectures: { |
| 1014 | timeIn: null, | 1014 | timeIn: null, |
| 1015 | timeOut: null, | 1015 | timeOut: null, |
| 1016 | subjectName: "", | 1016 | subjectName: "", |
| 1017 | teacherId: "", | 1017 | teacherId: "", |
| 1018 | scheduleId: "", | 1018 | scheduleId: "", |
| 1019 | timeTableId: "", | 1019 | timeTableId: "", |
| 1020 | select: "", | 1020 | select: "", |
| 1021 | }, | 1021 | }, |
| 1022 | updateLectures: { | 1022 | updateLectures: { |
| 1023 | timeIn: null, | 1023 | timeIn: null, |
| 1024 | timeOut: null, | 1024 | timeOut: null, |
| 1025 | subjectName: "", | 1025 | subjectName: "", |
| 1026 | teacherId: "", | 1026 | teacherId: "", |
| 1027 | select: "", | 1027 | select: "", |
| 1028 | }, | 1028 | }, |
| 1029 | updateLecturesId: { | 1029 | updateLecturesId: { |
| 1030 | lectureId: "", | 1030 | lectureId: "", |
| 1031 | scheduleId: "", | 1031 | scheduleId: "", |
| 1032 | }, | 1032 | }, |
| 1033 | menu1: false, | 1033 | menu1: false, |
| 1034 | menu2: false, | 1034 | menu2: false, |
| 1035 | menu3: false, | 1035 | menu3: false, |
| 1036 | menu4: false, | 1036 | menu4: false, |
| 1037 | menu5: false, | 1037 | menu5: false, |
| 1038 | menu6: false, | 1038 | menu6: false, |
| 1039 | scheduleDayId: "", | 1039 | scheduleDayId: "", |
| 1040 | showData: false, | 1040 | showData: false, |
| 1041 | }), | 1041 | }), |
| 1042 | watch: { | 1042 | watch: { |
| 1043 | addTimeTableDialog: function (val) { | 1043 | addTimeTableDialog: function (val) { |
| 1044 | if (!val) { | 1044 | if (!val) { |
| 1045 | this.timeTable = []; | 1045 | this.timeTable = []; |
| 1046 | } | 1046 | } |
| 1047 | }, | 1047 | }, |
| 1048 | }, | 1048 | }, |
| 1049 | methods: { | 1049 | methods: { |
| 1050 | findTimeTable() { | 1050 | findTimeTable() { |
| 1051 | this.loadingFindData = true; | 1051 | this.loadingFindData = true; |
| 1052 | http() | 1052 | http() |
| 1053 | .get("/getParticularClassTimeTable", { | 1053 | .get("/getParticularClassTimeTable", { |
| 1054 | params: { | 1054 | params: { |
| 1055 | sectionId: this.selectTimeTable.selectSection, | 1055 | sectionId: this.selectTimeTable.selectSection, |
| 1056 | classId: this.selectTimeTable.select, | 1056 | classId: this.selectTimeTable.select, |
| 1057 | }, | 1057 | }, |
| 1058 | }) | 1058 | }) |
| 1059 | .then((response) => { | 1059 | .then((response) => { |
| 1060 | this.desserts = response.data.data; | 1060 | this.desserts = response.data.data; |
| 1061 | if (this.desserts.length === 0) { | 1061 | if (this.desserts.length === 0) { |
| 1062 | this.showLoader = false; | 1062 | this.showLoader = false; |
| 1063 | this.snackbar = true; | 1063 | this.snackbar = true; |
| 1064 | this.text = "Data not found!"; | 1064 | this.text = "Data not found!"; |
| 1065 | this.color = "error"; | 1065 | this.color = "error"; |
| 1066 | return; | 1066 | return; |
| 1067 | } | 1067 | } |
| 1068 | this.showData = true; | 1068 | this.showData = true; |
| 1069 | this.loadingFindData = false; | 1069 | this.loadingFindData = false; |
| 1070 | }) | 1070 | }) |
| 1071 | .catch((error) => { | 1071 | .catch((error) => { |
| 1072 | this.loadingFindData = false; | 1072 | this.loadingFindData = false; |
| 1073 | this.snackbar = true; | 1073 | this.snackbar = true; |
| 1074 | this.text = error.response.data.message; | 1074 | this.text = error.response.data.message; |
| 1075 | this.text = error.response.data.statusText; | 1075 | this.text = error.response.data.statusText; |
| 1076 | }); | 1076 | }); |
| 1077 | }, | 1077 | }, |
| 1078 | getSections(_id) { | 1078 | getSections(_id) { |
| 1079 | var token = this.$store.state.token; | 1079 | var token = this.$store.state.token; |
| 1080 | this.desserts = []; | 1080 | this.desserts = []; |
| 1081 | http() | 1081 | http() |
| 1082 | .get( | 1082 | .get( |
| 1083 | "/getSectionsList", | 1083 | "/getSectionsList", |
| 1084 | { params: { classId: _id } }, | 1084 | { params: { classId: _id } }, |
| 1085 | { | 1085 | { |
| 1086 | headers: { Authorization: "Bearer " + token }, | 1086 | headers: { Authorization: "Bearer " + token }, |
| 1087 | } | 1087 | } |
| 1088 | ) | 1088 | ) |
| 1089 | .then((response) => { | 1089 | .then((response) => { |
| 1090 | this.addSection = response.data.data; | 1090 | this.addSection = response.data.data; |
| 1091 | }) | 1091 | }) |
| 1092 | .catch((err) => { | 1092 | .catch((err) => { |
| 1093 | // console.log("err====>", err); | 1093 | // console.log("err====>", err); |
| 1094 | }); | 1094 | }); |
| 1095 | }, | 1095 | }, |
| 1096 | getClassSubject(_id) { | 1096 | getClassSubject(_id) { |
| 1097 | this.showLoader = true; | 1097 | this.showLoader = true; |
| 1098 | // this.classId = this.classId; | 1098 | // this.classId = this.classId; |
| 1099 | http() | 1099 | http() |
| 1100 | .get( | 1100 | .get( |
| 1101 | "/getParticularClass", | 1101 | "/getParticularClass", |
| 1102 | { params: { classId: _id } }, | 1102 | { params: { classId: _id } }, |
| 1103 | { | 1103 | { |
| 1104 | headers: { Authorization: "Bearer " + this.token }, | 1104 | headers: { Authorization: "Bearer " + this.token }, |
| 1105 | } | 1105 | } |
| 1106 | ) | 1106 | ) |
| 1107 | .then((response) => { | 1107 | .then((response) => { |
| 1108 | this.subjectList = response.data.data; | 1108 | this.subjectList = response.data.data; |
| 1109 | this.showLoader = false; | 1109 | this.showLoader = false; |
| 1110 | }) | 1110 | }) |
| 1111 | .catch((err) => { | 1111 | .catch((err) => { |
| 1112 | this.showLoader = false; | 1112 | this.showLoader = false; |
| 1113 | }); | 1113 | }); |
| 1114 | }, | 1114 | }, |
| 1115 | getTimeTable(item) { | 1115 | getTimeTable(item) { |
| 1116 | this.showLoader = true; | 1116 | this.showLoader = true; |
| 1117 | this.getParticulerLecture = item._id; | 1117 | this.getParticulerLecture = item._id; |
| 1118 | this.getTimeTableDayData(); | 1118 | this.getTimeTableDayData(); |
| 1119 | }, | 1119 | }, |
| 1120 | getTimeTableDayData() { | 1120 | getTimeTableDayData() { |
| 1121 | var token = this.$store.state.token; | 1121 | var token = this.$store.state.token; |
| 1122 | http() | 1122 | http() |
| 1123 | .get( | 1123 | .get( |
| 1124 | "/getParticularTimeTable", | 1124 | "/getParticularTimeTable", |
| 1125 | { params: { timeTableId: this.getParticulerLecture } }, | 1125 | { params: { timeTableId: this.getParticulerLecture } }, |
| 1126 | { | 1126 | { |
| 1127 | headers: { Authorization: "Bearer " + token }, | 1127 | headers: { Authorization: "Bearer " + token }, |
| 1128 | } | 1128 | } |
| 1129 | ) | 1129 | ) |
| 1130 | .then((response) => { | 1130 | .then((response) => { |
| 1131 | this.timeTableList = response.data.data; | 1131 | this.timeTableList = response.data.data; |
| 1132 | this.showLoader = false; | 1132 | this.showLoader = false; |
| 1133 | }) | 1133 | }) |
| 1134 | .catch((err) => { | 1134 | .catch((err) => { |
| 1135 | this.showLoader = false; | 1135 | this.showLoader = false; |
| 1136 | // console.log("err====>", err); | 1136 | // console.log("err====>", err); |
| 1137 | }); | 1137 | }); |
| 1138 | }, | 1138 | }, |
| 1139 | pickFile() { | 1139 | pickFile() { |
| 1140 | this.$refs.image.click(); | 1140 | this.$refs.image.click(); |
| 1141 | }, | 1141 | }, |
| 1142 | 1142 | ||
| 1143 | onFilePicked(e) { | 1143 | onFilePicked(e) { |
| 1144 | const files = e.target.files; | 1144 | const files = e.target.files; |
| 1145 | this.imageData.upload = e.target.files[0]; | 1145 | this.imageData.upload = e.target.files[0]; |
| 1146 | if (files[0] !== undefined) { | 1146 | if (files[0] !== undefined) { |
| 1147 | this.imageName = files[0].name; | 1147 | this.imageName = files[0].name; |
| 1148 | if (this.imageName.lastIndexOf(".") <= 0) { | 1148 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 1149 | return; | 1149 | return; |
| 1150 | } | 1150 | } |
| 1151 | const fr = new FileReader(); | 1151 | const fr = new FileReader(); |
| 1152 | fr.readAsDataURL(files[0]); | 1152 | fr.readAsDataURL(files[0]); |
| 1153 | fr.addEventListener("load", () => { | 1153 | fr.addEventListener("load", () => { |
| 1154 | this.imageUrl = fr.result; | 1154 | this.imageUrl = fr.result; |
| 1155 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1155 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1156 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 1156 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 1157 | }); | 1157 | }); |
| 1158 | } else { | 1158 | } else { |
| 1159 | this.imageName = ""; | 1159 | this.imageName = ""; |
| 1160 | this.imageFile = ""; | 1160 | this.imageFile = ""; |
| 1161 | this.imageUrl = ""; | 1161 | this.imageUrl = ""; |
| 1162 | } | 1162 | } |
| 1163 | }, | 1163 | }, |
| 1164 | // getTimeTableList() { | 1164 | // getTimeTableList() { |
| 1165 | // this.showLoader = true; | 1165 | // this.showLoader = true; |
| 1166 | // var token = this.$store.state.token; | 1166 | // var token = this.$store.state.token; |
| 1167 | // http() | 1167 | // http() |
| 1168 | // .get("/getTimeTablesList", { | 1168 | // .get("/getTimeTablesList", { |
| 1169 | // headers: { Authorization: "Bearer " + token } | 1169 | // headers: { Authorization: "Bearer " + token } |
| 1170 | // }) | 1170 | // }) |
| 1171 | // .then(response => { | 1171 | // .then(response => { |
| 1172 | // this.desserts = response.data.data; | 1172 | // this.desserts = response.data.data; |
| 1173 | // this.showLoader = false; | 1173 | // this.showLoader = false; |
| 1174 | // // console.log("getTimeTableList=====>", response.data.data); | 1174 | // // console.log("getTimeTableList=====>", response.data.data); |
| 1175 | // }) | 1175 | // }) |
| 1176 | // .catch(err => { | 1176 | // .catch(err => { |
| 1177 | // // console.log("err====>", err); | 1177 | // // console.log("err====>", err); |
| 1178 | // this.showLoader = false; | 1178 | // this.showLoader = false; |
| 1179 | // this.$router.replace({ path: "/" }); | 1179 | // this.$router.replace({ path: "/" }); |
| 1180 | // }); | 1180 | // }); |
| 1181 | // }, | 1181 | // }, |
| 1182 | editItem(item) { | 1182 | editItem(item) { |
| 1183 | this.editedIndex = this.desserts.indexOf(item); | 1183 | this.editedIndex = this.desserts.indexOf(item); |
| 1184 | this.editedItem = Object.assign({}, item); | 1184 | this.editedItem = Object.assign({}, item); |
| 1185 | this.dialog = true; | 1185 | this.dialog = true; |
| 1186 | }, | 1186 | }, |
| 1187 | updateTimeTable(timeToUpdate, classToUpdate, scheduleId) { | 1187 | updateTimeTable(timeToUpdate, classToUpdate, scheduleId) { |
| 1188 | this.updateLecturesId.scheduleId = scheduleId; | 1188 | this.updateLecturesId.scheduleId = scheduleId; |
| 1189 | this.updateLecturesId.lectureId = timeToUpdate._id; | 1189 | this.updateLecturesId.lectureId = timeToUpdate._id; |
| 1190 | this.updateLectures = timeToUpdate; | 1190 | this.updateLectures = timeToUpdate; |
| 1191 | this.dialogUpdateLectures = true; | 1191 | this.dialogUpdateLectures = true; |
| 1192 | }, | 1192 | }, |
| 1193 | addLecture(scheduleId, timeTableId) { | 1193 | addLecture(scheduleId, timeTableId) { |
| 1194 | this.addlectures.scheduleId = scheduleId; | 1194 | this.addlectures.scheduleId = scheduleId; |
| 1195 | this.addlectures.timeTableId = timeTableId; | 1195 | this.addlectures.timeTableId = timeTableId; |
| 1196 | this.dialogAddLecture = true; | 1196 | this.dialogAddLecture = true; |
| 1197 | }, | 1197 | }, |
| 1198 | AddLecture() { | 1198 | AddLecture() { |
| 1199 | if (this.$refs.lectureForm.validate()) { | 1199 | if (this.$refs.lectureForm.validate()) { |
| 1200 | http() | 1200 | http() |
| 1201 | .post("/addLecture", this.addlectures) | 1201 | .post("/addLecture", this.addlectures) |
| 1202 | .then((response) => { | 1202 | .then((response) => { |
| 1203 | this.snackbar = true; | 1203 | this.snackbar = true; |
| 1204 | this.text = "New Add Lecture successfully"; | 1204 | this.text = "New Add Lecture successfully"; |
| 1205 | var token = this.$store.state.token; | 1205 | var token = this.$store.state.token; |
| 1206 | http() | 1206 | http() |
| 1207 | .get( | 1207 | .get( |
| 1208 | "/getParticularTimeTable", | 1208 | "/getParticularTimeTable", |
| 1209 | { params: { timeTableId: this.getParticulerLecture } }, | 1209 | { params: { timeTableId: this.getParticulerLecture } }, |
| 1210 | { | 1210 | { |
| 1211 | headers: { Authorization: "Bearer " + token }, | 1211 | headers: { Authorization: "Bearer " + token }, |
| 1212 | } | 1212 | } |
| 1213 | ) | 1213 | ) |
| 1214 | .then((response) => { | 1214 | .then((response) => { |
| 1215 | this.timeTableList = response.data.data; | 1215 | this.timeTableList = response.data.data; |
| 1216 | this.snackbar = true; | 1216 | this.snackbar = true; |
| 1217 | this.text = response.data.message; | 1217 | this.text = response.data.message; |
| 1218 | this.color = "green"; | 1218 | this.color = "green"; |
| 1219 | this.showLoader = false; | 1219 | this.showLoader = false; |
| 1220 | }) | 1220 | }) |
| 1221 | .catch((err) => { | 1221 | .catch((err) => { |
| 1222 | this.showLoader = false; | 1222 | this.showLoader = false; |
| 1223 | // console.log("err====>", err); | 1223 | // console.log("err====>", err); |
| 1224 | this.snackbar = true; | 1224 | this.snackbar = true; |
| 1225 | this.color = "error"; | 1225 | this.color = "error"; |
| 1226 | this.text = error.response.data.message; | 1226 | this.text = error.response.data.message; |
| 1227 | }); | 1227 | }); |
| 1228 | this.closedialogLecture(); | 1228 | this.closedialogLecture(); |
| 1229 | this.clearLeactureData(); | 1229 | this.clearLeactureData(); |
| 1230 | }) | 1230 | }) |
| 1231 | .catch((error) => { | 1231 | .catch((error) => { |
| 1232 | this.snackbar = true; | 1232 | this.snackbar = true; |
| 1233 | this.text = error.response.data.message; | 1233 | this.text = error.response.data.message; |
| 1234 | this.text = error.response.data.statusText; | 1234 | this.text = error.response.data.statusText; |
| 1235 | }); | 1235 | }); |
| 1236 | } | 1236 | } |
| 1237 | }, | 1237 | }, |
| 1238 | updateParticularTable() { | 1238 | updateParticularTable() { |
| 1239 | let EditLecture = { | 1239 | let EditLecture = { |
| 1240 | lectureId: this.updateLecturesId.lectureId, | 1240 | lectureId: this.updateLecturesId.lectureId, |
| 1241 | scheduleId: this.updateLecturesId.scheduleId, | 1241 | scheduleId: this.updateLecturesId.scheduleId, |
| 1242 | updatedLecture: { | 1242 | updatedLecture: { |
| 1243 | timeIn: this.updateLectures.timeIn, | 1243 | timeIn: this.updateLectures.timeIn, |
| 1244 | timeOut: this.updateLectures.timeOut, | 1244 | timeOut: this.updateLectures.timeOut, |
| 1245 | subjectName: this.updateLectures.subjectName, | 1245 | subjectName: this.updateLectures.subjectName, |
| 1246 | teacherId: this.updateLectures.teacherId, | 1246 | teacherId: this.updateLectures.teacherId, |
| 1247 | }, | 1247 | }, |
| 1248 | }; | 1248 | }; |
| 1249 | http() | 1249 | http() |
| 1250 | .put("/updateLecture", EditLecture) | 1250 | .put("/updateLecture", EditLecture) |
| 1251 | .then((response) => { | 1251 | .then((response) => { |
| 1252 | // console.log("updateLecture", EditLecture); | 1252 | // console.log("updateLecture", EditLecture); |
| 1253 | this.snackbar = true; | 1253 | this.snackbar = true; |
| 1254 | this.text = response.data.message; | 1254 | this.text = response.data.message; |
| 1255 | this.color = "green"; | 1255 | this.color = "green"; |
| 1256 | this.closeUpdateLectures(); | 1256 | this.closeUpdateLectures(); |
| 1257 | }) | 1257 | }) |
| 1258 | .catch((error) => { | 1258 | .catch((error) => { |
| 1259 | // console.log(error); | 1259 | // console.log(error); |
| 1260 | 1260 | ||
| 1261 | this.snackbar = true; | 1261 | this.snackbar = true; |
| 1262 | this.color = "error"; | 1262 | this.color = "error"; |
| 1263 | this.text = error.response.data.message; | 1263 | this.text = error.response.data.message; |
| 1264 | if (error.response.data.statusText) { | 1264 | if (error.response.data.statusText) { |
| 1265 | this.text = error.response.data.statusText; | 1265 | this.text = error.response.data.statusText; |
| 1266 | } | 1266 | } |
| 1267 | }); | 1267 | }); |
| 1268 | }, | 1268 | }, |
| 1269 | deleteItem(item) { | 1269 | deleteItem(item) { |
| 1270 | let deleteTimeTable = { | 1270 | let deleteTimeTable = { |
| 1271 | timeTableId: item._id, | 1271 | timeTableId: item._id, |
| 1272 | }; | 1272 | }; |
| 1273 | http() | 1273 | http() |
| 1274 | .delete( | 1274 | .delete( |
| 1275 | "/deleteTimeTable", | 1275 | "/deleteTimeTable", |
| 1276 | confirm("Are you sure you want to delete this?") && { | 1276 | confirm("Are you sure you want to delete this?") && { |
| 1277 | params: deleteTimeTable, | 1277 | params: deleteTimeTable, |
| 1278 | } | 1278 | } |
| 1279 | ) | 1279 | ) |
| 1280 | .then((response) => { | 1280 | .then((response) => { |
| 1281 | // console.log("deleteUers",deleteTimeTable) | 1281 | // console.log("deleteUers",deleteTimeTable) |
| 1282 | this.snackbar = true; | 1282 | this.snackbar = true; |
| 1283 | this.text = response.data.message; | 1283 | this.text = response.data.message; |
| 1284 | this.color = "green"; | 1284 | this.color = "green"; |
| 1285 | this.findTimeTable(); | 1285 | this.findTimeTable(); |
| 1286 | }) | 1286 | }) |
| 1287 | .catch((error) => { | 1287 | .catch((error) => { |
| 1288 | // console.log(error); | 1288 | // console.log(error); |
| 1289 | }); | 1289 | }); |
| 1290 | }, | 1290 | }, |
| 1291 | close() { | 1291 | close() { |
| 1292 | this.dialog = false; | 1292 | this.dialog = false; |
| 1293 | }, | 1293 | }, |
| 1294 | close1() { | 1294 | close1() { |
| 1295 | this.dialog1 = false; | 1295 | this.dialog1 = false; |
| 1296 | }, | 1296 | }, |
| 1297 | closedialogLecture() { | 1297 | closedialogLecture() { |
| 1298 | this.dialogAddLecture = false; | 1298 | this.dialogAddLecture = false; |
| 1299 | }, | 1299 | }, |
| 1300 | closeUpdateLectures() { | 1300 | closeUpdateLectures() { |
| 1301 | this.dialogUpdateLectures = false; | 1301 | this.dialogUpdateLectures = false; |
| 1302 | }, | 1302 | }, |
| 1303 | closeAddTimeTableModel() { | 1303 | closeAddTimeTableModel() { |
| 1304 | this.addTimeTableDialog = false; | 1304 | this.addTimeTableDialog = false; |
| 1305 | this.timeTableList = []; | 1305 | this.timeTableList = []; |
| 1306 | this.timeTable = []; | 1306 | this.timeTable = []; |
| 1307 | }, | 1307 | }, |
| 1308 | submit() { | 1308 | submit() { |
| 1309 | if (this.$refs.form.validate()) { | 1309 | if (this.$refs.form.validate()) { |
| 1310 | let imageData = new FormData(); | 1310 | let imageData = new FormData(); |
| 1311 | imageData.append("upload", this.imageFile); | 1311 | imageData.append("upload", this.imageFile); |
| 1312 | let addTimeTable = { | 1312 | let addTimeTable = { |
| 1313 | sectionId: this.timeTable.selectSection, | 1313 | sectionId: this.timeTable.selectSection, |
| 1314 | classId: this.timeTable.select, | 1314 | classId: this.timeTable.select, |
| 1315 | schedule: [ | 1315 | schedule: [ |
| 1316 | { | 1316 | { |
| 1317 | day: this.timeTable.selectDay, | 1317 | day: this.timeTable.selectDay, |
| 1318 | lectures: [ | 1318 | lectures: [ |
| 1319 | { | 1319 | { |
| 1320 | timeIn: this.timeTable.timeIn, | 1320 | timeIn: this.timeTable.timeIn, |
| 1321 | timeOut: this.timeTable.timeOut, | 1321 | timeOut: this.timeTable.timeOut, |
| 1322 | subjectName: this.timeTable.subjectName, | 1322 | subjectName: this.timeTable.subjectName, |
| 1323 | teacherId: this.timeTable.selectTeacher, | 1323 | teacherId: this.timeTable.selectTeacher, |
| 1324 | }, | 1324 | }, |
| 1325 | ], | 1325 | ], |
| 1326 | }, | 1326 | }, |
| 1327 | ], | 1327 | ], |
| 1328 | }; | 1328 | }; |
| 1329 | this.loading = true; | 1329 | this.loading = true; |
| 1330 | http() | 1330 | http() |
| 1331 | .post("/createTimeTable", addTimeTable) | 1331 | .post("/createTimeTable", addTimeTable) |
| 1332 | .then((response) => { | 1332 | .then((response) => { |
| 1333 | // console.log("addTimeTable=====>", addTimeTable); | 1333 | // console.log("addTimeTable=====>", addTimeTable); |
| 1334 | if ((this.snackbar = true)) { | 1334 | if ((this.snackbar = true)) { |
| 1335 | this.text = "New Time Table added successfully"; | 1335 | this.text = "New Time Table added successfully"; |
| 1336 | } | 1336 | } |
| 1337 | this.color = "green"; | 1337 | this.color = "green"; |
| 1338 | // this.clear(); | 1338 | // this.clear(); |
| 1339 | http() | 1339 | http() |
| 1340 | .get("/getParticularClassTimeTable", { | 1340 | .get("/getParticularClassTimeTable", { |
| 1341 | params: { | 1341 | params: { |
| 1342 | classId: this.timeTable.select, | 1342 | classId: this.timeTable.select, |
| 1343 | sectionId: this.timeTable.selectSection, | 1343 | sectionId: this.timeTable.selectSection, |
| 1344 | }, | 1344 | }, |
| 1345 | }) | 1345 | }) |
| 1346 | .then((response) => { | 1346 | .then((response) => { |
| 1347 | this.desserts = response.data.data; | 1347 | this.desserts = response.data.data; |
| 1348 | this.showData = true; | 1348 | this.showData = true; |
| 1349 | this.loadingFindData = false; | 1349 | this.loadingFindData = false; |
| 1350 | }) | 1350 | }) |
| 1351 | .catch((error) => { | 1351 | .catch((error) => { |
| 1352 | this.loadingFindData = false; | 1352 | this.loadingFindData = false; |
| 1353 | this.snackbar = true; | 1353 | this.snackbar = true; |
| 1354 | this.text = error.response.data.message; | 1354 | this.text = error.response.data.message; |
| 1355 | this.text = error.response.data.statusText; | 1355 | this.text = error.response.data.statusText; |
| 1356 | }); | 1356 | }); |
| 1357 | this.addTimeTableDialog = false; | 1357 | this.addTimeTableDialog = false; |
| 1358 | this.loading = false; | 1358 | this.loading = false; |
| 1359 | }) | 1359 | }) |
| 1360 | .catch((error) => { | 1360 | .catch((error) => { |
| 1361 | // console.log(error); | 1361 | // console.log(error); |
| 1362 | if ((this.snackbar = true)) { | 1362 | if ((this.snackbar = true)) { |
| 1363 | this.text = error.response.data.message; | 1363 | this.text = error.response.data.message; |
| 1364 | } | 1364 | } |
| 1365 | this.loading = false; | 1365 | this.loading = false; |
| 1366 | }); | 1366 | }); |
| 1367 | } | 1367 | } |
| 1368 | }, | 1368 | }, |
| 1369 | clear() { | 1369 | clear() { |
| 1370 | this.$refs.form.reset(); | 1370 | this.$refs.form.reset(); |
| 1371 | }, | 1371 | }, |
| 1372 | clearLeactureData() { | 1372 | clearLeactureData() { |
| 1373 | this.$refs.lectureForm.reset(); | 1373 | this.$refs.lectureForm.reset(); |
| 1374 | }, | 1374 | }, |
| 1375 | save() { | 1375 | save() { |
| 1376 | let imageData = new FormData(); | 1376 | let imageData = new FormData(); |
| 1377 | imageData.append("upload", this.imageFile); | 1377 | imageData.append("upload", this.imageFile); |
| 1378 | // console.log(imageData); | 1378 | // console.log(imageData); |
| 1379 | let editTimeTable = { | 1379 | let editTimeTable = { |
| 1380 | timeTableId: this.editedItem._id, | 1380 | timeTableId: this.editedItem._id, |
| 1381 | classId: this.editedItem.classNum, | 1381 | classId: this.editedItem.classNum, |
| 1382 | sectionId: this.editedItem.selectSection, | 1382 | sectionId: this.editedItem.selectSection, |
| 1383 | // imageData | 1383 | // imageData |
| 1384 | }; | 1384 | }; |
| 1385 | http() | 1385 | http() |
| 1386 | .put("/updateTimeTable", editTimeTable) | 1386 | .put("/updateTimeTable", editTimeTable) |
| 1387 | .then((response) => { | 1387 | .then((response) => { |
| 1388 | // console.log("editTimeTable", editTimeTable); | 1388 | // console.log("editTimeTable", editTimeTable); |
| 1389 | if ((this.snackbar = true)) { | 1389 | if ((this.snackbar = true)) { |
| 1390 | this.text = "Successfully Edit Existing Time Table"; | 1390 | this.text = "Successfully Edit Existing Time Table"; |
| 1391 | this.color = "success"; | 1391 | this.color = "success"; |
| 1392 | } | 1392 | } |
| 1393 | http() | 1393 | http() |
| 1394 | .get("/getParticularClassTimeTable", { | 1394 | .get("/getParticularClassTimeTable", { |
| 1395 | params: { | 1395 | params: { |
| 1396 | classId: this.editedItem.classNum, | 1396 | classId: this.editedItem.classNum, |
| 1397 | sectionId: this.editedItem.selectSection, | 1397 | sectionId: this.editedItem.selectSection, |
| 1398 | }, | 1398 | }, |
| 1399 | }) | 1399 | }) |
| 1400 | .then((response) => { | 1400 | .then((response) => { |
| 1401 | this.desserts = response.data.data; | 1401 | this.desserts = response.data.data; |
| 1402 | this.showData = true; | 1402 | this.showData = true; |
| 1403 | this.loadingFindData = false; | 1403 | this.loadingFindData = false; |
| 1404 | }) | 1404 | }) |
| 1405 | .catch((error) => { | 1405 | .catch((error) => { |
| 1406 | this.loadingFindData = false; | 1406 | this.loadingFindData = false; |
| 1407 | this.snackbar = true; | 1407 | this.snackbar = true; |
| 1408 | this.text = error.response.data.message; | 1408 | this.text = error.response.data.message; |
| 1409 | this.text = error.response.data.statusText; | 1409 | this.text = error.response.data.statusText; |
| 1410 | }); | 1410 | }); |
| 1411 | }) | 1411 | }) |
| 1412 | .catch((error) => { | 1412 | .catch((error) => { |
| 1413 | // console.log(error); | 1413 | // console.log(error); |
| 1414 | if ((this.snackbar = true)) { | 1414 | if ((this.snackbar = true)) { |
| 1415 | this.text = error.response.data.message; | 1415 | this.text = error.response.data.message; |
| 1416 | } | 1416 | } |
| 1417 | }); | 1417 | }); |
| 1418 | this.close(); | 1418 | this.close(); |
| 1419 | }, | 1419 | }, |
| 1420 | deleteTimeTable(timeToDelete, deleteLectures) { | 1420 | deleteTimeTable(timeToDelete, deleteLectures) { |
| 1421 | let deleteLecture = { | 1421 | let deleteLecture = { |
| 1422 | lectureId: timeToDelete._id, | 1422 | lectureId: timeToDelete._id, |
| 1423 | }; | 1423 | }; |
| 1424 | http() | 1424 | http() |
| 1425 | .delete( | 1425 | .delete( |
| 1426 | "/deleteLecture", | 1426 | "/deleteLecture", |
| 1427 | confirm("Are you sure you want to delete this?") && { | 1427 | confirm("Are you sure you want to delete this?") && { |
| 1428 | params: deleteLecture, | 1428 | params: deleteLecture, |
| 1429 | } | 1429 | } |
| 1430 | ) | 1430 | ) |
| 1431 | .then((response) => { | 1431 | .then((response) => { |
| 1432 | if ((this.snackbar = true)) { | 1432 | if ((this.snackbar = true)) { |
| 1433 | this.text = "Successfully delete Existing Time Table"; | 1433 | this.text = "Successfully delete Existing Time Table"; |
| 1434 | } | 1434 | } |
| 1435 | const index = this.timeTableList.schedule.indexOf(deleteLectures); | 1435 | const index = this.timeTableList.schedule.indexOf(deleteLectures); |
| 1436 | for (let i = 0; i < this.timeTableList.schedule.length; i++) { | 1436 | for (let i = 0; i < this.timeTableList.schedule.length; i++) { |
| 1437 | this.timeTableList.schedule[i].lectures.splice(index, 1); | 1437 | this.timeTableList.schedule[i].lectures.splice(index, 1); |
| 1438 | } | 1438 | } |
| 1439 | }) | 1439 | }) |
| 1440 | .catch((error) => { | 1440 | .catch((error) => { |
| 1441 | // console.log(error); | 1441 | // console.log(error); |
| 1442 | this.snackbar = true; | 1442 | this.snackbar = true; |
| 1443 | this.color = "error"; | 1443 | this.color = "error"; |
| 1444 | this.text = error.response.data.message; | 1444 | this.text = error.response.data.message; |
| 1445 | }); | 1445 | }); |
| 1446 | }, | 1446 | }, |
| 1447 | addSchedule(id) { | 1447 | addSchedule(id) { |
| 1448 | this.scheduleDayId = id; | 1448 | this.scheduleDayId = id; |
| 1449 | this.dialogSchedule = true; | 1449 | this.dialogSchedule = true; |
| 1450 | }, | 1450 | }, |
| 1451 | submitSchedule() { | 1451 | submitSchedule() { |
| 1452 | if (this.$refs.formAddDay.validate()) { | 1452 | if (this.$refs.formAddDay.validate()) { |
| 1453 | let scheduleDayData = { | 1453 | let scheduleDayData = { |
| 1454 | timeTableId: this.scheduleDayId, | 1454 | timeTableId: this.scheduleDayId, |
| 1455 | day: this.schedule.selectDay, | 1455 | day: this.schedule.selectDay, |
| 1456 | }; | 1456 | }; |
| 1457 | http() | 1457 | http() |
| 1458 | .post("/addSchedule", scheduleDayData) | 1458 | .post("/addSchedule", scheduleDayData) |
| 1459 | .then((response) => { | 1459 | .then((response) => { |
| 1460 | this.snackbar = true; | 1460 | this.snackbar = true; |
| 1461 | this.text = "New Schedule Day added successfully"; | 1461 | this.text = "New Schedule Day added successfully"; |
| 1462 | this.dialogSchedule = false; | 1462 | this.dialogSchedule = false; |
| 1463 | this.loading = false; | 1463 | this.loading = false; |
| 1464 | this.getTimeTableDayData(); | 1464 | this.getTimeTableDayData(); |
| 1465 | }) | 1465 | }) |
| 1466 | .catch((error) => { | 1466 | .catch((error) => { |
| 1467 | // console.log(error); | 1467 | // console.log(error); |
| 1468 | this.snackbar = true; | 1468 | this.snackbar = true; |
| 1469 | this.text = error.response.data.message; | 1469 | this.text = error.response.data.message; |
| 1470 | this.loading = false; | 1470 | this.loading = false; |
| 1471 | }); | 1471 | }); |
| 1472 | } | 1472 | } |
| 1473 | }, | 1473 | }, |
| 1474 | displaySearch() { | 1474 | displaySearch() { |
| 1475 | (this.show = false), (this.showSearch = true); | 1475 | (this.show = false), (this.showSearch = true); |
| 1476 | }, | 1476 | }, |
| 1477 | closeSearch() { | 1477 | closeSearch() { |
| 1478 | this.showSearch = false; | 1478 | this.showSearch = false; |
| 1479 | this.show = true; | 1479 | this.show = true; |
| 1480 | this.search = ""; | 1480 | this.search = ""; |
| 1481 | }, | 1481 | }, |
| 1482 | }, | 1482 | }, |
| 1483 | mounted() { | 1483 | mounted() { |
| 1484 | // this.getTimeTableList(); | 1484 | // this.getTimeTableList(); |
| 1485 | var token = this.$store.state.token; | 1485 | var token = this.$store.state.token; |
| 1486 | http() | 1486 | http() |
| 1487 | .get("/getClassesList", { | 1487 | .get("/getClassesList", { |
| 1488 | headers: { Authorization: "Bearer " + token }, | 1488 | headers: { Authorization: "Bearer " + token }, |
| 1489 | }) | 1489 | }) |
| 1490 | .then((response) => { | 1490 | .then((response) => { |
| 1491 | this.addclass = response.data.data; | 1491 | this.addclass = response.data.data; |
| 1492 | // console.log("getClassesList=====>",this.addclass) | 1492 | // console.log("getClassesList=====>",this.addclass) |
| 1493 | }) | 1493 | }) |
| 1494 | .catch((error) => { | 1494 | .catch((error) => { |
| 1495 | this.showLoader = false; | 1495 | this.showLoader = false; |
| 1496 | if (error.response.status === 401) { | 1496 | if (error.response.status === 401) { |
| 1497 | this.$router.replace({ path: "/" }); | 1497 | this.$router.replace({ path: "/" }); |
| 1498 | this.$store.dispatch("setToken", null); | 1498 | this.$store.dispatch("setToken", null); |
| 1499 | this.$store.dispatch("Id", null); | 1499 | this.$store.dispatch("Id", null); |
| 1500 | this.$store.dispatch("Role", null); | 1500 | this.$store.dispatch("Role", null); |
| 1501 | } | 1501 | } |
| 1502 | }); | 1502 | }); |
| 1503 | 1503 | ||
| 1504 | http() | 1504 | http() |
| 1505 | .get("/getTeachersList", { | 1505 | .get("/getTeachersList", { |
| 1506 | headers: { Authorization: "Bearer " + token }, | 1506 | headers: { Authorization: "Bearer " + token }, |
| 1507 | }) | 1507 | }) |
| 1508 | .then((response) => { | 1508 | .then((response) => { |
| 1509 | this.addTeachers = response.data.data; | 1509 | this.addTeachers = response.data.data; |
| 1510 | // console.log("getClassesList=====>",this.addTeachers) | 1510 | // console.log("getClassesList=====>",this.addTeachers) |
| 1511 | }) | 1511 | }) |
| 1512 | .catch((error) => { | 1512 | .catch((error) => { |
| 1513 | this.showLoader = false; | 1513 | this.showLoader = false; |
| 1514 | if (error.response.status === 401) { | 1514 | if (error.response.status === 401) { |
| 1515 | this.$router.replace({ path: "/" }); | 1515 | this.$router.replace({ path: "/" }); |
| 1516 | this.$store.dispatch("setToken", null); | 1516 | this.$store.dispatch("setToken", null); |
| 1517 | this.$store.dispatch("Id", null); | 1517 | this.$store.dispatch("Id", null); |
| 1518 | this.$store.dispatch("Role", null); | 1518 | this.$store.dispatch("Role", null); |
| 1519 | } | 1519 | } |
| 1520 | }); | 1520 | }); |
| 1521 | }, | 1521 | }, |
| 1522 | }; | 1522 | }; |
| 1523 | </script> | 1523 | </script> |
src/pages/User/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT USERS DETAILS ****** --> | 3 | <!-- ****** EDIT USERS DETAILS ****** --> |
| 4 | <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent> | 4 | <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit User</label> | 8 | <label class="title text-xs-center">Edit User</label> |
| 9 | <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <v-avatar size="120px"> | 15 | <v-avatar size="120px"> |
| 16 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> | 16 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> |
| 17 | <img | 17 | <img |
| 18 | :src="editedItem.profilePicUrl" | 18 | :src="editedItem.profilePicUrl" |
| 19 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 19 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 20 | /> | 20 | /> |
| 21 | <img | 21 | <img |
| 22 | v-if="imageUrl" | 22 | v-if="imageUrl" |
| 23 | :src="imageUrl" | 23 | :src="imageUrl" |
| 24 | height="150" | 24 | height="150" |
| 25 | style="border-radius:50%; width:150px" | 25 | style="border-radius:50%; width:150px" |
| 26 | /> | 26 | /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | <input | 28 | <input |
| 29 | type="file" | 29 | type="file" |
| 30 | style="display:none" | 30 | style="display:none" |
| 31 | ref="image" | 31 | ref="image" |
| 32 | accept="image/*" | 32 | accept="image/*" |
| 33 | @change="onFilePicked" | 33 | @change="onFilePicked" |
| 34 | /> | 34 | /> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-layout> | 36 | </v-layout> |
| 37 | <v-layout wrap> | 37 | <v-layout wrap> |
| 38 | <v-flex xs12 sm6> | 38 | <v-flex xs12 sm6> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right">Name:</label> | 41 | <label class="right">Name:</label> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs8 class="ml-3"> | 43 | <v-flex xs8 class="ml-3"> |
| 44 | <v-text-field | 44 | <v-text-field |
| 45 | v-model="editedItem.name" | 45 | v-model="editedItem.name" |
| 46 | placeholder="fill your Name" | 46 | placeholder="fill your Name" |
| 47 | name="name" | 47 | name="name" |
| 48 | type="text" | 48 | type="text" |
| 49 | required | 49 | required |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | <v-flex xs12 sm6> | 54 | <v-flex xs12 sm6> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right">Email ID:</label> | 57 | <label class="right">Email ID:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 class="ml-3"> | 59 | <v-flex xs8 class="ml-3"> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | placeholder="fill your email" | 61 | placeholder="fill your email" |
| 62 | v-model="editedItem.email" | 62 | v-model="editedItem.email" |
| 63 | type="text" | 63 | type="text" |
| 64 | name="email" | 64 | name="email" |
| 65 | required | 65 | required |
| 66 | ></v-text-field> | 66 | ></v-text-field> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | <v-layout wrap> | 71 | <v-layout wrap> |
| 72 | <v-flex xs12 sm6> | 72 | <v-flex xs12 sm6> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 class="pt-4 subheading"> | 74 | <v-flex xs4 class="pt-4 subheading"> |
| 75 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 75 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 76 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 76 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 class="ml-3"> | 78 | <v-flex xs8 class="ml-3"> |
| 79 | <v-menu | 79 | <v-menu |
| 80 | ref="menu" | 80 | ref="menu" |
| 81 | :close-on-content-click="false" | 81 | :close-on-content-click="false" |
| 82 | v-model="menu2" | 82 | v-model="menu2" |
| 83 | :nudge-right="40" | 83 | :nudge-right="40" |
| 84 | lazy | 84 | lazy |
| 85 | transition="scale-transition" | 85 | transition="scale-transition" |
| 86 | offset-y | 86 | offset-y |
| 87 | full-width | 87 | full-width |
| 88 | min-width="290px" | 88 | min-width="290px" |
| 89 | > | 89 | > |
| 90 | <v-text-field | 90 | <v-text-field |
| 91 | slot="activator" | 91 | slot="activator" |
| 92 | v-model="editedItem.dob" | 92 | v-model="editedItem.dob" |
| 93 | placeholder="Select date" | 93 | placeholder="Select date" |
| 94 | ></v-text-field> | 94 | ></v-text-field> |
| 95 | <v-date-picker | 95 | <v-date-picker |
| 96 | ref="picker" | 96 | ref="picker" |
| 97 | v-model="editedItem.dob" | 97 | v-model="editedItem.dob" |
| 98 | :max="new Date().toISOString().substr(0, 10)" | 98 | :max="new Date().toISOString().substr(0, 10)" |
| 99 | min="1950-01-01" | 99 | min="1950-01-01" |
| 100 | @input="menu2 = false" | 100 | @input="menu2 = false" |
| 101 | ></v-date-picker> | 101 | ></v-date-picker> |
| 102 | </v-menu> | 102 | </v-menu> |
| 103 | </v-flex> | 103 | </v-flex> |
| 104 | </v-layout> | 104 | </v-layout> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | <v-flex xs12 sm6> | 106 | <v-flex xs12 sm6> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs4 class="pt-4 subheading"> | 108 | <v-flex xs4 class="pt-4 subheading"> |
| 109 | <label class="right">Gender:</label> | 109 | <label class="right">Gender:</label> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs8 class="ml-3"> | 111 | <v-flex xs8 class="ml-3"> |
| 112 | <v-select | 112 | <v-select |
| 113 | :items="gender" | 113 | :items="gender" |
| 114 | v-model="editedItem.gender" | 114 | v-model="editedItem.gender" |
| 115 | label="Select gender" | 115 | label="Select gender" |
| 116 | name="gender" | 116 | name="gender" |
| 117 | required | 117 | required |
| 118 | ></v-select> | 118 | ></v-select> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-layout wrap> | 123 | <v-layout wrap> |
| 124 | <v-flex xs12 sm6> | 124 | <v-flex xs12 sm6> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-flex xs4 class="pt-4 subheading"> | 126 | <v-flex xs4 class="pt-4 subheading"> |
| 127 | <label class="right">Religion:</label> | 127 | <label class="right">Religion:</label> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | <v-flex xs8 class="ml-3"> | 129 | <v-flex xs8 class="ml-3"> |
| 130 | <v-text-field | 130 | <v-text-field |
| 131 | v-model="editedItem.religion" | 131 | v-model="editedItem.religion" |
| 132 | placeholder="fill your Religion" | 132 | placeholder="fill your Religion" |
| 133 | name="religion" | 133 | name="religion" |
| 134 | type="text" | 134 | type="text" |
| 135 | required | 135 | required |
| 136 | ></v-text-field> | 136 | ></v-text-field> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs12 sm6> | 140 | <v-flex xs12 sm6> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">JoiningDate:</label> | 143 | <label class="right">JoiningDate:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs8 class="ml-3"> | 145 | <v-flex xs8 class="ml-3"> |
| 146 | <v-menu | 146 | <v-menu |
| 147 | ref="menu" | 147 | ref="menu" |
| 148 | :close-on-content-click="false" | 148 | :close-on-content-click="false" |
| 149 | v-model="menu3" | 149 | v-model="menu3" |
| 150 | :nudge-right="40" | 150 | :nudge-right="40" |
| 151 | lazy | 151 | lazy |
| 152 | transition="scale-transition" | 152 | transition="scale-transition" |
| 153 | offset-y | 153 | offset-y |
| 154 | full-width | 154 | full-width |
| 155 | min-width="290px" | 155 | min-width="290px" |
| 156 | > | 156 | > |
| 157 | <v-text-field | 157 | <v-text-field |
| 158 | slot="activator" | 158 | slot="activator" |
| 159 | v-model="editedItem.joiningDate" | 159 | v-model="editedItem.joiningDate" |
| 160 | placeholder="Select date" | 160 | placeholder="Select date" |
| 161 | ></v-text-field> | 161 | ></v-text-field> |
| 162 | <v-date-picker | 162 | <v-date-picker |
| 163 | ref="picker" | 163 | ref="picker" |
| 164 | v-model="editedItem.joiningDate" | 164 | v-model="editedItem.joiningDate" |
| 165 | :max="new Date().toISOString().substr(0, 10)" | 165 | :max="new Date().toISOString().substr(0, 10)" |
| 166 | min="1950-01-01" | 166 | min="1950-01-01" |
| 167 | @input="menu3 = false" | 167 | @input="menu3 = false" |
| 168 | ></v-date-picker> | 168 | ></v-date-picker> |
| 169 | </v-menu> | 169 | </v-menu> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout wrap> | 174 | <v-layout wrap> |
| 175 | <!-- EDIT DETAILS - PHONE NUMBER --> | 175 | <!-- EDIT DETAILS - PHONE NUMBER --> |
| 176 | <v-flex xs12 sm6> | 176 | <v-flex xs12 sm6> |
| 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">Phone:</label> | 179 | <label class="right">Phone:</label> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | <v-flex xs8 class="ml-3"> | 181 | <v-flex xs8 class="ml-3"> |
| 182 | <v-layout row wrap> | 182 | <v-layout row wrap> |
| 183 | <v-flex xs3 class="mt-3"> | 183 | <v-flex xs3 class="mt-3"> |
| 184 | <vue-country-code @onSelect="editPhoneNumberCode" class="black--text"></vue-country-code> | 184 | <vue-country-code @onSelect="editPhoneNumberCode" class="black--text"></vue-country-code> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | <v-flex xs9> | 186 | <v-flex xs9> |
| 187 | <v-text-field | 187 | <v-text-field |
| 188 | v-model="editedItem.phone" | 188 | v-model="editedItem.phone" |
| 189 | placeholder="Fill MobileNo" | 189 | placeholder="Fill MobileNo" |
| 190 | name="mobileNo" | 190 | name="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-layout> | 197 | </v-layout> |
| 198 | </v-flex> | 198 | </v-flex> |
| 199 | <v-flex xs12 sm6> | 199 | <v-flex xs12 sm6> |
| 200 | <v-layout> | 200 | <v-layout> |
| 201 | <v-flex xs4 class="pt-4 subheading"> | 201 | <v-flex xs4 class="pt-4 subheading"> |
| 202 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> | 202 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> |
| 203 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 203 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | <v-flex xs8 class="ml-3"> | 205 | <v-flex xs8 class="ml-3"> |
| 206 | <v-autocomplete | 206 | <v-autocomplete |
| 207 | v-model="editedItem.role" | 207 | v-model="editedItem.role" |
| 208 | :label="editedItem.role" | 208 | :label="editedItem.role" |
| 209 | :items="userRole" | 209 | :items="userRole" |
| 210 | item-text="name" | 210 | item-text="name" |
| 211 | item-value="role" | 211 | item-value="role" |
| 212 | required | 212 | required |
| 213 | ></v-autocomplete> | 213 | ></v-autocomplete> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | </v-layout> | 217 | </v-layout> |
| 218 | <v-layout wrap> | 218 | <v-layout wrap> |
| 219 | <v-flex xs12 sm6> | 219 | <v-flex xs12 sm6> |
| 220 | <v-layout> | 220 | <v-layout> |
| 221 | <v-flex xs4 class="pt-4 subheading"> | 221 | <v-flex xs4 class="pt-4 subheading"> |
| 222 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> | 222 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> |
| 223 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> | 223 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | <v-flex xs8 class="ml-3"> | 225 | <v-flex xs8 class="ml-3"> |
| 226 | <v-text-field | 226 | <v-text-field |
| 227 | label="Select Image" | 227 | label="Select Image" |
| 228 | @click="pickFile" | 228 | @click="pickFile" |
| 229 | v-model="imageName" | 229 | v-model="imageName" |
| 230 | append-icon="attach_file" | 230 | append-icon="attach_file" |
| 231 | ></v-text-field> | 231 | ></v-text-field> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | <v-flex xs12 sm6> | 235 | <v-flex xs12 sm6> |
| 236 | <v-layout> | 236 | <v-layout> |
| 237 | <v-flex xs4 class="pt-4 subheading"> | 237 | <v-flex xs4 class="pt-4 subheading"> |
| 238 | <label class="right">Address:</label> | 238 | <label class="right">Address:</label> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex xs8 class="ml-3"> | 240 | <v-flex xs8 class="ml-3"> |
| 241 | <v-text-field | 241 | <v-text-field |
| 242 | name="input-4-3" | 242 | name="input-4-3" |
| 243 | v-model="editedItem.address" | 243 | v-model="editedItem.address" |
| 244 | placeholder="fill Your Address" | 244 | placeholder="fill Your Address" |
| 245 | required | 245 | required |
| 246 | ></v-text-field> | 246 | ></v-text-field> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | </v-layout> | 248 | </v-layout> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | </v-layout> | 250 | </v-layout> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-flex xs12 sm12> | 252 | <v-flex xs12 sm12> |
| 253 | <v-card-actions class="hidden-sm-only hidden-xs-only"> | 253 | <v-card-actions class="hidden-sm-only hidden-xs-only"> |
| 254 | <v-spacer></v-spacer> | 254 | <v-spacer></v-spacer> |
| 255 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 255 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 256 | </v-card-actions> | 256 | </v-card-actions> |
| 257 | <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> | 257 | <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 258 | <v-spacer></v-spacer> | 258 | <v-spacer></v-spacer> |
| 259 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 259 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 260 | <v-spacer></v-spacer> | 260 | <v-spacer></v-spacer> |
| 261 | </v-card-actions> | 261 | </v-card-actions> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | </v-layout> | 263 | </v-layout> |
| 264 | </v-card-text> | 264 | </v-card-text> |
| 265 | </v-card> | 265 | </v-card> |
| 266 | </v-dialog> | 266 | </v-dialog> |
| 267 | <!-- ****** PROFILE User DETAILS ****** --> | 267 | <!-- ****** PROFILE User DETAILS ****** --> |
| 268 | <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent> | 268 | <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent> |
| 269 | <v-card flat class="card-style pa-3" dark> | 269 | <v-card flat class="Card-style pa-3"> |
| 270 | <v-layout> | 270 | <v-layout> |
| 271 | <v-flex xs12> | 271 | <v-flex xs12> |
| 272 | <label class="title text-xs-center">View User</label> | 272 | <label class="title text-xs-center">View User</label> |
| 273 | <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> | 273 | <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> |
| 274 | </v-flex> | 274 | </v-flex> |
| 275 | </v-layout> | 275 | </v-layout> |
| 276 | <v-card-text> | 276 | <v-card-text> |
| 277 | <v-container grid-list-md> | 277 | <v-container grid-list-md> |
| 278 | <v-layout wrap> | 278 | <v-layout wrap> |
| 279 | <v-flex> | 279 | <v-flex> |
| 280 | <v-flex align-center justify-center layout text-xs-center> | 280 | <v-flex align-center justify-center layout text-xs-center> |
| 281 | <v-avatar size="100px"> | 281 | <v-avatar size="100px"> |
| 282 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 282 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 283 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 283 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 284 | </v-avatar> | 284 | </v-avatar> |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-flex xs4 sm6> | 287 | <v-flex xs4 sm6> |
| 288 | <h5 class="right my-1"> | 288 | <h5 class="right my-1"> |
| 289 | <b>Name:</b> | 289 | <b>Name:</b> |
| 290 | </h5> | 290 | </h5> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | <v-flex sm6 xs8> | 292 | <v-flex sm6 xs8> |
| 293 | <h5 class="my-1">{{ editedItem.name }}</h5> | 293 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs4 sm6> | 297 | <v-flex xs4 sm6> |
| 298 | <h5 class="right my-1"> | 298 | <h5 class="right my-1"> |
| 299 | <b>Email:</b> | 299 | <b>Email:</b> |
| 300 | </h5> | 300 | </h5> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | <v-flex sm6 xs8> | 302 | <v-flex sm6 xs8> |
| 303 | <h5 class="my-1">{{ editedItem.email }}</h5> | 303 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | </v-layout> | 305 | </v-layout> |
| 306 | <v-layout> | 306 | <v-layout> |
| 307 | <v-flex xs4 sm6> | 307 | <v-flex xs4 sm6> |
| 308 | <h5 class="right my-1"> | 308 | <h5 class="right my-1"> |
| 309 | <b>Gender:</b> | 309 | <b>Gender:</b> |
| 310 | </h5> | 310 | </h5> |
| 311 | </v-flex> | 311 | </v-flex> |
| 312 | <v-flex sm6 xs8> | 312 | <v-flex sm6 xs8> |
| 313 | <h5 class="my-1">{{ editedItem.gender }}</h5> | 313 | <h5 class="my-1">{{ editedItem.gender }}</h5> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | </v-layout> | 315 | </v-layout> |
| 316 | <v-layout> | 316 | <v-layout> |
| 317 | <v-flex xs4 sm6> | 317 | <v-flex xs4 sm6> |
| 318 | <h5 class="right my-1"> | 318 | <h5 class="right my-1"> |
| 319 | <b>Religion:</b> | 319 | <b>Religion:</b> |
| 320 | </h5> | 320 | </h5> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | <v-flex sm6 xs8> | 322 | <v-flex sm6 xs8> |
| 323 | <h5 class="my-1">{{ editedItem.religion }}</h5> | 323 | <h5 class="my-1">{{ editedItem.religion }}</h5> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | <v-layout> | 326 | <v-layout> |
| 327 | <v-flex xs4 sm6> | 327 | <v-flex xs4 sm6> |
| 328 | <h5 class="right my-1"> | 328 | <h5 class="right my-1"> |
| 329 | <b>Role:</b> | 329 | <b>Role:</b> |
| 330 | </h5> | 330 | </h5> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex sm6 xs8> | 332 | <v-flex sm6 xs8> |
| 333 | <h5 class="my-1">{{ editedItem.role }}</h5> | 333 | <h5 class="my-1">{{ editedItem.role }}</h5> |
| 334 | </v-flex> | 334 | </v-flex> |
| 335 | </v-layout> | 335 | </v-layout> |
| 336 | <v-layout> | 336 | <v-layout> |
| 337 | <v-flex xs4 sm6> | 337 | <v-flex xs4 sm6> |
| 338 | <h5 class="right my-1"> | 338 | <h5 class="right my-1"> |
| 339 | <b>Phone:</b> | 339 | <b>Phone:</b> |
| 340 | </h5> | 340 | </h5> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | <v-flex sm6 xs8> | 342 | <v-flex sm6 xs8> |
| 343 | <h5 class="my-1">{{ editedItem.phone }}</h5> | 343 | <h5 class="my-1">{{ editedItem.phone }}</h5> |
| 344 | </v-flex> | 344 | </v-flex> |
| 345 | </v-layout> | 345 | </v-layout> |
| 346 | <v-layout> | 346 | <v-layout> |
| 347 | <v-flex xs4 sm6> | 347 | <v-flex xs4 sm6> |
| 348 | <h5 class="right my-1"> | 348 | <h5 class="right my-1"> |
| 349 | <b>JoiningDate:</b> | 349 | <b>JoiningDate:</b> |
| 350 | </h5> | 350 | </h5> |
| 351 | </v-flex> | 351 | </v-flex> |
| 352 | <v-flex sm6 xs8> | 352 | <v-flex sm6 xs8> |
| 353 | <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> | 353 | <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> |
| 354 | </v-flex> | 354 | </v-flex> |
| 355 | </v-layout> | 355 | </v-layout> |
| 356 | <v-layout> | 356 | <v-layout> |
| 357 | <v-flex xs4 sm6> | 357 | <v-flex xs4 sm6> |
| 358 | <h5 class="right my-1"> | 358 | <h5 class="right my-1"> |
| 359 | <label class="right hidden-sm-only hidden-xs-only"> | 359 | <label class="right hidden-sm-only hidden-xs-only"> |
| 360 | <b>Date of Birth:</b> | 360 | <b>Date of Birth:</b> |
| 361 | </label> | 361 | </label> |
| 362 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> | 362 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> |
| 363 | <b>D.O.B:</b> | 363 | <b>D.O.B:</b> |
| 364 | </label> | 364 | </label> |
| 365 | </h5> | 365 | </h5> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | <v-flex sm6 xs8> | 367 | <v-flex sm6 xs8> |
| 368 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 368 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | </v-layout> | 370 | </v-layout> |
| 371 | <v-layout> | 371 | <v-layout> |
| 372 | <v-flex xs4 sm6> | 372 | <v-flex xs4 sm6> |
| 373 | <h5 class="right my-1"> | 373 | <h5 class="right my-1"> |
| 374 | <b>Address:</b> | 374 | <b>Address:</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.address }}</h5> | 378 | <h5 class="my-1">{{ editedItem.address }}</h5> |
| 379 | </v-flex> | 379 | </v-flex> |
| 380 | </v-layout> | 380 | </v-layout> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | </v-container> | 383 | </v-container> |
| 384 | </v-card-text> | 384 | </v-card-text> |
| 385 | </v-card> | 385 | </v-card> |
| 386 | </v-dialog> | 386 | </v-dialog> |
| 387 | 387 | ||
| 388 | <!-- ****** EXISTING-USER TABLE DATA****** --> | 388 | <!-- ****** EXISTING-USER TABLE DATA****** --> |
| 389 | <v-toolbar color="transparent" flat> | 389 | <v-toolbar color="transparent" flat> |
| 390 | <v-btn | 390 | <v-btn |
| 391 | fab | 391 | fab |
| 392 | dark | 392 | dark |
| 393 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 393 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 394 | small | 394 | small |
| 395 | @click="addUserDialog = true" | 395 | @click="addUserDialog = true" |
| 396 | > | 396 | > |
| 397 | <v-icon dark>add</v-icon> | 397 | <v-icon dark>add</v-icon> |
| 398 | </v-btn> | 398 | </v-btn> |
| 399 | <v-btn | 399 | <v-btn |
| 400 | round | 400 | round |
| 401 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 401 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 402 | dark | 402 | dark |
| 403 | @click="addUserDialog = true" | 403 | @click="addUserDialog = true" |
| 404 | > | 404 | > |
| 405 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add User | 405 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add User |
| 406 | </v-btn> | 406 | </v-btn> |
| 407 | <v-spacer></v-spacer> | 407 | <v-spacer></v-spacer> |
| 408 | <v-card-title class="body-1" v-show="show"> | 408 | <v-card-title class="body-1" v-show="show"> |
| 409 | <v-btn icon large flat @click="displaySearch"> | 409 | <v-btn icon large flat @click="displaySearch"> |
| 410 | <v-avatar size="27"> | 410 | <v-avatar size="27"> |
| 411 | <img src="/static/icon/search.png" alt="icon" /> | 411 | <img src="/static/icon/search.png" alt="icon" /> |
| 412 | </v-avatar> | 412 | </v-avatar> |
| 413 | </v-btn> | 413 | </v-btn> |
| 414 | </v-card-title> | 414 | </v-card-title> |
| 415 | <v-flex xs8 sm8 lg2 md3 v-if="showSearch"> | 415 | <v-flex xs8 sm8 lg2 md3 v-if="showSearch"> |
| 416 | <v-layout> | 416 | <v-layout> |
| 417 | <v-text-field | 417 | <v-text-field |
| 418 | autofocus | 418 | autofocus |
| 419 | v-model="search" | 419 | v-model="search" |
| 420 | label="Search" | 420 | label="Search" |
| 421 | prepend-inner-icon="search" | 421 | prepend-inner-icon="search" |
| 422 | color="primary" | 422 | color="primary" |
| 423 | ></v-text-field> | 423 | ></v-text-field> |
| 424 | <v-icon @click="closeSearch" color="error">close</v-icon> | 424 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 425 | </v-layout> | 425 | </v-layout> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | </v-toolbar> | 427 | </v-toolbar> |
| 428 | <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> | 428 | <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> |
| 429 | <template slot="items" slot-scope="props"> | 429 | <template slot="items" slot-scope="props"> |
| 430 | <td class="td td-row">{{ props.index + 1 }}</td> | 430 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 431 | <td class="td td-row text-xs-center"> | 431 | <td class="td td-row text-xs-center"> |
| 432 | <v-avatar size="40"> | 432 | <v-avatar size="40"> |
| 433 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 433 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 434 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 434 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 435 | </v-avatar> | 435 | </v-avatar> |
| 436 | </td> | 436 | </td> |
| 437 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 437 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 438 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 438 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 439 | <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> | 439 | <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> |
| 440 | <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> | 440 | <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> |
| 441 | <td class="text-xs-center td td-row">{{ props.item.phone }}</td> | 441 | <td class="text-xs-center td td-row">{{ props.item.phone }}</td> |
| 442 | <td class="text-xs-center td td-row"> | 442 | <td class="text-xs-center td td-row"> |
| 443 | <v-switch | 443 | <v-switch |
| 444 | class="pl-3" | 444 | class="pl-3" |
| 445 | v-model="props.item.status" | 445 | v-model="props.item.status" |
| 446 | @change="suspendStatus(props.item.status,props.item._id)" | 446 | @change="suspendStatus(props.item.status,props.item._id)" |
| 447 | ></v-switch> | 447 | ></v-switch> |
| 448 | </td> | 448 | </td> |
| 449 | <td class="text-xs-center td td-row"> | 449 | <td class="text-xs-center td td-row"> |
| 450 | <span> | 450 | <span> |
| 451 | <v-tooltip top> | 451 | <v-tooltip top> |
| 452 | <img | 452 | <img |
| 453 | slot="activator" | 453 | slot="activator" |
| 454 | style="cursor:pointer; width:25px; height:25px; " | 454 | style="cursor:pointer; width:25px; height:25px; " |
| 455 | class="mr-3" | 455 | class="mr-3" |
| 456 | @click="profile(props.item)" | 456 | @click="profile(props.item)" |
| 457 | src="/static/icon/view.png" | 457 | src="/static/icon/view.png" |
| 458 | /> | 458 | /> |
| 459 | <span>View</span> | 459 | <span>View</span> |
| 460 | </v-tooltip> | 460 | </v-tooltip> |
| 461 | <v-tooltip top> | 461 | <v-tooltip top> |
| 462 | <img | 462 | <img |
| 463 | slot="activator" | 463 | slot="activator" |
| 464 | style="cursor:pointer; width:20px; height:18px; " | 464 | style="cursor:pointer; width:20px; height:18px; " |
| 465 | class="mr-3" | 465 | class="mr-3" |
| 466 | @click="editItem(props.item)" | 466 | @click="editItem(props.item)" |
| 467 | src="/static/icon/edit.png" | 467 | src="/static/icon/edit.png" |
| 468 | /> | 468 | /> |
| 469 | <span>Edit</span> | 469 | <span>Edit</span> |
| 470 | </v-tooltip> | 470 | </v-tooltip> |
| 471 | <!-- <v-tooltip top> | 471 | <!-- <v-tooltip top> |
| 472 | <img | 472 | <img |
| 473 | slot="activator" | 473 | slot="activator" |
| 474 | style="cursor:pointer; width:20px; height:20px; " | 474 | style="cursor:pointer; width:20px; height:20px; " |
| 475 | class="mr-3" | 475 | class="mr-3" |
| 476 | @click="deleteItem(props.item)" | 476 | @click="deleteItem(props.item)" |
| 477 | src="/static/icon/delete.png" | 477 | src="/static/icon/delete.png" |
| 478 | /> | 478 | /> |
| 479 | <span>Delete</span> | 479 | <span>Delete</span> |
| 480 | </v-tooltip>--> | 480 | </v-tooltip>--> |
| 481 | </span> | 481 | </span> |
| 482 | </td> | 482 | </td> |
| 483 | </template> | 483 | </template> |
| 484 | <v-alert | 484 | <v-alert |
| 485 | slot="no-results" | 485 | slot="no-results" |
| 486 | :value="true" | 486 | :value="true" |
| 487 | color="error" | 487 | color="error" |
| 488 | icon="warning" | 488 | icon="warning" |
| 489 | >Your search for "{{ search }}" found no results.</v-alert> | 489 | >Your search for "{{ search }}" found no results.</v-alert> |
| 490 | </v-data-table> | 490 | </v-data-table> |
| 491 | <!-- DIALOG BOX - Add User Data --> | 491 | <!-- DIALOG BOX - Add User Data --> |
| 492 | <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent> | 492 | <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent> |
| 493 | <v-card flat class="card-style pa-2" dark> | 493 | <v-card flat class="Card-style pa-2"> |
| 494 | <v-layout> | 494 | <v-layout> |
| 495 | <v-flex xs12> | 495 | <v-flex xs12> |
| 496 | <label class="title text-xs-center">Add User</label> | 496 | <label class="title text-xs-center">Add User</label> |
| 497 | <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon> | 497 | <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon> |
| 498 | </v-flex> | 498 | </v-flex> |
| 499 | </v-layout> | 499 | </v-layout> |
| 500 | <v-form ref="form" v-model="valid" lazy-validation> | 500 | <v-form ref="form" v-model="valid" lazy-validation> |
| 501 | <v-container fluid> | 501 | <v-container fluid> |
| 502 | <v-layout> | 502 | <v-layout> |
| 503 | <v-flex | 503 | <v-flex |
| 504 | xs12 | 504 | xs12 |
| 505 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 505 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 506 | > | 506 | > |
| 507 | <v-avatar size="80px"> | 507 | <v-avatar size="80px"> |
| 508 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 508 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 509 | </v-avatar> | 509 | </v-avatar> |
| 510 | <img | 510 | <img |
| 511 | :src="imageUrl" | 511 | :src="imageUrl" |
| 512 | height="150" | 512 | height="150" |
| 513 | v-if="imageUrl" | 513 | v-if="imageUrl" |
| 514 | style="border-radius:50%; width:150px" | 514 | style="border-radius:50%; width:150px" |
| 515 | /> | 515 | /> |
| 516 | </v-flex> | 516 | </v-flex> |
| 517 | </v-layout> | 517 | </v-layout> |
| 518 | <v-layout> | 518 | <v-layout> |
| 519 | <v-flex xs12 sm6> | 519 | <v-flex xs12 sm6> |
| 520 | <v-layout> | 520 | <v-layout> |
| 521 | <v-flex xs4 class="pt-4 subheading"> | 521 | <v-flex xs4 class="pt-4 subheading"> |
| 522 | <label class="right">Name:</label> | 522 | <label class="right">Name:</label> |
| 523 | </v-flex> | 523 | </v-flex> |
| 524 | <v-flex xs8 class="ml-3"> | 524 | <v-flex xs8 class="ml-3"> |
| 525 | <v-text-field | 525 | <v-text-field |
| 526 | v-model="addUser.name" | 526 | v-model="addUser.name" |
| 527 | placeholder="fill your Name" | 527 | placeholder="fill your Name" |
| 528 | name="name" | 528 | name="name" |
| 529 | type="text" | 529 | type="text" |
| 530 | :rules="nameRules" | 530 | :rules="nameRules" |
| 531 | required | 531 | required |
| 532 | ></v-text-field> | 532 | ></v-text-field> |
| 533 | </v-flex> | 533 | </v-flex> |
| 534 | </v-layout> | 534 | </v-layout> |
| 535 | </v-flex> | 535 | </v-flex> |
| 536 | <v-flex xs12 sm6> | 536 | <v-flex xs12 sm6> |
| 537 | <v-layout> | 537 | <v-layout> |
| 538 | <v-flex xs4 class="pt-4 subheading"> | 538 | <v-flex xs4 class="pt-4 subheading"> |
| 539 | <label class="right">Email ID:</label> | 539 | <label class="right">Email ID:</label> |
| 540 | </v-flex> | 540 | </v-flex> |
| 541 | <v-flex xs8 class="ml-3"> | 541 | <v-flex xs8 class="ml-3"> |
| 542 | <v-text-field | 542 | <v-text-field |
| 543 | placeholder="fill your email" | 543 | placeholder="fill your email" |
| 544 | :rules="emailRules" | 544 | :rules="emailRules" |
| 545 | v-model="addUser.email" | 545 | v-model="addUser.email" |
| 546 | type="text" | 546 | type="text" |
| 547 | name="email" | 547 | name="email" |
| 548 | required | 548 | required |
| 549 | ></v-text-field> | 549 | ></v-text-field> |
| 550 | </v-flex> | 550 | </v-flex> |
| 551 | </v-layout> | 551 | </v-layout> |
| 552 | </v-flex> | 552 | </v-flex> |
| 553 | </v-layout> | 553 | </v-layout> |
| 554 | <v-layout> | 554 | <v-layout> |
| 555 | <v-flex xs12 sm6> | 555 | <v-flex xs12 sm6> |
| 556 | <v-layout> | 556 | <v-layout> |
| 557 | <v-flex xs4 class="pt-4 subheading"> | 557 | <v-flex xs4 class="pt-4 subheading"> |
| 558 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 558 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 559 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 559 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 560 | </v-flex> | 560 | </v-flex> |
| 561 | <v-flex xs8 class="ml-3"> | 561 | <v-flex xs8 class="ml-3"> |
| 562 | <v-menu | 562 | <v-menu |
| 563 | ref="menu" | 563 | ref="menu" |
| 564 | :close-on-content-click="false" | 564 | :close-on-content-click="false" |
| 565 | v-model="menu" | 565 | v-model="menu" |
| 566 | :nudge-right="40" | 566 | :nudge-right="40" |
| 567 | lazy | 567 | lazy |
| 568 | transition="scale-transition" | 568 | transition="scale-transition" |
| 569 | offset-y | 569 | offset-y |
| 570 | full-width | 570 | full-width |
| 571 | min-width="290px" | 571 | min-width="290px" |
| 572 | > | 572 | > |
| 573 | <v-text-field | 573 | <v-text-field |
| 574 | slot="activator" | 574 | slot="activator" |
| 575 | :rules="dateRules" | 575 | :rules="dateRules" |
| 576 | v-model="addUser.dob" | 576 | v-model="addUser.dob" |
| 577 | placeholder="Select DOB" | 577 | placeholder="Select DOB" |
| 578 | ></v-text-field> | 578 | ></v-text-field> |
| 579 | <v-date-picker | 579 | <v-date-picker |
| 580 | ref="picker" | 580 | ref="picker" |
| 581 | v-model="addUser.dob" | 581 | v-model="addUser.dob" |
| 582 | :max="new Date().toISOString().substr(0, 10)" | 582 | :max="new Date().toISOString().substr(0, 10)" |
| 583 | min="1950-01-01" | 583 | min="1950-01-01" |
| 584 | @input="menu = false" | 584 | @input="menu = false" |
| 585 | ></v-date-picker> | 585 | ></v-date-picker> |
| 586 | </v-menu> | 586 | </v-menu> |
| 587 | </v-flex> | 587 | </v-flex> |
| 588 | </v-layout> | 588 | </v-layout> |
| 589 | </v-flex> | 589 | </v-flex> |
| 590 | <v-flex xs12 sm6> | 590 | <v-flex xs12 sm6> |
| 591 | <v-layout> | 591 | <v-layout> |
| 592 | <v-flex xs4 class="pt-4 subheading"> | 592 | <v-flex xs4 class="pt-4 subheading"> |
| 593 | <label class="right">Gender:</label> | 593 | <label class="right">Gender:</label> |
| 594 | </v-flex> | 594 | </v-flex> |
| 595 | <v-flex xs8 class="ml-3"> | 595 | <v-flex xs8 class="ml-3"> |
| 596 | <v-select | 596 | <v-select |
| 597 | v-model="addUser.gender" | 597 | v-model="addUser.gender" |
| 598 | :items="gender" | 598 | :items="gender" |
| 599 | label="Selct Gender " | 599 | label="Selct Gender " |
| 600 | :rules="genderRules" | 600 | :rules="genderRules" |
| 601 | required | 601 | required |
| 602 | ></v-select> | 602 | ></v-select> |
| 603 | </v-flex> | 603 | </v-flex> |
| 604 | </v-layout> | 604 | </v-layout> |
| 605 | </v-flex> | 605 | </v-flex> |
| 606 | </v-layout> | 606 | </v-layout> |
| 607 | <v-layout> | 607 | <v-layout> |
| 608 | <v-flex xs12 sm6> | 608 | <v-flex xs12 sm6> |
| 609 | <v-layout> | 609 | <v-layout> |
| 610 | <v-flex xs4 class="pt-4 subheading"> | 610 | <v-flex xs4 class="pt-4 subheading"> |
| 611 | <label class="right">Religion:</label> | 611 | <label class="right">Religion:</label> |
| 612 | </v-flex> | 612 | </v-flex> |
| 613 | <v-flex xs8 class="ml-3"> | 613 | <v-flex xs8 class="ml-3"> |
| 614 | <v-text-field | 614 | <v-text-field |
| 615 | v-model="addUser.religion" | 615 | v-model="addUser.religion" |
| 616 | placeholder="fill your Religion" | 616 | placeholder="fill your Religion" |
| 617 | name="Religion" | 617 | name="Religion" |
| 618 | type="text" | 618 | type="text" |
| 619 | :rules="religionRules" | 619 | :rules="religionRules" |
| 620 | required | 620 | required |
| 621 | ></v-text-field> | 621 | ></v-text-field> |
| 622 | </v-flex> | 622 | </v-flex> |
| 623 | </v-layout> | 623 | </v-layout> |
| 624 | </v-flex> | 624 | </v-flex> |
| 625 | <v-flex xs12 sm6> | 625 | <v-flex xs12 sm6> |
| 626 | <v-layout> | 626 | <v-layout> |
| 627 | <v-flex xs4 class="pt-4 subheading"> | 627 | <v-flex xs4 class="pt-4 subheading"> |
| 628 | <label class="right">JoiningDate:</label> | 628 | <label class="right">JoiningDate:</label> |
| 629 | </v-flex> | 629 | </v-flex> |
| 630 | <v-flex xs8 class="ml-3"> | 630 | <v-flex xs8 class="ml-3"> |
| 631 | <v-menu | 631 | <v-menu |
| 632 | ref="menu1" | 632 | ref="menu1" |
| 633 | :close-on-content-click="false" | 633 | :close-on-content-click="false" |
| 634 | v-model="menu1" | 634 | v-model="menu1" |
| 635 | :nudge-right="40" | 635 | :nudge-right="40" |
| 636 | lazy | 636 | lazy |
| 637 | transition="scale-transition" | 637 | transition="scale-transition" |
| 638 | offset-y | 638 | offset-y |
| 639 | full-width | 639 | full-width |
| 640 | min-width="290px" | 640 | min-width="290px" |
| 641 | > | 641 | > |
| 642 | <v-text-field | 642 | <v-text-field |
| 643 | slot="activator" | 643 | slot="activator" |
| 644 | :rules="joinDateRules" | 644 | :rules="joinDateRules" |
| 645 | v-model="addUser.joinDate" | 645 | v-model="addUser.joinDate" |
| 646 | placeholder="Select date" | 646 | placeholder="Select date" |
| 647 | ></v-text-field> | 647 | ></v-text-field> |
| 648 | <v-date-picker | 648 | <v-date-picker |
| 649 | ref="picker" | 649 | ref="picker" |
| 650 | v-model="addUser.joinDate" | 650 | v-model="addUser.joinDate" |
| 651 | :max="new Date().toISOString().substr(0, 10)" | 651 | :max="new Date().toISOString().substr(0, 10)" |
| 652 | min="1950-01-01" | 652 | min="1950-01-01" |
| 653 | @input="menu1 = false" | 653 | @input="menu1 = false" |
| 654 | ></v-date-picker> | 654 | ></v-date-picker> |
| 655 | </v-menu> | 655 | </v-menu> |
| 656 | </v-flex> | 656 | </v-flex> |
| 657 | </v-layout> | 657 | </v-layout> |
| 658 | </v-flex> | 658 | </v-flex> |
| 659 | </v-layout> | 659 | </v-layout> |
| 660 | <v-layout> | 660 | <v-layout> |
| 661 | <!-- ADD PHONE NUMBER --> | 661 | <!-- ADD PHONE NUMBER --> |
| 662 | <v-flex xs12 sm6> | 662 | <v-flex xs12 sm6> |
| 663 | <v-layout> | 663 | <v-layout> |
| 664 | <v-flex xs4 class="pt-4 subheading"> | 664 | <v-flex xs4 class="pt-4 subheading"> |
| 665 | <label class="right">Phone :</label> | 665 | <label class="right">Phone :</label> |
| 666 | </v-flex> | 666 | </v-flex> |
| 667 | <v-flex xs8 class="ml-3"> | 667 | <v-flex xs8 class="ml-3"> |
| 668 | <v-layout row wrap> | 668 | <v-layout row wrap> |
| 669 | <v-flex xs3 class="mt-3"> | 669 | <v-flex xs3 class="mt-3"> |
| 670 | <vue-country-code @onSelect="addPhoneNumberCode" class="black--text"></vue-country-code> | 670 | <vue-country-code @onSelect="addPhoneNumberCode" class="black--text"></vue-country-code> |
| 671 | </v-flex> | 671 | </v-flex> |
| 672 | <v-flex xs9> | 672 | <v-flex xs9> |
| 673 | <v-text-field | 673 | <v-text-field |
| 674 | v-model="addUser.mobileNo" | 674 | v-model="addUser.mobileNo" |
| 675 | placeholder="fill your Phone Number" | 675 | placeholder="fill your Phone Number" |
| 676 | name="mobileNo" | 676 | name="mobileNo" |
| 677 | type="number" | 677 | type="number" |
| 678 | :rules="mobileNoRules" | 678 | :rules="mobileNoRules" |
| 679 | required | 679 | required |
| 680 | ></v-text-field> | 680 | ></v-text-field> |
| 681 | </v-flex> | 681 | </v-flex> |
| 682 | </v-layout> | 682 | </v-layout> |
| 683 | </v-flex> | 683 | </v-flex> |
| 684 | </v-layout> | 684 | </v-layout> |
| 685 | </v-flex> | 685 | </v-flex> |
| 686 | <v-flex xs12 sm6> | 686 | <v-flex xs12 sm6> |
| 687 | <v-layout> | 687 | <v-layout> |
| 688 | <v-flex xs4 class="pt-4 subheading"> | 688 | <v-flex xs4 class="pt-4 subheading"> |
| 689 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> | 689 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> |
| 690 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 690 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 691 | </v-flex> | 691 | </v-flex> |
| 692 | <v-flex xs8 class="ml-3"> | 692 | <v-flex xs8 class="ml-3"> |
| 693 | <v-autocomplete | 693 | <v-autocomplete |
| 694 | v-model="addUser.role" | 694 | v-model="addUser.role" |
| 695 | :rules="role" | 695 | :rules="role" |
| 696 | :items="userRole" | 696 | :items="userRole" |
| 697 | item-text="name" | 697 | item-text="name" |
| 698 | item-value="name" | 698 | item-value="name" |
| 699 | placeholder="Select Role Name" | 699 | placeholder="Select Role Name" |
| 700 | required | 700 | required |
| 701 | ></v-autocomplete> | 701 | ></v-autocomplete> |
| 702 | </v-flex> | 702 | </v-flex> |
| 703 | </v-layout> | 703 | </v-layout> |
| 704 | </v-flex> | 704 | </v-flex> |
| 705 | </v-layout> | 705 | </v-layout> |
| 706 | <v-layout wrap> | 706 | <v-layout wrap> |
| 707 | <!-- <v-flex xs12 sm6> | 707 | <!-- <v-flex xs12 sm6> |
| 708 | <v-layout> | 708 | <v-layout> |
| 709 | <v-flex xs4 class="pt-4 subheading"> | 709 | <v-flex xs4 class="pt-4 subheading"> |
| 710 | <label class="right">Username:</label> | 710 | <label class="right">Username:</label> |
| 711 | </v-flex> | 711 | </v-flex> |
| 712 | <v-flex xs8 class="ml-3"> | 712 | <v-flex xs8 class="ml-3"> |
| 713 | <v-text-field | 713 | <v-text-field |
| 714 | v-model="addUser.userName" | 714 | v-model="addUser.userName" |
| 715 | placeholder="fill your User Name" | 715 | placeholder="fill your User Name" |
| 716 | type="text" | 716 | type="text" |
| 717 | :rules="userNameRules" | 717 | :rules="userNameRules" |
| 718 | required | 718 | required |
| 719 | ></v-text-field> | 719 | ></v-text-field> |
| 720 | </v-flex> | 720 | </v-flex> |
| 721 | </v-layout> | 721 | </v-layout> |
| 722 | </v-flex>--> | 722 | </v-flex>--> |
| 723 | <v-flex xs12 sm6> | 723 | <v-flex xs12 sm6> |
| 724 | <v-layout> | 724 | <v-layout> |
| 725 | <v-flex xs4 class="pt-4 subheading"> | 725 | <v-flex xs4 class="pt-4 subheading"> |
| 726 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> | 726 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> |
| 727 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> | 727 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> |
| 728 | </v-flex> | 728 | </v-flex> |
| 729 | <v-flex xs8 class="ml-3"> | 729 | <v-flex xs8 class="ml-3"> |
| 730 | <v-text-field | 730 | <v-text-field |
| 731 | label="Select Image" | 731 | label="Select Image" |
| 732 | @click="pickFile" | 732 | @click="pickFile" |
| 733 | v-model="imageName" | 733 | v-model="imageName" |
| 734 | append-icon="attach_file" | 734 | append-icon="attach_file" |
| 735 | ></v-text-field> | 735 | ></v-text-field> |
| 736 | <input | 736 | <input |
| 737 | type="file" | 737 | type="file" |
| 738 | style="display:none" | 738 | style="display:none" |
| 739 | ref="image" | 739 | ref="image" |
| 740 | accept="image/*" | 740 | accept="image/*" |
| 741 | @change="onFilePicked" | 741 | @change="onFilePicked" |
| 742 | /> | 742 | /> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | </v-layout> | 744 | </v-layout> |
| 745 | </v-flex> | 745 | </v-flex> |
| 746 | <v-flex xs12 sm6> | 746 | <v-flex xs12 sm6> |
| 747 | <v-layout> | 747 | <v-layout> |
| 748 | <v-flex xs4 class="pt-4 subheading"> | 748 | <v-flex xs4 class="pt-4 subheading"> |
| 749 | <label class="right">Address:</label> | 749 | <label class="right">Address:</label> |
| 750 | </v-flex> | 750 | </v-flex> |
| 751 | <v-flex xs8 class="ml-3"> | 751 | <v-flex xs8 class="ml-3"> |
| 752 | <v-text-field | 752 | <v-text-field |
| 753 | name="input-4-3" | 753 | name="input-4-3" |
| 754 | v-model="addUser.presentAddress" | 754 | v-model="addUser.presentAddress" |
| 755 | :rules="presentAddress" | 755 | :rules="presentAddress" |
| 756 | placeholder="fill Your present Address" | 756 | placeholder="fill Your present Address" |
| 757 | required | 757 | required |
| 758 | ></v-text-field> | 758 | ></v-text-field> |
| 759 | </v-flex> | 759 | </v-flex> |
| 760 | </v-layout> | 760 | </v-layout> |
| 761 | </v-flex> | 761 | </v-flex> |
| 762 | </v-layout> | 762 | </v-layout> |
| 763 | <v-layout> | 763 | <v-layout> |
| 764 | <v-flex xs12 sm12> | 764 | <v-flex xs12 sm12> |
| 765 | <v-layout class="right"> | 765 | <v-layout class="right"> |
| 766 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 766 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 767 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 767 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 768 | </v-layout> | 768 | </v-layout> |
| 769 | </v-flex> | 769 | </v-flex> |
| 770 | </v-layout> | 770 | </v-layout> |
| 771 | </v-container> | 771 | </v-container> |
| 772 | </v-form> | 772 | </v-form> |
| 773 | </v-card> | 773 | </v-card> |
| 774 | </v-dialog> | 774 | </v-dialog> |
| 775 | <div class="loader" v-if="showLoader"> | 775 | <div class="loader" v-if="showLoader"> |
| 776 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 776 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 777 | </div> | 777 | </div> |
| 778 | <v-snackbar | 778 | <v-snackbar |
| 779 | :timeout="timeout" | 779 | :timeout="timeout" |
| 780 | :top="y === 'top'" | 780 | :top="y === 'top'" |
| 781 | :right="x === 'right'" | 781 | :right="x === 'right'" |
| 782 | :vertical="mode === 'vertical'" | 782 | :vertical="mode === 'vertical'" |
| 783 | v-model="snackbar" | 783 | v-model="snackbar" |
| 784 | :color="color" | 784 | :color="color" |
| 785 | >{{ text }}</v-snackbar> | 785 | >{{ text }}</v-snackbar> |
| 786 | </v-container> | 786 | </v-container> |
| 787 | </template> | 787 | </template> |
| 788 | 788 | ||
| 789 | <script> | 789 | <script> |
| 790 | import http from "@/Services/http.js"; | 790 | import http from "@/Services/http.js"; |
| 791 | import Util from "@/util"; | 791 | import Util from "@/util"; |
| 792 | import moment from "moment"; | 792 | import moment from "moment"; |
| 793 | import _ from "lodash"; | 793 | import _ from "lodash"; |
| 794 | 794 | ||
| 795 | export default { | 795 | export default { |
| 796 | data: () => ({ | 796 | data: () => ({ |
| 797 | /* EDIT FATHER CELL */ | 797 | /* EDIT FATHER CELL */ |
| 798 | editedPhoneNumberCode: '', | 798 | editedPhoneNumberCode: "", |
| 799 | /* ADD FATHER CELL */ | 799 | /* ADD FATHER CELL */ |
| 800 | addedPhoneNumberCode: '', | 800 | addedPhoneNumberCode: "", |
| 801 | component: "report-generate", | 801 | component: "report-generate", |
| 802 | snackbar: false, | 802 | snackbar: false, |
| 803 | y: "top", | 803 | y: "top", |
| 804 | x: "right", | 804 | x: "right", |
| 805 | mode: "", | 805 | mode: "", |
| 806 | timeout: 3000, | 806 | timeout: 3000, |
| 807 | color: "", | 807 | color: "", |
| 808 | text: "", | 808 | text: "", |
| 809 | show: true, | 809 | show: true, |
| 810 | showSearch: false, | 810 | showSearch: false, |
| 811 | showLoader: false, | 811 | showLoader: false, |
| 812 | loading: false, | 812 | loading: false, |
| 813 | addUserDialog: false, | 813 | addUserDialog: false, |
| 814 | date: null, | 814 | date: null, |
| 815 | search: "", | 815 | search: "", |
| 816 | menu: false, | 816 | menu: false, |
| 817 | menu1: false, | 817 | menu1: false, |
| 818 | menu2: false, | 818 | menu2: false, |
| 819 | menu3: false, | 819 | menu3: false, |
| 820 | viewUserDialog: false, | 820 | viewUserDialog: false, |
| 821 | editUserDialog: false, | 821 | editUserDialog: false, |
| 822 | valid: true, | 822 | valid: true, |
| 823 | isActive: true, | 823 | isActive: true, |
| 824 | newActive: false, | 824 | newActive: false, |
| 825 | pagination: { | 825 | pagination: { |
| 826 | rowsPerPage: 10, | 826 | rowsPerPage: 10, |
| 827 | }, | 827 | }, |
| 828 | imageData: {}, | 828 | imageData: {}, |
| 829 | imageName: "", | 829 | imageName: "", |
| 830 | imageUrl: "", | 830 | imageUrl: "", |
| 831 | imageFile: "", | 831 | imageFile: "", |
| 832 | nameRules: [(v) => !!v || "Name is required"], | 832 | nameRules: [(v) => !!v || "Name is required"], |
| 833 | dateRules: [(v) => !!v || " DOB is required"], | 833 | dateRules: [(v) => !!v || " DOB is required"], |
| 834 | genderRules: [(v) => !!v || " Gender Name is required"], | 834 | genderRules: [(v) => !!v || " Gender Name is required"], |
| 835 | pincode: [(v) => !!v || " Pincode is required"], | 835 | pincode: [(v) => !!v || " Pincode is required"], |
| 836 | role: [(v) => !!v || "Role Name is required"], | 836 | role: [(v) => !!v || "Role Name is required"], |
| 837 | permanentAddress: [(v) => !!v || " Permanent Address is required"], | 837 | permanentAddress: [(v) => !!v || " Permanent Address is required"], |
| 838 | presentAddress: [(v) => !!v || " Present Address is required"], | 838 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 839 | mobileNoRules: [(v) => !!v || "Phone Number is required"], | 839 | mobileNoRules: [(v) => !!v || "Phone Number is required"], |
| 840 | religionRules: [(v) => !!v || "Religion Name is required"], | 840 | religionRules: [(v) => !!v || "Religion Name is required"], |
| 841 | joinDateRules: [(v) => !!v || " Join Date is required"], | 841 | joinDateRules: [(v) => !!v || " Join Date is required"], |
| 842 | userNameRules: [(v) => !!v || " User Name is required"], | 842 | userNameRules: [(v) => !!v || " User Name is required"], |
| 843 | passwordRules: [(v) => !!v || " Password is required"], | 843 | passwordRules: [(v) => !!v || " Password is required"], |
| 844 | errorMessages: "", | 844 | errorMessages: "", |
| 845 | userRole: [], | 845 | userRole: [], |
| 846 | emailRules: [ | 846 | emailRules: [ |
| 847 | (v) => !!v || "E-mail is required", | 847 | (v) => !!v || "E-mail is required", |
| 848 | (v) => | 848 | (v) => |
| 849 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 849 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 850 | "E-mail must be valid", | 850 | "E-mail must be valid", |
| 851 | ], | 851 | ], |
| 852 | gender: ["Male", "Female"], | 852 | gender: ["Male", "Female"], |
| 853 | headers: [ | 853 | headers: [ |
| 854 | { | 854 | { |
| 855 | text: "No", | 855 | text: "No", |
| 856 | align: "", | 856 | align: "", |
| 857 | sortable: false, | 857 | sortable: false, |
| 858 | value: "No", | 858 | value: "No", |
| 859 | }, | 859 | }, |
| 860 | { | 860 | { |
| 861 | text: "Profile Pic", | 861 | text: "Profile Pic", |
| 862 | value: "profilePicUrl", | 862 | value: "profilePicUrl", |
| 863 | sortable: false, | 863 | sortable: false, |
| 864 | align: "center", | 864 | align: "center", |
| 865 | }, | 865 | }, |
| 866 | { text: "Name", value: "name", sortable: false, align: "center" }, | 866 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 867 | { text: "Email", value: "email", sortable: false, align: "center" }, | 867 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 868 | { text: "DOB", value: "dob", sortable: false, align: "center" }, | 868 | { text: "DOB", value: "dob", sortable: false, align: "center" }, |
| 869 | { | 869 | { |
| 870 | text: "Joining Date", | 870 | text: "Joining Date", |
| 871 | value: "joiningDate", | 871 | value: "joiningDate", |
| 872 | sortable: false, | 872 | sortable: false, |
| 873 | align: "center", | 873 | align: "center", |
| 874 | }, | 874 | }, |
| 875 | { | 875 | { |
| 876 | text: "Phone", | 876 | text: "Phone", |
| 877 | value: "phone", | 877 | value: "phone", |
| 878 | sortable: false, | 878 | sortable: false, |
| 879 | align: "center", | 879 | align: "center", |
| 880 | }, | 880 | }, |
| 881 | { | 881 | { |
| 882 | text: "Status", | 882 | text: "Status", |
| 883 | value: "status", | 883 | value: "status", |
| 884 | sortable: false, | 884 | sortable: false, |
| 885 | align: "center", | 885 | align: "center", |
| 886 | }, | 886 | }, |
| 887 | { text: "Action", value: "", sortable: false, align: "center" }, | 887 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 888 | ], | 888 | ], |
| 889 | Users: [], | 889 | Users: [], |
| 890 | editedIndex: -1, | 890 | editedIndex: -1, |
| 891 | upload: "", | 891 | upload: "", |
| 892 | editedItem: { | 892 | editedItem: { |
| 893 | role: "", | 893 | role: "", |
| 894 | name: "", | 894 | name: "", |
| 895 | email: "", | 895 | email: "", |
| 896 | dob: null, | 896 | dob: null, |
| 897 | gender: "", | 897 | gender: "", |
| 898 | role: "", | 898 | role: "", |
| 899 | address: "", | 899 | address: "", |
| 900 | phone: "", | 900 | phone: "", |
| 901 | religion: "", | 901 | religion: "", |
| 902 | joiningDate: null, | 902 | joiningDate: null, |
| 903 | }, | 903 | }, |
| 904 | addUser: { | 904 | addUser: { |
| 905 | role: "", | 905 | role: "", |
| 906 | name: "", | 906 | name: "", |
| 907 | email: "", | 907 | email: "", |
| 908 | dob: null, | 908 | dob: null, |
| 909 | gender: "", | 909 | gender: "", |
| 910 | pincode: "", | 910 | pincode: "", |
| 911 | role: "", | 911 | role: "", |
| 912 | permanentAddress: "", | 912 | permanentAddress: "", |
| 913 | presentAddress: "", | 913 | presentAddress: "", |
| 914 | mobileNo: "", | 914 | mobileNo: "", |
| 915 | religion: "", | 915 | religion: "", |
| 916 | joiningDate: null, | 916 | joiningDate: null, |
| 917 | }, | 917 | }, |
| 918 | }), | 918 | }), |
| 919 | watch: { | 919 | watch: { |
| 920 | menu(val) { | 920 | menu(val) { |
| 921 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 921 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 922 | }, | 922 | }, |
| 923 | menu1(val) { | 923 | menu1(val) { |
| 924 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 924 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 925 | }, | 925 | }, |
| 926 | addUserDialog: function (val) { | 926 | addUserDialog: function (val) { |
| 927 | if (!val) { | 927 | if (!val) { |
| 928 | this.addUser = []; | 928 | this.addUser = []; |
| 929 | this.imageName = ""; | 929 | this.imageName = ""; |
| 930 | this.imageFile = ""; | 930 | this.imageFile = ""; |
| 931 | this.imageUrl = ""; | 931 | this.imageUrl = ""; |
| 932 | } | 932 | } |
| 933 | }, | 933 | }, |
| 934 | }, | 934 | }, |
| 935 | methods: { | 935 | methods: { |
| 936 | editPhoneNumberCode({ name, iso2, dialCode }){ | 936 | editPhoneNumberCode({ name, iso2, dialCode }) { |
| 937 | this.editedPhoneNumberCode = dialCode | 937 | this.editedPhoneNumberCode = dialCode; |
| 938 | }, | 938 | }, |
| 939 | addPhoneNumberCode({ name, iso2, dialCode }){ | 939 | addPhoneNumberCode({ name, iso2, dialCode }) { |
| 940 | this.addedPhoneNumberCode = dialCode | 940 | this.addedPhoneNumberCode = dialCode; |
| 941 | }, | 941 | }, |
| 942 | // onSelect({ name, iso2, dialCode }) { | 942 | // onSelect({ name, iso2, dialCode }) { |
| 943 | // console.log("country codes", name, iso2, dialCode); | 943 | // console.log("country codes", name, iso2, dialCode); |
| 944 | // }, | 944 | // }, |
| 945 | save(date) { | 945 | save(date) { |
| 946 | this.$refs.menu.save(date); | 946 | this.$refs.menu.save(date); |
| 947 | }, | 947 | }, |
| 948 | save(date) { | 948 | save(date) { |
| 949 | this.$refs.menu1.save(date); | 949 | this.$refs.menu1.save(date); |
| 950 | }, | 950 | }, |
| 951 | pickFile() { | 951 | pickFile() { |
| 952 | this.$refs.image.click(); | 952 | this.$refs.image.click(); |
| 953 | }, | 953 | }, |
| 954 | onFilePicked(e) { | 954 | onFilePicked(e) { |
| 955 | // console.log(e) | 955 | // console.log(e) |
| 956 | const files = e.target.files; | 956 | const files = e.target.files; |
| 957 | this.upload = e.target.files[0]; | 957 | this.upload = e.target.files[0]; |
| 958 | // console.log("imageData-upload========>", this.upload); | 958 | // console.log("imageData-upload========>", this.upload); |
| 959 | if (files[0] !== undefined) { | 959 | if (files[0] !== undefined) { |
| 960 | this.imageName = files[0].name; | 960 | this.imageName = files[0].name; |
| 961 | if (this.imageName.lastIndexOf(".") <= 0) { | 961 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 962 | return; | 962 | return; |
| 963 | } | 963 | } |
| 964 | const fr = new FileReader(); | 964 | const fr = new FileReader(); |
| 965 | fr.readAsDataURL(files[0]); | 965 | fr.readAsDataURL(files[0]); |
| 966 | fr.addEventListener("load", () => { | 966 | fr.addEventListener("load", () => { |
| 967 | this.imageUrl = fr.result; | 967 | this.imageUrl = fr.result; |
| 968 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 968 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 969 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 969 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 970 | // console.log("upload=======>", this.imageData.imageUrl); | 970 | // console.log("upload=======>", this.imageData.imageUrl); |
| 971 | // console.log("imageFile", this.imageUrl); | 971 | // console.log("imageFile", this.imageUrl); |
| 972 | }); | 972 | }); |
| 973 | } else { | 973 | } else { |
| 974 | this.imageName = ""; | 974 | this.imageName = ""; |
| 975 | this.imageFile = ""; | 975 | this.imageFile = ""; |
| 976 | this.imageUrl = ""; | 976 | this.imageUrl = ""; |
| 977 | } | 977 | } |
| 978 | }, | 978 | }, |
| 979 | dates: function (date) { | 979 | dates: function (date) { |
| 980 | return moment(date).format("MMMM DD, YYYY"); | 980 | return moment(date).format("MMMM DD, YYYY"); |
| 981 | }, | 981 | }, |
| 982 | getUsersList() { | 982 | getUsersList() { |
| 983 | this.showLoader = true; | 983 | this.showLoader = true; |
| 984 | var token = this.$store.state.token; | 984 | var token = this.$store.state.token; |
| 985 | http() | 985 | http() |
| 986 | .get("/getUsersList", { | 986 | .get("/getUsersList", { |
| 987 | headers: { Authorization: "Bearer " + token }, | 987 | headers: { Authorization: "Bearer " + token }, |
| 988 | }) | 988 | }) |
| 989 | .then((response) => { | 989 | .then((response) => { |
| 990 | // this.snackbar = true; | 990 | // this.snackbar = true; |
| 991 | this.color = "success"; | 991 | this.color = "success"; |
| 992 | this.Users = response.data.data; | 992 | this.Users = response.data.data; |
| 993 | this.showLoader = false; | 993 | this.showLoader = false; |
| 994 | }) | 994 | }) |
| 995 | .catch((error) => { | 995 | .catch((error) => { |
| 996 | this.showLoader = false; | 996 | this.showLoader = false; |
| 997 | if (error.response.status === 401) { | 997 | if (error.response.status === 401) { |
| 998 | this.$router.replace({ path: "/" }); | 998 | this.$router.replace({ path: "/" }); |
| 999 | this.$store.dispatch("setToken", null); | 999 | this.$store.dispatch("setToken", null); |
| 1000 | this.$store.dispatch("Id", null); | 1000 | this.$store.dispatch("Id", null); |
| 1001 | } | 1001 | } |
| 1002 | }); | 1002 | }); |
| 1003 | }, | 1003 | }, |
| 1004 | editItem(item) { | 1004 | editItem(item) { |
| 1005 | this.editedIndex = this.Users.indexOf(item); | 1005 | this.editedIndex = this.Users.indexOf(item); |
| 1006 | this.editedItem = Object.assign({}, item); | 1006 | this.editedItem = Object.assign({}, item); |
| 1007 | this.editedItem.dob = | 1007 | this.editedItem.dob = |
| 1008 | this.editedItem.dob != undefined | 1008 | this.editedItem.dob != undefined |
| 1009 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 1009 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 1010 | : (this.editedItem.dob = ""); | 1010 | : (this.editedItem.dob = ""); |
| 1011 | for (let i = 0; i < this.userRole.length; i++) { | 1011 | for (let i = 0; i < this.userRole.length; i++) { |
| 1012 | if (this.userRole[i].role === this.editedItem.role) { | 1012 | if (this.userRole[i].role === this.editedItem.role) { |
| 1013 | this.editedItem.role = this.userRole[i].name; | 1013 | this.editedItem.role = this.userRole[i].name; |
| 1014 | } | 1014 | } |
| 1015 | } | 1015 | } |
| 1016 | this.editUserDialog = true; | 1016 | this.editUserDialog = true; |
| 1017 | }, | 1017 | }, |
| 1018 | profile(item) { | 1018 | profile(item) { |
| 1019 | this.editedIndex = this.Users.indexOf(item); | 1019 | this.editedIndex = this.Users.indexOf(item); |
| 1020 | this.editedItem = Object.assign({}, item); | 1020 | this.editedItem = Object.assign({}, item); |
| 1021 | this.viewUserDialog = true; | 1021 | this.viewUserDialog = true; |
| 1022 | for (let i = 0; i < this.userRole.length; i++) { | 1022 | for (let i = 0; i < this.userRole.length; i++) { |
| 1023 | if (this.userRole[i].role === this.editedItem.role) { | 1023 | if (this.userRole[i].role === this.editedItem.role) { |
| 1024 | this.editedItem.role = this.userRole[i].name; | 1024 | this.editedItem.role = this.userRole[i].name; |
| 1025 | } | 1025 | } |
| 1026 | } | 1026 | } |
| 1027 | }, | 1027 | }, |
| 1028 | deleteItem(item) { | 1028 | deleteItem(item) { |
| 1029 | let deleteUser = { | 1029 | let deleteUser = { |
| 1030 | userId: item._id, | 1030 | userId: item._id, |
| 1031 | }; | 1031 | }; |
| 1032 | http() | 1032 | http() |
| 1033 | .delete( | 1033 | .delete( |
| 1034 | "/deleteUser", | 1034 | "/deleteUser", |
| 1035 | confirm("Are you sure you want to delete this?") && { | 1035 | confirm("Are you sure you want to delete this?") && { |
| 1036 | params: deleteUser, | 1036 | params: deleteUser, |
| 1037 | } | 1037 | } |
| 1038 | ) | 1038 | ) |
| 1039 | .then((response) => { | 1039 | .then((response) => { |
| 1040 | this.snackbar = true; | 1040 | this.snackbar = true; |
| 1041 | this.text = response.data.message; | 1041 | this.text = response.data.message; |
| 1042 | this.color = "green"; | 1042 | this.color = "green"; |
| 1043 | this.getUsersList(); | 1043 | this.getUsersList(); |
| 1044 | }) | 1044 | }) |
| 1045 | .catch((error) => { | 1045 | .catch((error) => { |
| 1046 | this.snackbar = true; | 1046 | this.snackbar = true; |
| 1047 | this.color = "error"; | 1047 | this.color = "error"; |
| 1048 | this.text = error.response.data.message; | 1048 | this.text = error.response.data.message; |
| 1049 | }); | 1049 | }); |
| 1050 | }, | 1050 | }, |
| 1051 | close() { | 1051 | close() { |
| 1052 | this.editUserDialog = false; | 1052 | this.editUserDialog = false; |
| 1053 | }, | 1053 | }, |
| 1054 | closeProfileDialog() { | 1054 | closeProfileDialog() { |
| 1055 | this.viewUserDialog = false; | 1055 | this.viewUserDialog = false; |
| 1056 | }, | 1056 | }, |
| 1057 | submit() { | 1057 | submit() { |
| 1058 | if (this.$refs.form.validate()) { | 1058 | if (this.$refs.form.validate()) { |
| 1059 | let addUserData = { | 1059 | let addUserData = { |
| 1060 | name: this.addUser.name, | 1060 | name: this.addUser.name, |
| 1061 | email: this.addUser.email, | 1061 | email: this.addUser.email, |
| 1062 | dob: this.addUser.dob, | 1062 | dob: this.addUser.dob, |
| 1063 | gender: this.addUser.gender, | 1063 | gender: this.addUser.gender, |
| 1064 | religion: this.addUser.religion, | 1064 | religion: this.addUser.religion, |
| 1065 | role: this.addUser.role, | 1065 | role: this.addUser.role, |
| 1066 | address: this.addUser.presentAddress, | 1066 | address: this.addUser.presentAddress, |
| 1067 | countryCode: this.addedPhoneNumberCode, | 1067 | countryCode: this.addedPhoneNumberCode, |
| 1068 | phone: this.addUser.mobileNo, | 1068 | phone: this.addUser.mobileNo, |
| 1069 | religion: this.addUser.religion, | 1069 | religion: this.addUser.religion, |
| 1070 | joiningDate: this.addUser.joinDate, | 1070 | joiningDate: this.addUser.joinDate, |
| 1071 | }; | 1071 | }; |
| 1072 | if (this.imageUrl) { | 1072 | if (this.imageUrl) { |
| 1073 | var str = this.imageUrl; | 1073 | var str = this.imageUrl; |
| 1074 | const [baseUrl, imageUrl] = str.split(/,/); | 1074 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1075 | addUserData.profilePicUrl = imageUrl; | 1075 | addUserData.profilePicUrl = imageUrl; |
| 1076 | } | 1076 | } |
| 1077 | this.loading = true; | 1077 | this.loading = true; |
| 1078 | http() | 1078 | http() |
| 1079 | .post("/createUser", addUserData) | 1079 | .post("/createUser", addUserData) |
| 1080 | .then((response) => { | 1080 | .then((response) => { |
| 1081 | this.imageUrl = ""; | 1081 | this.imageUrl = ""; |
| 1082 | this.getUsersList(); | 1082 | this.getUsersList(); |
| 1083 | this.snackbar = true; | 1083 | this.snackbar = true; |
| 1084 | this.addUserDialog = false; | 1084 | this.addUserDialog = false; |
| 1085 | this.text = response.data.message; | 1085 | this.text = response.data.message; |
| 1086 | this.color = "green"; | 1086 | this.color = "green"; |
| 1087 | this.clear(); | 1087 | this.clear(); |
| 1088 | this.loading = false; | 1088 | this.loading = false; |
| 1089 | }) | 1089 | }) |
| 1090 | .catch((error) => { | 1090 | .catch((error) => { |
| 1091 | this.loading = false; | 1091 | this.loading = false; |
| 1092 | this.snackbar = true; | 1092 | this.snackbar = true; |
| 1093 | this.color = "error"; | 1093 | this.color = "error"; |
| 1094 | this.text = error.response.data.message; | 1094 | this.text = error.response.data.message; |
| 1095 | }); | 1095 | }); |
| 1096 | } | 1096 | } |
| 1097 | }, | 1097 | }, |
| 1098 | clear() { | 1098 | clear() { |
| 1099 | this.$refs.form.reset(); | 1099 | this.$refs.form.reset(); |
| 1100 | this.imageUrl = ""; | 1100 | this.imageUrl = ""; |
| 1101 | }, | 1101 | }, |
| 1102 | save() { | 1102 | save() { |
| 1103 | this.loading = true; | 1103 | this.loading = true; |
| 1104 | for (let i = 0; i < this.userRole.length; i++) { | 1104 | for (let i = 0; i < this.userRole.length; i++) { |
| 1105 | if (this.userRole[i].name === this.editedItem.role) { | 1105 | if (this.userRole[i].name === this.editedItem.role) { |
| 1106 | this.editedItem.role = this.userRole[i].role; | 1106 | this.editedItem.role = this.userRole[i].role; |
| 1107 | } | 1107 | } |
| 1108 | } | 1108 | } |
| 1109 | this.editedItem.userId = this.editedItem._id; | 1109 | this.editedItem.userId = this.editedItem._id; |
| 1110 | this.editedItem.countryCode = this.editedPhoneNumberCode | 1110 | this.editedItem.countryCode = this.editedPhoneNumberCode; |
| 1111 | if (this.imageUrl) { | 1111 | if (this.imageUrl) { |
| 1112 | var str = this.imageUrl; | 1112 | var str = this.imageUrl; |
| 1113 | const [baseUrl, imageUrl] = str.split(/,/); | 1113 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1114 | this.editedItem.upload = imageUrl; | 1114 | this.editedItem.upload = imageUrl; |
| 1115 | } | 1115 | } |
| 1116 | http() | 1116 | http() |
| 1117 | .put("/updateUser", this.editedItem) | 1117 | .put("/updateUser", this.editedItem) |
| 1118 | .then((response) => { | 1118 | .then((response) => { |
| 1119 | this.snackbar = true; | 1119 | this.snackbar = true; |
| 1120 | this.text = response.data.message; | 1120 | this.text = response.data.message; |
| 1121 | this.color = "green"; | 1121 | this.color = "green"; |
| 1122 | this.loading = false; | 1122 | this.loading = false; |
| 1123 | this.getUsersList(); | 1123 | this.getUsersList(); |
| 1124 | this.close(); | 1124 | this.close(); |
| 1125 | }) | 1125 | }) |
| 1126 | .catch((error) => { | 1126 | .catch((error) => { |
| 1127 | this.loading = false; | 1127 | this.loading = false; |
| 1128 | this.snackbar = true; | 1128 | this.snackbar = true; |
| 1129 | this.text = error.response.data.message; | 1129 | this.text = error.response.data.message; |
| 1130 | this.color = "error"; | 1130 | this.color = "error"; |
| 1131 | }); | 1131 | }); |
| 1132 | }, | 1132 | }, |
| 1133 | getRole() { | 1133 | getRole() { |
| 1134 | this.showLoader = true; | 1134 | this.showLoader = true; |
| 1135 | var token = this.$store.state.token; | 1135 | var token = this.$store.state.token; |
| 1136 | http() | 1136 | http() |
| 1137 | .get("/getRolesList", { | 1137 | .get("/getRolesList", { |
| 1138 | headers: { Authorization: "Bearer " + token }, | 1138 | headers: { Authorization: "Bearer " + token }, |
| 1139 | }) | 1139 | }) |
| 1140 | .then((response) => { | 1140 | .then((response) => { |
| 1141 | this.userRole = response.data.data; | 1141 | this.userRole = response.data.data; |
| 1142 | this.showLoader = false; | 1142 | this.showLoader = false; |
| 1143 | this.userRole = response.data.data; | 1143 | this.userRole = response.data.data; |
| 1144 | var removedRoles = _.remove(this.userRole, function (c) { | 1144 | var removedRoles = _.remove(this.userRole, function (c) { |
| 1145 | //remove if color is green or yellow | 1145 | //remove if color is green or yellow |
| 1146 | return ( | 1146 | return ( |
| 1147 | c.name === "ADMIN" || | 1147 | c.name === "ADMIN" || |
| 1148 | c.name === "SUPERADMIN" || | 1148 | c.name === "SUPERADMIN" || |
| 1149 | c.name === "TEACHER" || | 1149 | c.name === "TEACHER" || |
| 1150 | c.name === "STUDENT" || | 1150 | c.name === "STUDENT" || |
| 1151 | c.name === "PARENT" | 1151 | c.name === "PARENT" |
| 1152 | ); | 1152 | ); |
| 1153 | }); | 1153 | }); |
| 1154 | }) | 1154 | }) |
| 1155 | .catch((error) => { | 1155 | .catch((error) => { |
| 1156 | this.showLoader = false; | 1156 | this.showLoader = false; |
| 1157 | }); | 1157 | }); |
| 1158 | }, | 1158 | }, |
| 1159 | suspendStatus(suspendStatus, id) { | 1159 | suspendStatus(suspendStatus, id) { |
| 1160 | let suspendStatusData = { | 1160 | let suspendStatusData = { |
| 1161 | userId: id, | 1161 | userId: id, |
| 1162 | status: suspendStatus, | 1162 | status: suspendStatus, |
| 1163 | }; | 1163 | }; |
| 1164 | this.showLoader = true; | 1164 | this.showLoader = true; |
| 1165 | http() | 1165 | http() |
| 1166 | .put("/suspendUserAccount", suspendStatusData) | 1166 | .put("/suspendUserAccount", suspendStatusData) |
| 1167 | .then((response) => { | 1167 | .then((response) => { |
| 1168 | this.getUsersList(); | 1168 | this.getUsersList(); |
| 1169 | this.text = response.data.message; | 1169 | this.text = response.data.message; |
| 1170 | this.snackbar = true; | 1170 | this.snackbar = true; |
| 1171 | this.showLoader = false; | 1171 | this.showLoader = false; |
| 1172 | }) | 1172 | }) |
| 1173 | .catch((error) => { | 1173 | .catch((error) => { |
| 1174 | // console.log(error.response.data.data); | 1174 | // console.log(error.response.data.data); |
| 1175 | this.snackbar = true; | 1175 | this.snackbar = true; |
| 1176 | this.color = "success"; | 1176 | this.color = "success"; |
| 1177 | this.text = error.response.data.message; | 1177 | this.text = error.response.data.message; |
| 1178 | this.showLoader = false; | 1178 | this.showLoader = false; |
| 1179 | }); | 1179 | }); |
| 1180 | }, | 1180 | }, |
| 1181 | displaySearch() { | 1181 | displaySearch() { |
| 1182 | (this.show = false), (this.showSearch = true); | 1182 | (this.show = false), (this.showSearch = true); |
| 1183 | }, | 1183 | }, |
| 1184 | closeSearch() { | 1184 | closeSearch() { |
| 1185 | this.showSearch = false; | 1185 | this.showSearch = false; |
| 1186 | this.show = true; | 1186 | this.show = true; |
| 1187 | this.search = ""; | 1187 | this.search = ""; |
| 1188 | }, | 1188 | }, |
| 1189 | }, | 1189 | }, |
| 1190 | mounted() { | 1190 | mounted() { |
| 1191 | this.getUsersList(); | 1191 | this.getUsersList(); |
| 1192 | this.getRole(); | 1192 | this.getRole(); |
| 1193 | }, | 1193 | }, |
| 1194 | }; | 1194 | }; |
| 1195 | </script> | 1195 | </script> |
src/pages/changeStudents/changeStudents.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="login"> | 2 | <v-app id="login"> |
| 3 | <!-- LOADER --> | 3 | <!-- LOADER --> |
| 4 | <div class="loader" v-if="showLoader"> | 4 | <div class="loader" v-if="showLoader"> |
| 5 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 5 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 6 | </div> | 6 | </div> |
| 7 | 7 | ||
| 8 | <!-- SNACKBAR --> | 8 | <!-- SNACKBAR --> |
| 9 | <v-snackbar | 9 | <v-snackbar |
| 10 | :timeout="timeout" | 10 | :timeout="timeout" |
| 11 | :top="y === 'top'" | 11 | :top="y === 'top'" |
| 12 | :right="x === 'right'" | 12 | :right="x === 'right'" |
| 13 | :vertical="mode === 'vertical'" | 13 | :vertical="mode === 'vertical'" |
| 14 | v-model="snackbar" | 14 | v-model="snackbar" |
| 15 | :color="snackbarColor" | 15 | :color="snackbarColor" |
| 16 | > | 16 | > |
| 17 | {{ text }} | 17 | {{ text }} |
| 18 | <v-spacer></v-spacer> | 18 | <v-spacer></v-spacer> |
| 19 | <v-btn flat text @click="snackbar = false">X</v-btn> | 19 | <v-btn flat text @click="snackbar = false">X</v-btn> |
| 20 | </v-snackbar> | 20 | </v-snackbar> |
| 21 | <v-container fluid fill-height> | 21 | <v-container fluid fill-height> |
| 22 | <v-layout> | 22 | <v-layout> |
| 23 | <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5"> | 23 | <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5"> |
| 24 | <v-card flat class="card-style pa-2" dark id="form"> | 24 | <v-card flat class="Card-style pa-2" id="form"> |
| 25 | <v-layout> | 25 | <v-layout> |
| 26 | <v-flex xs12> | 26 | <v-flex xs12> |
| 27 | <label class="title text-xs-center">Change Student</label> | 27 | <label class="title text-xs-center">Change Student</label> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | </v-layout> | 29 | </v-layout> |
| 30 | <v-card-text> | 30 | <v-card-text> |
| 31 | <v-flex xs12 sm8 md8 lg8 offset-sm2> | 31 | <v-flex xs12 sm8 md8 lg8 offset-sm2> |
| 32 | <v-form class="mt-3"> | 32 | <v-form class="mt-3"> |
| 33 | <v-select | 33 | <v-select |
| 34 | :items="studentsData" | 34 | :items="studentsData" |
| 35 | item-text="name" | 35 | item-text="name" |
| 36 | item-value="_id" | 36 | item-value="_id" |
| 37 | v-model="changeStudent" | 37 | v-model="changeStudent" |
| 38 | label="Students" | 38 | label="Students" |
| 39 | ></v-select> | 39 | ></v-select> |
| 40 | </v-form> | 40 | </v-form> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | </v-card-text> | 42 | </v-card-text> |
| 43 | <v-card-actions> | 43 | <v-card-actions> |
| 44 | <v-flex text-xs-center> | 44 | <v-flex text-xs-center> |
| 45 | <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn> | 45 | <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | </v-card-actions> | 47 | </v-card-actions> |
| 48 | </v-card> | 48 | </v-card> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-container> | 51 | </v-container> |
| 52 | </v-app> | 52 | </v-app> |
| 53 | </template> | 53 | </template> |
| 54 | <script> | 54 | <script> |
| 55 | import http from "@/Services/http.js"; | 55 | import http from "@/Services/http.js"; |
| 56 | import AllApiCalls from "@/Services/AllApiCalls.js"; | 56 | import AllApiCalls from "@/Services/AllApiCalls.js"; |
| 57 | 57 | ||
| 58 | export default { | 58 | export default { |
| 59 | mixins: [AllApiCalls], | 59 | mixins: [AllApiCalls], |
| 60 | data() { | 60 | data() { |
| 61 | return { | 61 | return { |
| 62 | snackbar: false, | 62 | snackbar: false, |
| 63 | y: "top", | 63 | y: "top", |
| 64 | x: "right", | 64 | x: "right", |
| 65 | mode: "", | 65 | mode: "", |
| 66 | timeout: 4000, | 66 | timeout: 4000, |
| 67 | text: "", | 67 | text: "", |
| 68 | loading: false, | 68 | loading: false, |
| 69 | valid: false, | 69 | valid: false, |
| 70 | changeStudent: "", | 70 | changeStudent: "", |
| 71 | studentsData: [], | 71 | studentsData: [], |
| 72 | }; | 72 | }; |
| 73 | }, | 73 | }, |
| 74 | mounted() { | 74 | mounted() { |
| 75 | this.getparentStudents(); | 75 | this.getparentStudents(); |
| 76 | }, | 76 | }, |
| 77 | methods: { | 77 | methods: { |
| 78 | change() { | 78 | change() { |
| 79 | localStorage.setItem("parentStudentId", this.changeStudent); | 79 | localStorage.setItem("parentStudentId", this.changeStudent); |
| 80 | this.$router.replace({ path: "/" }); | 80 | this.$router.replace({ path: "/" }); |
| 81 | }, | 81 | }, |
| 82 | getparentStudents() { | 82 | getparentStudents() { |
| 83 | this.showLoader = true; | 83 | this.showLoader = true; |
| 84 | http() | 84 | http() |
| 85 | .get("/parentStudentsList") | 85 | .get("/parentStudentsList") |
| 86 | .then((response) => { | 86 | .then((response) => { |
| 87 | // console.log("students - ", response.data.data.students); | 87 | // console.log("students - ", response.data.data.students); |
| 88 | /* prepare an array of false status students */ | 88 | /* prepare an array of false status students */ |
| 89 | var indexStatusFalse = []; | 89 | var indexStatusFalse = []; |
| 90 | for (var i = 0; i < response.data.data.students.length; i++) { | 90 | for (var i = 0; i < response.data.data.students.length; i++) { |
| 91 | if (response.data.data.students[i].status == false) { | 91 | if (response.data.data.students[i].status == false) { |
| 92 | indexStatusFalse.push(i); | 92 | indexStatusFalse.push(i); |
| 93 | } | 93 | } |
| 94 | } | 94 | } |
| 95 | /* introduce a property named disabled in response to make false staus students disbled */ | 95 | /* introduce a property named disabled in response to make false staus students disbled */ |
| 96 | for (var i = 0; i < indexStatusFalse.length; i++) { | 96 | for (var i = 0; i < indexStatusFalse.length; i++) { |
| 97 | response.data.data.students[indexStatusFalse[i]].disabled = true; | 97 | response.data.data.students[indexStatusFalse[i]].disabled = true; |
| 98 | } | 98 | } |
| 99 | /* make an array of students to be displayed in select box */ | 99 | /* make an array of students to be displayed in select box */ |
| 100 | this.studentsData = response.data.data.students; | 100 | this.studentsData = response.data.data.students; |
| 101 | /* counter to keep a track of number of students that are disabled or false */ | 101 | /* counter to keep a track of number of students that are disabled or false */ |
| 102 | var counter = 0; | 102 | var counter = 0; |
| 103 | /* if zero element of false students list is > 0 then make first student as defalut selected */ | 103 | /* if zero element of false students list is > 0 then make first student as defalut selected */ |
| 104 | if (indexStatusFalse[0] > 0) { | 104 | if (indexStatusFalse[0] > 0) { |
| 105 | this.changeStudent = response.data.data.students[0]._id; | 105 | this.changeStudent = response.data.data.students[0]._id; |
| 106 | } | 106 | } |
| 107 | // console.log("indexStatusFalse - ", indexStatusFalse); | 107 | // console.log("indexStatusFalse - ", indexStatusFalse); |
| 108 | /* if false student is the first one in the list then see if the next is also false */ | 108 | /* if false student is the first one in the list then see if the next is also false */ |
| 109 | if (indexStatusFalse[0] == 0) { | 109 | if (indexStatusFalse[0] == 0) { |
| 110 | if (indexStatusFalse.length > 1) { | 110 | if (indexStatusFalse.length > 1) { |
| 111 | for (var i = 1; i < indexStatusFalse.length; i++) { | 111 | for (var i = 1; i < indexStatusFalse.length; i++) { |
| 112 | if (indexStatusFalse[i] == i) { | 112 | if (indexStatusFalse[i] == i) { |
| 113 | if (indexStatusFalse[i - 1] == i - 1) { | 113 | if (indexStatusFalse[i - 1] == i - 1) { |
| 114 | counter = i + 1; | 114 | counter = i + 1; |
| 115 | continue; | 115 | continue; |
| 116 | } | 116 | } |
| 117 | } else { | 117 | } else { |
| 118 | counter = i; | 118 | counter = i; |
| 119 | break; | 119 | break; |
| 120 | } | 120 | } |
| 121 | } | 121 | } |
| 122 | } else { | 122 | } else { |
| 123 | counter = 1; | 123 | counter = 1; |
| 124 | } | 124 | } |
| 125 | } | 125 | } |
| 126 | // console.log("counter - ", counter); | 126 | // console.log("counter - ", counter); |
| 127 | if (counter == response.data.data.students.length) { | 127 | if (counter == response.data.data.students.length) { |
| 128 | this.seeSnackbar( | 128 | this.seeSnackbar( |
| 129 | "Your wards have been removed you will be logged out", | 129 | "Your wards have been removed you will be logged out", |
| 130 | "warning" | 130 | "warning" |
| 131 | ); | 131 | ); |
| 132 | setTimeout(() => { | 132 | setTimeout(() => { |
| 133 | this.$store.dispatch("setToken", null); | 133 | this.$store.dispatch("setToken", null); |
| 134 | this.$router.replace({ path: "/" }); | 134 | this.$router.replace({ path: "/" }); |
| 135 | this.$store.dispatch("Id", null); | 135 | this.$store.dispatch("Id", null); |
| 136 | }, 3000); | 136 | }, 3000); |
| 137 | } else { | 137 | } else { |
| 138 | this.changeStudent = response.data.data.students[counter]._id; | 138 | this.changeStudent = response.data.data.students[counter]._id; |
| 139 | } | 139 | } |
| 140 | 140 | ||
| 141 | localStorage.setItem("parentStudentId", this.changeStudent); | 141 | localStorage.setItem("parentStudentId", this.changeStudent); |
| 142 | localStorage.setItem( | 142 | localStorage.setItem( |
| 143 | "parentClassId", | 143 | "parentClassId", |
| 144 | response.data.data.students[0].classId | 144 | response.data.data.students[0].classId |
| 145 | ); | 145 | ); |
| 146 | this.showLoader = false; | 146 | this.showLoader = false; |
| 147 | }) | 147 | }) |
| 148 | .catch((err) => { | 148 | .catch((err) => { |
| 149 | // console.log("err====>", err); | 149 | // console.log("err====>", err); |
| 150 | this.showLoader = false; | 150 | this.showLoader = false; |
| 151 | this.snackbar = true; | 151 | this.snackbar = true; |
| 152 | this.color = "error"; | 152 | this.color = "error"; |
| 153 | this.text = error.response.data.message; | 153 | this.text = error.response.data.message; |
| 154 | }); | 154 | }); |
| 155 | }, | 155 | }, |
| 156 | }, | 156 | }, |
| 157 | computed: { | 157 | computed: { |
| 158 | color() { | 158 | color() { |
| 159 | return this.loading ? "success" : "error"; | 159 | return this.loading ? "success" : "error"; |
| 160 | }, | 160 | }, |
| 161 | }, | 161 | }, |
| 162 | }; | 162 | }; |
| 163 | </script> | 163 | </script> |
| 164 | <style scoped> | 164 | <style scoped> |
| 165 | img { | 165 | img { |
| 166 | position: absolute; | 166 | position: absolute; |
| 167 | top: 13px; | 167 | top: 13px; |
| 168 | left: 50px; | 168 | left: 50px; |
| 169 | } | 169 | } |
| 170 | .v-btn--large { | 170 | .v-btn--large { |
| 171 | padding: 0px 74px; | 171 | padding: 0px 74px; |
| 172 | } | 172 | } |
| 173 | @media screen and (max-width: 769px) { | 173 | @media screen and (max-width: 769px) { |
| 174 | .v-btn--large { | 174 | .v-btn--large { |
| 175 | font-size: 14px; | 175 | font-size: 14px; |
| 176 | height: 44px; | 176 | height: 44px; |
| 177 | padding: 0 32px; | 177 | padding: 0 32px; |
| 178 | } | 178 | } |
| 179 | } | 179 | } |
| 180 | </style> | 180 | </style> |
| 181 | 181 |
src/pages/generalSetting/generalSetting.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="login"> | 2 | <v-app id="login"> |
| 3 | <v-container> | 3 | <v-container> |
| 4 | <v-layout> | 4 | <v-layout> |
| 5 | <v-flex xs12 sm12 md12 lg10 class="mt-5 mx-auto"> | 5 | <v-flex xs12 sm12 md12 lg10 class="mt-5 mx-auto"> |
| 6 | <v-card flat class="card-style pa-2" dark> | 6 | <v-card flat class="Card-style pa-2"> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">General Setting</label> | 9 | <label class="title text-xs-center">General Setting</label> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-flex xs12> | 13 | <v-flex xs12> |
| 14 | <v-form class="mt-3" ref="form" v-model="valid" lazy-validation> | 14 | <v-form class="mt-3" ref="form" v-model="valid" lazy-validation> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex | 16 | <v-flex |
| 17 | xs12 | 17 | xs12 |
| 18 | class="text-xs-center text-sm-center text-md-center text-lg-center mb-4" | 18 | class="text-xs-center text-sm-center text-md-center text-lg-center mb-4" |
| 19 | > | 19 | > |
| 20 | <img | 20 | <img |
| 21 | src="/static/default_thumb.png" | 21 | src="/static/default_thumb.png" |
| 22 | height="140" | 22 | height="140" |
| 23 | width="140" | 23 | width="140" |
| 24 | v-if="!imageData.imageUrl" | 24 | v-if="!imageData.imageUrl" |
| 25 | /> | 25 | /> |
| 26 | <input | 26 | <input |
| 27 | type="file" | 27 | type="file" |
| 28 | style="display: none" | 28 | style="display: none" |
| 29 | ref="image" | 29 | ref="image" |
| 30 | accept="image/*" | 30 | accept="image/*" |
| 31 | @change="onFilePicked" | 31 | @change="onFilePicked" |
| 32 | /> | 32 | /> |
| 33 | <img | 33 | <img |
| 34 | :src="imageData.imageUrl" | 34 | :src="imageData.imageUrl" |
| 35 | height="150" | 35 | height="150" |
| 36 | width="150" | 36 | width="150" |
| 37 | v-if="imageData.imageUrl" | 37 | v-if="imageData.imageUrl" |
| 38 | /> | 38 | /> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | <v-flex xs12> | 41 | <v-flex xs12> |
| 42 | <!-- <v-layout> --> | 42 | <!-- <v-layout> --> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 sm4> | 45 | <v-flex xs4 sm4> |
| 46 | <label class="subheading right pt-4">Site Title:</label> | 46 | <label class="subheading right pt-4">Site Title:</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8 sm5> | 48 | <v-flex xs8 sm5> |
| 49 | <v-text-field | 49 | <v-text-field |
| 50 | class="ml-3" | 50 | class="ml-3" |
| 51 | placeholder="fill your Site title" | 51 | placeholder="fill your Site title" |
| 52 | v-model="setting.name" | 52 | v-model="setting.name" |
| 53 | ></v-text-field> | 53 | ></v-text-field> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs12> | 57 | <v-flex xs12> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs4 sm4> | 59 | <v-flex xs4 sm4> |
| 60 | <label class="subheading right pt-4">Phone:</label> | 60 | <label class="subheading right pt-4">Phone:</label> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | <v-flex xs8 sm5> | 62 | <v-flex xs8 sm5> |
| 63 | <v-text-field | 63 | <v-text-field |
| 64 | class="ml-3" | 64 | class="ml-3" |
| 65 | placeholder="fill your Phone number" | 65 | placeholder="fill your Phone number" |
| 66 | v-model="setting.mobile" | 66 | v-model="setting.mobile" |
| 67 | ></v-text-field> | 67 | ></v-text-field> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-flex xs12> | 71 | <v-flex xs12> |
| 72 | <v-layout> | 72 | <v-layout> |
| 73 | <v-flex xs4 sm4> | 73 | <v-flex xs4 sm4> |
| 74 | <label class="subheading right pt-4">Email:</label> | 74 | <label class="subheading right pt-4">Email:</label> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <v-flex xs8 sm5> | 76 | <v-flex xs8 sm5> |
| 77 | <v-text-field | 77 | <v-text-field |
| 78 | class="ml-3" | 78 | class="ml-3" |
| 79 | placeholder="fill your email" | 79 | placeholder="fill your email" |
| 80 | v-model="setting.email" | 80 | v-model="setting.email" |
| 81 | ></v-text-field> | 81 | ></v-text-field> |
| 82 | </v-flex> | 82 | </v-flex> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | <v-flex xs12> | 85 | <v-flex xs12> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 sm4> | 87 | <v-flex xs4 sm4> |
| 88 | <label class="subheading right pt-4">Address:</label> | 88 | <label class="subheading right pt-4">Address:</label> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | <v-flex xs8 sm5> | 90 | <v-flex xs8 sm5> |
| 91 | <v-text-field | 91 | <v-text-field |
| 92 | class="ml-3" | 92 | class="ml-3" |
| 93 | placeholder="fill your Address" | 93 | placeholder="fill your Address" |
| 94 | v-model="setting.address" | 94 | v-model="setting.address" |
| 95 | ></v-text-field> | 95 | ></v-text-field> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-flex xs12> | 99 | <v-flex xs12> |
| 100 | <v-layout> | 100 | <v-layout> |
| 101 | <v-flex xs4 sm4> | 101 | <v-flex xs4 sm4> |
| 102 | <label class="right hidden-xs-only hidden-sm-only pt-4">Uplaod Image:</label> | 102 | <label class="right hidden-xs-only hidden-sm-only pt-4">Uplaod Image:</label> |
| 103 | <label | 103 | <label |
| 104 | class="right hidden-lg-only hidden-md-only hidden-xl-only pt-4" | 104 | class="right hidden-lg-only hidden-md-only hidden-xl-only pt-4" |
| 105 | >Uplaod :</label> | 105 | >Uplaod :</label> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs8 sm5> | 107 | <v-flex xs8 sm5> |
| 108 | <v-text-field | 108 | <v-text-field |
| 109 | class="ml-3" | 109 | class="ml-3" |
| 110 | label="Select Image" | 110 | label="Select Image" |
| 111 | @click="pickFile" | 111 | @click="pickFile" |
| 112 | v-model="imageName" | 112 | v-model="imageName" |
| 113 | append-icon="attach_file" | 113 | append-icon="attach_file" |
| 114 | ></v-text-field> | 114 | ></v-text-field> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | </v-layout> | 116 | </v-layout> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-form> | 119 | </v-form> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-card-text> | 121 | </v-card-text> |
| 122 | <v-card-actions> | 122 | <v-card-actions> |
| 123 | <v-flex text-xs-center> | 123 | <v-flex text-xs-center> |
| 124 | <v-btn | 124 | <v-btn |
| 125 | class="mt-3 add-button" | 125 | class="mt-3 add-button" |
| 126 | round | 126 | round |
| 127 | dark | 127 | dark |
| 128 | large | 128 | large |
| 129 | :loading="loading" | 129 | :loading="loading" |
| 130 | @click="reset" | 130 | @click="reset" |
| 131 | >submit</v-btn> | 131 | >submit</v-btn> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-card-actions> | 133 | </v-card-actions> |
| 134 | <v-snackbar | 134 | <v-snackbar |
| 135 | :timeout="timeout" | 135 | :timeout="timeout" |
| 136 | :top="y === 'top'" | 136 | :top="y === 'top'" |
| 137 | :right="x === 'right'" | 137 | :right="x === 'right'" |
| 138 | :vertical="mode === 'vertical'" | 138 | :vertical="mode === 'vertical'" |
| 139 | v-model="snackbar" | 139 | v-model="snackbar" |
| 140 | :color="color" | 140 | :color="color" |
| 141 | >{{ text }}</v-snackbar> | 141 | >{{ text }}</v-snackbar> |
| 142 | </v-card> | 142 | </v-card> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | </v-layout> | 144 | </v-layout> |
| 145 | </v-container> | 145 | </v-container> |
| 146 | </v-app> | 146 | </v-app> |
| 147 | </template> | 147 | </template> |
| 148 | <script> | 148 | <script> |
| 149 | import http from "@/Services/http.js"; | 149 | import http from "@/Services/http.js"; |
| 150 | 150 | ||
| 151 | export default { | 151 | export default { |
| 152 | data() { | 152 | data() { |
| 153 | return { | 153 | return { |
| 154 | snackbar: false, | 154 | snackbar: false, |
| 155 | y: "top", | 155 | y: "top", |
| 156 | x: "right", | 156 | x: "right", |
| 157 | mode: "", | 157 | mode: "", |
| 158 | timeout: 4000, | 158 | timeout: 4000, |
| 159 | text: "", | 159 | text: "", |
| 160 | color: "", | 160 | color: "", |
| 161 | setting: {}, | 161 | setting: {}, |
| 162 | valid: true, | 162 | valid: true, |
| 163 | loading: false, | 163 | loading: false, |
| 164 | text: "", | 164 | text: "", |
| 165 | imageData: {}, | 165 | imageData: {}, |
| 166 | imageName: "", | 166 | imageName: "", |
| 167 | imageUrl: "", | 167 | imageUrl: "", |
| 168 | imageFile: "" | 168 | imageFile: "", |
| 169 | }; | 169 | }; |
| 170 | }, | 170 | }, |
| 171 | mounted() { | 171 | mounted() { |
| 172 | this.token = this.$store.state.token; | 172 | this.token = this.$store.state.token; |
| 173 | this.getParticularSchool(); | 173 | this.getParticularSchool(); |
| 174 | }, | 174 | }, |
| 175 | methods: { | 175 | methods: { |
| 176 | pickFile() { | 176 | pickFile() { |
| 177 | this.$refs.image.click(); | 177 | this.$refs.image.click(); |
| 178 | }, | 178 | }, |
| 179 | onFilePicked(e) { | 179 | onFilePicked(e) { |
| 180 | // console.log(e) | 180 | // console.log(e) |
| 181 | const files = e.target.files; | 181 | const files = e.target.files; |
| 182 | this.imageData.upload = e.target.files[0]; | 182 | this.imageData.upload = e.target.files[0]; |
| 183 | if (files[0] !== undefined) { | 183 | if (files[0] !== undefined) { |
| 184 | this.imageName = files[0].name; | 184 | this.imageName = files[0].name; |
| 185 | if (this.imageName.lastIndexOf(".") <= 0) { | 185 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 186 | return; | 186 | return; |
| 187 | } | 187 | } |
| 188 | const fr = new FileReader(); | 188 | const fr = new FileReader(); |
| 189 | fr.readAsDataURL(files[0]); | 189 | fr.readAsDataURL(files[0]); |
| 190 | fr.addEventListener("load", () => { | 190 | fr.addEventListener("load", () => { |
| 191 | this.imageUrl = fr.result; | 191 | this.imageUrl = fr.result; |
| 192 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 192 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 193 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 193 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 194 | }); | 194 | }); |
| 195 | } else { | 195 | } else { |
| 196 | this.imageName = ""; | 196 | this.imageName = ""; |
| 197 | this.imageFile = ""; | 197 | this.imageFile = ""; |
| 198 | this.imageUrl = ""; | 198 | this.imageUrl = ""; |
| 199 | } | 199 | } |
| 200 | }, | 200 | }, |
| 201 | reset() { | 201 | reset() { |
| 202 | if (this.$refs.form.validate()) { | 202 | if (this.$refs.form.validate()) { |
| 203 | this.loading = true; | 203 | this.loading = true; |
| 204 | if (this.imageUrl) { | 204 | if (this.imageUrl) { |
| 205 | var str = this.imageUrl; | 205 | var str = this.imageUrl; |
| 206 | const [baseUrl, imageUrl] = str.split(/,/); | 206 | const [baseUrl, imageUrl] = str.split(/,/); |
| 207 | this.setting.upload = imageUrl; | 207 | this.setting.upload = imageUrl; |
| 208 | } | 208 | } |
| 209 | this.setting.schoolId = this.$store.state.id; | 209 | this.setting.schoolId = this.$store.state.id; |
| 210 | http() | 210 | http() |
| 211 | .put("/updateSchool", this.setting, { | 211 | .put("/updateSchool", this.setting, { |
| 212 | headers: { Authorization: "Bearer " + this.token } | 212 | headers: { Authorization: "Bearer " + this.token }, |
| 213 | }) | 213 | }) |
| 214 | .then(response => { | 214 | .then((response) => { |
| 215 | this.loading = false; | 215 | this.loading = false; |
| 216 | this.snackbar = true; | 216 | this.snackbar = true; |
| 217 | this.text = response.data.message; | 217 | this.text = response.data.message; |
| 218 | this.color = "green"; | 218 | this.color = "green"; |
| 219 | this.imageUrl = ""; | 219 | this.imageUrl = ""; |
| 220 | }) | 220 | }) |
| 221 | .catch(error => { | 221 | .catch((error) => { |
| 222 | // console.log("err====>",err); | 222 | // console.log("err====>",err); |
| 223 | this.snackbar = true; | 223 | this.snackbar = true; |
| 224 | this.text = error.response.data.message; | 224 | this.text = error.response.data.message; |
| 225 | this.color = "error"; | 225 | this.color = "error"; |
| 226 | this.loading = false; | 226 | this.loading = false; |
| 227 | }); | 227 | }); |
| 228 | } | 228 | } |
| 229 | }, | 229 | }, |
| 230 | // getRole() { | 230 | // getRole() { |
| 231 | // this.showLoader = true; | 231 | // this.showLoader = true; |
| 232 | // http() | 232 | // http() |
| 233 | // .get("/getRolesList", { | 233 | // .get("/getRolesList", { |
| 234 | // headers: { Authorization: "Bearer " + this.token } | 234 | // headers: { Authorization: "Bearer " + this.token } |
| 235 | // }) | 235 | // }) |
| 236 | // .then(response => { | 236 | // .then(response => { |
| 237 | // for (let i = 0; i < response.data.data.length; i++) { | 237 | // for (let i = 0; i < response.data.data.length; i++) { |
| 238 | // if ( | 238 | // if ( |
| 239 | // response.data.data[i].name != "SUPERADMIN" && | 239 | // response.data.data[i].name != "SUPERADMIN" && |
| 240 | // response.data.data[i].name != "ADMIN" | 240 | // response.data.data[i].name != "ADMIN" |
| 241 | // ) { | 241 | // ) { |
| 242 | // this.getRoles.push(response.data.data[i]); | 242 | // this.getRoles.push(response.data.data[i]); |
| 243 | // this.showLoader = false; | 243 | // this.showLoader = false; |
| 244 | // } | 244 | // } |
| 245 | // } | 245 | // } |
| 246 | // }) | 246 | // }) |
| 247 | // .catch(error => { | 247 | // .catch(error => { |
| 248 | // this.showLoader = false; | 248 | // this.showLoader = false; |
| 249 | // if (error.response.status === 401) { | 249 | // if (error.response.status === 401) { |
| 250 | // this.$router.replace({ path: "/" }); | 250 | // this.$router.replace({ path: "/" }); |
| 251 | // this.$store.dispatch("setToken", null); | 251 | // this.$store.dispatch("setToken", null); |
| 252 | // this.$store.dispatch("Id", null); | 252 | // this.$store.dispatch("Id", null); |
| 253 | // } | 253 | // } |
| 254 | // }); | 254 | // }); |
| 255 | // }, | 255 | // }, |
| 256 | getParticularSchool() { | 256 | getParticularSchool() { |
| 257 | this.showLoader = true; | 257 | this.showLoader = true; |
| 258 | http() | 258 | http() |
| 259 | .get("/getParticularSchool", { | 259 | .get("/getParticularSchool", { |
| 260 | params: { | 260 | params: { |
| 261 | schoolId: this.$store.state.id | 261 | schoolId: this.$store.state.id, |
| 262 | }, | 262 | }, |
| 263 | headers: { Authorization: "Bearer " + this.token } | 263 | headers: { Authorization: "Bearer " + this.token }, |
| 264 | }) | 264 | }) |
| 265 | .then(response => { | 265 | .then((response) => { |
| 266 | this.setting = response.data.data; | 266 | this.setting = response.data.data; |
| 267 | this.imageData.imageUrl = response.data.data.schoolLogoUrl; | 267 | this.imageData.imageUrl = response.data.data.schoolLogoUrl; |
| 268 | }) | 268 | }) |
| 269 | .catch(error => { | 269 | .catch((error) => { |
| 270 | this.showLoader = false; | 270 | this.showLoader = false; |
| 271 | if (error.response.status === 401) { | 271 | if (error.response.status === 401) { |
| 272 | this.$router.replace({ path: "/" }); | 272 | this.$router.replace({ path: "/" }); |
| 273 | this.$store.dispatch("setToken", null); | 273 | this.$store.dispatch("setToken", null); |
| 274 | this.$store.dispatch("Id", null); | 274 | this.$store.dispatch("Id", null); |
| 275 | } | 275 | } |
| 276 | }); | 276 | }); |
| 277 | } | 277 | }, |
| 278 | } | 278 | }, |
| 279 | }; | 279 | }; |
| 280 | </script> | 280 | </script> |
| 281 | <style scoped> | 281 | <style scoped> |
| 282 | .v-btn--large { | 282 | .v-btn--large { |
| 283 | padding: 0px 74px; | 283 | padding: 0px 74px; |
| 284 | } | 284 | } |
| 285 | @media screen and (max-width: 769px) { | 285 | @media screen and (max-width: 769px) { |
| 286 | .v-btn--large { | 286 | .v-btn--large { |
| 287 | font-size: 14px; | 287 | font-size: 14px; |
| 288 | height: 44px; | 288 | height: 44px; |
| 289 | padding: 0 32px; | 289 | padding: 0 32px; |
| 290 | } | 290 | } |
| 291 | } | 291 | } |
| 292 | </style> | 292 | </style> |
| 293 | 293 |
src/pages/meetingEvent/meetingEvent.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS EVENT ****** --> | 3 | <!-- ****** EDITS EVENT ****** --> |
| 4 | <v-dialog v-model="editEventdialog" max-width="500px" persistent> | 4 | <v-dialog v-model="editEventdialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Meeting Event</label> | 8 | <label class="title text-xs-center">Edit Meeting Event</label> |
| 9 | <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 class="pt-4 subheading"> | 15 | <v-flex xs4 class="pt-4 subheading"> |
| 16 | <label class="right">Title:</label> | 16 | <label class="right">Title:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs7 class="ml-3"> | 18 | <v-flex xs7 class="ml-3"> |
| 19 | <v-text-field v-model="editedItem.title" type="text"></v-text-field> | 19 | <v-text-field v-model="editedItem.title" type="text"></v-text-field> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | </v-layout> | 21 | </v-layout> |
| 22 | </v-flex> | 22 | </v-flex> |
| 23 | <v-flex xs12 sm12> | 23 | <v-flex xs12 sm12> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs4 class="pt-4 subheading"> | 25 | <v-flex xs4 class="pt-4 subheading"> |
| 26 | <label class="right">Date:</label> | 26 | <label class="right">Date:</label> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs7 class="ml-3"> | 28 | <v-flex xs7 class="ml-3"> |
| 29 | <v-menu | 29 | <v-menu |
| 30 | ref="menu" | 30 | ref="menu" |
| 31 | :close-on-content-click="false" | 31 | :close-on-content-click="false" |
| 32 | v-model="menuEditDate" | 32 | v-model="menuEditDate" |
| 33 | :nudge-right="40" | 33 | :nudge-right="40" |
| 34 | lazy | 34 | lazy |
| 35 | transition="scale-transition" | 35 | transition="scale-transition" |
| 36 | offset-y | 36 | offset-y |
| 37 | full-width | 37 | full-width |
| 38 | min-width="290px" | 38 | min-width="290px" |
| 39 | > | 39 | > |
| 40 | <v-text-field | 40 | <v-text-field |
| 41 | slot="activator" | 41 | slot="activator" |
| 42 | v-model="editedItem.dateOfEvent" | 42 | v-model="editedItem.dateOfEvent" |
| 43 | placeholder="Select date" | 43 | placeholder="Select date" |
| 44 | ></v-text-field> | 44 | ></v-text-field> |
| 45 | <v-date-picker | 45 | <v-date-picker |
| 46 | color="info" | 46 | color="info" |
| 47 | ref="picker" | 47 | ref="picker" |
| 48 | v-model="editedItem.dateOfEvent" | 48 | v-model="editedItem.dateOfEvent" |
| 49 | @input="$refs.menu.save(editedItem.dateOfEvent)" | 49 | @input="$refs.menu.save(editedItem.dateOfEvent)" |
| 50 | ></v-date-picker> | 50 | ></v-date-picker> |
| 51 | </v-menu> | 51 | </v-menu> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | <v-flex xs12 sm12> | 55 | <v-flex xs12 sm12> |
| 56 | <v-layout> | 56 | <v-layout> |
| 57 | <v-flex xs4 class="pt-4 subheading"> | 57 | <v-flex xs4 class="pt-4 subheading"> |
| 58 | <label class="right">Start Time:</label> | 58 | <label class="right">Start Time:</label> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs7 class="ml-3"> | 60 | <v-flex xs7 class="ml-3"> |
| 61 | <v-menu | 61 | <v-menu |
| 62 | ref="menuEdit" | 62 | ref="menuEdit" |
| 63 | :close-on-content-click="false" | 63 | :close-on-content-click="false" |
| 64 | v-model="menuEditTime" | 64 | v-model="menuEditTime" |
| 65 | :nudge-right="40" | 65 | :nudge-right="40" |
| 66 | :return-value.sync="editedItem.startTime" | 66 | :return-value.sync="editedItem.startTime" |
| 67 | lazy | 67 | lazy |
| 68 | transition="scale-transition" | 68 | transition="scale-transition" |
| 69 | offset-y | 69 | offset-y |
| 70 | full-width | 70 | full-width |
| 71 | max-width="290px" | 71 | max-width="290px" |
| 72 | min-width="290px" | 72 | min-width="290px" |
| 73 | > | 73 | > |
| 74 | <v-text-field | 74 | <v-text-field |
| 75 | slot="activator" | 75 | slot="activator" |
| 76 | v-model="editedItem.startTime" | 76 | v-model="editedItem.startTime" |
| 77 | append-icon="access_time" | 77 | append-icon="access_time" |
| 78 | readonly | 78 | readonly |
| 79 | ></v-text-field> | 79 | ></v-text-field> |
| 80 | <v-time-picker | 80 | <v-time-picker |
| 81 | v-model="editedItem.startTime" | 81 | v-model="editedItem.startTime" |
| 82 | format="24hr" | 82 | format="24hr" |
| 83 | @change="$refs.menuEdit.save(editedItem.startTime)" | 83 | @change="$refs.menuEdit.save(editedItem.startTime)" |
| 84 | ></v-time-picker> | 84 | ></v-time-picker> |
| 85 | </v-menu> | 85 | </v-menu> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | <v-flex xs12 sm12> | 89 | <v-flex xs12 sm12> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs4 class="pt-4 subheading"> | 91 | <v-flex xs4 class="pt-4 subheading"> |
| 92 | <label class="right">Duration:</label> | 92 | <label class="right">Duration:</label> |
| 93 | </v-flex> | 93 | </v-flex> |
| 94 | <v-flex xs7 class="ml-3"> | 94 | <v-flex xs7 class="ml-3"> |
| 95 | <v-text-field v-model="editedItem.duration" type="text"></v-text-field> | 95 | <v-text-field v-model="editedItem.duration" type="text"></v-text-field> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-layout> | 99 | <v-layout> |
| 100 | <v-flex xs12> | 100 | <v-flex xs12> |
| 101 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 101 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 102 | <v-spacer></v-spacer> | 102 | <v-spacer></v-spacer> |
| 103 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 103 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 104 | </v-card-actions> | 104 | </v-card-actions> |
| 105 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 105 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 106 | <v-spacer></v-spacer> | 106 | <v-spacer></v-spacer> |
| 107 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 107 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 108 | <v-spacer></v-spacer> | 108 | <v-spacer></v-spacer> |
| 109 | </v-card-actions> | 109 | </v-card-actions> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | </v-container> | 112 | </v-container> |
| 113 | </v-card> | 113 | </v-card> |
| 114 | </v-dialog> | 114 | </v-dialog> |
| 115 | <!-- ****** PROFILE VIEW EVENT ****** --> | 115 | <!-- ****** PROFILE VIEW EVENT ****** --> |
| 116 | <v-dialog v-model="viewEventdialog" max-width="500px" persistent> | 116 | <v-dialog v-model="viewEventdialog" max-width="500px" persistent> |
| 117 | <v-card flat class="card-style pa-3" dark> | 117 | <v-card flat class="Card-style pa-3"> |
| 118 | <v-layout> | 118 | <v-layout> |
| 119 | <v-flex xs12> | 119 | <v-flex xs12> |
| 120 | <label class="title text-xs-center">View Meeting Event</label> | 120 | <label class="title text-xs-center">View Meeting Event</label> |
| 121 | <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> | 121 | <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-card-text> | 124 | <v-card-text> |
| 125 | <v-container grid-list-md> | 125 | <v-container grid-list-md> |
| 126 | <v-layout wrap> | 126 | <v-layout wrap> |
| 127 | <v-flex> | 127 | <v-flex> |
| 128 | <v-layout> | 128 | <v-layout> |
| 129 | <v-flex xs4 sm6> | 129 | <v-flex xs4 sm6> |
| 130 | <h5 class="right my-1"> | 130 | <h5 class="right my-1"> |
| 131 | <b>Title:</b> | 131 | <b>Title:</b> |
| 132 | </h5> | 132 | </h5> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | <v-flex sm6 xs8> | 134 | <v-flex sm6 xs8> |
| 135 | <h5 class="my-1">{{ editedItem.title }}</h5> | 135 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | </v-layout> | 137 | </v-layout> |
| 138 | <v-layout> | 138 | <v-layout> |
| 139 | <v-flex xs4 sm6> | 139 | <v-flex xs4 sm6> |
| 140 | <h5 class="right my-1"> | 140 | <h5 class="right my-1"> |
| 141 | <b>Date:</b> | 141 | <b>Date:</b> |
| 142 | </h5> | 142 | </h5> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | <v-flex sm6 xs8> | 144 | <v-flex sm6 xs8> |
| 145 | <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> | 145 | <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-layout> | 148 | <v-layout> |
| 149 | <v-flex xs4 sm6> | 149 | <v-flex xs4 sm6> |
| 150 | <h5 class="right my-1"> | 150 | <h5 class="right my-1"> |
| 151 | <b>Start Time:</b> | 151 | <b>Start Time:</b> |
| 152 | </h5> | 152 | </h5> |
| 153 | </v-flex> | 153 | </v-flex> |
| 154 | <v-flex sm6 xs8> | 154 | <v-flex sm6 xs8> |
| 155 | <h5 class="my-1">{{ editedItem.startTime }}</h5> | 155 | <h5 class="my-1">{{ editedItem.startTime }}</h5> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | </v-layout> | 157 | </v-layout> |
| 158 | <v-layout> | 158 | <v-layout> |
| 159 | <v-flex xs4 sm6> | 159 | <v-flex xs4 sm6> |
| 160 | <h5 class="right my-1"> | 160 | <h5 class="right my-1"> |
| 161 | <b>Type Of Event:</b> | 161 | <b>Type Of Event:</b> |
| 162 | </h5> | 162 | </h5> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | <v-flex sm6 xs8> | 164 | <v-flex sm6 xs8> |
| 165 | <h5 class="my-1">{{ editedItem.typeOfEvent }}</h5> | 165 | <h5 class="my-1">{{ editedItem.typeOfEvent }}</h5> |
| 166 | </v-flex> | 166 | </v-flex> |
| 167 | </v-layout> | 167 | </v-layout> |
| 168 | <v-layout v-if="editedItem.courseId"> | 168 | <v-layout v-if="editedItem.courseId"> |
| 169 | <v-flex xs4 sm6> | 169 | <v-flex xs4 sm6> |
| 170 | <h5 class="right my-1"> | 170 | <h5 class="right my-1"> |
| 171 | <b>Course Name:</b> | 171 | <b>Course Name:</b> |
| 172 | </h5> | 172 | </h5> |
| 173 | </v-flex> | 173 | </v-flex> |
| 174 | <v-flex sm6 xs8> | 174 | <v-flex sm6 xs8> |
| 175 | <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5> | 175 | <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | <v-layout v-if="editedItem.classId"> | 178 | <v-layout v-if="editedItem.classId"> |
| 179 | <v-flex xs4 sm6> | 179 | <v-flex xs4 sm6> |
| 180 | <h5 class="right my-1"> | 180 | <h5 class="right my-1"> |
| 181 | <b>Class:</b> | 181 | <b>Class:</b> |
| 182 | </h5> | 182 | </h5> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | <v-flex sm6 xs8> | 184 | <v-flex sm6 xs8> |
| 185 | <h5 class="my-1">{{ editedItem.classId.classNum }}</h5> | 185 | <h5 class="my-1">{{ editedItem.classId.classNum }}</h5> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | <v-layout> | 188 | <v-layout> |
| 189 | <v-flex xs4 sm6> | 189 | <v-flex xs4 sm6> |
| 190 | <h5 class="right my-1"> | 190 | <h5 class="right my-1"> |
| 191 | <b>Duration:</b> | 191 | <b>Duration:</b> |
| 192 | </h5> | 192 | </h5> |
| 193 | </v-flex> | 193 | </v-flex> |
| 194 | <v-flex sm6 xs8> | 194 | <v-flex sm6 xs8> |
| 195 | <h5 class="my-1">{{ editedItem.duration }}</h5> | 195 | <h5 class="my-1">{{ editedItem.duration }}</h5> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | </v-layout> | 197 | </v-layout> |
| 198 | </v-flex> | 198 | </v-flex> |
| 199 | </v-layout> | 199 | </v-layout> |
| 200 | </v-container> | 200 | </v-container> |
| 201 | </v-card-text> | 201 | </v-card-text> |
| 202 | </v-card> | 202 | </v-card> |
| 203 | </v-dialog> | 203 | </v-dialog> |
| 204 | 204 | ||
| 205 | <!-- ****** EVENT TABLE ****** --> | 205 | <!-- ****** EVENT TABLE ****** --> |
| 206 | 206 | ||
| 207 | <v-toolbar color="transparent" flat> | 207 | <v-toolbar color="transparent" flat> |
| 208 | <v-btn | 208 | <v-btn |
| 209 | fab | 209 | fab |
| 210 | dark | 210 | dark |
| 211 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 211 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 212 | small | 212 | small |
| 213 | @click="meetEventDialog = true" | 213 | @click="meetEventDialog = true" |
| 214 | > | 214 | > |
| 215 | <v-icon dark>add</v-icon> | 215 | <v-icon dark>add</v-icon> |
| 216 | </v-btn> | 216 | </v-btn> |
| 217 | <v-btn | 217 | <v-btn |
| 218 | round | 218 | round |
| 219 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 219 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 220 | dark | 220 | dark |
| 221 | @click="meetEventDialog = true" | 221 | @click="meetEventDialog = true" |
| 222 | > | 222 | > |
| 223 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event | 223 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event |
| 224 | </v-btn> | 224 | </v-btn> |
| 225 | <v-spacer></v-spacer> | 225 | <v-spacer></v-spacer> |
| 226 | <v-card-title class="body-1" v-show="show"> | 226 | <v-card-title class="body-1" v-show="show"> |
| 227 | <v-btn icon large flat @click="displaySearch"> | 227 | <v-btn icon large flat @click="displaySearch"> |
| 228 | <v-avatar size="27"> | 228 | <v-avatar size="27"> |
| 229 | <img src="/static/icon/search.png" alt="icon" /> | 229 | <img src="/static/icon/search.png" alt="icon" /> |
| 230 | </v-avatar> | 230 | </v-avatar> |
| 231 | </v-btn> | 231 | </v-btn> |
| 232 | </v-card-title> | 232 | </v-card-title> |
| 233 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 233 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-text-field | 235 | <v-text-field |
| 236 | autofocus | 236 | autofocus |
| 237 | v-model="search" | 237 | v-model="search" |
| 238 | label="Search" | 238 | label="Search" |
| 239 | prepend-inner-icon="search" | 239 | prepend-inner-icon="search" |
| 240 | color="primary" | 240 | color="primary" |
| 241 | ></v-text-field> | 241 | ></v-text-field> |
| 242 | <v-icon @click="closeSearch" color="error">close</v-icon> | 242 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 243 | </v-layout> | 243 | </v-layout> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-toolbar> | 245 | </v-toolbar> |
| 246 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> | 246 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> |
| 247 | <template slot="items" slot-scope="props"> | 247 | <template slot="items" slot-scope="props"> |
| 248 | <tr class="tr"> | 248 | <tr class="tr"> |
| 249 | <td class="td td-row">{{ props.index + 1}}</td> | 249 | <td class="td td-row">{{ props.index + 1}}</td> |
| 250 | <td | 250 | <td |
| 251 | class="td td-row text-xs-center" | 251 | class="td td-row text-xs-center" |
| 252 | >{{ props.item.classId ? props.item.classId.classNum : "-" }}</td> | 252 | >{{ props.item.classId ? props.item.classId.classNum : "-" }}</td> |
| 253 | <td class="td td-row text-xs-center">{{ props.item.title }}</td> | 253 | <td class="td td-row text-xs-center">{{ props.item.title }}</td> |
| 254 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td> | 254 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td> |
| 255 | <td class="td td-row text-xs-center">{{ props.item.startTime }}</td> | 255 | <td class="td td-row text-xs-center">{{ props.item.startTime }}</td> |
| 256 | <td class="td td-row text-xs-center"> | 256 | <td class="td td-row text-xs-center"> |
| 257 | <span> | 257 | <span> |
| 258 | <v-tooltip top> | 258 | <v-tooltip top> |
| 259 | <img | 259 | <img |
| 260 | slot="activator" | 260 | slot="activator" |
| 261 | style="cursor:pointer; width:25px; height:25px; " | 261 | style="cursor:pointer; width:25px; height:25px; " |
| 262 | class="mr-3" | 262 | class="mr-3" |
| 263 | @click="profile(props.item)" | 263 | @click="profile(props.item)" |
| 264 | src="/static/icon/view.png" | 264 | src="/static/icon/view.png" |
| 265 | /> | 265 | /> |
| 266 | <span>View</span> | 266 | <span>View</span> |
| 267 | </v-tooltip> | 267 | </v-tooltip> |
| 268 | <v-tooltip top> | 268 | <v-tooltip top> |
| 269 | <img | 269 | <img |
| 270 | slot="activator" | 270 | slot="activator" |
| 271 | style="cursor:pointer; width:20px; height:18px; " | 271 | style="cursor:pointer; width:20px; height:18px; " |
| 272 | class="mr-3" | 272 | class="mr-3" |
| 273 | @click="editItem(props.item)" | 273 | @click="editItem(props.item)" |
| 274 | src="/static/icon/edit.png" | 274 | src="/static/icon/edit.png" |
| 275 | /> | 275 | /> |
| 276 | <span>Edit</span> | 276 | <span>Edit</span> |
| 277 | </v-tooltip> | 277 | </v-tooltip> |
| 278 | <v-tooltip top> | 278 | <v-tooltip top> |
| 279 | <img | 279 | <img |
| 280 | slot="activator" | 280 | slot="activator" |
| 281 | style="cursor:pointer; width:20px; height:20px; " | 281 | style="cursor:pointer; width:20px; height:20px; " |
| 282 | class="mr-3" | 282 | class="mr-3" |
| 283 | @click="deleteItem(props.item)" | 283 | @click="deleteItem(props.item)" |
| 284 | src="/static/icon/delete.png" | 284 | src="/static/icon/delete.png" |
| 285 | /> | 285 | /> |
| 286 | <span>Delete</span> | 286 | <span>Delete</span> |
| 287 | </v-tooltip> | 287 | </v-tooltip> |
| 288 | </span> | 288 | </span> |
| 289 | </td> | 289 | </td> |
| 290 | </tr> | 290 | </tr> |
| 291 | </template> | 291 | </template> |
| 292 | <v-alert | 292 | <v-alert |
| 293 | slot="no-results" | 293 | slot="no-results" |
| 294 | :value="true" | 294 | :value="true" |
| 295 | color="error" | 295 | color="error" |
| 296 | icon="warning" | 296 | icon="warning" |
| 297 | >Your search for "{{ search }}" found no results.</v-alert> | 297 | >Your search for "{{ search }}" found no results.</v-alert> |
| 298 | </v-data-table> | 298 | </v-data-table> |
| 299 | <!-- ****** ADD MULTIPLE EVENT ****** --> | 299 | <!-- ****** ADD MULTIPLE EVENT ****** --> |
| 300 | <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog"> | 300 | <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog"> |
| 301 | <v-card flat class="card-style pa-2" dark> | 301 | <v-card flat class="Card-style pa-2"> |
| 302 | <v-layout> | 302 | <v-layout> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <label class="title text-xs-center">Add Meeting Event</label> | 304 | <label class="title text-xs-center">Add Meeting Event</label> |
| 305 | <v-icon | 305 | <v-icon |
| 306 | size="24" | 306 | size="24" |
| 307 | class="right" | 307 | class="right" |
| 308 | @click="meetEventDialog = false; $refs.form.reset()" | 308 | @click="meetEventDialog = false; $refs.form.reset()" |
| 309 | >cancel</v-icon> | 309 | >cancel</v-icon> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | <v-form ref="form" v-model="valid" lazy-validation> | 312 | <v-form ref="form" v-model="valid" lazy-validation> |
| 313 | <v-container fluid> | 313 | <v-container fluid> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 class="pt-4 subheading"> | 316 | <v-flex xs4 class="pt-4 subheading"> |
| 317 | <label class="right">Title:</label> | 317 | <label class="right">Title:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs8 sm8 class="ml-3"> | 319 | <v-flex xs8 sm8 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="meetEvent.title" | 321 | v-model="meetEvent.title" |
| 322 | placeholder="fill your Title" | 322 | placeholder="fill your Title" |
| 323 | type="text" | 323 | type="text" |
| 324 | :rules="titleRules" | 324 | :rules="titleRules" |
| 325 | required | 325 | required |
| 326 | ></v-text-field> | 326 | ></v-text-field> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | </v-layout> | 328 | </v-layout> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <v-layout> | 331 | <v-layout> |
| 332 | <v-flex xs4 class="pt-4 subheading"> | 332 | <v-flex xs4 class="pt-4 subheading"> |
| 333 | <label class="right">Date:</label> | 333 | <label class="right">Date:</label> |
| 334 | </v-flex> | 334 | </v-flex> |
| 335 | <v-flex xs8 sm8 class="ml-3"> | 335 | <v-flex xs8 sm8 class="ml-3"> |
| 336 | <v-menu | 336 | <v-menu |
| 337 | ref="menu1" | 337 | ref="menu1" |
| 338 | :close-on-content-click="false" | 338 | :close-on-content-click="false" |
| 339 | v-model="menu1" | 339 | v-model="menu1" |
| 340 | :nudge-right="40" | 340 | :nudge-right="40" |
| 341 | :return-value.sync="meetEvent.dateOfEvent" | 341 | :return-value.sync="meetEvent.dateOfEvent" |
| 342 | app | 342 | app |
| 343 | lazy | 343 | lazy |
| 344 | transition="scale-transition" | 344 | transition="scale-transition" |
| 345 | offset-y | 345 | offset-y |
| 346 | full-width | 346 | full-width |
| 347 | min-width="290px" | 347 | min-width="290px" |
| 348 | > | 348 | > |
| 349 | <v-text-field | 349 | <v-text-field |
| 350 | slot="activator" | 350 | slot="activator" |
| 351 | :rules="dateRules" | 351 | :rules="dateRules" |
| 352 | v-model="meetEvent.dateOfEvent" | 352 | v-model="meetEvent.dateOfEvent" |
| 353 | append-icon="event" | 353 | append-icon="event" |
| 354 | placeholder="Select date" | 354 | placeholder="Select date" |
| 355 | ></v-text-field> | 355 | ></v-text-field> |
| 356 | <v-date-picker | 356 | <v-date-picker |
| 357 | color="info" | 357 | color="info" |
| 358 | v-model="meetEvent.dateOfEvent" | 358 | v-model="meetEvent.dateOfEvent" |
| 359 | @input="$refs.menu1.save(meetEvent.dateOfEvent)" | 359 | @input="$refs.menu1.save(meetEvent.dateOfEvent)" |
| 360 | ></v-date-picker> | 360 | ></v-date-picker> |
| 361 | </v-menu> | 361 | </v-menu> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | <v-flex xs12> | 365 | <v-flex xs12> |
| 366 | <v-layout> | 366 | <v-layout> |
| 367 | <v-flex xs4 class="pt-4 subheading"> | 367 | <v-flex xs4 class="pt-4 subheading"> |
| 368 | <label class="right">Start Time:</label> | 368 | <label class="right">Start Time:</label> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | <v-flex xs8 sm8 class="ml-3"> | 370 | <v-flex xs8 sm8 class="ml-3"> |
| 371 | <v-menu | 371 | <v-menu |
| 372 | ref="menuA" | 372 | ref="menuA" |
| 373 | :close-on-content-click="false" | 373 | :close-on-content-click="false" |
| 374 | v-model="menu2" | 374 | v-model="menu2" |
| 375 | :nudge-right="40" | 375 | :nudge-right="40" |
| 376 | :return-value.sync="meetEvent.startTime" | 376 | :return-value.sync="meetEvent.startTime" |
| 377 | lazy | 377 | lazy |
| 378 | transition="scale-transition" | 378 | transition="scale-transition" |
| 379 | offset-y | 379 | offset-y |
| 380 | full-width | 380 | full-width |
| 381 | max-width="290px" | 381 | max-width="290px" |
| 382 | min-width="290px" | 382 | min-width="290px" |
| 383 | > | 383 | > |
| 384 | <v-text-field | 384 | <v-text-field |
| 385 | slot="activator" | 385 | slot="activator" |
| 386 | v-model="meetEvent.startTime" | 386 | v-model="meetEvent.startTime" |
| 387 | placeholder="Select Start time" | 387 | placeholder="Select Start time" |
| 388 | append-icon="access_time" | 388 | append-icon="access_time" |
| 389 | :rules="startTimeRules" | 389 | :rules="startTimeRules" |
| 390 | readonly | 390 | readonly |
| 391 | ></v-text-field> | 391 | ></v-text-field> |
| 392 | <v-time-picker | 392 | <v-time-picker |
| 393 | v-model="meetEvent.startTime" | 393 | v-model="meetEvent.startTime" |
| 394 | format="24hr" | 394 | format="24hr" |
| 395 | @change="$refs.menuA.save(meetEvent.startTime)" | 395 | @change="$refs.menuA.save(meetEvent.startTime)" |
| 396 | ></v-time-picker> | 396 | ></v-time-picker> |
| 397 | </v-menu> | 397 | </v-menu> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | </v-flex> | 400 | </v-flex> |
| 401 | <v-flex xs12> | 401 | <v-flex xs12> |
| 402 | <v-layout> | 402 | <v-layout> |
| 403 | <v-flex xs4 class="pt-4 subheading"> | 403 | <v-flex xs4 class="pt-4 subheading"> |
| 404 | <label class="right">Type Of Event:</label> | 404 | <label class="right">Type Of Event:</label> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | <v-flex xs8 sm8 class="ml-3"> | 406 | <v-flex xs8 sm8 class="ml-3"> |
| 407 | <v-select | 407 | <v-select |
| 408 | :items="typeOfEvent" | 408 | :items="typeOfEvent" |
| 409 | label="Select Type Of Event" | 409 | label="Select Type Of Event" |
| 410 | v-model="meetEvent.typeOfEvent" | 410 | v-model="meetEvent.typeOfEvent" |
| 411 | :rules="typeOfEventRules" | 411 | :rules="typeOfEventRules" |
| 412 | ></v-select> | 412 | ></v-select> |
| 413 | </v-flex> | 413 | </v-flex> |
| 414 | </v-layout> | 414 | </v-layout> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | <v-flex xs12 v-show="meetEvent.typeOfEvent"> | 416 | <v-flex xs12 v-show="meetEvent.typeOfEvent"> |
| 417 | <v-layout> | 417 | <v-layout> |
| 418 | <v-flex xs4 class="pt-4 subheading"> | 418 | <v-flex xs4 class="pt-4 subheading"> |
| 419 | <label class="right">Class:</label> | 419 | <label class="right">Class:</label> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | <v-flex xs8 sm8 class="ml-3"> | 421 | <v-flex xs8 sm8 class="ml-3"> |
| 422 | <v-select | 422 | <v-select |
| 423 | :items="addclass" | 423 | :items="addclass" |
| 424 | label="Select Class" | 424 | label="Select Class" |
| 425 | v-model="meetEvent.classId" | 425 | v-model="meetEvent.classId" |
| 426 | item-text="classNum" | 426 | item-text="classNum" |
| 427 | item-value="_id" | 427 | item-value="_id" |
| 428 | @change="getCourses(meetEvent.classId)" | 428 | @change="getCourses(meetEvent.classId)" |
| 429 | ></v-select> | 429 | ></v-select> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | </v-flex> | 432 | </v-flex> |
| 433 | <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'"> | 433 | <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'"> |
| 434 | <v-layout> | 434 | <v-layout> |
| 435 | <v-flex xs4 class="pt-4 subheading"> | 435 | <v-flex xs4 class="pt-4 subheading"> |
| 436 | <label class="right">Courses:</label> | 436 | <label class="right">Courses:</label> |
| 437 | </v-flex> | 437 | </v-flex> |
| 438 | <v-flex xs8 sm8 class="ml-3"> | 438 | <v-flex xs8 sm8 class="ml-3"> |
| 439 | <v-select | 439 | <v-select |
| 440 | :items="courseData" | 440 | :items="courseData" |
| 441 | label="Select Course" | 441 | label="Select Course" |
| 442 | v-model="meetEvent.courseId" | 442 | v-model="meetEvent.courseId" |
| 443 | item-text="courseName" | 443 | item-text="courseName" |
| 444 | item-value="_id" | 444 | item-value="_id" |
| 445 | required | 445 | required |
| 446 | ></v-select> | 446 | ></v-select> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | </v-layout> | 448 | </v-layout> |
| 449 | </v-flex> | 449 | </v-flex> |
| 450 | <v-flex xs12> | 450 | <v-flex xs12> |
| 451 | <v-layout> | 451 | <v-layout> |
| 452 | <v-flex xs4 class="pt-4 subheading"> | 452 | <v-flex xs4 class="pt-4 subheading"> |
| 453 | <label class="right">Duration</label> | 453 | <label class="right">Duration</label> |
| 454 | </v-flex> | 454 | </v-flex> |
| 455 | <v-flex xs8 sm8 class="ml-3"> | 455 | <v-flex xs8 sm8 class="ml-3"> |
| 456 | <v-text-field | 456 | <v-text-field |
| 457 | placeholder="fill your Description" | 457 | placeholder="fill your Description" |
| 458 | :rules="descriptionRules" | 458 | :rules="descriptionRules" |
| 459 | v-model="meetEvent.duration" | 459 | v-model="meetEvent.duration" |
| 460 | type="text" | 460 | type="text" |
| 461 | required | 461 | required |
| 462 | ></v-text-field> | 462 | ></v-text-field> |
| 463 | </v-flex> | 463 | </v-flex> |
| 464 | </v-layout> | 464 | </v-layout> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-layout> | 466 | <v-layout> |
| 467 | <v-flex xs12> | 467 | <v-flex xs12> |
| 468 | <v-layout class="right"> | 468 | <v-layout class="right"> |
| 469 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 469 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 470 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 470 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 471 | </v-layout> | 471 | </v-layout> |
| 472 | </v-flex> | 472 | </v-flex> |
| 473 | </v-layout> | 473 | </v-layout> |
| 474 | </v-container> | 474 | </v-container> |
| 475 | </v-form> | 475 | </v-form> |
| 476 | </v-card> | 476 | </v-card> |
| 477 | </v-dialog> | 477 | </v-dialog> |
| 478 | <v-snackbar | 478 | <v-snackbar |
| 479 | :timeout="timeout" | 479 | :timeout="timeout" |
| 480 | :top="y === 'top'" | 480 | :top="y === 'top'" |
| 481 | :right="x === 'right'" | 481 | :right="x === 'right'" |
| 482 | :vertical="mode === 'vertical'" | 482 | :vertical="mode === 'vertical'" |
| 483 | v-model="snackbar" | 483 | v-model="snackbar" |
| 484 | :color="color" | 484 | :color="color" |
| 485 | >{{ text }}</v-snackbar> | 485 | >{{ text }}</v-snackbar> |
| 486 | <div class="loader" v-if="showLoader"> | 486 | <div class="loader" v-if="showLoader"> |
| 487 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 487 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 488 | </div> | 488 | </div> |
| 489 | </v-container> | 489 | </v-container> |
| 490 | </template> | 490 | </template> |
| 491 | 491 | ||
| 492 | <script> | 492 | <script> |
| 493 | import http from "@/Services/http.js"; | 493 | import http from "@/Services/http.js"; |
| 494 | import moment from "moment"; | 494 | import moment from "moment"; |
| 495 | 495 | ||
| 496 | export default { | 496 | export default { |
| 497 | data: () => ({ | 497 | data: () => ({ |
| 498 | snackbar: false, | 498 | snackbar: false, |
| 499 | y: "top", | 499 | y: "top", |
| 500 | x: "right", | 500 | x: "right", |
| 501 | mode: "", | 501 | mode: "", |
| 502 | timeout: 5000, | 502 | timeout: 5000, |
| 503 | text: "", | 503 | text: "", |
| 504 | color: "", | 504 | color: "", |
| 505 | loading: false, | 505 | loading: false, |
| 506 | date: null, | 506 | date: null, |
| 507 | search: "", | 507 | search: "", |
| 508 | color: "", | 508 | color: "", |
| 509 | show: true, | 509 | show: true, |
| 510 | meetEventDialog: false, | 510 | meetEventDialog: false, |
| 511 | showSearch: false, | 511 | showSearch: false, |
| 512 | showLoader: false, | 512 | showLoader: false, |
| 513 | editEventdialog: false, | 513 | editEventdialog: false, |
| 514 | viewEventdialog: false, | 514 | viewEventdialog: false, |
| 515 | valid: true, | 515 | valid: true, |
| 516 | addclass: [], | 516 | addclass: [], |
| 517 | courseData: [], | 517 | courseData: [], |
| 518 | pagination: { | 518 | pagination: { |
| 519 | rowsPerPage: 10, | 519 | rowsPerPage: 10, |
| 520 | }, | 520 | }, |
| 521 | date: null, | 521 | date: null, |
| 522 | menu1: false, | 522 | menu1: false, |
| 523 | menu: false, | 523 | menu: false, |
| 524 | menuEditTime: false, | 524 | menuEditTime: false, |
| 525 | menuEditDate: false, | 525 | menuEditDate: false, |
| 526 | titleRules: [(v) => !!v || " Tilte is required"], | 526 | titleRules: [(v) => !!v || " Tilte is required"], |
| 527 | descriptionRules: [(v) => !!v || " Discription is required"], | 527 | descriptionRules: [(v) => !!v || " Discription is required"], |
| 528 | dateRules: [(v) => !!v || "Date of event is required"], | 528 | dateRules: [(v) => !!v || "Date of event is required"], |
| 529 | startTimeRules: [(v) => !!v || "Start Time is required"], | 529 | startTimeRules: [(v) => !!v || "Start Time is required"], |
| 530 | typeOfEventRules: [(v) => !!v || "Type of event is required"], | 530 | typeOfEventRules: [(v) => !!v || "Type of event is required"], |
| 531 | headers: [ | 531 | headers: [ |
| 532 | { | 532 | { |
| 533 | text: "No", | 533 | text: "No", |
| 534 | align: "", | 534 | align: "", |
| 535 | sortable: false, | 535 | sortable: false, |
| 536 | value: "No", | 536 | value: "No", |
| 537 | }, | 537 | }, |
| 538 | { | 538 | { |
| 539 | text: "Class", | 539 | text: "Class", |
| 540 | value: "classNum", | 540 | value: "classNum", |
| 541 | sortable: false, | 541 | sortable: false, |
| 542 | align: "center", | 542 | align: "center", |
| 543 | }, | 543 | }, |
| 544 | { text: "Title", value: "title", sortable: false, align: "center" }, | 544 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 545 | { | 545 | { |
| 546 | text: "Date Of Event", | 546 | text: "Date Of Event", |
| 547 | value: "dateOfEvent", | 547 | value: "dateOfEvent", |
| 548 | sortable: false, | 548 | sortable: false, |
| 549 | align: "center", | 549 | align: "center", |
| 550 | }, | 550 | }, |
| 551 | { | 551 | { |
| 552 | text: "Start Time", | 552 | text: "Start Time", |
| 553 | value: "startTime", | 553 | value: "startTime", |
| 554 | sortable: false, | 554 | sortable: false, |
| 555 | align: "center", | 555 | align: "center", |
| 556 | }, | 556 | }, |
| 557 | { text: "Action", value: "", sortable: false, align: "center" }, | 557 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 558 | ], | 558 | ], |
| 559 | events: [], | 559 | events: [], |
| 560 | typeOfEvent: ["Class", "Course"], | 560 | typeOfEvent: ["Class", "Course"], |
| 561 | editedIndex: -1, | 561 | editedIndex: -1, |
| 562 | meetEvent: { | 562 | meetEvent: { |
| 563 | startTime: null, | 563 | startTime: null, |
| 564 | }, | 564 | }, |
| 565 | editedItem: {}, | 565 | editedItem: {}, |
| 566 | menu1: false, | 566 | menu1: false, |
| 567 | menu2: false, | 567 | menu2: false, |
| 568 | loginId: "", | 568 | loginId: "", |
| 569 | }), | 569 | }), |
| 570 | watch: { | 570 | watch: { |
| 571 | meetEventDialog: function (val) { | 571 | meetEventDialog: function (val) { |
| 572 | if (!val) { | 572 | if (!val) { |
| 573 | this.meetEvent = []; | 573 | this.meetEvent = []; |
| 574 | } | 574 | } |
| 575 | }, | 575 | }, |
| 576 | }, | 576 | }, |
| 577 | methods: { | 577 | methods: { |
| 578 | dates: function (date) { | 578 | dates: function (date) { |
| 579 | return moment(date).format("MMMM DD, YYYY"); | 579 | return moment(date).format("MMMM DD, YYYY"); |
| 580 | }, | 580 | }, |
| 581 | getEvents() { | 581 | getEvents() { |
| 582 | this.showLoader = true; | 582 | this.showLoader = true; |
| 583 | var token = this.$store.state.token; | 583 | var token = this.$store.state.token; |
| 584 | http() | 584 | http() |
| 585 | .get("/getMeetingEventesList", { | 585 | .get("/getMeetingEventesList", { |
| 586 | params: { teacherId: this.loginId }, | 586 | params: { teacherId: this.loginId }, |
| 587 | headers: { Authorization: "Bearer " + token }, | 587 | headers: { Authorization: "Bearer " + token }, |
| 588 | }) | 588 | }) |
| 589 | .then((response) => { | 589 | .then((response) => { |
| 590 | this.events = response.data.data; | 590 | this.events = response.data.data; |
| 591 | this.showLoader = false; | 591 | this.showLoader = false; |
| 592 | }) | 592 | }) |
| 593 | .catch((error) => { | 593 | .catch((error) => { |
| 594 | // console.log("err====>", err); | 594 | // console.log("err====>", err); |
| 595 | this.showLoader = false; | 595 | this.showLoader = false; |
| 596 | if (error.response.status === 401) { | 596 | if (error.response.status === 401) { |
| 597 | this.$router.replace({ path: "/" }); | 597 | this.$router.replace({ path: "/" }); |
| 598 | this.$store.dispatch("setToken", null); | 598 | this.$store.dispatch("setToken", null); |
| 599 | this.$store.dispatch("Id", null); | 599 | this.$store.dispatch("Id", null); |
| 600 | } | 600 | } |
| 601 | }); | 601 | }); |
| 602 | }, | 602 | }, |
| 603 | editItem(item) { | 603 | editItem(item) { |
| 604 | this.editedIndex = this.events.indexOf(item); | 604 | this.editedIndex = this.events.indexOf(item); |
| 605 | this.editedItem = Object.assign({}, item); | 605 | this.editedItem = Object.assign({}, item); |
| 606 | this.editedItem.meetingEventId = item._id; | 606 | this.editedItem.meetingEventId = item._id; |
| 607 | this.editedItem.startTime = moment(this.editedItem.startTime, [ | 607 | this.editedItem.startTime = moment(this.editedItem.startTime, [ |
| 608 | "h:mm A", | 608 | "h:mm A", |
| 609 | ]).format("HH:mm"); | 609 | ]).format("HH:mm"); |
| 610 | this.editEventdialog = true; | 610 | this.editEventdialog = true; |
| 611 | }, | 611 | }, |
| 612 | profile(item) { | 612 | profile(item) { |
| 613 | this.editedIndex = this.events.indexOf(item); | 613 | this.editedIndex = this.events.indexOf(item); |
| 614 | this.editedItem = Object.assign({}, item); | 614 | this.editedItem = Object.assign({}, item); |
| 615 | this.viewEventdialog = true; | 615 | this.viewEventdialog = true; |
| 616 | }, | 616 | }, |
| 617 | 617 | ||
| 618 | deleteItem(item) { | 618 | deleteItem(item) { |
| 619 | let deleteEvent = { | 619 | let deleteEvent = { |
| 620 | meetingEventId: item._id, | 620 | meetingEventId: item._id, |
| 621 | }; | 621 | }; |
| 622 | http() | 622 | http() |
| 623 | .delete( | 623 | .delete( |
| 624 | "/deleteMeetingEvent", | 624 | "/deleteMeetingEvent", |
| 625 | confirm("Are you sure you want to delete this?") && { | 625 | confirm("Are you sure you want to delete this?") && { |
| 626 | params: deleteEvent, | 626 | params: deleteEvent, |
| 627 | } | 627 | } |
| 628 | ) | 628 | ) |
| 629 | .then((response) => { | 629 | .then((response) => { |
| 630 | this.snackbar = true; | 630 | this.snackbar = true; |
| 631 | this.text = response.data.message; | 631 | this.text = response.data.message; |
| 632 | this.getEvents(); | 632 | this.getEvents(); |
| 633 | this.snackbar = true; | 633 | this.snackbar = true; |
| 634 | this.color = "green"; | 634 | this.color = "green"; |
| 635 | this.text = response.data.message; | 635 | this.text = response.data.message; |
| 636 | }) | 636 | }) |
| 637 | .catch((error) => { | 637 | .catch((error) => { |
| 638 | this.snackbar = true; | 638 | this.snackbar = true; |
| 639 | this.text = error.response.data.message; | 639 | this.text = error.response.data.message; |
| 640 | this.color = "error"; | 640 | this.color = "error"; |
| 641 | this.loading = false; | 641 | this.loading = false; |
| 642 | }); | 642 | }); |
| 643 | }, | 643 | }, |
| 644 | getAllClass() { | 644 | getAllClass() { |
| 645 | http() | 645 | http() |
| 646 | .get("/getClassesList") | 646 | .get("/getClassesList") |
| 647 | .then((response) => { | 647 | .then((response) => { |
| 648 | this.addclass = response.data.data; | 648 | this.addclass = response.data.data; |
| 649 | }) | 649 | }) |
| 650 | .catch((error) => { | 650 | .catch((error) => { |
| 651 | // console.log("err====>", err); | 651 | // console.log("err====>", err); |
| 652 | // this.$router.replace({ path: "/" }); | 652 | // this.$router.replace({ path: "/" }); |
| 653 | }); | 653 | }); |
| 654 | }, | 654 | }, |
| 655 | getCourses(classId) { | 655 | getCourses(classId) { |
| 656 | this.showLoader = true; | 656 | this.showLoader = true; |
| 657 | http() | 657 | http() |
| 658 | .get("/getCourseesList", { | 658 | .get("/getCourseesList", { |
| 659 | params: { | 659 | params: { |
| 660 | classId: classId, | 660 | classId: classId, |
| 661 | }, | 661 | }, |
| 662 | }) | 662 | }) |
| 663 | .then((response) => { | 663 | .then((response) => { |
| 664 | this.courseData = response.data.data; | 664 | this.courseData = response.data.data; |
| 665 | this.showLoader = false; | 665 | this.showLoader = false; |
| 666 | }) | 666 | }) |
| 667 | .catch((err) => { | 667 | .catch((err) => { |
| 668 | // console.log("err====>", err); | 668 | // console.log("err====>", err); |
| 669 | this.showLoader = false; | 669 | this.showLoader = false; |
| 670 | this.snackbar = true; | 670 | this.snackbar = true; |
| 671 | this.color = "error"; | 671 | this.color = "error"; |
| 672 | this.text = error.response.data.message; | 672 | this.text = error.response.data.message; |
| 673 | }); | 673 | }); |
| 674 | }, | 674 | }, |
| 675 | close() { | 675 | close() { |
| 676 | this.editEventdialog = false; | 676 | this.editEventdialog = false; |
| 677 | }, | 677 | }, |
| 678 | submit() { | 678 | submit() { |
| 679 | if (this.$refs.form.validate()) { | 679 | if (this.$refs.form.validate()) { |
| 680 | this.loading = true; | 680 | this.loading = true; |
| 681 | this.meetEvent.startTime = moment( | 681 | this.meetEvent.startTime = moment( |
| 682 | this.meetEvent.startTime, | 682 | this.meetEvent.startTime, |
| 683 | "hh:mm" | 683 | "hh:mm" |
| 684 | ).format("LT"); | 684 | ).format("LT"); |
| 685 | http() | 685 | http() |
| 686 | .post("/createMeetingEvent", this.meetEvent) | 686 | .post("/createMeetingEvent", this.meetEvent) |
| 687 | .then((response) => { | 687 | .then((response) => { |
| 688 | this.snackbar = true; | 688 | this.snackbar = true; |
| 689 | this.text = response.data.message; | 689 | this.text = response.data.message; |
| 690 | this.color = "green"; | 690 | this.color = "green"; |
| 691 | this.getEvents(); | 691 | this.getEvents(); |
| 692 | this.clear(); | 692 | this.clear(); |
| 693 | this.loading = false; | 693 | this.loading = false; |
| 694 | this.meetEventDialog = false; | 694 | this.meetEventDialog = false; |
| 695 | }) | 695 | }) |
| 696 | .catch((error) => { | 696 | .catch((error) => { |
| 697 | this.snackbar = true; | 697 | this.snackbar = true; |
| 698 | this.text = error.response.data.message; | 698 | this.text = error.response.data.message; |
| 699 | this.color = "error"; | 699 | this.color = "error"; |
| 700 | this.loading = false; | 700 | this.loading = false; |
| 701 | }); | 701 | }); |
| 702 | } | 702 | } |
| 703 | }, | 703 | }, |
| 704 | clear() { | 704 | clear() { |
| 705 | this.$refs.form.reset(); | 705 | this.$refs.form.reset(); |
| 706 | }, | 706 | }, |
| 707 | save() { | 707 | save() { |
| 708 | // console.log("=======this.editedItem=====", this.editedItem); | 708 | // console.log("=======this.editedItem=====", this.editedItem); |
| 709 | if (this.editedItem.courseId) { | 709 | if (this.editedItem.courseId) { |
| 710 | this.editedItem.courseId = this.editedItem.courseId._id; | 710 | this.editedItem.courseId = this.editedItem.courseId._id; |
| 711 | } | 711 | } |
| 712 | delete this.editedItem.classId; | 712 | delete this.editedItem.classId; |
| 713 | 713 | ||
| 714 | this.editedItem.startTime = moment( | 714 | this.editedItem.startTime = moment( |
| 715 | this.editedItem.startTime, | 715 | this.editedItem.startTime, |
| 716 | "hh:mm" | 716 | "hh:mm" |
| 717 | ).format("LT"); | 717 | ).format("LT"); |
| 718 | http() | 718 | http() |
| 719 | .put("/updateMeetingEvent", this.editedItem) | 719 | .put("/updateMeetingEvent", this.editedItem) |
| 720 | .then((response) => { | 720 | .then((response) => { |
| 721 | this.snackbar = true; | 721 | this.snackbar = true; |
| 722 | this.text = response.data.message; | 722 | this.text = response.data.message; |
| 723 | this.color = "green"; | 723 | this.color = "green"; |
| 724 | this.getEvents(); | 724 | this.getEvents(); |
| 725 | this.close(); | 725 | this.close(); |
| 726 | }) | 726 | }) |
| 727 | .catch((error) => { | 727 | .catch((error) => { |
| 728 | this.snackbar = true; | 728 | this.snackbar = true; |
| 729 | this.text = error.response.data.message; | 729 | this.text = error.response.data.message; |
| 730 | this.color = "error"; | 730 | this.color = "error"; |
| 731 | }); | 731 | }); |
| 732 | }, | 732 | }, |
| 733 | displaySearch() { | 733 | displaySearch() { |
| 734 | (this.show = false), (this.showSearch = true); | 734 | (this.show = false), (this.showSearch = true); |
| 735 | }, | 735 | }, |
| 736 | closeSearch() { | 736 | closeSearch() { |
| 737 | this.showSearch = false; | 737 | this.showSearch = false; |
| 738 | this.show = true; | 738 | this.show = true; |
| 739 | this.search = ""; | 739 | this.search = ""; |
| 740 | }, | 740 | }, |
| 741 | }, | 741 | }, |
| 742 | mounted() { | 742 | mounted() { |
| 743 | this.loginId = this.$store.state.id; | 743 | this.loginId = this.$store.state.id; |
| 744 | this.getEvents(); | 744 | this.getEvents(); |
| 745 | this.getAllClass(); | 745 | this.getAllClass(); |
| 746 | }, | 746 | }, |
| 747 | }; | 747 | }; |
| 748 | </script> | 748 | </script> |
src/pages/socialMedia/socialMedia.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Social Media ****** --> | 3 | <!-- ****** EDIT Social Media ****** --> |
| 4 | <v-dialog v-model="editSocialMediaDialog" max-width="400px" persistent> | 4 | <v-dialog v-model="editSocialMediaDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="Card-style pa-2"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Social Media</label> | 8 | <label class="title text-xs-center">Edit Social Media</label> |
| 9 | <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Type:</label> | 17 | <label class="right">Type:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm8 class="ml-3"> | 19 | <v-flex xs8 sm8 class="ml-3"> |
| 20 | <v-select | 20 | <v-select |
| 21 | v-model="editedItem.type" | 21 | v-model="editedItem.type" |
| 22 | placeholder="fill your Title" | 22 | placeholder="fill your Title" |
| 23 | :items="socialLink" | 23 | :items="socialLink" |
| 24 | item-text="name" | 24 | item-text="name" |
| 25 | item-value="value" | 25 | item-value="value" |
| 26 | ></v-select> | 26 | ></v-select> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Url lINK:</label> | 33 | <label class="right">Url lINK:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs8 sm8 class="ml-3"> | 35 | <v-flex xs8 sm8 class="ml-3"> |
| 36 | <v-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field> | 36 | <v-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-layout> | 40 | <v-layout> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-card-actions> | 42 | <v-card-actions> |
| 43 | <v-spacer></v-spacer> | 43 | <v-spacer></v-spacer> |
| 44 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 44 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | </v-card-actions> | 46 | </v-card-actions> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-container> | 49 | </v-container> |
| 50 | </v-form> | 50 | </v-form> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-dialog> | 52 | </v-dialog> |
| 53 | 53 | ||
| 54 | <!-- ****** PROFILE VIEW Social ****** --> | 54 | <!-- ****** PROFILE VIEW Social ****** --> |
| 55 | 55 | ||
| 56 | <v-dialog v-model="profileSocialMediaDialog" max-width="500px" persistent> | 56 | <v-dialog v-model="profileSocialMediaDialog" max-width="500px" persistent> |
| 57 | <v-card flat class="card-style pa-3" dark> | 57 | <v-card flat class="Card-style pa-3"> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs12> | 59 | <v-flex xs12> |
| 60 | <label class="title text-xs-center">View Social Media</label> | 60 | <label class="title text-xs-center">View Social Media</label> |
| 61 | <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon> | 61 | <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout> | 63 | </v-layout> |
| 64 | <v-card-text> | 64 | <v-card-text> |
| 65 | <v-container grid-list-md> | 65 | <v-container grid-list-md> |
| 66 | <v-layout> | 66 | <v-layout> |
| 67 | <v-flex xs4 sm6> | 67 | <v-flex xs4 sm6> |
| 68 | <h5 class="right my-1"> | 68 | <h5 class="right my-1"> |
| 69 | <b>Title:</b> | 69 | <b>Title:</b> |
| 70 | </h5> | 70 | </h5> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | <v-flex sm6 xs8> | 72 | <v-flex sm6 xs8> |
| 73 | <h5 class="my-1">{{ editedItem.type }}</h5> | 73 | <h5 class="my-1">{{ editedItem.type }}</h5> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs5 sm6> | 77 | <v-flex xs5 sm6> |
| 78 | <h5 class="right my-1"> | 78 | <h5 class="right my-1"> |
| 79 | <b>Description:</b> | 79 | <b>Description:</b> |
| 80 | </h5> | 80 | </h5> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm6 xs8> | 82 | <v-flex sm6 xs8> |
| 83 | <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> | 83 | <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-container> | 86 | </v-container> |
| 87 | </v-card-text> | 87 | </v-card-text> |
| 88 | </v-card> | 88 | </v-card> |
| 89 | </v-dialog> | 89 | </v-dialog> |
| 90 | <!-- ****** Social TABLE ****** --> | 90 | <!-- ****** Social TABLE ****** --> |
| 91 | <v-toolbar color="transparent" flat> | 91 | <v-toolbar color="transparent" flat> |
| 92 | <v-btn | 92 | <v-btn |
| 93 | fab | 93 | fab |
| 94 | dark | 94 | dark |
| 95 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 95 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 96 | small | 96 | small |
| 97 | @click="addSocialMediaDialog = true" | 97 | @click="addSocialMediaDialog = true" |
| 98 | > | 98 | > |
| 99 | <v-icon dark>add</v-icon> | 99 | <v-icon dark>add</v-icon> |
| 100 | </v-btn> | 100 | </v-btn> |
| 101 | <v-btn | 101 | <v-btn |
| 102 | round | 102 | round |
| 103 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 103 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 104 | dark | 104 | dark |
| 105 | @click="addSocialMediaDialog = true" | 105 | @click="addSocialMediaDialog = true" |
| 106 | > | 106 | > |
| 107 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media | 107 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media |
| 108 | </v-btn> | 108 | </v-btn> |
| 109 | <v-spacer></v-spacer> | 109 | <v-spacer></v-spacer> |
| 110 | <v-card-title class="body-1" v-show="show"> | 110 | <v-card-title class="body-1" v-show="show"> |
| 111 | <v-btn icon large flat @click="displaySearch"> | 111 | <v-btn icon large flat @click="displaySearch"> |
| 112 | <v-avatar size="27"> | 112 | <v-avatar size="27"> |
| 113 | <img src="/static/icon/search.png" alt="icon" /> | 113 | <img src="/static/icon/search.png" alt="icon" /> |
| 114 | </v-avatar> | 114 | </v-avatar> |
| 115 | </v-btn> | 115 | </v-btn> |
| 116 | </v-card-title> | 116 | </v-card-title> |
| 117 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 117 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 118 | <v-layout> | 118 | <v-layout> |
| 119 | <v-text-field | 119 | <v-text-field |
| 120 | autofocus | 120 | autofocus |
| 121 | v-model="search" | 121 | v-model="search" |
| 122 | label="Search" | 122 | label="Search" |
| 123 | prepend-inner-icon="search" | 123 | prepend-inner-icon="search" |
| 124 | color="primary" | 124 | color="primary" |
| 125 | ></v-text-field> | 125 | ></v-text-field> |
| 126 | <v-icon @click="closeSearch" color="error">close</v-icon> | 126 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 127 | </v-layout> | 127 | </v-layout> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-toolbar> | 129 | </v-toolbar> |
| 130 | <v-data-table | 130 | <v-data-table |
| 131 | :headers="headers" | 131 | :headers="headers" |
| 132 | :items="desserts" | 132 | :items="desserts" |
| 133 | :pagination.sync="pagination" | 133 | :pagination.sync="pagination" |
| 134 | :search="search" | 134 | :search="search" |
| 135 | > | 135 | > |
| 136 | <template slot="items" slot-scope="props"> | 136 | <template slot="items" slot-scope="props"> |
| 137 | <tr class="tr"> | 137 | <tr class="tr"> |
| 138 | <td class="td td-row">{{ props.index + 1}}</td> | 138 | <td class="td td-row">{{ props.index + 1}}</td> |
| 139 | <td class="td td-row text-xs-center">{{ props.item.type}}</td> | 139 | <td class="td td-row text-xs-center">{{ props.item.type}}</td> |
| 140 | <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</td> | 140 | <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</td> |
| 141 | <td class="td td-row text-xs-center"> | 141 | <td class="td td-row text-xs-center"> |
| 142 | <span> | 142 | <span> |
| 143 | <v-tooltip top> | 143 | <v-tooltip top> |
| 144 | <img | 144 | <img |
| 145 | slot="activator" | 145 | slot="activator" |
| 146 | style="cursor:pointer; width:25px; height:25px; " | 146 | style="cursor:pointer; width:25px; height:25px; " |
| 147 | class="mr-3" | 147 | class="mr-3" |
| 148 | @click="profile(props.item)" | 148 | @click="profile(props.item)" |
| 149 | src="/static/icon/view.png" | 149 | src="/static/icon/view.png" |
| 150 | /> | 150 | /> |
| 151 | <span>View</span> | 151 | <span>View</span> |
| 152 | </v-tooltip> | 152 | </v-tooltip> |
| 153 | <v-tooltip top> | 153 | <v-tooltip top> |
| 154 | <img | 154 | <img |
| 155 | slot="activator" | 155 | slot="activator" |
| 156 | style="cursor:pointer; width:20 px; height:18px; " | 156 | style="cursor:pointer; width:20 px; height:18px; " |
| 157 | class="mr-3" | 157 | class="mr-3" |
| 158 | @click="editItem(props.item)" | 158 | @click="editItem(props.item)" |
| 159 | src="/static/icon/edit.png" | 159 | src="/static/icon/edit.png" |
| 160 | /> | 160 | /> |
| 161 | <span>Edit</span> | 161 | <span>Edit</span> |
| 162 | </v-tooltip> | 162 | </v-tooltip> |
| 163 | <v-tooltip top> | 163 | <v-tooltip top> |
| 164 | <img | 164 | <img |
| 165 | slot="activator" | 165 | slot="activator" |
| 166 | style="cursor:pointer; width:20px; height:20px; " | 166 | style="cursor:pointer; width:20px; height:20px; " |
| 167 | class="mr-3" | 167 | class="mr-3" |
| 168 | @click="deleteItem(props.item)" | 168 | @click="deleteItem(props.item)" |
| 169 | src="/static/icon/delete.png" | 169 | src="/static/icon/delete.png" |
| 170 | /> | 170 | /> |
| 171 | <span>Delete</span> | 171 | <span>Delete</span> |
| 172 | </v-tooltip> | 172 | </v-tooltip> |
| 173 | </span> | 173 | </span> |
| 174 | </td> | 174 | </td> |
| 175 | </tr> | 175 | </tr> |
| 176 | </template> | 176 | </template> |
| 177 | <v-alert | 177 | <v-alert |
| 178 | slot="no-results" | 178 | slot="no-results" |
| 179 | :value="true" | 179 | :value="true" |
| 180 | color="error" | 180 | color="error" |
| 181 | icon="warning" | 181 | icon="warning" |
| 182 | >Your search for "{{ search }}" found no results.</v-alert> | 182 | >Your search for "{{ search }}" found no results.</v-alert> |
| 183 | </v-data-table> | 183 | </v-data-table> |
| 184 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 184 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 185 | <v-dialog v-model="addSocialMediaDialog" max-width="400px" v-if="addSocialMediaDialog" persistent> | 185 | <v-dialog |
| 186 | <v-card flat class="card-style pa-2" dark> | 186 | v-model="addSocialMediaDialog" |
| 187 | max-width="400px" | ||
| 188 | v-if="addSocialMediaDialog" | ||
| 189 | persistent | ||
| 190 | > | ||
| 191 | <v-card flat class="Card-style pa-2"> | ||
| 187 | <v-layout> | 192 | <v-layout> |
| 188 | <v-flex xs12> | 193 | <v-flex xs12> |
| 189 | <label class="title text-xs-center">Add Social Media</label> | 194 | <label class="title text-xs-center">Add Social Media</label> |
| 190 | <v-icon size="24" class="right" @click="closeAddSocialMediaModel">cancel</v-icon> | 195 | <v-icon size="24" class="right" @click="closeAddSocialMediaModel">cancel</v-icon> |
| 191 | </v-flex> | 196 | </v-flex> |
| 192 | </v-layout> | 197 | </v-layout> |
| 193 | <v-form ref="form" v-model="valid" lazy-validation> | 198 | <v-form ref="form" v-model="valid" lazy-validation> |
| 194 | <v-container fluid> | 199 | <v-container fluid> |
| 195 | <v-flex xs12> | 200 | <v-flex xs12> |
| 196 | <v-layout> | 201 | <v-layout> |
| 197 | <v-flex xs4 class="pt-4 subheading"> | 202 | <v-flex xs4 class="pt-4 subheading"> |
| 198 | <label class="right">Type:</label> | 203 | <label class="right">Type:</label> |
| 199 | </v-flex> | 204 | </v-flex> |
| 200 | <v-flex xs8 sm8 class="ml-3"> | 205 | <v-flex xs8 sm8 class="ml-3"> |
| 201 | <v-select | 206 | <v-select |
| 202 | v-model="socialMedia.type" | 207 | v-model="socialMedia.type" |
| 203 | :items="socialLink" | 208 | :items="socialLink" |
| 204 | item-text="name" | 209 | item-text="name" |
| 205 | item-value="value" | 210 | item-value="value" |
| 206 | label="Selct Type" | 211 | label="Selct Type" |
| 207 | type="text" | 212 | type="text" |
| 208 | :rules="socialRules" | 213 | :rules="socialRules" |
| 209 | required | 214 | required |
| 210 | ></v-select> | 215 | ></v-select> |
| 211 | </v-flex> | 216 | </v-flex> |
| 212 | </v-layout> | 217 | </v-layout> |
| 213 | </v-flex> | 218 | </v-flex> |
| 214 | <v-flex xs12> | 219 | <v-flex xs12> |
| 215 | <v-layout> | 220 | <v-layout> |
| 216 | <v-flex xs4 class="pt-4 subheading"> | 221 | <v-flex xs4 class="pt-4 subheading"> |
| 217 | <label class="right">Link Url:</label> | 222 | <label class="right">Link Url:</label> |
| 218 | </v-flex> | 223 | </v-flex> |
| 219 | <v-flex xs8 sm8 class="ml-3"> | 224 | <v-flex xs8 sm8 class="ml-3"> |
| 220 | <v-text-field | 225 | <v-text-field |
| 221 | placeholder="fill your link url" | 226 | placeholder="fill your link url" |
| 222 | :rules="linkUrlnRules" | 227 | :rules="linkUrlnRules" |
| 223 | v-model="socialMedia.linkUrl" | 228 | v-model="socialMedia.linkUrl" |
| 224 | type="text" | 229 | type="text" |
| 225 | required | 230 | required |
| 226 | ></v-text-field> | 231 | ></v-text-field> |
| 227 | </v-flex> | 232 | </v-flex> |
| 228 | </v-layout> | 233 | </v-layout> |
| 229 | </v-flex> | 234 | </v-flex> |
| 230 | <v-layout> | 235 | <v-layout> |
| 231 | <v-flex xs12 sm12> | 236 | <v-flex xs12 sm12> |
| 232 | <v-card-actions> | 237 | <v-card-actions> |
| 233 | <v-spacer></v-spacer> | 238 | <v-spacer></v-spacer> |
| 234 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 239 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 235 | <v-spacer></v-spacer> | 240 | <v-spacer></v-spacer> |
| 236 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 241 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 237 | </v-card-actions> | 242 | </v-card-actions> |
| 238 | </v-flex> | 243 | </v-flex> |
| 239 | </v-layout> | 244 | </v-layout> |
| 240 | </v-container> | 245 | </v-container> |
| 241 | </v-form> | 246 | </v-form> |
| 242 | </v-card> | 247 | </v-card> |
| 243 | </v-dialog> | 248 | </v-dialog> |
| 244 | <v-snackbar | 249 | <v-snackbar |
| 245 | :timeout="timeout" | 250 | :timeout="timeout" |
| 246 | :top="y === 'top'" | 251 | :top="y === 'top'" |
| 247 | :right="x === 'right'" | 252 | :right="x === 'right'" |
| 248 | :vertical="mode === 'vertical'" | 253 | :vertical="mode === 'vertical'" |
| 249 | v-model="snackbar" | 254 | v-model="snackbar" |
| 250 | :color="color" | 255 | :color="color" |
| 251 | >{{ text }}</v-snackbar> | 256 | >{{ text }}</v-snackbar> |
| 252 | <div class="loader" v-if="showLoader"> | 257 | <div class="loader" v-if="showLoader"> |
| 253 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 258 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 254 | </div> | 259 | </div> |
| 255 | </v-container> | 260 | </v-container> |
| 256 | </template> | 261 | </template> |
| 257 | 262 | ||
| 258 | <script> | 263 | <script> |
| 259 | import http from "@/Services/http.js"; | 264 | import http from "@/Services/http.js"; |
| 260 | 265 | ||
| 261 | export default { | 266 | export default { |
| 262 | data: () => ({ | 267 | data: () => ({ |
| 263 | snackbar: false, | 268 | snackbar: false, |
| 264 | y: "top", | 269 | y: "top", |
| 265 | x: "right", | 270 | x: "right", |
| 266 | mode: "", | 271 | mode: "", |
| 267 | timeout: 3000, | 272 | timeout: 3000, |
| 268 | text: "", | 273 | text: "", |
| 269 | loading: false, | 274 | loading: false, |
| 270 | color: "", | 275 | color: "", |
| 271 | date: null, | 276 | date: null, |
| 272 | search: "", | 277 | search: "", |
| 273 | show: true, | 278 | show: true, |
| 274 | showSearch: false, | 279 | showSearch: false, |
| 275 | addSocialMediaDialog: false, | 280 | addSocialMediaDialog: false, |
| 276 | showLoader: false, | 281 | showLoader: false, |
| 277 | editSocialMediaDialog: false, | 282 | editSocialMediaDialog: false, |
| 278 | profileSocialMediaDialog: false, | 283 | profileSocialMediaDialog: false, |
| 279 | valid: true, | 284 | valid: true, |
| 280 | pagination: { | 285 | pagination: { |
| 281 | rowsPerPage: 10, | 286 | rowsPerPage: 10, |
| 282 | }, | 287 | }, |
| 283 | imageData: {}, | 288 | imageData: {}, |
| 284 | imageName: "", | 289 | imageName: "", |
| 285 | imageUrl: "", | 290 | imageUrl: "", |
| 286 | imageFile: "", | 291 | imageFile: "", |
| 287 | socialRules: [(v) => !!v || " Social media type is required"], | 292 | socialRules: [(v) => !!v || " Social media type is required"], |
| 288 | linkUrlnRules: [(v) => !!v || " Link Url is required"], | 293 | linkUrlnRules: [(v) => !!v || " Link Url is required"], |
| 289 | headers: [ | 294 | headers: [ |
| 290 | { | 295 | { |
| 291 | text: "No", | 296 | text: "No", |
| 292 | align: "", | 297 | align: "", |
| 293 | sortable: false, | 298 | sortable: false, |
| 294 | value: "No", | 299 | value: "No", |
| 295 | }, | 300 | }, |
| 296 | { text: "Type", value: "type", sortable: false, align: "center" }, | 301 | { text: "Type", value: "type", sortable: false, align: "center" }, |
| 297 | { | 302 | { |
| 298 | text: "Link Url", | 303 | text: "Link Url", |
| 299 | value: "linkUrl", | 304 | value: "linkUrl", |
| 300 | sortable: false, | 305 | sortable: false, |
| 301 | align: "center", | 306 | align: "center", |
| 302 | }, | 307 | }, |
| 303 | { text: "Action", value: "", sortable: false, align: "center" }, | 308 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 304 | ], | 309 | ], |
| 305 | desserts: [], | 310 | desserts: [], |
| 306 | editedIndex: -1, | 311 | editedIndex: -1, |
| 307 | socialMedia: {}, | 312 | socialMedia: {}, |
| 308 | editedItem: {}, | 313 | editedItem: {}, |
| 309 | socialLink: [ | 314 | socialLink: [ |
| 310 | { | 315 | { |
| 311 | name: "Face Book", | 316 | name: "Face Book", |
| 312 | value: "FACEBOOK", | 317 | value: "FACEBOOK", |
| 313 | }, | 318 | }, |
| 314 | { | 319 | { |
| 315 | name: "You Tube", | 320 | name: "You Tube", |
| 316 | value: "YOUTUBE", | 321 | value: "YOUTUBE", |
| 317 | }, | 322 | }, |
| 318 | ], | 323 | ], |
| 319 | userName: "", | 324 | userName: "", |
| 320 | }), | 325 | }), |
| 321 | watch: { | 326 | watch: { |
| 322 | addSocialMediaDialog: function (val) { | 327 | addSocialMediaDialog: function (val) { |
| 323 | if (!val) { | 328 | if (!val) { |
| 324 | this.socialMedia = []; | 329 | this.socialMedia = []; |
| 325 | } | 330 | } |
| 326 | }, | 331 | }, |
| 327 | }, | 332 | }, |
| 328 | methods: { | 333 | methods: { |
| 329 | // pickFile() { | 334 | // pickFile() { |
| 330 | // this.$refs.image.click(); | 335 | // this.$refs.image.click(); |
| 331 | // }, | 336 | // }, |
| 332 | 337 | ||
| 333 | // onFilePicked(e) { | 338 | // onFilePicked(e) { |
| 334 | // // console.log(e) | 339 | // // console.log(e) |
| 335 | // const files = e.target.files; | 340 | // const files = e.target.files; |
| 336 | // this.imageData.upload = e.target.files[0]; | 341 | // this.imageData.upload = e.target.files[0]; |
| 337 | // if (files[0] !== undefined) { | 342 | // if (files[0] !== undefined) { |
| 338 | // this.imageName = files[0].name; | 343 | // this.imageName = files[0].name; |
| 339 | // if (this.imageName.lastIndexOf(".") <= 0) { | 344 | // if (this.imageName.lastIndexOf(".") <= 0) { |
| 340 | // return; | 345 | // return; |
| 341 | // } | 346 | // } |
| 342 | // const fr = new FileReader(); | 347 | // const fr = new FileReader(); |
| 343 | // fr.readAsDataURL(files[0]); | 348 | // fr.readAsDataURL(files[0]); |
| 344 | // fr.addEventListener("load", () => { | 349 | // fr.addEventListener("load", () => { |
| 345 | // this.imageUrl = fr.result; | 350 | // this.imageUrl = fr.result; |
| 346 | // this.imageFile = files[0]; // this is an image file that can be sent to server... | 351 | // this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 347 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 352 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 348 | // console.log("upload=======>", this.imageData.imageUrl); | 353 | // console.log("upload=======>", this.imageData.imageUrl); |
| 349 | // console.log("imageFile", this.imageFile); | 354 | // console.log("imageFile", this.imageFile); |
| 350 | // }); | 355 | // }); |
| 351 | // } else { | 356 | // } else { |
| 352 | // this.imageName = ""; | 357 | // this.imageName = ""; |
| 353 | // this.imageFile = ""; | 358 | // this.imageFile = ""; |
| 354 | // this.imageUrl = ""; | 359 | // this.imageUrl = ""; |
| 355 | // } | 360 | // } |
| 356 | // }, | 361 | // }, |
| 357 | getSocialMedia() { | 362 | getSocialMedia() { |
| 358 | this.showLoader = true; | 363 | this.showLoader = true; |
| 359 | var token = this.$store.state.token; | 364 | var token = this.$store.state.token; |
| 360 | http() | 365 | http() |
| 361 | .get("/getSocialList", { | 366 | .get("/getSocialList", { |
| 362 | headers: { Authorization: "Bearer " + token }, | 367 | headers: { Authorization: "Bearer " + token }, |
| 363 | }) | 368 | }) |
| 364 | .then((response) => { | 369 | .then((response) => { |
| 365 | this.desserts = response.data.data; | 370 | this.desserts = response.data.data; |
| 366 | this.showLoader = false; | 371 | this.showLoader = false; |
| 367 | }) | 372 | }) |
| 368 | .catch((error) => { | 373 | .catch((error) => { |
| 369 | this.showLoader = false; | 374 | this.showLoader = false; |
| 370 | if (error.response.status === 401) { | 375 | if (error.response.status === 401) { |
| 371 | this.$router.replace({ path: "/" }); | 376 | this.$router.replace({ path: "/" }); |
| 372 | this.$store.dispatch("setToken", null); | 377 | this.$store.dispatch("setToken", null); |
| 373 | this.$store.dispatch("Id", null); | 378 | this.$store.dispatch("Id", null); |
| 374 | } | 379 | } |
| 375 | }); | 380 | }); |
| 376 | }, | 381 | }, |
| 377 | editItem(item) { | 382 | editItem(item) { |
| 378 | this.editedIndex = this.desserts.indexOf(item); | 383 | this.editedIndex = this.desserts.indexOf(item); |
| 379 | this.editedItem = Object.assign({}, item); | 384 | this.editedItem = Object.assign({}, item); |
| 380 | this.editSocialMediaDialog = true; | 385 | this.editSocialMediaDialog = true; |
| 381 | }, | 386 | }, |
| 382 | profile(item) { | 387 | profile(item) { |
| 383 | this.editedIndex = this.desserts.indexOf(item); | 388 | this.editedIndex = this.desserts.indexOf(item); |
| 384 | this.editedItem = Object.assign({}, item); | 389 | this.editedItem = Object.assign({}, item); |
| 385 | this.profileSocialMediaDialog = true; | 390 | this.profileSocialMediaDialog = true; |
| 386 | }, | 391 | }, |
| 387 | 392 | ||
| 388 | deleteItem(item) { | 393 | deleteItem(item) { |
| 389 | let deleteSocialMedia = { | 394 | let deleteSocialMedia = { |
| 390 | socialId: item._id, | 395 | socialId: item._id, |
| 391 | }; | 396 | }; |
| 392 | http() | 397 | http() |
| 393 | .delete( | 398 | .delete( |
| 394 | "/deleteSocial", | 399 | "/deleteSocial", |
| 395 | confirm("Are you sure you want to delete this?") && { | 400 | confirm("Are you sure you want to delete this?") && { |
| 396 | params: deleteSocialMedia, | 401 | params: deleteSocialMedia, |
| 397 | } | 402 | } |
| 398 | ) | 403 | ) |
| 399 | .then((response) => { | 404 | .then((response) => { |
| 400 | this.snackbar = true; | 405 | this.snackbar = true; |
| 401 | this.text = response.data.message; | 406 | this.text = response.data.message; |
| 402 | this.color = "green"; | 407 | this.color = "green"; |
| 403 | this.getSocialMedia(); | 408 | this.getSocialMedia(); |
| 404 | }) | 409 | }) |
| 405 | .catch((error) => { | 410 | .catch((error) => { |
| 406 | this.snackbar = true; | 411 | this.snackbar = true; |
| 407 | this.text = error.response.data.message; | 412 | this.text = error.response.data.message; |
| 408 | this.color = "error"; | 413 | this.color = "error"; |
| 409 | }); | 414 | }); |
| 410 | }, | 415 | }, |
| 411 | close() { | 416 | close() { |
| 412 | this.editSocialMediaDialog = false; | 417 | this.editSocialMediaDialog = false; |
| 413 | }, | 418 | }, |
| 414 | closeAddSocialMediaModel() { | 419 | closeAddSocialMediaModel() { |
| 415 | this.addSocialMediaDialog = false; | 420 | this.addSocialMediaDialog = false; |
| 416 | this.socialMedia = []; | 421 | this.socialMedia = []; |
| 417 | }, | 422 | }, |
| 418 | submit() { | 423 | submit() { |
| 419 | if (this.$refs.form.validate()) { | 424 | if (this.$refs.form.validate()) { |
| 420 | this.loading = true; | 425 | this.loading = true; |
| 421 | http() | 426 | http() |
| 422 | .post("/addSocialLinks", this.socialMedia) | 427 | .post("/addSocialLinks", this.socialMedia) |
| 423 | .then((response) => { | 428 | .then((response) => { |
| 424 | this.snackbar = true; | 429 | this.snackbar = true; |
| 425 | this.text = response.data.message; | 430 | this.text = response.data.message; |
| 426 | this.color = "green"; | 431 | this.color = "green"; |
| 427 | this.getSocialMedia(); | 432 | this.getSocialMedia(); |
| 428 | this.clear(); | 433 | this.clear(); |
| 429 | this.addSocialMediaDialog = false; | 434 | this.addSocialMediaDialog = false; |
| 430 | this.loading = false; | 435 | this.loading = false; |
| 431 | }) | 436 | }) |
| 432 | .catch((error) => { | 437 | .catch((error) => { |
| 433 | this.snackbar = true; | 438 | this.snackbar = true; |
| 434 | this.color = "error"; | 439 | this.color = "error"; |
| 435 | this.text = error.response.data.message; | 440 | this.text = error.response.data.message; |
| 436 | this.loading = false; | 441 | this.loading = false; |
| 437 | }); | 442 | }); |
| 438 | } | 443 | } |
| 439 | }, | 444 | }, |
| 440 | clear() { | 445 | clear() { |
| 441 | this.$refs.form.reset(); | 446 | this.$refs.form.reset(); |
| 442 | }, | 447 | }, |
| 443 | save() { | 448 | save() { |
| 444 | (this.editedItem.socialId = this.editedItem._id), | 449 | (this.editedItem.socialId = this.editedItem._id), |
| 445 | http() | 450 | http() |
| 446 | .put("/updateSocial", this.editedItem) | 451 | .put("/updateSocial", this.editedItem) |
| 447 | .then((response) => { | 452 | .then((response) => { |
| 448 | this.snackbar = true; | 453 | this.snackbar = true; |
| 449 | this.text = response.data.message; | 454 | this.text = response.data.message; |
| 450 | this.color = "green"; | 455 | this.color = "green"; |
| 451 | this.getSocialMedia(); | 456 | this.getSocialMedia(); |
| 452 | this.close(); | 457 | this.close(); |
| 453 | }) | 458 | }) |
| 454 | .catch((error) => { | 459 | .catch((error) => { |
| 455 | this.snackbar = true; | 460 | this.snackbar = true; |
| 456 | this.text = error.response.data.message; | 461 | this.text = error.response.data.message; |
| 457 | this.color = "error"; | 462 | this.color = "error"; |
| 458 | }); | 463 | }); |
| 459 | }, | 464 | }, |
| 460 | displaySearch() { | 465 | displaySearch() { |
| 461 | (this.show = false), (this.showSearch = true); | 466 | (this.show = false), (this.showSearch = true); |
| 462 | }, | 467 | }, |
| 463 | closeSearch() { | 468 | closeSearch() { |
| 464 | this.showSearch = false; | 469 | this.showSearch = false; |
| 465 | this.show = true; | 470 | this.show = true; |
| 466 | this.search = ""; | 471 | this.search = ""; |
| 467 | }, | 472 | }, |
| 468 | }, | 473 | }, |
| 469 | mounted() { | 474 | mounted() { |
| 470 | this.getSocialMedia(); | 475 | this.getSocialMedia(); |
| 471 | }, | 476 | }, |
| 472 | }; | 477 | }; |
| 473 | </script> | 478 | </script> |