viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit ee83012b3162bfe8f03c38eed8feed075f09e9e4

Authored by Jatinder Singh
1 parent 8ab31dc8b1
Exists in master and in 3 other branches amber-development, development, ui-design

changes

Showing 1 changed file with 71 additions and 52 deletions   Show diff stats
src/pages/Dashboard.vue
Diff comments   View file @ee83012
1 1 <template>
2 2 <v-tabs
3   - slider-color="black"
  3 + grow
  4 + slider-color="black"
4 5 >
5   - <v-spacer></v-spacer>
6   - <v-tab ripple>
  6 +
  7 + <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab">
7 8 Existing user
8 9 </v-tab>
9   - <v-spacer></v-spacer>
10   - <v-tab ripple>
  10 +
  11 + <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1">
11 12 Add New Users
12 13 </v-tab>
13   - <v-spacer></v-spacer>
  14 +
14 15 <v-tab-item>
15 16 <v-dialog v-model="dialog" max-width="500px">
16 17 <v-toolbar color="white">
... ... @@ -237,13 +238,18 @@ export default {
237 238 dialog1: false,
238 239 dialog2: false,
239 240 valid: true,
  241 + isActive: true,
  242 + newActive: false,
240 243 rules: {
241 244 required: value => !!value || 'This field is Required.',
242   - min: v => (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/).test(v) && v.length > 0 || 'Please enter a date in the format dd/mm/yyyy'
  245 + min: v =>
  246 + (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
  247 + v
  248 + ) &&
  249 + v.length > 0) ||
  250 + 'Please enter a date in the format dd/mm/yyyy'
243 251 },
244   - nameRules: [
245   - v => !!v || 'Name is required',
246   - ],
  252 + nameRules: [v => !!v || 'Name is required'],
247 253 email: '',
248 254 emailRules: [
249 255 v => !!v || 'E-mail is required',
... ... @@ -258,7 +264,7 @@ export default {
258 264 },
259 265 { text: 'Name', value: 'Name', sortable: false },
260 266 { text: 'Email', value: 'Email', sortable: false },
261   - { text: '', value: '', sortable: false },
  267 + { text: '', value: '', sortable: false }
262 268 ],
263 269 desserts: [
264 270 {
... ... @@ -281,13 +287,13 @@ export default {
281 287 No: '',
282 288 Name: '',
283 289 LName: '',
284   - Email: '',
  290 + Email: ''
285 291 },
286 292 defaultItem: {
287 293 No: '',
288 294 Name: '',
289 295 LName: '',
290   - Email: '',
  296 + Email: ''
291 297 }
292 298 }),
293 299 methods: {
... ... @@ -312,6 +318,19 @@ export default {
312 318 confirm('Are you sure you want to delete this item?') &&
313 319 this.desserts.splice(index, 1);
314 320 },
  321 + activeTab (type) {
  322 + switch (type) {
  323 + case 'existing':
  324 + this.newActive = false;
  325 + this.isActive = true;
  326 + break;
  327 +
  328 + default:
  329 + this.newActive = true;
  330 + this.isActive = false;
  331 + break;
  332 + }
  333 + },
315 334  
316 335 close () {
317 336 this.dialog = false;
... ... @@ -333,8 +352,7 @@ export default {
333 352 Name: this.Name,
334 353 LName: this.LName,
335 354 Email: this.Email,
336   - DOB: this.DOB,
337   -
  355 + DOB: this.DOB
338 356 });
339 357 }
340 358 },
... ... @@ -344,10 +362,9 @@ export default {
344 362 download () {
345 363 this.editedIndex = this.desserts.indexOf();
346 364 },
347   - // clear () {
348   - // this.$refs.form.reset();
349   - // },
350   -
  365 + clear () {
  366 + this.$refs.form.reset();
  367 + },
351 368  
352 369 save () {
353 370 if (this.editedIndex > -1) {
... ... @@ -359,63 +376,65 @@ export default {
359 376 }
360 377 }
361 378 };
362   -
363 379 </script>
364 380 <style scoped>
365   -.v-card__actions .v-btn{
  381 +.v-card__actions .v-btn {
366 382 margin: 0 15px;
367 383 min-width: 120px;
368 384 }
369 385  
370   -h4{
371   - background-repeat: no-repeat;
372   - padding: 8px;
373   - margin: auto;
374   - font-size: 25px;
  386 +h4 {
  387 + background-repeat: no-repeat;
  388 + padding: 8px;
  389 + margin: auto;
  390 + font-size: 25px;
375 391 }
376   -#name{
377   -position: absolute;
378   -left: 100px;
379   -top: 17px
  392 +#name {
  393 + position: absolute;
  394 + left: 100px;
  395 + top: 17px;
380 396 }
381   -#icon{
  397 +#icon {
382 398 position: absolute;
383 399 right: 8px;
384 400 top: 8px;
385 401 }
386   -#m{
  402 +#m {
387 403 position: relative;
388 404 left: 135px;
389 405 top: -11px;
390 406 }
391   -#G{
392   - position: absolute;
393   - top: 38px;
  407 +#G {
  408 + position: absolute;
  409 + top: 38px;
394 410 }
395   -#bt{
  411 +#bt {
396 412 position: relative;
397   - top: -20px;
398   - left:115px;
  413 + top: -20px;
  414 + left: 115px;
399 415 }
400   -#e{
401   - position: relative;
402   - right: -110px;
  416 +#e {
  417 + position: relative;
  418 + right: -110px;
403 419 height: 17px;
404 420 cursor: pointer;
405 421 }
406   -#d{
407   - position: relative;
408   - right: -150px;
409   - height: 17px;
410   - cursor: pointer;
  422 +#d {
  423 + position: relative;
  424 + right: -150px;
  425 + height: 17px;
  426 + cursor: pointer;
411 427 }
412 428 #td {
413   - border: 1px solid #dddddd;
414   - text-align: left;
415   - padding: 8px;
  429 + border: 1px solid #dddddd;
  430 + text-align: left;
  431 + padding: 8px;
416 432 }
417   -#dialog{
418   - height:550px;
419   -
  433 +#dialog {
  434 + height: 550px;
  435 +}
  436 +.active {
  437 + background-color: black;
  438 + color: white !important;
420 439 }
421 440 </style>
422 441 \ No newline at end of file
... ...