viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 687e0b9298d2bad8a53a5af3366f2aedcc7b2822

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

add user,attendence and account design and functionality

Showing 66 changed files with 8722 additions and 418 deletions   Show diff stats
... ... @@ -4,7 +4,8 @@
4 4 <head>
5 5 <meta charset="utf-8">
6 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7   - <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet">
  7 + <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->
  8 + <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet">
8 9 <title>School Management</title>
9 10 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
10 11 <meta name="description" content="School Management">
... ...
package-lock.json
Diff comments   View file @687e0b9
... ... @@ -313,8 +313,7 @@
313 313 "amdefine": {
314 314 "version": "1.0.1",
315 315 "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
316   - "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
317   - "dev": true
  316 + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
318 317 },
319 318 "ansi-align": {
320 319 "version": "2.0.0",
... ... @@ -713,7 +712,6 @@
713 712 "version": "1.0.2",
714 713 "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
715 714 "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
716   - "dev": true,
717 715 "requires": {
718 716 "array-uniq": "^1.0.1"
719 717 }
... ... @@ -721,8 +719,7 @@
721 719 "array-uniq": {
722 720 "version": "1.0.3",
723 721 "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
724   - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
725   - "dev": true
  722 + "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
726 723 },
727 724 "array-unique": {
728 725 "version": "0.2.1",
... ... @@ -1887,8 +1884,7 @@
1887 1884 "balanced-match": {
1888 1885 "version": "1.0.0",
1889 1886 "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
1890   - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
1891   - "dev": true
  1887 + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
1892 1888 },
1893 1889 "base": {
1894 1890 "version": "0.11.2",
... ... @@ -1967,8 +1963,7 @@
1967 1963 "big.js": {
1968 1964 "version": "3.2.0",
1969 1965 "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
1970   - "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
1971   - "dev": true
  1966 + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
1972 1967 },
1973 1968 "binary-extensions": {
1974 1969 "version": "1.11.0",
... ... @@ -2081,7 +2076,6 @@
2081 2076 "version": "1.1.11",
2082 2077 "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
2083 2078 "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
2084   - "dev": true,
2085 2079 "requires": {
2086 2080 "balanced-match": "^1.0.0",
2087 2081 "concat-map": "0.0.1"
... ... @@ -2996,8 +2990,7 @@
2996 2990 "concat-map": {
2997 2991 "version": "0.0.1",
2998 2992 "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
2999   - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
3000   - "dev": true
  2993 + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
3001 2994 },
3002 2995 "concat-stream": {
3003 2996 "version": "1.6.0",
... ... @@ -3417,8 +3410,7 @@
3417 3410 "css-parse": {
3418 3411 "version": "1.7.0",
3419 3412 "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
3420   - "integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=",
3421   - "dev": true
  3413 + "integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs="
3422 3414 },
3423 3415 "css-select": {
3424 3416 "version": "1.2.0",
... ... @@ -3688,6 +3680,11 @@
3688 3680 "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
3689 3681 "dev": true
3690 3682 },
  3683 + "dayjs": {
  3684 + "version": "1.8.16",
  3685 + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.16.tgz",
  3686 + "integrity": "sha512-XPmqzWz/EJiaRHjBqSJ2s6hE/BUoCIHKgdS2QPtTQtKcS9E4/Qn0WomoH1lXanWCzri+g7zPcuNV4aTZ8PMORQ=="
  3687 + },
3691 3688 "de-indent": {
3692 3689 "version": "1.0.2",
3693 3690 "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
... ... @@ -4162,11 +4159,15 @@
4162 4159 "minimalistic-crypto-utils": "^1.0.0"
4163 4160 }
4164 4161 },
  4162 + "email-addresses": {
  4163 + "version": "3.1.0",
  4164 + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
  4165 + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
  4166 + },
4165 4167 "emojis-list": {
4166 4168 "version": "2.1.0",
4167 4169 "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
4168   - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
4169   - "dev": true
  4170 + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
4170 4171 },
4171 4172 "encodeurl": {
4172 4173 "version": "1.0.2",
... ... @@ -4354,8 +4355,7 @@
4354 4355 "escape-string-regexp": {
4355 4356 "version": "1.0.5",
4356 4357 "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
4357   - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
4358   - "dev": true
  4358 + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
4359 4359 },
4360 4360 "escodegen": {
4361 4361 "version": "1.9.1",
... ... @@ -5228,6 +5228,30 @@
5228 5228 "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
5229 5229 "dev": true
5230 5230 },
  5231 + "filename-reserved-regex": {
  5232 + "version": "1.0.0",
  5233 + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
  5234 + "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q="
  5235 + },
  5236 + "filenamify": {
  5237 + "version": "1.2.1",
  5238 + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
  5239 + "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
  5240 + "requires": {
  5241 + "filename-reserved-regex": "^1.0.0",
  5242 + "strip-outer": "^1.0.0",
  5243 + "trim-repeated": "^1.0.0"
  5244 + }
  5245 + },
  5246 + "filenamify-url": {
  5247 + "version": "1.0.0",
  5248 + "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz",
  5249 + "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
  5250 + "requires": {
  5251 + "filenamify": "^1.0.0",
  5252 + "humanize-url": "^1.0.0"
  5253 + }
  5254 + },
5231 5255 "fileset": {
5232 5256 "version": "2.0.3",
5233 5257 "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
... ... @@ -5498,6 +5522,16 @@
5498 5522 "readable-stream": "^2.0.0"
5499 5523 }
5500 5524 },
  5525 + "fs-extra": {
  5526 + "version": "7.0.1",
  5527 + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
  5528 + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
  5529 + "requires": {
  5530 + "graceful-fs": "^4.1.2",
  5531 + "jsonfile": "^4.0.0",
  5532 + "universalify": "^0.1.0"
  5533 + }
  5534 + },
5501 5535 "fs-finder": {
5502 5536 "version": "1.8.1",
5503 5537 "resolved": "https://registry.npmjs.org/fs-finder/-/fs-finder-1.8.1.tgz",
... ... @@ -5546,8 +5580,7 @@
5546 5580 "fs.realpath": {
5547 5581 "version": "1.0.0",
5548 5582 "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
5549   - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
5550   - "dev": true
  5583 + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
5551 5584 },
5552 5585 "fsevents": {
5553 5586 "version": "1.2.9",
... ... @@ -6208,11 +6241,45 @@
6208 6241 "assert-plus": "^1.0.0"
6209 6242 }
6210 6243 },
  6244 + "gh-pages": {
  6245 + "version": "2.1.1",
  6246 + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-2.1.1.tgz",
  6247 + "integrity": "sha512-yNW2SFp9xGRP/8Sk2WXuLI/Gn92oOL4HBgudn6PsqAnuWT90Y1tozJoTfX1WdrDSW5Rb90kLVOf5mm9KJ/2fDw==",
  6248 + "requires": {
  6249 + "async": "^2.6.1",
  6250 + "commander": "^2.18.0",
  6251 + "email-addresses": "^3.0.1",
  6252 + "filenamify-url": "^1.0.0",
  6253 + "fs-extra": "^7.0.0",
  6254 + "globby": "^6.1.0",
  6255 + "graceful-fs": "^4.1.11",
  6256 + "rimraf": "^2.6.2"
  6257 + },
  6258 + "dependencies": {
  6259 + "async": {
  6260 + "version": "2.6.3",
  6261 + "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
  6262 + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
  6263 + "requires": {
  6264 + "lodash": "^4.17.14"
  6265 + }
  6266 + },
  6267 + "commander": {
  6268 + "version": "2.20.3",
  6269 + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
  6270 + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
  6271 + },
  6272 + "lodash": {
  6273 + "version": "4.17.15",
  6274 + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
  6275 + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
  6276 + }
  6277 + }
  6278 + },
6211 6279 "glob": {
6212 6280 "version": "7.1.2",
6213 6281 "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
6214 6282 "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
6215   - "dev": true,
6216 6283 "requires": {
6217 6284 "fs.realpath": "^1.0.0",
6218 6285 "inflight": "^1.0.4",
... ... @@ -6260,7 +6327,6 @@
6260 6327 "version": "6.1.0",
6261 6328 "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
6262 6329 "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
6263   - "dev": true,
6264 6330 "requires": {
6265 6331 "array-union": "^1.0.1",
6266 6332 "glob": "^7.0.3",
... ... @@ -6291,8 +6357,7 @@
6291 6357 "graceful-fs": {
6292 6358 "version": "4.1.11",
6293 6359 "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
6294   - "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
6295   - "dev": true
  6360 + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
6296 6361 },
6297 6362 "graceful-readlink": {
6298 6363 "version": "1.0.1",
... ... @@ -6787,6 +6852,15 @@
6787 6852 }
6788 6853 }
6789 6854 },
  6855 + "humanize-url": {
  6856 + "version": "1.0.1",
  6857 + "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz",
  6858 + "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
  6859 + "requires": {
  6860 + "normalize-url": "^1.0.0",
  6861 + "strip-url-auth": "^1.0.0"
  6862 + }
  6863 + },
6790 6864 "iconv-lite": {
6791 6865 "version": "0.4.19",
6792 6866 "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
... ... @@ -6873,7 +6947,6 @@
6873 6947 "version": "1.0.6",
6874 6948 "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
6875 6949 "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
6876   - "dev": true,
6877 6950 "requires": {
6878 6951 "once": "^1.3.0",
6879 6952 "wrappy": "1"
... ... @@ -6882,8 +6955,7 @@
6882 6955 "inherits": {
6883 6956 "version": "2.0.3",
6884 6957 "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
6885   - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
6886   - "dev": true
  6958 + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
6887 6959 },
6888 6960 "ini": {
6889 6961 "version": "1.3.5",
... ... @@ -7219,8 +7291,7 @@
7219 7291 "is-plain-obj": {
7220 7292 "version": "1.1.0",
7221 7293 "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
7222   - "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
7223   - "dev": true
  7294 + "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
7224 7295 },
7225 7296 "is-plain-object": {
7226 7297 "version": "2.0.4",
... ... @@ -8359,8 +8430,15 @@
8359 8430 "json5": {
8360 8431 "version": "0.5.1",
8361 8432 "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
8362   - "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
8363   - "dev": true
  8433 + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
  8434 + },
  8435 + "jsonfile": {
  8436 + "version": "4.0.0",
  8437 + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
  8438 + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
  8439 + "requires": {
  8440 + "graceful-fs": "^4.1.6"
  8441 + }
8364 8442 },
8365 8443 "jsonify": {
8366 8444 "version": "0.0.0",
... ... @@ -8556,7 +8634,6 @@
8556 8634 "version": "1.1.0",
8557 8635 "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
8558 8636 "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
8559   - "dev": true,
8560 8637 "requires": {
8561 8638 "big.js": "^3.1.3",
8562 8639 "emojis-list": "^2.0.0",
... ... @@ -8683,8 +8760,7 @@
8683 8760 "lodash.clonedeep": {
8684 8761 "version": "4.5.0",
8685 8762 "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
8686   - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
8687   - "dev": true
  8763 + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
8688 8764 },
8689 8765 "lodash.create": {
8690 8766 "version": "3.1.1",
... ... @@ -9132,7 +9208,6 @@
9132 9208 "version": "3.0.4",
9133 9209 "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
9134 9210 "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
9135   - "dev": true,
9136 9211 "requires": {
9137 9212 "brace-expansion": "^1.1.7"
9138 9213 }
... ... @@ -9140,8 +9215,7 @@
9140 9215 "minimist": {
9141 9216 "version": "0.0.8",
9142 9217 "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
9143   - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
9144   - "dev": true
  9218 + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
9145 9219 },
9146 9220 "mississippi": {
9147 9221 "version": "2.0.0",
... ... @@ -9186,7 +9260,6 @@
9186 9260 "version": "0.5.1",
9187 9261 "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
9188 9262 "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
9189   - "dev": true,
9190 9263 "requires": {
9191 9264 "minimist": "0.0.8"
9192 9265 }
... ... @@ -9656,7 +9729,6 @@
9656 9729 "version": "1.9.1",
9657 9730 "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
9658 9731 "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
9659   - "dev": true,
9660 9732 "requires": {
9661 9733 "object-assign": "^4.0.1",
9662 9734 "prepend-http": "^1.0.0",
... ... @@ -9866,7 +9938,6 @@
9866 9938 "version": "1.4.0",
9867 9939 "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
9868 9940 "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
9869   - "dev": true,
9870 9941 "requires": {
9871 9942 "wrappy": "1"
9872 9943 }
... ... @@ -10215,8 +10286,7 @@
10215 10286 "path-is-absolute": {
10216 10287 "version": "1.0.1",
10217 10288 "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
10218   - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
10219   - "dev": true
  10289 + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
10220 10290 },
10221 10291 "path-is-inside": {
10222 10292 "version": "1.0.2",
... ... @@ -10281,20 +10351,17 @@
10281 10351 "pify": {
10282 10352 "version": "2.3.0",
10283 10353 "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
10284   - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
10285   - "dev": true
  10354 + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
10286 10355 },
10287 10356 "pinkie": {
10288 10357 "version": "2.0.4",
10289 10358 "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
10290   - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
10291   - "dev": true
  10359 + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
10292 10360 },
10293 10361 "pinkie-promise": {
10294 10362 "version": "2.0.1",
10295 10363 "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
10296 10364 "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
10297   - "dev": true,
10298 10365 "requires": {
10299 10366 "pinkie": "^2.0.0"
10300 10367 }
... ... @@ -12238,8 +12305,7 @@
12238 12305 "prepend-http": {
12239 12306 "version": "1.0.4",
12240 12307 "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
12241   - "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
12242   - "dev": true
  12308 + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
12243 12309 },
12244 12310 "preserve": {
12245 12311 "version": "0.2.0",
... ... @@ -12454,7 +12520,6 @@
12454 12520 "version": "4.3.4",
12455 12521 "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
12456 12522 "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
12457   - "dev": true,
12458 12523 "requires": {
12459 12524 "object-assign": "^4.1.0",
12460 12525 "strict-uri-encode": "^1.0.0"
... ... @@ -13078,7 +13143,6 @@
13078 13143 "version": "2.6.2",
13079 13144 "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
13080 13145 "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
13081   - "dev": true,
13082 13146 "requires": {
13083 13147 "glob": "^7.0.5"
13084 13148 }
... ... @@ -13933,7 +13997,6 @@
13933 13997 "version": "1.1.2",
13934 13998 "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
13935 13999 "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
13936   - "dev": true,
13937 14000 "requires": {
13938 14001 "is-plain-obj": "^1.0.0"
13939 14002 }
... ... @@ -14301,8 +14364,7 @@
14301 14364 "strict-uri-encode": {
14302 14365 "version": "1.1.0",
14303 14366 "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
14304   - "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
14305   - "dev": true
  14367 + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
14306 14368 },
14307 14369 "string-length": {
14308 14370 "version": "2.0.0",
... ... @@ -14412,11 +14474,23 @@
14412 14474 "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
14413 14475 "dev": true
14414 14476 },
  14477 + "strip-outer": {
  14478 + "version": "1.0.1",
  14479 + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
  14480 + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
  14481 + "requires": {
  14482 + "escape-string-regexp": "^1.0.2"
  14483 + }
  14484 + },
  14485 + "strip-url-auth": {
  14486 + "version": "1.0.1",
  14487 + "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
  14488 + "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164="
  14489 + },
14415 14490 "stylus": {
14416 14491 "version": "0.54.5",
14417 14492 "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
14418 14493 "integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
14419   - "dev": true,
14420 14494 "requires": {
14421 14495 "css-parse": "1.7.x",
14422 14496 "debug": "*",
... ... @@ -14430,7 +14504,6 @@
14430 14504 "version": "7.0.6",
14431 14505 "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
14432 14506 "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
14433   - "dev": true,
14434 14507 "requires": {
14435 14508 "fs.realpath": "^1.0.0",
14436 14509 "inflight": "^1.0.4",
... ... @@ -14443,14 +14516,12 @@
14443 14516 "sax": {
14444 14517 "version": "0.5.8",
14445 14518 "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
14446   - "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
14447   - "dev": true
  14519 + "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE="
14448 14520 },
14449 14521 "source-map": {
14450 14522 "version": "0.1.43",
14451 14523 "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
14452 14524 "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
14453   - "dev": true,
14454 14525 "requires": {
14455 14526 "amdefine": ">=0.0.4"
14456 14527 }
... ... @@ -14461,7 +14532,6 @@
14461 14532 "version": "3.0.2",
14462 14533 "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
14463 14534 "integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==",
14464   - "dev": true,
14465 14535 "requires": {
14466 14536 "loader-utils": "^1.0.2",
14467 14537 "lodash.clonedeep": "^4.5.0",
... ... @@ -14743,6 +14813,14 @@
14743 14813 "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
14744 14814 "dev": true
14745 14815 },
  14816 + "trim-repeated": {
  14817 + "version": "1.0.0",
  14818 + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
  14819 + "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
  14820 + "requires": {
  14821 + "escape-string-regexp": "^1.0.2"
  14822 + }
  14823 + },
14746 14824 "trim-right": {
14747 14825 "version": "1.0.1",
14748 14826 "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
... ... @@ -14995,6 +15073,11 @@
14995 15073 "crypto-random-string": "^1.0.0"
14996 15074 }
14997 15075 },
  15076 + "universalify": {
  15077 + "version": "0.1.2",
  15078 + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
  15079 + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
  15080 + },
14998 15081 "unpipe": {
14999 15082 "version": "1.0.0",
15000 15083 "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
... ... @@ -15456,6 +15539,25 @@
15456 15539 }
15457 15540 }
15458 15541 },
  15542 + "vue-material-year-calendar": {
  15543 + "version": "1.2.4",
  15544 + "resolved": "https://registry.npmjs.org/vue-material-year-calendar/-/vue-material-year-calendar-1.2.4.tgz",
  15545 + "integrity": "sha512-kdsj8VWgdREbuMs3dOT6yOEGnTFRwroKAkP2P7xlV71Smkzt12sLt1apq9GiF4PAlCaX9OWWdE+COmLpXJYoyA==",
  15546 + "requires": {
  15547 + "dayjs": "^1.8.13",
  15548 + "gh-pages": "^2.0.1",
  15549 + "stylus": "^0.54.5",
  15550 + "stylus-loader": "^3.0.2",
  15551 + "vue": "^2.5.17"
  15552 + },
  15553 + "dependencies": {
  15554 + "vue": {
  15555 + "version": "2.6.10",
  15556 + "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
  15557 + "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
  15558 + }
  15559 + }
  15560 + },
15459 15561 "vue-password": {
15460 15562 "version": "1.2.0",
15461 15563 "resolved": "https://registry.npmjs.org/vue-password/-/vue-password-1.2.0.tgz",
... ... @@ -16444,8 +16546,7 @@
16444 16546 "when": {
16445 16547 "version": "3.6.4",
16446 16548 "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
16447   - "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
16448   - "dev": true
  16549 + "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404="
16449 16550 },
16450 16551 "whet.extend": {
16451 16552 "version": "0.9.9",
... ... @@ -16533,8 +16634,7 @@
16533 16634 "wrappy": {
16534 16635 "version": "1.0.2",
16535 16636 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
16536   - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
16537   - "dev": true
  16637 + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
16538 16638 },
16539 16639 "write": {
16540 16640 "version": "0.2.1",
... ...
... ... @@ -24,6 +24,7 @@
24 24 "vee-validate": "^2.0.9",
25 25 "vue": "^2.5.16",
26 26 "vue-full-calendar": "^2.7.0",
  27 + "vue-material-year-calendar": "^1.2.4",
27 28 "vue-password": "^1.2.0",
28 29 "vue-perfect-scrollbar": "^0.1.0",
29 30 "vue-quill-editor": "^3.0.6",
... ...
... ... @@ -75,9 +75,11 @@ export default {
75 75 }
76 76 </style>
77 77 <style>
78   -body {
79   - font-family: "Nunito", sans-serif !important;
  78 +.application {
  79 + background-color: white !important;
  80 + font-family: "Poppins", sans-serif;
80 81 -webkit-font-smoothing: antialiased;
81 82 -moz-osx-font-smoothing: grayscale;
  83 + scroll-behavior: smooth;
82 84 }
83 85 </style>
... ...
... ... @@ -3,53 +3,69 @@ const Menu = [
3 3 {
4 4 title: 'Dashboard',
5 5 // group: 'apps',
6   - name: 'Dashboard',
7   - icon: 'dashboard',
  6 + path: '/dashboard',
  7 + icon: '/static/schoolIcons/Dashboard.png',
8 8 },
9 9 {
10 10 title: 'Class',
11 11 // group: 'apps',
12   - name: 'addclass',
13   - icon: 'local_library',
  12 + path: '/addclass',
  13 + icon: '/static/schoolIcons/Class.png',
14 14 },
15 15 {
16 16 title: 'Section',
17 17 // group: 'apps',
18   - name: 'section',
19   - icon: 'view_module',
  18 + path: '/section',
  19 + icon: '/static/schoolIcons/Section.png',
20 20 },
21 21 {
22 22 title: 'Subjects',
23   - name: 'Subject',
24   - icon: 'subject',
  23 + path: '/subject',
  24 + icon: '/static/schoolIcons/Subjects.png',
25 25 },
26 26 {
27 27 title: 'Parents',
28 28 // group: 'apps',
29   - name: 'parents',
30   - icon: 'group',
  29 + path: '/parents',
  30 + icon: '/static/schoolIcons/Parents.png',
31 31 },
32 32 {
33 33 title: 'Teachers',
34 34 // group: '',
35   - name: 'teachers',
36   - icon: 'person',
  35 + path: 'teachers',
  36 + icon: '/static/schoolIcons/Teachers.png',
37 37 },
38 38 {
39 39 title: 'Students',
40 40 // group: 'apps',
41   - name: 'Students',
42   - icon: 'school',
  41 + path: '/Students',
  42 + icon: '/static/schoolIcons/Students.png',
  43 + },
  44 + {
  45 + title: 'User',
  46 + path: '/User',
  47 + icon: '/static/schoolIcons/User.png',
  48 + },
  49 + {
  50 + title: 'Attendance',
  51 + group: 'Attendance',
  52 + component: 'Attendance',
  53 + icon: '/static/schoolIcons/Attendance.png',
  54 + items: [
  55 + { name: 'studentAttendence', title: 'Student Attendance', component: 'studentAttendence', action: '', },
  56 + // { name: 'teacherAttendence', title: 'Teacher Attendance', component: 'teacherAttendence', action: '', },
  57 + // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
  58 + ]
43 59 },
44 60 {
45 61 title: 'Notice Board',
46   - name: 'NoticeBoard',
47   - icon: 'notifications',
  62 + path: '/NoticeBoard',
  63 + icon: '/static/schoolIcons/Notice_board.png',
48 64 },
49 65 {
50 66 title: 'News',
51   - name: 'news',
52   - icon: 'announcement',
  67 + path: '/news',
  68 + icon: '/static/schoolIcons/News.png',
53 69 },
54 70 // {
55 71 // title: 'Reminder',
... ... @@ -58,46 +74,72 @@ const Menu = [
58 74 // },
59 75 {
60 76 title: 'Time Table',
61   - name: 'timeTable',
62   - icon: 'event_note',
  77 + path: '/timeTable',
  78 + icon: '/static/schoolIcons/Time_table.png',
63 79 },
  80 + // {
  81 + // title: 'Library',
  82 + // group: 'Library',
  83 + // component: 'Library',
  84 + // icon: '/static/schoolIcons/Library.png',
  85 + // items: [
  86 + // { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
  87 + // { name: 'Books', title: 'Books', component: 'Books', action: '', },
  88 + // { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
  89 + // { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
  90 +
  91 + // ]
  92 + // },
64 93 {
65 94 title: 'Notification',
66   - name: 'notification',
67   - icon: 'notifications_active',
  95 + path: '/notification',
  96 + icon: '/static/schoolIcons/Notification.png',
68 97 },
69 98 {
70 99 title: 'Social Media',
71   - name: 'SocialMedia',
72   - icon: 'cloud_upload',
  100 + path: '/SocialMedia',
  101 + icon: '/static/schoolIcons/Social_Media.png',
73 102 },
74 103 {
75 104 title: 'Gallery',
76   - name: 'Gallery',
77   - icon: 'photo',
  105 + path: '/Gallery',
  106 + icon: '/static/schoolIcons/Gallery.png',
78 107 },
79 108 {
80 109 title: 'Event',
81   - name: 'Event',
82   - icon: 'event',
  110 + path: '/Event',
  111 + icon: '/static/schoolIcons/Events.png',
83 112 },
84 113 {
85 114 title: 'Holiday',
86   - name: 'Holiday',
87   - icon: 'star',
  115 + path: '/Holiday',
  116 + icon: '/static/schoolIcons/Holidays.png',
  117 + },
  118 + {
  119 + title: 'Account',
  120 + group: 'Account',
  121 + component: 'Account',
  122 + icon: '/static/schoolIcons/Account.png',
  123 + items: [
  124 + { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', },
  125 + { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
  126 + { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', },
  127 + { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
  128 + { name: 'Income', title: 'Income', component: 'Income', action: '', },
  129 + ]
88 130 }
89 131 ];
90 132  
91 133  
92 134 // reorder menu
93 135 Menu.forEach((item) => {
94   - if (item.items) {
95   - item.items.sort((x, y) => {
96   - let textA = x.title.toUpperCase();
97   - let textB = y.title.toUpperCase();
98   - return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
99   - });
100   - }
  136 + // if (item.items) {
  137 + // item.items.sort((x, y) => {
  138 + // let textA = x.title.toUpperCase();
  139 + // let textB = y.title.toUpperCase();
  140 + // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
  141 + // });
  142 + // }
101 143 });
102 144  
103 145 export default Menu;
104 146 \ No newline at end of file
... ...
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @687e0b9
... ... @@ -7,82 +7,124 @@
7 7 app
8 8 v-model="drawer"
9 9 width="260"
10   - >
11   - <v-toolbar style="background:#39b982" >
12   - <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana">
13   - <v-toolbar-title class="ml-0 pl-3" >
14   - </v-toolbar-title>
  10 + >
  11 + <v-toolbar class="fixcolors">
  12 + <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana" />
  13 + <v-toolbar-title class="ml-0 pl-3"></v-toolbar-title>
15 14 </v-toolbar>
16 15 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
17 16 <v-list dense expand>
18 17 <template v-for="(item, i) in menus">
19   - <!--group with subitems-->
20   - <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action">
21   - <v-list-tile slot="activator" ripple="ripple">
22   - <v-list-tile-content>
23   - <v-list-tile-title>{{ item.title }}</v-list-tile-title>
24   - </v-list-tile-content>
25   - </v-list-tile>
26   - <template v-for="(subItem, i) in item.items">
27   - <!--sub group-->
28   - <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group">
29   - <v-list-tile slot="activator" ripple="ripple">
30   - <v-list-tile-content>
31   - <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
32   - </v-list-tile-content>
33   - </v-list-tile>
34   - <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple">
35   - <v-list-tile-content>
36   - <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
37   - </v-list-tile-content>
38   - </v-list-tile>
39   - </v-list-group>
40   - <!--child item-->
41   - <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple">
  18 + <!--group with subitems-->
  19 + <v-list-group
  20 + v-if="item.items"
  21 + :key="item.name"
  22 + :group="item.group"
  23 + no-action="no-action"
  24 + >
  25 + <v-list-tile slot="activator" ripple="ripple">
  26 + <v-list-tile-action v-if="item.icon" class="pr-3">
  27 + <img :src="item.icon" width="40" alt="icons" />
  28 + </v-list-tile-action>
  29 + <v-list-tile-content>
  30 + <v-list-tile-title>{{ item.title }}</v-list-tile-title>
  31 + </v-list-tile-content>
  32 + </v-list-tile>
  33 + <template v-for="(subItem, i) in item.items">
  34 + <!--sub group-->
  35 + <v-list-group
  36 + v-if="subItem.items"
  37 + :key="subItem.name"
  38 + :group="subItem.group"
  39 + sub-group="sub-group"
  40 + >
  41 + <v-list-tile slot="activator" ripple="ripple">
42 42 <v-list-tile-content>
43   - <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title>
  43 + <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
44 44 </v-list-tile-content>
45   - <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
46   - <v-list-tile-action v-if="subItem.action">
47   - <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon>
48   - </v-list-tile-action>
49 45 </v-list-tile>
50   - </template>
51   - </v-list-group>
52   - <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
53   - <v-divider v-else-if="item.divider" :key="i"></v-divider>
54   - <!--top-level link-->
55   - <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name">
  46 + <v-list-tile
  47 + v-for="(grand, i) in subItem.children"
  48 + :key="i"
  49 + :to="genChildTarget(item, grand)"
  50 + :href="grand.href"
  51 + ripple="ripple"
  52 + >
  53 + <v-list-tile-content>
  54 + <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
  55 + </v-list-tile-content>
  56 + </v-list-tile>
  57 + </v-list-group>
  58 + <!--child item-->
  59 + <v-list-tile
  60 + v-else
  61 + :key="i"
  62 + :to="genChildTarget(item, subItem)"
  63 + :href="subItem.href"
  64 + :disabled="subItem.disabled"
  65 + :target="subItem.target"
  66 + ripple="ripple"
  67 + >
  68 + <v-list-tile-action v-if="subItem.action">
  69 + <img
  70 + width="30"
  71 + :src="subItem.action"
  72 + :class="[subItem.actionClass || 'success--text']"
  73 + />
  74 + </v-list-tile-action>
  75 + <v-list-tile-content>
  76 + <v-list-tile-title class="body-2">
  77 + <span>{{ subItem.title }}</span>
  78 + </v-list-tile-title>
  79 + </v-list-tile-content>
  80 + <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
  81 + </v-list-tile>
  82 + </template>
  83 + </v-list-group>
  84 + <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
  85 + <v-divider v-else-if="item.divider" :key="i"></v-divider>
  86 + <!--top-level link-->
  87 + <v-list-tile
  88 + v-else
  89 + ripple="ripple"
  90 + :disabled="item.disabled"
  91 + :target="item.target"
  92 + rel="noopener"
  93 + :key="item.path"
  94 + >
  95 + <a :href="item.path">
56 96 <v-list-tile-action v-if="item.icon">
57   - <v-icon>{{ item.icon }}</v-icon>
  97 + <img :src="item.icon" width="40" alt="icons" />
58 98 </v-list-tile-action>
59   - <v-list-tile-content>
  99 + <v-list-tile-content class="pl-3 mt-2">
60 100 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
61 101 </v-list-tile-content>
62 102 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
63 103 <v-list-tile-action v-if="item.subAction">
64   - <v-icon class="success--text">{{ item.subAction }}</v-icon>
  104 + <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
  105 + <img :src="item.icon" width="40" alt="icons" />
65 106 </v-list-tile-action>
66 107 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
67   - </v-list-tile>
  108 + </a>
  109 + </v-list-tile>
68 110 </template>
69   - </v-list>
70   - </vue-perfect-scrollbar>
  111 + </v-list>
  112 + </vue-perfect-scrollbar>
71 113 </v-navigation-drawer>
72 114 </template>
73 115 <script>
74   -import menu from '@/api/menu';
75   -import VuePerfectScrollbar from 'vue-perfect-scrollbar';
  116 +import menu from "@/api/menu";
  117 +import VuePerfectScrollbar from "vue-perfect-scrollbar";
76 118 export default {
77   - name: 'app-drawer',
  119 + name: "app-drawer",
78 120 components: {
79   - VuePerfectScrollbar,
  121 + VuePerfectScrollbar
80 122 },
81 123 props: {
82 124 expanded: {
83 125 type: Boolean,
84 126 default: true
85   - },
  127 + }
86 128 },
87 129 data: () => ({
88 130 mini: false,
... ... @@ -90,37 +132,36 @@ export default {
90 132 menus: menu,
91 133 scrollSettings: {
92 134 maxScrollbarLength: 160
93   - }
  135 + }
94 136 }),
95 137 computed: {
96   - computeGroupActive () {
  138 + computeGroupActive() {
97 139 return true;
98 140 },
99   - computeLogo () {
100   - return '/static/icon.png';
  141 + computeLogo() {
  142 + return "/static/logoIntrack.png";
101 143 },
102 144  
103   - sideToolbarColor () {
  145 + sideToolbarColor() {
104 146 return this.$vuetify.options.extra.sideNav;
105   - }
  147 + }
106 148 },
107   - created () {
108   - window.getApp.$on('APP_DRAWER_TOGGLED', () => {
109   - this.drawer = (!this.drawer);
  149 + created() {
  150 + window.getApp.$on("APP_DRAWER_TOGGLED", () => {
  151 + this.drawer = !this.drawer;
110 152 });
111 153 },
112   -
113 154  
114 155 methods: {
115   - genChildTarget (item, subItem) {
  156 + genChildTarget(item, subItem) {
116 157 if (subItem.href) return;
117 158 if (subItem.component) {
118 159 return {
119   - name: subItem.component,
  160 + name: subItem.component
120 161 };
121 162 }
122   - return { name: `${item.group}/${(subItem.name)}` };
123   - },
  163 + return { name: `${item.group}/${subItem.name}` };
  164 + }
124 165 }
125 166 };
126 167 </script>
... ... @@ -128,40 +169,77 @@ export default {
128 169  
129 170 <style lang="stylus">
130 171 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
  172 +#appDrawer {
  173 + overflow: hidden;
131 174  
132   -#appDrawer
133   - overflow: hidden
134   - .drawer-menu--scroll
135   - height: calc(100vh - 48px)
136   - overflow: auto
  175 + .drawer-menu--scroll {
  176 + height: calc(100vh - 48px);
  177 + overflow: auto;
  178 + }
  179 +}
  180 +.v-list__group__items--no-action .v-list__tile {
  181 + padding-left: 72px !important;
  182 +}
137 183 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
138   - height: 60px;
139   - font-size:17px;
  184 + height: 60px;
  185 + font-size: 17px;
140 186 }
  187 +
141 188 .v-list__tile__action {
142   - min-width:36px;
  189 + min-width: 36px;
143 190 }
144   -.v-list__tile.primary--text {
145   - color:black !important;
146   - border-left: 4px solid black;
147   - border-radius: 4px;
  191 +
  192 +.v-list__tile.primary--text a {
  193 + color: black !important;
  194 + border-left: 4px solid black;
  195 + border-radius: 4px;
148 196 }
149   -@media screen and (max-width: 420px) {
150   -.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
  197 +
  198 +@media screen and (max-width: 420px) {
  199 + .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
151 200 font-size: 14px;
152   -}
153   -.imgLogo{
154   - height: 32px;
155   - width: 120px;;
156   -}
  201 + }
  202 +
  203 + .imgLogo {
  204 + height: 32px;
  205 + width: 120px;
  206 + }
157 207 }
158 208 </style>
159 209  
160 210  
161 211 <style scoped>
162   -.theme--light .v-icon, .application .theme--light.v-icon {
163   - color: #39b982;
  212 +.theme--light .v-icon,
  213 +.application .theme--light.v-icon {
  214 + color: #39b982;
164 215 }
165   -
  216 +a {
  217 + text-decoration: none;
  218 + display: inherit;
  219 + color: black;
  220 +}
  221 +a:hover {
  222 + color: gray !important;
  223 + /* border-left: 4px solid black; */
  224 + /* border-radius: 4px; */
  225 +}
  226 +/* a:active {
  227 + color: red !important;
  228 +} */
  229 +/* a:visited {
  230 + border-left: 4px solid black;
  231 + border-radius: 4px;
  232 +} */
  233 +/* visited link */
  234 +/* a:visited {
  235 + color: black !important;
  236 + border-left: 4px solid black;
  237 + border-radius: 4px;
  238 +}
  239 +a:active {
  240 + color: black !important;
  241 + border-left: 4px solid black;
  242 + border-radius: 4px;
  243 +} */
166 244 </style>
167 245  
... ...
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @687e0b9
1 1 <template>
2   - <v-toolbar class="fixcolors" fixed app >
  2 + <v-toolbar class="fixcolors" fixed app>
3 3 <v-toolbar-title class="ml-0 pl-3">
4 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
5 5 </v-toolbar-title>
... ... @@ -24,8 +24,9 @@
24 24 <v-spacer></v-spacer>
25 25 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
26 26 <v-btn icon large flat slot="activator">
27   - <v-avatar size="40px">
28   - <img src="/static/icon/user.png" />
  27 + <v-avatar >
  28 + <!-- <img src="/static/icon/user.png" /> -->
  29 + <v-icon dark size="40px">account_circle</v-icon>
29 30 </v-avatar>
30 31 </v-btn>
31 32 <v-list class="pa-0">
... ... @@ -108,6 +109,9 @@ export default {
108 109 .v-icon {
109 110 font-size: 30px;
110 111 }
  112 +.fixcolors {
  113 + background: #444B54 !important;
  114 +}
111 115 @media screen and (min-width: 1270px) {
112 116 .hide {
113 117 display: none;
... ...
src/pages/Account/editInvoice.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,534 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** Edit multiple INVOICE ****** -->
  4 + <v-container fluid grid-list-md>
  5 + <v-snackbar
  6 + :timeout="timeout"
  7 + :top="y === 'top'"
  8 + :right="x === 'right'"
  9 + :vertical="mode === 'vertical'"
  10 + v-model="snackbar"
  11 + color="success"
  12 + >{{ text }}</v-snackbar>
  13 + <v-flex xs12 sm12>
  14 + <v-container fluid>
  15 + <v-layout>
  16 + <v-flex xs12 sm12 md5 class="mt-4">
  17 + <v-card flat>
  18 + <v-toolbar dark class="fixcolors" flat>
  19 + <v-spacer></v-spacer>
  20 + <v-toolbar-title>
  21 + <h3>Invoice</h3>
  22 + </v-toolbar-title>
  23 + <v-spacer></v-spacer>
  24 + </v-toolbar>
  25 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  26 + <v-layout>
  27 + <v-flex xs4 class="pt-4 subheading">
  28 + <label class="right">Select Class:</label>
  29 + </v-flex>
  30 + <v-flex xs6 class="ml-3">
  31 + <v-select
  32 + :items="addclass"
  33 + label="Select Class"
  34 + v-model="invoiceData.classId"
  35 + item-text="classNum"
  36 + item-value="_id"
  37 + @change="getAllStudents()"
  38 + ></v-select>
  39 + </v-flex>
  40 + </v-layout>
  41 + <v-layout>
  42 + <v-flex xs4 class="pt-4 subheading">
  43 + <label class="right">Select Student:</label>
  44 + </v-flex>
  45 + <v-flex xs6 class="ml-3">
  46 + <v-select
  47 + :items="studentList"
  48 + label="Select Incharge"
  49 + v-model="invoiceData.studentId"
  50 + item-text="name"
  51 + item-value="_id"
  52 + ></v-select>
  53 + </v-flex>
  54 + </v-layout>
  55 + <v-layout>
  56 + <v-flex xs4 class="pt-4 subheading">
  57 + <label class="right">Date:</label>
  58 + </v-flex>
  59 + <v-flex xs6 class="ml-3">
  60 + <v-menu
  61 + ref="menu1"
  62 + :close-on-content-click="false"
  63 + v-model="menu1"
  64 + :nudge-right="40"
  65 + lazy
  66 + :return-value.sync="invoiceData.date"
  67 + transition="scale-transition"
  68 + offset-y
  69 + full-width
  70 + min-width="290px"
  71 + >
  72 + <v-text-field
  73 + slot="activator"
  74 + v-model="invoiceData.date"
  75 + placeholder="Select date"
  76 + ></v-text-field>
  77 + <v-date-picker
  78 + v-model="invoiceData.date"
  79 + @input="$refs.menu1.save(invoiceData.date)"
  80 + ></v-date-picker>
  81 + </v-menu>
  82 + </v-flex>
  83 + </v-layout>
  84 + <v-layout>
  85 + <v-flex xs4 class="pt-4 subheading">
  86 + <label class="right">Payment Status:</label>
  87 + </v-flex>
  88 + <v-flex xs6 class="ml-3">
  89 + <v-select
  90 + :items="paymentStatus"
  91 + v-model="invoiceData.paymentStatus"
  92 + item-text="name"
  93 + item-value="value"
  94 + label="Select Payment Status"
  95 + @change="getPayMethodList"
  96 + ></v-select>
  97 + </v-flex>
  98 + </v-layout>
  99 + <v-layout v-show="showPayMethods">
  100 + <v-flex xs4 class="pt-4 subheading">
  101 + <label class="right">Payment Method:</label>
  102 + </v-flex>
  103 + <v-flex xs6 class="ml-3">
  104 + <v-select
  105 + :items="paymentMethods"
  106 + v-model="invoiceData.paymentMethod"
  107 + label="Select Payment Method"
  108 + ></v-select>
  109 + </v-flex>
  110 + </v-layout>
  111 + <v-layout>
  112 + <v-flex xs12 sm10 offset-sm1>
  113 + <v-card-actions>
  114 + <v-btn @click="clear" round dark>clear</v-btn>
  115 + <v-spacer></v-spacer>
  116 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  117 + </v-card-actions>
  118 + </v-flex>
  119 + </v-layout>
  120 + </v-form>
  121 + </v-card>
  122 + </v-flex>
  123 + <v-flex xs12 sm12 md7 class="mt-4">
  124 + <v-card>
  125 + <v-toolbar dark class="fixcolors" flat>
  126 + <v-spacer></v-spacer>
  127 + <v-toolbar-title>
  128 + <h3>Fee Type List</h3>
  129 + </v-toolbar-title>
  130 + <v-spacer></v-spacer>
  131 + </v-toolbar>
  132 + <v-layout>
  133 + <v-flex xs2 class="mt-4">
  134 + <label class="right title">Fee Type:</label>
  135 + </v-flex>
  136 + <v-flex xs4>
  137 + <v-select
  138 + :items="feeTypes"
  139 + v-model="feeType.feeTypeName"
  140 + item-text="feeType"
  141 + item-value="feeType"
  142 + label="Select Fee Type"
  143 + ></v-select>
  144 + </v-flex>
  145 + <v-flex xs6>
  146 + <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
  147 + </v-flex>
  148 + </v-layout>
  149 + <table class="feeTypeTable">
  150 + <tr class="info white--text">
  151 + <th>#</th>
  152 + <th>Fee Type</th>
  153 + <th>Amount</th>
  154 + <th>Discount(%)</th>
  155 + <th>Subtotal</th>
  156 + <th>Paid Amount</th>
  157 + <th>Action</th>
  158 + </tr>
  159 + <tr
  160 + v-for="(feeType, index) in feeTypeData"
  161 + :key="index"
  162 + v-on:keyup="getAmmountDetails(feeType)"
  163 + >
  164 + <td style="width:40px">{{ index + 1 }}</td>
  165 + <td style="width:120px">{{ feeType.feeTypeName }}</td>
  166 + <td>
  167 + <v-text-field
  168 + placeholder="fill your Amount"
  169 + v-model="feeType.amount"
  170 + type="number"
  171 + ></v-text-field>
  172 + </td>
  173 + <td>
  174 + <v-text-field
  175 + placeholder="fill your Discount"
  176 + v-model="feeType.discount"
  177 + type="number"
  178 + ></v-text-field>
  179 + </td>
  180 + <td>{{ feeType.subTotal }}</td>
  181 + <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
  182 + <v-text-field
  183 + placeholder="fill your Paid Amount"
  184 + v-model="feeType.paidAmount"
  185 + type="number"
  186 + :disabled="disabled"
  187 + ></v-text-field>
  188 + </td>
  189 + <td v-if="invoiceData.paymentStatus != 'NOT_PAID'">
  190 + <v-text-field
  191 + placeholder="fill your Paid Amount"
  192 + v-model="feeType.paidAmount"
  193 + type="number"
  194 + ></v-text-field>
  195 + </td>
  196 + <td>
  197 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  198 + </td>
  199 + </tr>
  200 + <tfoot>
  201 + <tr>
  202 + <td colspan="2">Total:</td>
  203 + <td>{{ feeType.amount }}</td>
  204 + <td>{{ feeType.discount }}</td>
  205 + <td>{{ feeType.subTotal }}</td>
  206 + <td>{{ feeType.paidAmount }}</td>
  207 + </tr>
  208 + </tfoot>
  209 + </table>
  210 + </v-card>
  211 + </v-flex>
  212 + </v-layout>
  213 + </v-container>
  214 + </v-flex>
  215 + </v-container>
  216 + <div class="loader" v-if="showLoader">
  217 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  218 + </div>
  219 + </v-app>
  220 +</template>
  221 +
  222 +<script>
  223 +import http from "@/Services/http.js";
  224 +import Util from "@/util";
  225 +import moment from "moment";
  226 +
  227 +export default {
  228 + data: () => ({
  229 + snackbar: false,
  230 + showPayMethods: false,
  231 + y: "top",
  232 + x: "right",
  233 + mode: "",
  234 + timeout: 3000,
  235 + text: "",
  236 + showLoader: false,
  237 + loading: false,
  238 + date: null,
  239 + search: "",
  240 + // dialog: false,
  241 + // dialog1: false,
  242 + valid: true,
  243 + validEdit: true,
  244 + // isActive: true,
  245 + // newActive: false,
  246 + showFeeType: false,
  247 + disabled: true,
  248 + details: [],
  249 + feeTypes: [],
  250 + menu1: false,
  251 + invoiceData: {},
  252 + paymentMethods: ["Cash", "Cheque"],
  253 + feeType: {
  254 + amount: "0.00",
  255 + discount: "0.00",
  256 + paidAmount: "0.00",
  257 + subTotal: "0.00",
  258 + feeTypeName: ""
  259 + },
  260 + feeTypeData: [],
  261 + pagination: {
  262 + rowsPerPage: 15
  263 + },
  264 + token: "",
  265 + editedItem: {},
  266 + invoiceParticularData: {},
  267 + addclass: [],
  268 + studentList: [],
  269 + paymentStatus: [
  270 + {
  271 + name: "Not Paid",
  272 + value: "NOT_PAID"
  273 + },
  274 + {
  275 + name: "Partially Paid",
  276 + value: "PARTIALLY_PAID"
  277 + },
  278 + {
  279 + name: "Fully Paid",
  280 + value: "FULLY_PAID"
  281 + }
  282 + ]
  283 + }),
  284 + // watch: {
  285 + // menu1(val) {
  286 + // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  287 + // }
  288 + // },
  289 + methods: {
  290 + save(date) {
  291 + this.$refs.menu1.save(date);
  292 + },
  293 + dates: function(date) {
  294 + return moment(date).format("MMMM DD, YYYY");
  295 + },
  296 + deleteItem(item) {
  297 + let deleteInvoice = {
  298 + invoiceId: item._id
  299 + };
  300 + http()
  301 + .delete(
  302 + "/deleteInvoice",
  303 + confirm("Are you sure you want to delete this?") && {
  304 + params: deleteInvoice
  305 + }
  306 + )
  307 + .then(response => {
  308 + if ((this.snackbar = true)) {
  309 + this.text = "Successfully delete Existing Invoice";
  310 + }
  311 + this.getInvoiceList();
  312 + })
  313 + .catch(error => {
  314 + // console.log(error);
  315 + });
  316 + },
  317 + submit() {
  318 + // console.log("this.feeType", this.feeType);
  319 + let feeTypeId = "";
  320 + for (let i = 0; i < this.feeTypes.length; i++) {
  321 + if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
  322 + feeTypeId = this.feeTypes[i]._id;
  323 + }
  324 + }
  325 + if (this.$refs.form.validate()) {
  326 + let invoiceData = {
  327 + invoiceId: this.invoiceData._id,
  328 + classId: this.invoiceData.classNum,
  329 + studentId: this.invoiceData.sectionId,
  330 + date: this.invoiceData.date,
  331 + paymentStatus: this.invoiceData.paymentStatus,
  332 + paymentMethod: this.invoiceData.paymentMethod,
  333 + feeType: this.feeTypeData,
  334 + totalAmount: this.feeType.amount,
  335 + totalDiscount: this.feeType.discount,
  336 + totalSubTotal: this.feeType.subTotal,
  337 + totalPaidAmount: this.feeType.paidAmount
  338 + };
  339 + if (invoiceData.paymentStatus == "NOT_PAID") {
  340 + delete invoiceData.totalPaidAmount;
  341 + }
  342 + if (feeTypeId == "") {
  343 + delete invoiceData.feeType[0].feeTypeId;
  344 + }
  345 + if (this.invoiceData.paymentStatus == "NOT_PAID") {
  346 + delete invoiceData.paymentMethod;
  347 + }
  348 + http()
  349 + .put("/updateInvoice", invoiceData)
  350 + .then(response => {
  351 + this.getInvoiceList();
  352 + this.snackbar = true;
  353 + this.text = "New Invoice added successfully";
  354 + this.loading = false;
  355 + })
  356 + .catch(error => {
  357 + console.log(error);
  358 + if ((this.snackbar = true)) {
  359 + this.text = error.response.data.message;
  360 + }
  361 + this.loading = false;
  362 + });
  363 + }
  364 + },
  365 + clear() {
  366 + this.$refs.form.reset();
  367 + },
  368 + getInvoiceList() {
  369 + http()
  370 + .get("/getParticularInvoice", {
  371 + params: { invoiceId: this.$route.params.invoiceid },
  372 + headers: { Authorization: "Bearer " + this.token }
  373 + })
  374 + .then(response => {
  375 + this.invoiceParticularData = response.data.data;
  376 + this.invoiceData = this.invoiceParticularData;
  377 + this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
  378 + this.feeTypeData = this.invoiceParticularData.feeType;
  379 + (this.feeType.amount = response.data.data.totalAmount),
  380 + (this.feeType.discount = response.data.data.totalDiscount),
  381 + (this.feeType.subTotal = response.data.data.totalSubTotal),
  382 + (this.showLoader = false);
  383 + })
  384 + .catch(err => {
  385 + this.showLoader = false;
  386 + });
  387 + },
  388 + selectFeeType() {
  389 + this.showFeeType = true;
  390 + this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
  391 + },
  392 + deleteSelectFee: function(index) {
  393 + this.feeTypeData.splice(index, 1);
  394 + for (let i = 0; i < this.feeTypeData.length; i++) {
  395 + this.feeType = this.feeTypeData[i];
  396 + }
  397 + if (this.feeTypeData.length == 0) {
  398 + this.feeType = {
  399 + amount: "0.00",
  400 + discount: "0.00",
  401 + paidAmount: "0.00",
  402 + subTotal: "0.00",
  403 + feeTypeList: ""
  404 + };
  405 + }
  406 + },
  407 + getAllClasses() {
  408 + http()
  409 + .get("/getClassesList", {
  410 + headers: { Authorization: "Bearer " + this.token }
  411 + })
  412 + .then(response => {
  413 + this.addclass = response.data.data;
  414 + })
  415 + .catch(err => {
  416 + // console.log("err====>", err);
  417 + });
  418 + },
  419 + getAllStudents() {
  420 + http()
  421 + .get("/getStudentsList", {
  422 + params: { classId: this.invoiceData.classNum },
  423 + headers: { Authorization: "Bearer " + this.token }
  424 + })
  425 + .then(response => {
  426 + this.studentList = response.data.data;
  427 + })
  428 + .catch(err => {
  429 + // console.log("err====>", err);
  430 + });
  431 + },
  432 + getfeeType() {
  433 + http()
  434 + .get("/getFeesList", {
  435 + headers: { Authorization: "Bearer " + this.token }
  436 + })
  437 + .then(response => {
  438 + this.feeTypes = response.data.data;
  439 + })
  440 + .catch(err => {
  441 + // console.log("err====>", err);
  442 + });
  443 + },
  444 + getAmmountDetails(feeTyp) {
  445 + let feeType = {
  446 + amount: "",
  447 + discount: "",
  448 + subTotal: "",
  449 + subParticularTotal: "",
  450 + paidAmount: ""
  451 + };
  452 + for (let i = 0; i < this.feeTypeData.length; i++) {
  453 + // *********** AMOUNT ***********
  454 + feeType.amount =
  455 + Number(feeType.amount) + Number(this.feeTypeData[i].amount);
  456 + console.log("feeType.amount ", feeType.amount);
  457 + this.feeType.amount = feeType.amount;
  458 + this.feeType.subTotal = feeType.amount;
  459 + this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
  460 + // *********** DISCOUNT ***********
  461 + if (this.feeTypeData[i].discount) {
  462 + feeType.discount =
  463 + Number(feeType.discount) + Number(this.feeTypeData[i].discount);
  464 + console.log("feeType.discount", feeType.discount);
  465 + this.feeType.discount = feeType.discount;
  466 + feeType.subParticularTotal =
  467 + this.feeTypeData[i].amount -
  468 + (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
  469 + console.log("feeType.subTotal", feeType.subTotal);
  470 + this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
  471 + }
  472 + // *********** SUBTOTAL ***********
  473 + feeType.subTotal =
  474 + Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
  475 + this.feeType.subTotal = feeType.subTotal.toFixed(2);
  476 + // *********** PAID-AMOUNT ***********
  477 + feeType.paidAmount =
  478 + Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
  479 + this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
  480 + }
  481 + },
  482 + getPayMethodList() {
  483 + if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
  484 + this.showPayMethods = true;
  485 + } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
  486 + this.showPayMethods = true;
  487 + } else {
  488 + this.showPayMethods = false;
  489 + }
  490 + }
  491 + },
  492 + mounted() {
  493 + this.token = this.$store.state.token;
  494 + this.getInvoiceList();
  495 + this.getAllClasses();
  496 + this.getfeeType();
  497 + },
  498 + created() {
  499 + this.$root.$on("app:search", search => {
  500 + this.search = search;
  501 + });
  502 + },
  503 + beforeDestroy() {
  504 + // dont forget to remove the listener
  505 + this.$root.$off("app:search");
  506 + }
  507 +};
  508 +</script>
  509 +
  510 +
  511 +<style scoped>
  512 +.active {
  513 + background-color: gray;
  514 + color: white !important;
  515 +}
  516 +.activebtn {
  517 + color: black !important;
  518 +}
  519 +table {
  520 + border-collapse: collapse;
  521 + border: 1px solid #e2e7eb;
  522 +}
  523 +
  524 +th,
  525 +td {
  526 + border: 1px solid #e2e7eb;
  527 + padding: 10px;
  528 + text-align: center;
  529 +}
  530 +table.feeTypeTable {
  531 + table-layout: auto !important;
  532 + width: 100% !important;
  533 +}
  534 +</style>
0 535 \ No newline at end of file
... ...
src/pages/Account/expense.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,767 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing Expense</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add New Expense</v-tab>
  19 + <!-- ****** EDIT EXPENSE DETAILS ****** -->
  20 + <v-tab-item>
  21 + <v-snackbar
  22 + :timeout="timeout"
  23 + :top="y === 'top'"
  24 + :right="x === 'right'"
  25 + :vertical="mode === 'vertical'"
  26 + v-model="snackbar"
  27 + color="success"
  28 + >{{ text }}</v-snackbar>
  29 + <v-dialog v-model="dialog" max-width="600px" scrollable>
  30 + <v-card flat>
  31 + <v-toolbar color="grey lighten-2" flat>
  32 + <v-spacer></v-spacer>
  33 + <v-toolbar-title>Edit Expense Profile</v-toolbar-title>
  34 + <v-spacer></v-spacer>
  35 + </v-toolbar>
  36 + <v-card-text style="height: 600px;">
  37 + <v-form ref="form">
  38 + <v-container fluid>
  39 + <v-layout>
  40 + <v-flex
  41 + xs12
  42 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  43 + >
  44 + <v-avatar size="160px">
  45 + <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
  46 + <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
  47 + <img
  48 + v-if="imageUrl"
  49 + :src="imageUrl"
  50 + height="150"
  51 + style="border-radius:50%; width:200px"
  52 + />
  53 + </v-avatar>
  54 + <input
  55 + type="file"
  56 + style="display:none"
  57 + ref="image"
  58 + accept="image/*"
  59 + @change="onFilePicked"
  60 + />
  61 + </v-flex>
  62 + </v-layout>
  63 + <v-layout>
  64 + <v-flex xs12 sm12>
  65 + <v-layout>
  66 + <v-flex xs4 class="pt-4 subheading">
  67 + <label class="right">Name:</label>
  68 + </v-flex>
  69 + <v-flex xs6 class="ml-3">
  70 + <v-text-field
  71 + v-model="editedItem.name"
  72 + placeholder="fill your full Name"
  73 + name="name"
  74 + type="text"
  75 + required
  76 + ></v-text-field>
  77 + </v-flex>
  78 + </v-layout>
  79 + </v-flex>
  80 + </v-layout>
  81 + <v-layout>
  82 + <v-flex xs12>
  83 + <v-layout>
  84 + <v-flex xs4 class="pt-4 subheading">
  85 + <label class="right">Date:</label>
  86 + </v-flex>
  87 + <v-flex xs6 class="ml-3">
  88 + <v-menu
  89 + ref="menu"
  90 + :close-on-content-click="false"
  91 + v-model="menu3"
  92 + :nudge-right="40"
  93 + lazy
  94 + transition="scale-transition"
  95 + offset-y
  96 + full-width
  97 + min-width="290px"
  98 + >
  99 + <v-text-field
  100 + slot="activator"
  101 + v-model="editedItem.date"
  102 + placeholder="Select date"
  103 + ></v-text-field>
  104 + <v-date-picker
  105 + ref="picker"
  106 + v-model="editedItem.date"
  107 + @input="$refs.menu.save(editedItem.date)"
  108 + ></v-date-picker>
  109 + </v-menu>
  110 + </v-flex>
  111 + </v-layout>
  112 + </v-flex>
  113 + <v-layout>
  114 + <v-flex xs12 sm12>
  115 + <v-layout>
  116 + <v-flex xs4 class="pt-4 subheading">
  117 + <label class="right">Amount:</label>
  118 + </v-flex>
  119 + <v-flex xs6 class="ml-3">
  120 + <v-text-field v-model="editedItem.amount" required></v-text-field>
  121 + </v-flex>
  122 + </v-layout>
  123 + </v-flex>
  124 + </v-layout>
  125 + <v-flex xs12>
  126 + <v-layout>
  127 + <v-flex xs4 class="pt-4 subheading">
  128 + <label class="right">Uplaod Image:</label>
  129 + </v-flex>
  130 + <v-flex xs6 class="ml-3">
  131 + <v-text-field
  132 + label="Select Image"
  133 + @click="pickFile"
  134 + v-model="imageName"
  135 + append-icon="attach_file"
  136 + ></v-text-field>
  137 + </v-flex>
  138 + </v-layout>
  139 + </v-flex>
  140 + <v-flex xs12>
  141 + <v-layout>
  142 + <v-flex xs4 class="pt-4 subheading">
  143 + <label class="right">Note:</label>
  144 + </v-flex>
  145 + <v-flex xs6 class="ml-3">
  146 + <v-textarea
  147 + name="input-7-1"
  148 + v-model="editedItem.note"
  149 + placeholder="fill your Note"
  150 + type="text"
  151 + :rules="noteRules"
  152 + multi-line
  153 + required
  154 + ></v-textarea>
  155 + </v-flex>
  156 + </v-layout>
  157 + </v-flex>
  158 + </v-layout>
  159 + <v-layout>
  160 + <v-flex xs12 sm12>
  161 + <v-card-actions>
  162 + <v-btn round dark @click.native="close">Cancel</v-btn>
  163 + <v-spacer></v-spacer>
  164 + <v-btn round dark :loading="loading" @click="save">Save</v-btn>
  165 + </v-card-actions>
  166 + </v-flex>
  167 + </v-layout>
  168 + </v-container>
  169 + </v-form>
  170 + </v-card-text>
  171 + </v-card>
  172 + </v-dialog>
  173 +
  174 + <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
  175 +
  176 + <v-dialog v-model="dialog1" max-width="600px" scrollable>
  177 + <v-card>
  178 + <v-toolbar color="grey lighten-2" flat>
  179 + <v-spacer></v-spacer>
  180 + <v-toolbar-title>
  181 + <h3>Expense Profile</h3>
  182 + </v-toolbar-title>
  183 + <v-spacer></v-spacer>
  184 + <v-icon @click="close1">close</v-icon>
  185 + </v-toolbar>
  186 + <v-card-text style="height: 460px;">
  187 + <v-container grid-list-md>
  188 + <v-layout wrap>
  189 + <v-flex>
  190 + <v-flex align-center justify-center layout text-xs-center>
  191 + <v-avatar size="160px">
  192 + <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
  193 + <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
  194 + </v-avatar>
  195 + </v-flex>
  196 + <v-layout>
  197 + <v-flex xs5 sm6>
  198 + <h5 class="right my-1">
  199 + <b>Name:</b>
  200 + </h5>
  201 + </v-flex>
  202 + <v-flex sm6 xs8>
  203 + <h5 class="my-1">{{ editedItem.name }}</h5>
  204 + </v-flex>
  205 + </v-layout>
  206 + <v-layout>
  207 + <v-flex xs5 sm6>
  208 + <h5 class="right my-1">
  209 + <b>Amount:</b>
  210 + </h5>
  211 + </v-flex>
  212 + <v-flex sm6 xs8>
  213 + <h5 class="my-1">{{ editedItem.amount }}</h5>
  214 + </v-flex>
  215 + </v-layout>
  216 + <v-layout>
  217 + <v-flex xs5 sm6>
  218 + <h5 class="right my-1">
  219 + <b>Date:</b>
  220 + </h5>
  221 + </v-flex>
  222 + <v-flex sm6 xs8>
  223 + <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
  224 + </v-flex>
  225 + </v-layout>
  226 + <v-layout>
  227 + <v-flex xs5 sm6>
  228 + <h5 class="right my-1">
  229 + <b>Note:</b>
  230 + </h5>
  231 + </v-flex>
  232 + <v-flex sm6 xs8>
  233 + <h5 class="my-1">{{ editedItem.note }}</h5>
  234 + </v-flex>
  235 + </v-layout>
  236 + </v-flex>
  237 + </v-layout>
  238 + </v-container>
  239 + </v-card-text>
  240 + </v-card>
  241 + </v-dialog>
  242 + <v-snackbar
  243 + :timeout="timeout"
  244 + :top="y === 'top'"
  245 + :right="x === 'right'"
  246 + :vertical="mode === 'vertical'"
  247 + v-model="snackbar"
  248 + color="success"
  249 + >{{ text }}</v-snackbar>
  250 +
  251 + <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
  252 +
  253 + <v-data-table
  254 + :headers="headers"
  255 + :items="expenseList"
  256 + :pagination.sync="pagination"
  257 + :search="search"
  258 + >
  259 + <template slot="items" slot-scope="props">
  260 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
  261 + <td id="td" class="text-xs-center">
  262 + <v-avatar>
  263 + <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
  264 + <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
  265 + </v-avatar>
  266 + </td>
  267 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  268 + <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
  269 + <td id="td" class="text-xs-center">{{ props.item.user }}</td>
  270 + <td id="td" class="text-xs-center">{{ props.item.amount }}</td>
  271 + <td id="td" class="text-xs-center">{{ props.item.note }}</td>
  272 + <td class="text-xs-center">
  273 + <span>
  274 + <img
  275 + style="cursor:pointer; width:25px; height:18px; "
  276 + class="mr-5"
  277 + @click="profile(props.item)"
  278 + src="/static/icon/eye1.png"
  279 + />
  280 + <img
  281 + style="cursor:pointer; width:20px; height:18px; "
  282 + class="mr-5"
  283 + @click="editItem(props.item)"
  284 + src="/static/icon/edit1.png"
  285 + />
  286 + <img
  287 + style="cursor:pointer;width:20px; height:20px; "
  288 + class="mr-5"
  289 + @click="deleteItem(props.item)"
  290 + src="/static/icon/delete1.png"
  291 + />
  292 + </span>
  293 + </td>
  294 + </template>
  295 + <v-alert
  296 + slot="no-results"
  297 + :value="true"
  298 + color="error"
  299 + icon="warning"
  300 + >Your search for "{{ search }}" found no results.</v-alert>
  301 + </v-data-table>
  302 + </v-tab-item>
  303 +
  304 + <!-- ****** Add Expense Data****** -->
  305 + <v-tab-item>
  306 + <v-container>
  307 + <v-snackbar
  308 + :timeout="timeout"
  309 + :top="y === 'top'"
  310 + :right="x === 'right'"
  311 + :vertical="mode === 'vertical'"
  312 + v-model="snackbar"
  313 + color="success"
  314 + >{{ text }}</v-snackbar>
  315 + <v-flex xs12 sm12 class="my-4">
  316 + <v-card flat>
  317 + <v-form ref="form" v-model="valid" lazy-validation>
  318 + <v-container fluid>
  319 + <v-layout>
  320 + <v-flex
  321 + xs12
  322 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  323 + >
  324 + <v-avatar size="100px">
  325 + <img src="/static/icon/user.png" v-if="!imageUrl" />
  326 + </v-avatar>
  327 + <img
  328 + :src="imageUrl"
  329 + height="150"
  330 + v-if="imageUrl"
  331 + style="border-radius:50%; width:200px"
  332 + />
  333 + </v-flex>
  334 + </v-layout>
  335 + <v-layout>
  336 + <v-flex xs12 sm12>
  337 + <v-layout>
  338 + <v-flex xs4 class="pt-4 subheading">
  339 + <label class="right">Name:</label>
  340 + </v-flex>
  341 + <v-flex xs8 sm4 class="ml-3">
  342 + <v-text-field
  343 + v-model="addExpense.name"
  344 + placeholder="fill your full Name"
  345 + name="name"
  346 + type="text"
  347 + :rules="nameRules"
  348 + required
  349 + ></v-text-field>
  350 + </v-flex>
  351 + </v-layout>
  352 + </v-flex>
  353 + </v-layout>
  354 + <v-layout>
  355 + <v-flex xs12 sm12>
  356 + <v-layout>
  357 + <v-flex xs4 class="pt-4 subheading">
  358 + <label class="right">Amount:</label>
  359 + </v-flex>
  360 + <v-flex xs8 sm4 class="ml-3">
  361 + <v-text-field
  362 + v-model="addExpense.amount"
  363 + placeholder="fill your Amount"
  364 + name="name"
  365 + type="text"
  366 + :rules="amountRules"
  367 + required
  368 + ></v-text-field>
  369 + </v-flex>
  370 + </v-layout>
  371 + </v-flex>
  372 + </v-layout>
  373 + <v-layout>
  374 + <v-flex xs12 sm12>
  375 + <v-layout>
  376 + <v-flex xs4 class="pt-4 subheading">
  377 + <label class="right">Date</label>
  378 + </v-flex>
  379 + <v-flex xs8 sm4 class="ml-3">
  380 + <v-menu
  381 + ref="menu1"
  382 + :close-on-content-click="false"
  383 + v-model="menu1"
  384 + :nudge-right="40"
  385 + lazy
  386 + transition="scale-transition"
  387 + offset-y
  388 + full-width
  389 + min-width="290px"
  390 + >
  391 + <v-text-field
  392 + slot="activator"
  393 + :rules="joinDateRules"
  394 + v-model="addExpense.date"
  395 + placeholder="Select date"
  396 + ></v-text-field>
  397 + <v-date-picker
  398 + ref="picker"
  399 + v-model="addExpense.date"
  400 + @input="$refs.menu1.save(addExpense.date)"
  401 + ></v-date-picker>
  402 + </v-menu>
  403 + </v-flex>
  404 + </v-layout>
  405 + </v-flex>
  406 + <v-flex xs12 sm12>
  407 + <v-layout>
  408 + <v-flex xs4 class="pt-4 subheading">
  409 + <label class="right">File:</label>
  410 + </v-flex>
  411 + <v-flex xs8 sm4 class="ml-3">
  412 + <v-text-field
  413 + label="Select file"
  414 + @click="pickFile"
  415 + v-model="imageName"
  416 + append-icon="attach_file"
  417 + ></v-text-field>
  418 + <input
  419 + type="file"
  420 + style="display:none"
  421 + ref="image"
  422 + accept="image/*"
  423 + @change="onFilePicked"
  424 + />
  425 + </v-flex>
  426 + </v-layout>
  427 + </v-flex>
  428 + <v-layout>
  429 + <v-flex xs12 sm12>
  430 + <v-layout>
  431 + <v-flex xs4 class="pt-4 subheading">
  432 + <label class="right">Note:</label>
  433 + </v-flex>
  434 + <v-flex xs8 sm4 class="ml-3">
  435 + <v-textarea
  436 + name="input-7-1"
  437 + v-model="addExpense.note"
  438 + placeholder="fill your Note"
  439 + type="text"
  440 + :rules="noteRules"
  441 + multi-line
  442 + required
  443 + ></v-textarea>
  444 + </v-flex>
  445 + </v-layout>
  446 + </v-flex>
  447 + </v-layout>
  448 + </v-layout>
  449 + <v-layout>
  450 + <v-flex xs12 sm12>
  451 + <v-card-actions>
  452 + <v-flex xs12 sm5>
  453 + <v-btn @click="clear" class="right" round dark>clear</v-btn>
  454 + </v-flex>
  455 + <v-spacer></v-spacer>
  456 + <v-flex xs12 sm5>
  457 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  458 + </v-flex>
  459 + </v-card-actions>
  460 + </v-flex>
  461 + </v-layout>
  462 + </v-container>
  463 + </v-form>
  464 + </v-card>
  465 + </v-flex>
  466 + </v-container>
  467 + </v-tab-item>
  468 + </v-tabs>
  469 + <div class="loader" v-if="showLoader">
  470 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  471 + </div>
  472 + </v-app>
  473 +</template>
  474 +
  475 +<script>
  476 +import http from "@/Services/http.js";
  477 +import Util from "@/util";
  478 +import moment from "moment";
  479 +
  480 +export default {
  481 + data: () => ({
  482 + component: "report-generate",
  483 + snackbar: false,
  484 + y: "top",
  485 + x: "right",
  486 + mode: "",
  487 + timeout: 3000,
  488 + text: "",
  489 + showLoader: false,
  490 + loading: false,
  491 + date: null,
  492 + search: "",
  493 + menu: false,
  494 + menu1: false,
  495 + menu2: false,
  496 + menu3: false,
  497 + dialog: false,
  498 + dialog1: false,
  499 + valid: true,
  500 + isActive: true,
  501 + newActive: false,
  502 + pagination: {
  503 + rowsPerPage: 15
  504 + },
  505 + imageData: {},
  506 + imageName: "",
  507 + imageUrl: "",
  508 + imageFile: "",
  509 + nameRules: [v => !!v || " Full Name is required"],
  510 + amountRules: [v => !!v || "Amount is required"],
  511 + noteRules: [v => !!v || "Note Name is required"],
  512 + joinDateRules: [v => !!v || "Date is required"],
  513 + errorMessages: "",
  514 + headers: [
  515 + {
  516 + text: "No",
  517 + align: "center",
  518 + sortable: false,
  519 + value: "No"
  520 + },
  521 + {
  522 + text: "Profile Pic",
  523 + value: "profilePicUrl",
  524 + sortable: false,
  525 + align: "center"
  526 + },
  527 + { text: "Name", value: "name", sortable: false, align: "center" },
  528 + { text: "Date", value: "date", sortable: false, align: "center" },
  529 + { text: "User", value: "user", sortable: false, align: "center" },
  530 + { text: "Amount", value: "amount", sortable: false, align: "center" },
  531 + { text: "Note", value: "note", sortable: false, align: "center" },
  532 + { text: "Action", value: "", sortable: false, align: "center" }
  533 + ],
  534 + expenseList: [],
  535 + editedIndex: -1,
  536 + upload: "",
  537 + editedItem: {
  538 + role: "TEACHER",
  539 + name: "",
  540 + email: "",
  541 + date: null,
  542 + city: "",
  543 + pincode: "",
  544 + country: "",
  545 + permanentAddress: "",
  546 + presentAddress: "",
  547 + mobileNo: "",
  548 + state: "",
  549 + joinDate: null
  550 + },
  551 + addExpense: {},
  552 + defaultItem: {
  553 + role: "TEACHER",
  554 + name: "",
  555 + email: ""
  556 + }
  557 + }),
  558 + watch: {
  559 + menu(val) {
  560 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  561 + },
  562 + menu1(val) {
  563 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  564 + }
  565 + },
  566 + methods: {
  567 + save(date) {
  568 + this.$refs.menu.save(date);
  569 + },
  570 + save(date) {
  571 + this.$refs.menu1.save(date);
  572 + },
  573 + pickFile() {
  574 + this.$refs.image.click();
  575 + },
  576 + onFilePicked(e) {
  577 + // console.log(e)
  578 + const files = e.target.files;
  579 + this.upload = e.target.files[0];
  580 + console.log("imageData-upload========>", this.upload);
  581 + if (files[0] !== undefined) {
  582 + this.imageName = files[0].name;
  583 + if (this.imageName.lastIndexOf(".") <= 0) {
  584 + return;
  585 + }
  586 + const fr = new FileReader();
  587 + fr.readAsDataURL(files[0]);
  588 + fr.addEventListener("load", () => {
  589 + this.imageUrl = fr.result;
  590 + this.imageFile = files[0]; // this is an image file that can be sent to server...
  591 + // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  592 + // console.log("upload=======>", this.imageData.imageUrl);
  593 + console.log("imageFile", this.imageUrl);
  594 + });
  595 + } else {
  596 + this.imageName = "";
  597 + this.imageFile = "";
  598 + this.imageUrl = "";
  599 + }
  600 + },
  601 + dates: function(date) {
  602 + return moment(date).format("MMMM DD, YYYY");
  603 + },
  604 + getExpenseList() {
  605 + this.showLoader = true;
  606 + var token = this.$store.state.token;
  607 + http()
  608 + .get("/getExpensesList", {
  609 + headers: { Authorization: "Bearer " + token }
  610 + })
  611 + .then(response => {
  612 + this.expenseList = response.data.data;
  613 + this.showLoader = false;
  614 + // console.log("getTeacherList=====>",this.expenseList)
  615 + })
  616 + .catch(error => {
  617 + this.showLoader = false;
  618 + if (error.response.status === 401) {
  619 + this.$router.replace({ path: "/" });
  620 + this.$store.dispatch("setToken", null);
  621 + this.$store.dispatch("Id", null);
  622 + }
  623 + });
  624 + },
  625 + editItem(item) {
  626 + this.editedIndex = this.expenseList.indexOf(item);
  627 + this.editedItem = Object.assign({}, item);
  628 + // this.editedItem.dob =
  629 + // this.editedItem.dob != undefined
  630 + // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
  631 + // : (this.editedItem.dob = "");
  632 + this.editedItem.date =
  633 + this.editedItem.date != undefined
  634 + ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
  635 + : (this.editedItem.date = "");
  636 +
  637 + this.dialog = true;
  638 + },
  639 + profile(item) {
  640 + this.editedIndex = this.expenseList.indexOf(item);
  641 + this.editedItem = Object.assign({}, item);
  642 + this.dialog1 = true;
  643 + },
  644 + deleteItem(item) {
  645 + let deleteExpense = {
  646 + expenseId: item._id
  647 + };
  648 + // console.log("deleteUers",deleteTeachers)
  649 + http()
  650 + .delete(
  651 + "/deleteExpense",
  652 + confirm("Are you sure you want to delete this?") && {
  653 + params: deleteExpense
  654 + }
  655 + )
  656 + .then(response => {
  657 + // console.log("deleteUers",deleteTeachers)
  658 + if ((this.snackbar = true)) {
  659 + this.text = "Successfully delete Existing Expense";
  660 + }
  661 + this.getExpenseList();
  662 + })
  663 + .catch(error => {
  664 + console.log(error);
  665 + });
  666 + },
  667 + activeTab(type) {
  668 + switch (type) {
  669 + case "existing":
  670 + this.newActive = false;
  671 + this.isActive = true;
  672 + break;
  673 +
  674 + default:
  675 + this.newActive = true;
  676 + this.isActive = false;
  677 + break;
  678 + }
  679 + },
  680 + close() {
  681 + this.dialog = false;
  682 + setTimeout(() => {
  683 + this.editedItem = Object.assign({}, this.defaultItem);
  684 + this.editedIndex = -1;
  685 + }, 300);
  686 + },
  687 + close1() {
  688 + this.dialog1 = false;
  689 + },
  690 + submit() {
  691 + if (this.$refs.form.validate()) {
  692 + if (this.imageUrl) {
  693 + var str = this.imageUrl;
  694 + const [baseUrl, imageUrl] = str.split(/,/);
  695 + this.addExpense.upload = imageUrl;
  696 + }
  697 + this.loading = true;
  698 + http()
  699 + .post("/createExpense", this.addExpense)
  700 + .then(response => {
  701 + this.getExpenseList();
  702 + if ((this.snackbar = true)) {
  703 + this.text = "New Expense added successfully";
  704 + }
  705 +
  706 + this.clear();
  707 + this.loading = false;
  708 + })
  709 + .catch(error => {
  710 + // console.log(error);
  711 + if ((this.snackbar = true)) {
  712 + this.text = error.response.data.message;
  713 + }
  714 + this.loading = false;
  715 + });
  716 + }
  717 + },
  718 + clear() {
  719 + this.$refs.form.reset();
  720 + },
  721 + save() {
  722 + this.loading = true;
  723 + this.editedItem.expenseId = this.editedItem._id;
  724 + if (this.imageUrl) {
  725 + var str = this.imageUrl;
  726 + const [baseUrl, imageUrl] = str.split(/,/);
  727 + this.editedItem.upload = imageUrl;
  728 + }
  729 + http()
  730 + .put("/updateExpense", this.editedItem)
  731 + .then(response => {
  732 + if ((this.snackbar = true)) {
  733 + this.text = "Successfully Edit Expense";
  734 + }
  735 + this.loading = false;
  736 + this.getExpenseList();
  737 + this.close();
  738 + })
  739 + .catch(error => {
  740 + console.log(error);
  741 + this.loading = false;
  742 + });
  743 + }
  744 + },
  745 + mounted() {
  746 + this.getExpenseList();
  747 + },
  748 + created() {
  749 + this.$root.$on("app:search", search => {
  750 + this.search = search;
  751 + });
  752 + },
  753 + beforeDestroy() {
  754 + // dont forget to remove the listener
  755 + this.$root.$off("app:search");
  756 + }
  757 +};
  758 +</script>
  759 +<style scoped>
  760 +.active {
  761 + background-color: gray;
  762 + color: white !important;
  763 +}
  764 +.activebtn {
  765 + color: black !important;
  766 +}
  767 +</style>
0 768 \ No newline at end of file
... ...
src/pages/Account/feeTypes.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,480 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing Fee Type</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add New Fee Type</v-tab>
  19 +
  20 + <!-- ****** EDIT SECTION ****** -->
  21 + <v-tab-item>
  22 + <v-snackbar
  23 + :timeout="timeout"
  24 + :top="y === 'top'"
  25 + :right="x === 'right'"
  26 + :vertical="mode === 'vertical'"
  27 + v-model="snackbar"
  28 + color="success"
  29 + >{{ text }}</v-snackbar>
  30 + <v-dialog v-model="dialog" max-width="600px">
  31 + <v-toolbar color="grey lighten-2">
  32 + <v-spacer></v-spacer>
  33 + <v-toolbar-title>
  34 + <h3>Edit Fee Type</h3>
  35 + </v-toolbar-title>
  36 + <v-spacer></v-spacer>
  37 + </v-toolbar>
  38 + <v-card>
  39 + <v-card-text>
  40 + <v-container>
  41 + <v-layout wrap justify-center>
  42 + <v-flex xs12 sm9>
  43 + <v-form>
  44 + <v-layout>
  45 + <v-flex xs4 class="pt-4 subheading">
  46 + <label class="right pr-3">Fee Type:</label>
  47 + </v-flex>
  48 + <v-flex xs8>
  49 + <v-text-field
  50 + v-model="editedItem.feeType"
  51 + placeholder="fill your Fee Type"
  52 + :rules="feetTypeRules"
  53 + required
  54 + ></v-text-field>
  55 + </v-flex>
  56 + </v-layout>
  57 + <v-layout>
  58 + <v-flex xs4 class="pt-4 subheading">
  59 + <label class="right pr-3">Note:</label>
  60 + </v-flex>
  61 + <v-flex xs8>
  62 + <v-textarea
  63 + name="input-7-1"
  64 + v-model="editedItem.note"
  65 + placeholder="fill your Note"
  66 + :rules="noteRules"
  67 + multi-line
  68 + required
  69 + ></v-textarea>
  70 + </v-flex>
  71 + </v-layout>
  72 + <v-card-actions>
  73 + <v-btn round dark @click.native="close">Cancel</v-btn>
  74 + <v-spacer></v-spacer>
  75 + <v-btn round dark @click="save">Save</v-btn>
  76 + </v-card-actions>
  77 + </v-form>
  78 + </v-flex>
  79 + </v-layout>
  80 + </v-container>
  81 + </v-card-text>
  82 + </v-card>
  83 + </v-dialog>
  84 +
  85 + <!-- ****** PROFILE VIEW SECTION DATA ****** -->
  86 +
  87 + <v-dialog v-model="dialog1" max-width="600px">
  88 + <v-toolbar color="grey lighten-2">
  89 + <v-spacer></v-spacer>
  90 + <v-toolbar-title>
  91 + <h3>Fee Type</h3>
  92 + </v-toolbar-title>
  93 + <v-spacer></v-spacer>
  94 + <v-icon @click="close1">close</v-icon>
  95 + </v-toolbar>
  96 + <v-card>
  97 + <v-card-text>
  98 + <v-container grid-list-md>
  99 + <v-layout wrap>
  100 + <v-flex>
  101 + <v-layout>
  102 + <v-flex xs5 sm6>
  103 + <h5 class="right my-1">
  104 + <b>Fee Type:</b>
  105 + </h5>
  106 + </v-flex>
  107 + <v-flex sm6 xs8>
  108 + <h5 class="my-1">{{ editedItem.feeType }}</h5>
  109 + </v-flex>
  110 + </v-layout>
  111 + <v-layout>
  112 + <v-flex xs5 sm6>
  113 + <h5 class="right my-1">
  114 + <b>Note:</b>
  115 + </h5>
  116 + </v-flex>
  117 + <v-flex sm6 xs8>
  118 + <h5 class="my-1">{{ editedItem.note }}</h5>
  119 + </v-flex>
  120 + </v-layout>
  121 + </v-flex>
  122 + </v-layout>
  123 + </v-container>
  124 + </v-card-text>
  125 + </v-card>
  126 + </v-dialog>
  127 +
  128 + <v-snackbar
  129 + :timeout="timeout"
  130 + :top="y === 'top'"
  131 + :right="x === 'right'"
  132 + :vertical="mode === 'vertical'"
  133 + v-model="snackbar"
  134 + color="success"
  135 + >{{ text }}</v-snackbar>
  136 +
  137 + <!-- ****** EXISTING-FEETYPE TABLE ****** -->
  138 +
  139 + <v-data-table
  140 + :headers="headers"
  141 + :items="feeTypeList"
  142 + :pagination.sync="pagination"
  143 + :search="search"
  144 + >
  145 + <template slot="items" slot-scope="props">
  146 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
  147 + <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
  148 + <td id="td" class="text-xs-center">{{ props.item.note }}</td>
  149 + <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
  150 +
  151 + <td class="text-xs-center">
  152 + <!-- <span> -->
  153 + <v-tooltip top>
  154 + <img
  155 + slot="activator"
  156 + style="cursor:pointer; width:25px; height:18px; "
  157 + class="mr-5"
  158 + @click="profile(props.item)"
  159 + src="/static/icon/eye1.png"
  160 + />
  161 + <span>View</span>
  162 + </v-tooltip>
  163 + <v-tooltip top>
  164 + <img
  165 + slot="activator"
  166 + style="cursor:pointer; width:20px; height:18px; "
  167 + class="mr-5"
  168 + @click="editItem(props.item)"
  169 + src="/static/icon/edit1.png"
  170 + />
  171 + <span>Edit</span>
  172 + </v-tooltip>
  173 + <v-tooltip top>
  174 + <img
  175 + slot="activator"
  176 + style="cursor:pointer; width:20px; height:20px; "
  177 + class="mr-5"
  178 + @click="deleteItem(props.item)"
  179 + src="/static/icon/delete1.png"
  180 + />
  181 + <span>Delete</span>
  182 + </v-tooltip>
  183 + <!-- </span> -->
  184 + </td>
  185 + </template>
  186 + <v-alert
  187 + slot="no-results"
  188 + :value="true"
  189 + color="error"
  190 + icon="warning"
  191 + >Your search for "{{ search }}" found no results.</v-alert>
  192 + </v-data-table>
  193 + </v-tab-item>
  194 +
  195 + <!-- ****** ADD multiple Students ****** -->
  196 +
  197 + <v-tab-item>
  198 + <v-container>
  199 + <v-snackbar
  200 + :timeout="timeout"
  201 + :top="y === 'top'"
  202 + :right="x === 'right'"
  203 + :vertical="mode === 'vertical'"
  204 + v-model="snackbar"
  205 + color="success"
  206 + >{{ text }}</v-snackbar>
  207 + <v-flex xs12 sm8 offset-sm2 class="top">
  208 + <v-card flat>
  209 + <v-container fluid fill-height>
  210 + <v-layout align-center>
  211 + <v-flex xs12 class="mt-4">
  212 + <v-form ref="form" v-model="valid" lazy-validation>
  213 + <v-layout>
  214 + <v-flex xs4 class="pt-4 subheading">
  215 + <label class="right">Fee Type:</label>
  216 + </v-flex>
  217 + <v-flex xs6 class="ml-3">
  218 + <v-text-field
  219 + v-model="feeTypeData.feeType"
  220 + placeholder="fill your Fee Type"
  221 + type="text"
  222 + :rules="feetTypeRules"
  223 + required
  224 + ></v-text-field>
  225 + </v-flex>
  226 + </v-layout>
  227 + <v-layout>
  228 + <v-flex xs4 class="pt-4 subheading">
  229 + <label class="right">Note:</label>
  230 + </v-flex>
  231 + <v-flex xs6 class="ml-3">
  232 + <v-textarea
  233 + name="input-7-1"
  234 + v-model="feeTypeData.note"
  235 + placeholder="fill your Note"
  236 + type="text"
  237 + :rules="noteRules"
  238 + multi-line
  239 + required
  240 + ></v-textarea>
  241 + </v-flex>
  242 + </v-layout>
  243 + <!-- <v-layout>
  244 + <v-flex xs4 class="pt-4 subheading">
  245 + <label class="right">Monthly:</label>
  246 + </v-flex>
  247 + <v-flex xs6 class="ml-3">
  248 + <v-checkbox
  249 + v-model="feeTypeData.monthly"
  250 + :rules="monthlyRules"
  251 + multi-line
  252 + required
  253 + ></v-checkbox>
  254 + </v-flex>
  255 + </v-layout>-->
  256 + <v-layout>
  257 + <v-flex xs12 sm9 offset-sm2>
  258 + <v-card-actions>
  259 + <v-btn @click="clear" round dark>clear</v-btn>
  260 + <v-spacer></v-spacer>
  261 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  262 + </v-card-actions>
  263 + </v-flex>
  264 + </v-layout>
  265 + </v-form>
  266 + </v-flex>
  267 + </v-layout>
  268 + </v-container>
  269 + </v-card>
  270 + </v-flex>
  271 + </v-container>
  272 + </v-tab-item>
  273 + </v-tabs>
  274 + <div class="loader" v-if="showLoader">
  275 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  276 + </div>
  277 + </v-app>
  278 +</template>
  279 +
  280 +<script>
  281 +import http from "@/Services/http.js";
  282 +import Util from "@/util";
  283 +
  284 +export default {
  285 + data: () => ({
  286 + snackbar: false,
  287 + y: "top",
  288 + x: "right",
  289 + mode: "",
  290 + timeout: 3000,
  291 + text: "",
  292 + showLoader: false,
  293 + loading: false,
  294 + date: null,
  295 + search: "",
  296 + dialog: false,
  297 + dialog1: false,
  298 + valid: true,
  299 + validEdit: true,
  300 + isActive: true,
  301 + newActive: false,
  302 + AddUsercredentials: {},
  303 + pagination: {
  304 + rowsPerPage: 15
  305 + },
  306 + feetTypeRules: [v => !!v || " Fee Type Name is required"],
  307 + monthlyRules: [v => !!v || " Select Monthly"],
  308 + noteRules: [v => !!v || " Note is required"],
  309 + headers: [
  310 + {
  311 + text: "No",
  312 + align: "center",
  313 + sortable: false,
  314 + value: "No"
  315 + },
  316 + {
  317 + text: "fee Type",
  318 + value: "feeType",
  319 + sortable: false,
  320 + align: "center"
  321 + },
  322 + { text: "Note", value: "note", sortable: false, align: "center" },
  323 + // { text: "Session", value: "session", sortable: false, align: "center" },
  324 + { text: "Action", value: "", sortable: false, align: "center" }
  325 + ],
  326 + feeTypeList: [],
  327 + select: "",
  328 + token: "",
  329 + editedItem: {},
  330 + feeTypeData: {}
  331 + }),
  332 + methods: {
  333 + getFeeTypeList() {
  334 + this.showLoader = true;
  335 + http()
  336 + .get("/getFeesList", {
  337 + headers: { Authorization: "Bearer " + this.token }
  338 + })
  339 + .then(response => {
  340 + this.feeTypeList = response.data.data;
  341 + this.showLoader = false;
  342 + // console.log("getAllfeetypes=====>",response.data.data)
  343 + })
  344 + .catch(err => {
  345 + // console.log("err====>", err);
  346 + this.showLoader = false;
  347 + if (error.response.status === 401) {
  348 + this.$router.replace({ path: "/" });
  349 + this.$store.dispatch("setToken", null);
  350 + this.$store.dispatch("Id", null);
  351 + }
  352 + });
  353 + },
  354 + editItem(item) {
  355 + this.editedIndex = this.feeTypeList.indexOf(item);
  356 + this.editedItem = Object.assign({}, item);
  357 + console.log(this.editedItem);
  358 + this.dialog = true;
  359 + },
  360 + profile(item) {
  361 + this.editedIndex = this.feeTypeList.indexOf(item);
  362 + this.editedItem = Object.assign({}, item);
  363 + this.dialog1 = true;
  364 + },
  365 + deleteItem(item) {
  366 + let deleteStudent = {
  367 + feeId: item._id
  368 + };
  369 + http()
  370 + .delete(
  371 + "/deleteFee",
  372 + confirm("Are you sure you want to delete this?") && {
  373 + params: deleteStudent
  374 + }
  375 + )
  376 + .then(response => {
  377 + if ((this.snackbar = true)) {
  378 + this.text = "Successfully delete Existing feetype";
  379 + }
  380 + this.getFeeTypeList();
  381 + })
  382 + .catch(error => {
  383 + // console.log(error);
  384 + });
  385 + },
  386 + activeTab(type) {
  387 + switch (type) {
  388 + case "existing":
  389 + this.newActive = false;
  390 + this.isActive = true;
  391 + break;
  392 +
  393 + default:
  394 + this.newActive = true;
  395 + this.isActive = false;
  396 + break;
  397 + }
  398 + },
  399 + close() {
  400 + this.dialog = false;
  401 + setTimeout(() => {
  402 + this.editedItem = Object.assign({}, this.defaultItem);
  403 + this.editedIndex = -1;
  404 + }, 300);
  405 + },
  406 + close1() {
  407 + this.dialog1 = false;
  408 + },
  409 + close2() {
  410 + this.dialog2 = false;
  411 + },
  412 + submit() {
  413 + if (this.$refs.form.validate()) {
  414 + this.loading = true;
  415 + http()
  416 + .post("/createFee", this.feeTypeData)
  417 + .then(response => {
  418 + console.log(response);
  419 + this.getFeeTypeList();
  420 + if ((this.snackbar = true)) {
  421 + this.text = "New feetype added successfully";
  422 + }
  423 +
  424 + this.clear();
  425 + this.loading = false;
  426 + })
  427 + .catch(error => {
  428 + // console.log(error);
  429 + if ((this.snackbar = true)) {
  430 + this.text = error.response.data.message;
  431 + }
  432 + this.loading = false;
  433 + });
  434 + }
  435 + },
  436 + clear() {
  437 + this.$refs.form.reset();
  438 + },
  439 + save() {
  440 + this.editedItem.feeId = this.editedItem._id;
  441 + http()
  442 + .put("/updateFee", this.editedItem)
  443 + .then(response => {
  444 + if ((this.snackbar = true)) {
  445 + this.text = "Successfully Edit Existing Fee Type";
  446 + }
  447 + this.getFeeTypeList();
  448 + this.close();
  449 + })
  450 + .catch(error => {
  451 + this.text = error.response.data.message;
  452 + // console.log(error);
  453 + });
  454 + }
  455 + },
  456 + mounted() {
  457 + this.token = this.$store.state.token;
  458 + this.getFeeTypeList();
  459 + },
  460 + created() {
  461 + this.$root.$on("app:search", search => {
  462 + this.search = search;
  463 + });
  464 + },
  465 + beforeDestroy() {
  466 + // dont forget to remove the listener
  467 + this.$root.$off("app:search");
  468 + }
  469 +};
  470 +</script>
  471 +
  472 +<style scoped>
  473 +.active {
  474 + background-color: gray;
  475 + color: white !important;
  476 +}
  477 +.activebtn {
  478 + color: black !important;
  479 +}
  480 +</style>
0 481 \ No newline at end of file
... ...
src/pages/Account/globalPayment.vue
Diff comments   View file @687e0b9
src/pages/Account/income.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,744 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing Income</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add New Income</v-tab>
  19 + <!-- ****** EDIT Income DETAILS ****** -->
  20 + <v-tab-item>
  21 + <v-snackbar
  22 + :timeout="timeout"
  23 + :top="y === 'top'"
  24 + :right="x === 'right'"
  25 + :vertical="mode === 'vertical'"
  26 + v-model="snackbar"
  27 + color="success"
  28 + >{{ text }}</v-snackbar>
  29 + <v-dialog v-model="dialog" max-width="600px" scrollable>
  30 + <v-card flat>
  31 + <v-toolbar color="grey lighten-2" flat>
  32 + <v-spacer></v-spacer>
  33 + <v-toolbar-title>Edit Income Profile</v-toolbar-title>
  34 + <v-spacer></v-spacer>
  35 + </v-toolbar>
  36 + <v-card-text style="height: 600px;">
  37 + <v-form ref="form">
  38 + <v-container fluid>
  39 + <v-layout>
  40 + <v-flex
  41 + xs12
  42 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  43 + >
  44 + <v-avatar size="160px">
  45 + <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
  46 + <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
  47 + <img
  48 + v-if="imageUrl"
  49 + :src="imageUrl"
  50 + height="150"
  51 + style="border-radius:50%; width:200px"
  52 + />
  53 + </v-avatar>
  54 + <input
  55 + type="file"
  56 + style="display:none"
  57 + ref="image"
  58 + accept="image/*"
  59 + @change="onFilePicked"
  60 + />
  61 + </v-flex>
  62 + </v-layout>
  63 + <v-layout>
  64 + <v-flex xs12 sm12>
  65 + <v-layout>
  66 + <v-flex xs4 class="pt-4 subheading">
  67 + <label class="right">Name:</label>
  68 + </v-flex>
  69 + <v-flex xs6 class="ml-3">
  70 + <v-text-field
  71 + v-model="editedItem.name"
  72 + placeholder="fill your full Name"
  73 + name="name"
  74 + type="text"
  75 + required
  76 + ></v-text-field>
  77 + </v-flex>
  78 + </v-layout>
  79 + </v-flex>
  80 + </v-layout>
  81 + <v-layout>
  82 + <v-flex xs12>
  83 + <v-layout>
  84 + <v-flex xs4 class="pt-4 subheading">
  85 + <label class="right">Date:</label>
  86 + </v-flex>
  87 + <v-flex xs6 class="ml-3">
  88 + <v-menu
  89 + ref="menu"
  90 + :close-on-content-click="false"
  91 + v-model="menu3"
  92 + :nudge-right="40"
  93 + lazy
  94 + transition="scale-transition"
  95 + offset-y
  96 + full-width
  97 + min-width="290px"
  98 + >
  99 + <v-text-field
  100 + slot="activator"
  101 + v-model="editedItem.date"
  102 + placeholder="Select date"
  103 + ></v-text-field>
  104 + <v-date-picker
  105 + ref="picker"
  106 + v-model="editedItem.date"
  107 + @input="$refs.menu.save(editedItem.date)"
  108 + ></v-date-picker>
  109 + </v-menu>
  110 + </v-flex>
  111 + </v-layout>
  112 + </v-flex>
  113 + <v-layout>
  114 + <v-flex xs12 sm12>
  115 + <v-layout>
  116 + <v-flex xs4 class="pt-4 subheading">
  117 + <label class="right">Amount:</label>
  118 + </v-flex>
  119 + <v-flex xs6 class="ml-3">
  120 + <v-text-field v-model="editedItem.amount" required></v-text-field>
  121 + </v-flex>
  122 + </v-layout>
  123 + </v-flex>
  124 + </v-layout>
  125 + <v-flex xs12>
  126 + <v-layout>
  127 + <v-flex xs4 class="pt-4 subheading">
  128 + <label class="right">Uplaod Image:</label>
  129 + </v-flex>
  130 + <v-flex xs6 class="ml-3">
  131 + <v-text-field
  132 + label="Select Image"
  133 + @click="pickFile"
  134 + v-model="imageName"
  135 + append-icon="attach_file"
  136 + ></v-text-field>
  137 + </v-flex>
  138 + </v-layout>
  139 + </v-flex>
  140 + <v-flex xs12>
  141 + <v-layout>
  142 + <v-flex xs4 class="pt-4 subheading">
  143 + <label class="right">Note:</label>
  144 + </v-flex>
  145 + <v-flex xs6 class="ml-3">
  146 + <v-textarea
  147 + name="input-7-1"
  148 + v-model="editedItem.note"
  149 + placeholder="fill your Note"
  150 + type="text"
  151 + :rules="noteRules"
  152 + multi-line
  153 + required
  154 + ></v-textarea>
  155 + </v-flex>
  156 + </v-layout>
  157 + </v-flex>
  158 + </v-layout>
  159 + <v-layout>
  160 + <v-flex xs12 sm12>
  161 + <v-card-actions>
  162 + <v-btn round dark @click.native="close">Cancel</v-btn>
  163 + <v-spacer></v-spacer>
  164 + <v-btn round dark :loading="loading" @click="save">Save</v-btn>
  165 + </v-card-actions>
  166 + </v-flex>
  167 + </v-layout>
  168 + </v-container>
  169 + </v-form>
  170 + </v-card-text>
  171 + </v-card>
  172 + </v-dialog>
  173 +
  174 + <!-- ****** PROFILE VIEW INCOME DETAILS ****** -->
  175 +
  176 + <v-dialog v-model="dialog1" max-width="600px" scrollable>
  177 + <v-card>
  178 + <v-toolbar color="grey lighten-2" flat>
  179 + <v-spacer></v-spacer>
  180 + <v-toolbar-title>
  181 + <h3>Income Profile</h3>
  182 + </v-toolbar-title>
  183 + <v-spacer></v-spacer>
  184 + <v-icon @click="close1">close</v-icon>
  185 + </v-toolbar>
  186 + <v-card-text style="height: 460px;">
  187 + <v-container grid-list-md>
  188 + <v-layout wrap>
  189 + <v-flex>
  190 + <v-flex align-center justify-center layout text-xs-center>
  191 + <v-avatar size="160px">
  192 + <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
  193 + <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
  194 + </v-avatar>
  195 + </v-flex>
  196 + <v-layout>
  197 + <v-flex xs5 sm6>
  198 + <h5 class="right my-1">
  199 + <b>Name:</b>
  200 + </h5>
  201 + </v-flex>
  202 + <v-flex sm6 xs8>
  203 + <h5 class="my-1">{{ editedItem.name }}</h5>
  204 + </v-flex>
  205 + </v-layout>
  206 + <v-layout>
  207 + <v-flex xs5 sm6>
  208 + <h5 class="right my-1">
  209 + <b>Amount:</b>
  210 + </h5>
  211 + </v-flex>
  212 + <v-flex sm6 xs8>
  213 + <h5 class="my-1">{{ editedItem.amount }}</h5>
  214 + </v-flex>
  215 + </v-layout>
  216 + <v-layout>
  217 + <v-flex xs5 sm6>
  218 + <h5 class="right my-1">
  219 + <b>Date:</b>
  220 + </h5>
  221 + </v-flex>
  222 + <v-flex sm6 xs8>
  223 + <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
  224 + </v-flex>
  225 + </v-layout>
  226 + <v-layout>
  227 + <v-flex xs5 sm6>
  228 + <h5 class="right my-1">
  229 + <b>Note:</b>
  230 + </h5>
  231 + </v-flex>
  232 + <v-flex sm6 xs8>
  233 + <h5 class="my-1">{{ editedItem.note }}</h5>
  234 + </v-flex>
  235 + </v-layout>
  236 + </v-flex>
  237 + </v-layout>
  238 + </v-container>
  239 + </v-card-text>
  240 + </v-card>
  241 + </v-dialog>
  242 + <v-snackbar
  243 + :timeout="timeout"
  244 + :top="y === 'top'"
  245 + :right="x === 'right'"
  246 + :vertical="mode === 'vertical'"
  247 + v-model="snackbar"
  248 + color="success"
  249 + >{{ text }}</v-snackbar>
  250 +
  251 + <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
  252 +
  253 + <v-data-table
  254 + :headers="headers"
  255 + :items="incomeList"
  256 + :pagination.sync="pagination"
  257 + :search="search"
  258 + >
  259 + <template slot="items" slot-scope="props">
  260 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
  261 + <td id="td" class="text-xs-center">
  262 + <v-avatar>
  263 + <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
  264 + <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
  265 + </v-avatar>
  266 + </td>
  267 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  268 + <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
  269 + <td id="td" class="text-xs-center">{{ props.item.user }}</td>
  270 + <td id="td" class="text-xs-center">{{ props.item.amount }}</td>
  271 + <td id="td" class="text-xs-center">{{ props.item.note }}</td>
  272 + <td class="text-xs-center">
  273 + <span>
  274 + <img
  275 + style="cursor:pointer; width:25px; height:18px; "
  276 + class="mr-5"
  277 + @click="profile(props.item)"
  278 + src="/static/icon/eye1.png"
  279 + />
  280 + <img
  281 + style="cursor:pointer; width:20px; height:18px; "
  282 + class="mr-5"
  283 + @click="editItem(props.item)"
  284 + src="/static/icon/edit1.png"
  285 + />
  286 + <img
  287 + style="cursor:pointer;width:20px; height:20px; "
  288 + class="mr-5"
  289 + @click="deleteItem(props.item)"
  290 + src="/static/icon/delete1.png"
  291 + />
  292 + </span>
  293 + </td>
  294 + </template>
  295 + <v-alert
  296 + slot="no-results"
  297 + :value="true"
  298 + color="error"
  299 + icon="warning"
  300 + >Your search for "{{ search }}" found no results.</v-alert>
  301 + </v-data-table>
  302 + </v-tab-item>
  303 +
  304 + <!-- ****** Add Income Data****** -->
  305 + <v-tab-item>
  306 + <v-container>
  307 + <v-snackbar
  308 + :timeout="timeout"
  309 + :top="y === 'top'"
  310 + :right="x === 'right'"
  311 + :vertical="mode === 'vertical'"
  312 + v-model="snackbar"
  313 + color="success"
  314 + >{{ text }}</v-snackbar>
  315 + <v-flex xs12 sm12 class="my-4">
  316 + <v-card flat>
  317 + <v-form ref="form" v-model="valid" lazy-validation>
  318 + <v-container fluid>
  319 + <v-layout>
  320 + <v-flex
  321 + xs12
  322 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  323 + >
  324 + <v-avatar size="100px">
  325 + <img src="/static/icon/user.png" v-if="!imageUrl" />
  326 + </v-avatar>
  327 + <img
  328 + :src="imageUrl"
  329 + height="150"
  330 + v-if="imageUrl"
  331 + style="border-radius:50%; width:200px"
  332 + />
  333 + </v-flex>
  334 + </v-layout>
  335 + <v-layout>
  336 + <v-flex xs12 sm12>
  337 + <v-layout>
  338 + <v-flex xs4 class="pt-4 subheading">
  339 + <label class="right">Name:</label>
  340 + </v-flex>
  341 + <v-flex xs8 sm4 class="ml-3">
  342 + <v-text-field
  343 + v-model="addIncome.name"
  344 + placeholder="fill your full Name"
  345 + name="name"
  346 + type="text"
  347 + :rules="nameRules"
  348 + required
  349 + ></v-text-field>
  350 + </v-flex>
  351 + </v-layout>
  352 + </v-flex>
  353 + </v-layout>
  354 + <v-layout>
  355 + <v-flex xs12 sm12>
  356 + <v-layout>
  357 + <v-flex xs4 class="pt-4 subheading">
  358 + <label class="right">Amount:</label>
  359 + </v-flex>
  360 + <v-flex xs8 sm4 class="ml-3">
  361 + <v-text-field
  362 + v-model="addIncome.amount"
  363 + placeholder="fill your Amount"
  364 + name="name"
  365 + type="text"
  366 + :rules="amountRules"
  367 + required
  368 + ></v-text-field>
  369 + </v-flex>
  370 + </v-layout>
  371 + </v-flex>
  372 + </v-layout>
  373 + <v-layout>
  374 + <v-flex xs12 sm12>
  375 + <v-layout>
  376 + <v-flex xs4 class="pt-4 subheading">
  377 + <label class="right">Date</label>
  378 + </v-flex>
  379 + <v-flex xs8 sm4 class="ml-3">
  380 + <v-menu
  381 + ref="menu1"
  382 + :close-on-content-click="false"
  383 + v-model="menu1"
  384 + :nudge-right="40"
  385 + lazy
  386 + transition="scale-transition"
  387 + offset-y
  388 + full-width
  389 + min-width="290px"
  390 + >
  391 + <v-text-field
  392 + slot="activator"
  393 + :rules="joinDateRules"
  394 + v-model="addIncome.date"
  395 + placeholder="Select date"
  396 + ></v-text-field>
  397 + <v-date-picker
  398 + ref="picker"
  399 + v-model="addIncome.date"
  400 + @input="$refs.menu1.save(addIncome.date)"
  401 + ></v-date-picker>
  402 + </v-menu>
  403 + </v-flex>
  404 + </v-layout>
  405 + </v-flex>
  406 + <v-flex xs12 sm12>
  407 + <v-layout>
  408 + <v-flex xs4 class="pt-4 subheading">
  409 + <label class="right">File:</label>
  410 + </v-flex>
  411 + <v-flex xs8 sm4 class="ml-3">
  412 + <v-text-field
  413 + label="Select file"
  414 + @click="pickFile"
  415 + v-model="imageName"
  416 + append-icon="attach_file"
  417 + ></v-text-field>
  418 + <input
  419 + type="file"
  420 + style="display:none"
  421 + ref="image"
  422 + accept="image/*"
  423 + @change="onFilePicked"
  424 + />
  425 + </v-flex>
  426 + </v-layout>
  427 + </v-flex>
  428 + <v-layout>
  429 + <v-flex xs12 sm12>
  430 + <v-layout>
  431 + <v-flex xs4 class="pt-4 subheading">
  432 + <label class="right">Note:</label>
  433 + </v-flex>
  434 + <v-flex xs8 sm4 class="ml-3">
  435 + <v-textarea
  436 + name="input-7-1"
  437 + v-model="addIncome.note"
  438 + placeholder="fill your Note"
  439 + type="text"
  440 + :rules="noteRules"
  441 + multi-line
  442 + required
  443 + ></v-textarea>
  444 + </v-flex>
  445 + </v-layout>
  446 + </v-flex>
  447 + </v-layout>
  448 + </v-layout>
  449 + <v-layout>
  450 + <v-flex xs12 sm12>
  451 + <v-card-actions>
  452 + <v-flex xs12 sm5>
  453 + <v-btn @click="clear" class="right" round dark>clear</v-btn>
  454 + </v-flex>
  455 + <v-spacer></v-spacer>
  456 + <v-flex xs12 sm5>
  457 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  458 + </v-flex>
  459 + </v-card-actions>
  460 + </v-flex>
  461 + </v-layout>
  462 + </v-container>
  463 + </v-form>
  464 + </v-card>
  465 + </v-flex>
  466 + </v-container>
  467 + </v-tab-item>
  468 + </v-tabs>
  469 + <div class="loader" v-if="showLoader">
  470 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  471 + </div>
  472 + </v-app>
  473 +</template>
  474 +
  475 +<script>
  476 +import http from "@/Services/http.js";
  477 +import Util from "@/util";
  478 +import moment from "moment";
  479 +
  480 +export default {
  481 + data: () => ({
  482 + component: "report-generate",
  483 + snackbar: false,
  484 + y: "top",
  485 + x: "right",
  486 + mode: "",
  487 + timeout: 3000,
  488 + text: "",
  489 + showLoader: false,
  490 + loading: false,
  491 + date: null,
  492 + search: "",
  493 + menu: false,
  494 + menu1: false,
  495 + menu2: false,
  496 + menu3: false,
  497 + dialog: false,
  498 + dialog1: false,
  499 + valid: true,
  500 + isActive: true,
  501 + newActive: false,
  502 + pagination: {
  503 + rowsPerPage: 15
  504 + },
  505 + imageData: {},
  506 + imageName: "",
  507 + imageUrl: "",
  508 + imageFile: "",
  509 + nameRules: [v => !!v || " Full Name is required"],
  510 + amountRules: [v => !!v || "Amount is required"],
  511 + noteRules: [v => !!v || "Note Name is required"],
  512 + joinDateRules: [v => !!v || "Date is required"],
  513 + errorMessages: "",
  514 + headers: [
  515 + {
  516 + text: "No",
  517 + align: "center",
  518 + sortable: false,
  519 + value: "No"
  520 + },
  521 + {
  522 + text: "Profile Pic",
  523 + value: "profilePicUrl",
  524 + sortable: false,
  525 + align: "center"
  526 + },
  527 + { text: "Name", value: "name", sortable: false, align: "center" },
  528 + { text: "Date", value: "date", sortable: false, align: "center" },
  529 + { text: "User", value: "user", sortable: false, align: "center" },
  530 + { text: "Amount", value: "amount", sortable: false, align: "center" },
  531 + { text: "Note", value: "note", sortable: false, align: "center" },
  532 + { text: "Action", value: "", sortable: false, align: "center" }
  533 + ],
  534 + incomeList: [],
  535 + editedIndex: -1,
  536 + upload: "",
  537 + editedItem: {},
  538 + addIncome: {}
  539 + }),
  540 + watch: {
  541 + menu(val) {
  542 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  543 + },
  544 + menu1(val) {
  545 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  546 + }
  547 + },
  548 + methods: {
  549 + save(date) {
  550 + this.$refs.menu.save(date);
  551 + },
  552 + save(date) {
  553 + this.$refs.menu1.save(date);
  554 + },
  555 + pickFile() {
  556 + this.$refs.image.click();
  557 + },
  558 + onFilePicked(e) {
  559 + // console.log(e)
  560 + const files = e.target.files;
  561 + this.upload = e.target.files[0];
  562 + console.log("imageData-upload========>", this.upload);
  563 + if (files[0] !== undefined) {
  564 + this.imageName = files[0].name;
  565 + if (this.imageName.lastIndexOf(".") <= 0) {
  566 + return;
  567 + }
  568 + const fr = new FileReader();
  569 + fr.readAsDataURL(files[0]);
  570 + fr.addEventListener("load", () => {
  571 + this.imageUrl = fr.result;
  572 + this.imageFile = files[0]; // this is an image file that can be sent to server...
  573 + // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  574 + // console.log("upload=======>", this.imageData.imageUrl);
  575 + console.log("imageFile", this.imageUrl);
  576 + });
  577 + } else {
  578 + this.imageName = "";
  579 + this.imageFile = "";
  580 + this.imageUrl = "";
  581 + }
  582 + },
  583 + dates: function(date) {
  584 + return moment(date).format("MMMM DD, YYYY");
  585 + },
  586 + getIncomeList() {
  587 + this.showLoader = true;
  588 + var token = this.$store.state.token;
  589 + http()
  590 + .get("/getIncomesList", {
  591 + headers: { Authorization: "Bearer " + token }
  592 + })
  593 + .then(response => {
  594 + this.incomeList = response.data.data;
  595 + this.showLoader = false;
  596 + // console.log("getTeacherList=====>",this.incomeList)
  597 + })
  598 + .catch(error => {
  599 + this.showLoader = false;
  600 + if (error.response.status === 401) {
  601 + this.$router.replace({ path: "/" });
  602 + this.$store.dispatch("setToken", null);
  603 + this.$store.dispatch("Id", null);
  604 + }
  605 + });
  606 + },
  607 + editItem(item) {
  608 + this.editedIndex = this.incomeList.indexOf(item);
  609 + this.editedItem = Object.assign({}, item);
  610 + this.editedItem.date =
  611 + this.editedItem.date != undefined
  612 + ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
  613 + : (this.editedItem.date = "");
  614 +
  615 + this.dialog = true;
  616 + },
  617 + profile(item) {
  618 + this.editedIndex = this.incomeList.indexOf(item);
  619 + this.editedItem = Object.assign({}, item);
  620 + this.dialog1 = true;
  621 + },
  622 + deleteItem(item) {
  623 + let deleteIncome = {
  624 + incomeId: item._id
  625 + };
  626 + http()
  627 + .delete(
  628 + "/deleteIncome",
  629 + confirm("Are you sure you want to delete this?") && {
  630 + params: deleteIncome
  631 + }
  632 + )
  633 + .then(response => {
  634 + // console.log("deleteUers",deleteTeachers)
  635 + if ((this.snackbar = true)) {
  636 + this.text = "Successfully delete Existing Income";
  637 + }
  638 + this.getIncomeList();
  639 + })
  640 + .catch(error => {
  641 + console.log(error);
  642 + });
  643 + },
  644 + activeTab(type) {
  645 + switch (type) {
  646 + case "existing":
  647 + this.newActive = false;
  648 + this.isActive = true;
  649 + break;
  650 +
  651 + default:
  652 + this.newActive = true;
  653 + this.isActive = false;
  654 + break;
  655 + }
  656 + },
  657 + close() {
  658 + this.dialog = false;
  659 + setTimeout(() => {
  660 + this.editedItem = Object.assign({}, this.defaultItem);
  661 + this.editedIndex = -1;
  662 + }, 300);
  663 + },
  664 + close1() {
  665 + this.dialog1 = false;
  666 + },
  667 + submit() {
  668 + if (this.$refs.form.validate()) {
  669 + if (this.imageUrl) {
  670 + var str = this.imageUrl;
  671 + const [baseUrl, imageUrl] = str.split(/,/);
  672 + this.addIncome.upload = imageUrl;
  673 + }
  674 + this.loading = true;
  675 + http()
  676 + .post("/createIncome", this.addIncome)
  677 + .then(response => {
  678 + this.getIncomeList();
  679 + if ((this.snackbar = true)) {
  680 + this.text = "New Income added successfully";
  681 + }
  682 +
  683 + this.clear();
  684 + this.loading = false;
  685 + })
  686 + .catch(error => {
  687 + // console.log(error);
  688 + if ((this.snackbar = true)) {
  689 + this.text = error.response.data.message;
  690 + }
  691 + this.loading = false;
  692 + });
  693 + }
  694 + },
  695 + clear() {
  696 + this.$refs.form.reset();
  697 + },
  698 + save() {
  699 + this.loading = true;
  700 + this.editedItem.incomeId = this.editedItem._id;
  701 + if (this.imageUrl) {
  702 + var str = this.imageUrl;
  703 + const [baseUrl, imageUrl] = str.split(/,/);
  704 + this.editedItem.upload = imageUrl;
  705 + }
  706 + http()
  707 + .put("/updateIncome", this.editedItem)
  708 + .then(response => {
  709 + if ((this.snackbar = true)) {
  710 + this.text = "Successfully Edit Income";
  711 + }
  712 + this.loading = false;
  713 + this.getIncomeList();
  714 + this.close();
  715 + })
  716 + .catch(error => {
  717 + console.log(error);
  718 + this.loading = false;
  719 + });
  720 + }
  721 + },
  722 + mounted() {
  723 + this.getIncomeList();
  724 + },
  725 + created() {
  726 + this.$root.$on("app:search", search => {
  727 + this.search = search;
  728 + });
  729 + },
  730 + beforeDestroy() {
  731 + // dont forget to remove the listener
  732 + this.$root.$off("app:search");
  733 + }
  734 +};
  735 +</script>
  736 +<style scoped>
  737 +.active {
  738 + background-color: gray;
  739 + color: white !important;
  740 +}
  741 +.activebtn {
  742 + color: black !important;
  743 +}
  744 +</style>
0 745 \ No newline at end of file
... ...
src/pages/Account/invoice.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,810 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing Invoice</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add New Invoice</v-tab>
  19 +
  20 + <!-- ****** EDIT SECTION ****** -->
  21 + <v-tab-item>
  22 + <!-- ****** PROFILE VIEW SECTION DATA ****** -->
  23 + <v-dialog v-model="dialog1" max-width="600px">
  24 + <v-toolbar color="grey lighten-2">
  25 + <v-spacer></v-spacer>
  26 + <v-toolbar-title>
  27 + <h3>Invoice</h3>
  28 + </v-toolbar-title>
  29 + <v-spacer></v-spacer>
  30 + <v-icon @click="close1">close</v-icon>
  31 + </v-toolbar>
  32 + <v-card>
  33 + <v-flex align-center justify-center layout text-xs-center>
  34 + <v-avatar size="50px" style="position:absolute; top:20px;">
  35 + <img src="/static/icon/user.png" />
  36 + </v-avatar>
  37 + </v-flex>
  38 + <v-card-text>
  39 + <v-container grid-list-md>
  40 + <v-layout wrap>
  41 + <v-flex>
  42 + <br />
  43 + <br />
  44 + <v-layout>
  45 + <v-flex xs5 sm6>
  46 + <h5 class="right my-1">
  47 + <b>Class Name:</b>
  48 + </h5>
  49 + </v-flex>
  50 + <v-flex sm6 xs8>
  51 + <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> -->
  52 + </v-flex>
  53 + </v-layout>
  54 + <v-layout>
  55 + <v-flex xs5 sm6>
  56 + <h5 class="right my-1">
  57 + <b>Name:</b>
  58 + </h5>
  59 + </v-flex>
  60 + <v-flex sm6 xs8>
  61 + <h5 class="my-1">{{ editedItem.name }}</h5>
  62 + </v-flex>
  63 + </v-layout>
  64 + <v-layout>
  65 + <v-flex xs5 sm6>
  66 + <h5 class="right my-1">
  67 + <b>Class Incharge:</b>
  68 + </h5>
  69 + </v-flex>
  70 + <v-flex sm6 xs8>
  71 + <h5 class="my-1">{{ editedItem.name }}</h5>
  72 + </v-flex>
  73 + </v-layout>
  74 + <v-layout>
  75 + <v-flex xs5 sm6>
  76 + <h5 class="right my-1">
  77 + <b>Session:</b>
  78 + </h5>
  79 + </v-flex>
  80 + <v-flex sm6 xs8>
  81 + <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
  82 + </v-flex>
  83 + </v-layout>
  84 + </v-flex>
  85 + </v-layout>
  86 + </v-container>
  87 + </v-card-text>
  88 + </v-card>
  89 + </v-dialog>
  90 + <!-- ****** EXISTING-USERS StudentS Table ****** -->
  91 + <v-data-table
  92 + :headers="headers"
  93 + :items="invoiceList"
  94 + :pagination.sync="pagination"
  95 + :search="search"
  96 + >
  97 + <template slot="items" slot-scope="props">
  98 + <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
  99 + <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
  100 + <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
  101 + <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td>
  102 + <td
  103 + id="td"
  104 + class="text-xs-center"
  105 + >{{ props.item.totalAmount - props.item.totalSubTotal }}</td>
  106 + <td
  107 + id="td"
  108 + class="text-xs-center"
  109 + >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
  110 + <td
  111 + id="td"
  112 + class="text-xs-center"
  113 + >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
  114 + <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'">
  115 + <span
  116 + class="red lighten-1 pa-2 white--text paymentStatus"
  117 + >{{ props.item.paymentStatus }}</span>
  118 + </td>
  119 + <td id="td" class="text-xs-center" v-if="props.item.paymentStatus != 'NOT_PAID'">
  120 + <span
  121 + class="green lighten-1 pa-2 white--text paymentStatus"
  122 + >{{ props.item.paymentStatus }}</span>
  123 + </td>
  124 + <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
  125 + <td>
  126 + <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }">
  127 + <v-tooltip top>
  128 + <img
  129 + slot="activator"
  130 + style="cursor:pointer; width:25px; height:18px; "
  131 + class="mr-5"
  132 + src="/static/icon/eye1.png"
  133 + />
  134 + <span>View</span>
  135 + </v-tooltip>
  136 + </router-link>
  137 + <span v-if="props.item.paymentStatus === 'NOT_PAID'">
  138 + <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
  139 + <v-tooltip top>
  140 + <img
  141 + slot="activator"
  142 + style="cursor:pointer; width:20px; height:18px; "
  143 + class="mr-5"
  144 + src="/static/icon/edit1.png"
  145 + />
  146 + <span>Edit</span>
  147 + </v-tooltip>
  148 + </router-link>
  149 + <v-tooltip top>
  150 + <img
  151 + slot="activator"
  152 + style="cursor:pointer;width:20px; height:20px; "
  153 + class="mr-5"
  154 + @click="deleteItem(props.item)"
  155 + src="/static/icon/delete1.png"
  156 + />
  157 + <span>Delete</span>
  158 + </v-tooltip>
  159 + </span>
  160 + </td>
  161 + </template>
  162 + <v-alert
  163 + slot="no-results"
  164 + :value="true"
  165 + color="error"
  166 + icon="warning"
  167 + >Your search for "{{ search }}" found no results.</v-alert>
  168 + </v-data-table>
  169 + </v-tab-item>
  170 + <!-- ****** ADD multiple INVOICE ****** -->
  171 + <v-tab-item>
  172 + <v-container fluid grid-list-md>
  173 + <v-snackbar
  174 + :timeout="timeout"
  175 + :top="y === 'top'"
  176 + :right="x === 'right'"
  177 + :vertical="mode === 'vertical'"
  178 + v-model="snackbar"
  179 + color="success"
  180 + >{{ text }}</v-snackbar>
  181 + <v-flex xs12 sm12>
  182 + <v-container fluid>
  183 + <v-layout>
  184 + <v-flex xs12 sm12 md5 class="mt-4">
  185 + <v-card flat>
  186 + <v-toolbar dark class="fixcolors" flat>
  187 + <v-spacer></v-spacer>
  188 + <v-toolbar-title>
  189 + <h3>Invoice</h3>
  190 + </v-toolbar-title>
  191 + <v-spacer></v-spacer>
  192 + </v-toolbar>
  193 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  194 + <v-layout>
  195 + <v-flex xs4 class="pt-4 subheading">
  196 + <label class="right">Select Class:</label>
  197 + </v-flex>
  198 + <v-flex xs6 class="ml-3">
  199 + <v-select
  200 + :items="addclass"
  201 + label="Select Class"
  202 + v-model="invoiceData.classNum"
  203 + item-text="classNum"
  204 + item-value="_id"
  205 + @change="getAllStudents()"
  206 + :rules="classRules"
  207 + required
  208 + ></v-select>
  209 + </v-flex>
  210 + </v-layout>
  211 + <v-layout>
  212 + <v-flex xs4 class="pt-4 subheading">
  213 + <label class="right">Select Student:</label>
  214 + </v-flex>
  215 + <v-flex xs6 class="ml-3">
  216 + <v-select
  217 + :items="studentList"
  218 + label="Select Incharge"
  219 + v-model="invoiceData.sectionId"
  220 + item-text="name"
  221 + item-value="_id"
  222 + :rules="inchargeRules"
  223 + required
  224 + ></v-select>
  225 + </v-flex>
  226 + </v-layout>
  227 + <v-layout>
  228 + <v-flex xs4 class="pt-4 subheading">
  229 + <label class="right">Date:</label>
  230 + </v-flex>
  231 + <v-flex xs6 class="ml-3">
  232 + <v-menu
  233 + ref="menu1"
  234 + :close-on-content-click="false"
  235 + v-model="menu1"
  236 + :nudge-right="40"
  237 + lazy
  238 + :return-value.sync="invoiceData.date"
  239 + transition="scale-transition"
  240 + offset-y
  241 + full-width
  242 + min-width="290px"
  243 + >
  244 + <v-text-field
  245 + slot="activator"
  246 + :rules="dateRules"
  247 + v-model="invoiceData.date"
  248 + placeholder="Select date"
  249 + ></v-text-field>
  250 + <v-date-picker
  251 + v-model="invoiceData.date"
  252 + @input="$refs.menu1.save(invoiceData.date)"
  253 + ></v-date-picker>
  254 + </v-menu>
  255 + </v-flex>
  256 + </v-layout>
  257 + <v-layout>
  258 + <v-flex xs4 class="pt-4 subheading">
  259 + <label class="right">Payment Status:</label>
  260 + </v-flex>
  261 + <v-flex xs6 class="ml-3">
  262 + <v-select
  263 + :items="paymentStatus"
  264 + v-model="invoiceData.paymentStatus"
  265 + item-text="name"
  266 + item-value="value"
  267 + label="Select Payment Status"
  268 + @change="getPayMethodList"
  269 + :rules="paymentStatusRules"
  270 + required
  271 + ></v-select>
  272 + </v-flex>
  273 + </v-layout>
  274 + <v-layout v-show="showPayMethods">
  275 + <v-flex xs4 class="pt-4 subheading">
  276 + <label class="right">Payment Method:</label>
  277 + </v-flex>
  278 + <v-flex xs6 class="ml-3">
  279 + <v-select
  280 + :items="paymentMethods"
  281 + v-model="invoiceData.paymentMethod"
  282 + label="Select Payment Method"
  283 + required
  284 + ></v-select>
  285 + </v-flex>
  286 + </v-layout>
  287 + <v-layout>
  288 + <v-flex xs12 sm10 offset-sm1>
  289 + <v-card-actions>
  290 + <v-btn @click="clear" round dark>clear</v-btn>
  291 + <v-spacer></v-spacer>
  292 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  293 + </v-card-actions>
  294 + </v-flex>
  295 + </v-layout>
  296 + </v-form>
  297 + </v-card>
  298 + </v-flex>
  299 + <v-flex xs12 sm12 md7 class="mt-4">
  300 + <v-card>
  301 + <v-toolbar dark class="fixcolors" flat>
  302 + <v-spacer></v-spacer>
  303 + <v-toolbar-title>
  304 + <h3>Fee Type List</h3>
  305 + </v-toolbar-title>
  306 + <v-spacer></v-spacer>
  307 + </v-toolbar>
  308 + <v-layout>
  309 + <v-flex xs2 class="mt-4">
  310 + <label class="right title">Fee Type:</label>
  311 + </v-flex>
  312 + <v-flex xs4>
  313 + <v-select
  314 + :items="feeTypes"
  315 + v-model="feeType.feeTypeName"
  316 + item-text="feeType"
  317 + item-value="feeType"
  318 + label="Select Fee Type"
  319 + ></v-select>
  320 + </v-flex>
  321 + <v-flex xs6>
  322 + <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
  323 + </v-flex>
  324 + </v-layout>
  325 + <table class="feeTypeTable">
  326 + <tr class="info white--text">
  327 + <th>#</th>
  328 + <th>Fee Type</th>
  329 + <th>Amount</th>
  330 + <th>Discount(%)</th>
  331 + <th>Subtotal</th>
  332 + <th>Paid Amount</th>
  333 + <th>Action</th>
  334 + </tr>
  335 + <tr
  336 + v-show="showFeeType"
  337 + v-for="(feeType, index) in feeTypeData"
  338 + :key="index"
  339 + v-on:keyup="getAmmountDetails(feeType)"
  340 + >
  341 + <td style="width:40px">{{ index + 1 }}</td>
  342 + <td style="width:120px">{{ feeType.feeTypeName }}</td>
  343 + <td>
  344 + <v-text-field
  345 + placeholder="fill your Amount"
  346 + v-model="feeType.amount"
  347 + type="number"
  348 + ></v-text-field>
  349 + </td>
  350 + <td>
  351 + <v-text-field
  352 + placeholder="fill your Discount"
  353 + v-model="feeType.discount"
  354 + type="number"
  355 + ></v-text-field>
  356 + </td>
  357 + <td>{{ feeType.subTotal }}</td>
  358 + <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
  359 + <v-text-field
  360 + placeholder="fill your Paid Amount"
  361 + v-model="feeType.paidAmount"
  362 + type="number"
  363 + :disabled="disabled"
  364 + ></v-text-field>
  365 + </td>
  366 + <td v-if="invoiceData.paymentStatus == ''">
  367 + <v-text-field
  368 + placeholder="fill your Paid Amount"
  369 + v-model="feeType.paidAmount"
  370 + type="number"
  371 + :disabled="disabled"
  372 + ></v-text-field>
  373 + </td>
  374 + <td
  375 + v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
  376 + >
  377 + <v-text-field
  378 + placeholder="fill your Paid Amount"
  379 + v-model="feeType.paidAmount"
  380 + type="number"
  381 + ></v-text-field>
  382 + </td>
  383 + <td>
  384 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  385 + </td>
  386 + </tr>
  387 + <tfoot>
  388 + <tr>
  389 + <td colspan="2">Total:</td>
  390 + <td>{{ feeType.amount }}</td>
  391 + <td>{{ feeType.discount }}</td>
  392 + <td>{{ feeType.subTotal }}</td>
  393 + <td>{{ feeType.paidAmount }}</td>
  394 + </tr>
  395 + </tfoot>
  396 + </table>
  397 + </v-card>
  398 + </v-flex>
  399 + </v-layout>
  400 + </v-container>
  401 + </v-flex>
  402 + </v-container>
  403 + </v-tab-item>
  404 + </v-tabs>
  405 + <div class="loader" v-if="showLoader">
  406 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  407 + </div>
  408 + </v-app>
  409 +</template>
  410 +
  411 +<script>
  412 +import http from "@/Services/http.js";
  413 +import Util from "@/util";
  414 +import moment from "moment";
  415 +
  416 +export default {
  417 + data: () => ({
  418 + snackbar: false,
  419 + showPayMethods: false,
  420 + y: "top",
  421 + x: "right",
  422 + mode: "",
  423 + timeout: 3000,
  424 + text: "",
  425 + showLoader: false,
  426 + loading: false,
  427 + date: null,
  428 + search: "",
  429 + dialog: false,
  430 + dialog1: false,
  431 + valid: true,
  432 + validEdit: true,
  433 + isActive: true,
  434 + newActive: false,
  435 + showFeeType: false,
  436 + disabled: true,
  437 + details: [],
  438 + feeTypes: [],
  439 + menu1: false,
  440 + paymentMethods: ["Cash", "Cheque"],
  441 + feeType: {
  442 + amount: "0.00",
  443 + discount: "0.00",
  444 + paidAmount: 0.0,
  445 + subTotal: "0.00",
  446 + feeTypeName: ""
  447 + },
  448 + feeTypeData: [],
  449 + pagination: {
  450 + rowsPerPage: 15
  451 + },
  452 + classRules: [v => !!v || " Class Name is required"],
  453 + inchargeRules: [v => !!v || "Student Name is required"],
  454 + dateRules: [v => !!v || " Date is required"],
  455 + paymentStatusRules: [v => !!v || "Payment Status is required"],
  456 + paymentMethodsRules : [v => !!v || "payment Method is required"],
  457 + headers: [
  458 + {
  459 + text: "No",
  460 + align: "center",
  461 + sortable: false,
  462 + value: "No"
  463 + },
  464 + {
  465 + text: "Student",
  466 + value: "student",
  467 + sortable: false,
  468 + align: "center"
  469 + },
  470 + { text: "Class", value: "class", sortable: false, align: "center" },
  471 + { text: "Total", value: "subtotal", sortable: false, align: "center" },
  472 + { text: "Discount", value: "discount", sortable: false, align: "center" },
  473 + {
  474 + text: "Paid Amount",
  475 + value: "paidAmount",
  476 + sortable: false,
  477 + align: "center"
  478 + },
  479 + {
  480 + text: "Balance",
  481 + value: "Balance",
  482 + sortable: false,
  483 + align: "center"
  484 + },
  485 + {
  486 + text: "Status",
  487 + value: "paymentStatus",
  488 + sortable: false,
  489 + align: "center"
  490 + },
  491 + {
  492 + text: "Date",
  493 + value: "date",
  494 + sortable: false,
  495 + align: "center"
  496 + },
  497 + { text: "Action", value: "", sortable: false, align: "center" }
  498 + ],
  499 + invoiceList: [],
  500 + token: "",
  501 + editedItem: {},
  502 + invoiceData: {
  503 + paymentStatus: ""
  504 + },
  505 + addclass: [],
  506 + studentList: [],
  507 + paymentStatus: [
  508 + {
  509 + name: "Not Paid",
  510 + value: "NOT_PAID"
  511 + },
  512 + {
  513 + name: "Partially Paid",
  514 + value: "PARTIALLY_PAID"
  515 + },
  516 + {
  517 + name: "Fully Paid",
  518 + value: "FULLY_PAID"
  519 + }
  520 + ]
  521 + }),
  522 + methods: {
  523 + save(date) {
  524 + this.$refs.menu1.save(date);
  525 + },
  526 + dates: function(date) {
  527 + return moment(date).format("MMMM DD, YYYY");
  528 + },
  529 + // profile(item) {
  530 + // this.editedIndex = this.InvoiceList.indexOf(item);
  531 + // this.editedItem = Object.assign({}, item);
  532 + // this.dialog1 = true;
  533 + // },
  534 + deleteItem(item) {
  535 + let deleteInvoice = {
  536 + invoiceId: item._id
  537 + };
  538 + http()
  539 + .delete(
  540 + "/deleteInvoice",
  541 + confirm("Are you sure you want to delete this?") && {
  542 + params: deleteInvoice
  543 + }
  544 + )
  545 + .then(response => {
  546 + if ((this.snackbar = true)) {
  547 + this.text = "Successfully delete Existing Invoice";
  548 + }
  549 + this.getInvoiceList();
  550 + })
  551 + .catch(error => {
  552 + // console.log(error);
  553 + });
  554 + },
  555 + activeTab(type) {
  556 + switch (type) {
  557 + case "existing":
  558 + this.newActive = false;
  559 + this.isActive = true;
  560 + break;
  561 +
  562 + default:
  563 + this.newActive = true;
  564 + this.isActive = false;
  565 + break;
  566 + }
  567 + },
  568 + close() {
  569 + this.dialog = false;
  570 + setTimeout(() => {
  571 + this.editedItem = Object.assign({}, this.defaultItem);
  572 + this.editedIndex = -1;
  573 + }, 300);
  574 + },
  575 + close1() {
  576 + this.dialog1 = false;
  577 + },
  578 + submit() {
  579 + let feeTypeId = "";
  580 + for (let i = 0; i < this.feeTypes.length; i++) {
  581 + if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
  582 + feeTypeId = this.feeTypes[i]._id;
  583 + }
  584 + }
  585 + if (this.$refs.form.validate()) {
  586 + let invoiceData = {
  587 + classId: this.invoiceData.classNum,
  588 + studentId: this.invoiceData.sectionId,
  589 + date: this.invoiceData.date,
  590 + paymentStatus: this.invoiceData.paymentStatus,
  591 + paymentMethod: this.invoiceData.paymentMethod,
  592 + feeType: this.feeTypeData,
  593 + totalAmount: this.feeType.amount,
  594 + totalDiscount: this.feeType.discount,
  595 + totalSubTotal: this.feeType.subTotal,
  596 + totalPaidAmount: this.feeType.paidAmount
  597 + };
  598 + if (invoiceData.paymentStatus == "NOT_PAID") {
  599 + delete invoiceData.totalPaidAmount;
  600 + }
  601 + http()
  602 + .post("/createInvoice", invoiceData)
  603 + .then(response => {
  604 + this.getInvoiceList();
  605 + this.snackbar = true;
  606 + this.text = "New Invoice added successfully";
  607 + this.clear();
  608 + this.feeTypeData = [];
  609 + if (this.feeTypeData.length == 0) {
  610 + this.feeType = {
  611 + amount: "0.00",
  612 + discount: "0.00",
  613 + paidAmount: "0.00",
  614 + subTotal: "0.00",
  615 + feeTypeList: ""
  616 + };
  617 + }
  618 + this.loading = false;
  619 + })
  620 + .catch(error => {
  621 + // console.log(error);
  622 + if ((this.snackbar = true)) {
  623 + this.text = error.response.data.message;
  624 + }
  625 + this.loading = false;
  626 + });
  627 + }
  628 + },
  629 + clear() {
  630 + this.$refs.form.reset();
  631 + },
  632 + getInvoiceList() {
  633 + http()
  634 + .get("/getInvoicesList", {
  635 + headers: { Authorization: "Bearer " + this.token }
  636 + })
  637 + .then(response => {
  638 + this.invoiceList = response.data.data;
  639 + this.showLoader = false;
  640 + })
  641 + .catch(err => {
  642 + // console.log("err====>", err);
  643 + this.showLoader = false;
  644 + if (error.response.status === 401) {
  645 + this.$router.replace({ path: "/" });
  646 + this.$store.dispatch("setToken", null);
  647 + this.$store.dispatch("Id", null);
  648 + }
  649 + });
  650 + },
  651 + selectFeeType() {
  652 + this.showFeeType = true;
  653 + this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
  654 + // console.log("this.feeType.feeTypeListC", this.feeTypeData.feeTypeName);
  655 + },
  656 + deleteSelectFee: function(index) {
  657 + this.feeTypeData.splice(index, 1);
  658 + console.log("this.feeTypeData", this.feeTypeData);
  659 + // if (index === 1)
  660 + for (let i = 0; i < this.feeTypeData.length; i++) {
  661 + this.feeType = this.feeTypeData[i];
  662 + }
  663 + if (this.feeTypeData.length == 0) {
  664 + this.feeType = {
  665 + amount: "0.00",
  666 + discount: "0.00",
  667 + paidAmount: "0.00",
  668 + subTotal: "0.00",
  669 + feeTypeName: ""
  670 + };
  671 + }
  672 + },
  673 + getAllClasses() {
  674 + http()
  675 + .get("/getClassesList", {
  676 + headers: { Authorization: "Bearer " + this.token }
  677 + })
  678 + .then(response => {
  679 + this.addclass = response.data.data;
  680 + })
  681 + .catch(err => {
  682 + // console.log("err====>", err);
  683 + // this.$router.replace({ path: "/" });
  684 + });
  685 + },
  686 + getAllStudents() {
  687 + http()
  688 + .get("/getStudentsList", {
  689 + params: { classId: this.invoiceData.classNum },
  690 + headers: { Authorization: "Bearer " + this.token }
  691 + })
  692 + .then(response => {
  693 + this.studentList = response.data.data;
  694 + })
  695 + .catch(err => {
  696 + // console.log("err====>", err);
  697 + // this.$router.replace({ path: "/" });
  698 + });
  699 + },
  700 + getfeeType() {
  701 + http()
  702 + .get("/getFeesList", {
  703 + headers: { Authorization: "Bearer " + this.token }
  704 + })
  705 + .then(response => {
  706 + this.feeTypes = response.data.data;
  707 + })
  708 + .catch(err => {
  709 + // console.log("err====>", err);
  710 + // this.$router.replace({ path: "/" });
  711 + });
  712 + },
  713 + getAmmountDetails(feeTyp) {
  714 + let feeType = {
  715 + amount: "",
  716 + discount: "",
  717 + subTotal: "",
  718 + subParticularTotal: "",
  719 + paidAmount: ""
  720 + };
  721 + for (let i = 0; i < this.feeTypeData.length; i++) {
  722 + // *********** AMOUNT ***********
  723 +
  724 + feeType.amount =
  725 + Number(feeType.amount) + Number(this.feeTypeData[i].amount);
  726 + console.log("feeType.amount ", feeType.amount);
  727 + this.feeType.amount = feeType.amount;
  728 + this.feeType.subTotal = feeType.amount;
  729 + this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
  730 +
  731 + // *********** DISCOUNT ***********
  732 +
  733 + if (this.feeTypeData[i].discount) {
  734 + feeType.discount =
  735 + Number(feeType.discount) + Number(this.feeTypeData[i].discount);
  736 + console.log("feeType.discount", feeType.discount);
  737 + this.feeType.discount = feeType.discount;
  738 + feeType.subParticularTotal =
  739 + this.feeTypeData[i].amount -
  740 + (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
  741 + console.log("feeType.subTotal", feeType.subTotal);
  742 + this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
  743 + }
  744 +
  745 + // *********** SUBTOTAL ***********
  746 +
  747 + feeType.subTotal =
  748 + Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
  749 + this.feeType.subTotal = feeType.subTotal.toFixed(2);
  750 +
  751 + // *********** PAID-AMOUNT ***********
  752 +
  753 + feeType.paidAmount =
  754 + Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
  755 + this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
  756 + }
  757 + },
  758 + getPayMethodList() {
  759 + if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
  760 + this.showPayMethods = true;
  761 + } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
  762 + this.showPayMethods = true;
  763 + } else {
  764 + this.showPayMethods = false;
  765 + }
  766 + }
  767 + },
  768 + mounted() {
  769 + this.token = this.$store.state.token;
  770 + this.getInvoiceList();
  771 + this.getAllClasses();
  772 + this.getfeeType();
  773 + },
  774 + created() {
  775 + this.$root.$on("app:search", search => {
  776 + this.search = search;
  777 + });
  778 + },
  779 + beforeDestroy() {
  780 + // dont forget to remove the listener
  781 + this.$root.$off("app:search");
  782 + }
  783 +};
  784 +</script>
  785 +
  786 +
  787 +<style scoped>
  788 +.active {
  789 + background-color: gray;
  790 + color: white !important;
  791 +}
  792 +.activebtn {
  793 + color: black !important;
  794 +}
  795 +table {
  796 + border-collapse: collapse;
  797 + border: 1px solid #e2e7eb;
  798 +}
  799 +
  800 +th,
  801 +td {
  802 + border: 1px solid #e2e7eb;
  803 + padding: 10px;
  804 + text-align: center;
  805 +}
  806 +table.feeTypeTable {
  807 + table-layout: auto !important;
  808 + width: 100% !important;
  809 +}
  810 +</style>
0 811 \ No newline at end of file
... ...
src/pages/Account/paymentHistory.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,170 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** EXISTING-USER TABLE DATA****** -->
  4 + <v-card flat>
  5 + <v-card-actions>
  6 + <v-layout>
  7 + <h4 class="right mt-2 ml-2">Payment History</h4>
  8 + </v-layout>
  9 + <v-spacer></v-spacer>
  10 + </v-card-actions>
  11 + </v-card>
  12 + <v-data-table
  13 + :headers="headers"
  14 + :items="paymentHistory"
  15 + :pagination.sync="pagination"
  16 + :search="search"
  17 + >
  18 + <template slot="items" slot-scope="props">
  19 + <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
  20 + <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
  21 + <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
  22 + <td id="td" class="text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td>
  23 + <td id="td" class="text-xs-center">{{ props.item.paymentMethod }}</td>
  24 + <!-- <td id="td" class="text-xs-center">{{ props.item.feeType[0].discount }}</td> -->
  25 + <td id="td" class="text-xs-center">{{ props.item.totalPaidAmount }}</td>
  26 + <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
  27 + <!-- <td class="text-xs-center">
  28 + <span>
  29 + <img
  30 + style="cursor:pointer; width:20px; height:18px; "
  31 + class="mr-5"
  32 + @click="editItem(props.item)"
  33 + src="/static/icon/edit1.png"
  34 + />
  35 + <img
  36 + style="cursor:pointer;width:20px; height:20px; "
  37 + class="mr-5"
  38 + @click="deleteItem(props.item)"
  39 + src="/static/icon/delete1.png"
  40 + />
  41 + </span>
  42 + </td> -->
  43 + </template>
  44 + <v-alert
  45 + slot="no-results"
  46 + :value="true"
  47 + color="error"
  48 + icon="warning"
  49 + >Your search for "{{ search }}" found no results.</v-alert>
  50 + </v-data-table>
  51 + <div class="loader" v-if="showLoader">
  52 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  53 + </div>
  54 + </v-app>
  55 +</template>
  56 +
  57 +<script>
  58 +import http from "@/Services/http.js";
  59 +import moment from "moment";
  60 +
  61 +export default {
  62 + data: () => ({
  63 + showLoader: false,
  64 + search: "",
  65 + pagination: {
  66 + rowsPerPage: 15
  67 + },
  68 + headers: [
  69 + {
  70 + text: "No",
  71 + align: "center",
  72 + sortable: false,
  73 + value: "No"
  74 + },
  75 + {
  76 + text: "Student",
  77 + value: "student",
  78 + sortable: false,
  79 + align: "center"
  80 + },
  81 + { text: "Class", value: "class", sortable: false, align: "center" },
  82 + { text: "Fee Type", value: "feeTypeName", sortable: false, align: "center" },
  83 + { text: "Method", value: "paymentMethod", sortable: false, align: "center" },
  84 + {
  85 + text: "Paid Amount",
  86 + value: "totalPaidAmount",
  87 + sortable: false,
  88 + align: "center"
  89 + },
  90 + {
  91 + text: "Date",
  92 + value: "date",
  93 + sortable: false,
  94 + align: "center"
  95 + },
  96 + // { text: "Action", value: "", sortable: false, align: "center" }
  97 + ],
  98 + paymentHistory: []
  99 + }),
  100 + methods: {
  101 + dates: function(date) {
  102 + return moment(date).format("MMMM DD, YYYY");
  103 + },
  104 + getPaymentHistory() {
  105 + this.showLoader = true;
  106 + var token = this.$store.state.token;
  107 + http()
  108 + .get("/getInvoicesList", {
  109 + params:{ paymentStatus: "FULLY_PAID"},
  110 + headers: { Authorization: "Bearer " + token }
  111 + })
  112 + .then(response => {
  113 + this.paymentHistory = response.data.data;
  114 + this.showLoader = false;
  115 + })
  116 + .catch(error => {
  117 + this.showLoader = false;
  118 + if (error.response.status === 401) {
  119 + this.$router.replace({ path: "/" });
  120 + this.$store.dispatch("setToken", null);
  121 + this.$store.dispatch("Id", null);
  122 + }
  123 + });
  124 + }
  125 + // getRole() {
  126 + // this.showLoader = true;
  127 + // var token = this.$store.state.token;
  128 + // http()
  129 + // .get("/getRolesList", {
  130 + // headers: { Authorization: "Bearer " + token }
  131 + // })
  132 + // .then(response => {
  133 + // this.userRole = response.data.data;
  134 + // this.showLoader = false;
  135 + // // console.log("UserList=====>",this.desserts)
  136 + // })
  137 + // .catch(error => {
  138 + // this.showLoader = false;
  139 + // if (error.response.status === 401) {
  140 + // this.$router.replace({ path: "/" });
  141 + // this.$store.dispatch("setToken", null);
  142 + // this.$store.dispatch("Id", null);
  143 + // }
  144 + // });
  145 + // }
  146 + },
  147 + mounted() {
  148 + this.getPaymentHistory();
  149 + // this.getRole();
  150 + },
  151 + created() {
  152 + this.$root.$on("app:search", search => {
  153 + this.search = search;
  154 + });
  155 + },
  156 + beforeDestroy() {
  157 + // dont forget to remove the listener
  158 + this.$root.$off("app:search");
  159 + }
  160 +};
  161 +</script>
  162 +<style scoped>
  163 +.active {
  164 + background-color: gray;
  165 + color: white !important;
  166 +}
  167 +.activebtn {
  168 + color: black !important;
  169 +}
  170 +</style>
0 171 \ No newline at end of file
... ...
src/pages/Account/viewInvoice.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,240 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** Edit multiple INVOICE ****** -->
  4 + <v-container fluid grid-list-md>
  5 + <v-card>
  6 + <v-layout wrap>
  7 + <v-flex 12>
  8 + <br />
  9 + <v-layout>
  10 + <v-flex xs12 sm6>
  11 + <v-layout>
  12 + <v-flex xs6 sm2>
  13 + <h5 class="right my-1">
  14 + <b>invoice:</b>
  15 + </h5>
  16 + </v-flex>
  17 + <v-flex sm11 xs6>
  18 + <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
  19 + </v-flex>
  20 + </v-layout>
  21 + <v-layout>
  22 + <v-flex xs6 sm2>
  23 + <h5 class="right my-1">
  24 + <b>Name:</b>
  25 + </h5>
  26 + </v-flex>
  27 + <v-flex sm11 xs6>
  28 + <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
  29 + </v-flex>
  30 + </v-layout>
  31 + <v-layout>
  32 + <v-flex xs6 sm2>
  33 + <h5 class="right my-1">
  34 + <b>Class:</b>
  35 + </h5>
  36 + </v-flex>
  37 + <v-flex sm11 xs6>
  38 + <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
  39 + </v-flex>
  40 + </v-layout>
  41 + </v-flex>
  42 + <v-flex xs12 sm6>
  43 +
  44 + <v-layout>
  45 + <v-flex xs6 sm2>
  46 + <h5 class="right my-1">
  47 + <b>Roll No:</b>
  48 + </h5>
  49 + </v-flex>
  50 + <v-flex sm6 xs8>
  51 + <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
  52 + </v-flex>
  53 + </v-layout>
  54 + <v-layout>
  55 + <v-flex xs6 sm2>
  56 + <h5 class="right my-1">
  57 + <b>email:</b>
  58 + </h5>
  59 + </v-flex>
  60 + <v-flex sm6 xs8>
  61 + <h5 class="my-1">{{ invoiceParticularData.studentId.email }}</h5>
  62 + </v-flex>
  63 + </v-layout>
  64 + <v-layout>
  65 + <v-flex xs6 sm2>
  66 + <h5 class="right my-1">
  67 + <b>Status :</b>
  68 + </h5>
  69 + </v-flex>
  70 + <v-flex sm6 xs8>
  71 + <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
  72 + </v-flex>
  73 + </v-layout>
  74 + </v-flex>
  75 + </v-layout>
  76 + </v-flex>
  77 + </v-layout>
  78 + </v-card>
  79 + <table class="feeTypeTable">
  80 + <tr class="info white--text">
  81 + <th>#</th>
  82 + <th>Fee Type</th>
  83 + <th>Amount</th>
  84 + <th>Discount</th>
  85 + <th>Subtotal</th>
  86 + </tr>
  87 + <tr
  88 + v-for="(feeType, index) in feeTypeData"
  89 + :key="index"
  90 + v-on:keyup="getAmmountDetails(feeType)"
  91 + >
  92 + <td style="width:40px">{{ index + 1 }}</td>
  93 + <td style="width:120px">{{ feeType.feeTypeName }}</td>
  94 + <td style="width:120px">{{ feeType.amount }}</td>
  95 + <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
  96 + <td style="width:120px">{{ feeType.subTotal }}</td>
  97 + </tr>
  98 + <tfoot>
  99 + <tr>
  100 + <td colspan="4"><span class="right subheding">Total Amount (RS) :</span></td>
  101 + <td>{{ feeType.subTotal }}</td>
  102 + </tr>
  103 + <tr>
  104 + <td colspan="4"><span class="right subheding">Paid (RS) :</span></td>
  105 + <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
  106 + </tr>
  107 + <tr>
  108 + <td colspan="4"><span class="right subheding">Balance (RS) :</span></td>
  109 + <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
  110 + </tr>
  111 + </tfoot>
  112 + </table>
  113 + </v-card>
  114 + </v-flex>
  115 + </v-layout>
  116 + </v-container>
  117 + </v-flex>
  118 + </v-container>
  119 + <div class="loader" v-if="showLoader">
  120 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  121 + </div>
  122 + </v-app>
  123 +</template>
  124 +
  125 +<script>
  126 +import http from "@/Services/http.js";
  127 +import Util from "@/util";
  128 +import moment from "moment";
  129 +
  130 +export default {
  131 + data: () => ({
  132 + showLoader: false,
  133 + feeTypes: [],
  134 + invoiceData: {},
  135 + feeType: {
  136 + amount: "",
  137 + discount: "",
  138 + totalPaidAmount: "",
  139 + subTotal: "",
  140 + feeTypeName: ""
  141 + },
  142 + feeTypeData: [],
  143 + token: "",
  144 + invoiceParticularData: {},
  145 + }),
  146 +
  147 + methods: {
  148 +
  149 + getInvoiceList() {
  150 + http()
  151 + .get("/getParticularInvoice", {
  152 + params: { invoiceId: this.$route.params.viewInvoiceId },
  153 + headers: { Authorization: "Bearer " + this.token }
  154 + })
  155 + .then(response => {
  156 + this.invoiceParticularData = response.data.data;
  157 + this.invoiceData = this.invoiceParticularData;
  158 + this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
  159 + this.feeTypeData = this.invoiceParticularData.feeType;
  160 + (this.feeType.amount = response.data.data.totalAmount),
  161 + (this.feeType.discount = response.data.data.totalDiscount),
  162 + (this.feeType.subTotal = response.data.data.totalSubTotal),
  163 + this.feeType.totalPaidAmount = response.data.data.totalPaidAmount
  164 + console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount)
  165 + (this.showLoader = false);
  166 + })
  167 + .catch(err => {
  168 + this.showLoader = false;
  169 + });
  170 + },
  171 + getfeeType() {
  172 + http()
  173 + .get("/getFeesList", {
  174 + headers: { Authorization: "Bearer " + this.token }
  175 + })
  176 + .then(response => {
  177 + this.feeTypes = response.data.data;
  178 + })
  179 + .catch(err => {
  180 + // console.log("err====>", err);
  181 + });
  182 + },
  183 + getAmmountDetails(feeTyp) {
  184 + let feeType = {
  185 + subTotal: "",
  186 + subParticularTotal: "",
  187 + paidAmount: ""
  188 + };
  189 + // *********** SUBTOTAL ***********
  190 + feeType.subTotal =
  191 + Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
  192 + this.feeType.subTotal = feeType.subTotal.toFixed(2);
  193 + // *********** PAID-AMOUNT ***********
  194 + feeType.paidAmount =
  195 + Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
  196 + this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
  197 + }
  198 + },
  199 + mounted() {
  200 + this.token = this.$store.state.token;
  201 + this.getInvoiceList();
  202 + this.getfeeType();
  203 + },
  204 + created() {
  205 + this.$root.$on("app:search", search => {
  206 + this.search = search;
  207 + });
  208 + },
  209 + beforeDestroy() {
  210 + // dont forget to remove the listener
  211 + this.$root.$off("app:search");
  212 + }
  213 +};
  214 +</script>
  215 +
  216 +
  217 +<style scoped>
  218 +.active {
  219 + background-color: gray;
  220 + color: white !important;
  221 +}
  222 +.activebtn {
  223 + color: black !important;
  224 +}
  225 +table {
  226 + border-collapse: collapse;
  227 + border: 1px solid #e2e7eb;
  228 +}
  229 +
  230 +th,
  231 +td {
  232 + border: 1px solid #e2e7eb;
  233 + padding: 10px;
  234 + text-align: center;
  235 +}
  236 +table.feeTypeTable {
  237 + table-layout: auto !important;
  238 + width: 100% !important;
  239 +}
  240 +</style>
0 241 \ No newline at end of file
... ...
src/pages/Attendence/studentAttendence.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,192 @@
  1 +<template>
  2 + <div>
  3 + <v-snackbar
  4 + :timeout="timeout"
  5 + :top="y === 'top'"
  6 + :right="x === 'right'"
  7 + :vertical="mode === 'vertical'"
  8 + v-model="snackbar"
  9 + color="success"
  10 + >{{ text }}</v-snackbar>
  11 +
  12 + <!-- ****** EXISTING STUDENTS TABLE ****** -->
  13 +
  14 + <v-card flat>
  15 + <v-card-actions>
  16 + <v-layout>
  17 + <h3 class="right mt-2 ml-2">Student Attendence</h3>
  18 + </v-layout>
  19 + <v-spacer></v-spacer>
  20 + <v-flex xs12 sm2>
  21 + <v-select
  22 + outline
  23 + small
  24 + :items="addclass"
  25 + label="Select Class"
  26 + v-model="selectStudents.select"
  27 + item-text="classNum"
  28 + item-value="_id"
  29 + name="Select Class"
  30 + @change="getSections(selectStudents.select)"
  31 + class="px-2"
  32 + required
  33 + ></v-select>
  34 + </v-flex>
  35 + </v-card-actions>
  36 + </v-card>
  37 + <v-data-table
  38 + :headers="headers"
  39 + :items="studentsList"
  40 + :pagination.sync="pagination"
  41 + :search="search"
  42 + >
  43 + <template slot="items" slot-scope="props">
  44 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
  45 + <td id="td" class="text-xs-center">
  46 + <v-avatar>
  47 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  48 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  49 + </v-avatar>
  50 + </td>
  51 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  52 + <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
  53 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  54 + <td class="text-xs-center">
  55 + <router-link :to="{ name:'ViewStudentsAttendence',params: { id:props.item._id } }">
  56 + <img
  57 + style="cursor:pointer; width:20px; height:18px; "
  58 + class="mr-5"
  59 + src="/static/icon/edit1.png"
  60 + />
  61 + </router-link>
  62 + <img
  63 + style="cursor:pointer;width:20px; height:20px; "
  64 + class="mr-5"
  65 + @click="deleteItem(props.item)"
  66 + src="/static/icon/delete1.png"
  67 + />
  68 + <!-- </span> -->
  69 + </td>
  70 + </template>
  71 + <v-alert
  72 + slot="no-results"
  73 + :value="true"
  74 + color="error"
  75 + icon="warning"
  76 + >Your search for "{{ search }}" found no results.</v-alert>
  77 + </v-data-table>
  78 + <div class="loader" v-if="showLoader">
  79 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  80 + </div>
  81 + </div>
  82 +</template>
  83 +
  84 +<script>
  85 +import http from "@/Services/http.js";
  86 +import Util from "@/util";
  87 +import moment from "moment";
  88 +
  89 +export default {
  90 + data: () => ({
  91 + snackbar: false,
  92 + y: "top",
  93 + x: "right",
  94 + mode: "",
  95 + timeout: 3000,
  96 + text: "",
  97 + showLoader: false,
  98 + loading: false,
  99 + date: null,
  100 + search: "",
  101 + addclass: [],
  102 + pagination: {
  103 + rowsPerPage: 15
  104 + },
  105 + imageData: {},
  106 + imageName: "",
  107 + imageUrl: "",
  108 + imageFile: "",
  109 + headers: [
  110 + {
  111 + text: "No",
  112 + align: "center",
  113 + sortable: false,
  114 + value: "index"
  115 + },
  116 + {
  117 + text: "Profile Pic",
  118 + value: "profilprofilePicUrlePicUrl",
  119 + sortable: false,
  120 + align: "center"
  121 + },
  122 + { text: "Name", value: "name", sortable: false, align: "center" },
  123 + { text: "Roll No", value: "rollNo", sortable: false, align: "center" },
  124 + { text: "Email", value: "email", sortable: false, align: "center" },
  125 + { text: "Action", value: "", sortable: false, align: "center" }
  126 + ],
  127 + studentsList: [],
  128 + parentId: "",
  129 + token: "",
  130 + selectStudents: {
  131 + select: "",
  132 + selectSection: ""
  133 + }
  134 + }),
  135 + methods: {
  136 + getSections(_id) {
  137 + var token = this.$store.state.token;
  138 + http()
  139 + .get(
  140 + "/getStudentsList",
  141 + { params: { classId: _id } },
  142 + {
  143 + headers: { Authorization: "Bearer " + token }
  144 + }
  145 + )
  146 + .then(response => {
  147 + this.studentsList = response.data.data;
  148 + console.log("getSectionsList=====>", response.data.data);
  149 + })
  150 + .catch(err => {
  151 + // console.log("err====>", err);
  152 + });
  153 + },
  154 + getAllClass() {
  155 + http()
  156 + .get("/getClassesList", {
  157 + headers: { Authorization: "Bearer " + this.token }
  158 + })
  159 + .then(response => {
  160 + this.addclass = response.data.data;
  161 + })
  162 + .catch(err => {
  163 + // console.log("err====>", err);
  164 + this.$router.replace({ path: "/" });
  165 + });
  166 + }
  167 + },
  168 + mounted() {
  169 + // this.getStudentList();
  170 + this.token = this.$store.state.token;
  171 + this.getAllClass();
  172 + },
  173 + created() {
  174 + this.$root.$on("app:search", search => {
  175 + this.search = search;
  176 + });
  177 + },
  178 + beforeDestroy() {
  179 + // dont forget to remove the listener
  180 + this.$root.$off("app:search");
  181 + }
  182 +};
  183 +</script>
  184 +<style scoped>
  185 +.active {
  186 + background-color: gray;
  187 + color: white !important;
  188 +}
  189 +.activebtn {
  190 + color: black !important;
  191 +}
  192 +</style>
0 193 \ No newline at end of file
... ...
src/pages/Attendence/teacherAttendence.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,147 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** EXISTING-Teachers TABLE DATA****** -->
  4 + <v-card flat>
  5 + <v-card-actions>
  6 + <v-layout>
  7 + <h4 class="right mt-2 ml-2">Teacher Attendence</h4>
  8 + </v-layout>
  9 + <v-spacer></v-spacer>
  10 + </v-card-actions>
  11 + </v-card>
  12 + <v-data-table
  13 + :headers="headers"
  14 + :items="desserts"
  15 + :pagination.sync="pagination"
  16 + :search="search"
  17 + >
  18 + <template slot="items" slot-scope="props">
  19 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
  20 + <td id="td" class="text-xs-center">
  21 + <v-avatar>
  22 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  23 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  24 + </v-avatar>
  25 + </td>
  26 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  27 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  28 + <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
  29 + <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
  30 + <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
  31 + <td class="text-xs-center">
  32 + <span>
  33 + <img
  34 + style="cursor:pointer; width:25px; height:18px; "
  35 + class="mr-5"
  36 + @click="profile(props.item)"
  37 + src="/static/icon/eye1.png"
  38 + />
  39 + </span>
  40 + </td>
  41 + </template>
  42 + <v-alert
  43 + slot="no-results"
  44 + :value="true"
  45 + color="error"
  46 + icon="warning"
  47 + >Your search for "{{ search }}" found no results.</v-alert>
  48 + </v-data-table>
  49 + <div class="loader" v-if="showLoader">
  50 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  51 + </div>
  52 + </v-app>
  53 +</template>
  54 +
  55 +<script>
  56 +import http from "@/Services/http.js";
  57 +import Util from "@/util";
  58 +import moment from "moment";
  59 +
  60 +export default {
  61 + data: () => ({
  62 + showLoader: false,
  63 + search: "",
  64 + pagination: {
  65 + rowsPerPage: 15
  66 + },
  67 + headers: [
  68 + {
  69 + text: "No",
  70 + align: "center",
  71 + sortable: false,
  72 + value: "No"
  73 + },
  74 + {
  75 + text: "Profile Pic",
  76 + value: "profilePicUrl",
  77 + sortable: false,
  78 + align: "center"
  79 + },
  80 + { text: "Name", value: "name", sortable: false, align: "center" },
  81 + { text: "Email", value: "email", sortable: false, align: "center" },
  82 + { text: "DOB", value: "dob", sortable: false, align: "center" },
  83 + {
  84 + text: "Join Date",
  85 + value: "joinDate",
  86 + sortable: false,
  87 + align: "center"
  88 + },
  89 + {
  90 + text: "Mobile No",
  91 + value: "mobileNo",
  92 + sortable: false,
  93 + align: "center"
  94 + },
  95 + { text: "Action", value: "", sortable: false, align: "center" }
  96 + ],
  97 + desserts: []
  98 + }),
  99 + methods: {
  100 + dates: function(date) {
  101 + return moment(date).format("MMMM DD, YYYY");
  102 + },
  103 + getTeacherList() {
  104 + this.showLoader = true;
  105 + var token = this.$store.state.token;
  106 + http()
  107 + .get("/getTeachersList", {
  108 + headers: { Authorization: "Bearer " + token }
  109 + })
  110 + .then(response => {
  111 + this.desserts = response.data.data;
  112 + this.showLoader = false;
  113 + // console.log("getTeacherList=====>",this.desserts)
  114 + })
  115 + .catch(error => {
  116 + this.showLoader = false;
  117 + if (error.response.status === 401) {
  118 + this.$router.replace({ path: "/" });
  119 + this.$store.dispatch("setToken", null);
  120 + this.$store.dispatch("Id", null);
  121 + }
  122 + });
  123 + }
  124 + },
  125 + mounted() {
  126 + this.getTeacherList();
  127 + },
  128 + created() {
  129 + this.$root.$on("app:search", search => {
  130 + this.search = search;
  131 + });
  132 + },
  133 + beforeDestroy() {
  134 + // dont forget to remove the listener
  135 + this.$root.$off("app:search");
  136 + }
  137 +};
  138 +</script>
  139 +<style scoped>
  140 +.active {
  141 + background-color: gray;
  142 + color: white !important;
  143 +}
  144 +.activebtn {
  145 + color: black !important;
  146 +}
  147 +</style>
0 148 \ No newline at end of file
... ...
src/pages/Attendence/userAttendence.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,180 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** EXISTING-USER TABLE DATA****** -->
  4 + <v-card flat>
  5 + <v-card-actions>
  6 + <v-layout>
  7 + <h4 class="right mt-2 ml-2">User Attendence</h4>
  8 + </v-layout>
  9 + <v-spacer></v-spacer>
  10 + </v-card-actions>
  11 + </v-card>
  12 + <v-data-table
  13 + :headers="headers"
  14 + :items="desserts"
  15 + :pagination.sync="pagination"
  16 + :search="search"
  17 + >
  18 + <template slot="items" slot-scope="props">
  19 + <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
  20 + <td id="td" class="text-xs-center">
  21 + <v-avatar>
  22 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  23 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  24 + </v-avatar>
  25 + </td>
  26 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  27 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  28 + <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
  29 + <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td>
  30 + <td id="td" class="text-xs-center">{{ props.item.phone }}</td>
  31 + <td class="text-xs-center">
  32 + <span>
  33 + <img
  34 + style="cursor:pointer; width:25px; height:18px; "
  35 + class="mr-5"
  36 + @click="profile(props.item)"
  37 + src="/static/icon/eye1.png"
  38 + />
  39 + <!-- <img
  40 + style="cursor:pointer; width:20px; height:18px; "
  41 + class="mr-5"
  42 + @click="editItem(props.item)"
  43 + src="/static/icon/edit1.png"
  44 + />
  45 + <img
  46 + style="cursor:pointer;width:20px; height:20px; "
  47 + class="mr-5"
  48 + @click="deleteItem(props.item)"
  49 + src="/static/icon/delete1.png"
  50 + /> -->
  51 + </span>
  52 + </td>
  53 + </template>
  54 + <v-alert
  55 + slot="no-results"
  56 + :value="true"
  57 + color="error"
  58 + icon="warning"
  59 + >Your search for "{{ search }}" found no results.</v-alert>
  60 + </v-data-table>
  61 + <div class="loader" v-if="showLoader">
  62 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  63 + </div>
  64 + </v-app>
  65 +</template>
  66 +
  67 +<script>
  68 +import http from "@/Services/http.js";
  69 +import moment from "moment";
  70 +
  71 +export default {
  72 + data: () => ({
  73 + showLoader: false,
  74 + search: "",
  75 + pagination: {
  76 + rowsPerPage: 15
  77 + },
  78 + headers: [
  79 + {
  80 + text: "No",
  81 + align: "center",
  82 + sortable: false,
  83 + value: "No"
  84 + },
  85 + {
  86 + text: "Profile Pic",
  87 + value: "profilePicUrl",
  88 + sortable: false,
  89 + align: "center"
  90 + },
  91 + { text: "Name", value: "name", sortable: false, align: "center" },
  92 + { text: "Email", value: "email", sortable: false, align: "center" },
  93 + { text: "DOB", value: "dob", sortable: false, align: "center" },
  94 + {
  95 + text: "Joining Date",
  96 + value: "joiningDate",
  97 + sortable: false,
  98 + align: "center"
  99 + },
  100 + {
  101 + text: "Phone",
  102 + value: "phone",
  103 + sortable: false,
  104 + align: "center"
  105 + },
  106 + { text: "Action", value: "", sortable: false, align: "center" }
  107 + ],
  108 + desserts: []
  109 + }),
  110 + methods: {
  111 + dates: function(date) {
  112 + return moment(date).format("MMMM DD, YYYY");
  113 + },
  114 + getUsersList() {
  115 + this.showLoader = true;
  116 + var token = this.$store.state.token;
  117 + http()
  118 + .get("/getUsersList", {
  119 + headers: { Authorization: "Bearer " + token }
  120 + })
  121 + .then(response => {
  122 + this.desserts = response.data.data;
  123 + this.showLoader = false;
  124 + console.log("UserList=====>", this.desserts);
  125 + })
  126 + .catch(error => {
  127 + this.showLoader = false;
  128 + if (error.response.status === 401) {
  129 + this.$router.replace({ path: "/" });
  130 + this.$store.dispatch("setToken", null);
  131 + this.$store.dispatch("Id", null);
  132 + }
  133 + });
  134 + },
  135 + getRole() {
  136 + this.showLoader = true;
  137 + var token = this.$store.state.token;
  138 + http()
  139 + .get("/getRolesList", {
  140 + headers: { Authorization: "Bearer " + token }
  141 + })
  142 + .then(response => {
  143 + this.userRole = response.data.data;
  144 + this.showLoader = false;
  145 + // console.log("UserList=====>",this.desserts)
  146 + })
  147 + .catch(error => {
  148 + this.showLoader = false;
  149 + if (error.response.status === 401) {
  150 + this.$router.replace({ path: "/" });
  151 + this.$store.dispatch("setToken", null);
  152 + this.$store.dispatch("Id", null);
  153 + }
  154 + });
  155 + }
  156 + },
  157 + mounted() {
  158 + this.getUsersList();
  159 + this.getRole();
  160 + },
  161 + created() {
  162 + this.$root.$on("app:search", search => {
  163 + this.search = search;
  164 + });
  165 + },
  166 + beforeDestroy() {
  167 + // dont forget to remove the listener
  168 + this.$root.$off("app:search");
  169 + }
  170 +};
  171 +</script>
  172 +<style scoped>
  173 +.active {
  174 + background-color: gray;
  175 + color: white !important;
  176 +}
  177 +.activebtn {
  178 + color: black !important;
  179 +}
  180 +</style>
0 181 \ No newline at end of file
... ...
src/pages/Attendence/viewStudentsAttendence.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,199 @@
  1 +<template>
  2 + <v-container fluid grid-list-md>
  3 + <v-layout wrap>
  4 + <v-flex xs12 sm4>
  5 + <v-card flat>
  6 + <h3 class="text-xs-center py-2 grey white--text">Profile</h3>
  7 + <hr />
  8 + <v-card-text>
  9 + <v-container>
  10 + <v-layout wrap>
  11 + <v-flex xs12>
  12 + <v-layout>
  13 + <v-flex
  14 + xs12
  15 + class="text-xs-center text-sm-center text-md-center text-lg-center"
  16 + >
  17 + <v-avatar size="160px">
  18 + <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
  19 + <img :src="studentData.profilePicUrl" v-else-if="studentData.profilePicUrl" />
  20 + </v-avatar>
  21 + </v-flex>
  22 + </v-layout>
  23 + <v-layout>
  24 + <v-flex xs12 sm12>
  25 + <h3 class="text-xs-center">
  26 + <b>{{ studentData.name }}</b>
  27 + </h3>
  28 + <p class="text-xs-center grey--text">Student</p>
  29 + </v-flex>
  30 + </v-layout>
  31 + <v-layout style="border: 1px solid lightgrey;">
  32 + <v-flex xs6 sm6 class="pa-0">
  33 + <h4 class="right">
  34 + <b>Roll No :</b>
  35 + </h4>
  36 + </v-flex>
  37 + <v-flex sm6 xs6 class="pa-0">
  38 + <h4>{{ studentData.rollNo }}</h4>
  39 + </v-flex>
  40 + </v-layout>
  41 + <v-layout style="border: 1px solid lightgrey;">
  42 + <v-flex xs6 sm6 class="pa-0">
  43 + <h4 class="right">
  44 + <b>Class :</b>
  45 + </h4>
  46 + </v-flex>
  47 + <v-flex sm6 xs6 class="right pa-0">
  48 + <h4>{{ studentData.classId.classNum }}</h4>
  49 + </v-flex>
  50 + </v-layout>
  51 + <v-layout style="border: 1px solid lightgrey;">
  52 + <v-flex xs6 sm6 class="right pa-0">
  53 + <h4 class="right">
  54 + <b>Section :</b>
  55 + </h4>
  56 + </v-flex>
  57 + <v-flex sm6 xs6 class="right pa-0">
  58 + <h4>{{ studentData.sectionId.name}}</h4>
  59 + </v-flex>
  60 + </v-layout>
  61 + </v-flex>
  62 + </v-layout>
  63 + </v-container>
  64 + </v-card-text>
  65 + </v-card>
  66 + </v-flex>
  67 + <v-flex xs12 sm8>
  68 + <v-card flat>
  69 + <h3 class="py-2 text-xs-center grey white--text">
  70 + Attendence
  71 + <span class="ml-4">
  72 + <v-avatar color="green caption" size="12"></v-avatar>
  73 + <span class="subheading">Present</span>
  74 + </span>
  75 + <span class="ml-4">
  76 + <v-avatar color="red caption" size="12" class></v-avatar>
  77 + <span class="subheading">Absent</span>
  78 + </span>
  79 + </h3>
  80 + <hr />
  81 + <YearCalendar
  82 + v-model="year"
  83 + :activeDates.sync="activeDates"
  84 + @toggleDate="toggleDate"
  85 + prefixClass="your_customized_wrapper_class"
  86 + :activeClass="activeClass"
  87 + ></YearCalendar>
  88 + </v-card>
  89 + </v-flex>
  90 + </v-layout>
  91 + </v-container>
  92 +</template>
  93 +
  94 +<script>
  95 +import moment from "moment";
  96 +import http from "@/Services/http.js";
  97 +import YearCalendar from "vue-material-year-calendar";
  98 +
  99 +export default {
  100 + components: { YearCalendar },
  101 + data() {
  102 + return {
  103 + studentsList: [],
  104 + token: "",
  105 + year: new Date().getFullYear(),
  106 + activeDates: [],
  107 + activeClass: "",
  108 + studentData: {}
  109 + };
  110 + },
  111 + mounted() {
  112 + this.token = this.$store.state.token;
  113 + this.getStudentAttendence();
  114 + this.getStudentData();
  115 + },
  116 + methods: {
  117 + dates: function(date) {
  118 + return moment(date).format("MMMM DD, YYYY");
  119 + },
  120 + getStudentAttendence() {
  121 + http()
  122 + .get(
  123 + "/studentAttendance",
  124 + { params: { studentId: this.$route.params.id } },
  125 + {
  126 + headers: { Authorization: "Bearer " + this.token }
  127 + }
  128 + )
  129 + .then(response => {
  130 + let array = [];
  131 + for (let i = 0; i < response.data.data.length; i++) {
  132 + if (response.data.data[i].students[0].isPresent == true) {
  133 + array.push({
  134 + date: response.data.data[i].date,
  135 + className: "green"
  136 + });
  137 + } else if (response.data.data[i].students[0].isPresent == false) {
  138 + array.push({
  139 + date: response.data.data[i].date,
  140 + className: "red"
  141 + });
  142 + }
  143 + }
  144 + this.activeDates = array;
  145 + })
  146 + .catch(err => {
  147 + console.log("err====>", err);
  148 + // this.$router.replace({ path: '/' });
  149 + });
  150 + },
  151 + getStudentData() {
  152 + http()
  153 + .get(
  154 + "/getParticularStudentDetail",
  155 + { params: { studentId: this.$route.params.id } },
  156 + {
  157 + headers: { Authorization: "Bearer " + this.token }
  158 + }
  159 + )
  160 + .then(response => {
  161 + this.studentData = response.data.data;
  162 + })
  163 + .catch(err => {
  164 + console.log("err====>", err);
  165 + // this.$router.replace({ path: '/' });
  166 + });
  167 + },
  168 + toggleDate(dateInfo) {
  169 + console.log(dateInfo); // { date: '2010-10-23', selected: true }
  170 + }
  171 + }
  172 +};
  173 +</script>
  174 +
  175 +<style lang="stylus">
  176 +.your_customized_wrapper_class {
  177 + background-color: #0aa;
  178 + color: white;
  179 +
  180 + &.red {
  181 + background-color: red;
  182 + color: white;
  183 +
  184 + &:after {
  185 + background-size: 100% 100%;
  186 + }
  187 + }
  188 +
  189 + &.blue {
  190 + background-color: #0000aa;
  191 + color: white;
  192 + }
  193 +
  194 + &.your_customized_classname {
  195 + background-color: yellow;
  196 + color: black;
  197 + }
  198 +}
  199 +</style>
0 200 \ No newline at end of file
... ...
src/pages/Class/addclass.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <div>
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gary">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -78,11 +78,6 @@
78 78 <v-icon @click="close1">close</v-icon>
79 79 </v-toolbar>
80 80 <v-card>
81   - <!-- <v-flex align-center justify-center layout text-xs-center>
82   - <v-avatar size="50px" style="position:absolute; top:20px;">
83   - <img src="/static/icon/user.png" />
84   - </v-avatar>
85   - </v-flex> -->
86 81 <v-card-text>
87 82 <v-container grid-list-md>
88 83 <v-layout wrap>
... ... @@ -119,7 +114,7 @@
119 114 :search="search"
120 115 >
121 116 <template slot="items" slot-scope="props">
122   - <td>{{ props.index }}</td>
  117 + <td>{{ props.index + 1 }}</td>
123 118 <td class="text-xs-center">{{ props.item.classNum}}</td>
124 119 <td class="text-xs-center">
125 120 <span>
... ... @@ -396,7 +391,7 @@ export default {
396 391 </script>
397 392 <style>
398 393 .active {
399   - background-color: black;
  394 + background-color: gray;
400 395 color: white !important;
401 396 }
402 397 .activebtn {
... ...
src/pages/Dashboard/dashboard.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <full-calendar ref="calendar" defaultView='month' :events="events" :config="config"></full-calendar>
  3 + <full-calendar
  4 + ref="calendar"
  5 + defaultView="month"
  6 + droppable="false"
  7 + :events="events"
  8 + :config="config"
  9 + ></full-calendar>
4 10 <v-dialog v-model="dialog" max-width="500">
5 11 <v-card color="grey lighten-4" flat>
6 12 <v-toolbar dark color="fixcolors">
7   - <v-toolbar-side-icon></v-toolbar-side-icon>
8 13 <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
9 14 <v-spacer></v-spacer>
10 15 <v-btn icon @click="dialog= false">
... ... @@ -75,10 +80,13 @@ export default {
75 80 this.selected = event;
76 81 console.log("this.selected", this.selected);
77 82 },
  83 + // eventDropStart: function(event) {
  84 + // event.editable = false;
  85 + // },
78 86 eventCreated(...test) {
79 87 console.log(test);
80 88 },
81   - getHolidays() {
  89 + getData() {
82 90 this.showLoader = true;
83 91 var token = this.$store.state.token;
84 92 http()
... ... @@ -135,11 +143,11 @@ export default {
135 143 // }
136 144 },
137 145 mounted() {
138   - // this.getEvents();
139   - this.getHolidays();
  146 + this.getData();
140 147 }
141 148 };
142 149 </script>
  150 +
143 151 <style>
144 152 @import "fullcalendar/dist/fullcalendar.css";
145 153 .fc button {
... ... @@ -158,136 +166,4 @@ export default {
158 166 transition-duration: 0.4s;
159 167 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
160 168 }
161   -.v-tabs__container--icons-and-text {
162   - height: 64px !important;
163   -}
164   -.v-tabs__div {
165   - text-transform: none;
166   -}
167   -.v-input__prepend-outer {
168   - margin-right: 0px !important;
169   -}
170   -.v-card__actions .v-btn {
171   - margin: 0 15px;
172   - min-width: 120px;
173   -}
174   -
175   -h4 {
176   - background-repeat: no-repeat;
177   - padding: 8px;
178   - margin: auto;
179   - font-size: 25px;
180   -}
181   -#name {
182   - position: absolute;
183   - left: 100px;
184   - top: 17px;
185   -}
186   -#icon {
187   - position: absolute;
188   - right: 8px;
189   - top: 8px;
190   -}
191   -#m {
192   - position: relative;
193   - left: 135px;
194   - top: -15px;
195   -}
196   -#G {
197   - position: absolute;
198   - top: 38px;
199   - color: white;
200   -}
201   -#bt {
202   - position: relative;
203   - top: -20px;
204   - left: 115px;
205   -}
206   -#e {
207   - position: relative;
208   - top: 5px;
209   - right: -30px;
210   - height: 17px;
211   - cursor: pointer;
212   -}
213   -#d {
214   - position: relative;
215   - top: 5px;
216   - right: -70px;
217   - height: 17px;
218   - cursor: pointer;
219   -}
220   -#indexId {
221   - padding: 0 0px !important;
222   -}
223   -#td {
224   - border: 1px solid #dddddd;
225   - text-align: left;
226   - padding: 8px;
227   -}
228   -#dialog {
229   - height: 550px;
230   -}
231   -#flex {
232   - height: 300px;
233   -}
234   -.top {
235   - margin-top: 100px;
236   -}
237   -.v-tabs__item a {
238   - font-size: 16px !important;
239   -}
240   -@media screen and (max-width: 769px) {
241   - .top {
242   - margin-top: 0 !important;
243   - }
244   - .userSearch .v-icon {
245   - font-size: 20px !important;
246   - margin-left: 20px;
247   - }
248   -}
249   -@media screen and (max-width: 380px) {
250   - .pl-3 {
251   - padding-left: 0px !important;
252   - }
253   - .right {
254   - float: none !important;
255   - }
256   - .subheading {
257   - font-size: 14px !important;
258   - }
259   - .v-card__actions .v-btn {
260   - margin: 0 0px;
261   - min-width: 100px;
262   - }
263   - .subheading {
264   - font-size: 12px !important;
265   - }
266   - h5 {
267   - font-size: 13px;
268   - }
269   -}
270   -.v-icon {
271   - font-size: 30px;
272   -}
273   -@media screen and (min-width: 1270px) {
274   - .hide {
275   - display: none;
276   - }
277   -}
278   -@media screen and (max-width: 420px) {
279   - .userSearch .v-text-field .v-label {
280   - line-height: 24px !important;
281   - }
282   - .userSearch .v-label {
283   - font-size: 13px !important;
284   - }
285   - .v-list__tile {
286   - font-size: 14px;
287   - padding: 0 10px;
288   - }
289   - .name {
290   - font-size: 15px;
291   - }
292   -}
293 169 </style>
294 170 \ No newline at end of file
... ...
src/pages/Event/event.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gary">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -210,7 +210,7 @@
210 210 :search="search"
211 211 >
212 212 <template slot="items" slot-scope="props">
213   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  213 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
214 214 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
215 215 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
216 216 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
... ... @@ -597,7 +597,7 @@ export default {
597 597 max-width: 200px;
598 598 }
599 599 .active {
600   - background-color: black;
  600 + background-color: gary;
601 601 color: white !important;
602 602 }
603 603 .activebtn {
... ...
src/pages/Gallery/gallery.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -302,7 +302,7 @@
302 302 :search="search"
303 303 >
304 304 <template slot="items" slot-scope="props">
305   - <td class="text-xs-center">{{ props.index }}</td>
  305 + <td class="text-xs-center">{{ props.index + 1}}</td>
306 306 <td id="td" class="text-xs-center">
307 307 <span v-for="(image,_id) in props.item.imageUrl" class="pa-2">
308 308 <img :src="image.imageLink" alt="newsImage" width="100" height="70" />
... ... @@ -915,7 +915,7 @@ export default {
915 915 max-width: 200px;
916 916 }
917 917 .active {
918   - background-color: black;
  918 + background-color: gray;
919 919 color: white !important;
920 920 }
921 921 .activebtn {
... ...
src/pages/Holiday/holiday.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -165,7 +165,7 @@
165 165 :search="search"
166 166 >
167 167 <template slot="items" slot-scope="props">
168   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  168 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
169 169 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td>
170 170 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td>
171 171  
... ... @@ -478,7 +478,7 @@ export default {
478 478 max-width: 200px;
479 479 }
480 480 .active {
481   - background-color: black;
  481 + background-color: gray;
482 482 color: white !important;
483 483 }
484 484 .activebtn {
... ...
src/pages/Library/books.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,515 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing Books</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add New Books</v-tab>
  19 +
  20 + <!-- ****** EDIT SECTION ****** -->
  21 + <v-tab-item>
  22 + <v-snackbar
  23 + :timeout="timeout"
  24 + :top="y === 'top'"
  25 + :right="x === 'right'"
  26 + :vertical="mode === 'vertical'"
  27 + v-model="snackbar"
  28 + color="success"
  29 + >{{ text }}</v-snackbar>
  30 + <v-dialog v-model="dialog" max-width="600px">
  31 + <v-toolbar color="grey lighten-2">
  32 + <v-spacer></v-spacer>
  33 + <v-toolbar-title>
  34 + <h3>Edit Books</h3>
  35 + </v-toolbar-title>
  36 + <v-spacer></v-spacer>
  37 + </v-toolbar>
  38 + <v-card>
  39 + <v-card-text>
  40 + <v-container>
  41 + <v-layout wrap justify-center>
  42 + <v-flex xs12 sm9>
  43 + <v-form>
  44 + <v-layout>
  45 + <v-flex xs4 class="pt-4 subheading">
  46 + <label class="right pr-3">Books:</label>
  47 + </v-flex>
  48 + <v-flex xs8>
  49 + <v-text-field
  50 + v-model="editedItem.feeType"
  51 + placeholder="fill your Fee Type"
  52 + required
  53 + ></v-text-field>
  54 + </v-flex>
  55 + </v-layout>
  56 + <v-layout>
  57 + <v-flex xs4 class="pt-4 subheading">
  58 + <label class="right pr-3">Note:</label>
  59 + </v-flex>
  60 + <v-flex xs8>
  61 + <v-textarea
  62 + name="input-7-1"
  63 + v-model="editedItem.note"
  64 + placeholder="fill your Note"
  65 + multi-line
  66 + required
  67 + ></v-textarea>
  68 + </v-flex>
  69 + </v-layout>
  70 + <v-card-actions>
  71 + <v-btn round dark @click.native="close">Cancel</v-btn>
  72 + <v-spacer></v-spacer>
  73 + <v-btn round dark @click="save">Save</v-btn>
  74 + </v-card-actions>
  75 + </v-form>
  76 + </v-flex>
  77 + </v-layout>
  78 + </v-container>
  79 + </v-card-text>
  80 + </v-card>
  81 + </v-dialog>
  82 +
  83 + <!-- ****** PROFILE VIEW BOOKS DATA ****** -->
  84 +
  85 + <v-dialog v-model="dialog1" max-width="600px">
  86 + <v-toolbar color="grey lighten-2">
  87 + <v-spacer></v-spacer>
  88 + <v-toolbar-title>
  89 + <h3>Books</h3>
  90 + </v-toolbar-title>
  91 + <v-spacer></v-spacer>
  92 + <v-icon @click="close1">close</v-icon>
  93 + </v-toolbar>
  94 + <v-card>
  95 + <v-card-text>
  96 + <v-container grid-list-md>
  97 + <v-layout wrap>
  98 + <v-flex>
  99 + <v-layout>
  100 + <v-flex xs5 sm6>
  101 + <h5 class="right my-1">
  102 + <b>Class Name:</b>
  103 + </h5>
  104 + </v-flex>
  105 + <v-flex sm6 xs8>
  106 + <h5 class="my-1">{{ editedItem.feeType }}</h5>
  107 + </v-flex>
  108 + </v-layout>
  109 + <v-layout>
  110 + <v-flex xs5 sm6>
  111 + <h5 class="right my-1">
  112 + <b>Books Name:</b>
  113 + </h5>
  114 + </v-flex>
  115 + <v-flex sm6 xs8>
  116 + <h5 class="my-1">{{ editedItem.note }}</h5>
  117 + </v-flex>
  118 + </v-layout>
  119 + </v-flex>
  120 + </v-layout>
  121 + </v-container>
  122 + </v-card-text>
  123 + </v-card>
  124 + </v-dialog>
  125 +
  126 + <v-snackbar
  127 + :timeout="timeout"
  128 + :top="y === 'top'"
  129 + :right="x === 'right'"
  130 + :vertical="mode === 'vertical'"
  131 + v-model="snackbar"
  132 + color="success"
  133 + >{{ text }}</v-snackbar>
  134 +
  135 + <!-- ****** EXISTING-BOOKS TABLE ****** -->
  136 +
  137 + <v-data-table
  138 + :headers="headers"
  139 + :items="BooksList"
  140 + :pagination.sync="pagination"
  141 + :search="search"
  142 + >
  143 + <template slot="items" slot-scope="props">
  144 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
  145 + <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
  146 + <td id="td" class="text-xs-center">{{ props.item.note }}</td>
  147 + <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
  148 +
  149 + <td class="text-xs-center">
  150 + <span>
  151 + <img
  152 + style="cursor:pointer; width:25px; height:18px; "
  153 + class="mr-5"
  154 + @click="profile(props.item)"
  155 + src="/static/icon/eye1.png"
  156 + />
  157 + <img
  158 + style="cursor:pointer; width:20px; height:18px; "
  159 + class="mr-5"
  160 + @click="editItem(props.item)"
  161 + src="/static/icon/edit1.png"
  162 + />
  163 + <img
  164 + style="cursor:pointer; width:20px; height:20px; "
  165 + class="mr-5"
  166 + @click="deleteItem(props.item)"
  167 + src="/static/icon/delete1.png"
  168 + />
  169 + </span>
  170 + </td>
  171 + </template>
  172 + <v-alert
  173 + slot="no-results"
  174 + :value="true"
  175 + color="error"
  176 + icon="warning"
  177 + >Your search for "{{ search }}" found no results.</v-alert>
  178 + </v-data-table>
  179 + </v-tab-item>
  180 +
  181 + <!-- ****** ADD multiple Students ****** -->
  182 +
  183 + <v-tab-item>
  184 + <v-container>
  185 + <v-snackbar
  186 + :timeout="timeout"
  187 + :top="y === 'top'"
  188 + :right="x === 'right'"
  189 + :vertical="mode === 'vertical'"
  190 + v-model="snackbar"
  191 + color="success"
  192 + >{{ text }}</v-snackbar>
  193 + <v-flex xs12 sm8 offset-sm2 class="top">
  194 + <v-card flat>
  195 + <v-container fluid fill-height>
  196 + <v-layout align-center>
  197 + <v-flex xs12 class="mt-4">
  198 + <v-form ref="form" v-model="valid" lazy-validation>
  199 + <v-layout>
  200 + <v-flex xs4 class="pt-4 subheading">
  201 + <label class="right">Name:</label>
  202 + </v-flex>
  203 + <v-flex xs6 class="ml-3">
  204 + <v-text-field
  205 + v-model="BooksData.name"
  206 + placeholder="fill your Fee Type"
  207 + type="text"
  208 + :rules="nameRules"
  209 + required
  210 + ></v-text-field>
  211 + </v-flex>
  212 + </v-layout>
  213 + <v-layout>
  214 + <v-flex xs4 class="pt-4 subheading">
  215 + <label class="right">Author:</label>
  216 + </v-flex>
  217 + <v-flex xs6 class="ml-3">
  218 + <v-text-field
  219 + v-model="BooksData.author"
  220 + placeholder="fill your Author Name"
  221 + type="text"
  222 + :rules="authorRules"
  223 + required
  224 + ></v-text-field>
  225 + </v-flex>
  226 + </v-layout>
  227 + <v-layout>
  228 + <v-flex xs4 class="pt-4 subheading">
  229 + <label class="right">Subject Code :</label>
  230 + </v-flex>
  231 + <v-flex xs6 class="ml-3">
  232 + <v-text-field
  233 + v-model="BooksData.subjectCode"
  234 + placeholder="fill your Subject Code"
  235 + type="text"
  236 + :rules="subjectRules"
  237 + required
  238 + ></v-text-field>
  239 + </v-flex>
  240 + </v-layout>
  241 + <v-layout>
  242 + <v-flex xs4 class="pt-4 subheading">
  243 + <label class="right">Price:</label>
  244 + </v-flex>
  245 + <v-flex xs6 class="ml-3">
  246 + <v-text-field
  247 + v-model="BooksData.price"
  248 + placeholder="fill your Price"
  249 + :rules="priceRules"
  250 + required
  251 + ></v-text-field>
  252 + </v-flex>
  253 + </v-layout>
  254 + <v-layout>
  255 + <v-flex xs4 class="pt-4 subheading">
  256 + <label class="right">Quantity:</label>
  257 + </v-flex>
  258 + <v-flex xs6 class="ml-3">
  259 + <v-text-field
  260 + v-model="BooksData.quantity"
  261 + placeholder="fill your Quantity"
  262 + :rules="quantityRules"
  263 + required
  264 + ></v-text-field>
  265 + </v-flex>
  266 + </v-layout>
  267 + <v-layout>
  268 + <v-flex xs4 class="pt-4 subheading">
  269 + <label class="right">Rack No:</label>
  270 + </v-flex>
  271 + <v-flex xs6 class="ml-3">
  272 + <v-text-field
  273 + v-model="BooksData.rackNo"
  274 + placeholder="fill your Rack No"
  275 + :rules="rackNoRules"
  276 + required
  277 + ></v-text-field>
  278 + </v-flex>
  279 + </v-layout>
  280 + <v-layout>
  281 + <v-flex xs12 sm9 offset-sm2>
  282 + <v-card-actions>
  283 + <v-btn @click="clear" round dark>clear</v-btn>
  284 + <v-spacer></v-spacer>
  285 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  286 + </v-card-actions>
  287 + </v-flex>
  288 + </v-layout>
  289 + </v-form>
  290 + </v-flex>
  291 + </v-layout>
  292 + </v-container>
  293 + </v-card>
  294 + </v-flex>
  295 + </v-container>
  296 + </v-tab-item>
  297 + </v-tabs>
  298 + <div class="loader" v-if="showLoader">
  299 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  300 + </div>
  301 + </v-app>
  302 +</template>
  303 +
  304 +<script>
  305 +import http from "@/Services/http.js";
  306 +import Util from "@/util";
  307 +
  308 +export default {
  309 + data: () => ({
  310 + snackbar: false,
  311 + y: "top",
  312 + x: "right",
  313 + mode: "",
  314 + timeout: 3000,
  315 + text: "",
  316 + showLoader: false,
  317 + loading: false,
  318 + date: null,
  319 + search: "",
  320 + dialog: false,
  321 + dialog1: false,
  322 + valid: true,
  323 + validEdit: true,
  324 + isActive: true,
  325 + newActive: false,
  326 + AddUsercredentials: {},
  327 + pagination: {
  328 + rowsPerPage: 15
  329 + },
  330 + nameRules: [v => !!v || " Name is required"],
  331 + authorRules: [v => !!v || "Author Name Monthly"],
  332 + subjectRules: [v => !!v || "Subject Code is required"],
  333 + priceRules: [v => !!v || "Price is required"],
  334 + quantityRules: [v => !!v || "Quantity is required"],
  335 + rackNoRules: [v => !!v || "Rack No. is required"],
  336 +
  337 +
  338 + headers: [
  339 + {
  340 + text: "No",
  341 + align: "center",
  342 + sortable: false,
  343 + value: "No"
  344 + },
  345 + {
  346 + text: "Name",
  347 + value: "name",
  348 + sortable: false,
  349 + align: "center"
  350 + },
  351 + { text: "Authour", value: "note", sortable: false, align: "center" },
  352 + { text: "Subject Code", value: "subjectCode", sortable: false, align: "center" },
  353 + { text: "Price", value: "price", sortable: false, align: "center" },
  354 + { text: "Quantity", value: "quantity", sortable: false, align: "center" },
  355 + { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
  356 + { text: "Status", value: "status", sortable: false, align: "center" },
  357 +
  358 + // { text: "Session", value: "session", sortable: false, align: "center" },
  359 + { text: "Action", value: "", sortable: false, align: "center" }
  360 + ],
  361 + BooksList: [],
  362 + select: "",
  363 + token: "",
  364 + editedItem: {},
  365 + BooksData: {}
  366 + }),
  367 + methods: {
  368 + getFeeTypeList() {
  369 + this.showLoader = true;
  370 + http()
  371 + .get("/getFeesList", {
  372 + headers: { Authorization: "Bearer " + this.token }
  373 + })
  374 + .then(response => {
  375 + this.feeTypeList = response.data.data;
  376 + this.showLoader = false;
  377 + // console.log("getAllfeetypes=====>",response.data.data)
  378 + })
  379 + .catch(err => {
  380 + // console.log("err====>", err);
  381 + this.showLoader = false;
  382 + if (error.response.status === 401) {
  383 + this.$router.replace({ path: "/" });
  384 + this.$store.dispatch("setToken", null);
  385 + this.$store.dispatch("Id", null);
  386 + }
  387 + });
  388 + },
  389 + editItem(item) {
  390 + this.editedIndex = this.feeTypeList.indexOf(item);
  391 + this.editedItem = Object.assign({}, item);
  392 + console.log(this.editedItem);
  393 + this.dialog = true;
  394 + },
  395 + profile(item) {
  396 + this.editedIndex = this.feeTypeList.indexOf(item);
  397 + this.editedItem = Object.assign({}, item);
  398 + this.dialog1 = true;
  399 + },
  400 + deleteItem(item) {
  401 + let deleteStudent = {
  402 + feeId: item._id
  403 + };
  404 + http()
  405 + .delete(
  406 + "/deleteFee",
  407 + confirm("Are you sure you want to delete this?") && {
  408 + params: deleteStudent
  409 + }
  410 + )
  411 + .then(response => {
  412 + if ((this.snackbar = true)) {
  413 + this.text = "Successfully delete Existing feetype";
  414 + }
  415 + this.getFeeTypeList();
  416 + })
  417 + .catch(error => {
  418 + // console.log(error);
  419 + });
  420 + },
  421 + activeTab(type) {
  422 + switch (type) {
  423 + case "existing":
  424 + this.newActive = false;
  425 + this.isActive = true;
  426 + break;
  427 +
  428 + default:
  429 + this.newActive = true;
  430 + this.isActive = false;
  431 + break;
  432 + }
  433 + },
  434 + close() {
  435 + this.dialog = false;
  436 + setTimeout(() => {
  437 + this.editedItem = Object.assign({}, this.defaultItem);
  438 + this.editedIndex = -1;
  439 + }, 300);
  440 + },
  441 + close1() {
  442 + this.dialog1 = false;
  443 + },
  444 + close2() {
  445 + this.dialog2 = false;
  446 + },
  447 + submit() {
  448 + if (this.$refs.form.validate()) {
  449 + this.loading = true;
  450 + http()
  451 + .post("/createFee", this.feeTypeData)
  452 + .then(response => {
  453 + console.log(response);
  454 + this.getFeeTypeList();
  455 + if ((this.snackbar = true)) {
  456 + this.text = "New feetype added successfully";
  457 + }
  458 +
  459 + this.clear();
  460 + this.loading = false;
  461 + })
  462 + .catch(error => {
  463 + // console.log(error);
  464 + if ((this.snackbar = true)) {
  465 + this.text = error.response.data.message;
  466 + }
  467 + this.loading = false;
  468 + });
  469 + }
  470 + },
  471 + clear() {
  472 + this.$refs.form.reset();
  473 + },
  474 + save() {
  475 + this.editedItem.feeId = this.editedItem._id;
  476 + http()
  477 + .put("/updateFee", this.editedItem)
  478 + .then(response => {
  479 + if ((this.snackbar = true)) {
  480 + this.text = "Successfully Edit Existing Fee Type";
  481 + }
  482 + this.getFeeTypeList();
  483 + this.close();
  484 + })
  485 + .catch(error => {
  486 + this.text = error.response.data.message;
  487 + // console.log(error);
  488 + });
  489 + }
  490 + },
  491 + mounted() {
  492 + this.token = this.$store.state.token;
  493 + this.getFeeTypeList();
  494 + },
  495 + created() {
  496 + this.$root.$on("app:search", search => {
  497 + this.search = search;
  498 + });
  499 + },
  500 + beforeDestroy() {
  501 + // dont forget to remove the listener
  502 + this.$root.$off("app:search");
  503 + }
  504 +};
  505 +</script>
  506 +
  507 +<style scoped>
  508 +.active {
  509 + background-color: gray;
  510 + color: white !important;
  511 +}
  512 +.activebtn {
  513 + color: black !important;
  514 +}
  515 +</style>
0 516 \ No newline at end of file
... ...
src/pages/Library/eBook.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,724 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing E-Books</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add E-Books</v-tab>
  19 +
  20 + <!-- ****** EDITS ALL NEWS DETAILS ****** -->
  21 +
  22 + <v-tab-item>
  23 + <v-snackbar
  24 + :timeout="timeout"
  25 + :top="y === 'top'"
  26 + :right="x === 'right'"
  27 + :vertical="mode === 'vertical'"
  28 + v-model="snackbar"
  29 + color="success"
  30 + >{{ text }}</v-snackbar>
  31 + <v-dialog v-model="dialog" max-width="1000px" scrollable>
  32 + <v-card flat>
  33 + <v-toolbar class="grey lighten-2" flat>
  34 + <v-spacer></v-spacer>
  35 + <v-toolbar-title>
  36 + <h3>Edit E-Books</h3>
  37 + </v-toolbar-title>
  38 + <v-spacer></v-spacer>
  39 + </v-toolbar>
  40 + <v-card-text style="height:600px;">
  41 + <v-form ref="form">
  42 + <v-container fluid>
  43 + <v-layout row>
  44 + <v-flex
  45 + xs12
  46 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  47 + >
  48 + <input
  49 + type="file"
  50 + style="display: none"
  51 + ref="image"
  52 + accept="image/*"
  53 + multiple
  54 + @change="onFilePicked"
  55 + />
  56 + <v-layout justify-center>
  57 + <v-flex
  58 + xs3
  59 + v-for="Image in editedItem.newsImageUrl"
  60 + :key="Image._id"
  61 + v-if="editedItem.newsImageUrl"
  62 + class="profile-image-wrapper"
  63 + >
  64 + <img
  65 + :src="Image.imageUrl"
  66 + height="160"
  67 + width="160"
  68 + alt="eBooks"
  69 + class="pa-2"
  70 + />
  71 + <v-icon
  72 + class="red edit-profile-icon"
  73 + dark
  74 + @click="deleteImage(Image._id,editedItem._id)"
  75 + >close</v-icon>
  76 + </v-flex>
  77 + <v-flex v-for="(file, index) in files" :key="index">
  78 + <img :src="file" height="160" width="160" class="pa-2" />
  79 + </v-flex>
  80 + </v-layout>
  81 + <img
  82 + src="/static/icon/user.png"
  83 + v-if="editedItem.newsImageUrl ==''"
  84 + height="160"
  85 + width="160"
  86 + alt="Books"
  87 + />
  88 + </v-flex>
  89 + </v-layout>
  90 + <!-- </v-layout> -->
  91 + <v-layout>
  92 + <v-flex xs12 sm12>
  93 + <v-layout>
  94 + <v-flex xs4 class="pt-4 subheading">
  95 + <label class="right">Title:</label>
  96 + </v-flex>
  97 + <v-flex xs5 class="ml-3">
  98 + <v-text-field
  99 + v-model="editedItem.title"
  100 + placeholder="fill your Title"
  101 + name="name"
  102 + type="text"
  103 + required
  104 + ></v-text-field>
  105 + </v-flex>
  106 + </v-layout>
  107 + </v-flex>
  108 + <v-flex xs12 sm12>
  109 + <v-layout>
  110 + <v-flex xs4 class="pt-4 subheading">
  111 + <label class="right">Description:</label>
  112 + </v-flex>
  113 + <v-flex xs5 class="ml-3">
  114 + <v-text-field
  115 + placeholder="fill your Description"
  116 + v-model="editedItem.description"
  117 + type="text"
  118 + name="email"
  119 + required
  120 + ></v-text-field>
  121 + </v-flex>
  122 + </v-layout>
  123 + </v-flex>
  124 + <v-flex xs12>
  125 + <v-layout>
  126 + <v-flex xs4 class="pt-4 subheading">
  127 + <label class="right">Add New Images:</label>
  128 + </v-flex>
  129 + <v-flex xs5 class="ml-3">
  130 + <v-text-field
  131 + label="Select Image"
  132 + @click="pickFile"
  133 + v-model="imageName"
  134 + append-icon="attach_file"
  135 + multiple
  136 + ></v-text-field>
  137 + </v-flex>
  138 + </v-layout>
  139 + </v-flex>
  140 + </v-layout>
  141 + <v-layout>
  142 + <v-flex xs12 sm8 offset-sm2>
  143 + <v-card-actions>
  144 + <v-btn round dark @click.native="close">Cancel</v-btn>
  145 + <v-spacer></v-spacer>
  146 + <v-btn round dark @click="save">Save</v-btn>
  147 + </v-card-actions>
  148 + </v-flex>
  149 + </v-layout>
  150 + </v-container>
  151 + </v-form>
  152 + </v-card-text>
  153 + </v-card>
  154 + </v-dialog>
  155 +
  156 + <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
  157 +
  158 + <v-dialog v-model="dialog1" max-width="800px">
  159 + <v-card>
  160 + <v-toolbar color="grey lighten-2" flat>
  161 + <v-spacer></v-spacer>
  162 + <v-toolbar-title>
  163 + <h3>E-Books</h3>
  164 + </v-toolbar-title>
  165 + <v-spacer></v-spacer>
  166 + <v-icon @click="close1">close</v-icon>
  167 + </v-toolbar>
  168 + <v-flex align-center justify-center layout text-xs-center>
  169 + <!-- <v-avatar size="50px" style="position:absolute; top:20px;">
  170 + <img src="/static/icon/user.png">
  171 + </v-avatar>-->
  172 + <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
  173 + <img :src="image.imageUrl" alt="eBooks" width="240" height="180" />
  174 + </span>
  175 + </v-flex>
  176 + <v-card-text>
  177 + <v-container grid-list-md>
  178 + <v-layout wrap>
  179 + <v-flex>
  180 + <v-layout>
  181 + <v-flex xs5 sm6>
  182 + <h5 class="right my-1">
  183 + <b>Title:</b>
  184 + </h5>
  185 + </v-flex>
  186 + <v-flex sm6 xs8>
  187 + <h5 class="my-1">{{ editedItem.title }}</h5>
  188 + </v-flex>
  189 + </v-layout>
  190 + <v-layout>
  191 + <v-flex xs5 sm6>
  192 + <h5 class="right my-1">
  193 + <b>Description:</b>
  194 + </h5>
  195 + </v-flex>
  196 + <v-flex sm6 xs8>
  197 + <h5 class="my-1">{{ editedItem.description }}</h5>
  198 + </v-flex>
  199 + </v-layout>
  200 + </v-flex>
  201 + </v-layout>
  202 + </v-container>
  203 + </v-card-text>
  204 + </v-card>
  205 + </v-dialog>
  206 +
  207 + <v-snackbar
  208 + :timeout="timeout"
  209 + :top="y === 'top'"
  210 + :right="x === 'right'"
  211 + :vertical="mode === 'vertical'"
  212 + v-model="snackbar"
  213 + color="success"
  214 + >{{ text }}</v-snackbar>
  215 +
  216 + <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
  217 + <v-data-table
  218 + :headers="headers"
  219 + :items="desserts"
  220 + :pagination.sync="pagination"
  221 + :search="search"
  222 + >
  223 + <template slot="items" slot-scope="props">
  224 + <td class="text-xs-center">{{ props.index + 1}}</td>
  225 + <td id="td" class="text-xs-center">
  226 + <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
  227 + <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
  228 + </span>
  229 + </td>
  230 + <td id="td" class="text-xs-center">{{ props.item.title}}</td>
  231 + <td id="td" class="text-xs-center">{{ props.item.description}}</td>
  232 +
  233 + <td class="text-xs-center">
  234 + <span>
  235 + <img
  236 + style="cursor:pointer; width:25px; height:18px; "
  237 + class="mr-5"
  238 + @click="profile(props.item)"
  239 + src="/static/icon/eye1.png"
  240 + />
  241 + <img
  242 + style="cursor:pointer; width:20px; height:18px; "
  243 + class="mr-5"
  244 + @click="editItem(props.item)"
  245 + src="/static/icon/edit1.png"
  246 + />
  247 + <img
  248 + style="cursor:pointer;width:20px; height:20px; "
  249 + class="mr-5"
  250 + @click="deleteItem(props.item)"
  251 + src="/static/icon/delete1.png"
  252 + />
  253 + </span>
  254 + </td>
  255 + </template>
  256 + <v-alert
  257 + slot="no-results"
  258 + :value="true"
  259 + color="error"
  260 + icon="warning"
  261 + >Your search for "{{ search }}" found no results.</v-alert>
  262 + </v-data-table>
  263 + </v-tab-item>
  264 +
  265 + <!-- ****** ADD MULTIPLE NEWS ****** -->
  266 +
  267 + <v-tab-item>
  268 + <v-container>
  269 + <v-snackbar
  270 + :timeout="timeout"
  271 + :top="y === 'top'"
  272 + :right="x === 'right'"
  273 + :vertical="mode === 'vertical'"
  274 + v-model="snackbar"
  275 + color="success"
  276 + >{{ text }}</v-snackbar>
  277 + <v-flex xs12 sm12 class="my-4">
  278 + <v-card flat>
  279 + <v-form ref="form" v-model="valid" lazy-validation>
  280 + <v-container fluid>
  281 + <v-layout>
  282 + <v-flex
  283 + xs12
  284 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  285 + >
  286 + <input
  287 + type="file"
  288 + style="display: none"
  289 + ref="image"
  290 + accept="image/*"
  291 + multiple
  292 + @change="onFilePicked"
  293 + />
  294 + <v-layout justify-center>
  295 + <v-flex v-for="(file,index) in files" :key="index" v-if="files">
  296 + <img :src="file" height="160" width="160px;" />
  297 + </v-flex>
  298 + </v-layout>
  299 + <img
  300 + src="/static/icon/user.png"
  301 + v-if="files ==''"
  302 + height="140"
  303 + width="180px;"
  304 + />
  305 + </v-flex>
  306 + </v-layout>
  307 + <v-flex xs12>
  308 + <v-layout>
  309 + <v-flex xs4 class="pt-4 subheading">
  310 + <label class="right">Name:</label>
  311 + </v-flex>
  312 + <v-flex xs4 class="ml-3">
  313 + <v-text-field
  314 + v-model="addEBooks.name"
  315 + placeholder="fill your Title"
  316 + name="name"
  317 + type="text"
  318 + :rules="titleRules"
  319 + required
  320 + ></v-text-field>
  321 + </v-flex>
  322 + </v-layout>
  323 + </v-flex>
  324 + <v-flex xs12>
  325 + <v-layout>
  326 + <v-flex xs4 class="pt-4 subheading">
  327 + <label class="right">Author:</label>
  328 + </v-flex>
  329 + <v-flex xs4 class="ml-3">
  330 + <v-text-field
  331 + v-model="addEBooks.author"
  332 + placeholder="fill your Author Name"
  333 + name="name"
  334 + type="text"
  335 + :rules="titleRules"
  336 + required
  337 + ></v-text-field>
  338 + </v-flex>
  339 + </v-layout>
  340 + </v-flex>
  341 + <v-flex xs12>
  342 + <v-layout>
  343 + <v-flex xs4 class="pt-4 subheading">
  344 + <label class="right">Class:</label>
  345 + </v-flex>
  346 + <v-flex xs4 class="ml-3">
  347 + <v-select
  348 + v-model="addEBooks.class"
  349 + :items="addClass"
  350 + label="Select Class"
  351 + name="name"
  352 + type="text"
  353 + :rules="titleRules"
  354 + required
  355 + ></v-select>
  356 + </v-flex>
  357 + </v-layout>
  358 + </v-flex>
  359 + <!-- <v-flex xs12>
  360 + <v-layout>
  361 + <v-flex xs4 class="pt-4 subheading">
  362 + <label class="right">Private:</label>
  363 + </v-flex>
  364 + <v-flex xs4 class="ml-3">
  365 + <v-text-field
  366 + v-model="addEBooks.private"
  367 + placeholder="fill your Private Name"
  368 + name="name"
  369 + type="text"
  370 + :rules="titleRules"
  371 + required
  372 + ></v-text-field>
  373 + </v-flex>
  374 + </v-layout>
  375 + </v-flex> -->
  376 + <v-flex xs12>
  377 + <v-layout>
  378 + <v-flex xs4 class="pt-4 subheading">
  379 + <label class="right">Uplaod Image:</label>
  380 + </v-flex>
  381 + <v-flex xs4 class="ml-3">
  382 + <v-text-field
  383 + label="Select Image"
  384 + @click="pickFile"
  385 + v-model="imageName"
  386 + append-icon="attach_file"
  387 + multiple
  388 + ></v-text-field>
  389 + </v-flex>
  390 + </v-layout>
  391 + </v-flex>
  392 + <v-layout>
  393 + <v-flex xs12 sm6 offset-sm3>
  394 + <v-card-actions>
  395 + <v-btn @click="clear" round dark>clear</v-btn>
  396 + <v-spacer></v-spacer>
  397 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  398 + </v-card-actions>
  399 + </v-flex>
  400 + </v-layout>
  401 + </v-container>
  402 + </v-form>
  403 + </v-card>
  404 + </v-flex>
  405 + </v-container>
  406 + </v-tab-item>
  407 + </v-tabs>
  408 + <div class="loader" v-if="showLoader">
  409 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  410 + </div>
  411 + </v-app>
  412 +</template>
  413 +
  414 +<script>
  415 +import http from "@/Services/http.js";
  416 +import Util from "@/util";
  417 +
  418 +export default {
  419 + data: () => ({
  420 + snackbar: false,
  421 + y: "top",
  422 + x: "right",
  423 + mode: "",
  424 + timeout: 3000,
  425 + text: "",
  426 + loading: false,
  427 + date: null,
  428 + search: "",
  429 + showLoader: false,
  430 + dialog: false,
  431 + dialog1: false,
  432 + valid: true,
  433 + isActive: true,
  434 + newActive: false,
  435 + addclass: [],
  436 + addSection: [],
  437 + AddUsercredentials: {},
  438 + pagination: {
  439 + rowsPerPage: 15
  440 + },
  441 + imageName: "",
  442 + imageUrl: "",
  443 + imageFile: "",
  444 + image: [],
  445 + upload: "",
  446 + files: [],
  447 + titleRules: [v => !!v || " Tilte is required"],
  448 + descriptionRules: [v => !!v || " Description is required"],
  449 + headers: [
  450 + {
  451 + align: "justify-center",
  452 + text: "No",
  453 + sortable: false,
  454 + value: "No"
  455 + },
  456 + { text: "Image", vaue: "image", sortable: false, align: "center" },
  457 + { text: "Title", value: "title", sortable: false, align: "center" },
  458 + {
  459 + text: "Description",
  460 + value: "description",
  461 + sortable: false,
  462 + align: "center"
  463 + },
  464 + { text: "Action", value: "", sortable: false, align: "center" }
  465 + ],
  466 + desserts: [],
  467 + editedIndex: -1,
  468 + addEBooks: {},
  469 + editedItem: {}
  470 + }),
  471 + methods: {
  472 + getSections(_id) {
  473 + console.log("_id", _id);
  474 + var token = this.$store.state.token;
  475 + http()
  476 + .get(
  477 + "/getSectionsList",
  478 + { params: { classId: _id } },
  479 + {
  480 + headers: { Authorization: "Bearer " + token }
  481 + }
  482 + )
  483 + .then(response => {
  484 + this.addSection = response.data.data;
  485 + // console.log("getSectionsList=====>", this.addSection);
  486 + })
  487 + .catch(err => {
  488 + console.log("err====>", err);
  489 + // this.$router.replace({ path: '/' });
  490 + });
  491 + },
  492 + pickFile() {
  493 + this.$refs.image.click();
  494 + },
  495 + onFilePicked(e) {
  496 + // console.log(e)
  497 + const files = e.target.files;
  498 + /** fetch Image Name **/
  499 + if (files[0] !== undefined) {
  500 + this.imageName = files[0].name;
  501 + if (this.imageName.lastIndexOf(".") <= 0) {
  502 + return;
  503 + }
  504 + this.files = [];
  505 + // console.log("files", this.files);
  506 + /** Select many image and showing many image add to news card **/
  507 + const test = Array.from(files).forEach((file, idx) => {
  508 + const fr = new FileReader();
  509 + const getResult = new Promise(resolve => {
  510 + fr.onload = e => {
  511 + this.files.push(
  512 + // id: idx,
  513 + e.target.result
  514 + );
  515 + };
  516 + });
  517 + fr.readAsDataURL(file);
  518 + return getResult.then(file => {
  519 + return file;
  520 + });
  521 + });
  522 + const fr = new FileReader();
  523 + fr.readAsDataURL(files[0]);
  524 + fr.addEventListener("load", () => {
  525 + this.imageFile = files; // this is an image file that can be sent to server...
  526 + // console.log("uploadImage=======>", this.imageFile );
  527 + });
  528 + } else {
  529 + this.imageName = "";
  530 + this.imageFile = "";
  531 + this.imageUrl = "";
  532 + }
  533 + },
  534 + getNewsList() {
  535 + this.showLoader = true;
  536 + var token = this.$store.state.token;
  537 + http()
  538 + .get("/getNewsList", {
  539 + headers: { Authorization: "Bearer " + token }
  540 + })
  541 + .then(response => {
  542 + this.desserts = response.data.data;
  543 + this.showLoader = false;
  544 + // console.log("getNewsList=====>",this.desserts)
  545 + })
  546 + .catch(err => {
  547 + // console.log("err====>", err);
  548 + this.showLoader = false;
  549 + if (error.response.status === 401) {
  550 + this.$router.replace({ path: "/" });
  551 + this.$store.dispatch("setToken", null);
  552 + this.$store.dispatch("Id", null);
  553 + }
  554 + });
  555 + },
  556 + editItem(item) {
  557 + this.files = [];
  558 + this.editedIndex = this.desserts.indexOf(item);
  559 + this.editedItem = Object.assign({}, item);
  560 + this.dialog = true;
  561 + },
  562 + profile(item) {
  563 + this.editedIndex = this.desserts.indexOf(item);
  564 + this.editedItem = Object.assign({}, item);
  565 + this.dialog1 = true;
  566 + },
  567 + deleteItem(item) {
  568 + let deleteNews = {
  569 + newsId: item._id
  570 + };
  571 + http()
  572 + .delete(
  573 + "/deleteNews",
  574 + confirm("Are you sure you want to delete this?") && {
  575 + params: deleteNews
  576 + }
  577 + )
  578 + .then(response => {
  579 + // console.log("deleteNews",deleteNews)
  580 + if ((this.snackbar = true)) {
  581 + this.text = "Successfully delete Existing News";
  582 + }
  583 + this.getNewsList();
  584 + })
  585 + .catch(error => {
  586 + // console.log(error);
  587 + });
  588 + },
  589 + deleteImage(imageId, newsId) {
  590 + console.log(imageId, newsId);
  591 + let deleteImages = {
  592 + newsId: newsId,
  593 + imageId: imageId
  594 + };
  595 + http()
  596 + .put("/deleteImages", deleteImages)
  597 + .then(response => {
  598 + console.log("deleteNews", deleteImages);
  599 + if ((this.snackbar = true)) {
  600 + this.text = "Image deleted Successfully";
  601 + }
  602 + this.getNewsList();
  603 + this.close();
  604 + })
  605 + .catch(error => {
  606 + console.log(error);
  607 + });
  608 + },
  609 + activeTab(type) {
  610 + switch (type) {
  611 + case "existing":
  612 + this.newActive = false;
  613 + this.isActive = true;
  614 + break;
  615 +
  616 + default:
  617 + this.newActive = true;
  618 + this.isActive = false;
  619 + break;
  620 + }
  621 + },
  622 + close() {
  623 + this.dialog = false;
  624 + setTimeout(() => {
  625 + this.editedItem = Object.assign({}, this.defaultItem);
  626 + this.editedIndex = -1;
  627 + }, 300);
  628 + },
  629 + close1() {
  630 + this.dialog1 = false;
  631 + },
  632 + submit() {
  633 + this.loading = true;
  634 + if (this.$refs.form.validate()) {
  635 + let newsData = {
  636 + title: this.addNews.title,
  637 + description: this.addNews.description
  638 + };
  639 + if (this.files) {
  640 + var ary = [];
  641 + var imageData = [];
  642 + ary = this.files;
  643 + for (let i = 0; i < ary.length; i++) {
  644 + const [baseUrl, imageUrl] = ary[i].split(/,/);
  645 + imageData.push(imageUrl);
  646 + newsData.upload = imageData;
  647 + }
  648 + }
  649 + http()
  650 + .post("/createNews", newsData)
  651 + .then(response => {
  652 + console.log(newsData);
  653 + if ((this.snackbar = true)) {
  654 + this.text = "New News added successfully";
  655 + }
  656 + this.getNewsList();
  657 + this.loading = false;
  658 + this.clear();
  659 + })
  660 + .catch(error => {
  661 + if ((this.snackbar = true)) {
  662 + this.text = error.response.data.message;
  663 + }
  664 + });
  665 + }
  666 + },
  667 + clear() {
  668 + this.$refs.form.reset();
  669 + },
  670 + save() {
  671 + let editNews = {
  672 + title: this.editedItem.title,
  673 + description: this.editedItem.description,
  674 + newsId: this.editedItem._id
  675 + };
  676 + if (this.files) {
  677 + var ary = [];
  678 + var imageData = [];
  679 + ary = this.files;
  680 + for (let i = 0; i < ary.length; i++) {
  681 + const [baseUrl, imageUrl] = ary[i].split(/,/);
  682 + imageData.push(imageUrl);
  683 + editNews.upload = imageData;
  684 + }
  685 + }
  686 + http()
  687 + .put("/updateNews", editNews)
  688 + .then(response => {
  689 + // console.log("updateNews",updateNews);
  690 + if ((this.snackbar = true)) {
  691 + this.text = "Successfully Edit Existing News";
  692 + }
  693 + this.getNewsList();
  694 + this.close();
  695 + })
  696 + .catch(error => {
  697 + // console.log(error);
  698 + });
  699 + }
  700 + },
  701 + mounted() {
  702 + this.getNewsList();
  703 + this.editItem;
  704 + },
  705 + created() {
  706 + this.$root.$on("app:search", search => {
  707 + this.search = search;
  708 + });
  709 + },
  710 + beforeDestroy() {
  711 + // dont forget to remove the listener
  712 + this.$root.$off("app:search");
  713 + }
  714 +};
  715 +</script>
  716 +<style scoped>
  717 +.active {
  718 + background-color: gray;
  719 + color: white !important;
  720 +}
  721 +.activebtn {
  722 + color: black !important;
  723 +}
  724 +</style>
0 725 \ No newline at end of file
... ...
src/pages/Library/issue.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,686 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing Issue</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add Issue</v-tab>
  19 +
  20 + <!-- ****** EDITS ALL NEWS DETAILS ****** -->
  21 +
  22 + <v-tab-item>
  23 + <v-snackbar
  24 + :timeout="timeout"
  25 + :top="y === 'top'"
  26 + :right="x === 'right'"
  27 + :vertical="mode === 'vertical'"
  28 + v-model="snackbar"
  29 + color="success"
  30 + >{{ text }}</v-snackbar>
  31 + <v-dialog v-model="dialog" max-width="1000px" scrollable>
  32 + <v-card flat>
  33 + <v-toolbar class="grey lighten-2" flat>
  34 + <v-spacer></v-spacer>
  35 + <v-toolbar-title>
  36 + <h3>Edit Issue</h3>
  37 + </v-toolbar-title>
  38 + <v-spacer></v-spacer>
  39 + </v-toolbar>
  40 + <v-card-text style="height:600px;">
  41 + <v-form ref="form">
  42 + <v-container fluid>
  43 + <!-- <v-layout row>
  44 + <v-flex
  45 + xs12
  46 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  47 + >
  48 + <input
  49 + type="file"
  50 + style="display: none"
  51 + ref="image"
  52 + accept="image/*"
  53 + multiple
  54 + @change="onFilePicked"
  55 + />
  56 + <v-layout justify-center>
  57 + <v-flex
  58 + xs3
  59 + v-for="Image in editedItem.newsImageUrl"
  60 + :key="Image._id"
  61 + v-if="editedItem.newsImageUrl"
  62 + class="profile-image-wrapper"
  63 + >
  64 + <img
  65 + :src="Image.imageUrl"
  66 + height="160"
  67 + width="160"
  68 + alt="Issue"
  69 + class="pa-2"
  70 + />
  71 + <v-icon
  72 + class="red edit-profile-icon"
  73 + dark
  74 + @click="deleteImage(Image._id,editedItem._id)"
  75 + >close</v-icon>
  76 + </v-flex>
  77 + <v-flex v-for="(file, index) in files" :key="index">
  78 + <img :src="file" height="160" width="160" class="pa-2" />
  79 + </v-flex>
  80 + </v-layout>
  81 + <img
  82 + src="/static/icon/user.png"
  83 + v-if="editedItem.newsImageUrl ==''"
  84 + height="160"
  85 + width="160"
  86 + alt="Issue"
  87 + />
  88 + </v-flex>
  89 + </v-layout>-->
  90 + <v-layout>
  91 + <v-flex xs12 sm12>
  92 + <v-layout>
  93 + <v-flex xs4 class="pt-4 subheading">
  94 + <label class="right">Title:</label>
  95 + </v-flex>
  96 + <v-flex xs5 class="ml-3">
  97 + <v-text-field
  98 + v-model="editedItem.title"
  99 + placeholder="fill your Title"
  100 + name="name"
  101 + type="text"
  102 + required
  103 + ></v-text-field>
  104 + </v-flex>
  105 + </v-layout>
  106 + </v-flex>
  107 + <v-flex xs12 sm12>
  108 + <v-layout>
  109 + <v-flex xs4 class="pt-4 subheading">
  110 + <label class="right">Description:</label>
  111 + </v-flex>
  112 + <v-flex xs5 class="ml-3">
  113 + <v-text-field
  114 + placeholder="fill your Description"
  115 + v-model="editedItem.description"
  116 + type="text"
  117 + name="email"
  118 + required
  119 + ></v-text-field>
  120 + </v-flex>
  121 + </v-layout>
  122 + </v-flex>
  123 + <v-flex xs12>
  124 + <v-layout>
  125 + <v-flex xs4 class="pt-4 subheading">
  126 + <label class="right">Add New Images:</label>
  127 + </v-flex>
  128 + <v-flex xs5 class="ml-3">
  129 + <!-- <v-text-field
  130 + label="Select Image"
  131 + @click="pickFile"
  132 + v-model="imageName"
  133 + append-icon="attach_file"
  134 + multiple
  135 + ></v-text-field>-->
  136 + </v-flex>
  137 + </v-layout>
  138 + </v-flex>
  139 + </v-layout>
  140 + <v-layout>
  141 + <v-flex xs12 sm8 offset-sm2>
  142 + <v-card-actions>
  143 + <v-btn round dark @click.native="close">Cancel</v-btn>
  144 + <v-spacer></v-spacer>
  145 + <v-btn round dark @click="save">Save</v-btn>
  146 + </v-card-actions>
  147 + </v-flex>
  148 + </v-layout>
  149 + </v-container>
  150 + </v-form>
  151 + </v-card-text>
  152 + </v-card>
  153 + </v-dialog>
  154 +
  155 + <!-- ****** PROFILE VIEW ALL Issue DEATILS ****** -->
  156 +
  157 + <v-dialog v-model="dialog1" max-width="800px">
  158 + <v-card>
  159 + <v-toolbar color="grey lighten-2" flat>
  160 + <v-spacer></v-spacer>
  161 + <v-toolbar-title>
  162 + <h3>Issue</h3>
  163 + </v-toolbar-title>
  164 + <v-spacer></v-spacer>
  165 + <v-icon @click="close1">close</v-icon>
  166 + </v-toolbar>
  167 + <!-- <v-flex align-center justify-center layout text-xs-center>
  168 + <v-avatar size="50px" style="position:absolute; top:20px;">
  169 + <img src="/static/icon/user.png">
  170 + </v-avatar>
  171 + <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
  172 + <img :src="image.imageUrl" alt="Issue" width="240" height="180" />
  173 + </span>
  174 + </v-flex>-->
  175 + <v-card-text>
  176 + <v-container grid-list-md>
  177 + <v-layout wrap>
  178 + <v-flex>
  179 + <v-layout>
  180 + <v-flex xs5 sm6>
  181 + <h5 class="right my-1">
  182 + <b>Title:</b>
  183 + </h5>
  184 + </v-flex>
  185 + <v-flex sm6 xs8>
  186 + <h5 class="my-1">{{ editedItem.title }}</h5>
  187 + </v-flex>
  188 + </v-layout>
  189 + <v-layout>
  190 + <v-flex xs5 sm6>
  191 + <h5 class="right my-1">
  192 + <b>Description:</b>
  193 + </h5>
  194 + </v-flex>
  195 + <v-flex sm6 xs8>
  196 + <h5 class="my-1">{{ editedItem.description }}</h5>
  197 + </v-flex>
  198 + </v-layout>
  199 + </v-flex>
  200 + </v-layout>
  201 + </v-container>
  202 + </v-card-text>
  203 + </v-card>
  204 + </v-dialog>
  205 +
  206 + <v-snackbar
  207 + :timeout="timeout"
  208 + :top="y === 'top'"
  209 + :right="x === 'right'"
  210 + :vertical="mode === 'vertical'"
  211 + v-model="snackbar"
  212 + color="success"
  213 + >{{ text }}</v-snackbar>
  214 +
  215 + <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
  216 + <v-data-table
  217 + :headers="headers"
  218 + :items="desserts"
  219 + :pagination.sync="pagination"
  220 + :search="search"
  221 + >
  222 + <template slot="items" slot-scope="props">
  223 + <td class="text-xs-center">{{ props.index + 1}}</td>
  224 + <!-- <td id="td" class="text-xs-center">
  225 + <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
  226 + <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
  227 + </span>
  228 + </td>-->
  229 + <td id="td" class="text-xs-center">{{ props.item.title}}</td>
  230 + <td id="td" class="text-xs-center">{{ props.item.description}}</td>
  231 +
  232 + <td class="text-xs-center">
  233 + <span>
  234 + <img
  235 + style="cursor:pointer; width:25px; height:18px; "
  236 + class="mr-5"
  237 + @click="profile(props.item)"
  238 + src="/static/icon/eye1.png"
  239 + />
  240 + <img
  241 + style="cursor:pointer; width:20px; height:18px; "
  242 + class="mr-5"
  243 + @click="editItem(props.item)"
  244 + src="/static/icon/edit1.png"
  245 + />
  246 + <img
  247 + style="cursor:pointer;width:20px; height:20px; "
  248 + class="mr-5"
  249 + @click="deleteItem(props.item)"
  250 + src="/static/icon/delete1.png"
  251 + />
  252 + </span>
  253 + </td>
  254 + </template>
  255 + <v-alert
  256 + slot="no-results"
  257 + :value="true"
  258 + color="error"
  259 + icon="warning"
  260 + >Your search for "{{ search }}" found no results.</v-alert>
  261 + </v-data-table>
  262 + </v-tab-item>
  263 +
  264 + <!-- ****** ADD MULTIPLE NEWS ****** -->
  265 +
  266 + <v-tab-item>
  267 + <v-container>
  268 + <v-snackbar
  269 + :timeout="timeout"
  270 + :top="y === 'top'"
  271 + :right="x === 'right'"
  272 + :vertical="mode === 'vertical'"
  273 + v-model="snackbar"
  274 + color="success"
  275 + >{{ text }}</v-snackbar>
  276 + <v-flex xs12 sm12 class="my-4">
  277 + <v-card flat>
  278 + <v-form ref="form" v-model="valid" lazy-validation>
  279 + <v-container fluid>
  280 + <!-- <v-layout>
  281 + <v-flex
  282 + xs12
  283 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  284 + >
  285 + <input
  286 + type="file"
  287 + style="display: none"
  288 + ref="image"
  289 + accept="image/*"
  290 + multiple
  291 + @change="onFilePicked"
  292 + />
  293 + <v-layout justify-center>
  294 + <v-flex v-for="(file,index) in files" :key="index" v-if="files">
  295 + <img :src="file" height="160" width="160px;" />
  296 + </v-flex>
  297 + </v-layout>
  298 + <img
  299 + src="/static/icon/user.png"
  300 + v-if="files ==''"
  301 + height="140"
  302 + width="180px;"
  303 + />
  304 + </v-flex>
  305 + </v-layout>-->
  306 + <v-flex xs12>
  307 + <v-layout>
  308 + <v-flex xs4 class="pt-4 subheading">
  309 + <label class="right">Library ID:</label>
  310 + </v-flex>
  311 + <v-flex xs4 class="ml-3">
  312 + <v-text-field
  313 + v-model="addIssue.libraryID"
  314 + placeholder="fill your Library ID"
  315 + :rules="libraryIDRules"
  316 + required
  317 + ></v-text-field>
  318 + </v-flex>
  319 + </v-layout>
  320 + </v-flex>
  321 + <v-flex xs12>
  322 + <v-layout>
  323 + <v-flex xs4 class="pt-4 subheading">
  324 + <label class="right">Book:</label>
  325 + </v-flex>
  326 + <v-flex xs4 class="ml-3">
  327 + <v-text-field
  328 + placeholder="fill your Description"
  329 + :rules="bookRules"
  330 + v-model="addIssue.book"
  331 + required
  332 + ></v-text-field>
  333 + </v-flex>
  334 + </v-layout>
  335 + </v-flex>
  336 + <v-flex xs12>
  337 + <v-layout>
  338 + <v-flex xs4 class="pt-4 subheading">
  339 + <label class="right">Author:</label>
  340 + </v-flex>
  341 + <v-flex xs4 class="ml-3">
  342 + <v-text-field
  343 + placeholder="fill your Author"
  344 + :rules="authorRules"
  345 + v-model="addIssue.author"
  346 + ></v-text-field>
  347 + </v-flex>
  348 + </v-layout>
  349 + </v-flex>
  350 + <v-flex xs12>
  351 + <v-layout>
  352 + <v-flex xs4 class="pt-4 subheading">
  353 + <label class="right">Subject Code:</label>
  354 + </v-flex>
  355 + <v-flex xs4 class="ml-3">
  356 + <v-text-field
  357 + placeholder="fill your Subject Code"
  358 + :rules="subjectCodeRules"
  359 + v-model="addIssue.subjectCode"
  360 + ></v-text-field>
  361 + </v-flex>
  362 + </v-layout>
  363 + </v-flex>
  364 + <v-flex xs12>
  365 + <v-layout>
  366 + <v-flex xs4 class="pt-4 subheading">
  367 + <label class="right">Serial No:</label>
  368 + </v-flex>
  369 + <v-flex xs4 class="ml-3">
  370 + <v-text-field
  371 + placeholder="fill your Serial No"
  372 + :rules="authorRules"
  373 + v-model="addIssue.serialNo"
  374 + ></v-text-field>
  375 + </v-flex>
  376 + </v-layout>
  377 + </v-flex>
  378 + <v-flex xs12>
  379 + <v-layout>
  380 + <v-flex xs4 class="pt-4 subheading">
  381 + <label class="right">Note:</label>
  382 + </v-flex>
  383 + <v-flex xs4 class="ml-3">
  384 + <v-text-field
  385 + placeholder="fill your Note"
  386 + :rules="noteRules"
  387 + v-model="addIssue.note"
  388 + ></v-text-field>
  389 + </v-flex>
  390 + </v-layout>
  391 + </v-flex>
  392 + <v-layout>
  393 + <v-flex xs12 sm6 offset-sm3>
  394 + <v-card-actions>
  395 + <v-btn @click="clear" round dark>clear</v-btn>
  396 + <v-spacer></v-spacer>
  397 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  398 + </v-card-actions>
  399 + </v-flex>
  400 + </v-layout>
  401 + </v-container>
  402 + </v-form>
  403 + </v-card>
  404 + </v-flex>
  405 + </v-container>
  406 + </v-tab-item>
  407 + </v-tabs>
  408 + <div class="loader" v-if="showLoader">
  409 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  410 + </div>
  411 + </v-app>
  412 +</template>
  413 +
  414 +<script>
  415 +import http from "@/Services/http.js";
  416 +import Util from "@/util";
  417 +
  418 +export default {
  419 + data: () => ({
  420 + snackbar: false,
  421 + y: "top",
  422 + x: "right",
  423 + mode: "",
  424 + timeout: 3000,
  425 + text: "",
  426 + loading: false,
  427 + date: null,
  428 + search: "",
  429 + showLoader: false,
  430 + dialog: false,
  431 + dialog1: false,
  432 + valid: true,
  433 + isActive: true,
  434 + newActive: false,
  435 + addclass: [],
  436 + addSection: [],
  437 + AddUsercredentials: {},
  438 + pagination: {
  439 + rowsPerPage: 15
  440 + },
  441 + libraryIDRules: [v => !!v || " Library ID is required"],
  442 + bookRules: [v => !!v || " book Name is required"],
  443 + authorRules: [v => !!v || "Author Name is required"],
  444 + subjectCodeRules: [v => !!v || "Subject Code is required"],
  445 + authorRules: [v => !!v || "Author is required"],
  446 + noteRules: [v => !!v || "Note is required"],
  447 + headers: [
  448 + {
  449 + align: "justify-center",
  450 + text: "No",
  451 + sortable: false,
  452 + value: "No"
  453 + },
  454 + { text: "Image", vaue: "image", sortable: false, align: "center" },
  455 + { text: "Title", value: "title", sortable: false, align: "center" },
  456 + {
  457 + text: "Description",
  458 + value: "description",
  459 + sortable: false,
  460 + align: "center"
  461 + },
  462 + { text: "Action", value: "", sortable: false, align: "center" }
  463 + ],
  464 + desserts: [],
  465 + addIssue: {},
  466 + editedItem: {}
  467 + }),
  468 + methods: {
  469 + getSections(_id) {
  470 + console.log("_id", _id);
  471 + var token = this.$store.state.token;
  472 + http()
  473 + .get(
  474 + "/getSectionsList",
  475 + { params: { classId: _id } },
  476 + {
  477 + headers: { Authorization: "Bearer " + token }
  478 + }
  479 + )
  480 + .then(response => {
  481 + this.addSection = response.data.data;
  482 + // console.log("getSectionsList=====>", this.addSection);
  483 + })
  484 + .catch(err => {
  485 + console.log("err====>", err);
  486 + // this.$router.replace({ path: '/' });
  487 + });
  488 + },
  489 + pickFile() {
  490 + this.$refs.image.click();
  491 + },
  492 + // onFilePicked(e) {
  493 + // // console.log(e)
  494 + // const files = e.target.files;
  495 + // /** fetch Image Name **/
  496 + // if (files[0] !== undefined) {
  497 + // this.imageName = files[0].name;
  498 + // if (this.imageName.lastIndexOf(".") <= 0) {
  499 + // return;
  500 + // }
  501 + // this.files = [];
  502 + // // console.log("files", this.files);
  503 + // /** Select many image and showing many image add to news card **/
  504 + // const test = Array.from(files).forEach((file, idx) => {
  505 + // const fr = new FileReader();
  506 + // const getResult = new Promise(resolve => {
  507 + // fr.onload = e => {
  508 + // this.files.push(
  509 + // // id: idx,
  510 + // e.target.result
  511 + // );
  512 + // };
  513 + // });
  514 + // fr.readAsDataURL(file);
  515 + // return getResult.then(file => {
  516 + // return file;
  517 + // });
  518 + // });
  519 + // const fr = new FileReader();
  520 + // fr.readAsDataURL(files[0]);
  521 + // fr.addEventListener("load", () => {
  522 + // this.imageFile = files; // this is an image file that can be sent to server...
  523 + // // console.log("uploadImage=======>", this.imageFile );
  524 + // });
  525 + // } else {
  526 + // this.imageName = "";
  527 + // this.imageFile = "";
  528 + // this.imageUrl = "";
  529 + // }
  530 + // },
  531 + getIssueList() {
  532 + this.showLoader = true;
  533 + var token = this.$store.state.token;
  534 + http()
  535 + .get("/getIssueList", {
  536 + headers: { Authorization: "Bearer " + token }
  537 + })
  538 + .then(response => {
  539 + this.desserts = response.data.data;
  540 + this.showLoader = false;
  541 + // console.log("getIssueList=====>",this.desserts)
  542 + })
  543 + .catch(err => {
  544 + // console.log("err====>", err);
  545 + this.showLoader = false;
  546 + if (error.response.status === 401) {
  547 + this.$router.replace({ path: "/" });
  548 + this.$store.dispatch("setToken", null);
  549 + this.$store.dispatch("Id", null);
  550 + }
  551 + });
  552 + },
  553 + editItem(item) {
  554 + this.editedIndex = this.desserts.indexOf(item);
  555 + this.editedItem = Object.assign({}, item);
  556 + this.dialog = true;
  557 + },
  558 + profile(item) {
  559 + this.editedIndex = this.desserts.indexOf(item);
  560 + this.editedItem = Object.assign({}, item);
  561 + this.dialog1 = true;
  562 + },
  563 + deleteItem(item) {
  564 + let deleteIssue = {
  565 + issueId: item._id
  566 + };
  567 + http()
  568 + .delete(
  569 + "/deleteIssue",
  570 + confirm("Are you sure you want to delete this?") && {
  571 + params: deleteIssue
  572 + }
  573 + )
  574 + .then(response => {
  575 + // console.log("deleteIssue",deleteIssue)
  576 + if ((this.snackbar = true)) {
  577 + this.text = "Successfully delete Existing Issue";
  578 + }
  579 + this.getIssueList();
  580 + })
  581 + .catch(error => {
  582 + // console.log(error);
  583 + });
  584 + },
  585 + // deleteImage(issueId) {
  586 + // console.log(imageId, issueId);
  587 + // let deleteImages = {
  588 + // issueId: issueId,
  589 + // };
  590 + // http()
  591 + // .put("/deleteImages", deleteImages)
  592 + // .then(response => {
  593 + // console.log("deleteIssue", deleteImages);
  594 + // if ((this.snackbar = true)) {
  595 + // this.text = "Image deleted Successfully";
  596 + // }
  597 + // this.getIssueList();
  598 + // this.close();
  599 + // })
  600 + // .catch(error => {
  601 + // console.log(error);
  602 + // });
  603 + // },
  604 + activeTab(type) {
  605 + switch (type) {
  606 + case "existing":
  607 + this.newActive = false;
  608 + this.isActive = true;
  609 + break;
  610 +
  611 + default:
  612 + this.newActive = true;
  613 + this.isActive = false;
  614 + break;
  615 + }
  616 + },
  617 + close() {
  618 + this.dialog = false;
  619 + setTimeout(() => {
  620 + this.editedItem = Object.assign({}, this.defaultItem);
  621 + this.editedIndex = -1;
  622 + }, 300);
  623 + },
  624 + close1() {
  625 + this.dialog1 = false;
  626 + },
  627 + submit() {
  628 + this.loading = true;
  629 + http()
  630 + .post("/createIssue")
  631 + .then(response => {
  632 + if ((this.snackbar = true)) {
  633 + this.text = "New Issue added successfully";
  634 + }
  635 + this.getIssueList();
  636 + this.loading = false;
  637 + this.clear();
  638 + })
  639 + .catch(error => {
  640 + if ((this.snackbar = true)) {
  641 + this.text = error.response.data.message;
  642 + }
  643 + });
  644 + },
  645 + clear() {
  646 + this.$refs.form.reset();
  647 + },
  648 + save() {
  649 + http()
  650 + .put("/updateIssue")
  651 + .then(response => {
  652 + // console.log("updateIssue",updateIssue);
  653 + if ((this.snackbar = true)) {
  654 + this.text = "Successfully Edit Existing Issue";
  655 + }
  656 + this.getIssueList();
  657 + this.close();
  658 + })
  659 + .catch(error => {
  660 + // console.log(error);
  661 + });
  662 + }
  663 + },
  664 + mounted() {
  665 + // this.getIssueList();
  666 + },
  667 + created() {
  668 + this.$root.$on("app:search", search => {
  669 + this.search = search;
  670 + });
  671 + },
  672 + beforeDestroy() {
  673 + // dont forget to remove the listener
  674 + this.$root.$off("app:search");
  675 + }
  676 +};
  677 +</script>
  678 +<style scoped>
  679 +.active {
  680 + background-color: gray;
  681 + color: white !important;
  682 +}
  683 +.activebtn {
  684 + color: black !important;
  685 +}
  686 +</style>
0 687 \ No newline at end of file
... ...
src/pages/Library/member.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,517 @@
  1 +<template>
  2 + <div>
  3 + <v-snackbar
  4 + :timeout="timeout"
  5 + :top="y === 'top'"
  6 + :right="x === 'right'"
  7 + :vertical="mode === 'vertical'"
  8 + v-model="snackbar"
  9 + color="success"
  10 + >{{ text }}</v-snackbar>
  11 +
  12 + <!-- ****** EXISTING MEMBER TABLE ****** -->
  13 + <v-card flat>
  14 + <v-card-actions>
  15 + <v-layout>
  16 + <h3 class="right mt-2 ml-2">Library Member</h3>
  17 + </v-layout>
  18 + <v-spacer></v-spacer>
  19 + <v-flex xs12 sm1>
  20 + <!-- <label class="title">Select Class:</label> -->
  21 + </v-flex>
  22 + <v-flex xs12 sm2>
  23 + <v-select
  24 + outline
  25 + small
  26 + :items="addclass"
  27 + label="Select Class"
  28 + v-model="selectStudents.select"
  29 + item-text="classNum"
  30 + item-value="_id"
  31 + name="Select Class"
  32 + @change="getSections(selectStudents.select)"
  33 + class="px-2"
  34 + required
  35 + ></v-select>
  36 + </v-flex>
  37 + </v-card-actions>
  38 + </v-card>
  39 + <v-data-table
  40 + :headers="headers"
  41 + :items="desserts"
  42 + :pagination.sync="pagination"
  43 + :search="search"
  44 + >
  45 + <template slot="items" slot-scope="props">
  46 + <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
  47 + <td id="td" class="text-xs-center">
  48 + <v-avatar>
  49 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  50 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  51 + </v-avatar>
  52 + </td>
  53 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  54 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  55 + <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
  56 + <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
  57 + <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
  58 + <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
  59 + <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
  60 + <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
  61 +
  62 + <td class="text-xs-center">
  63 + <span>
  64 + <img
  65 + style="cursor:pointer; width:25px; height:18px; "
  66 + class="mr-5"
  67 + @click="profile(props.item)"
  68 + src="/static/icon/eye1.png"
  69 + />
  70 + <img
  71 + style="cursor:pointer; width:20px; height:18px; "
  72 + class="mr-5"
  73 + @click="editItem(props.item)"
  74 + src="/static/icon/edit1.png"
  75 + />
  76 + <img
  77 + style="cursor:pointer;width:20px; height:20px; "
  78 + class="mr-5"
  79 + @click="deleteItem(props.item)"
  80 + src="/static/icon/delete1.png"
  81 + />
  82 + </span>
  83 + </td>
  84 + </template>
  85 + <v-alert
  86 + slot="no-results"
  87 + :value="true"
  88 + color="error"
  89 + icon="warning"
  90 + >Your search for "{{ search }}" found no results.</v-alert>
  91 + </v-data-table>
  92 + <div class="loader" v-if="showLoader">
  93 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  94 + </div>
  95 + </div>
  96 +</template>
  97 +
  98 +<script>
  99 +import http from "@/Services/http.js";
  100 +import Util from "@/util";
  101 +import moment from "moment";
  102 +
  103 +export default {
  104 + data: () => ({
  105 + snackbar: false,
  106 + y: "top",
  107 + x: "right",
  108 + mode: "",
  109 + timeout: 3000,
  110 + text: "",
  111 + showLoader: false,
  112 + loading: false,
  113 + date: null,
  114 + search: "",
  115 + addclass: [],
  116 + pagination: {
  117 + rowsPerPage: 15
  118 + },
  119 + imageData: {},
  120 + imageName: "",
  121 + imageUrl: "",
  122 + imageFile: "",
  123 + headers: [
  124 + {
  125 + text: "Roll No.",
  126 + align: "center",
  127 + sortable: false,
  128 + value: "rollNo"
  129 + },
  130 + {
  131 + text: "Profile Pic",
  132 + value: "profilePicUrl",
  133 + sortable: false,
  134 + align: "center"
  135 + },
  136 + { text: "Name", value: "name", sortable: false, align: "center" },
  137 + { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
  138 + { text: "Email", value: "email", sortable: false, align: "center" },
  139 + { text: "Action", value: "", sortable: false, align: "center" }
  140 + ],
  141 + desserts: [],
  142 + parentId: "",
  143 + token: "",
  144 + selectStudents: {
  145 + select: "",
  146 + selectSection: ""
  147 + }
  148 + }),
  149 + methods: {
  150 + // findStudents() {
  151 + // this.showLoader = true;
  152 + // http()
  153 + // .get("/getStudentWithClass", {
  154 + // params: {
  155 + // classId: this.selectStudents.select,
  156 + // sectionId: this.selectStudents.selectSection
  157 + // }
  158 + // })
  159 + // .then(response => {
  160 + // this.desserts = response.data.data;
  161 + // this.showLoader = false;
  162 + // console.log("getSectionsList=====>", this.addSection);
  163 + // })
  164 + // .catch(err => {
  165 + // console.log("err====>", err);
  166 + // this.showLoader = false;
  167 + // });
  168 + // },
  169 + // getSections(_id) {
  170 + // var token = this.$store.state.token;
  171 + // http()
  172 + // .get(
  173 + // "/getSectionsList",
  174 + // { params: { classId: _id } },
  175 + // {
  176 + // headers: { Authorization: "Bearer " + token }
  177 + // }
  178 + // )
  179 + // .then(response => {
  180 + // this.addSection = response.data.data;
  181 + // console.log("getSectionsList=====>", this.addSection);
  182 + // })
  183 + // .catch(err => {
  184 + // // console.log("err====>", err);
  185 + // // this.$router.replace({ path: '/' });
  186 + // });
  187 + // },
  188 + // getSection(_id) {
  189 + // var token = this.$store.state.token;
  190 + // http()
  191 + // .get(
  192 + // "/getSectionsList",
  193 + // { params: { classId: _id } },
  194 + // {
  195 + // headers: { Authorization: "Bearer " + token }
  196 + // }
  197 + // )
  198 + // .then(response => {
  199 + // this.addSection = response.data.data;
  200 + // console.log("getSectionsList=====>", this.addSection);
  201 + // })
  202 + // .catch(err => {
  203 + // // console.log("err====>", err);
  204 + // // this.$router.replace({ path: '/' });
  205 + // });
  206 + // },
  207 + // pickFile() {
  208 + // this.$refs.image.click();
  209 + // },
  210 + // dates: function(date) {
  211 + // return moment(date).format("MMMM DD, YYYY");
  212 + // },
  213 + // onFilePicked(e) {
  214 + // // console.log(e)
  215 + // const files = e.target.files;
  216 + // this.imageData.upload = e.target.files[0];
  217 + // if (files[0] !== undefined) {
  218 + // this.imageName = files[0].name;
  219 + // if (this.imageName.lastIndexOf(".") <= 0) {
  220 + // return;
  221 + // }
  222 + // const fr = new FileReader();
  223 + // fr.readAsDataURL(files[0]);
  224 + // fr.addEventListener("load", () => {
  225 + // this.imageUrl = fr.result;
  226 + // this.imageFile = files[0]; // this is an image file that can be sent to server...
  227 + // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  228 + // });
  229 + // } else {
  230 + // this.imageName = "";
  231 + // this.imageFile = "";
  232 + // this.imageUrl = "";
  233 + // }
  234 + // },
  235 + // getStudentList() {
  236 + // this.showLoader = true;
  237 + // var token = this.$store.state.token;
  238 + // http()
  239 + // .get("/getStudentsList", {
  240 + // headers: { Authorization: "Bearer " + token }
  241 + // })
  242 + // .then(response => {
  243 + // this.desserts = response.data.data;
  244 + // this.showLoader = false;
  245 + // // console.log("getStudentList=====>",this.desserts)
  246 + // })
  247 + // .catch(err => {
  248 + // // console.log("err====>", err);
  249 + // this.showLoader = false;
  250 + // this.$router.replace({ path: "/" });
  251 + // });
  252 + // },
  253 + // editItem(item) {
  254 + // this.editedIndex = this.desserts.indexOf(item);
  255 + // this.editedItem = Object.assign({}, item);
  256 + // this.editedItem.fatherName = item.parentId.fatherName;
  257 + // this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
  258 + // this.editedItem.motherName = item.parentId.motherName;
  259 + // this.editedItem.motherCellNo = item.parentId.motherCellNo;
  260 + // // if(this.editedItem.dob != undefined){
  261 + // // this.editedItem.dob = this.editedItem.dob.substring(0, 10)
  262 + // // }else if(this.editedItem.dob = undefined){
  263 + // // this.editedItem.dob = ''
  264 + // // }
  265 + // this.editedItem.dob =
  266 + // this.editedItem.dob != undefined
  267 + // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
  268 + // : (this.editedItem.dob = "");
  269 + // this.dialog = true;
  270 + // },
  271 + // profile(item) {
  272 + // console.log("item", item);
  273 + // this.editedIndex = this.desserts.indexOf(item);
  274 + // this.editedItem = Object.assign({}, item);
  275 + // this.editedItem.fatherName = item.parentId.fatherName;
  276 + // this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
  277 + // this.editedItem.motherName = item.parentId.motherName;
  278 + // this.editedItem.motherCellNo = item.parentId.motherCellNo;
  279 + // this.dialog1 = true;
  280 + // },
  281 + // deleteItem(item) {
  282 + // let deleteStudent = {
  283 + // studentId: item._id
  284 + // };
  285 + // http()
  286 + // .delete(
  287 + // "/deleteStudent",
  288 + // confirm("Are you sure you want to delete this?") && {
  289 + // params: deleteStudent
  290 + // }
  291 + // )
  292 + // .then(response => {
  293 + // // console.log("deleteUers",deleteStudent)
  294 + // if ((this.snackbar = true)) {
  295 + // this.text = "Successfully delete Existing Student";
  296 + // }
  297 + // this.getStudentList();
  298 + // })
  299 + // .catch(error => {
  300 + // // console.log(error);
  301 + // });
  302 + // },
  303 + // activeTab(type) {
  304 + // switch (type) {
  305 + // case "existing":
  306 + // this.newActive = false;
  307 + // this.isActive = true;
  308 + // break;
  309 + // default:
  310 + // this.newActive = true;
  311 + // this.isActive = false;
  312 + // break;
  313 + // }
  314 + // },
  315 + // close() {
  316 + // this.dialog = false;
  317 + // setTimeout(() => {
  318 + // this.editedItem = Object.assign({}, this.defaultItem);
  319 + // this.editedIndex = -1;
  320 + // }, 300);
  321 + // },
  322 + // close1() {
  323 + // this.dialog1 = false;
  324 + // },
  325 + // submit() {
  326 + // if (this.$refs.form.validate()) {
  327 + // let addStudent = {
  328 + // parentId: this.parentId,
  329 + // name: this.addStudents.name,
  330 + // email: this.addStudents.email,
  331 + // role: this.addStudents.role,
  332 + // dob: this.addStudents.date,
  333 + // city: this.addStudents.city,
  334 + // pincode: this.addStudents.pincode,
  335 + // country: this.addStudents.country,
  336 + // permanentAddress: this.addStudents.permanentAddress,
  337 + // presentAddress: this.addStudents.presentAddress,
  338 + // mobile: this.addStudents.mobile,
  339 + // state: this.addStudents.state,
  340 + // gender: this.addStudents.gender,
  341 + // establishmentYear: this.addStudents.establishmentYear,
  342 + // classId: this.addStudents.select,
  343 + // sectionId: this.addStudents.selectSection,
  344 + // bloodGroup: this.addStudents.bloodGroup,
  345 + // allergies: this.addStudents.allergies,
  346 + // medicalNotes: this.addStudents.medicalNotes,
  347 + // height: this.addStudents.height,
  348 + // weight: this.addStudents.weight,
  349 + // rollNo: this.addStudents.rollNo
  350 + // };
  351 + // if (this.imageUrl) {
  352 + // var str = this.imageUrl;
  353 + // const [baseUrl, imageUrl] = str.split(/,/);
  354 + // addStudent.upload = imageUrl;
  355 + // }
  356 + // this.loading = true;
  357 + // http()
  358 + // .post("/createStudent", addStudent)
  359 + // .then(response => {
  360 + // console.log(addStudent);
  361 + // if ((this.snackbar = true)) {
  362 + // this.text = "New Student added successfully";
  363 + // }
  364 + // // this.getStudentList();
  365 + // this.clear();
  366 + // this.loading = false;
  367 + // })
  368 + // .catch(error => {
  369 + // // console.log(error);
  370 + // if ((this.snackbar = true)) {
  371 + // this.text = error.response.data.message;
  372 + // }
  373 + // this.loading = false;
  374 + // });
  375 + // }
  376 + // },
  377 + // clear() {
  378 + // this.$refs.form.reset();
  379 + // },
  380 + // save() {
  381 + // let editStudent = {
  382 + // studentId: this.editedItem._id,
  383 + // name: this.editedItem.name,
  384 + // email: this.editedItem.email,
  385 + // role: this.editedItem.role,
  386 + // dob: this.editedItem.dob,
  387 + // city: this.editedItem.city,
  388 + // pincode: this.editedItem.pincode,
  389 + // country: this.editedItem.country,
  390 + // permanentAddress: this.editedItem.permanentAddress,
  391 + // presentAddress: this.editedItem.presentAddress,
  392 + // mobile: this.editedItem.mobile,
  393 + // state: this.editedItem.state,
  394 + // gender: this.editedItem.gender,
  395 + // establishmentYear: this.editedItem.establishmentYear,
  396 + // classId: this.editedItem.select,
  397 + // sectionId: this.editedItem.selectSection,
  398 + // bloodGroup: this.editedItem.bloodGroup,
  399 + // allergies: this.editedItem.allergies,
  400 + // medicalNotes: this.editedItem.medicalNotes,
  401 + // height: this.editedItem.height,
  402 + // weight: this.editedItem.weight,
  403 + // rollNo: this.editedItem.rollNo
  404 + // };
  405 + // if (this.imageUrl) {
  406 + // var str = this.imageUrl;
  407 + // const [baseUrl, imageUrl] = str.split(/,/);
  408 + // editStudent.upload = imageUrl;
  409 + // }
  410 + // http()
  411 + // .put("/updateStudent", editStudent)
  412 + // .then(response => {
  413 + // if ((this.snackbar = true)) {
  414 + // this.text = "Successfully Student Existing User";
  415 + // }
  416 + // this.findStudents();
  417 + // this.close();
  418 + // })
  419 + // .catch(error => {
  420 + // // console.log(error);
  421 + // if ((this.snackbar = true)) {
  422 + // this.text = error.response.data.statusText;
  423 + // }
  424 + // });
  425 + // },
  426 + // submitParentDetails() {
  427 + // if (this.$refs.parentForm.validate()) {
  428 + // let addparentDetails = {
  429 + // email: this.parentData.email,
  430 + // fatherName: this.parentData.fatherName,
  431 + // fatherCellNo: this.parentData.fatherCellNo,
  432 + // motherName: this.parentData.motherName,
  433 + // motherCellNo: this.parentData.motherCellNo,
  434 + // role: "PARENT"
  435 + // };
  436 + // this.loading = true;
  437 + // http()
  438 + // .post("/createParent", addparentDetails)
  439 + // .then(response => {
  440 + // this.parentId = response.data.data.id;
  441 + // this.e2 = 2;
  442 + // if ((this.snackbar = true)) {
  443 + // this.text = "successfully";
  444 + // }
  445 + // // this.getStudentList();
  446 + // this.clear();
  447 + // this.loading = false;
  448 + // })
  449 + // .catch(error => {
  450 + // console.log(error.response.data);
  451 + // if ((this.snackbar = true)) {
  452 + // this.text = error.response.data.message;
  453 + // this.text = error.response.data.statusText;
  454 + // }
  455 + // this.loading = false;
  456 + // });
  457 + // }
  458 + // },
  459 + // getParentDetails() {
  460 + // if (this.parentData.email) {
  461 + // http()
  462 + // .get("getParticularParent", {
  463 + // params: { email: this.parentData.email },
  464 + // headers: {
  465 + // Authorization: "Bearer " + this.$store.state.token
  466 + // }
  467 + // })
  468 + // .then(response => {
  469 + // this.showNext = true;
  470 + // this.showParent = false;
  471 + // this.parentData = response.data.data;
  472 + // this.parentId = response.data.data._id;
  473 + // })
  474 + // .catch(error => {
  475 + // console.log("err====>", error.response.data.message);
  476 + // });
  477 + // }
  478 + // }
  479 + getAllClass() {
  480 + http()
  481 + .get("/getClassesList", {
  482 + headers: { Authorization: "Bearer " + this.token }
  483 + })
  484 + .then(response => {
  485 + this.addclass = response.data.data;
  486 + })
  487 + .catch(err => {
  488 + // console.log("err====>", err);
  489 + this.$router.replace({ path: "/" });
  490 + });
  491 + }
  492 + },
  493 + mounted() {
  494 + // this.getStudentList();
  495 + this.token = this.$store.state.token;
  496 + this.getAllClass();
  497 + },
  498 + created() {
  499 + this.$root.$on("app:search", search => {
  500 + this.search = search;
  501 + });
  502 + },
  503 + beforeDestroy() {
  504 + // dont forget to remove the listener
  505 + this.$root.$off("app:search");
  506 + }
  507 +};
  508 +</script>
  509 +<style scoped>
  510 +.active {
  511 + background-color: gray;
  512 + color: white !important;
  513 +}
  514 +.activebtn {
  515 + color: black !important;
  516 +}
  517 +</style>
0 518 \ No newline at end of file
... ...
src/pages/News/news.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -221,7 +221,7 @@
221 221 :search="search"
222 222 >
223 223 <template slot="items" slot-scope="props">
224   - <td class="text-xs-center">{{ props.index}}</td>
  224 + <td class="text-xs-center">{{ props.index + 1}}</td>
225 225 <td id="td" class="text-xs-center">
226 226 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
227 227 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
... ... @@ -690,7 +690,7 @@ export default {
690 690 </script>
691 691 <style scoped>
692 692 .active {
693   - background-color: black;
  693 + background-color: gray;
694 694 color: white !important;
695 695 }
696 696 .activebtn {
... ...
src/pages/NoticeBoard/noticeBoard.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -198,7 +198,7 @@
198 198 :search="search"
199 199 >
200 200 <template slot="items" slot-scope="props">
201   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  201 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
202 202 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
203 203 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
204 204  
... ... @@ -574,7 +574,7 @@ export default {
574 574 </script>
575 575 <style scoped>
576 576 .active {
577   - background-color: black;
  577 + background-color: gray;
578 578 color: white !important;
579 579 }
580 580 .activebtn {
... ...
src/pages/Notification/notification.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -170,7 +170,7 @@
170 170 :search="search"
171 171 >
172 172 <template slot="items" slot-scope="props">
173   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  173 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
174 174 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
175 175 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
176 176  
... ... @@ -546,7 +546,7 @@ export default {
546 546 max-width: 200px;
547 547 }
548 548 .active {
549   - background-color: black;
  549 + background-color: gray;
550 550 color: white !important;
551 551 }
552 552 .activebtn {
... ...
src/pages/Parent/parents.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -257,7 +257,7 @@
257 257 :search="search"
258 258 >
259 259 <template slot="items" slot-scope="props">
260   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  260 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
261 261 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
262 262 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
263 263 <td id="td" class="text-xs-center">{{ props.item.fatherCellNo }}</td>
... ... @@ -641,7 +641,7 @@ export default {
641 641 </script>
642 642 <style scoped>
643 643 .active {
644   - background-color: black;
  644 + background-color: gray;
645 645 color: white !important;
646 646 }
647 647 .activebtn {
... ...
src/pages/Reminder/reminder.vue
Diff comments   View file @687e0b9
... ... @@ -44,7 +44,7 @@
44 44 </v-list>
45 45 </v-menu>
46 46 </v-toolbar>
47   - <v-tabs grow slider-color="black">
  47 + <v-tabs grow slider-color="gray">
48 48 <v-tab
49 49 ripple
50 50 @click="activeTab('existing')"
... ... @@ -209,7 +209,7 @@
209 209 :search="search"
210 210 >
211 211 <template slot="items" slot-scope="props">
212   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  212 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
213 213 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
214 214 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
215 215  
... ... @@ -662,7 +662,7 @@ h4 {
662 662 height: 550px;
663 663 }
664 664 .active {
665   - background-color: black;
  665 + background-color: gray;
666 666 color: white !important;
667 667 }
668 668 .activebtn {
... ...
src/pages/Section/section.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -183,7 +183,7 @@
183 183 :search="search"
184 184 >
185 185 <template slot="items" slot-scope="props">
186   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  186 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
187 187 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
188 188 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
189 189 <td id="td" class="text-xs-center">{{ props.item.session}}</td>
... ... @@ -395,32 +395,9 @@ export default {
395 395 name: "",
396 396 session: new Date().getFullYear()
397 397 },
398   - // add: {
399   - // classData: {
400   - // classNum: ""
401   - // },
402   - // name: "",
403   - // session: new Date().getFullYear()
404   - // },
405 398 sectionData: {
406 399 session: new Date().getFullYear()
407   - },
408   - items: [
409   - {
410   - href: "/changepassword",
411   - title: "Change Password",
412   - click: e => {
413   - console.log(e);
414   - }
415   - },
416   - {
417   - href: "#",
418   - title: "Logout",
419   - click: e => {
420   - window.getApp.$emit("APP_LOGOUT");
421   - }
422   - }
423   - ]
  400 + }
424 401 }),
425 402 methods: {
426 403 getSectionList() {
... ... @@ -552,12 +529,6 @@ export default {
552 529 // console.log(error);
553 530 });
554 531 },
555   - handleDrawerToggle() {
556   - window.getApp.$emit("APP_DRAWER_TOGGLED");
557   - },
558   - handleFullScreen() {
559   - Util.toggleFullScreen();
560   - },
561 532 getAllTeacher() {
562 533 http()
563 534 .get("/getTeachersList", {
... ... @@ -592,12 +563,6 @@ export default {
592 563 this.getAllClasses();
593 564 this.getAllTeacher();
594 565 },
595   -
596   - computed: {
597   - toolbarColor() {
598   - return this.$vuetify.options.extra.mainNav;
599   - }
600   - },
601 566 created() {
602 567 this.$root.$on("app:search", search => {
603 568 this.search = search;
... ... @@ -612,7 +577,7 @@ export default {
612 577  
613 578 <style scoped>
614 579 .active {
615   - background-color: black;
  580 + background-color: gray;
616 581 color: white !important;
617 582 }
618 583 .activebtn {
... ...
src/pages/Students/students.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <div>
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -2231,7 +2231,7 @@ export default {
2231 2231 </script>
2232 2232 <style scoped>
2233 2233 .active {
2234   - background-color: black;
  2234 + background-color: gray;
2235 2235 color: white !important;
2236 2236 }
2237 2237 .activebtn {
... ...
src/pages/Subjects/subjects.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -157,7 +157,7 @@
157 157 :search="search"
158 158 >
159 159 <template slot="items" slot-scope="props">
160   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  160 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
161 161 <td id="td" class="text-xs-center">{{ props.item.subjectName}}</td>
162 162  
163 163 <td class="text-xs-center">
... ... @@ -495,7 +495,7 @@ export default {
495 495 </script>
496 496 <style scoped>
497 497 .active {
498   - background-color: black;
  498 + background-color: gray;
499 499 color: white !important;
500 500 }
501 501 .activebtn {
... ...
src/pages/Teachers/teachers.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -449,7 +449,7 @@
449 449 :search="search"
450 450 >
451 451 <template slot="items" slot-scope="props">
452   - <td id="td" class="text-xs-center">{{ props.index}}</td>
  452 + <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
453 453 <td id="td" class="text-xs-center">
454 454 <v-avatar>
455 455 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
... ... @@ -1361,7 +1361,7 @@ export default {
1361 1361 <style scoped>
1362 1362  
1363 1363 .active {
1364   - background-color: black;
  1364 + background-color: gray;
1365 1365 color: white !important;
1366 1366 }
1367 1367 .activebtn {
... ...
src/pages/TimeTable/timeTable.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -493,7 +493,7 @@
493 493 style="cursor: pointer;"
494 494 @click="getTimeTable(props.item), props.expanded = !props.expanded"
495 495 >
496   - <td class="text-xs-center">{{ props.index }}</td>
  496 + <td class="text-xs-center">{{ props.index + 1}}</td>
497 497 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
498 498 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
499 499 <td class="text-xs-center">
... ... @@ -1324,7 +1324,7 @@ export default {
1324 1324 </script>
1325 1325 <style scoped>
1326 1326 .active {
1327   - background-color: black;
  1327 + background-color: gray;
1328 1328 color: white !important;
1329 1329 }
1330 1330 .activebtn {
... ...
src/pages/User/user.vue
Diff comments   View file @687e0b9
... ... @@ -0,0 +1,1139 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-tabs grow slider-color="gray">
  4 + <v-tab
  5 + ripple
  6 + @click="activeTab('existing')"
  7 + v-bind:class="{ active: isActive }"
  8 + id="tab"
  9 + class="subheading"
  10 + >Existing User</v-tab>
  11 + <v-tab
  12 + ripple
  13 + @click="activeTab('new')"
  14 + v-bind:class="{ active: newActive }"
  15 + id="tab1"
  16 + User
  17 + class="subheading"
  18 + >Add New User</v-tab>
  19 + <!-- ****** EDIT USERS DETAILS ****** -->
  20 + <v-tab-item>
  21 + <v-snackbar
  22 + :timeout="timeout"
  23 + :top="y === 'top'"
  24 + :right="x === 'right'"
  25 + :vertical="mode === 'vertical'"
  26 + v-model="snackbar"
  27 + color="success"
  28 + >{{ text }}</v-snackbar>
  29 + <v-dialog v-model="dialog" max-width="1100px" scrollable>
  30 + <v-card flat>
  31 + <v-toolbar color="grey lighten-2" flat>
  32 + <v-spacer></v-spacer>
  33 + <v-toolbar-title>Edit User Profile</v-toolbar-title>
  34 + <v-spacer></v-spacer>
  35 + </v-toolbar>
  36 + <v-card-text style="height: 680px;">
  37 + <v-form ref="form">
  38 + <v-container fluid>
  39 + <v-layout>
  40 + <v-flex
  41 + xs12
  42 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  43 + >
  44 + <v-avatar size="160px">
  45 + <img
  46 + src="/static/icon/user.png"
  47 + v-if="!editedItem.profilePicUrl && !imageUrl"
  48 + />
  49 + <img
  50 + :src="editedItem.profilePicUrl"
  51 + v-else-if="editedItem.profilePicUrl && !imageUrl"
  52 + />
  53 + <img
  54 + v-if="imageUrl"
  55 + :src="imageUrl"
  56 + height="150"
  57 + style="border-radius:50%; width:200px"
  58 + />
  59 + </v-avatar>
  60 + <input
  61 + type="file"
  62 + style="display:none"
  63 + ref="image"
  64 + accept="image/*"
  65 + @change="onFilePicked"
  66 + />
  67 + </v-flex>
  68 + </v-layout>
  69 + <v-layout>
  70 + <v-flex xs12 sm6>
  71 + <v-layout>
  72 + <v-flex xs4 class="pt-4 subheading">
  73 + <label class="right">Name:</label>
  74 + </v-flex>
  75 + <v-flex xs8 class="ml-3">
  76 + <v-text-field
  77 + v-model="editedItem.name"
  78 + placeholder="fill your Name"
  79 + name="name"
  80 + type="text"
  81 + required
  82 + ></v-text-field>
  83 + </v-flex>
  84 + </v-layout>
  85 + </v-flex>
  86 + <v-flex xs12 sm6>
  87 + <v-layout>
  88 + <v-flex xs4 class="pt-4 subheading">
  89 + <label class="right">Email ID:</label>
  90 + </v-flex>
  91 + <v-flex xs8 class="ml-3">
  92 + <v-text-field
  93 + placeholder="fill your email"
  94 + v-model="editedItem.email"
  95 + type="text"
  96 + name="email"
  97 + required
  98 + ></v-text-field>
  99 + </v-flex>
  100 + </v-layout>
  101 + </v-flex>
  102 + </v-layout>
  103 + <v-layout>
  104 + <v-flex xs12 sm6>
  105 + <v-layout>
  106 + <v-flex xs4 class="pt-4 subheading">
  107 + <label class="right">Date of Birth:</label>
  108 + </v-flex>
  109 + <v-flex xs8 class="ml-3">
  110 + <v-menu
  111 + ref="menu"
  112 + :close-on-content-click="false"
  113 + v-model="menu2"
  114 + :nudge-right="40"
  115 + lazy
  116 + transition="scale-transition"
  117 + offset-y
  118 + full-width
  119 + min-width="290px"
  120 + >
  121 + <v-text-field
  122 + slot="activator"
  123 + v-model="editedItem.dob"
  124 + placeholder="Select date"
  125 + ></v-text-field>
  126 + <v-date-picker
  127 + ref="picker"
  128 + v-model="editedItem.dob"
  129 + :max="new Date().toISOString().substr(0, 10)"
  130 + min="1950-01-01"
  131 + @input="menu2 = false"
  132 + ></v-date-picker>
  133 + </v-menu>
  134 + </v-flex>
  135 + </v-layout>
  136 + </v-flex>
  137 + <v-flex xs12 sm6>
  138 + <v-layout>
  139 + <v-flex xs4 class="pt-4 subheading">
  140 + <label class="right">Gender:</label>
  141 + </v-flex>
  142 + <v-flex xs8 class="ml-3">
  143 + <v-select
  144 + :items="gender"
  145 + v-model="editedItem.gender"
  146 + label="Select gender"
  147 + name="gender"
  148 + required
  149 + ></v-select>
  150 + </v-flex>
  151 + </v-layout>
  152 + </v-flex>
  153 + </v-layout>
  154 + <v-layout>
  155 + <v-flex xs12 sm6>
  156 + <v-layout>
  157 + <v-flex xs4 class="pt-4 subheading">
  158 + <label class="right">Religion:</label>
  159 + </v-flex>
  160 + <v-flex xs8 class="ml-3">
  161 + <v-text-field
  162 + v-model="editedItem.religion"
  163 + placeholder="fill your Religion"
  164 + name="religion"
  165 + type="text"
  166 + required
  167 + ></v-text-field>
  168 + </v-flex>
  169 + </v-layout>
  170 + </v-flex>
  171 + <v-flex xs12 sm6>
  172 + <v-layout>
  173 + <v-flex xs4 class="pt-4 subheading">
  174 + <label class="right">Joining Date:</label>
  175 + </v-flex>
  176 + <v-flex xs8 class="ml-3">
  177 + <v-menu
  178 + ref="menu"
  179 + :close-on-content-click="false"
  180 + v-model="menu3"
  181 + :nudge-right="40"
  182 + lazy
  183 + transition="scale-transition"
  184 + offset-y
  185 + full-width
  186 + min-width="290px"
  187 + >
  188 + <v-text-field
  189 + slot="activator"
  190 + v-model="editedItem.joiningDate"
  191 + placeholder="Select date"
  192 + ></v-text-field>
  193 + <v-date-picker
  194 + ref="picker"
  195 + v-model="editedItem.joiningDate"
  196 + :max="new Date().toISOString().substr(0, 10)"
  197 + min="1950-01-01"
  198 + @input="menu3 = false"
  199 + ></v-date-picker>
  200 + </v-menu>
  201 + </v-flex>
  202 + </v-layout>
  203 + </v-flex>
  204 + </v-layout>
  205 + <v-layout>
  206 + <v-flex xs12 sm6>
  207 + <v-layout>
  208 + <v-flex xs4 class="pt-4 subheading">
  209 + <label class="right">Phone:</label>
  210 + </v-flex>
  211 + <v-flex xs8 class="ml-3">
  212 + <v-text-field
  213 + v-model="editedItem.phone"
  214 + placeholder="fill your MobileNo"
  215 + name="mobileNo"
  216 + type="number"
  217 + required
  218 + ></v-text-field>
  219 + </v-flex>
  220 + </v-layout>
  221 + </v-flex>
  222 + <v-flex xs12 sm6>
  223 + <v-layout>
  224 + <v-flex xs4 class="pt-4 subheading">
  225 + <label class="right">Select Role:</label>
  226 + </v-flex>
  227 + <v-flex xs8 class="ml-3">
  228 + <v-autocomplete
  229 + v-model="editedItem.role"
  230 + :label="editedItem.role"
  231 + :items="userRole"
  232 + item-text="name"
  233 + item-value="role"
  234 + required
  235 + ></v-autocomplete>
  236 + </v-flex>
  237 + </v-layout>
  238 + </v-flex>
  239 + </v-layout>
  240 + <v-layout>
  241 + <v-flex xs12 sm6>
  242 + <v-layout>
  243 + <v-flex xs4 class="pt-4 subheading">
  244 + <label class="right">Uplaod Image:</label>
  245 + </v-flex>
  246 + <v-flex xs8 class="ml-3">
  247 + <v-text-field
  248 + label="Select Image"
  249 + @click="pickFile"
  250 + v-model="imageName"
  251 + append-icon="attach_file"
  252 + ></v-text-field>
  253 + </v-flex>
  254 + </v-layout>
  255 + </v-flex>
  256 + <v-flex xs12 sm6>
  257 + <v-layout>
  258 + <v-flex xs4 class="pt-4 subheading">
  259 + <label class="right">Address:</label>
  260 + </v-flex>
  261 + <v-flex xs8 class="ml-3">
  262 + <v-text-field
  263 + name="input-4-3"
  264 + v-model="editedItem.address"
  265 + placeholder="fill Your Address"
  266 + required
  267 + ></v-text-field>
  268 + </v-flex>
  269 + </v-layout>
  270 + </v-flex>
  271 + </v-layout>
  272 + <v-layout>
  273 + <v-flex xs12 sm12>
  274 + <v-card-actions>
  275 + <v-btn round dark @click.native="close">Cancel</v-btn>
  276 + <v-spacer></v-spacer>
  277 + <v-btn round dark :loading="loading" @click="save">Save</v-btn>
  278 + </v-card-actions>
  279 + </v-flex>
  280 + </v-layout>
  281 + </v-container>
  282 + </v-form>
  283 + </v-card-text>
  284 + </v-card>
  285 + </v-dialog>
  286 +
  287 + <!-- ****** PROFILE VIEW User DETAILS ****** -->
  288 +
  289 + <v-dialog v-model="dialog1" max-width="600px" scrollable>
  290 + <v-card>
  291 + <v-toolbar color="grey lighten-2" flat>
  292 + <v-spacer></v-spacer>
  293 + <v-toolbar-title>
  294 + <h3>User Profile</h3>
  295 + </v-toolbar-title>
  296 + <v-spacer></v-spacer>
  297 + <v-icon @click="close1">close</v-icon>
  298 + </v-toolbar>
  299 + <v-card-text style="height: 600px;">
  300 + <v-container grid-list-md>
  301 + <v-layout wrap>
  302 + <v-flex>
  303 + <v-flex align-center justify-center layout text-xs-center>
  304 + <v-avatar size="160px">
  305 + <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
  306 + <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
  307 + </v-avatar>
  308 + </v-flex>
  309 + <v-layout>
  310 + <v-flex xs5 sm6>
  311 + <h5 class="right my-1">
  312 + <b>Name:</b>
  313 + </h5>
  314 + </v-flex>
  315 + <v-flex sm6 xs8>
  316 + <h5 class="my-1">{{ editedItem.name }}</h5>
  317 + </v-flex>
  318 + </v-layout>
  319 + <v-layout>
  320 + <v-flex xs5 sm6>
  321 + <h5 class="right my-1">
  322 + <b>Email:</b>
  323 + </h5>
  324 + </v-flex>
  325 + <v-flex sm6 xs8>
  326 + <h5 class="my-1">{{ editedItem.email }}</h5>
  327 + </v-flex>
  328 + </v-layout>
  329 + <v-layout>
  330 + <v-flex xs5 sm6>
  331 + <h5 class="right my-1">
  332 + <b>Gender</b>
  333 + </h5>
  334 + </v-flex>
  335 + <v-flex sm6 xs8>
  336 + <h5 class="my-1">{{ editedItem.gender }}</h5>
  337 + </v-flex>
  338 + </v-layout>
  339 + <v-layout>
  340 + <v-flex xs5 sm6>
  341 + <h5 class="right my-1">
  342 + <b>Religion:</b>
  343 + </h5>
  344 + </v-flex>
  345 + <v-flex sm6 xs8>
  346 + <h5 class="my-1">{{ editedItem.religion }}</h5>
  347 + </v-flex>
  348 + </v-layout>
  349 + <v-layout>
  350 + <v-flex xs5 sm6>
  351 + <h5 class="right my-1">
  352 + <b>Role:</b>
  353 + </h5>
  354 + </v-flex>
  355 + <v-flex sm6 xs8>
  356 + <h5 class="my-1">{{ editedItem.role }}</h5>
  357 + </v-flex>
  358 + </v-layout>
  359 + <v-layout>
  360 + <v-flex xs5 sm6>
  361 + <h5 class="right my-1">
  362 + <b>Phone:</b>
  363 + </h5>
  364 + </v-flex>
  365 + <v-flex sm6 xs8>
  366 + <h5 class="my-1">{{ editedItem.phone }}</h5>
  367 + </v-flex>
  368 + </v-layout>
  369 + <v-layout>
  370 + <v-flex xs5 sm6>
  371 + <h5 class="right my-1">
  372 + <b>Joining Date:</b>
  373 + </h5>
  374 + </v-flex>
  375 + <v-flex sm6 xs8>
  376 + <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
  377 + </v-flex>
  378 + </v-layout>
  379 + <v-layout>
  380 + <v-flex xs5 sm6>
  381 + <h5 class="right my-1">
  382 + <b>Date Of Birth:</b>
  383 + </h5>
  384 + </v-flex>
  385 + <v-flex sm6 xs8>
  386 + <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
  387 + </v-flex>
  388 + </v-layout>
  389 + <v-layout>
  390 + <v-flex xs6 sm6>
  391 + <h5 class="right my-1">
  392 + <b>Address:</b>
  393 + </h5>
  394 + </v-flex>
  395 + <v-flex sm6 xs8>
  396 + <h5 class="my-1">{{ editedItem.address }}</h5>
  397 + </v-flex>
  398 + </v-layout>
  399 + </v-flex>
  400 + </v-layout>
  401 + </v-container>
  402 + </v-card-text>
  403 + </v-card>
  404 + </v-dialog>
  405 + <v-snackbar
  406 + :timeout="timeout"
  407 + :top="y === 'top'"
  408 + :right="x === 'right'"
  409 + :vertical="mode === 'vertical'"
  410 + v-model="snackbar"
  411 + color="success"
  412 + >{{ text }}</v-snackbar>
  413 +
  414 + <!-- ****** EXISTING-USER TABLE DATA****** -->
  415 +
  416 + <v-data-table
  417 + :headers="headers"
  418 + :items="desserts"
  419 + :pagination.sync="pagination"
  420 + :search="search"
  421 + >
  422 + <template slot="items" slot-scope="props">
  423 + <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
  424 + <td id="td" class="text-xs-center">
  425 + <v-avatar>
  426 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  427 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  428 + </v-avatar>
  429 + </td>
  430 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  431 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  432 + <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
  433 + <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td>
  434 + <td id="td" class="text-xs-center">{{ props.item.phone }}</td>
  435 + <td class="text-xs-center">
  436 + <span>
  437 + <img
  438 + style="cursor:pointer; width:25px; height:18px; "
  439 + class="mr-5"
  440 + @click="profile(props.item)"
  441 + src="/static/icon/eye1.png"
  442 + />
  443 + <img
  444 + style="cursor:pointer; width:20px; height:18px; "
  445 + class="mr-5"
  446 + @click="editItem(props.item)"
  447 + src="/static/icon/edit1.png"
  448 + />
  449 + <img
  450 + style="cursor:pointer;width:20px; height:20px; "
  451 + class="mr-5"
  452 + @click="deleteItem(props.item)"
  453 + src="/static/icon/delete1.png"
  454 + />
  455 + </span>
  456 + </td>
  457 + </template>
  458 + <v-alert
  459 + slot="no-results"
  460 + :value="true"
  461 + color="error"
  462 + icon="warning"
  463 + >Your search for "{{ search }}" found no results.</v-alert>
  464 + </v-data-table>
  465 + </v-tab-item>
  466 +
  467 + <!-- ****** Add User Data****** -->
  468 + <v-tab-item>
  469 + <v-container>
  470 + <v-snackbar
  471 + :timeout="timeout"
  472 + :top="y === 'top'"
  473 + :right="x === 'right'"
  474 + :vertical="mode === 'vertical'"
  475 + v-model="snackbar"
  476 + color="success"
  477 + >{{ text }}</v-snackbar>
  478 + <v-flex xs12 sm12 class="my-4">
  479 + <v-card flat>
  480 + <v-form ref="form" v-model="valid" lazy-validation>
  481 + <v-container fluid>
  482 + <v-layout>
  483 + <v-flex
  484 + xs12
  485 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  486 + >
  487 + <v-avatar size="100px">
  488 + <img src="/static/icon/user.png" v-if="!imageUrl" />
  489 + </v-avatar>
  490 + <img
  491 + :src="imageUrl"
  492 + height="150"
  493 + v-if="imageUrl"
  494 + style="border-radius:50%; width:200px"
  495 + />
  496 + </v-flex>
  497 + </v-layout>
  498 + <v-layout>
  499 + <v-flex xs12 sm6>
  500 + <v-layout>
  501 + <v-flex xs4 class="pt-4 subheading">
  502 + <label class="right">Name:</label>
  503 + </v-flex>
  504 + <v-flex xs8 class="ml-3">
  505 + <v-text-field
  506 + v-model="addUser.name"
  507 + placeholder="fill your Name"
  508 + name="name"
  509 + type="text"
  510 + :rules="nameRules"
  511 + required
  512 + ></v-text-field>
  513 + </v-flex>
  514 + </v-layout>
  515 + </v-flex>
  516 + <v-flex xs12 sm6>
  517 + <v-layout>
  518 + <v-flex xs4 class="pt-4 subheading">
  519 + <label class="right">Email ID:</label>
  520 + </v-flex>
  521 + <v-flex xs8 class="ml-3">
  522 + <v-text-field
  523 + placeholder="fill your email"
  524 + :rules="emailRules"
  525 + v-model="addUser.email"
  526 + type="text"
  527 + name="email"
  528 + required
  529 + ></v-text-field>
  530 + </v-flex>
  531 + </v-layout>
  532 + </v-flex>
  533 + </v-layout>
  534 + <v-layout>
  535 + <v-flex xs12 sm6>
  536 + <v-layout>
  537 + <v-flex xs4 class="pt-4 subheading">
  538 + <label class="right">Date of Birth:</label>
  539 + </v-flex>
  540 + <v-flex xs8 class="ml-3">
  541 + <v-menu
  542 + ref="menu"
  543 + :close-on-content-click="false"
  544 + v-model="menu"
  545 + :nudge-right="40"
  546 + lazy
  547 + transition="scale-transition"
  548 + offset-y
  549 + full-width
  550 + min-width="290px"
  551 + >
  552 + <v-text-field
  553 + slot="activator"
  554 + :rules="dateRules"
  555 + v-model="addUser.dob"
  556 + placeholder="Select DOB"
  557 + ></v-text-field>
  558 + <v-date-picker
  559 + ref="picker"
  560 + v-model="addUser.dob"
  561 + :max="new Date().toISOString().substr(0, 10)"
  562 + min="1950-01-01"
  563 + @input="menu = false"
  564 + ></v-date-picker>
  565 + </v-menu>
  566 + </v-flex>
  567 + </v-layout>
  568 + </v-flex>
  569 + <v-flex xs12 sm6>
  570 + <v-layout>
  571 + <v-flex xs4 class="pt-4 subheading">
  572 + <label class="right">Gender:</label>
  573 + </v-flex>
  574 + <v-flex xs8 class="ml-3">
  575 + <v-select
  576 + v-model="addUser.gender"
  577 + :items="gender"
  578 + label="Selct Gender "
  579 + :rules="genderRules"
  580 + required
  581 + ></v-select>
  582 + </v-flex>
  583 + </v-layout>
  584 + </v-flex>
  585 + </v-layout>
  586 + <v-layout>
  587 + <v-flex xs12 sm6>
  588 + <v-layout>
  589 + <v-flex xs4 class="pt-4 subheading">
  590 + <label class="right">Religion:</label>
  591 + </v-flex>
  592 + <v-flex xs8 class="ml-3">
  593 + <v-text-field
  594 + v-model="addUser.religion"
  595 + placeholder="fill your Religion"
  596 + name="Religion"
  597 + type="text"
  598 + :rules="religionRules"
  599 + required
  600 + ></v-text-field>
  601 + </v-flex>
  602 + </v-layout>
  603 + </v-flex>
  604 + <v-flex xs12 sm6>
  605 + <v-layout>
  606 + <v-flex xs4 class="pt-4 subheading">
  607 + <label class="right">Joining Date:</label>
  608 + </v-flex>
  609 + <v-flex xs8 class="ml-3">
  610 + <v-menu
  611 + ref="menu1"
  612 + :close-on-content-click="false"
  613 + v-model="menu1"
  614 + :nudge-right="40"
  615 + lazy
  616 + transition="scale-transition"
  617 + offset-y
  618 + full-width
  619 + min-width="290px"
  620 + >
  621 + <v-text-field
  622 + slot="activator"
  623 + :rules="joinDateRules"
  624 + v-model="addUser.joinDate"
  625 + placeholder="Select date"
  626 + ></v-text-field>
  627 + <v-date-picker
  628 + ref="picker"
  629 + v-model="addUser.joinDate"
  630 + :max="new Date().toISOString().substr(0, 10)"
  631 + min="1950-01-01"
  632 + @input="menu1 = false"
  633 + ></v-date-picker>
  634 + </v-menu>
  635 + </v-flex>
  636 + </v-layout>
  637 + </v-flex>
  638 + </v-layout>
  639 + <v-layout>
  640 + <v-flex xs12 sm6>
  641 + <v-layout>
  642 + <v-flex xs4 class="pt-4 subheading">
  643 + <label class="right">Phone :</label>
  644 + </v-flex>
  645 + <v-flex xs8 class="ml-3">
  646 + <v-text-field
  647 + v-model="addUser.mobileNo"
  648 + placeholder="fill your Phone Number"
  649 + name="mobileNo"
  650 + type="number"
  651 + :rules="mobileNoRules"
  652 + required
  653 + ></v-text-field>
  654 + </v-flex>
  655 + </v-layout>
  656 + </v-flex>
  657 + <v-flex xs12 sm6>
  658 + <v-layout>
  659 + <v-flex xs4 class="pt-4 subheading">
  660 + <label class="right">Select Role:</label>
  661 + </v-flex>
  662 + <v-flex xs8 class="ml-3">
  663 + <v-autocomplete
  664 + v-model="addUser.role"
  665 + :rules="role"
  666 + :items="userRole"
  667 + item-text="name"
  668 + item-value="name"
  669 + placeholder="Select Role Name"
  670 + required
  671 + ></v-autocomplete>
  672 + </v-flex>
  673 + </v-layout>
  674 + </v-flex>
  675 + </v-layout>
  676 + <v-layout>
  677 + <v-flex xs12 sm6>
  678 + <v-layout>
  679 + <v-flex xs4 class="pt-4 subheading">
  680 + <label class="right">Username:</label>
  681 + </v-flex>
  682 + <v-flex xs8 class="ml-3">
  683 + <v-text-field
  684 + v-model="addUser.userName"
  685 + placeholder="fill your User Name"
  686 + type="text"
  687 + :rules="userNameRules"
  688 + required
  689 + ></v-text-field>
  690 + </v-flex>
  691 + </v-layout>
  692 + </v-flex>
  693 + <v-flex xs12 sm6>
  694 + <v-layout>
  695 + <v-flex xs4 class="pt-4 subheading">
  696 + <label class="right">Password:</label>
  697 + </v-flex>
  698 + <v-flex xs8 class="ml-3">
  699 + <v-text-field
  700 + v-model="addUser.password"
  701 + placeholder="fill your Password"
  702 + :rules="passwordRules"
  703 + required
  704 + ></v-text-field>
  705 + </v-flex>
  706 + </v-layout>
  707 + </v-flex>
  708 + </v-layout>
  709 + <v-layout>
  710 + <v-flex xs12 sm6>
  711 + <v-layout>
  712 + <v-flex xs4 class="pt-4 subheading">
  713 + <label class="right">Uplaod Image:</label>
  714 + </v-flex>
  715 + <v-flex xs8 class="ml-3">
  716 + <v-text-field
  717 + label="Select Image"
  718 + @click="pickFile"
  719 + v-model="imageName"
  720 + append-icon="attach_file"
  721 + ></v-text-field>
  722 + <input
  723 + type="file"
  724 + style="display:none"
  725 + ref="image"
  726 + accept="image/*"
  727 + @change="onFilePicked"
  728 + />
  729 + </v-flex>
  730 + </v-layout>
  731 + </v-flex>
  732 + <v-flex xs12 sm6>
  733 + <v-layout>
  734 + <v-flex xs4 class="pt-4 subheading">
  735 + <label class="right">Address:</label>
  736 + </v-flex>
  737 + <v-flex xs8 class="ml-3">
  738 + <v-text-field
  739 + name="input-4-3"
  740 + v-model="addUser.presentAddress"
  741 + :rules="presentAddress"
  742 + placeholder="fill Your present Address"
  743 + required
  744 + ></v-text-field>
  745 + </v-flex>
  746 + </v-layout>
  747 + </v-flex>
  748 + </v-layout>
  749 + <v-layout>
  750 + <v-flex xs12 sm12>
  751 + <v-card-actions>
  752 + <v-btn @click="clear" round dark>clear</v-btn>
  753 + <v-spacer></v-spacer>
  754 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  755 + </v-card-actions>
  756 + </v-flex>
  757 + </v-layout>
  758 + </v-container>
  759 + </v-form>
  760 + </v-card>
  761 + </v-flex>
  762 + </v-container>
  763 + </v-tab-item>
  764 + </v-tabs>
  765 + <div class="loader" v-if="showLoader">
  766 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  767 + </div>
  768 + </v-app>
  769 +</template>
  770 +
  771 +<script>
  772 +import http from "@/Services/http.js";
  773 +import Util from "@/util";
  774 +import moment from "moment";
  775 +
  776 +export default {
  777 + data: () => ({
  778 + component: "report-generate",
  779 + snackbar: false,
  780 + y: "top",
  781 + x: "right",
  782 + mode: "",
  783 + timeout: 3000,
  784 + text: "",
  785 + showLoader: false,
  786 + loading: false,
  787 + date: null,
  788 + search: "",
  789 + menu: false,
  790 + menu1: false,
  791 + menu2: false,
  792 + menu3: false,
  793 + dialog: false,
  794 + dialog1: false,
  795 + valid: true,
  796 + isActive: true,
  797 + newActive: false,
  798 + pagination: {
  799 + rowsPerPage: 15
  800 + },
  801 + imageData: {},
  802 + imageName: "",
  803 + imageUrl: "",
  804 + imageFile: "",
  805 + nameRules: [v => !!v || "Name is required"],
  806 + dateRules: [v => !!v || " DOB is required"],
  807 + genderRules: [v => !!v || " Gender Name is required"],
  808 + pincode: [v => !!v || " Pincode is required"],
  809 + role: [v => !!v || "Role Name is required"],
  810 + permanentAddress: [v => !!v || " Permanent Address is required"],
  811 + presentAddress: [v => !!v || " Present Address is required"],
  812 + mobileNoRules: [v => !!v || "Phone Number is required"],
  813 + religionRules: [v => !!v || "Religion Name is required"],
  814 + joinDateRules: [v => !!v || " Join Date is required"],
  815 + userNameRules: [v => !!v || " User Name is required"],
  816 + passwordRules: [v => !!v || " Password is required"],
  817 + errorMessages: "",
  818 + userRole: [],
  819 + emailRules: [
  820 + v => !!v || "E-mail is required",
  821 + v =>
  822 + /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
  823 + "E-mail must be valid"
  824 + ],
  825 + gender: ["Male", "Female"],
  826 + headers: [
  827 + {
  828 + text: "No",
  829 + align: "center",
  830 + sortable: false,
  831 + value: "No"
  832 + },
  833 + {
  834 + text: "Profile Pic",
  835 + value: "profilePicUrl",
  836 + sortable: false,
  837 + align: "center"
  838 + },
  839 + { text: "Name", value: "name", sortable: false, align: "center" },
  840 + { text: "Email", value: "email", sortable: false, align: "center" },
  841 + { text: "DOB", value: "dob", sortable: false, align: "center" },
  842 + {
  843 + text: "Joining Date",
  844 + value: "joiningDate",
  845 + sortable: false,
  846 + align: "center"
  847 + },
  848 + {
  849 + text: "Phone",
  850 + value: "phone",
  851 + sortable: false,
  852 + align: "center"
  853 + },
  854 + { text: "Action", value: "", sortable: false, align: "center" }
  855 + ],
  856 + desserts: [],
  857 + editedIndex: -1,
  858 + upload: "",
  859 + editedItem: {
  860 + role: "",
  861 + name: "",
  862 + email: "",
  863 + dob: null,
  864 + gender: "",
  865 + role: "",
  866 + address: "",
  867 + phone: "",
  868 + religion: "",
  869 + joiningDate: null
  870 + },
  871 + addUser: {
  872 + role: "",
  873 + name: "",
  874 + email: "",
  875 + dob: null,
  876 + gender: "",
  877 + pincode: "",
  878 + role: "",
  879 + permanentAddress: "",
  880 + presentAddress: "",
  881 + mobileNo: "",
  882 + religion: "",
  883 + joiningDate: null
  884 + }
  885 + }),
  886 + watch: {
  887 + menu(val) {
  888 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  889 + },
  890 + menu1(val) {
  891 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  892 + }
  893 + },
  894 + methods: {
  895 + save(date) {
  896 + this.$refs.menu.save(date);
  897 + },
  898 + save(date) {
  899 + this.$refs.menu1.save(date);
  900 + },
  901 + pickFile() {
  902 + this.$refs.image.click();
  903 + },
  904 + onFilePicked(e) {
  905 + // console.log(e)
  906 + const files = e.target.files;
  907 + this.upload = e.target.files[0];
  908 + console.log("imageData-upload========>", this.upload);
  909 + if (files[0] !== undefined) {
  910 + this.imageName = files[0].name;
  911 + if (this.imageName.lastIndexOf(".") <= 0) {
  912 + return;
  913 + }
  914 + const fr = new FileReader();
  915 + fr.readAsDataURL(files[0]);
  916 + fr.addEventListener("load", () => {
  917 + this.imageUrl = fr.result;
  918 + this.imageFile = files[0]; // this is an image file that can be sent to server...
  919 + // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  920 + // console.log("upload=======>", this.imageData.imageUrl);
  921 + console.log("imageFile", this.imageUrl);
  922 + });
  923 + } else {
  924 + this.imageName = "";
  925 + this.imageFile = "";
  926 + this.imageUrl = "";
  927 + }
  928 + },
  929 + dates: function(date) {
  930 + return moment(date).format("MMMM DD, YYYY");
  931 + },
  932 + getUsersList() {
  933 + this.showLoader = true;
  934 + var token = this.$store.state.token;
  935 + http()
  936 + .get("/getUsersList", {
  937 + headers: { Authorization: "Bearer " + token }
  938 + })
  939 + .then(response => {
  940 + this.desserts = response.data.data;
  941 + this.showLoader = false;
  942 + console.log("UserList=====>", this.desserts);
  943 + })
  944 + .catch(error => {
  945 + this.showLoader = false;
  946 + if (error.response.status === 401) {
  947 + this.$router.replace({ path: "/" });
  948 + this.$store.dispatch("setToken", null);
  949 + this.$store.dispatch("Id", null);
  950 + }
  951 + });
  952 + },
  953 + editItem(item) {
  954 + this.editedIndex = this.desserts.indexOf(item);
  955 + this.editedItem = Object.assign({}, item);
  956 + this.editedItem.dob =
  957 + this.editedItem.dob != undefined
  958 + ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
  959 + : (this.editedItem.dob = "");
  960 + for (let i = 0; i < this.userRole.length; i++) {
  961 + if (this.userRole[i].role === this.editedItem.role) {
  962 + this.editedItem.role = this.userRole[i].name;
  963 + }
  964 + }
  965 + this.dialog = true;
  966 + },
  967 + profile(item) {
  968 + this.editedIndex = this.desserts.indexOf(item);
  969 + this.editedItem = Object.assign({}, item);
  970 + this.dialog1 = true;
  971 + for (let i = 0; i < this.userRole.length; i++) {
  972 + if (this.userRole[i].role === this.editedItem.role) {
  973 + this.editedItem.role = this.userRole[i].name;
  974 + }
  975 + }
  976 + },
  977 + deleteItem(item) {
  978 + let deleteUser = {
  979 + UserId: item._id
  980 + };
  981 + // console.log("deleteUers",deleteUser)
  982 + http()
  983 + .delete(
  984 + "/deleteUser",
  985 + confirm("Are you sure you want to delete this?") && {
  986 + params: deleteUser
  987 + }
  988 + )
  989 + .then(response => {
  990 + // console.log("deleteUers",deleteUser)
  991 + if ((this.snackbar = true)) {
  992 + this.text = "Successfully delete Existing User";
  993 + }
  994 + this.getUsersList();
  995 + })
  996 + .catch(error => {
  997 + console.log(error);
  998 + });
  999 + },
  1000 + activeTab(type) {
  1001 + switch (type) {
  1002 + case "existing":
  1003 + this.newActive = false;
  1004 + this.isActive = true;
  1005 + break;
  1006 +
  1007 + default:
  1008 + this.newActive = true;
  1009 + this.isActive = false;
  1010 + break;
  1011 + }
  1012 + },
  1013 + close() {
  1014 + this.dialog = false;
  1015 + setTimeout(() => {
  1016 + this.editedItem = Object.assign({}, this.defaultItem);
  1017 + this.editedIndex = -1;
  1018 + }, 300);
  1019 + },
  1020 + close1() {
  1021 + this.dialog1 = false;
  1022 + },
  1023 + submit() {
  1024 + if (this.$refs.form.validate()) {
  1025 + let addUserData = {
  1026 + name: this.addUser.name,
  1027 + email: this.addUser.email,
  1028 + dob: this.addUser.dob,
  1029 + gender: this.addUser.gender,
  1030 + religion: this.addUser.religion,
  1031 + role: this.addUser.role,
  1032 + address: this.addUser.presentAddress,
  1033 + phone: this.addUser.mobileNo,
  1034 + religion: this.addUser.religion,
  1035 + joiningDate: this.addUser.joinDate
  1036 + };
  1037 + if (this.imageUrl) {
  1038 + var str = this.imageUrl;
  1039 + const [baseUrl, imageUrl] = str.split(/,/);
  1040 + addUserData.profilePicUrl = imageUrl;
  1041 + }
  1042 + this.loading = true;
  1043 + http()
  1044 + .post("/createUser", addUserData)
  1045 + .then(response => {
  1046 + this.getUsersList();
  1047 + if ((this.snackbar = true)) {
  1048 + this.text = "New User added successfully";
  1049 + }
  1050 +
  1051 + this.clear();
  1052 + this.loading = false;
  1053 + })
  1054 + .catch(error => {
  1055 + // console.log(error);
  1056 + if ((this.snackbar = true)) {
  1057 + this.text = error.response.data.message;
  1058 + }
  1059 + this.loading = false;
  1060 + });
  1061 + }
  1062 + },
  1063 + clear() {
  1064 + this.$refs.form.reset();
  1065 + },
  1066 + save() {
  1067 + this.loading = true;
  1068 + for (let i = 0; i < this.userRole.length; i++) {
  1069 + if (this.userRole[i].name === this.editedItem.role) {
  1070 + this.editedItem.role = this.userRole[i].role;
  1071 + }
  1072 + }
  1073 + this.editedItem.userId = this.editedItem._id;
  1074 + if (this.imageUrl) {
  1075 + var str = this.imageUrl;
  1076 + const [baseUrl, imageUrl] = str.split(/,/);
  1077 + this.editedItem.upload = imageUrl;
  1078 + }
  1079 + http()
  1080 + .put("/updateUser", this.editedItem)
  1081 + .then(response => {
  1082 + if ((this.snackbar = true)) {
  1083 + this.text = "Successfully Edit Existing User";
  1084 + }
  1085 + this.loading = false;
  1086 + this.getUsersList();
  1087 + this.close();
  1088 + })
  1089 + .catch(error => {
  1090 + console.log(error);
  1091 + this.loading = false;
  1092 + });
  1093 + },
  1094 + getRole() {
  1095 + this.showLoader = true;
  1096 + var token = this.$store.state.token;
  1097 + http()
  1098 + .get("/getRolesList", {
  1099 + headers: { Authorization: "Bearer " + token }
  1100 + })
  1101 + .then(response => {
  1102 + this.userRole = response.data.data;
  1103 + this.showLoader = false;
  1104 + // console.log("UserList=====>",this.desserts)
  1105 + })
  1106 + .catch(error => {
  1107 + this.showLoader = false;
  1108 + if (error.response.status === 401) {
  1109 + this.$router.replace({ path: "/" });
  1110 + this.$store.dispatch("setToken", null);
  1111 + this.$store.dispatch("Id", null);
  1112 + }
  1113 + });
  1114 + }
  1115 + },
  1116 + mounted() {
  1117 + this.getUsersList();
  1118 + this.getRole();
  1119 + },
  1120 + created() {
  1121 + this.$root.$on("app:search", search => {
  1122 + this.search = search;
  1123 + });
  1124 + },
  1125 + beforeDestroy() {
  1126 + // dont forget to remove the listener
  1127 + this.$root.$off("app:search");
  1128 + }
  1129 +};
  1130 +</script>
  1131 +<style scoped>
  1132 +.active {
  1133 + background-color: gray;
  1134 + color: white !important;
  1135 +}
  1136 +.activebtn {
  1137 + color: black !important;
  1138 +}
  1139 +</style>
0 1140 \ No newline at end of file
... ...
src/pages/socialMedia/socialMedia.vue
Diff comments   View file @687e0b9
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-tabs grow slider-color="black">
  3 + <v-tabs grow slider-color="gray">
4 4 <v-tab
5 5 ripple
6 6 @click="activeTab('existing')"
... ... @@ -173,7 +173,7 @@
173 173 :search="search"
174 174 >
175 175 <template slot="items" slot-scope="props">
176   - <td id="tabeleData" class="text-xs-center">{{ props.index}}</td>
  176 + <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td>
177 177 <td id="tabeleData" class="text-xs-center">{{ props.item.type}}</td>
178 178 <td id="tabeleData" class="text-xs-center">{{ props.item.linkUrl}}</td>
179 179  
... ... @@ -535,7 +535,7 @@ export default {
535 535 max-width: 200px !important;
536 536 }
537 537 .active {
538   - background-color: black;
  538 + background-color: gray;
539 539 color: white !important;
540 540 }
541 541 .activebtn {
... ...
src/router/paths.js
Diff comments   View file @687e0b9
... ... @@ -190,9 +190,9 @@ export default [{
190 190 )
191 191 },
192 192 {
193   - path: '/subjects',
  193 + path: '/subject',
194 194 meta: {},
195   - name: 'Subject',
  195 + name: 'subject',
196 196 props: (route) => ({ type: route.query.type }),
197 197 component: () =>
198 198 import (
... ... @@ -260,5 +260,197 @@ export default [{
260 260 /* webpackMode: "lazy-once" */
261 261 `@/pages/Holiday/holiday.vue`
262 262 )
  263 + },
  264 + {
  265 + path: '/user',
  266 + meta: {},
  267 + name: 'User',
  268 + props: (route) => ({ type: route.query.type }),
  269 + component: () =>
  270 + import (
  271 + /* webpackChunkName: "routes" */
  272 + /* webpackMode: "lazy-once" */
  273 + `@/pages/User/user.vue`
  274 + )
  275 + },
  276 + {
  277 + path: '/AttendenceStudent',
  278 + meta: {},
  279 + name: 'studentAttendence',
  280 + props: (route) => ({ type: route.query.type }),
  281 + component: () =>
  282 + import (
  283 + /* webpackChunkName: "routes" */
  284 + /* webpackMode: "lazy-once" */
  285 + `@/pages/Attendence/studentAttendence.vue`
  286 + )
  287 + },
  288 + {
  289 + path: '/AttendenceTeacher',
  290 + meta: {},
  291 + name: 'teacherAttendence',
  292 + props: (route) => ({ type: route.query.type }),
  293 + component: () =>
  294 + import (
  295 + /* webpackChunkName: "routes" */
  296 + /* webpackMode: "lazy-once" */
  297 + `@/pages/Attendence/teacherAttendence.vue`
  298 + )
  299 + },
  300 + {
  301 + path: '/AttendenceUser',
  302 + meta: {},
  303 + name: 'userAttendence',
  304 + props: (route) => ({ type: route.query.type }),
  305 + component: () =>
  306 + import (
  307 + /* webpackChunkName: "routes" */
  308 + /* webpackMode: "lazy-once" */
  309 + `@/pages/Attendence/userAttendence.vue`
  310 + )
  311 + },
  312 + {
  313 + path: '/feeTypes',
  314 + meta: {},
  315 + name: 'feeTypes',
  316 + props: (route) => ({ type: route.query.type }),
  317 + component: () =>
  318 + import (
  319 + /* webpackChunkName: "routes" */
  320 + /* webpackMode: "lazy-once" */
  321 + `@/pages/Account/feeTypes.vue`
  322 + )
  323 + },
  324 + {
  325 + path: '/invoice',
  326 + meta: {},
  327 + name: 'Invoice',
  328 + props: (route) => ({ type: route.query.type }),
  329 + component: () =>
  330 + import (
  331 + /* webpackChunkName: "routes" */
  332 + /* webpackMode: "lazy-once" */
  333 + `@/pages/Account/invoice.vue`
  334 + )
  335 + },
  336 + {
  337 + path: '/paymentHistory',
  338 + meta: {},
  339 + name: 'paymentHistory',
  340 + props: (route) => ({ type: route.query.type }),
  341 + component: () =>
  342 + import (
  343 + /* webpackChunkName: "routes" */
  344 + /* webpackMode: "lazy-once" */
  345 + `@/pages/Account/paymentHistory.vue`
  346 + )
  347 + },
  348 + {
  349 + path: '/expense',
  350 + meta: {},
  351 + name: 'Expense',
  352 + props: (route) => ({ type: route.query.type }),
  353 + component: () =>
  354 + import (
  355 + /* webpackChunkName: "routes" */
  356 + /* webpackMode: "lazy-once" */
  357 + `@/pages/Account/expense.vue`
  358 + )
  359 + },
  360 + {
  361 + path: '/income',
  362 + meta: {},
  363 + name: 'Income',
  364 + props: (route) => ({ type: route.query.type }),
  365 + component: () =>
  366 + import (
  367 + /* webpackChunkName: "routes" */
  368 + /* webpackMode: "lazy-once" */
  369 + `@/pages/Account/income.vue`
  370 + )
  371 + },
  372 + {
  373 + path: '/libraryMember',
  374 + meta: {},
  375 + name: 'libraryMember',
  376 + props: (route) => ({ type: route.query.type }),
  377 + component: () =>
  378 + import (
  379 + /* webpackChunkName: "routes" */
  380 + /* webpackMode: "lazy-once" */
  381 + `@/pages/Library/member.vue`
  382 + )
  383 + },
  384 + {
  385 + path: '/books',
  386 + meta: {},
  387 + name: 'Books',
  388 + props: (route) => ({ type: route.query.type }),
  389 + component: () =>
  390 + import (
  391 + /* webpackChunkName: "routes" */
  392 + /* webpackMode: "lazy-once" */
  393 + `@/pages/Library/books.vue`
  394 + )
  395 + },
  396 + {
  397 + path: '/issue',
  398 + meta: {},
  399 + name: 'Issue',
  400 + props: (route) => ({ type: route.query.type }),
  401 + component: () =>
  402 + import (
  403 + /* webpackChunkName: "routes" */
  404 + /* webpackMode: "lazy-once" */
  405 + `@/pages/Library/issue.vue`
  406 + )
  407 + },
  408 + {
  409 + path: '/e-books',
  410 + meta: {},
  411 + name: 'eBooks',
  412 + props: (route) => ({ type: route.query.type }),
  413 + component: () =>
  414 + import (
  415 + /* webpackChunkName: "routes" */
  416 + /* webpackMode: "lazy-once" */
  417 + `@/pages/Library/eBook.vue`
  418 + )
  419 + },
  420 + {
  421 + path: '/invoiceId/:invoiceid',
  422 + meta: {},
  423 + name: 'EditInvoice',
  424 + // props: (route) => ({ type: route.query.type }),
  425 + component: () =>
  426 + import (
  427 + /* webpackChunkName: "routes" */
  428 + /* webpackMode: "lazy-once" */
  429 + `@/pages/Account/editInvoice.vue`
  430 + )
  431 + },
  432 + {
  433 + path: '/StudentsAttendence/:id',
  434 + meta: {},
  435 + name: 'ViewStudentsAttendence',
  436 + props: (route) => ({ type: route.query.type }),
  437 + component: () =>
  438 + import (
  439 + /* webpackChunkName: "routes" */
  440 + /* webpackMode: "lazy-once" */
  441 + `@/pages/Attendence/viewStudentsAttendence.vue`
  442 + )
  443 + },
  444 + {
  445 + path: '/viewInvoice/:viewInvoiceId',
  446 + meta: {},
  447 + name: 'ViewInvoice',
  448 + props: (route) => ({ type: route.query.type }),
  449 + component: () =>
  450 + import (
  451 + /* webpackChunkName: "routes" */
  452 + /* webpackMode: "lazy-once" */
  453 + `@/pages/Account/viewInvoice.vue`
  454 + )
263 455 }
264 456 ];
265 457 \ No newline at end of file
... ...
static/css/custom.css
Diff comments   View file @687e0b9
... ... @@ -12,7 +12,7 @@
12 12 }
13 13  
14 14 .fixcolors {
15   - background: #39b982 !important;
  15 + background: #444B54 !important;
16 16 }
17 17  
18 18 .fc-toolbar .fc-state-active,
... ... @@ -69,6 +69,10 @@
69 69 min-width: 120px !important;
70 70 }
71 71  
  72 +.paymentStatus {
  73 + border-radius: 4px;
  74 +}
  75 +
72 76 .primary {
73 77 background-color: #aaa !important;
74 78 border-color: #aaa !important;
... ...
static/logoIntrack.png
Diff comments   View file @687e0b9

58.6 KB
static/schoolIcons/Account.png
Diff comments   View file @687e0b9

13.8 KB
static/schoolIcons/Attendance.png
Diff comments   View file @687e0b9

23.4 KB
static/schoolIcons/Class.png
Diff comments   View file @687e0b9

23.6 KB
static/schoolIcons/Dashboard.png
Diff comments   View file @687e0b9

14.3 KB
static/schoolIcons/Events.png
Diff comments   View file @687e0b9

15.2 KB
static/schoolIcons/Gallery.png
Diff comments   View file @687e0b9

21.7 KB
static/schoolIcons/Holidays.png
Diff comments   View file @687e0b9

24.6 KB
static/schoolIcons/INTRACK_White.png
Diff comments   View file @687e0b9

21.2 KB
static/schoolIcons/Library.png
Diff comments   View file @687e0b9

15 KB
static/schoolIcons/News.png
Diff comments   View file @687e0b9

14.9 KB
static/schoolIcons/Notice_board.png
Diff comments   View file @687e0b9

16.6 KB
static/schoolIcons/Notification.png
Diff comments   View file @687e0b9

16.4 KB
static/schoolIcons/Parents.png
Diff comments   View file @687e0b9

19.2 KB
static/schoolIcons/Reminder.png
Diff comments   View file @687e0b9

15.9 KB
static/schoolIcons/Section (1).png
Diff comments   View file @687e0b9

13.3 KB
static/schoolIcons/Section.png
Diff comments   View file @687e0b9

13.3 KB
static/schoolIcons/Social_Media (1).png
Diff comments   View file @687e0b9

27 KB
static/schoolIcons/Social_Media.png
Diff comments   View file @687e0b9

27 KB
static/schoolIcons/Students.png
Diff comments   View file @687e0b9

15.6 KB
static/schoolIcons/Subjects.png
Diff comments   View file @687e0b9

19.2 KB
static/schoolIcons/Teachers.png
Diff comments   View file @687e0b9

15 KB
static/schoolIcons/Time_table.png
Diff comments   View file @687e0b9

18.3 KB
static/schoolIcons/User.png
Diff comments   View file @687e0b9

13.8 KB