mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-10 10:31:37 +00:00
Compare commits
58 Commits
demo
...
v17.2.0-st
| Author | SHA1 | Date | |
|---|---|---|---|
|
5faab90a7b | ||
|
|
104a1ceffb | ||
|
|
ce0cce00d9 | ||
|
|
41bd49d45d | ||
|
|
042979269e | ||
|
|
b294672452 | ||
|
|
db6fcc208b | ||
|
|
36403c8ebb | ||
|
|
2a8586ce45 | ||
|
|
d5ec5a6fcd | ||
|
|
8e513ccf1e | ||
|
4430754020 | ||
|
|
9d93a2b060 | ||
|
|
38a4c392fe | ||
|
|
d9dee128de | ||
|
|
b84fb68a47 | ||
|
|
3d6714008a | ||
|
|
ea954a75de | ||
|
|
4b37f2304a | ||
|
|
82244fd40e | ||
|
|
c5433cb917 | ||
|
|
cf5f13d78e | ||
|
|
ef85907d1b | ||
|
|
cafc3188cf | ||
|
|
6381362326 | ||
|
|
e1942f46fd | ||
|
|
ce656430c8 | ||
|
|
c93b1ce232 | ||
|
|
b874b37db2 | ||
|
|
4287361a09 | ||
|
|
4f19eb6171 | ||
|
|
cd13f9d9a4 | ||
|
|
db8c52f093 | ||
|
|
2189232273 | ||
|
|
36b89e75db | ||
|
|
8c2ff122b2 | ||
|
|
b2cb512b0e | ||
|
|
21652570c2 | ||
|
|
90891eb201 | ||
|
|
6c7201b77a | ||
|
|
90f869e7b9 | ||
|
|
2d2db97416 | ||
|
|
5daa2260e6 | ||
|
|
af984fcba1 | ||
|
|
97d3662417 | ||
|
|
d897a244c8 | ||
|
|
d146a92c79 | ||
|
|
27b6858b76 | ||
|
|
fcfba4c9e4 | ||
|
|
40894e0aa3 | ||
|
|
8dcf21cb1a | ||
|
|
d917f03883 | ||
|
|
0f2ddbda83 | ||
|
|
fa0d74504b | ||
|
|
ad2b19a07a | ||
|
|
4bf11591a2 | ||
|
|
f45a605b4e | ||
|
|
c150a8902c |
345
package-lock.json
generated
345
package-lock.json
generated
@ -313,6 +313,21 @@
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@angular-devkit/build-angular/node_modules/semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular-devkit/build-angular/node_modules/webpack-dev-middleware": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.0.1.tgz",
|
||||
@ -517,6 +532,21 @@
|
||||
"yarn": ">= 1.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cli/node_modules/semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/common": {
|
||||
"version": "15.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-15.1.1.tgz",
|
||||
@ -4102,9 +4132,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
|
||||
"version": "7.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
|
||||
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
@ -4135,9 +4165,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "12.20.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.46.tgz",
|
||||
"integrity": "sha512-cPjLXj8d6anFPzFvOPxS3fvly3Shm5nTfl6g8X5smexixbuGUf7hfr21J5tX9JW+UPStp/5P5R8qrKL5IyVJ+A==",
|
||||
"version": "17.0.38",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.38.tgz",
|
||||
"integrity": "sha512-5jY9RhV7c0Z4Jy09G+NIDTsCZ5G0L5n+Z+p+Y7t5VJHM30bgwzSjVtlcBxqAj+6L/swIlvtOSzr8rBk/aNyV2g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/parse-json": {
|
||||
@ -4530,12 +4560,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ajv": "^6.9.1"
|
||||
"ajv": "^8.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-colors": {
|
||||
@ -5573,9 +5606,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/core-js-compat": {
|
||||
"version": "3.25.5",
|
||||
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.5.tgz",
|
||||
"integrity": "sha512-ovcyhs2DEBUIE0MGEKHP4olCUW/XYte3Vroyxuh38rD1wAO4dHohsovUC4eAOuzFxE6b+RXvBU3UZ9o0YhUTkA==",
|
||||
"version": "3.26.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.26.1.tgz",
|
||||
"integrity": "sha512-622/KzTudvXCDLRw70iHW4KKs1aGpcRcowGWyYJr2DEBfRrd6hNJybxSWJFuZYD4ma86xhrwDDHxmDaIq4EA8A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"browserslist": "^4.21.4"
|
||||
@ -5754,6 +5787,21 @@
|
||||
"webpack": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-loader/node_modules/semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
|
||||
@ -6740,9 +6788,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/flatted": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
|
||||
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz",
|
||||
"integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
@ -8852,9 +8900,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"dependencies": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
},
|
||||
@ -9496,7 +9544,7 @@
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
@ -9698,7 +9746,7 @@
|
||||
"node_modules/os-tmpdir": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
|
||||
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
|
||||
"integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
@ -10007,7 +10055,7 @@
|
||||
"node_modules/pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
@ -10150,6 +10198,21 @@
|
||||
"webpack": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-loader/node_modules/semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-modules-extract-imports": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
|
||||
@ -10632,9 +10695,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/regexpu-core": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.1.tgz",
|
||||
"integrity": "sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==",
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz",
|
||||
"integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"regenerate": "^1.4.2",
|
||||
@ -10642,7 +10705,7 @@
|
||||
"regjsgen": "^0.7.1",
|
||||
"regjsparser": "^0.9.1",
|
||||
"unicode-match-property-ecmascript": "^2.0.0",
|
||||
"unicode-match-property-value-ecmascript": "^2.0.0"
|
||||
"unicode-match-property-value-ecmascript": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
@ -11033,18 +11096,6 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/schema-utils/node_modules/ajv-keywords": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ajv": "^8.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@ -11064,9 +11115,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"version": "7.3.7",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
|
||||
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
@ -11324,9 +11375,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.0.tgz",
|
||||
"integrity": "sha512-slTYqU2jCgMjXwresG8grhUi/cC6GjzmcfqArzaH3BN/9I/42eZk9yamNvZJdBfTubkjEdKAKs12NEztId+bUA==",
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.1.tgz",
|
||||
"integrity": "sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"accepts": "~1.3.4",
|
||||
@ -11371,6 +11422,15 @@
|
||||
"websocket-driver": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/sockjs/node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/socks": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
|
||||
@ -11924,6 +11984,15 @@
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
@ -12140,9 +12209,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/unicode-match-property-value-ecmascript": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
|
||||
"integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
|
||||
"integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
@ -12248,15 +12317,6 @@
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/validate-npm-package-license": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
|
||||
@ -12453,9 +12513,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-dev-server/node_modules/ws": {
|
||||
"version": "8.9.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
|
||||
"integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
|
||||
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
@ -12544,6 +12604,15 @@
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack/node_modules/ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack/node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
@ -12956,6 +13025,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"webpack-dev-middleware": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.0.1.tgz",
|
||||
@ -13099,6 +13177,17 @@
|
||||
"semver": "7.3.8",
|
||||
"symbol-observable": "4.0.0",
|
||||
"yargs": "17.6.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
@ -15795,9 +15884,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/json-schema": {
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
|
||||
"version": "7.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
|
||||
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/lodash": {
|
||||
@ -15828,9 +15917,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "12.20.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.46.tgz",
|
||||
"integrity": "sha512-cPjLXj8d6anFPzFvOPxS3fvly3Shm5nTfl6g8X5smexixbuGUf7hfr21J5tX9JW+UPStp/5P5R8qrKL5IyVJ+A==",
|
||||
"version": "17.0.38",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.38.tgz",
|
||||
"integrity": "sha512-5jY9RhV7c0Z4Jy09G+NIDTsCZ5G0L5n+Z+p+Y7t5VJHM30bgwzSjVtlcBxqAj+6L/swIlvtOSzr8rBk/aNyV2g==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/parse-json": {
|
||||
@ -16183,10 +16272,13 @@
|
||||
}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "4.1.3",
|
||||
@ -16953,9 +17045,9 @@
|
||||
}
|
||||
},
|
||||
"core-js-compat": {
|
||||
"version": "3.25.5",
|
||||
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.5.tgz",
|
||||
"integrity": "sha512-ovcyhs2DEBUIE0MGEKHP4olCUW/XYte3Vroyxuh38rD1wAO4dHohsovUC4eAOuzFxE6b+RXvBU3UZ9o0YhUTkA==",
|
||||
"version": "3.26.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.26.1.tgz",
|
||||
"integrity": "sha512-622/KzTudvXCDLRw70iHW4KKs1aGpcRcowGWyYJr2DEBfRrd6hNJybxSWJFuZYD4ma86xhrwDDHxmDaIq4EA8A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.21.4"
|
||||
@ -17090,6 +17182,17 @@
|
||||
"postcss-modules-values": "^4.0.0",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"semver": "^7.3.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-select": {
|
||||
@ -17861,9 +17964,9 @@
|
||||
"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="
|
||||
},
|
||||
"flatted": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
|
||||
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz",
|
||||
"integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==",
|
||||
"dev": true
|
||||
},
|
||||
"follow-redirects": {
|
||||
@ -19428,9 +19531,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -19928,7 +20031,7 @@
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true
|
||||
},
|
||||
"object-hash": {
|
||||
@ -20069,7 +20172,7 @@
|
||||
"os-tmpdir": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
|
||||
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
|
||||
"integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
|
||||
"dev": true
|
||||
},
|
||||
"p-locate": {
|
||||
@ -20315,7 +20418,7 @@
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
||||
"dev": true
|
||||
},
|
||||
"piscina": {
|
||||
@ -20389,6 +20492,17 @@
|
||||
"cosmiconfig": "^7.0.0",
|
||||
"klona": "^2.0.5",
|
||||
"semver": "^7.3.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-modules-extract-imports": {
|
||||
@ -20749,9 +20863,9 @@
|
||||
}
|
||||
},
|
||||
"regexpu-core": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.1.tgz",
|
||||
"integrity": "sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==",
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz",
|
||||
"integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerate": "^1.4.2",
|
||||
@ -20759,7 +20873,7 @@
|
||||
"regjsgen": "^0.7.1",
|
||||
"regjsparser": "^0.9.1",
|
||||
"unicode-match-property-ecmascript": "^2.0.0",
|
||||
"unicode-match-property-value-ecmascript": "^2.0.0"
|
||||
"unicode-match-property-value-ecmascript": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"regjsgen": {
|
||||
@ -21020,17 +21134,6 @@
|
||||
"ajv": "^8.8.0",
|
||||
"ajv-formats": "^2.1.1",
|
||||
"ajv-keywords": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ajv-keywords": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"select-hose": {
|
||||
@ -21049,9 +21152,9 @@
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "7.3.8",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
|
||||
"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
|
||||
"version": "7.3.7",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
|
||||
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
@ -21266,9 +21369,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"socket.io": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.0.tgz",
|
||||
"integrity": "sha512-slTYqU2jCgMjXwresG8grhUi/cC6GjzmcfqArzaH3BN/9I/42eZk9yamNvZJdBfTubkjEdKAKs12NEztId+bUA==",
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.1.tgz",
|
||||
"integrity": "sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"accepts": "~1.3.4",
|
||||
@ -21305,6 +21408,14 @@
|
||||
"faye-websocket": "^0.11.3",
|
||||
"uuid": "^8.3.2",
|
||||
"websocket-driver": "^0.7.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"socks": {
|
||||
@ -21735,6 +21846,12 @@
|
||||
"uri-js": "^4.2.2"
|
||||
}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
@ -21875,9 +21992,9 @@
|
||||
}
|
||||
},
|
||||
"unicode-match-property-value-ecmascript": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
|
||||
"integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
|
||||
"integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
|
||||
"dev": true
|
||||
},
|
||||
"unicode-property-aliases-ecmascript": {
|
||||
@ -21946,12 +22063,6 @@
|
||||
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
|
||||
"dev": true
|
||||
},
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"dev": true
|
||||
},
|
||||
"validate-npm-package-license": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
|
||||
@ -22060,6 +22171,12 @@
|
||||
"uri-js": "^4.2.2"
|
||||
}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
@ -22130,9 +22247,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": {
|
||||
"version": "8.9.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
|
||||
"integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
|
||||
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,15 +9,15 @@ import { InitialDataResolver } from 'app/app.resolvers';
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
export const appRoutes: Route[] = [
|
||||
|
||||
// Redirect empty path to '/dashboards/project'
|
||||
{path: '', pathMatch : 'full', redirectTo: 'dashboards/project'},
|
||||
// Redirect empty path to '/example'
|
||||
{path: '', pathMatch : 'full', redirectTo: 'example'},
|
||||
|
||||
// Redirect signed-in user to the '/dashboards/project'
|
||||
// Redirect signed-in user to the '/example'
|
||||
//
|
||||
// After the user signs in, the sign-in page will redirect the user to the 'signed-in-redirect'
|
||||
// path. Below is another redirection for that path to redirect the user to the desired
|
||||
// location. This is a small convenience to keep all main routes together here on this file.
|
||||
{path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
|
||||
{path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'example'},
|
||||
|
||||
// Auth routes for guests
|
||||
{
|
||||
@ -71,136 +71,7 @@ export const appRoutes: Route[] = [
|
||||
initialData: InitialDataResolver,
|
||||
},
|
||||
children: [
|
||||
|
||||
// Dashboards
|
||||
{path: 'dashboards', children: [
|
||||
{path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.module').then(m => m.ProjectModule)},
|
||||
{path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.module').then(m => m.AnalyticsModule)},
|
||||
{path: 'finance', loadChildren: () => import('app/modules/admin/dashboards/finance/finance.module').then(m => m.FinanceModule)},
|
||||
{path: 'crypto', loadChildren: () => import('app/modules/admin/dashboards/crypto/crypto.module').then(m => m.CryptoModule)},
|
||||
]},
|
||||
|
||||
// Apps
|
||||
{path: 'apps', children: [
|
||||
{path: 'academy', loadChildren: () => import('app/modules/admin/apps/academy/academy.module').then(m => m.AcademyModule)},
|
||||
{path: 'chat', loadChildren: () => import('app/modules/admin/apps/chat/chat.module').then(m => m.ChatModule)},
|
||||
{path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.module').then(m => m.ContactsModule)},
|
||||
{path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.module').then(m => m.ECommerceModule)},
|
||||
{path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
|
||||
{path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
|
||||
{path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
|
||||
{path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
|
||||
{path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.module').then(m => m.ScrumboardModule)},
|
||||
{path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
|
||||
]},
|
||||
|
||||
// Pages
|
||||
{path: 'pages', children: [
|
||||
|
||||
// Activities
|
||||
{path: 'activities', loadChildren: () => import('app/modules/admin/pages/activities/activities.module').then(m => m.ActivitiesModule)},
|
||||
|
||||
// Authentication
|
||||
{path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
|
||||
|
||||
// Coming Soon
|
||||
{path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
|
||||
|
||||
// Error
|
||||
{path: 'error', children: [
|
||||
{path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
|
||||
{path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.module').then(m => m.Error500Module)}
|
||||
]},
|
||||
|
||||
// Invoice
|
||||
{path: 'invoice', children: [
|
||||
{path: 'printable', children: [
|
||||
{path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.module').then(m => m.CompactModule)},
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.module').then(m => m.ModernModule)}
|
||||
]}
|
||||
]},
|
||||
|
||||
// Maintenance
|
||||
{path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.module').then(m => m.MaintenanceModule)},
|
||||
|
||||
// Pricing
|
||||
{path: 'pricing', children: [
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.module').then(m => m.PricingModernModule)},
|
||||
{path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.module').then(m => m.PricingSimpleModule)},
|
||||
{path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.module').then(m => m.PricingSingleModule)},
|
||||
{path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.module').then(m => m.PricingTableModule)}
|
||||
]},
|
||||
|
||||
// Profile
|
||||
{path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
|
||||
|
||||
// Settings
|
||||
{path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
|
||||
]},
|
||||
|
||||
// User Interface
|
||||
{path: 'ui', children: [
|
||||
|
||||
// Material Components
|
||||
{path: 'material-components', loadChildren: () => import('app/modules/admin/ui/material-components/material-components.module').then(m => m.MaterialComponentsModule)},
|
||||
|
||||
// Fuse Components
|
||||
{path: 'fuse-components', loadChildren: () => import('app/modules/admin/ui/fuse-components/fuse-components.module').then(m => m.FuseComponentsModule)},
|
||||
|
||||
// Other Components
|
||||
{path: 'other-components', loadChildren: () => import('app/modules/admin/ui/other-components/other-components.module').then(m => m.OtherComponentsModule)},
|
||||
|
||||
// TailwindCSS
|
||||
{path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
|
||||
|
||||
// Advanced Search
|
||||
{path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)},
|
||||
|
||||
// Animations
|
||||
{path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.module').then(m => m.AnimationsModule)},
|
||||
|
||||
// Cards
|
||||
{path: 'cards', loadChildren: () => import('app/modules/admin/ui/cards/cards.module').then(m => m.CardsModule)},
|
||||
|
||||
// Colors
|
||||
{path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
|
||||
|
||||
// Confirmation Dialog
|
||||
{path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module').then(m => m.ConfirmationDialogModule)},
|
||||
|
||||
// Datatable
|
||||
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
|
||||
|
||||
// Forms
|
||||
{path: 'forms', children: [
|
||||
{path: 'fields', loadChildren: () => import('app/modules/admin/ui/forms/fields/fields.module').then(m => m.FormsFieldsModule)},
|
||||
{path: 'layouts', loadChildren: () => import('app/modules/admin/ui/forms/layouts/layouts.module').then(m => m.FormsLayoutsModule)},
|
||||
{path: 'wizards', loadChildren: () => import('app/modules/admin/ui/forms/wizards/wizards.module').then(m => m.FormsWizardsModule)}
|
||||
]},
|
||||
|
||||
// Icons
|
||||
{path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
|
||||
|
||||
// Page Layouts
|
||||
{path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
|
||||
|
||||
// Typography
|
||||
{path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.module').then(m => m.TypographyModule)}
|
||||
]},
|
||||
|
||||
// Documentation
|
||||
{path: 'docs', children: [
|
||||
|
||||
// Changelog
|
||||
{path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
|
||||
|
||||
// Guides
|
||||
{path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)}
|
||||
]},
|
||||
|
||||
// 404 & Catch all
|
||||
{path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
|
||||
{path: '**', redirectTo: '404-not-found'}
|
||||
{path: 'example', loadChildren: () => import('app/modules/admin/example/example.module').then(m => m.ExampleModule)},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'academy',
|
||||
templateUrl : './academy.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { academyRoutes } from 'app/modules/admin/apps/academy/academy.routing';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AcademyComponent,
|
||||
AcademyDetailsComponent,
|
||||
AcademyListComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(academyRoutes),
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
MatTooltipModule,
|
||||
FuseFindByKeyPipeModule,
|
||||
SharedModule,
|
||||
MatTabsModule
|
||||
]
|
||||
})
|
||||
export class AcademyModule
|
||||
{
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError, Observable, throwError } from 'rxjs';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCategoriesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _academyService: AcademyService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Category[]>
|
||||
{
|
||||
return this._academyService.getCategories();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCoursesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _academyService: AcademyService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course[]>
|
||||
{
|
||||
return this._academyService.getCourses();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCourseResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _academyService: AcademyService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course>
|
||||
{
|
||||
return this._academyService.getCourseById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyCategoriesResolver, AcademyCourseResolver, AcademyCoursesResolver } from 'app/modules/admin/apps/academy/academy.resolvers';
|
||||
|
||||
export const academyRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: AcademyComponent,
|
||||
resolve : {
|
||||
categories: AcademyCategoriesResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: AcademyListComponent,
|
||||
resolve : {
|
||||
courses: AcademyCoursesResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: AcademyDetailsComponent,
|
||||
resolve : {
|
||||
course: AcademyCourseResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -1,104 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, tap, throwError } from 'rxjs';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyService
|
||||
{
|
||||
// Private
|
||||
private _categories: BehaviorSubject<Category[] | null> = new BehaviorSubject(null);
|
||||
private _course: BehaviorSubject<Course | null> = new BehaviorSubject(null);
|
||||
private _courses: BehaviorSubject<Course[] | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for categories
|
||||
*/
|
||||
get categories$(): Observable<Category[]>
|
||||
{
|
||||
return this._categories.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for courses
|
||||
*/
|
||||
get courses$(): Observable<Course[]>
|
||||
{
|
||||
return this._courses.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for course
|
||||
*/
|
||||
get course$(): Observable<Course>
|
||||
{
|
||||
return this._course.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get categories
|
||||
*/
|
||||
getCategories(): Observable<Category[]>
|
||||
{
|
||||
return this._httpClient.get<Category[]>('api/apps/academy/categories').pipe(
|
||||
tap((response: any) => {
|
||||
this._categories.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get courses
|
||||
*/
|
||||
getCourses(): Observable<Course[]>
|
||||
{
|
||||
return this._httpClient.get<Course[]>('api/apps/academy/courses').pipe(
|
||||
tap((response: any) => {
|
||||
this._courses.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get course by id
|
||||
*/
|
||||
getCourseById(id: string): Observable<Course>
|
||||
{
|
||||
return this._httpClient.get<Course>('api/apps/academy/courses/course', {params: {id}}).pipe(
|
||||
map((course) => {
|
||||
|
||||
// Update the course
|
||||
this._course.next(course);
|
||||
|
||||
// Return the course
|
||||
return course;
|
||||
}),
|
||||
switchMap((course) => {
|
||||
|
||||
if ( !course )
|
||||
{
|
||||
return throwError('Could not found course with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(course);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
export interface Category
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
slug?: string;
|
||||
}
|
||||
|
||||
export interface Course
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
slug?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
duration?: number;
|
||||
steps?: {
|
||||
order?: number;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
}[];
|
||||
totalSteps?: number;
|
||||
updatedAt?: number;
|
||||
featured?: boolean;
|
||||
progress?: {
|
||||
currentStep?: number;
|
||||
completed?: number;
|
||||
};
|
||||
}
|
||||
@ -1,205 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container class="flex-auto h-full">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-90 dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#matDrawer>
|
||||
<div class="flex flex-col items-start p-8 border-b">
|
||||
<!-- Back to courses -->
|
||||
<a
|
||||
class="inline-flex items-center leading-6 text-primary hover:underline"
|
||||
[routerLink]="['..']">
|
||||
<span class="inline-flex items-center">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:arrow-sm-left'"></mat-icon>
|
||||
<span class="ml-1.5 font-medium leading-5">Back to courses</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- Course category -->
|
||||
<ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
|
||||
<div
|
||||
class="mt-7 py-0.5 px-3 rounded-full text-sm font-semibold"
|
||||
[ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
|
||||
'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
|
||||
'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
|
||||
'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
|
||||
{{category.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Course title & description -->
|
||||
<div class="mt-3 text-2xl font-semibold">{{course.title}}</div>
|
||||
<div class="text-secondary">{{course.description}}</div>
|
||||
<!-- Course time -->
|
||||
<div class="mt-6 flex items-center leading-5 text-md text-secondary">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:clock'"></mat-icon>
|
||||
<div class="ml-1.5">{{course.duration}} minutes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="py-2 px-8">
|
||||
<ol>
|
||||
<ng-container *ngFor="let step of course.steps; let last = last; trackBy: trackByFn">
|
||||
<li
|
||||
class="relative group py-6"
|
||||
[class.current-step]="step.order === currentStep">
|
||||
<ng-container *ngIf="!last">
|
||||
<div
|
||||
class="absolute top-6 left-4 w-0.5 h-full -ml-px"
|
||||
[ngClass]="{'bg-primary': step.order < currentStep,
|
||||
'bg-gray-300 dark:bg-gray-600': step.order >= currentStep}"></div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="relative flex items-start cursor-pointer"
|
||||
(click)="goToStep(step.order)">
|
||||
<div
|
||||
class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset bg-card dark:bg-default"
|
||||
[ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800 ring-transparent': step.order < currentStep,
|
||||
'ring-primary': step.order === currentStep,
|
||||
'ring-gray-300 dark:ring-gray-600 group-hover:ring-gray-400': step.order > currentStep}">
|
||||
<!-- Check icon, show if the step is completed -->
|
||||
<ng-container *ngIf="step.order < currentStep">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</ng-container>
|
||||
<!-- Step order, show if the step is the current step -->
|
||||
<ng-container *ngIf="step.order === currentStep">
|
||||
<div class="text-md font-semibold text-primary dark:text-primary-500">{{step.order + 1}}</div>
|
||||
</ng-container>
|
||||
<!-- Step order, show if the step is not completed -->
|
||||
<ng-container *ngIf="step.order > currentStep">
|
||||
<div class="text-md font-semibold text-hint group-hover:text-secondary">{{step.order + 1}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="font-medium leading-4">{{step.title}}</div>
|
||||
<div class="mt-1.5 text-md leading-4 text-secondary">{{step.subtitle}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="lg:hidden flex flex-0 items-center py-2 pl-4 pr-6 sm:py-4 md:pl-6 md:pr-8 border-b lg:border-b-0 bg-card dark:bg-transparent">
|
||||
<!-- Title & Actions -->
|
||||
<a
|
||||
mat-icon-button
|
||||
[routerLink]="['..']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-sm-left'"></mat-icon>
|
||||
</a>
|
||||
<h2 class="ml-2.5 text-md sm:text-xl font-medium tracking-tight truncate">
|
||||
{{course.title}}
|
||||
</h2>
|
||||
</div>
|
||||
<mat-progress-bar
|
||||
class="hidden lg:block flex-0 h-0.5 w-full"
|
||||
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
||||
|
||||
<!-- Main -->
|
||||
<div
|
||||
class="flex-auto overflow-y-auto"
|
||||
cdkScrollable>
|
||||
|
||||
<!-- Steps -->
|
||||
<mat-tab-group
|
||||
class="fuse-mat-no-header"
|
||||
[animationDuration]="'200'"
|
||||
#courseSteps>
|
||||
<ng-container *ngFor="let step of course.steps; trackBy: trackByFn">
|
||||
<mat-tab>
|
||||
<ng-template matTabContent>
|
||||
<div
|
||||
class="prose prose-sm max-w-3xl mx-auto sm:my-2 lg:mt-4 p-6 sm:p-10 sm:py-12 rounded-2xl shadow overflow-hidden bg-card"
|
||||
[innerHTML]="step.content"></div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</ng-container>
|
||||
</mat-tab-group>
|
||||
|
||||
<!-- Navigation - Desktop -->
|
||||
<div class="z-10 sticky hidden lg:flex bottom-4 p-4">
|
||||
<div class="flex items-center justify-center mx-auto p-2 rounded-full shadow-lg bg-primary">
|
||||
<button
|
||||
class="flex-0"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToPreviousStep()">
|
||||
<span class="inline-flex items-center">
|
||||
<mat-icon
|
||||
class="mr-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="mr-1">Prev</span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
|
||||
<span>{{currentStep + 1}}</span>
|
||||
<span class="mx-0.5 text-hint">/</span>
|
||||
<span>{{course.totalSteps}}</span>
|
||||
</div>
|
||||
<button
|
||||
class="flex-0"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToNextStep()">
|
||||
<span class="inline-flex items-center">
|
||||
<span class="ml-1">Next</span>
|
||||
<mat-icon
|
||||
class="ml-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Progress & Navigation - Mobile -->
|
||||
<div class="lg:hidden flex items-center p-4 border-t bg-card">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="matDrawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:view-list'"></mat-icon>
|
||||
</button>
|
||||
<div class="flex items-center justify-center ml-1 lg:ml-2 font-medium leading-5">
|
||||
<span>{{currentStep + 1}}</span>
|
||||
<span class="mx-0.5 text-hint">/</span>
|
||||
<span>{{course.totalSteps}}</span>
|
||||
</div>
|
||||
<mat-progress-bar
|
||||
class="flex-auto ml-6 rounded-full"
|
||||
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-icon-button
|
||||
(click)="goToPreviousStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
class="ml-0.5"
|
||||
mat-icon-button
|
||||
(click)="goToNextStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,203 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { MatTabGroup } from '@angular/material/tabs';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
|
||||
@Component({
|
||||
selector : 'academy-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('courseSteps', {static: true}) courseSteps: MatTabGroup;
|
||||
categories: Category[];
|
||||
course: Course;
|
||||
currentStep: number = 0;
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = true;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private _document: Document,
|
||||
private _academyService: AcademyService,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _elementRef: ElementRef,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the categories
|
||||
this._academyService.categories$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((categories: Category[]) => {
|
||||
|
||||
// Get the categories
|
||||
this.categories = categories;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the course
|
||||
this._academyService.course$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((course: Course) => {
|
||||
|
||||
// Get the course
|
||||
this.course = course;
|
||||
|
||||
// Go to step
|
||||
this.goToStep(course.progress.currentStep);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode and drawerOpened
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Go to given step
|
||||
*
|
||||
* @param step
|
||||
*/
|
||||
goToStep(step: number): void
|
||||
{
|
||||
// Set the current step
|
||||
this.currentStep = step;
|
||||
|
||||
// Go to the step
|
||||
this.courseSteps.selectedIndex = this.currentStep;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to previous step
|
||||
*/
|
||||
goToPreviousStep(): void
|
||||
{
|
||||
// Return if we already on the first step
|
||||
if ( this.currentStep === 0 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Go to step
|
||||
this.goToStep(this.currentStep - 1);
|
||||
|
||||
// Scroll the current step selector from sidenav into view
|
||||
this._scrollCurrentStepElementIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to next step
|
||||
*/
|
||||
goToNextStep(): void
|
||||
{
|
||||
// Return if we already on the last step
|
||||
if ( this.currentStep === this.course.totalSteps - 1 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Go to step
|
||||
this.goToStep(this.currentStep + 1);
|
||||
|
||||
// Scroll the current step selector from sidenav into view
|
||||
this._scrollCurrentStepElementIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Scrolls the current step element from
|
||||
* sidenav into the view. This only happens when
|
||||
* previous/next buttons pressed as we don't want
|
||||
* to change the scroll position of the sidebar
|
||||
* when the user actually clicks around the sidebar.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _scrollCurrentStepElementIntoView(): void
|
||||
{
|
||||
// Wrap everything into setTimeout so we can make sure that the 'current-step' class points to correct element
|
||||
setTimeout(() => {
|
||||
|
||||
// Get the current step element and scroll it into view
|
||||
const currentStepElement = this._document.getElementsByClassName('current-step')[0];
|
||||
if ( currentStepElement )
|
||||
{
|
||||
currentStepElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block : 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,198 +0,0 @@
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
|
||||
cdkScrollable>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative flex-0 py-8 px-4 sm:p-16 overflow-hidden bg-gray-800 dark">
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
|
||||
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<div class="z-10 relative flex flex-col items-center">
|
||||
<h2 class="text-xl font-semibold">FUSE ACADEMY</h2>
|
||||
<div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
|
||||
What do you want to learn today?
|
||||
</div>
|
||||
<div class="max-w-2xl mt-6 sm:text-2xl text-center tracking-tight text-secondary">
|
||||
Our courses will step you through the process of a building small applications, or adding new features to existing applications.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-auto p-6 sm:p-10">
|
||||
|
||||
<div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
|
||||
<!-- Filters -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
|
||||
<mat-form-field
|
||||
class="w-full sm:w-36"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-select
|
||||
[value]="'all'"
|
||||
(selectionChange)="filterByCategory($event)">
|
||||
<mat-option [value]="'all'">All</mat-option>
|
||||
<ng-container *ngFor="let category of categories; trackBy: trackByFn">
|
||||
<mat-option [value]="category.slug">{{category.title}}</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
class="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<input
|
||||
(input)="filterByQuery(query.value)"
|
||||
placeholder="Search by title or description"
|
||||
matInput
|
||||
#query>
|
||||
</mat-form-field>
|
||||
<mat-slide-toggle
|
||||
class="mt-8 sm:mt-0 sm:ml-auto"
|
||||
[color]="'primary'"
|
||||
(change)="toggleCompleted($event)">
|
||||
Hide completed
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<!-- Courses -->
|
||||
<ng-container *ngIf="this.filteredCourses.length; else noCourses">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8 sm:mt-10">
|
||||
<ng-container *ngFor="let course of filteredCourses; trackBy: trackByFn">
|
||||
<!-- Course -->
|
||||
<div class="flex flex-col h-96 shadow rounded-2xl overflow-hidden bg-card">
|
||||
<div class="flex flex-col p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Course category -->
|
||||
<ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
|
||||
<div
|
||||
class="py-0.5 px-3 rounded-full text-sm font-semibold"
|
||||
[ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
|
||||
'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
|
||||
'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
|
||||
'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
|
||||
{{category.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Completed at least once -->
|
||||
<div class="flex items-center">
|
||||
<ng-container *ngIf="course.progress.completed > 0">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-green-600"
|
||||
[svgIcon]="'heroicons_solid:badge-check'"
|
||||
[matTooltip]="'You completed this course at least once'"></mat-icon>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Course title & description -->
|
||||
<div class="mt-4 text-lg font-medium">{{course.title}}</div>
|
||||
<div class="mt-0.5 line-clamp-2 text-secondary">{{course.description}}</div>
|
||||
<div class="w-12 h-1 my-6 border-t-2"></div>
|
||||
<!-- Course time -->
|
||||
<div class="flex items-center leading-5 text-md text-secondary">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:clock'"></mat-icon>
|
||||
<div class="ml-1.5">{{course.duration}} minutes</div>
|
||||
</div>
|
||||
<!-- Course completion -->
|
||||
<div class="flex items-center mt-2 leading-5 text-md text-secondary">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:academic-cap'"></mat-icon>
|
||||
<ng-container *ngIf="course.progress.completed === 0">
|
||||
<div class="ml-1.5">Never completed</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="course.progress.completed > 0">
|
||||
<div class="ml-1.5">
|
||||
<span>Completed</span>
|
||||
<span class="ml-1">
|
||||
<!-- Once -->
|
||||
<ng-container *ngIf="course.progress.completed === 1">once</ng-container>
|
||||
<!-- Twice -->
|
||||
<ng-container *ngIf="course.progress.completed === 2">twice</ng-container>
|
||||
<!-- Others -->
|
||||
<ng-container *ngIf="course.progress.completed > 2">{{course.progress.completed}}
|
||||
{{course.progress.completed | i18nPlural: {
|
||||
'=0' : 'time',
|
||||
'=1' : 'time',
|
||||
'other': 'times'
|
||||
} }}
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<div class="flex flex-col w-full mt-auto">
|
||||
<!-- Course progress -->
|
||||
<div class="relative h-0.5">
|
||||
<div
|
||||
class="z-10 absolute inset-x-0 h-6 -mt-3"
|
||||
[matTooltip]="course.progress.currentStep / course.totalSteps | percent"
|
||||
[matTooltipPosition]="'above'"
|
||||
[matTooltipClass]="'-mb-0.5'"></div>
|
||||
<mat-progress-bar
|
||||
class="h-0.5"
|
||||
[value]="(100 * course.progress.currentStep) / course.totalSteps"></mat-progress-bar>
|
||||
</div>
|
||||
|
||||
<!-- Course launch button -->
|
||||
<div class="px-6 py-4 text-right bg-gray-50 dark:bg-transparent">
|
||||
<a
|
||||
mat-stroked-button
|
||||
[routerLink]="[course.id]">
|
||||
<span class="inline-flex items-center">
|
||||
|
||||
<!-- Not started -->
|
||||
<ng-container *ngIf="course.progress.currentStep === 0">
|
||||
<!-- Never completed -->
|
||||
<ng-container *ngIf="course.progress.completed === 0">
|
||||
<span>Start</span>
|
||||
</ng-container>
|
||||
<!-- Completed before -->
|
||||
<ng-container *ngIf="course.progress.completed > 0">
|
||||
<span>Start again</span>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!-- Started -->
|
||||
<ng-container *ngIf="course.progress.currentStep > 0">
|
||||
<span>Continue</span>
|
||||
</ng-container>
|
||||
|
||||
<mat-icon
|
||||
class="ml-1.5 icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:arrow-sm-right'"></mat-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- No courses -->
|
||||
<ng-template #noCourses>
|
||||
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:document-search'"></mat-icon>
|
||||
<div class="mt-6 text-2xl font-semibold tracking-tight text-secondary">No courses found!</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,156 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { MatSelectChange } from '@angular/material/select';
|
||||
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
|
||||
import { BehaviorSubject, combineLatest, Subject, takeUntil } from 'rxjs';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
|
||||
@Component({
|
||||
selector : 'academy-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
categories: Category[];
|
||||
courses: Course[];
|
||||
filteredCourses: Course[];
|
||||
filters: {
|
||||
categorySlug$: BehaviorSubject<string>;
|
||||
query$: BehaviorSubject<string>;
|
||||
hideCompleted$: BehaviorSubject<boolean>;
|
||||
} = {
|
||||
categorySlug$ : new BehaviorSubject('all'),
|
||||
query$ : new BehaviorSubject(''),
|
||||
hideCompleted$: new BehaviorSubject(false)
|
||||
};
|
||||
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _academyService: AcademyService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the categories
|
||||
this._academyService.categories$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((categories: Category[]) => {
|
||||
this.categories = categories;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the courses
|
||||
this._academyService.courses$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((courses: Course[]) => {
|
||||
this.courses = this.filteredCourses = courses;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Filter the courses
|
||||
combineLatest([this.filters.categorySlug$, this.filters.query$, this.filters.hideCompleted$])
|
||||
.subscribe(([categorySlug, query, hideCompleted]) => {
|
||||
|
||||
// Reset the filtered courses
|
||||
this.filteredCourses = this.courses;
|
||||
|
||||
// Filter by category
|
||||
if ( categorySlug !== 'all' )
|
||||
{
|
||||
this.filteredCourses = this.filteredCourses.filter(course => course.category === categorySlug);
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if ( query !== '' )
|
||||
{
|
||||
this.filteredCourses = this.filteredCourses.filter(course => course.title.toLowerCase().includes(query.toLowerCase())
|
||||
|| course.description.toLowerCase().includes(query.toLowerCase())
|
||||
|| course.category.toLowerCase().includes(query.toLowerCase()));
|
||||
}
|
||||
|
||||
// Filter by completed
|
||||
if ( hideCompleted )
|
||||
{
|
||||
this.filteredCourses = this.filteredCourses.filter(course => course.progress.completed === 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Filter by search query
|
||||
*
|
||||
* @param query
|
||||
*/
|
||||
filterByQuery(query: string): void
|
||||
{
|
||||
this.filters.query$.next(query);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter by category
|
||||
*
|
||||
* @param change
|
||||
*/
|
||||
filterByCategory(change: MatSelectChange): void
|
||||
{
|
||||
this.filters.categorySlug$.next(change.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show/hide completed courses
|
||||
*
|
||||
* @param change
|
||||
*/
|
||||
toggleCompleted(change: MatSlideToggleChange): void
|
||||
{
|
||||
this.filters.hideCompleted$.next(change.checked);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-auto overflow-hidden">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'chat',
|
||||
templateUrl : './chat.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ChatComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { chatRoutes } from 'app/modules/admin/apps/chat/chat.routing';
|
||||
import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
|
||||
import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
|
||||
import { ContactInfoComponent } from 'app/modules/admin/apps/chat/contact-info/contact-info.component';
|
||||
import { EmptyConversationComponent } from 'app/modules/admin/apps/chat/empty-conversation/empty-conversation.component';
|
||||
import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
|
||||
import { NewChatComponent } from 'app/modules/admin/apps/chat/new-chat/new-chat.component';
|
||||
import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ChatComponent,
|
||||
ChatsComponent,
|
||||
ContactInfoComponent,
|
||||
ConversationComponent,
|
||||
EmptyConversationComponent,
|
||||
NewChatComponent,
|
||||
ProfileComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(chatRoutes),
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
MatSidenavModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class ChatModule
|
||||
{
|
||||
}
|
||||
@ -1,146 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError, Observable, throwError } from 'rxjs';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
import { Chat, Contact, Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChatChatsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _chatService: ChatService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Chat[]> | any
|
||||
{
|
||||
return this._chatService.getChats();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChatChatResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _chatService: ChatService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Chat>
|
||||
{
|
||||
return this._chatService.getChatById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested chat is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChatContactsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _chatService: ChatService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact[]> | any
|
||||
{
|
||||
return this._chatService.getContacts();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChatProfileResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _chatService: ChatService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> | any
|
||||
{
|
||||
return this._chatService.getProfile();
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { ChatChatResolver, ChatChatsResolver, ChatContactsResolver, ChatProfileResolver } from 'app/modules/admin/apps/chat/chat.resolvers';
|
||||
import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
|
||||
import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
|
||||
import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
|
||||
import { EmptyConversationComponent } from 'app/modules/admin/apps/chat/empty-conversation/empty-conversation.component';
|
||||
|
||||
export const chatRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: ChatComponent,
|
||||
resolve : {
|
||||
chats : ChatChatsResolver,
|
||||
contacts: ChatContactsResolver,
|
||||
profile : ChatProfileResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: ChatsComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: EmptyConversationComponent
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: ConversationComponent,
|
||||
resolve : {
|
||||
conversation: ChatChatResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -1,201 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, filter, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
import { Chat, Contact, Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChatService
|
||||
{
|
||||
private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
|
||||
private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject(null);
|
||||
private _contact: BehaviorSubject<Contact> = new BehaviorSubject(null);
|
||||
private _contacts: BehaviorSubject<Contact[]> = new BehaviorSubject(null);
|
||||
private _profile: BehaviorSubject<Profile> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for chat
|
||||
*/
|
||||
get chat$(): Observable<Chat>
|
||||
{
|
||||
return this._chat.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for chats
|
||||
*/
|
||||
get chats$(): Observable<Chat[]>
|
||||
{
|
||||
return this._chats.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for contact
|
||||
*/
|
||||
get contact$(): Observable<Contact>
|
||||
{
|
||||
return this._contact.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for contacts
|
||||
*/
|
||||
get contacts$(): Observable<Contact[]>
|
||||
{
|
||||
return this._contacts.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for profile
|
||||
*/
|
||||
get profile$(): Observable<Profile>
|
||||
{
|
||||
return this._profile.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get chats
|
||||
*/
|
||||
getChats(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe(
|
||||
tap((response: Chat[]) => {
|
||||
this._chats.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get contact
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
getContact(id: string): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<Contact>('api/apps/chat/contacts', {params: {id}}).pipe(
|
||||
tap((response: Contact) => {
|
||||
this._contact.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get contacts
|
||||
*/
|
||||
getContacts(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<Contact[]>('api/apps/chat/contacts').pipe(
|
||||
tap((response: Contact[]) => {
|
||||
this._contacts.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get profile
|
||||
*/
|
||||
getProfile(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<Profile>('api/apps/chat/profile').pipe(
|
||||
tap((response: Profile) => {
|
||||
this._profile.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get chat
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
getChatById(id: string): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<Chat>('api/apps/chat/chat', {params: {id}}).pipe(
|
||||
map((chat) => {
|
||||
|
||||
// Update the chat
|
||||
this._chat.next(chat);
|
||||
|
||||
// Return the chat
|
||||
return chat;
|
||||
}),
|
||||
switchMap((chat) => {
|
||||
|
||||
if ( !chat )
|
||||
{
|
||||
return throwError('Could not found chat with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(chat);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update chat
|
||||
*
|
||||
* @param id
|
||||
* @param chat
|
||||
*/
|
||||
updateChat(id: string, chat: Chat): Observable<Chat>
|
||||
{
|
||||
return this.chats$.pipe(
|
||||
take(1),
|
||||
switchMap(chats => this._httpClient.patch<Chat>('api/apps/chat/chat', {
|
||||
id,
|
||||
chat
|
||||
}).pipe(
|
||||
map((updatedChat) => {
|
||||
|
||||
// Find the index of the updated chat
|
||||
const index = chats.findIndex(item => item.id === id);
|
||||
|
||||
// Update the chat
|
||||
chats[index] = updatedChat;
|
||||
|
||||
// Update the chats
|
||||
this._chats.next(chats);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedChat;
|
||||
}),
|
||||
switchMap(updatedChat => this.chat$.pipe(
|
||||
take(1),
|
||||
filter(item => item && item.id === id),
|
||||
tap(() => {
|
||||
|
||||
// Update the chat if it's selected
|
||||
this._chat.next(updatedChat);
|
||||
|
||||
// Return the updated chat
|
||||
return updatedChat;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the selected chat
|
||||
*/
|
||||
resetChat(): void
|
||||
{
|
||||
this._chat.next(null);
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
export interface Profile
|
||||
{
|
||||
id?: string;
|
||||
name?: string;
|
||||
email?: string;
|
||||
avatar?: string;
|
||||
about?: string;
|
||||
}
|
||||
|
||||
export interface Contact
|
||||
{
|
||||
id?: string;
|
||||
avatar?: string;
|
||||
name?: string;
|
||||
about?: string;
|
||||
details?: {
|
||||
emails?: {
|
||||
email?: string;
|
||||
label?: string;
|
||||
}[];
|
||||
phoneNumbers?: {
|
||||
country?: string;
|
||||
phoneNumber?: string;
|
||||
label?: string;
|
||||
}[];
|
||||
title?: string;
|
||||
company?: string;
|
||||
birthday?: string;
|
||||
address?: string;
|
||||
};
|
||||
attachments?: {
|
||||
media?: any[];
|
||||
docs?: any[];
|
||||
links?: any[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface Chat
|
||||
{
|
||||
id?: string;
|
||||
contactId?: string;
|
||||
contact?: Contact;
|
||||
unreadCount?: number;
|
||||
muted?: boolean;
|
||||
lastMessage?: string;
|
||||
lastMessageAt?: string;
|
||||
messages?: {
|
||||
id?: string;
|
||||
chatId?: string;
|
||||
contactId?: string;
|
||||
isMine?: boolean;
|
||||
value?: string;
|
||||
createdAt?: string;
|
||||
}[];
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
<div class="relative flex flex-auto w-full bg-card dark:bg-transparent">
|
||||
|
||||
<mat-drawer-container
|
||||
class="flex-auto h-full"
|
||||
[hasBackdrop]="false">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-full sm:w-100 lg:border-r lg:shadow-none dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[(opened)]="drawerOpened"
|
||||
#drawer>
|
||||
|
||||
<!-- New chat -->
|
||||
<ng-container *ngIf="drawerComponent === 'new-chat'">
|
||||
<chat-new-chat [drawer]="drawer"></chat-new-chat>
|
||||
</ng-container>
|
||||
|
||||
<!-- Profile -->
|
||||
<ng-container *ngIf="drawerComponent === 'profile'">
|
||||
<chat-profile [drawer]="drawer"></chat-profile>
|
||||
</ng-container>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex overflow-hidden">
|
||||
|
||||
<!-- Chats list -->
|
||||
<ng-container *ngIf="chats && chats.length > 0; else noChats">
|
||||
<div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 bg-card dark:bg-transparent">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex items-center mr-1 cursor-pointer"
|
||||
(click)="openProfile()">
|
||||
<div class="w-10 h-10">
|
||||
<ng-container *ngIf="profile.avatar">
|
||||
<img
|
||||
class="object-cover w-full h-full rounded-full object-cover"
|
||||
[src]="profile.avatar"
|
||||
alt="Profile avatar"/>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!profile.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{profile.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="ml-4 font-medium truncate">{{profile.name}}</div>
|
||||
</div>
|
||||
<button
|
||||
class="ml-auto"
|
||||
mat-icon-button
|
||||
(click)="openNewChat()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
class="ml-1 -mr-4"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="chatsHeaderMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
|
||||
<mat-menu #chatsHeaderMenu>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
|
||||
New group
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
||||
Create a room
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="openProfile()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:archive'"></mat-icon>
|
||||
Archived
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:star'"></mat-icon>
|
||||
Starred
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:cog'"></mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
<div class="mt-4">
|
||||
<mat-form-field
|
||||
class="fuse-mat-rounded fuse-mat-dense w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[autocomplete]="'off'"
|
||||
[placeholder]="'Search or start new chat'"
|
||||
(input)="filterChats(searchField.value)"
|
||||
#searchField>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chats -->
|
||||
<div class="flex-auto overflow-y-auto">
|
||||
<ng-container *ngIf="filteredChats.length > 0; else noChats">
|
||||
<ng-container *ngFor="let chat of filteredChats; trackBy: trackByFn">
|
||||
<a
|
||||
class="z-20 flex items-center py-5 px-8 cursor-pointer border-b"
|
||||
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
|
||||
'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
|
||||
[routerLink]="[chat.id]">
|
||||
<div class="relative flex flex-0 items-center justify-center w-10 h-10">
|
||||
<ng-container *ngIf="chat.unreadCount > 0">
|
||||
<div
|
||||
class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
|
||||
[class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.contact.avatar">
|
||||
<img
|
||||
class="w-full h-full rounded-full object-cover"
|
||||
[src]="chat.contact.avatar"
|
||||
alt="Contact avatar"/>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!chat.contact.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{chat.contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="min-w-0 ml-4">
|
||||
<div class="font-medium leading-5 truncate">{{chat.contact.name}}</div>
|
||||
<div
|
||||
class="leading-5 truncate text-secondary"
|
||||
[class.text-primary]="chat.unreadCount > 0"
|
||||
[class.dark:text-primary-500]="chat.unreadCount > 0">
|
||||
{{chat.lastMessage}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end self-start ml-auto pl-2">
|
||||
<div class="text-sm leading-5 text-secondary">{{chat.lastMessageAt}}</div>
|
||||
<ng-container *ngIf="chat.muted">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:volume-off'"></mat-icon>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- No chats template -->
|
||||
<ng-template #noChats>
|
||||
<div class="flex flex-auto flex-col items-center justify-center h-full">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:chat'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">No chats</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- Conversation -->
|
||||
<ng-container *ngIf="chats && chats.length > 0">
|
||||
<div
|
||||
class="flex-auto border-l"
|
||||
[ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedChat && selectedChat.id,
|
||||
'hidden lg:flex': !selectedChat || !selectedChat.id}">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,137 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Chat, Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-chats',
|
||||
templateUrl : './chats.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ChatsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
chats: Chat[];
|
||||
drawerComponent: 'profile' | 'new-chat';
|
||||
drawerOpened: boolean = false;
|
||||
filteredChats: Chat[];
|
||||
profile: Profile;
|
||||
selectedChat: Chat;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _chatService: ChatService,
|
||||
private _changeDetectorRef: ChangeDetectorRef
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Chats
|
||||
this._chatService.chats$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((chats: Chat[]) => {
|
||||
this.chats = this.filteredChats = chats;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Profile
|
||||
this._chatService.profile$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((profile: Profile) => {
|
||||
this.profile = profile;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Selected chat
|
||||
this._chatService.chat$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((chat: Chat) => {
|
||||
this.selectedChat = chat;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Filter the chats
|
||||
*
|
||||
* @param query
|
||||
*/
|
||||
filterChats(query: string): void
|
||||
{
|
||||
// Reset the filter
|
||||
if ( !query )
|
||||
{
|
||||
this.filteredChats = this.chats;
|
||||
return;
|
||||
}
|
||||
|
||||
this.filteredChats = this.chats.filter(chat => chat.contact.name.toLowerCase().includes(query.toLowerCase()));
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the new chat sidebar
|
||||
*/
|
||||
openNewChat(): void
|
||||
{
|
||||
this.drawerComponent = 'new-chat';
|
||||
this.drawerOpened = true;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the profile sidebar
|
||||
*/
|
||||
openProfile(): void
|
||||
{
|
||||
this.drawerComponent = 'profile';
|
||||
this.drawerOpened = true;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
<div class="flex flex-col flex-auto h-full bg-card dark:bg-default">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="drawer.close()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</button>
|
||||
<div class="ml-2 text-lg font-medium">Contact info</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto">
|
||||
<!-- Contact avatar & info -->
|
||||
<div class="flex flex-col items-center mt-8">
|
||||
<div class="w-40 h-40 rounded-full">
|
||||
<ng-container *ngIf="chat.contact.avatar">
|
||||
<img
|
||||
class="w-full h-full rounded-full object-cover"
|
||||
[src]="chat.contact.avatar"
|
||||
[alt]="'Contact avatar'">
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!chat.contact.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{chat.contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="mt-4 text-lg font-medium">{{chat.contact.name}}</div>
|
||||
<div class="mt-0.5 text-md text-secondary">{{chat.contact.about}}</div>
|
||||
</div>
|
||||
|
||||
<div class="py-10 px-7">
|
||||
<!-- Media -->
|
||||
<div class="text-lg font-medium">Media</div>
|
||||
<div class="grid grid-cols-4 gap-1 mt-4">
|
||||
<ng-container *ngFor="let media of chat.contact.attachments.media">
|
||||
<img
|
||||
class="h-20 rounded object-cover"
|
||||
[src]="media"/>
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- Details -->
|
||||
<div class="mt-10 space-y-4">
|
||||
<div class="text-lg font-medium mb-3">Details</div>
|
||||
<ng-container *ngIf="chat.contact.details.emails.length">
|
||||
<div>
|
||||
<div class="font-medium text-secondary">Email</div>
|
||||
<div class="">{{chat.contact.details.emails[0].email}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.contact.details.phoneNumbers.length">
|
||||
<div>
|
||||
<div class="font-medium text-secondary">Phone number</div>
|
||||
<div class="">{{chat.contact.details.phoneNumbers[0].phoneNumber}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.contact.details.title">
|
||||
<div>
|
||||
<div class="font-medium text-secondary">Title</div>
|
||||
<div class="">{{chat.contact.details.title}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.contact.details.company">
|
||||
<div>
|
||||
<div class="font-medium text-secondary">Company</div>
|
||||
<div class="">{{chat.contact.details.company}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.contact.details.birthday">
|
||||
<div>
|
||||
<div class="font-medium text-secondary">Birthday</div>
|
||||
<div class="">{{chat.contact.details.birthday}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.contact.details.address">
|
||||
<div>
|
||||
<div class="font-medium text-secondary">Address</div>
|
||||
<div class="">{{chat.contact.details.address}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,22 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-contact-info',
|
||||
templateUrl : './contact-info.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ContactInfoComponent
|
||||
{
|
||||
@Input() chat: Chat;
|
||||
@Input() drawer: MatDrawer;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,215 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<ng-container *ngIf="chat; else selectChatOrStartNew">
|
||||
|
||||
<mat-drawer-container
|
||||
class="flex-auto h-full"
|
||||
[hasBackdrop]="false">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-full sm:w-100 lg:border-l lg:shadow-none dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[position]="'end'"
|
||||
[(opened)]="drawerOpened"
|
||||
#drawer>
|
||||
|
||||
<!-- Contact info -->
|
||||
<chat-contact-info
|
||||
[drawer]="drawer"
|
||||
[chat]="chat"></chat-contact-info>
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center h-18 px-4 md:px-6 border-b bg-gray-50 dark:bg-transparent">
|
||||
|
||||
<!-- Back button -->
|
||||
<a
|
||||
class="lg:hidden md:-ml-2"
|
||||
mat-icon-button
|
||||
[routerLink]="['./']"
|
||||
(click)="resetChat()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</a>
|
||||
|
||||
<!-- Contact info -->
|
||||
<div
|
||||
class="flex items-center ml-2 lg:ml-0 mr-2 cursor-pointer"
|
||||
(click)="openContactInfo()">
|
||||
<div class="relative flex flex-0 items-center justify-center w-10 h-10">
|
||||
<ng-container *ngIf="chat.contact.avatar">
|
||||
<img
|
||||
class="w-full h-full rounded-full object-cover"
|
||||
[src]="chat.contact.avatar"
|
||||
alt="Contact avatar"/>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!chat.contact.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{chat.contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="ml-4 text-lg font-medium leading-5 truncate">{{chat.contact.name}}</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="ml-auto"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="conversationHeaderMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
|
||||
<mat-menu #conversationHeaderMenu>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="openContactInfo()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
|
||||
Contact info
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
Select messages
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="toggleMuteNotifications()">
|
||||
<ng-container *ngIf="!chat.muted">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:volume-off'"></mat-icon>
|
||||
Mute notifications
|
||||
</ng-container>
|
||||
<ng-container *ngIf="chat.muted">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:volume-up'"></mat-icon>
|
||||
Unmute notifications
|
||||
</ng-container>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:backspace'"></mat-icon>
|
||||
Clear messages
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||
Delete chat
|
||||
</button>
|
||||
</mat-menu>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Conversation -->
|
||||
<div class="flex overflow-y-auto flex-col-reverse">
|
||||
<div class="flex flex-col flex-auto shrink p-6 bg-card dark:bg-transparent">
|
||||
<ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
|
||||
<!-- Start of the day -->
|
||||
<ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
|
||||
<div class="flex items-center justify-center my-3 -mx-6">
|
||||
<div class="flex-auto border-b"></div>
|
||||
<div class="flex-0 mx-4 text-sm font-medium leading-5 text-secondary">
|
||||
{{message.createdAt | date: 'longDate'}}
|
||||
</div>
|
||||
<div class="flex-auto border-b"></div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="flex flex-col"
|
||||
[ngClass]="{'items-end': message.isMine,
|
||||
'items-start': !message.isMine,
|
||||
'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
|
||||
'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
|
||||
<!-- Bubble -->
|
||||
<div
|
||||
class="relative max-w-3/4 px-3 py-2 rounded-lg"
|
||||
[ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
|
||||
'bg-gray-500 text-gray-50': !message.isMine}">
|
||||
<!-- Speech bubble tail -->
|
||||
<ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
|
||||
<div
|
||||
class="absolute bottom-0 w-3"
|
||||
[ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
|
||||
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
|
||||
<ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Message -->
|
||||
<div
|
||||
class="min-w-4 leading-5"
|
||||
[innerHTML]="message.value">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Time -->
|
||||
<ng-container
|
||||
*ngIf="first
|
||||
|| last
|
||||
|| chat.messages[i + 1].isMine !== message.isMine
|
||||
|| chat.messages[i + 1].createdAt !== message.createdAt">
|
||||
<div
|
||||
class="my-0.5 text-sm font-medium text-secondary"
|
||||
[ngClass]="{'mr-3': message.isMine,
|
||||
'ml-3': !message.isMine}">
|
||||
{{message.createdAt | date:'HH:mm'}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message field -->
|
||||
<div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
|
||||
<div class="flex items-center h-11 my-px">
|
||||
<button mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
class="ml-0.5"
|
||||
mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full ml-4"
|
||||
subscriptSizing="dynamic">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
#messageInput></textarea>
|
||||
</mat-form-field>
|
||||
<div class="flex items-center h-11 my-px ml-4">
|
||||
<button
|
||||
mat-icon-button>
|
||||
<mat-icon
|
||||
class="rotate-90"
|
||||
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- Select chat or start new template -->
|
||||
<ng-template #selectChatOrStartNew>
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:chat'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a conversation or start a new chat</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- Speech bubble tail SVG -->
|
||||
<!-- @formatter:off -->
|
||||
<ng-template #speechBubbleExtension>
|
||||
<svg width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M1.01522827,0.516204834 C-8.83532715,54.3062744 61.7609863,70.5215302 64.8009949,64.3061218 C68.8074951,54.8859711 30.1663208,52.9997559 37.5036011,0.516204834 L1.01522827,0.516204834 Z" fill="currentColor" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</ng-template>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
@ -1,167 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-conversation',
|
||||
templateUrl : './conversation.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ConversationComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('messageInput') messageInput: ElementRef;
|
||||
chat: Chat;
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = false;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _chatService: ChatService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _ngZone: NgZone
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Decorated methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resize on 'input' and 'ngModelChange' events
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
@HostListener('input')
|
||||
@HostListener('ngModelChange')
|
||||
private _resizeMessageInput(): void
|
||||
{
|
||||
// This doesn't need to trigger Angular's change detection by itself
|
||||
this._ngZone.runOutsideAngular(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Set the height to 'auto' so we can correctly read the scrollHeight
|
||||
this.messageInput.nativeElement.style.height = 'auto';
|
||||
|
||||
// Detect the changes so the height is applied
|
||||
this._changeDetectorRef.detectChanges();
|
||||
|
||||
// Get the scrollHeight and subtract the vertical padding
|
||||
this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
|
||||
|
||||
// Detect the changes one more time to apply the final height
|
||||
this._changeDetectorRef.detectChanges();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Chat
|
||||
this._chatService.chat$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((chat: Chat) => {
|
||||
this.chat = chat;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode if the given breakpoint is active
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Open the contact info
|
||||
*/
|
||||
openContactInfo(): void
|
||||
{
|
||||
// Open the drawer
|
||||
this.drawerOpened = true;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the chat
|
||||
*/
|
||||
resetChat(): void
|
||||
{
|
||||
this._chatService.resetChat();
|
||||
|
||||
// Close the contact info in case it's opened
|
||||
this.drawerOpened = false;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle mute notifications
|
||||
*/
|
||||
toggleMuteNotifications(): void
|
||||
{
|
||||
// Toggle the muted
|
||||
this.chat.muted = !this.chat.muted;
|
||||
|
||||
// Update the chat on the server
|
||||
this._chatService.updateChat(this.chat.id, this.chat).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<!-- Select chat or start new -->
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:chat'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a conversation or start a new chat</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-empty-conversation',
|
||||
templateUrl : './empty-conversation.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class EmptyConversationComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<div class="flex flex-col flex-auto h-full overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center h-18 -mb-px px-6 bg-gray-50 dark:bg-transparent">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="drawer.close()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</button>
|
||||
<div class="ml-2 text-2xl font-semibold">New chat</div>
|
||||
</div>
|
||||
|
||||
<div class="relative overflow-y-auto">
|
||||
<ng-container *ngIf="contacts.length; else noContacts">
|
||||
<ng-container *ngFor="let contact of contacts; let i = index; trackBy: trackByFn">
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)">
|
||||
<div class="z-10 sticky top-0 -mt-px px-6 py-1 md:px-8 border-t border-b font-medium uppercase text-secondary bg-gray-100 dark:bg-gray-900">
|
||||
{{contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Contact -->
|
||||
<div class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b hover:bg-gray-100 dark:hover:bg-hover">
|
||||
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
|
||||
<ng-container *ngIf="contact.avatar">
|
||||
<img
|
||||
class="object-cover w-full h-full"
|
||||
[src]="contact.avatar"
|
||||
alt="Contact avatar"/>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!contact.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="min-w-0 ml-4">
|
||||
<div class="font-medium leading-5 truncate">{{contact.name}}</div>
|
||||
<div class="leading-5 truncate text-secondary">{{contact.about}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- No contacts -->
|
||||
<ng-template #noContacts>
|
||||
<div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no contacts!</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
@ -1,67 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Contact } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-new-chat',
|
||||
templateUrl : './new-chat.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class NewChatComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@Input() drawer: MatDrawer;
|
||||
contacts: Contact[] = [];
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _chatService: ChatService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Contacts
|
||||
this._chatService.contacts$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contacts: Contact[]) => {
|
||||
this.contacts = contacts;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto bg-card dark:bg-default">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center h-18 px-6 border-b bg-gray-50 dark:bg-transparent">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="drawer.close()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</button>
|
||||
<div class="ml-2 text-2xl font-semibold">Profile</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6">
|
||||
<!-- Profile photo -->
|
||||
<div class="group relative flex flex-0 mt-8 mx-auto w-40 h-40 rounded-full">
|
||||
<div class="hidden group-hover:flex absolute inset-0 flex-col items-center justify-center backdrop-filter backdrop-blur bg-opacity-80 rounded-full cursor-pointer bg-gray-800">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:camera'"></mat-icon>
|
||||
<div class="mt-2 mx-6 font-medium text-center text-white">Change Profile Photo</div>
|
||||
</div>
|
||||
<ng-container *ngIf="profile.avatar">
|
||||
<img
|
||||
class="w-full h-full rounded-full object-cover"
|
||||
[src]="profile.avatar"
|
||||
[alt]="'Profile avatar'">
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!profile.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{profile.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Profile info -->
|
||||
<div class="flex flex-col mt-8 mx-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Name</mat-label>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[ngModel]="profile.name">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Email</mat-label>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:mail'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[ngModel]="profile.email">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>About</mat-label>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:identification'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[ngModel]="profile.about">
|
||||
</mat-form-field>
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<button
|
||||
(click)="drawer.close()"
|
||||
mat-button>Cancel
|
||||
</button>
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-flat-button
|
||||
[color]="'primary'">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,52 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-profile',
|
||||
templateUrl : './profile.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ProfileComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@Input() drawer: MatDrawer;
|
||||
profile: Profile;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _chatService: ChatService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Profile
|
||||
this._chatService.profile$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((profile: Profile) => {
|
||||
this.profile = profile;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'contacts',
|
||||
templateUrl : './contacts.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ContactsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CanDeactivateContactsDetails implements CanDeactivate<ContactsDetailsComponent>
|
||||
{
|
||||
canDeactivate(
|
||||
component: ContactsDetailsComponent,
|
||||
currentRoute: ActivatedRouteSnapshot,
|
||||
currentState: RouterStateSnapshot,
|
||||
nextState: RouterStateSnapshot
|
||||
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
|
||||
{
|
||||
// Get the next route
|
||||
let nextRoute: ActivatedRouteSnapshot = nextState.root;
|
||||
while ( nextRoute.firstChild )
|
||||
{
|
||||
nextRoute = nextRoute.firstChild;
|
||||
}
|
||||
|
||||
// If the next state doesn't contain '/contacts'
|
||||
// it means we are navigating away from the
|
||||
// contacts app
|
||||
if ( !nextState.url.includes('/contacts') )
|
||||
{
|
||||
// Let it navigate
|
||||
return true;
|
||||
}
|
||||
|
||||
// If we are navigating to another contact...
|
||||
if ( nextRoute.paramMap.get('id') )
|
||||
{
|
||||
// Just navigate
|
||||
return true;
|
||||
}
|
||||
// Otherwise...
|
||||
else
|
||||
{
|
||||
// Close the drawer first, and then navigate
|
||||
return component.closeDrawer().then(() => true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MAT_DATE_FORMATS, MatRippleModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatLuxonDateModule } from '@angular/material-luxon-adapter';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
|
||||
import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
|
||||
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
|
||||
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ContactsComponent,
|
||||
ContactsListComponent,
|
||||
ContactsDetailsComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(contactsRoutes),
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatDatepickerModule,
|
||||
MatDividerModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatLuxonDateModule,
|
||||
MatMenuModule,
|
||||
MatProgressBarModule,
|
||||
MatRadioModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatTableModule,
|
||||
MatTooltipModule,
|
||||
FuseFindByKeyPipeModule,
|
||||
SharedModule
|
||||
],
|
||||
providers : [
|
||||
{
|
||||
provide : MAT_DATE_FORMATS,
|
||||
useValue: {
|
||||
parse : {
|
||||
dateInput: 'D'
|
||||
},
|
||||
display: {
|
||||
dateInput : 'DDD',
|
||||
monthYearLabel : 'LLL yyyy',
|
||||
dateA11yLabel : 'DD',
|
||||
monthYearA11yLabel: 'LLLL yyyy'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
export class ContactsModule
|
||||
{
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError, Observable, throwError } from 'rxjs';
|
||||
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
|
||||
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ContactsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _contactsService: ContactsService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact[]>
|
||||
{
|
||||
return this._contactsService.getContacts();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ContactsContactResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _contactsService: ContactsService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact>
|
||||
{
|
||||
return this._contactsService.getContactById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested contact is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ContactsCountriesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _contactsService: ContactsService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]>
|
||||
{
|
||||
return this._contactsService.getCountries();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ContactsTagsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _contactsService: ContactsService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Tag[]>
|
||||
{
|
||||
return this._contactsService.getTags();
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { CanDeactivateContactsDetails } from 'app/modules/admin/apps/contacts/contacts.guards';
|
||||
import { ContactsContactResolver, ContactsCountriesResolver, ContactsResolver, ContactsTagsResolver } from 'app/modules/admin/apps/contacts/contacts.resolvers';
|
||||
import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
|
||||
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
|
||||
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
|
||||
|
||||
export const contactsRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: ContactsComponent,
|
||||
resolve : {
|
||||
tags: ContactsTagsResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: ContactsListComponent,
|
||||
resolve : {
|
||||
contacts : ContactsResolver,
|
||||
countries: ContactsCountriesResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : ':id',
|
||||
component : ContactsDetailsComponent,
|
||||
resolve : {
|
||||
contact : ContactsContactResolver,
|
||||
countries: ContactsCountriesResolver
|
||||
},
|
||||
canDeactivate: [CanDeactivateContactsDetails]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -1,389 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, filter, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ContactsService
|
||||
{
|
||||
// Private
|
||||
private _contact: BehaviorSubject<Contact | null> = new BehaviorSubject(null);
|
||||
private _contacts: BehaviorSubject<Contact[] | null> = new BehaviorSubject(null);
|
||||
private _countries: BehaviorSubject<Country[] | null> = new BehaviorSubject(null);
|
||||
private _tags: BehaviorSubject<Tag[] | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for contact
|
||||
*/
|
||||
get contact$(): Observable<Contact>
|
||||
{
|
||||
return this._contact.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for contacts
|
||||
*/
|
||||
get contacts$(): Observable<Contact[]>
|
||||
{
|
||||
return this._contacts.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for countries
|
||||
*/
|
||||
get countries$(): Observable<Country[]>
|
||||
{
|
||||
return this._countries.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for tags
|
||||
*/
|
||||
get tags$(): Observable<Tag[]>
|
||||
{
|
||||
return this._tags.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get contacts
|
||||
*/
|
||||
getContacts(): Observable<Contact[]>
|
||||
{
|
||||
return this._httpClient.get<Contact[]>('api/apps/contacts/all').pipe(
|
||||
tap((contacts) => {
|
||||
this._contacts.next(contacts);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search contacts with given query
|
||||
*
|
||||
* @param query
|
||||
*/
|
||||
searchContacts(query: string): Observable<Contact[]>
|
||||
{
|
||||
return this._httpClient.get<Contact[]>('api/apps/contacts/search', {
|
||||
params: {query}
|
||||
}).pipe(
|
||||
tap((contacts) => {
|
||||
this._contacts.next(contacts);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get contact by id
|
||||
*/
|
||||
getContactById(id: string): Observable<Contact>
|
||||
{
|
||||
return this._contacts.pipe(
|
||||
take(1),
|
||||
map((contacts) => {
|
||||
|
||||
// Find the contact
|
||||
const contact = contacts.find(item => item.id === id) || null;
|
||||
|
||||
// Update the contact
|
||||
this._contact.next(contact);
|
||||
|
||||
// Return the contact
|
||||
return contact;
|
||||
}),
|
||||
switchMap((contact) => {
|
||||
|
||||
if ( !contact )
|
||||
{
|
||||
return throwError('Could not found contact with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(contact);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create contact
|
||||
*/
|
||||
createContact(): Observable<Contact>
|
||||
{
|
||||
return this.contacts$.pipe(
|
||||
take(1),
|
||||
switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/contact', {}).pipe(
|
||||
map((newContact) => {
|
||||
|
||||
// Update the contacts with the new contact
|
||||
this._contacts.next([newContact, ...contacts]);
|
||||
|
||||
// Return the new contact
|
||||
return newContact;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update contact
|
||||
*
|
||||
* @param id
|
||||
* @param contact
|
||||
*/
|
||||
updateContact(id: string, contact: Contact): Observable<Contact>
|
||||
{
|
||||
return this.contacts$.pipe(
|
||||
take(1),
|
||||
switchMap(contacts => this._httpClient.patch<Contact>('api/apps/contacts/contact', {
|
||||
id,
|
||||
contact
|
||||
}).pipe(
|
||||
map((updatedContact) => {
|
||||
|
||||
// Find the index of the updated contact
|
||||
const index = contacts.findIndex(item => item.id === id);
|
||||
|
||||
// Update the contact
|
||||
contacts[index] = updatedContact;
|
||||
|
||||
// Update the contacts
|
||||
this._contacts.next(contacts);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedContact;
|
||||
}),
|
||||
switchMap(updatedContact => this.contact$.pipe(
|
||||
take(1),
|
||||
filter(item => item && item.id === id),
|
||||
tap(() => {
|
||||
|
||||
// Update the contact if it's selected
|
||||
this._contact.next(updatedContact);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedContact;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the contact
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteContact(id: string): Observable<boolean>
|
||||
{
|
||||
return this.contacts$.pipe(
|
||||
take(1),
|
||||
switchMap(contacts => this._httpClient.delete('api/apps/contacts/contact', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the index of the deleted contact
|
||||
const index = contacts.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the contact
|
||||
contacts.splice(index, 1);
|
||||
|
||||
// Update the contacts
|
||||
this._contacts.next(contacts);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get countries
|
||||
*/
|
||||
getCountries(): Observable<Country[]>
|
||||
{
|
||||
return this._httpClient.get<Country[]>('api/apps/contacts/countries').pipe(
|
||||
tap((countries) => {
|
||||
this._countries.next(countries);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get tags
|
||||
*/
|
||||
getTags(): Observable<Tag[]>
|
||||
{
|
||||
return this._httpClient.get<Tag[]>('api/apps/contacts/tags').pipe(
|
||||
tap((tags) => {
|
||||
this._tags.next(tags);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
createTag(tag: Tag): Observable<Tag>
|
||||
{
|
||||
return this.tags$.pipe(
|
||||
take(1),
|
||||
switchMap(tags => this._httpClient.post<Tag>('api/apps/contacts/tag', {tag}).pipe(
|
||||
map((newTag) => {
|
||||
|
||||
// Update the tags with the new tag
|
||||
this._tags.next([...tags, newTag]);
|
||||
|
||||
// Return new tag from observable
|
||||
return newTag;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tag
|
||||
*
|
||||
* @param id
|
||||
* @param tag
|
||||
*/
|
||||
updateTag(id: string, tag: Tag): Observable<Tag>
|
||||
{
|
||||
return this.tags$.pipe(
|
||||
take(1),
|
||||
switchMap(tags => this._httpClient.patch<Tag>('api/apps/contacts/tag', {
|
||||
id,
|
||||
tag
|
||||
}).pipe(
|
||||
map((updatedTag) => {
|
||||
|
||||
// Find the index of the updated tag
|
||||
const index = tags.findIndex(item => item.id === id);
|
||||
|
||||
// Update the tag
|
||||
tags[index] = updatedTag;
|
||||
|
||||
// Update the tags
|
||||
this._tags.next(tags);
|
||||
|
||||
// Return the updated tag
|
||||
return updatedTag;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the tag
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteTag(id: string): Observable<boolean>
|
||||
{
|
||||
return this.tags$.pipe(
|
||||
take(1),
|
||||
switchMap(tags => this._httpClient.delete('api/apps/contacts/tag', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the index of the deleted tag
|
||||
const index = tags.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the tag
|
||||
tags.splice(index, 1);
|
||||
|
||||
// Update the tags
|
||||
this._tags.next(tags);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
}),
|
||||
filter(isDeleted => isDeleted),
|
||||
switchMap(isDeleted => this.contacts$.pipe(
|
||||
take(1),
|
||||
map((contacts) => {
|
||||
|
||||
// Iterate through the contacts
|
||||
contacts.forEach((contact) => {
|
||||
|
||||
const tagIndex = contact.tags.findIndex(tag => tag === id);
|
||||
|
||||
// If the contact has the tag, remove it
|
||||
if ( tagIndex > -1 )
|
||||
{
|
||||
contact.tags.splice(tagIndex, 1);
|
||||
}
|
||||
});
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the avatar of the given contact
|
||||
*
|
||||
* @param id
|
||||
* @param avatar
|
||||
*/
|
||||
uploadAvatar(id: string, avatar: File): Observable<Contact>
|
||||
{
|
||||
return this.contacts$.pipe(
|
||||
take(1),
|
||||
switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/avatar', {
|
||||
id,
|
||||
avatar
|
||||
}, {
|
||||
headers: {
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
'Content-Type': avatar.type
|
||||
}
|
||||
}).pipe(
|
||||
map((updatedContact) => {
|
||||
|
||||
// Find the index of the updated contact
|
||||
const index = contacts.findIndex(item => item.id === id);
|
||||
|
||||
// Update the contact
|
||||
contacts[index] = updatedContact;
|
||||
|
||||
// Update the contacts
|
||||
this._contacts.next(contacts);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedContact;
|
||||
}),
|
||||
switchMap(updatedContact => this.contact$.pipe(
|
||||
take(1),
|
||||
filter(item => item && item.id === id),
|
||||
tap(() => {
|
||||
|
||||
// Update the contact if it's selected
|
||||
this._contact.next(updatedContact);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedContact;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
export interface Contact
|
||||
{
|
||||
id: string;
|
||||
avatar?: string | null;
|
||||
background?: string | null;
|
||||
name: string;
|
||||
emails?: {
|
||||
email: string;
|
||||
label: string;
|
||||
}[];
|
||||
phoneNumbers?: {
|
||||
country: string;
|
||||
phoneNumber: string;
|
||||
label: string;
|
||||
}[];
|
||||
title?: string;
|
||||
company?: string;
|
||||
birthday?: string | null;
|
||||
address?: string | null;
|
||||
notes?: string | null;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
export interface Country
|
||||
{
|
||||
id: string;
|
||||
iso: string;
|
||||
name: string;
|
||||
code: string;
|
||||
flagImagePos: string;
|
||||
}
|
||||
|
||||
export interface Tag
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
}
|
||||
@ -1,665 +0,0 @@
|
||||
<div class="flex flex-col w-full">
|
||||
|
||||
<!-- View mode -->
|
||||
<ng-container *ngIf="!editMode">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative w-full h-40 sm:h-48 px-8 sm:px-12 bg-accent-100 dark:bg-accent-700">
|
||||
<!-- Background -->
|
||||
<ng-container *ngIf="contact.background">
|
||||
<img
|
||||
class="absolute inset-0 object-cover w-full h-full"
|
||||
[src]="contact.background">
|
||||
</ng-container>
|
||||
<!-- Close button -->
|
||||
<div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
|
||||
<a
|
||||
mat-icon-button
|
||||
[matTooltip]="'Close'"
|
||||
[routerLink]="['../']">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact -->
|
||||
<div class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0">
|
||||
<div class="w-full max-w-3xl">
|
||||
|
||||
<!-- Avatar and actions -->
|
||||
<div class="flex flex-auto items-end -mt-16">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center justify-center w-32 h-32 rounded-full overflow-hidden ring-4 ring-bg-card">
|
||||
<img
|
||||
class="object-cover w-full h-full"
|
||||
*ngIf="contact.avatar"
|
||||
[src]="contact.avatar">
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full rounded overflow-hidden uppercase text-8xl font-bold leading-none bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
*ngIf="!contact.avatar">
|
||||
{{contact.name.charAt(0)}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center ml-auto mb-1">
|
||||
<button
|
||||
mat-stroked-button
|
||||
(click)="toggleEditMode(true)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
|
||||
<span class="ml-2">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="mt-3 text-4xl font-bold truncate">{{contact.name}}</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="contact.tags.length">
|
||||
<div class="flex flex-wrap items-center mt-2">
|
||||
<!-- Tag -->
|
||||
<ng-container *ngFor="let tag of (contact.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
|
||||
<div class="flex items-center justify-center py-1 px-3 mr-3 mb-3 rounded-full leading-normal text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
|
||||
<span class="text-sm font-medium whitespace-nowrap">{{tag.title}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="flex flex-col mt-4 pt-6 border-t space-y-8">
|
||||
<!-- Title -->
|
||||
<ng-container *ngIf="contact.title">
|
||||
<div class="flex sm:items-center">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon>
|
||||
<div class="ml-6 leading-6">{{contact.title}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Company -->
|
||||
<ng-container *ngIf="contact.company">
|
||||
<div class="flex sm:items-center">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:office-building'"></mat-icon>
|
||||
<div class="ml-6 leading-6">{{contact.company}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Emails -->
|
||||
<ng-container *ngIf="contact.emails.length">
|
||||
<div class="flex">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon>
|
||||
<div class="min-w-0 ml-6 space-y-1">
|
||||
<ng-container *ngFor="let email of contact.emails; trackBy: trackByFn">
|
||||
<div class="flex items-center leading-6">
|
||||
<a
|
||||
class="hover:underline text-primary-500"
|
||||
[href]="'mailto:' + email.email"
|
||||
target="_blank">
|
||||
{{email.email}}
|
||||
</a>
|
||||
<div
|
||||
class="text-md truncate text-secondary"
|
||||
*ngIf="email.label">
|
||||
<span class="mx-2">•</span>
|
||||
<span class="font-medium">{{email.label}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Phone -->
|
||||
<ng-container *ngIf="contact.phoneNumbers.length">
|
||||
<div class="flex">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:phone'"></mat-icon>
|
||||
<div class="min-w-0 ml-6 space-y-1">
|
||||
<ng-container *ngFor="let phoneNumber of contact.phoneNumbers; trackBy: trackByFn">
|
||||
<div class="flex items-center leading-6">
|
||||
<div
|
||||
class="hidden sm:flex w-6 h-4 overflow-hidden"
|
||||
[matTooltip]="getCountryByIso(phoneNumber.country).name"
|
||||
[style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
|
||||
[style.backgroundSize]="'24px 3876px'"
|
||||
[style.backgroundPosition]="getCountryByIso(phoneNumber.country).flagImagePos"></div>
|
||||
<div class="sm:ml-3 font-mono">{{getCountryByIso(phoneNumber.country).code}}</div>
|
||||
<div class="ml-2.5 font-mono">{{phoneNumber.phoneNumber}}</div>
|
||||
<div
|
||||
class="text-md truncate text-secondary"
|
||||
*ngIf="phoneNumber.label">
|
||||
<span class="mx-2">•</span>
|
||||
<span class="font-medium">{{phoneNumber.label}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Address -->
|
||||
<ng-container *ngIf="contact.address">
|
||||
<div class="flex sm:items-center">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:location-marker'"></mat-icon>
|
||||
<div class="ml-6 leading-6">{{contact.address}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Birthday -->
|
||||
<ng-container *ngIf="contact.birthday">
|
||||
<div class="flex sm:items-center">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon>
|
||||
<div class="ml-6 leading-6">{{contact.birthday | date:'longDate'}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Notes -->
|
||||
<ng-container *ngIf="contact.notes">
|
||||
<div class="flex">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
|
||||
<div
|
||||
class="max-w-none ml-6 prose prose-sm"
|
||||
[innerHTML]="contact.notes"></div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Edit mode -->
|
||||
<ng-container *ngIf="editMode">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative w-full h-40 sm:h-48 px-8 sm:px-12 bg-accent-100 dark:bg-accent-700">
|
||||
<!-- Background -->
|
||||
<ng-container *ngIf="contact.background">
|
||||
<img
|
||||
class="absolute inset-0 object-cover w-full h-full"
|
||||
[src]="contact.background">
|
||||
</ng-container>
|
||||
<!-- Close button -->
|
||||
<div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
|
||||
<a
|
||||
mat-icon-button
|
||||
[matTooltip]="'Close'"
|
||||
[routerLink]="['../']">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact form -->
|
||||
<div class="relative flex flex-col flex-auto items-center px-6 sm:px-12">
|
||||
<div class="w-full max-w-3xl">
|
||||
<form [formGroup]="contactForm">
|
||||
|
||||
<!-- Avatar -->
|
||||
<div class="flex flex-auto items-end -mt-16">
|
||||
<div class="relative flex items-center justify-center w-32 h-32 rounded-full overflow-hidden ring-4 ring-bg-card">
|
||||
<!-- Upload / Remove avatar -->
|
||||
<div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center z-20">
|
||||
<div>
|
||||
<input
|
||||
id="avatar-file-input"
|
||||
class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
|
||||
type="file"
|
||||
[multiple]="false"
|
||||
[accept]="'image/jpeg, image/png'"
|
||||
(change)="uploadAvatar(avatarFileInput.files)"
|
||||
#avatarFileInput>
|
||||
<label
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-hover"
|
||||
for="avatar-file-input"
|
||||
matRipple>
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:camera'"></mat-icon>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="removeAvatar()">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Image/Letter -->
|
||||
<img
|
||||
class="object-cover w-full h-full"
|
||||
*ngIf="contact.avatar"
|
||||
[src]="contact.avatar">
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full rounded overflow-hidden uppercase text-8xl font-bold leading-none bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
*ngIf="!contact.avatar">
|
||||
{{contact.name.charAt(0)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Name</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'name'"
|
||||
[placeholder]="'Name'"
|
||||
[spellcheck]="false">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap items-center -m-1.5 mt-6">
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="contact.tags.length">
|
||||
<ng-container *ngFor="let tag of (contact.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
|
||||
<div class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
|
||||
<span class="text-md font-medium whitespace-nowrap">{{tag.title}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<!-- Tags panel and its button -->
|
||||
<div
|
||||
class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700"
|
||||
(click)="openTagsPanel()"
|
||||
#tagsPanelOrigin>
|
||||
|
||||
<ng-container *ngIf="contact.tags.length">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
|
||||
<span class="ml-1.5 text-md font-medium whitespace-nowrap">Edit</span>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!contact.tags.length">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
<span class="ml-1.5 text-md font-medium whitespace-nowrap">Add</span>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tags panel -->
|
||||
<ng-template #tagsPanel>
|
||||
<div class="w-60 rounded border shadow-md bg-card">
|
||||
<!-- Tags panel header -->
|
||||
<div class="flex items-center m-3 mr-2">
|
||||
<div class="flex items-center">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<div class="ml-2">
|
||||
<input
|
||||
class="w-full min-w-0 py-1 border-0"
|
||||
type="text"
|
||||
placeholder="Enter tag name"
|
||||
(input)="filterTags($event)"
|
||||
(keydown)="filterTagsInputKeyDown($event)"
|
||||
[maxLength]="30"
|
||||
#newTagInput>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ml-1"
|
||||
mat-icon-button
|
||||
(click)="toggleTagsEditMode()">
|
||||
<mat-icon
|
||||
*ngIf="!tagsEditMode"
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
|
||||
<mat-icon
|
||||
*ngIf="tagsEditMode"
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="!tagsEditMode">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<div
|
||||
class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
|
||||
(click)="toggleContactTag(tag)"
|
||||
matRipple>
|
||||
<mat-checkbox
|
||||
class="flex items-center h-10 min-h-10 pointer-events-none"
|
||||
[checked]="contact.tags.includes(tag.id)"
|
||||
[color]="'primary'"
|
||||
[disableRipple]="true">
|
||||
</mat-checkbox>
|
||||
<div>{{tag.title}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<!-- Tags editing -->
|
||||
<ng-container *ngIf="tagsEditMode">
|
||||
<div class="py-2 space-y-2">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<div class="flex items-center">
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense w-full mx-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<input
|
||||
matInput
|
||||
[value]="tag.title"
|
||||
(input)="updateTagTitle(tag, $event)">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="deleteTag(tag)"
|
||||
matSuffix>
|
||||
<mat-icon
|
||||
class="icon-size-5 ml-2"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Create tag -->
|
||||
<div
|
||||
class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer hover:bg-hover"
|
||||
*ngIf="shouldShowCreateTagButton(newTagInput.value)"
|
||||
(click)="createTag(newTagInput.value); newTagInput.value = ''"
|
||||
matRipple>
|
||||
<mat-icon
|
||||
class="mr-2 icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
<div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Title</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:briefcase'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'title'"
|
||||
[placeholder]="'Job title'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Company -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Company</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:office-building'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'company'"
|
||||
[placeholder]="'Company'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Emails -->
|
||||
<div class="mt-8">
|
||||
<div class="space-y-4">
|
||||
<ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
|
||||
<div class="flex">
|
||||
<mat-form-field
|
||||
class="flex-auto"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label *ngIf="first">Email</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:mail'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="email.get('email')"
|
||||
[placeholder]="'Email address'"
|
||||
[spellcheck]="false">
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label *ngIf="first">Label</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:tag'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="email.get('label')"
|
||||
[placeholder]="'Label'">
|
||||
</mat-form-field>
|
||||
<!-- Remove email -->
|
||||
<ng-container *ngIf="!(first && last)">
|
||||
<div
|
||||
class="flex items-center w-10 pl-2"
|
||||
[ngClass]="{'mt-6': first}">
|
||||
<button
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
(click)="removeEmailField(i)"
|
||||
matTooltip="Remove">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div
|
||||
class="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
|
||||
(click)="addEmailField()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
<span class="ml-2 font-medium text-secondary group-hover:underline">Add an email address</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone numbers -->
|
||||
<div class="mt-8">
|
||||
<div class="space-y-4">
|
||||
<ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
|
||||
<div class="relative flex">
|
||||
<mat-form-field
|
||||
class="flex-auto"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label *ngIf="first">Phone</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="phoneNumber.get('phoneNumber')"
|
||||
[placeholder]="'Phone'">
|
||||
<mat-select
|
||||
class="mr-1.5"
|
||||
[formControl]="phoneNumber.get('country')"
|
||||
matPrefix>
|
||||
<mat-select-trigger>
|
||||
<span class="flex items-center">
|
||||
<span
|
||||
class="hidden sm:flex w-6 h-4 mr-1 overflow-hidden"
|
||||
[style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
|
||||
[style.backgroundSize]="'24px 3876px'"
|
||||
[style.backgroundPosition]="getCountryByIso(phoneNumber.get('country').value).flagImagePos"></span>
|
||||
<span class="sm:mx-0.5 font-medium text-default">{{getCountryByIso(phoneNumber.get('country').value).code}}</span>
|
||||
</span>
|
||||
</mat-select-trigger>
|
||||
<ng-container *ngFor="let country of countries; trackBy: trackByFn">
|
||||
<mat-option [value]="country.iso">
|
||||
<span class="flex items-center">
|
||||
<span
|
||||
class="w-6 h-4 overflow-hidden"
|
||||
[style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
|
||||
[style.backgroundSize]="'24px 3876px'"
|
||||
[style.backgroundPosition]="country.flagImagePos"></span>
|
||||
<span class="ml-2">{{country.name}}</span>
|
||||
<span class="ml-2 font-medium">{{country.code}}</span>
|
||||
</span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label *ngIf="first">Label</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:tag'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="phoneNumber.get('label')"
|
||||
[placeholder]="'Label'">
|
||||
</mat-form-field>
|
||||
<!-- Remove phone number -->
|
||||
<ng-container *ngIf="!(first && last)">
|
||||
<div
|
||||
class="flex items-center w-10 pl-2"
|
||||
[ngClass]="{'mt-6': first}">
|
||||
<button
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
(click)="removePhoneNumberField(i)"
|
||||
matTooltip="Remove">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div
|
||||
class="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
|
||||
(click)="addPhoneNumberField()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
<span class="ml-2 font-medium text-secondary group-hover:underline">Add a phone number</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Address</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'address'"
|
||||
[placeholder]="'Address'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Birthday -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Birthday</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:cake'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="birthdayDatepicker"
|
||||
[formControlName]="'birthday'"
|
||||
[placeholder]="'Birthday'">
|
||||
<mat-datepicker-toggle
|
||||
matSuffix
|
||||
[for]="birthdayDatepicker">
|
||||
</mat-datepicker-toggle>
|
||||
<mat-datepicker #birthdayDatepicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Notes</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:menu-alt-2'"></mat-icon>
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'notes'"
|
||||
[placeholder]="'Notes'"
|
||||
[rows]="5"
|
||||
[spellcheck]="false"
|
||||
cdkTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center mt-10 -mx-6 sm:-mx-12 py-4 pr-4 pl-1 sm:pr-12 sm:pl-7 border-t bg-gray-50 dark:bg-transparent">
|
||||
<!-- Delete -->
|
||||
<button
|
||||
mat-button
|
||||
[color]="'warn'"
|
||||
[matTooltip]="'Delete'"
|
||||
(click)="deleteContact()">
|
||||
Delete
|
||||
</button>
|
||||
<!-- Cancel -->
|
||||
<button
|
||||
class="ml-auto"
|
||||
mat-button
|
||||
[matTooltip]="'Cancel'"
|
||||
(click)="toggleEditMode(false)">
|
||||
Cancel
|
||||
</button>
|
||||
<!-- Save -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="contactForm.invalid"
|
||||
[matTooltip]="'Save'"
|
||||
(click)="updateContact()">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
@ -1,721 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { MatDrawerToggleResult } from '@angular/material/sidenav';
|
||||
import { debounceTime, Subject, takeUntil } from 'rxjs';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
|
||||
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
|
||||
|
||||
@Component({
|
||||
selector : 'contacts-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ContactsDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('avatarFileInput') private _avatarFileInput: ElementRef;
|
||||
@ViewChild('tagsPanel') private _tagsPanel: TemplateRef<any>;
|
||||
@ViewChild('tagsPanelOrigin') private _tagsPanelOrigin: ElementRef;
|
||||
|
||||
editMode: boolean = false;
|
||||
tags: Tag[];
|
||||
tagsEditMode: boolean = false;
|
||||
filteredTags: Tag[];
|
||||
contact: Contact;
|
||||
contactForm: UntypedFormGroup;
|
||||
contacts: Contact[];
|
||||
countries: Country[];
|
||||
private _tagsPanelOverlayRef: OverlayRef;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _contactsListComponent: ContactsListComponent,
|
||||
private _contactsService: ContactsService,
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
private _fuseConfirmationService: FuseConfirmationService,
|
||||
private _renderer2: Renderer2,
|
||||
private _router: Router,
|
||||
private _overlay: Overlay,
|
||||
private _viewContainerRef: ViewContainerRef
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Open the drawer
|
||||
this._contactsListComponent.matDrawer.open();
|
||||
|
||||
// Create the contact form
|
||||
this.contactForm = this._formBuilder.group({
|
||||
id : [''],
|
||||
avatar : [null],
|
||||
name : ['', [Validators.required]],
|
||||
emails : this._formBuilder.array([]),
|
||||
phoneNumbers: this._formBuilder.array([]),
|
||||
title : [''],
|
||||
company : [''],
|
||||
birthday : [null],
|
||||
address : [null],
|
||||
notes : [null],
|
||||
tags : [[]]
|
||||
});
|
||||
|
||||
// Get the contacts
|
||||
this._contactsService.contacts$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contacts: Contact[]) => {
|
||||
this.contacts = contacts;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the contact
|
||||
this._contactsService.contact$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contact: Contact) => {
|
||||
|
||||
// Open the drawer in case it is closed
|
||||
this._contactsListComponent.matDrawer.open();
|
||||
|
||||
// Get the contact
|
||||
this.contact = contact;
|
||||
|
||||
// Clear the emails and phoneNumbers form arrays
|
||||
(this.contactForm.get('emails') as UntypedFormArray).clear();
|
||||
(this.contactForm.get('phoneNumbers') as UntypedFormArray).clear();
|
||||
|
||||
// Patch values to the form
|
||||
this.contactForm.patchValue(contact);
|
||||
|
||||
// Setup the emails form array
|
||||
const emailFormGroups = [];
|
||||
|
||||
if ( contact.emails.length > 0 )
|
||||
{
|
||||
// Iterate through them
|
||||
contact.emails.forEach((email) => {
|
||||
|
||||
// Create an email form group
|
||||
emailFormGroups.push(
|
||||
this._formBuilder.group({
|
||||
email: [email.email],
|
||||
label: [email.label]
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
// Create an email form group
|
||||
emailFormGroups.push(
|
||||
this._formBuilder.group({
|
||||
email: [''],
|
||||
label: ['']
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Add the email form groups to the emails form array
|
||||
emailFormGroups.forEach((emailFormGroup) => {
|
||||
(this.contactForm.get('emails') as UntypedFormArray).push(emailFormGroup);
|
||||
});
|
||||
|
||||
// Setup the phone numbers form array
|
||||
const phoneNumbersFormGroups = [];
|
||||
|
||||
if ( contact.phoneNumbers.length > 0 )
|
||||
{
|
||||
// Iterate through them
|
||||
contact.phoneNumbers.forEach((phoneNumber) => {
|
||||
|
||||
// Create an email form group
|
||||
phoneNumbersFormGroups.push(
|
||||
this._formBuilder.group({
|
||||
country : [phoneNumber.country],
|
||||
phoneNumber: [phoneNumber.phoneNumber],
|
||||
label : [phoneNumber.label]
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
// Create a phone number form group
|
||||
phoneNumbersFormGroups.push(
|
||||
this._formBuilder.group({
|
||||
country : ['us'],
|
||||
phoneNumber: [''],
|
||||
label : ['']
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Add the phone numbers form groups to the phone numbers form array
|
||||
phoneNumbersFormGroups.forEach((phoneNumbersFormGroup) => {
|
||||
(this.contactForm.get('phoneNumbers') as UntypedFormArray).push(phoneNumbersFormGroup);
|
||||
});
|
||||
|
||||
// Toggle the edit mode off
|
||||
this.toggleEditMode(false);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the country telephone codes
|
||||
this._contactsService.countries$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((codes: Country[]) => {
|
||||
this.countries = codes;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the tags
|
||||
this._contactsService.tags$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((tags: Tag[]) => {
|
||||
this.tags = tags;
|
||||
this.filteredTags = tags;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// Dispose the overlays if they are still on the DOM
|
||||
if ( this._tagsPanelOverlayRef )
|
||||
{
|
||||
this._tagsPanelOverlayRef.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Close the drawer
|
||||
*/
|
||||
closeDrawer(): Promise<MatDrawerToggleResult>
|
||||
{
|
||||
return this._contactsListComponent.matDrawer.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle edit mode
|
||||
*
|
||||
* @param editMode
|
||||
*/
|
||||
toggleEditMode(editMode: boolean | null = null): void
|
||||
{
|
||||
if ( editMode === null )
|
||||
{
|
||||
this.editMode = !this.editMode;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.editMode = editMode;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the contact
|
||||
*/
|
||||
updateContact(): void
|
||||
{
|
||||
// Get the contact object
|
||||
const contact = this.contactForm.getRawValue();
|
||||
|
||||
// Go through the contact object and clear empty values
|
||||
contact.emails = contact.emails.filter(email => email.email);
|
||||
|
||||
contact.phoneNumbers = contact.phoneNumbers.filter(phoneNumber => phoneNumber.phoneNumber);
|
||||
|
||||
// Update the contact on the server
|
||||
this._contactsService.updateContact(contact.id, contact).subscribe(() => {
|
||||
|
||||
// Toggle the edit mode off
|
||||
this.toggleEditMode(false);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the contact
|
||||
*/
|
||||
deleteContact(): void
|
||||
{
|
||||
// Open the confirmation dialog
|
||||
const confirmation = this._fuseConfirmationService.open({
|
||||
title : 'Delete contact',
|
||||
message: 'Are you sure you want to delete this contact? This action cannot be undone!',
|
||||
actions: {
|
||||
confirm: {
|
||||
label: 'Delete'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Subscribe to the confirmation dialog closed action
|
||||
confirmation.afterClosed().subscribe((result) => {
|
||||
|
||||
// If the confirm button pressed...
|
||||
if ( result === 'confirmed' )
|
||||
{
|
||||
// Get the current contact's id
|
||||
const id = this.contact.id;
|
||||
|
||||
// Get the next/previous contact's id
|
||||
const currentContactIndex = this.contacts.findIndex(item => item.id === id);
|
||||
const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
|
||||
const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
|
||||
|
||||
// Delete the contact
|
||||
this._contactsService.deleteContact(id)
|
||||
.subscribe((isDeleted) => {
|
||||
|
||||
// Return if the contact wasn't deleted...
|
||||
if ( !isDeleted )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate to the next contact if available
|
||||
if ( nextContactId )
|
||||
{
|
||||
this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
|
||||
}
|
||||
// Otherwise, navigate to the parent
|
||||
else
|
||||
{
|
||||
this._router.navigate(['../'], {relativeTo: this._activatedRoute});
|
||||
}
|
||||
|
||||
// Toggle the edit mode off
|
||||
this.toggleEditMode(false);
|
||||
});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload avatar
|
||||
*
|
||||
* @param fileList
|
||||
*/
|
||||
uploadAvatar(fileList: FileList): void
|
||||
{
|
||||
// Return if canceled
|
||||
if ( !fileList.length )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
const file = fileList[0];
|
||||
|
||||
// Return if the file is not allowed
|
||||
if ( !allowedTypes.includes(file.type) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Upload the avatar
|
||||
this._contactsService.uploadAvatar(this.contact.id, file).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the avatar
|
||||
*/
|
||||
removeAvatar(): void
|
||||
{
|
||||
// Get the form control for 'avatar'
|
||||
const avatarFormControl = this.contactForm.get('avatar');
|
||||
|
||||
// Set the avatar as null
|
||||
avatarFormControl.setValue(null);
|
||||
|
||||
// Set the file input value as null
|
||||
this._avatarFileInput.nativeElement.value = null;
|
||||
|
||||
// Update the contact
|
||||
this.contact.avatar = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open tags panel
|
||||
*/
|
||||
openTagsPanel(): void
|
||||
{
|
||||
// Create the overlay
|
||||
this._tagsPanelOverlayRef = this._overlay.create({
|
||||
backdropClass : '',
|
||||
hasBackdrop : true,
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._tagsPanelOrigin.nativeElement)
|
||||
.withFlexibleDimensions(true)
|
||||
.withViewportMargin(64)
|
||||
.withLockedPosition(true)
|
||||
.withPositions([
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'bottom',
|
||||
overlayX: 'start',
|
||||
overlayY: 'top'
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
// Subscribe to the attachments observable
|
||||
this._tagsPanelOverlayRef.attachments().subscribe(() => {
|
||||
|
||||
// Add a class to the origin
|
||||
this._renderer2.addClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
|
||||
|
||||
// Focus to the search input once the overlay has been attached
|
||||
this._tagsPanelOverlayRef.overlayElement.querySelector('input').focus();
|
||||
});
|
||||
|
||||
// Create a portal from the template
|
||||
const templatePortal = new TemplatePortal(this._tagsPanel, this._viewContainerRef);
|
||||
|
||||
// Attach the portal to the overlay
|
||||
this._tagsPanelOverlayRef.attach(templatePortal);
|
||||
|
||||
// Subscribe to the backdrop click
|
||||
this._tagsPanelOverlayRef.backdropClick().subscribe(() => {
|
||||
|
||||
// Remove the class from the origin
|
||||
this._renderer2.removeClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
|
||||
|
||||
// If overlay exists and attached...
|
||||
if ( this._tagsPanelOverlayRef && this._tagsPanelOverlayRef.hasAttached() )
|
||||
{
|
||||
// Detach it
|
||||
this._tagsPanelOverlayRef.detach();
|
||||
|
||||
// Reset the tag filter
|
||||
this.filteredTags = this.tags;
|
||||
|
||||
// Toggle the edit mode off
|
||||
this.tagsEditMode = false;
|
||||
}
|
||||
|
||||
// If template portal exists and attached...
|
||||
if ( templatePortal && templatePortal.isAttached )
|
||||
{
|
||||
// Detach it
|
||||
templatePortal.detach();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the tags edit mode
|
||||
*/
|
||||
toggleTagsEditMode(): void
|
||||
{
|
||||
this.tagsEditMode = !this.tagsEditMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTags(event): void
|
||||
{
|
||||
// Get the value
|
||||
const value = event.target.value.toLowerCase();
|
||||
|
||||
// Filter the tags
|
||||
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags input key down event
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTagsInputKeyDown(event): void
|
||||
{
|
||||
// Return if the pressed key is not 'Enter'
|
||||
if ( event.key !== 'Enter' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no tag available...
|
||||
if ( this.filteredTags.length === 0 )
|
||||
{
|
||||
// Create the tag
|
||||
this.createTag(event.target.value);
|
||||
|
||||
// Clear the input
|
||||
event.target.value = '';
|
||||
|
||||
// Return
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is a tag...
|
||||
const tag = this.filteredTags[0];
|
||||
const isTagApplied = this.contact.tags.find(id => id === tag.id);
|
||||
|
||||
// If the found tag is already applied to the contact...
|
||||
if ( isTagApplied )
|
||||
{
|
||||
// Remove the tag from the contact
|
||||
this.removeTagFromContact(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise add the tag to the contact
|
||||
this.addTagToContact(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new tag
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
createTag(title: string): void
|
||||
{
|
||||
const tag = {
|
||||
title
|
||||
};
|
||||
|
||||
// Create tag on the server
|
||||
this._contactsService.createTag(tag)
|
||||
.subscribe((response) => {
|
||||
|
||||
// Add the tag to the contact
|
||||
this.addTagToContact(response);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tag title
|
||||
*
|
||||
* @param tag
|
||||
* @param event
|
||||
*/
|
||||
updateTagTitle(tag: Tag, event): void
|
||||
{
|
||||
// Update the title on the tag
|
||||
tag.title = event.target.value;
|
||||
|
||||
// Update the tag on the server
|
||||
this._contactsService.updateTag(tag.id, tag)
|
||||
.pipe(debounceTime(300))
|
||||
.subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
deleteTag(tag: Tag): void
|
||||
{
|
||||
// Delete the tag from the server
|
||||
this._contactsService.deleteTag(tag.id).subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add tag to the contact
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
addTagToContact(tag: Tag): void
|
||||
{
|
||||
// Add the tag
|
||||
this.contact.tags.unshift(tag.id);
|
||||
|
||||
// Update the contact form
|
||||
this.contactForm.get('tags').patchValue(this.contact.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove tag from the contact
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
removeTagFromContact(tag: Tag): void
|
||||
{
|
||||
// Remove the tag
|
||||
this.contact.tags.splice(this.contact.tags.findIndex(item => item === tag.id), 1);
|
||||
|
||||
// Update the contact form
|
||||
this.contactForm.get('tags').patchValue(this.contact.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle contact tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
toggleContactTag(tag: Tag): void
|
||||
{
|
||||
if ( this.contact.tags.includes(tag.id) )
|
||||
{
|
||||
this.removeTagFromContact(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.addTagToContact(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Should the create tag button be visible
|
||||
*
|
||||
* @param inputValue
|
||||
*/
|
||||
shouldShowCreateTagButton(inputValue: string): boolean
|
||||
{
|
||||
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the email field
|
||||
*/
|
||||
addEmailField(): void
|
||||
{
|
||||
// Create an empty email form group
|
||||
const emailFormGroup = this._formBuilder.group({
|
||||
email: [''],
|
||||
label: ['']
|
||||
});
|
||||
|
||||
// Add the email form group to the emails form array
|
||||
(this.contactForm.get('emails') as UntypedFormArray).push(emailFormGroup);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the email field
|
||||
*
|
||||
* @param index
|
||||
*/
|
||||
removeEmailField(index: number): void
|
||||
{
|
||||
// Get form array for emails
|
||||
const emailsFormArray = this.contactForm.get('emails') as UntypedFormArray;
|
||||
|
||||
// Remove the email field
|
||||
emailsFormArray.removeAt(index);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an empty phone number field
|
||||
*/
|
||||
addPhoneNumberField(): void
|
||||
{
|
||||
// Create an empty phone number form group
|
||||
const phoneNumberFormGroup = this._formBuilder.group({
|
||||
country : ['us'],
|
||||
phoneNumber: [''],
|
||||
label : ['']
|
||||
});
|
||||
|
||||
// Add the phone number form group to the phoneNumbers form array
|
||||
(this.contactForm.get('phoneNumbers') as UntypedFormArray).push(phoneNumberFormGroup);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the phone number field
|
||||
*
|
||||
* @param index
|
||||
*/
|
||||
removePhoneNumberField(index: number): void
|
||||
{
|
||||
// Get form array for phone numbers
|
||||
const phoneNumbersFormArray = this.contactForm.get('phoneNumbers') as UntypedFormArray;
|
||||
|
||||
// Remove the phone number field
|
||||
phoneNumbersFormArray.removeAt(index);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get country info by iso code
|
||||
*
|
||||
* @param iso
|
||||
*/
|
||||
getCountryByIso(iso: string): Country
|
||||
{
|
||||
return this.countries.find(country => country.iso === iso);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container
|
||||
class="flex-auto h-full bg-card dark:bg-transparent"
|
||||
(backdropClick)="onBackdropClicked()">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-full md:w-160 dark:bg-gray-900"
|
||||
[mode]="drawerMode"
|
||||
[opened]="false"
|
||||
[position]="'end'"
|
||||
[disableClose]="true"
|
||||
#matDrawer>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-drawer>
|
||||
|
||||
<mat-drawer-content class="flex flex-col">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row md:flex-col flex-auto justify-between py-8 px-6 md:px-8 border-b">
|
||||
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<div class="text-4xl font-extrabold tracking-tight leading-none">Contacts</div>
|
||||
<div class="ml-0.5 font-medium text-secondary">
|
||||
<ng-container *ngIf="contactsCount > 0">
|
||||
{{contactsCount}}
|
||||
</ng-container>
|
||||
{{contactsCount | i18nPlural: {
|
||||
'=0' : 'No contacts',
|
||||
'=1' : 'contact',
|
||||
'other': 'contacts'
|
||||
} }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main actions -->
|
||||
<div class="flex items-center mt-4 sm:mt-0 md:mt-4">
|
||||
<!-- Search -->
|
||||
<div class="flex-auto">
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense fuse-mat-rounded w-full min-w-50"
|
||||
subscriptSizing="dynamic">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="searchInputControl"
|
||||
[autocomplete]="'off'"
|
||||
[placeholder]="'Search contacts'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- Add contact button -->
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="createContact()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2 mr-1">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contacts list -->
|
||||
<div class="relative">
|
||||
<ng-container *ngIf="contacts$ | async as contacts">
|
||||
<ng-container *ngIf="contacts.length; else noContacts">
|
||||
<ng-container *ngFor="let contact of contacts; let i = index; trackBy: trackByFn">
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)">
|
||||
<div class="z-10 sticky top-0 -mt-px px-6 py-1 md:px-8 border-t border-b font-medium uppercase text-secondary bg-gray-50 dark:bg-gray-900">
|
||||
{{contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Contact -->
|
||||
<a
|
||||
class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b"
|
||||
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedContact || selectedContact.id !== contact.id,
|
||||
'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
|
||||
[routerLink]="['./', contact.id]">
|
||||
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
|
||||
<ng-container *ngIf="contact.avatar">
|
||||
<img
|
||||
class="object-cover w-full h-full"
|
||||
[src]="contact.avatar"
|
||||
alt="Contact avatar"/>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!contact.avatar">
|
||||
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{contact.name.charAt(0)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="min-w-0 ml-4">
|
||||
<div class="font-medium leading-5 truncate">{{contact.name}}</div>
|
||||
<div class="leading-5 truncate text-secondary">{{contact.title}}</div>
|
||||
</div>
|
||||
</a>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!-- No contacts -->
|
||||
<ng-template #noContacts>
|
||||
<div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no contacts!</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,200 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UntypedFormControl } from '@angular/forms';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { filter, fromEvent, Observable, Subject, switchMap, takeUntil } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Contact, Country } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
|
||||
|
||||
@Component({
|
||||
selector : 'contacts-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ContactsListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
|
||||
|
||||
contacts$: Observable<Contact[]>;
|
||||
|
||||
contactsCount: number = 0;
|
||||
contactsTableColumns: string[] = ['name', 'email', 'phoneNumber', 'job'];
|
||||
countries: Country[];
|
||||
drawerMode: 'side' | 'over';
|
||||
searchInputControl: UntypedFormControl = new UntypedFormControl();
|
||||
selectedContact: Contact;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _contactsService: ContactsService,
|
||||
@Inject(DOCUMENT) private _document: any,
|
||||
private _router: Router,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the contacts
|
||||
this.contacts$ = this._contactsService.contacts$;
|
||||
this._contactsService.contacts$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contacts: Contact[]) => {
|
||||
|
||||
// Update the counts
|
||||
this.contactsCount = contacts.length;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the contact
|
||||
this._contactsService.contact$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contact: Contact) => {
|
||||
|
||||
// Update the selected contact
|
||||
this.selectedContact = contact;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the countries
|
||||
this._contactsService.countries$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((countries: Country[]) => {
|
||||
|
||||
// Update the countries
|
||||
this.countries = countries;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to search input field value changes
|
||||
this.searchInputControl.valueChanges
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
switchMap(query =>
|
||||
|
||||
// Search
|
||||
this._contactsService.searchContacts(query)
|
||||
)
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
// Subscribe to MatDrawer opened change
|
||||
this.matDrawer.openedChange.subscribe((opened) => {
|
||||
if ( !opened )
|
||||
{
|
||||
// Remove the selected contact when drawer closed
|
||||
this.selectedContact = null;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode if the given breakpoint is active
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Listen for shortcuts
|
||||
fromEvent(this._document, 'keydown')
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
filter<KeyboardEvent>(event =>
|
||||
(event.ctrlKey === true || event.metaKey) // Ctrl or Cmd
|
||||
&& (event.key === '/') // '/'
|
||||
)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.createContact();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On backdrop clicked
|
||||
*/
|
||||
onBackdropClicked(): void
|
||||
{
|
||||
// Go back to the list
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create contact
|
||||
*/
|
||||
createContact(): void
|
||||
{
|
||||
// Create the contact
|
||||
this._contactsService.createContact().subscribe((newContact) => {
|
||||
|
||||
// Go to the new contact
|
||||
this._router.navigate(['./', newContact.id], {relativeTo: this._activatedRoute});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
|
||||
import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
|
||||
import { ecommerceRoutes } from 'app/modules/admin/apps/ecommerce/ecommerce.routing';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
InventoryComponent,
|
||||
InventoryListComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(ecommerceRoutes),
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
MatPaginatorModule,
|
||||
MatProgressBarModule,
|
||||
MatRippleModule,
|
||||
MatSortModule,
|
||||
MatSelectModule,
|
||||
MatSlideToggleModule,
|
||||
MatTooltipModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class ECommerceModule
|
||||
{
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
|
||||
import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
|
||||
import { InventoryBrandsResolver, InventoryCategoriesResolver, InventoryProductsResolver, InventoryTagsResolver, InventoryVendorsResolver } from 'app/modules/admin/apps/ecommerce/inventory/inventory.resolvers';
|
||||
|
||||
export const ecommerceRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'inventory'
|
||||
},
|
||||
{
|
||||
path : 'inventory',
|
||||
component: InventoryComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: InventoryListComponent,
|
||||
resolve : {
|
||||
brands : InventoryBrandsResolver,
|
||||
categories: InventoryCategoriesResolver,
|
||||
products : InventoryProductsResolver,
|
||||
tags : InventoryTagsResolver,
|
||||
vendors : InventoryVendorsResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
/*children : [
|
||||
{
|
||||
path : '',
|
||||
component: ContactsListComponent,
|
||||
resolve : {
|
||||
tasks : ContactsResolver,
|
||||
countries: ContactsCountriesResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : ':id',
|
||||
component : ContactsDetailsComponent,
|
||||
resolve : {
|
||||
task : ContactsContactResolver,
|
||||
countries: ContactsCountriesResolver
|
||||
},
|
||||
canDeactivate: [CanDeactivateContactsDetails]
|
||||
}
|
||||
]
|
||||
}
|
||||
]*/
|
||||
}
|
||||
];
|
||||
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'inventory',
|
||||
templateUrl : './inventory.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class InventoryComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError, Observable, throwError } from 'rxjs';
|
||||
import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
|
||||
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryBrandsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _inventoryService: InventoryService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryBrand[]>
|
||||
{
|
||||
return this._inventoryService.getBrands();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryCategoriesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _inventoryService: InventoryService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryCategory[]>
|
||||
{
|
||||
return this._inventoryService.getCategories();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryProductResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _inventoryService: InventoryService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryProduct>
|
||||
{
|
||||
return this._inventoryService.getProductById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested product is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryProductsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _inventoryService: InventoryService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<{ pagination: InventoryPagination; products: InventoryProduct[] }>
|
||||
{
|
||||
return this._inventoryService.getProducts();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryTagsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _inventoryService: InventoryService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryTag[]>
|
||||
{
|
||||
return this._inventoryService.getTags();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryVendorsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _inventoryService: InventoryService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryVendor[]>
|
||||
{
|
||||
return this._inventoryService.getVendors();
|
||||
}
|
||||
}
|
||||
@ -1,440 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, filter, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class InventoryService
|
||||
{
|
||||
// Private
|
||||
private _brands: BehaviorSubject<InventoryBrand[] | null> = new BehaviorSubject(null);
|
||||
private _categories: BehaviorSubject<InventoryCategory[] | null> = new BehaviorSubject(null);
|
||||
private _pagination: BehaviorSubject<InventoryPagination | null> = new BehaviorSubject(null);
|
||||
private _product: BehaviorSubject<InventoryProduct | null> = new BehaviorSubject(null);
|
||||
private _products: BehaviorSubject<InventoryProduct[] | null> = new BehaviorSubject(null);
|
||||
private _tags: BehaviorSubject<InventoryTag[] | null> = new BehaviorSubject(null);
|
||||
private _vendors: BehaviorSubject<InventoryVendor[] | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for brands
|
||||
*/
|
||||
get brands$(): Observable<InventoryBrand[]>
|
||||
{
|
||||
return this._brands.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for categories
|
||||
*/
|
||||
get categories$(): Observable<InventoryCategory[]>
|
||||
{
|
||||
return this._categories.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for pagination
|
||||
*/
|
||||
get pagination$(): Observable<InventoryPagination>
|
||||
{
|
||||
return this._pagination.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for product
|
||||
*/
|
||||
get product$(): Observable<InventoryProduct>
|
||||
{
|
||||
return this._product.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for products
|
||||
*/
|
||||
get products$(): Observable<InventoryProduct[]>
|
||||
{
|
||||
return this._products.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for tags
|
||||
*/
|
||||
get tags$(): Observable<InventoryTag[]>
|
||||
{
|
||||
return this._tags.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for vendors
|
||||
*/
|
||||
get vendors$(): Observable<InventoryVendor[]>
|
||||
{
|
||||
return this._vendors.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get brands
|
||||
*/
|
||||
getBrands(): Observable<InventoryBrand[]>
|
||||
{
|
||||
return this._httpClient.get<InventoryBrand[]>('api/apps/ecommerce/inventory/brands').pipe(
|
||||
tap((brands) => {
|
||||
this._brands.next(brands);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get categories
|
||||
*/
|
||||
getCategories(): Observable<InventoryCategory[]>
|
||||
{
|
||||
return this._httpClient.get<InventoryCategory[]>('api/apps/ecommerce/inventory/categories').pipe(
|
||||
tap((categories) => {
|
||||
this._categories.next(categories);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get products
|
||||
*
|
||||
*
|
||||
* @param page
|
||||
* @param size
|
||||
* @param sort
|
||||
* @param order
|
||||
* @param search
|
||||
*/
|
||||
getProducts(page: number = 0, size: number = 10, sort: string = 'name', order: 'asc' | 'desc' | '' = 'asc', search: string = ''):
|
||||
Observable<{ pagination: InventoryPagination; products: InventoryProduct[] }>
|
||||
{
|
||||
return this._httpClient.get<{ pagination: InventoryPagination; products: InventoryProduct[] }>('api/apps/ecommerce/inventory/products', {
|
||||
params: {
|
||||
page: '' + page,
|
||||
size: '' + size,
|
||||
sort,
|
||||
order,
|
||||
search
|
||||
}
|
||||
}).pipe(
|
||||
tap((response) => {
|
||||
this._pagination.next(response.pagination);
|
||||
this._products.next(response.products);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get product by id
|
||||
*/
|
||||
getProductById(id: string): Observable<InventoryProduct>
|
||||
{
|
||||
return this._products.pipe(
|
||||
take(1),
|
||||
map((products) => {
|
||||
|
||||
// Find the product
|
||||
const product = products.find(item => item.id === id) || null;
|
||||
|
||||
// Update the product
|
||||
this._product.next(product);
|
||||
|
||||
// Return the product
|
||||
return product;
|
||||
}),
|
||||
switchMap((product) => {
|
||||
|
||||
if ( !product )
|
||||
{
|
||||
return throwError('Could not found product with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(product);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create product
|
||||
*/
|
||||
createProduct(): Observable<InventoryProduct>
|
||||
{
|
||||
return this.products$.pipe(
|
||||
take(1),
|
||||
switchMap(products => this._httpClient.post<InventoryProduct>('api/apps/ecommerce/inventory/product', {}).pipe(
|
||||
map((newProduct) => {
|
||||
|
||||
// Update the products with the new product
|
||||
this._products.next([newProduct, ...products]);
|
||||
|
||||
// Return the new product
|
||||
return newProduct;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update product
|
||||
*
|
||||
* @param id
|
||||
* @param product
|
||||
*/
|
||||
updateProduct(id: string, product: InventoryProduct): Observable<InventoryProduct>
|
||||
{
|
||||
return this.products$.pipe(
|
||||
take(1),
|
||||
switchMap(products => this._httpClient.patch<InventoryProduct>('api/apps/ecommerce/inventory/product', {
|
||||
id,
|
||||
product
|
||||
}).pipe(
|
||||
map((updatedProduct) => {
|
||||
|
||||
// Find the index of the updated product
|
||||
const index = products.findIndex(item => item.id === id);
|
||||
|
||||
// Update the product
|
||||
products[index] = updatedProduct;
|
||||
|
||||
// Update the products
|
||||
this._products.next(products);
|
||||
|
||||
// Return the updated product
|
||||
return updatedProduct;
|
||||
}),
|
||||
switchMap(updatedProduct => this.product$.pipe(
|
||||
take(1),
|
||||
filter(item => item && item.id === id),
|
||||
tap(() => {
|
||||
|
||||
// Update the product if it's selected
|
||||
this._product.next(updatedProduct);
|
||||
|
||||
// Return the updated product
|
||||
return updatedProduct;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the product
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteProduct(id: string): Observable<boolean>
|
||||
{
|
||||
return this.products$.pipe(
|
||||
take(1),
|
||||
switchMap(products => this._httpClient.delete('api/apps/ecommerce/inventory/product', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the index of the deleted product
|
||||
const index = products.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the product
|
||||
products.splice(index, 1);
|
||||
|
||||
// Update the products
|
||||
this._products.next(products);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get tags
|
||||
*/
|
||||
getTags(): Observable<InventoryTag[]>
|
||||
{
|
||||
return this._httpClient.get<InventoryTag[]>('api/apps/ecommerce/inventory/tags').pipe(
|
||||
tap((tags) => {
|
||||
this._tags.next(tags);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
createTag(tag: InventoryTag): Observable<InventoryTag>
|
||||
{
|
||||
return this.tags$.pipe(
|
||||
take(1),
|
||||
switchMap(tags => this._httpClient.post<InventoryTag>('api/apps/ecommerce/inventory/tag', {tag}).pipe(
|
||||
map((newTag) => {
|
||||
|
||||
// Update the tags with the new tag
|
||||
this._tags.next([...tags, newTag]);
|
||||
|
||||
// Return new tag from observable
|
||||
return newTag;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tag
|
||||
*
|
||||
* @param id
|
||||
* @param tag
|
||||
*/
|
||||
updateTag(id: string, tag: InventoryTag): Observable<InventoryTag>
|
||||
{
|
||||
return this.tags$.pipe(
|
||||
take(1),
|
||||
switchMap(tags => this._httpClient.patch<InventoryTag>('api/apps/ecommerce/inventory/tag', {
|
||||
id,
|
||||
tag
|
||||
}).pipe(
|
||||
map((updatedTag) => {
|
||||
|
||||
// Find the index of the updated tag
|
||||
const index = tags.findIndex(item => item.id === id);
|
||||
|
||||
// Update the tag
|
||||
tags[index] = updatedTag;
|
||||
|
||||
// Update the tags
|
||||
this._tags.next(tags);
|
||||
|
||||
// Return the updated tag
|
||||
return updatedTag;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the tag
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteTag(id: string): Observable<boolean>
|
||||
{
|
||||
return this.tags$.pipe(
|
||||
take(1),
|
||||
switchMap(tags => this._httpClient.delete('api/apps/ecommerce/inventory/tag', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the index of the deleted tag
|
||||
const index = tags.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the tag
|
||||
tags.splice(index, 1);
|
||||
|
||||
// Update the tags
|
||||
this._tags.next(tags);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
}),
|
||||
filter(isDeleted => isDeleted),
|
||||
switchMap(isDeleted => this.products$.pipe(
|
||||
take(1),
|
||||
map((products) => {
|
||||
|
||||
// Iterate through the contacts
|
||||
products.forEach((product) => {
|
||||
|
||||
const tagIndex = product.tags.findIndex(tag => tag === id);
|
||||
|
||||
// If the contact has the tag, remove it
|
||||
if ( tagIndex > -1 )
|
||||
{
|
||||
product.tags.splice(tagIndex, 1);
|
||||
}
|
||||
});
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get vendors
|
||||
*/
|
||||
getVendors(): Observable<InventoryVendor[]>
|
||||
{
|
||||
return this._httpClient.get<InventoryVendor[]>('api/apps/ecommerce/inventory/vendors').pipe(
|
||||
tap((vendors) => {
|
||||
this._vendors.next(vendors);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the avatar of the given contact
|
||||
*
|
||||
* @param id
|
||||
* @param avatar
|
||||
*/
|
||||
/*uploadAvatar(id: string, avatar: File): Observable<Contact>
|
||||
{
|
||||
return this.contacts$.pipe(
|
||||
take(1),
|
||||
switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/avatar', {
|
||||
id,
|
||||
avatar
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': avatar.type
|
||||
}
|
||||
}).pipe(
|
||||
map((updatedContact) => {
|
||||
|
||||
// Find the index of the updated contact
|
||||
const index = contacts.findIndex(item => item.id === id);
|
||||
|
||||
// Update the contact
|
||||
contacts[index] = updatedContact;
|
||||
|
||||
// Update the contacts
|
||||
this._contacts.next(contacts);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedContact;
|
||||
}),
|
||||
switchMap(updatedContact => this.contact$.pipe(
|
||||
take(1),
|
||||
filter(item => item && item.id === id),
|
||||
tap(() => {
|
||||
|
||||
// Update the contact if it's selected
|
||||
this._contact.next(updatedContact);
|
||||
|
||||
// Return the updated contact
|
||||
return updatedContact;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}*/
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
export interface InventoryProduct
|
||||
{
|
||||
id: string;
|
||||
category?: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
tags?: string[];
|
||||
sku?: string | null;
|
||||
barcode?: string | null;
|
||||
brand?: string | null;
|
||||
vendor: string | null;
|
||||
stock: number;
|
||||
reserved: number;
|
||||
cost: number;
|
||||
basePrice: number;
|
||||
taxPercent: number;
|
||||
price: number;
|
||||
weight: number;
|
||||
thumbnail: string;
|
||||
images: string[];
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export interface InventoryPagination
|
||||
{
|
||||
length: number;
|
||||
size: number;
|
||||
page: number;
|
||||
lastPage: number;
|
||||
startIndex: number;
|
||||
endIndex: number;
|
||||
}
|
||||
|
||||
export interface InventoryCategory
|
||||
{
|
||||
id: string;
|
||||
parentId: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export interface InventoryBrand
|
||||
{
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export interface InventoryTag
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export interface InventoryVendor
|
||||
{
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
@ -1,500 +0,0 @@
|
||||
<div class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b">
|
||||
<!-- Loader -->
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0"
|
||||
*ngIf="isLoading">
|
||||
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="text-4xl font-extrabold tracking-tight">Inventory</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
||||
<!-- Search -->
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense fuse-mat-rounded min-w-64"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="searchInputControl"
|
||||
[autocomplete]="'off'"
|
||||
[placeholder]="'Search products'">
|
||||
</mat-form-field>
|
||||
<!-- Add product button -->
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="createProduct()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2 mr-1">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-auto overflow-hidden">
|
||||
|
||||
<!-- Products list -->
|
||||
<div class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto">
|
||||
<ng-container *ngIf="(products$ | async) as products">
|
||||
<ng-container *ngIf="products.length > 0; else noProducts">
|
||||
<div class="grid">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
|
||||
matSort
|
||||
matSortDisableClear>
|
||||
<div></div>
|
||||
<div
|
||||
class="hidden md:block"
|
||||
[mat-sort-header]="'sku'">
|
||||
SKU
|
||||
</div>
|
||||
<div [mat-sort-header]="'name'">Name</div>
|
||||
<div
|
||||
class="hidden sm:block"
|
||||
[mat-sort-header]="'price'">
|
||||
Price
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:block"
|
||||
[mat-sort-header]="'stock'">
|
||||
Stock
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:block"
|
||||
[mat-sort-header]="'active'">
|
||||
Active
|
||||
</div>
|
||||
<div class="hidden sm:block">Details</div>
|
||||
</div>
|
||||
<!-- Rows -->
|
||||
<ng-container *ngIf="(products$ | async) as products">
|
||||
<ng-container *ngFor="let product of products; trackBy: trackByFn">
|
||||
<div class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b">
|
||||
|
||||
<!-- Image -->
|
||||
<div class="flex items-center">
|
||||
<div class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border">
|
||||
<img
|
||||
class="w-8"
|
||||
*ngIf="product.thumbnail"
|
||||
[alt]="'Product thumbnail image'"
|
||||
[src]="product.thumbnail">
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
|
||||
*ngIf="!product.thumbnail">
|
||||
NO THUMB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SKU -->
|
||||
<div class="hidden md:block truncate">
|
||||
{{product.sku}}
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="truncate">
|
||||
{{product.name}}
|
||||
</div>
|
||||
|
||||
<!-- Price -->
|
||||
<div class="hidden sm:block">
|
||||
{{product.price | currency:'USD':'symbol':'1.2-2'}}
|
||||
</div>
|
||||
|
||||
<!-- Stock -->
|
||||
<div class="hidden lg:flex items-center">
|
||||
<div class="min-w-4">{{product.stock}}</div>
|
||||
<!-- Low stock -->
|
||||
<div
|
||||
class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
|
||||
*ngIf="product.stock < 20">
|
||||
<div class="flex w-full h-1/3 bg-red-600"></div>
|
||||
</div>
|
||||
<!-- Medium stock -->
|
||||
<div
|
||||
class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
|
||||
*ngIf="product.stock >= 20 && product.stock < 30">
|
||||
<div class="flex w-full h-2/4 bg-orange-400"></div>
|
||||
</div>
|
||||
<!-- High stock -->
|
||||
<div
|
||||
class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
|
||||
*ngIf="product.stock >= 30">
|
||||
<div class="flex w-full h-full bg-green-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active -->
|
||||
<div class="hidden lg:block">
|
||||
<ng-container *ngIf="product.active">
|
||||
<mat-icon
|
||||
class="text-green-400 icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!product.active">
|
||||
<mat-icon
|
||||
class="text-gray-400 icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:x'"></mat-icon>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Details button -->
|
||||
<div>
|
||||
<button
|
||||
class="min-w-10 min-h-7 h-7 px-2 leading-6"
|
||||
mat-stroked-button
|
||||
(click)="toggleDetails(product.id)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="selectedProduct?.id === product.id ? 'heroicons_solid:chevron-up' : 'heroicons_solid:chevron-down'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<ng-container *ngIf="selectedProduct?.id === product.id">
|
||||
<ng-container *ngTemplateOutlet="rowDetailsTemplate; context: {$implicit: product}"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<mat-paginator
|
||||
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
|
||||
[ngClass]="{'pointer-events-none': isLoading}"
|
||||
[length]="pagination.length"
|
||||
[pageIndex]="pagination.page"
|
||||
[pageSize]="pagination.size"
|
||||
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||
[showFirstLastButtons]="true"></mat-paginator>
|
||||
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-template
|
||||
#rowDetailsTemplate
|
||||
let-product>
|
||||
<div class="shadow-lg overflow-hidden">
|
||||
<div class="flex border-b">
|
||||
<!-- Selected product form -->
|
||||
<form
|
||||
class="flex flex-col w-full"
|
||||
[formGroup]="selectedProductForm">
|
||||
|
||||
<div class="flex flex-col sm:flex-row p-8">
|
||||
|
||||
<!-- Product images and status -->
|
||||
<div class="flex flex-col items-center sm:items-start mb-8 sm:mb-0">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-32 h-44 border rounded overflow-hidden">
|
||||
<ng-container *ngIf="selectedProductForm.get('images').value.length; else noImage">
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
[src]="selectedProductForm.get('images').value[selectedProductForm.get('currentImageIndex').value]">
|
||||
</ng-container>
|
||||
<ng-template #noImage>
|
||||
<span class="flex items-center min-h-20 text-lg font-semibold">NO IMAGE</span>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center mt-2 whitespace-nowrap"
|
||||
*ngIf="selectedProductForm.get('images').value.length">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="cycleImages(false)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-left'"></mat-icon>
|
||||
</button>
|
||||
<span class="font-sm mx-2">
|
||||
{{selectedProductForm.get('currentImageIndex').value + 1}} of {{selectedProductForm.get('images').value.length}}
|
||||
</span>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="cycleImages(true)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col mt-8">
|
||||
<span class="font-semibold mb-2">Product status</span>
|
||||
<mat-slide-toggle
|
||||
[formControlName]="'active'"
|
||||
[color]="'primary'">
|
||||
{{selectedProductForm.get('active').value === true ? 'Active' : 'Disabled'}}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-auto flex-wrap">
|
||||
<!-- Name, SKU & etc. -->
|
||||
<div class="flex flex-col w-full lg:w-2/4 sm:pl-8">
|
||||
|
||||
<!-- Name -->
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'name'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- SKU and Barcode -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>SKU</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'sku'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-2/3 pl-2">
|
||||
<mat-label>Barcode</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'barcode'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Category, Brand & Vendor -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>Category</mat-label>
|
||||
<mat-select [formControlName]="'category'">
|
||||
<ng-container *ngFor="let category of categories">
|
||||
<mat-option [value]="category.id">
|
||||
{{category.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 px-2">
|
||||
<mat-label>Brand</mat-label>
|
||||
<mat-select [formControlName]="'brand'">
|
||||
<ng-container *ngFor="let brand of brands">
|
||||
<mat-option [value]="brand.id">
|
||||
{{brand.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>Vendor</mat-label>
|
||||
<mat-select [formControlName]="'vendor'">
|
||||
<ng-container *ngFor="let vendor of vendors">
|
||||
<mat-option [value]="vendor.id">
|
||||
{{vendor.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Stock and Reserved -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>Stock</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
[formControlName]="'stock'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>Reserved</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
[formControlName]="'reserved'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cost, Base price, Tax & Price -->
|
||||
<div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Cost</mat-label>
|
||||
<span matPrefix>$</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'cost'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Base Price</mat-label>
|
||||
<span matPrefix>$</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'basePrice'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Tax</mat-label>
|
||||
<span matSuffix>%</span>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
[formControlName]="'taxPercent'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Price</mat-label>
|
||||
<span matSuffix>$</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'price'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Weight & Tags -->
|
||||
<div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Weight</mat-label>
|
||||
<span matSuffix>lbs.</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'weight'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Tags -->
|
||||
<span class="mb-px font-medium leading-tight">Tags</span>
|
||||
<div class="mt-1.5 rounded-md border border-gray-300 dark:border-gray-500 shadow-sm overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center -my-px py-2 px-3">
|
||||
<div class="flex items-center flex-auto min-w-0">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<input
|
||||
class="min-w-0 ml-2 py-1 border-0"
|
||||
type="text"
|
||||
placeholder="Enter tag name"
|
||||
(input)="filterTags($event)"
|
||||
(keydown)="filterTagsInputKeyDown($event)"
|
||||
[maxLength]="50"
|
||||
#newTagInput>
|
||||
</div>
|
||||
<button
|
||||
class="ml-3 w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
(click)="toggleTagsEditMode()">
|
||||
<mat-icon
|
||||
*ngIf="!tagsEditMode"
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
|
||||
<mat-icon
|
||||
*ngIf="tagsEditMode"
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Available tags -->
|
||||
<div class="h-44 leading-none overflow-y-auto border-t border-gray-300 dark:border-gray-500">
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="!tagsEditMode">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<mat-checkbox
|
||||
class="flex items-center h-10 min-h-10 pl-1 pr-4"
|
||||
[color]="'primary'"
|
||||
[checked]="selectedProduct.tags.includes(tag.id)"
|
||||
(change)="toggleProductTag(tag, $event)">
|
||||
{{tag.title}}
|
||||
</mat-checkbox>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<!-- Tags editing -->
|
||||
<ng-container *ngIf="tagsEditMode">
|
||||
<div class="p-4 space-y-2">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<input
|
||||
matInput
|
||||
[value]="tag.title"
|
||||
(input)="updateTagTitle(tag, $event)">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="deleteTag(tag)"
|
||||
matSuffix>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer border-t hover:bg-gray-50 dark:hover:bg-hover"
|
||||
*ngIf="shouldShowCreateTagButton(newTagInput.value)"
|
||||
(click)="createTag(newTagInput.value); newTagInput.value = ''"
|
||||
matRipple>
|
||||
<mat-icon
|
||||
class="mr-2 icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
<div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between w-full border-t px-8 py-4">
|
||||
<button
|
||||
class="-ml-4"
|
||||
mat-button
|
||||
[color]="'warn'"
|
||||
(click)="deleteSelectedProduct()">
|
||||
Delete
|
||||
</button>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex items-center mr-4"
|
||||
*ngIf="flashMessage">
|
||||
<ng-container *ngIf="flashMessage === 'success'">
|
||||
<mat-icon
|
||||
class="text-green-500"
|
||||
[svgIcon]="'heroicons_outline:check'"></mat-icon>
|
||||
<span class="ml-2">Product updated</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="flashMessage === 'error'">
|
||||
<mat-icon
|
||||
class="text-red-500"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
<span class="ml-2">An error occurred, try again!</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="updateSelectedProduct()">
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #noProducts>
|
||||
<div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no products!</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,591 +0,0 @@
|
||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { MatCheckboxChange } from '@angular/material/checkbox';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { debounceTime, map, merge, Observable, Subject, switchMap, takeUntil } from 'rxjs';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
|
||||
import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
|
||||
|
||||
@Component({
|
||||
selector : 'inventory-list',
|
||||
templateUrl : './inventory.component.html',
|
||||
styles : [
|
||||
/* language=SCSS */
|
||||
`
|
||||
.inventory-grid {
|
||||
grid-template-columns: 48px auto 40px;
|
||||
|
||||
@screen sm {
|
||||
grid-template-columns: 48px auto 112px 72px;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
grid-template-columns: 48px 112px auto 112px 72px;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
|
||||
}
|
||||
}
|
||||
`
|
||||
],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
{
|
||||
@ViewChild(MatPaginator) private _paginator: MatPaginator;
|
||||
@ViewChild(MatSort) private _sort: MatSort;
|
||||
|
||||
products$: Observable<InventoryProduct[]>;
|
||||
|
||||
brands: InventoryBrand[];
|
||||
categories: InventoryCategory[];
|
||||
filteredTags: InventoryTag[];
|
||||
flashMessage: 'success' | 'error' | null = null;
|
||||
isLoading: boolean = false;
|
||||
pagination: InventoryPagination;
|
||||
searchInputControl: UntypedFormControl = new UntypedFormControl();
|
||||
selectedProduct: InventoryProduct | null = null;
|
||||
selectedProductForm: UntypedFormGroup;
|
||||
tags: InventoryTag[];
|
||||
tagsEditMode: boolean = false;
|
||||
vendors: InventoryVendor[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseConfirmationService: FuseConfirmationService,
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
private _inventoryService: InventoryService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Create the selected product form
|
||||
this.selectedProductForm = this._formBuilder.group({
|
||||
id : [''],
|
||||
category : [''],
|
||||
name : ['', [Validators.required]],
|
||||
description : [''],
|
||||
tags : [[]],
|
||||
sku : [''],
|
||||
barcode : [''],
|
||||
brand : [''],
|
||||
vendor : [''],
|
||||
stock : [''],
|
||||
reserved : [''],
|
||||
cost : [''],
|
||||
basePrice : [''],
|
||||
taxPercent : [''],
|
||||
price : [''],
|
||||
weight : [''],
|
||||
thumbnail : [''],
|
||||
images : [[]],
|
||||
currentImageIndex: [0], // Image index that is currently being viewed
|
||||
active : [false]
|
||||
});
|
||||
|
||||
// Get the brands
|
||||
this._inventoryService.brands$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((brands: InventoryBrand[]) => {
|
||||
|
||||
// Update the brands
|
||||
this.brands = brands;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the categories
|
||||
this._inventoryService.categories$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((categories: InventoryCategory[]) => {
|
||||
|
||||
// Update the categories
|
||||
this.categories = categories;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the pagination
|
||||
this._inventoryService.pagination$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((pagination: InventoryPagination) => {
|
||||
|
||||
// Update the pagination
|
||||
this.pagination = pagination;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the products
|
||||
this.products$ = this._inventoryService.products$;
|
||||
|
||||
// Get the tags
|
||||
this._inventoryService.tags$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((tags: InventoryTag[]) => {
|
||||
|
||||
// Update the tags
|
||||
this.tags = tags;
|
||||
this.filteredTags = tags;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the vendors
|
||||
this._inventoryService.vendors$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((vendors: InventoryVendor[]) => {
|
||||
|
||||
// Update the vendors
|
||||
this.vendors = vendors;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to search input field value changes
|
||||
this.searchInputControl.valueChanges
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
debounceTime(300),
|
||||
switchMap((query) => {
|
||||
this.closeDetails();
|
||||
this.isLoading = true;
|
||||
return this._inventoryService.getProducts(0, 10, 'name', 'asc', query);
|
||||
}),
|
||||
map(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
if ( this._sort && this._paginator )
|
||||
{
|
||||
// Set the initial sort
|
||||
this._sort.sort({
|
||||
id : 'name',
|
||||
start : 'asc',
|
||||
disableClear: true
|
||||
});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// If the user changes the sort order...
|
||||
this._sort.sortChange
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Reset back to the first page
|
||||
this._paginator.pageIndex = 0;
|
||||
|
||||
// Close the details
|
||||
this.closeDetails();
|
||||
});
|
||||
|
||||
// Get products if sort or page changes
|
||||
merge(this._sort.sortChange, this._paginator.page).pipe(
|
||||
switchMap(() => {
|
||||
this.closeDetails();
|
||||
this.isLoading = true;
|
||||
return this._inventoryService.getProducts(this._paginator.pageIndex, this._paginator.pageSize, this._sort.active, this._sort.direction);
|
||||
}),
|
||||
map(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
).subscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle product details
|
||||
*
|
||||
* @param productId
|
||||
*/
|
||||
toggleDetails(productId: string): void
|
||||
{
|
||||
// If the product is already selected...
|
||||
if ( this.selectedProduct && this.selectedProduct.id === productId )
|
||||
{
|
||||
// Close the details
|
||||
this.closeDetails();
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the product by id
|
||||
this._inventoryService.getProductById(productId)
|
||||
.subscribe((product) => {
|
||||
|
||||
// Set the selected product
|
||||
this.selectedProduct = product;
|
||||
|
||||
// Fill the form
|
||||
this.selectedProductForm.patchValue(product);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the details
|
||||
*/
|
||||
closeDetails(): void
|
||||
{
|
||||
this.selectedProduct = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cycle through images of selected product
|
||||
*/
|
||||
cycleImages(forward: boolean = true): void
|
||||
{
|
||||
// Get the image count and current image index
|
||||
const count = this.selectedProductForm.get('images').value.length;
|
||||
const currentIndex = this.selectedProductForm.get('currentImageIndex').value;
|
||||
|
||||
// Calculate the next and previous index
|
||||
const nextIndex = currentIndex + 1 === count ? 0 : currentIndex + 1;
|
||||
const prevIndex = currentIndex - 1 < 0 ? count - 1 : currentIndex - 1;
|
||||
|
||||
// If cycling forward...
|
||||
if ( forward )
|
||||
{
|
||||
this.selectedProductForm.get('currentImageIndex').setValue(nextIndex);
|
||||
}
|
||||
// If cycling backwards...
|
||||
else
|
||||
{
|
||||
this.selectedProductForm.get('currentImageIndex').setValue(prevIndex);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the tags edit mode
|
||||
*/
|
||||
toggleTagsEditMode(): void
|
||||
{
|
||||
this.tagsEditMode = !this.tagsEditMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTags(event): void
|
||||
{
|
||||
// Get the value
|
||||
const value = event.target.value.toLowerCase();
|
||||
|
||||
// Filter the tags
|
||||
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags input key down event
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTagsInputKeyDown(event): void
|
||||
{
|
||||
// Return if the pressed key is not 'Enter'
|
||||
if ( event.key !== 'Enter' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no tag available...
|
||||
if ( this.filteredTags.length === 0 )
|
||||
{
|
||||
// Create the tag
|
||||
this.createTag(event.target.value);
|
||||
|
||||
// Clear the input
|
||||
event.target.value = '';
|
||||
|
||||
// Return
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is a tag...
|
||||
const tag = this.filteredTags[0];
|
||||
const isTagApplied = this.selectedProduct.tags.find(id => id === tag.id);
|
||||
|
||||
// If the found tag is already applied to the product...
|
||||
if ( isTagApplied )
|
||||
{
|
||||
// Remove the tag from the product
|
||||
this.removeTagFromProduct(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise add the tag to the product
|
||||
this.addTagToProduct(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new tag
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
createTag(title: string): void
|
||||
{
|
||||
const tag = {
|
||||
title
|
||||
};
|
||||
|
||||
// Create tag on the server
|
||||
this._inventoryService.createTag(tag)
|
||||
.subscribe((response) => {
|
||||
|
||||
// Add the tag to the product
|
||||
this.addTagToProduct(response);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tag title
|
||||
*
|
||||
* @param tag
|
||||
* @param event
|
||||
*/
|
||||
updateTagTitle(tag: InventoryTag, event): void
|
||||
{
|
||||
// Update the title on the tag
|
||||
tag.title = event.target.value;
|
||||
|
||||
// Update the tag on the server
|
||||
this._inventoryService.updateTag(tag.id, tag)
|
||||
.pipe(debounceTime(300))
|
||||
.subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
deleteTag(tag: InventoryTag): void
|
||||
{
|
||||
// Delete the tag from the server
|
||||
this._inventoryService.deleteTag(tag.id).subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add tag to the product
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
addTagToProduct(tag: InventoryTag): void
|
||||
{
|
||||
// Add the tag
|
||||
this.selectedProduct.tags.unshift(tag.id);
|
||||
|
||||
// Update the selected product form
|
||||
this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove tag from the product
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
removeTagFromProduct(tag: InventoryTag): void
|
||||
{
|
||||
// Remove the tag
|
||||
this.selectedProduct.tags.splice(this.selectedProduct.tags.findIndex(item => item === tag.id), 1);
|
||||
|
||||
// Update the selected product form
|
||||
this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle product tag
|
||||
*
|
||||
* @param tag
|
||||
* @param change
|
||||
*/
|
||||
toggleProductTag(tag: InventoryTag, change: MatCheckboxChange): void
|
||||
{
|
||||
if ( change.checked )
|
||||
{
|
||||
this.addTagToProduct(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.removeTagFromProduct(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Should the create tag button be visible
|
||||
*
|
||||
* @param inputValue
|
||||
*/
|
||||
shouldShowCreateTagButton(inputValue: string): boolean
|
||||
{
|
||||
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create product
|
||||
*/
|
||||
createProduct(): void
|
||||
{
|
||||
// Create the product
|
||||
this._inventoryService.createProduct().subscribe((newProduct) => {
|
||||
|
||||
// Go to new product
|
||||
this.selectedProduct = newProduct;
|
||||
|
||||
// Fill the form
|
||||
this.selectedProductForm.patchValue(newProduct);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the selected product using the form data
|
||||
*/
|
||||
updateSelectedProduct(): void
|
||||
{
|
||||
// Get the product object
|
||||
const product = this.selectedProductForm.getRawValue();
|
||||
|
||||
// Remove the currentImageIndex field
|
||||
delete product.currentImageIndex;
|
||||
|
||||
// Update the product on the server
|
||||
this._inventoryService.updateProduct(product.id, product).subscribe(() => {
|
||||
|
||||
// Show a success message
|
||||
this.showFlashMessage('success');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the selected product using the form data
|
||||
*/
|
||||
deleteSelectedProduct(): void
|
||||
{
|
||||
// Open the confirmation dialog
|
||||
const confirmation = this._fuseConfirmationService.open({
|
||||
title : 'Delete product',
|
||||
message: 'Are you sure you want to remove this product? This action cannot be undone!',
|
||||
actions: {
|
||||
confirm: {
|
||||
label: 'Delete'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Subscribe to the confirmation dialog closed action
|
||||
confirmation.afterClosed().subscribe((result) => {
|
||||
|
||||
// If the confirm button pressed...
|
||||
if ( result === 'confirmed' )
|
||||
{
|
||||
|
||||
// Get the product object
|
||||
const product = this.selectedProductForm.getRawValue();
|
||||
|
||||
// Delete the product on the server
|
||||
this._inventoryService.deleteProduct(product.id).subscribe(() => {
|
||||
|
||||
// Close the details
|
||||
this.closeDetails();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show flash message
|
||||
*/
|
||||
showFlashMessage(type: 'success' | 'error'): void
|
||||
{
|
||||
// Show the message
|
||||
this.flashMessage = type;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Hide it after 3 seconds
|
||||
setTimeout(() => {
|
||||
|
||||
this.flashMessage = null;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
<div class="flex flex-col flex-auto p-6 md:p-8">
|
||||
|
||||
<!-- Close button -->
|
||||
<div class="flex items-center justify-end">
|
||||
<a
|
||||
mat-icon-button
|
||||
[routerLink]="['../../']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="mt-8 aspect-[9/6]">
|
||||
<div class="flex items-center justify-center h-full border rounded-lg bg-gray-50 dark:bg-card">
|
||||
<ng-container *ngIf="item.type === 'folder'">
|
||||
<mat-icon
|
||||
class="icon-size-24 text-hint"
|
||||
[svgIcon]="'heroicons_outline:folder'"></mat-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="item.type !== 'folder'">
|
||||
<mat-icon
|
||||
class="icon-size-24 text-hint"
|
||||
[svgIcon]="'heroicons_outline:document'"></mat-icon>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name & Type -->
|
||||
<div class="flex flex-col items-start mt-8">
|
||||
<div class="text-xl font-medium">{{item.name}}</div>
|
||||
<div
|
||||
class="mt-1 px-1.5 rounded text-sm font-semibold leading-5 text-white"
|
||||
[class.bg-indigo-600]="item.type === 'folder'"
|
||||
[class.bg-red-600]="item.type === 'PDF'"
|
||||
[class.bg-blue-600]="item.type === 'DOC'"
|
||||
[class.bg-green-600]="item.type === 'XLS'"
|
||||
[class.bg-gray-600]="item.type === 'TXT'"
|
||||
[class.bg-amber-600]="item.type === 'JPG'">
|
||||
{{item.type.toUpperCase()}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Information -->
|
||||
<div class="text-lg font-medium mt-8">Information</div>
|
||||
<div class="flex flex-col mt-4 border-t border-b divide-y font-medium">
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div class="text-secondary">Created By</div>
|
||||
<div>{{item.createdBy}}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div class="text-secondary">Created At</div>
|
||||
<div>{{item.createdAt}}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div class="text-secondary">Modified At</div>
|
||||
<div>{{item.modifiedAt}}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div class="text-secondary">Size</div>
|
||||
<div>{{item.size}}</div>
|
||||
</div>
|
||||
<ng-container *ngIf="item.contents">
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div class="text-secondary">Contents</div>
|
||||
<div>{{item.contents}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="flex items-center justify-between mt-8">
|
||||
<div class="text-lg font-medium">Description</div>
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:pencil'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex mt-2 border-t">
|
||||
<div class="py-3">
|
||||
<ng-container *ngIf="item.description">
|
||||
<div>{{item.description}}</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!item.description">
|
||||
<div class="italic text-secondary">Click here to add a description</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="grid grid-cols-2 gap-4 w-full mt-8">
|
||||
<button
|
||||
class="flex-auto"
|
||||
mat-flat-button
|
||||
[color]="'primary'">
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
class="flex-auto"
|
||||
mat-stroked-button>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,90 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawerToggleResult } from '@angular/material/sidenav';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { Item } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FileManagerDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
item: Item;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fileManagerListComponent: FileManagerListComponent,
|
||||
private _fileManagerService: FileManagerService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Open the drawer
|
||||
this._fileManagerListComponent.matDrawer.open();
|
||||
|
||||
// Get the item
|
||||
this._fileManagerService.item$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((item: Item) => {
|
||||
|
||||
// Open the drawer in case it is closed
|
||||
this._fileManagerListComponent.matDrawer.open();
|
||||
|
||||
// Get the item
|
||||
this.item = item;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Close the drawer
|
||||
*/
|
||||
closeDrawer(): Promise<MatDrawerToggleResult>
|
||||
{
|
||||
return this._fileManagerListComponent.matDrawer.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager',
|
||||
templateUrl : './file-manager.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FileManagerComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CanDeactivateFileManagerDetails implements CanDeactivate<FileManagerDetailsComponent>
|
||||
{
|
||||
canDeactivate(
|
||||
component: FileManagerDetailsComponent,
|
||||
currentRoute: ActivatedRouteSnapshot,
|
||||
currentState: RouterStateSnapshot,
|
||||
nextState: RouterStateSnapshot
|
||||
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
|
||||
{
|
||||
// Get the next route
|
||||
let nextRoute: ActivatedRouteSnapshot = nextState.root;
|
||||
while ( nextRoute.firstChild )
|
||||
{
|
||||
nextRoute = nextRoute.firstChild;
|
||||
}
|
||||
|
||||
// If the next state doesn't contain '/file-manager'
|
||||
// it means we are navigating away from the
|
||||
// file manager app
|
||||
if ( !nextState.url.includes('/file-manager') )
|
||||
{
|
||||
// Let it navigate
|
||||
return true;
|
||||
}
|
||||
|
||||
// If we are navigating to another item...
|
||||
if ( nextState.url.includes('/details') )
|
||||
{
|
||||
// Just navigate
|
||||
return true;
|
||||
}
|
||||
// Otherwise...
|
||||
else
|
||||
{
|
||||
// Close the drawer first, and then navigate
|
||||
return component.closeDrawer().then(() => true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { fileManagerRoutes } from 'app/modules/admin/apps/file-manager/file-manager.routing';
|
||||
import { FileManagerComponent } from 'app/modules/admin/apps/file-manager/file-manager.component';
|
||||
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
|
||||
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FileManagerComponent,
|
||||
FileManagerDetailsComponent,
|
||||
FileManagerListComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(fileManagerRoutes),
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatSidenavModule,
|
||||
MatTooltipModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class FileManagerModule
|
||||
{
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError, Observable, throwError } from 'rxjs';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { Item } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FileManagerItemsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fileManagerService: FileManagerService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item[]>
|
||||
{
|
||||
return this._fileManagerService.getItems();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FileManagerFolderResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _fileManagerService: FileManagerService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item[]>
|
||||
{
|
||||
return this._fileManagerService.getItems(route.paramMap.get('folderId'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FileManagerItemResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _fileManagerService: FileManagerService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item>
|
||||
{
|
||||
return this._fileManagerService.getItemById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { CanDeactivateFileManagerDetails } from 'app/modules/admin/apps/file-manager/file-manager.guards';
|
||||
import { FileManagerComponent } from 'app/modules/admin/apps/file-manager/file-manager.component';
|
||||
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
|
||||
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
|
||||
import { FileManagerFolderResolver, FileManagerItemResolver, FileManagerItemsResolver } from 'app/modules/admin/apps/file-manager/file-manager.resolvers';
|
||||
|
||||
export const fileManagerRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: FileManagerComponent,
|
||||
children : [
|
||||
{
|
||||
path : 'folders/:folderId',
|
||||
component: FileManagerListComponent,
|
||||
resolve : {
|
||||
item: FileManagerFolderResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : 'details/:id',
|
||||
component : FileManagerDetailsComponent,
|
||||
resolve : {
|
||||
item: FileManagerItemResolver
|
||||
},
|
||||
canDeactivate: [CanDeactivateFileManagerDetails]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : '',
|
||||
component: FileManagerListComponent,
|
||||
resolve : {
|
||||
items: FileManagerItemsResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : 'details/:id',
|
||||
component : FileManagerDetailsComponent,
|
||||
resolve : {
|
||||
item: FileManagerItemResolver
|
||||
},
|
||||
canDeactivate: [CanDeactivateFileManagerDetails]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -1,87 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
import { Item, Items } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FileManagerService
|
||||
{
|
||||
// Private
|
||||
private _item: BehaviorSubject<Item | null> = new BehaviorSubject(null);
|
||||
private _items: BehaviorSubject<Items | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for items
|
||||
*/
|
||||
get items$(): Observable<Items>
|
||||
{
|
||||
return this._items.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for item
|
||||
*/
|
||||
get item$(): Observable<Item>
|
||||
{
|
||||
return this._item.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get items
|
||||
*/
|
||||
getItems(folderId: string | null = null): Observable<Item[]>
|
||||
{
|
||||
return this._httpClient.get<Items>('api/apps/file-manager', {params: {folderId}}).pipe(
|
||||
tap((response: any) => {
|
||||
this._items.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get item by id
|
||||
*/
|
||||
getItemById(id: string): Observable<Item>
|
||||
{
|
||||
return this._items.pipe(
|
||||
take(1),
|
||||
map((items) => {
|
||||
|
||||
// Find within the folders and files
|
||||
const item = [...items.folders, ...items.files].find(value => value.id === id) || null;
|
||||
|
||||
// Update the item
|
||||
this._item.next(item);
|
||||
|
||||
// Return the item
|
||||
return item;
|
||||
}),
|
||||
switchMap((item) => {
|
||||
|
||||
if ( !item )
|
||||
{
|
||||
return throwError('Could not found the item with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(item);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
export interface Items
|
||||
{
|
||||
folders: Item[];
|
||||
files: Item[];
|
||||
path: any[];
|
||||
}
|
||||
|
||||
export interface Item
|
||||
{
|
||||
id?: string;
|
||||
folderId?: string;
|
||||
name?: string;
|
||||
createdBy?: string;
|
||||
createdAt?: string;
|
||||
modifiedAt?: string;
|
||||
size?: string;
|
||||
type?: string;
|
||||
contents?: string | null;
|
||||
description?: string | null;
|
||||
}
|
||||
@ -1,176 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container
|
||||
class="flex-auto h-full bg-card dark:bg-transparent"
|
||||
(backdropClick)="onBackdropClicked()">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-full sm:w-100 dark:bg-gray-900"
|
||||
[mode]="drawerMode"
|
||||
[opened]="false"
|
||||
[position]="'end'"
|
||||
[disableClose]="true"
|
||||
#matDrawer>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-drawer>
|
||||
|
||||
<mat-drawer-content class="flex flex-col bg-gray-100 dark:bg-transparent">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col flex-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between p-6 sm:py-12 md:px-8 border-b bg-card dark:bg-transparent">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<div class="text-4xl font-extrabold tracking-tight leading-none">File Manager</div>
|
||||
<div class="flex items-center mt-0.5 font-medium text-secondary">
|
||||
<ng-container *ngIf="!items.path.length">
|
||||
{{items.folders.length}} folders, {{items.files.length}} files
|
||||
</ng-container>
|
||||
<!-- Breadcrumbs -->
|
||||
<ng-container *ngIf="items.path.length">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a
|
||||
class="text-primary cursor-pointer"
|
||||
[routerLink]="['/apps/file-manager']">Home
|
||||
</a>
|
||||
<div class="">/</div>
|
||||
<ng-container *ngFor="let path of items.path; let last = last; trackBy: trackByFn">
|
||||
<ng-container *ngIf="!last">
|
||||
<a
|
||||
class="text-primary cursor-pointer"
|
||||
[routerLink]="['/apps/file-manager/folders/', path.id]">{{path.name}}</a>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="last">
|
||||
<div>{{path.name}}</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!last">
|
||||
<div class="">/</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="mt-4 sm:mt-0">
|
||||
<!-- Upload button -->
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2 mr-1">Upload file</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Items list -->
|
||||
<ng-container *ngIf="items && (items.folders.length > 0 || items.files.length > 0); else noItems">
|
||||
<div class="p-6 md:p-8 space-y-8">
|
||||
<!-- Folders -->
|
||||
<ng-container *ngIf="items.folders.length > 0">
|
||||
<div>
|
||||
<div class="font-medium">Folders</div>
|
||||
<div
|
||||
class="flex flex-wrap -m-2 mt-2">
|
||||
<ng-container *ngFor="let folder of items.folders; trackBy:trackByFn">
|
||||
<div class="relative w-40 h-40 m-2 p-4 shadow rounded-2xl bg-card">
|
||||
<a
|
||||
class="absolute z-20 top-1.5 right-1.5 w-8 h-8 min-h-8"
|
||||
(click)="$event.preventDefault()"
|
||||
[routerLink]="['./details/', folder.id]"
|
||||
mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
|
||||
</a>
|
||||
<a
|
||||
class="z-10 absolute inset-0 flex flex-col p-4 cursor-pointer"
|
||||
[routerLink]="['/apps/file-manager/folders/', folder.id]">
|
||||
<div class="aspect-[9/6]">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="icon-size-14 text-hint opacity-50"
|
||||
[svgIcon]="'heroicons_solid:folder'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
|
||||
<div
|
||||
class="truncate"
|
||||
[matTooltip]="folder.name">{{folder.name}}</div>
|
||||
<ng-container *ngIf="folder.contents">
|
||||
<div class="text-secondary truncate">{{folder.contents}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Files -->
|
||||
<ng-container *ngIf="items.files.length > 0">
|
||||
<div>
|
||||
<div class="font-medium">Files</div>
|
||||
<div
|
||||
class="flex flex-wrap -m-2 mt-2">
|
||||
<ng-container *ngFor="let file of items.files; trackBy:trackByFn">
|
||||
<a
|
||||
class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
|
||||
[routerLink]="['./details/', file.id]">
|
||||
<div class="aspect-[9/6]">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<!-- Icons -->
|
||||
<div class="relative">
|
||||
<mat-icon
|
||||
class="icon-size-14 text-hint opacity-50"
|
||||
[svgIcon]="'heroicons_solid:document'"></mat-icon>
|
||||
<div
|
||||
class="absolute left-0 bottom-0 px-1.5 rounded text-sm font-semibold leading-5 text-white"
|
||||
[class.bg-red-600]="file.type === 'PDF'"
|
||||
[class.bg-blue-600]="file.type === 'DOC'"
|
||||
[class.bg-green-600]="file.type === 'XLS'"
|
||||
[class.bg-gray-600]="file.type === 'TXT'"
|
||||
[class.bg-amber-600]="file.type === 'JPG'">
|
||||
{{file.type.toUpperCase()}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
|
||||
<div
|
||||
class="truncate"
|
||||
[matTooltip]="file.name">{{file.name}}</div>
|
||||
<ng-container *ngIf="file.contents">
|
||||
<div class="text-secondary truncate">{{file.contents}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- No items template -->
|
||||
<ng-template #noItems>
|
||||
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:folder-open'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no items!</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,114 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { Item, Items } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FileManagerListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
|
||||
drawerMode: 'side' | 'over';
|
||||
selectedItem: Item;
|
||||
items: Items;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _fileManagerService: FileManagerService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the items
|
||||
this._fileManagerService.items$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((items: Items) => {
|
||||
this.items = items;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the item
|
||||
this._fileManagerService.item$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((item: Item) => {
|
||||
this.selectedItem = item;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media query change
|
||||
this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((state) => {
|
||||
|
||||
// Calculate the drawer mode
|
||||
this.drawerMode = state.matches ? 'side' : 'over';
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On backdrop clicked
|
||||
*/
|
||||
onBackdropClicked(): void
|
||||
{
|
||||
// Go back to the list
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Help Center</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
<ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn">
|
||||
<div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div>
|
||||
<mat-accordion class="max-w-4xl mt-8">
|
||||
<ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header [collapsedHeight]="'56px'">
|
||||
<mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
{{faq.answer}}
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
</mat-accordion>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,64 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { FaqCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-faqs',
|
||||
templateUrl : './faqs.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HelpCenterFaqsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
faqCategories: FaqCategory[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the FAQs
|
||||
this._helpCenterService.faqs$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((faqCategories) => {
|
||||
this.faqCategories = faqCategories;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Guides & Resources</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
{{guideCategory.title}}
|
||||
</div>
|
||||
<!-- Guides -->
|
||||
<div class="flex flex-col items-start mt-8 sm:mt-12 space-y-2">
|
||||
<ng-container *ngFor="let guide of guideCategory.guides; trackBy: trackByFn">
|
||||
<a
|
||||
class="font-medium hover:underline text-primary-500"
|
||||
[routerLink]="[guide.slug]">
|
||||
{{guide.title}}
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,69 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-guides-category',
|
||||
templateUrl : './category.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HelpCenterGuidesCategoryComponent implements OnInit, OnDestroy
|
||||
{
|
||||
guideCategory: GuideCategory;
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _helpCenterService: HelpCenterService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the Guides
|
||||
this._helpCenterService.guides$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((guideCategories) => {
|
||||
this.guideCategory = guideCategories[0];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="ml-2">Back to {{guideCategory.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">{{guideCategory.guides[0].title}}</div>
|
||||
<div class="mt-1 sm:text-2xl tracking-tight text-secondary">{{guideCategory.guides[0].subtitle}}</div>
|
||||
|
||||
<!-- Guide -->
|
||||
<div
|
||||
class="mt-8 sm:mt-12 max-w-none prose prose-sm"
|
||||
[innerHTML]="guideCategory.guides[0].content"></div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-10 pt-8 border-t">
|
||||
<div class="text-sm font-medium text-secondary">Last updated 2 months ago</div>
|
||||
<div class="flex items-center mt-2 sm:mt-0">
|
||||
<div class="font-medium text-secondary">Was this page helpful?</div>
|
||||
<div class="ml-4">
|
||||
<button mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:thumb-up'"></mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:thumb-down'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transition-shadow ease-in-out duration-150"
|
||||
[routerLink]="'.'">
|
||||
<div>
|
||||
<div class="text-secondary">Next</div>
|
||||
<div class="text-lg font-semibold">Removing a media from a project</div>
|
||||
</div>
|
||||
<mat-icon
|
||||
class="ml-3"
|
||||
[svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,64 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-guides-guide',
|
||||
templateUrl : './guide.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HelpCenterGuidesGuideComponent implements OnInit, OnDestroy
|
||||
{
|
||||
guideCategory: GuideCategory;
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the Guides
|
||||
this._helpCenterService.guide$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((guideCategory) => {
|
||||
this.guideCategory = guideCategory;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Help Center</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
Guides & Resources
|
||||
</div>
|
||||
<!-- Guides -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 grid-flow-row gap-y-12 sm:gap-x-4 mt-8 sm:mt-12">
|
||||
<ng-container *ngFor="let guideCategory of guideCategories; trackBy: trackByFn">
|
||||
<div class="flex flex-col items-start">
|
||||
<a
|
||||
class="flex items-center mb-1 text-2xl font-semibold"
|
||||
[routerLink]="[guideCategory.slug]">
|
||||
{{guideCategory.title}}
|
||||
</a>
|
||||
<ng-container *ngFor="let guide of guideCategory.guides; trackBy: trackByFn">
|
||||
<a
|
||||
class="mt-3 font-medium hover:underline text-primary-500"
|
||||
[routerLink]="[guideCategory.slug, guide.slug]">
|
||||
{{guide.title}}
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="flex items-center mt-5 pl-4 pr-3 py-0.5 rounded-full cursor-pointer bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
*ngIf="guideCategory.totalGuides > guideCategory.visibleGuides"
|
||||
[routerLink]="guideCategory.slug">
|
||||
<span class="text-sm font-medium text-secondary">View All</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,64 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-guides',
|
||||
templateUrl : './guides.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HelpCenterGuidesComponent implements OnInit, OnDestroy
|
||||
{
|
||||
guideCategories: GuideCategory[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the Guide categories
|
||||
this._helpCenterService.guides$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((guideCategories) => {
|
||||
this.guideCategories = guideCategories;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative pt-8 pb-28 px-4 sm:pt-20 sm:pb-48 sm:px-16 overflow-hidden bg-gray-800 dark:bg-gray-900 dark">
|
||||
<!-- Background - @formatter:off -->
|
||||
<!-- Rings -->
|
||||
<svg class="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
|
||||
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- @formatter:on -->
|
||||
<div class="z-10 relative flex flex-col items-center">
|
||||
<h2 class="text-xl font-semibold">HELP CENTER</h2>
|
||||
<div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
|
||||
How can we help you today?
|
||||
</div>
|
||||
<div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
|
||||
Search for a topic or question, check out our FAQs and guides, contact us for detailed support
|
||||
</div>
|
||||
<mat-form-field
|
||||
class="fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<input
|
||||
matInput
|
||||
[placeholder]="'Enter a question, topic or keyword'">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_outline:search'"></mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center pb-6 px-6 sm:pb-10 sm:px-10">
|
||||
<!-- Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
|
||||
<!-- FAQs card -->
|
||||
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
|
||||
<div class="flex flex-col flex-auto items-center p-8 text-center">
|
||||
<div class="text-2xl font-semibold">FAQs</div>
|
||||
<div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
|
||||
<a
|
||||
class="flex items-center"
|
||||
[routerLink]="['faqs']">
|
||||
<span class="absolute inset-0"></span>
|
||||
<span class="font-medium">Go to FAQs</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Guides card -->
|
||||
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
|
||||
<div class="flex flex-col flex-auto items-center p-8 text-center">
|
||||
<div class="text-2xl font-semibold">Guides</div>
|
||||
<div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
|
||||
<a
|
||||
class="flex items-center"
|
||||
[routerLink]="['guides']">
|
||||
<span class="absolute inset-0"></span>
|
||||
<span class="font-medium">Check guides</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Support card -->
|
||||
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
|
||||
<div class="flex flex-col flex-auto items-center p-8 text-center">
|
||||
<div class="text-2xl font-semibold">Support</div>
|
||||
<div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
|
||||
<a
|
||||
class="flex items-center"
|
||||
[routerLink]="['support']">
|
||||
<span class="absolute inset-0"></span>
|
||||
<span class="font-medium">Contact us</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FAQs -->
|
||||
<div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div>
|
||||
<div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div>
|
||||
<mat-accordion class="max-w-4xl mt-12">
|
||||
<ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header [collapsedHeight]="'56px'">
|
||||
<mat-panel-title>{{faq.question}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
{{faq.answer}}
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,64 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { FaqCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center',
|
||||
templateUrl : './help-center.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HelpCenterComponent implements OnInit, OnDestroy
|
||||
{
|
||||
faqCategory: FaqCategory;
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the FAQs
|
||||
this._helpCenterService.faqs$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((faqCategories) => {
|
||||
this.faqCategory = faqCategories[0];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { FuseAlertModule } from '@fuse/components/alert';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { HelpCenterComponent } from 'app/modules/admin/apps/help-center/help-center.component';
|
||||
import { HelpCenterFaqsComponent } from 'app/modules/admin/apps/help-center/faqs/faqs.component';
|
||||
import { HelpCenterGuidesComponent } from 'app/modules/admin/apps/help-center/guides/guides.component';
|
||||
import { HelpCenterGuidesCategoryComponent } from 'app/modules/admin/apps/help-center/guides/category/category.component';
|
||||
import { HelpCenterGuidesGuideComponent } from 'app/modules/admin/apps/help-center/guides/guide/guide.component';
|
||||
import { HelpCenterSupportComponent } from 'app/modules/admin/apps/help-center/support/support.component';
|
||||
import { helpCenterRoutes } from 'app/modules/admin/apps/help-center/help-center.routing';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
HelpCenterComponent,
|
||||
HelpCenterFaqsComponent,
|
||||
HelpCenterGuidesComponent,
|
||||
HelpCenterGuidesCategoryComponent,
|
||||
HelpCenterGuidesGuideComponent,
|
||||
HelpCenterSupportComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(helpCenterRoutes),
|
||||
MatButtonModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
FuseAlertModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class HelpCenterModule
|
||||
{
|
||||
}
|
||||
@ -1,145 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { FaqCategory, GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HelpCenterMostAskedFaqsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._helpCenterService.getFaqsByCategory('most-asked');
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HelpCenterFaqsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._helpCenterService.getAllFaqs();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HelpCenterGuidesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._helpCenterService.getAllGuides();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HelpCenterGuidesCategoryResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._helpCenterService.getGuidesByCategory(route.paramMap.get('categorySlug'));
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HelpCenterGuidesGuideResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<GuideCategory>
|
||||
{
|
||||
return this._helpCenterService.getGuide(route.parent.paramMap.get('categorySlug'), route.paramMap.get('guideSlug'));
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { HelpCenterComponent } from 'app/modules/admin/apps/help-center/help-center.component';
|
||||
import { HelpCenterFaqsComponent } from 'app/modules/admin/apps/help-center/faqs/faqs.component';
|
||||
import { HelpCenterGuidesComponent } from 'app/modules/admin/apps/help-center/guides/guides.component';
|
||||
import { HelpCenterGuidesCategoryComponent } from 'app/modules/admin/apps/help-center/guides/category/category.component';
|
||||
import { HelpCenterGuidesGuideComponent } from 'app/modules/admin/apps/help-center/guides/guide/guide.component';
|
||||
import { HelpCenterSupportComponent } from 'app/modules/admin/apps/help-center/support/support.component';
|
||||
import { HelpCenterFaqsResolver, HelpCenterGuidesCategoryResolver, HelpCenterGuidesGuideResolver, HelpCenterGuidesResolver, HelpCenterMostAskedFaqsResolver } from 'app/modules/admin/apps/help-center/help-center.resolvers';
|
||||
|
||||
export const helpCenterRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: HelpCenterComponent,
|
||||
resolve : {
|
||||
faqs: HelpCenterMostAskedFaqsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : 'faqs',
|
||||
component: HelpCenterFaqsComponent,
|
||||
resolve : {
|
||||
faqs: HelpCenterFaqsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : 'guides',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
component: HelpCenterGuidesComponent,
|
||||
resolve : {
|
||||
guides: HelpCenterGuidesResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : ':categorySlug',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
component: HelpCenterGuidesCategoryComponent,
|
||||
resolve : {
|
||||
guides: HelpCenterGuidesCategoryResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : ':guideSlug',
|
||||
component: HelpCenterGuidesGuideComponent,
|
||||
resolve : {
|
||||
guide: HelpCenterGuidesGuideResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'support',
|
||||
component: HelpCenterSupportComponent
|
||||
}
|
||||
];
|
||||
@ -1,133 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject, tap } from 'rxjs';
|
||||
import { FaqCategory, Guide, GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HelpCenterService
|
||||
{
|
||||
private _faqs: ReplaySubject<FaqCategory[]> = new ReplaySubject<FaqCategory[]>(1);
|
||||
private _guides: ReplaySubject<GuideCategory[]> = new ReplaySubject<GuideCategory[]>(1);
|
||||
private _guide: ReplaySubject<Guide> = new ReplaySubject<Guide>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for FAQs
|
||||
*/
|
||||
get faqs$(): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._faqs.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for guides
|
||||
*/
|
||||
get guides$(): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._guides.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for guide
|
||||
*/
|
||||
get guide$(): Observable<GuideCategory>
|
||||
{
|
||||
return this._guide.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get all FAQs
|
||||
*/
|
||||
getAllFaqs(): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._httpClient.get<FaqCategory[]>('api/apps/help-center/faqs').pipe(
|
||||
tap((response: any) => {
|
||||
this._faqs.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get FAQs by category using category slug
|
||||
*
|
||||
* @param slug
|
||||
*/
|
||||
getFaqsByCategory(slug: string): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._httpClient.get<FaqCategory[]>('api/apps/help-center/faqs', {
|
||||
params: {slug}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._faqs.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all guides limited per category by the given number
|
||||
*
|
||||
* @param limit
|
||||
*/
|
||||
getAllGuides(limit = '4'): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._httpClient.get<GuideCategory[]>('api/apps/help-center/guides', {
|
||||
params: {limit}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._guides.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get guides by category using category slug
|
||||
*
|
||||
* @param slug
|
||||
*/
|
||||
getGuidesByCategory(slug: string): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._httpClient.get<GuideCategory[]>('api/apps/help-center/guides', {
|
||||
params: {slug}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._guides.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get guide by category and guide slug
|
||||
*
|
||||
* @param categorySlug
|
||||
* @param guideSlug
|
||||
*/
|
||||
getGuide(categorySlug: string, guideSlug: string): Observable<GuideCategory>
|
||||
{
|
||||
return this._httpClient.get<GuideCategory>('api/apps/help-center/guide', {
|
||||
params: {
|
||||
categorySlug,
|
||||
guideSlug
|
||||
}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._guide.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
export interface FaqCategory
|
||||
{
|
||||
id: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
faqs?: Faq[];
|
||||
}
|
||||
|
||||
export interface Faq
|
||||
{
|
||||
id: string;
|
||||
categoryId: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface GuideCategory
|
||||
{
|
||||
id: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
totalGuides?: number;
|
||||
visibleGuides?: number;
|
||||
guides?: Guide[];
|
||||
}
|
||||
|
||||
export interface Guide
|
||||
{
|
||||
id: string;
|
||||
categoryId: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col flex-auto items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Help Center</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
Contact support
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<div class="mt-8 sm:mt-12 p-6 pb-7 sm:p-10 sm:pb-7 shadow rounded-2xl bg-card">
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mb-8"
|
||||
*ngIf="alert"
|
||||
[type]="alert.type"
|
||||
[showIcon]="false">
|
||||
{{alert.message}}
|
||||
</fuse-alert>
|
||||
<form
|
||||
class="space-y-3"
|
||||
[formGroup]="supportForm"
|
||||
#supportNgForm="ngForm">
|
||||
<div class="mb-6">
|
||||
<div class="text-2xl font-bold tracking-tight">Submit your request</div>
|
||||
<div class="text-secondary">Your request will be processed and our support staff will get back to you in 24 hours.</div>
|
||||
</div>
|
||||
<!-- Name -->
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'name'"
|
||||
[required]="true">
|
||||
<mat-label>Name</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('name').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Email -->
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
type="email"
|
||||
matInput
|
||||
[formControlName]="'email'"
|
||||
[required]="true">
|
||||
<mat-label>Email</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('email').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
<mat-error *ngIf="supportForm.get('email').hasError('email')">
|
||||
Enter a valid email address
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Subject -->
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'subject'"
|
||||
[required]="true">
|
||||
<mat-label>Subject</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('subject').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Message -->
|
||||
<mat-form-field class="w-full">
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'message'"
|
||||
[required]="true"
|
||||
[rows]="5"
|
||||
cdkTextareaAutosize></textarea>
|
||||
<mat-label>Message</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('message').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
mat-button
|
||||
[color]="'accent'"
|
||||
[disabled]="supportForm.pristine || supportForm.untouched"
|
||||
(click)="clearForm()">
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="supportForm.pristine || supportForm.invalid"
|
||||
(click)="sendForm()">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,82 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-support',
|
||||
templateUrl : './support.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class HelpCenterSupportComponent implements OnInit
|
||||
{
|
||||
@ViewChild('supportNgForm') supportNgForm: NgForm;
|
||||
|
||||
alert: any;
|
||||
supportForm: UntypedFormGroup;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
private _helpCenterService: HelpCenterService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Create the support form
|
||||
this.supportForm = this._formBuilder.group({
|
||||
name : ['', Validators.required],
|
||||
email : ['', [Validators.required, Validators.email]],
|
||||
subject: ['', Validators.required],
|
||||
message: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Clear the form
|
||||
*/
|
||||
clearForm(): void
|
||||
{
|
||||
// Reset the form
|
||||
this.supportNgForm.resetForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Send the form
|
||||
*/
|
||||
sendForm(): void
|
||||
{
|
||||
// Send your form here using an http request
|
||||
console.log('Your message has been sent!');
|
||||
|
||||
// Show a success message (it can also be an error message)
|
||||
// and remove it after 5 seconds
|
||||
this.alert = {
|
||||
type : 'success',
|
||||
message: 'Your request has been delivered! A member of our support staff will respond as soon as possible.'
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.alert = null;
|
||||
}, 7000);
|
||||
|
||||
// Clear the form
|
||||
this.clearForm();
|
||||
}
|
||||
}
|
||||
@ -1,133 +0,0 @@
|
||||
<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary">
|
||||
<div class="text-lg font-medium">New Message</div>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="saveAndClose()"
|
||||
[tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Compose form -->
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm">
|
||||
|
||||
<!-- To -->
|
||||
<mat-form-field>
|
||||
<mat-label>To</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'to'">
|
||||
<div
|
||||
class="copy-fields-toggles"
|
||||
matSuffix>
|
||||
<span
|
||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.cc"
|
||||
(click)="showCopyField('cc')">
|
||||
Cc
|
||||
</span>
|
||||
<span
|
||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.bcc"
|
||||
(click)="showCopyField('bcc')">
|
||||
Bcc
|
||||
</span>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Cc -->
|
||||
<mat-form-field
|
||||
*ngIf="copyFields.cc">
|
||||
<mat-label>Cc</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'cc'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Bcc -->
|
||||
<mat-form-field
|
||||
*ngIf="copyFields.bcc">
|
||||
<mat-label>Bcc</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'bcc'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Subject -->
|
||||
<mat-form-field>
|
||||
<mat-label>Subject</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'subject'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Body -->
|
||||
<quill-editor
|
||||
class="mt-2"
|
||||
[formControlName]="'body'"
|
||||
[bounds]="'self'"
|
||||
[modules]="quillModules"></quill-editor>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
|
||||
<div class="-ml-2">
|
||||
<!-- Attach file -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert link -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:link'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert emoji -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert image -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 sm:mt-0">
|
||||
<!-- Discard -->
|
||||
<button
|
||||
class="ml-auto sm:ml-0"
|
||||
mat-stroked-button
|
||||
(click)="discard()">
|
||||
Discard
|
||||
</button>
|
||||
<!-- Save as draft -->
|
||||
<button
|
||||
class="sm:mx-3"
|
||||
mat-stroked-button
|
||||
(click)="saveAsDraft()">
|
||||
<span>Save as draft</span>
|
||||
</button>
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="order-first sm:order-last"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,110 +0,0 @@
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-compose',
|
||||
templateUrl : './compose.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MailboxComposeComponent implements OnInit
|
||||
{
|
||||
composeForm: UntypedFormGroup;
|
||||
copyFields: { cc: boolean; bcc: boolean } = {
|
||||
cc : false,
|
||||
bcc: false
|
||||
};
|
||||
quillModules: any = {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline'],
|
||||
[{align: []}, {list: 'ordered'}, {list: 'bullet'}],
|
||||
['clean']
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public matDialogRef: MatDialogRef<MailboxComposeComponent>,
|
||||
private _formBuilder: UntypedFormBuilder
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Create the form
|
||||
this.composeForm = this._formBuilder.group({
|
||||
to : ['', [Validators.required, Validators.email]],
|
||||
cc : ['', [Validators.email]],
|
||||
bcc : ['', [Validators.email]],
|
||||
subject: [''],
|
||||
body : ['', [Validators.required]]
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Show the copy field with the given field name
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
showCopyField(name: string): void
|
||||
{
|
||||
// Return if the name is not one of the available names
|
||||
if ( name !== 'cc' && name !== 'bcc' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Show the field
|
||||
this.copyFields[name] = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save and close
|
||||
*/
|
||||
saveAndClose(): void
|
||||
{
|
||||
// Save the message as a draft
|
||||
this.saveAsDraft();
|
||||
|
||||
// Close the dialog
|
||||
this.matDialogRef.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Discard the message
|
||||
*/
|
||||
discard(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the message as a draft
|
||||
*/
|
||||
saveAsDraft(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Send the message
|
||||
*/
|
||||
send(): void
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,412 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<ng-container *ngIf="mail; else selectMailToRead">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="z-10 relative flex flex-col flex-0 w-full border-b">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center min-h-16 px-4 md:px-6 border-b bg-gray-50 dark:bg-transparent">
|
||||
|
||||
<!-- Back button -->
|
||||
<a
|
||||
class="lg:hidden md:-ml-2"
|
||||
mat-icon-button
|
||||
[routerLink]="['./../']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</a>
|
||||
|
||||
<!-- Toggle labels button & menu -->
|
||||
<button
|
||||
class="ml-auto"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="toggleLabelMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</button>
|
||||
<mat-menu #toggleLabelMenu="matMenu">
|
||||
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
||||
<div
|
||||
mat-menu-item
|
||||
(click)="toggleLabel(label)"
|
||||
matRipple>
|
||||
<mat-checkbox
|
||||
class="pointer-events-none"
|
||||
[color]="'primary'"
|
||||
[checked]="mail.labels.includes(label.id)"
|
||||
[disableRipple]="true">
|
||||
{{label.title}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</ng-container>
|
||||
</mat-menu>
|
||||
|
||||
<!-- Toggle important button -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-icon-button
|
||||
(click)="toggleImportant()">
|
||||
<mat-icon
|
||||
[ngClass]="{'text-red-600 dark:text-red-500': mail.important}"
|
||||
[svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Toggle starred button -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-icon-button
|
||||
(click)="toggleStar()">
|
||||
<mat-icon
|
||||
[ngClass]="{'text-orange-500 dark:text-red-400': mail.starred}"
|
||||
[svgIcon]="'heroicons_outline:star'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Other actions button & menu -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="mailMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
|
||||
</button>
|
||||
<mat-menu #mailMenu="matMenu">
|
||||
<!-- Mark as read / unread -->
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="mail.unread"
|
||||
(click)="toggleUnread(false)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:mail-open'"></mat-icon>
|
||||
<span>Mark as read</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="!mail.unread"
|
||||
(click)="toggleUnread(true)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon>
|
||||
<span>Mark as unread</span>
|
||||
</button>
|
||||
<!-- Marks as spam / not span-->
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="getCurrentFolder() !== 'spam' && getCurrentFolder() !== 'drafts'"
|
||||
(click)="moveToFolder('spam')">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:exclamation'"></mat-icon>
|
||||
<span>Spam</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="getCurrentFolder() === 'spam'"
|
||||
(click)="moveToFolder('inbox')">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:exclamation'"></mat-icon>
|
||||
<span>Not spam</span>
|
||||
</button>
|
||||
<!-- Delete -->
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="getCurrentFolder() !== 'trash'"
|
||||
(click)="moveToFolder('trash')">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
<!-- Subject and Labels -->
|
||||
<div class="flex flex-wrap items-center py-5 px-6">
|
||||
<!-- Subject -->
|
||||
<div class="flex flex-auto my-1 mr-4 text-2xl">{{mail.subject}}</div>
|
||||
<!-- Labels -->
|
||||
<ng-container *ngIf="mail.labels && mail.labels.length > 0">
|
||||
<div class="flex flex-wrap items-center justify-start -mx-1">
|
||||
<ng-container *ngFor="let label of (mail.labels | fuseFindByKey:'id':labels)">
|
||||
<div
|
||||
class="m-1 py-0.5 px-2.5 rounded-full text-sm font-medium whitespace-nowrap"
|
||||
[ngClass]="labelColors[label.color].combined">
|
||||
{{label.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Threads -->
|
||||
<div
|
||||
class="flex flex-col flex-auto shrink-0 lg:shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
|
||||
fuseScrollReset>
|
||||
|
||||
<!-- Thread -->
|
||||
<div class="flex flex-col flex-0 w-full shadow rounded-2xl overflow-hidden bg-card dark:bg-black dark:bg-opacity-10">
|
||||
|
||||
<div class="flex flex-col py-8 px-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center w-full">
|
||||
|
||||
<!-- Sender avatar -->
|
||||
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
|
||||
<img
|
||||
class="w-full h-full"
|
||||
[src]="mail.from.avatar"
|
||||
alt="User avatar">
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="ml-4 min-w-0">
|
||||
|
||||
<!-- From -->
|
||||
<div class="font-semibold truncate">{{mail.from.contact.split('<')[0].trim()}}</div>
|
||||
|
||||
<!-- To -->
|
||||
<div class="flex items-center mt-0.5 leading-5">
|
||||
<div>to</div>
|
||||
<div class="ml-1 font-semibold">me</div>
|
||||
<ng-container *ngIf="(mail.ccCount + mail.bccCount) > 0">
|
||||
<div>
|
||||
<span class="ml-1">and</span>
|
||||
<span class="ml-1 font-semibold">{{mail.ccCount + mail.bccCount}}</span>
|
||||
<span
|
||||
class="ml-1 font-semibold"
|
||||
[ngPlural]="(mail.ccCount + mail.bccCount)">
|
||||
<ng-template ngPluralCase="=1">other</ng-template>
|
||||
<ng-template ngPluralCase="other">others</ng-template>
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Info details panel button -->
|
||||
<button
|
||||
class="w-5 h-5 min-h-5 ml-1"
|
||||
mat-icon-button
|
||||
(click)="openInfoDetailsPanel()"
|
||||
#infoDetailsPanelOrigin>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Info details panel -->
|
||||
<ng-template #infoDetailsPanel>
|
||||
<div class="flex flex-col py-4 px-6 w-full max-w-160 space-y-1.5 border text-md rounded shadow-md overflow-auto bg-card">
|
||||
<!-- From -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">from:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.from.contact}}</div>
|
||||
</div>
|
||||
<!-- To -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">to:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.to}}</div>
|
||||
</div>
|
||||
<!-- Cc -->
|
||||
<ng-container *ngIf="mail.cc">
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">cc:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.cc.join(',\n')}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Bbc -->
|
||||
<ng-container *ngIf="mail.bcc">
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">bcc:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.bcc.join(',\n')}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Date -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">date:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.date | date:'EEEE, MMMM d, y - hh:mm a'}}</div>
|
||||
</div>
|
||||
<!-- Subject -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">subject:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.subject}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="flex mt-8 whitespace-pre-line leading-relaxed"
|
||||
[innerHTML]="mail.content">
|
||||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<ng-container *ngIf="mail.attachments && mail.attachments.length > 0">
|
||||
<div class="flex flex-col w-full">
|
||||
<!-- Title -->
|
||||
<div class="flex items-center mt-12">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
<div class="ml-2 font-semibold">{{mail.attachments.length}} Attachments</div>
|
||||
</div>
|
||||
|
||||
<!-- Files -->
|
||||
<div class="flex flex-wrap -m-3 mt-3">
|
||||
<ng-container *ngFor="let attachment of mail.attachments">
|
||||
<div class="flex items-center m-3">
|
||||
<!-- Preview -->
|
||||
<img
|
||||
class="w-10 h-10 rounded-md overflow-hidden"
|
||||
*ngIf="attachment.type.startsWith('image/')"
|
||||
[src]="'assets/images/apps/mailbox/' + attachment.preview">
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-md overflow-hidden bg-primary-100"
|
||||
*ngIf="attachment.type.startsWith('application/')">
|
||||
<div class="flex items-center justify-center text-sm font-semibold text-primary-500-800">
|
||||
{{attachment.type.split('/')[1].trim().toUpperCase()}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- File info -->
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="text-md font-medium truncate"
|
||||
[title]="attachment.name">
|
||||
{{attachment.name}}
|
||||
</div>
|
||||
<div
|
||||
class="text-sm font-medium truncate text-secondary"
|
||||
[title]="attachment.size">
|
||||
{{attachment.size / 1000 | number:'1.0-2'}} KB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex w-full p-6 border-t bg-gray-50 dark:bg-transparent">
|
||||
|
||||
<!-- Buttons -->
|
||||
<ng-container *ngIf="!replyFormActive">
|
||||
<div class="flex flex-wrap w-full -m-2">
|
||||
<!-- Reply -->
|
||||
<button
|
||||
class="m-2"
|
||||
mat-stroked-button
|
||||
[color]="'primary'"
|
||||
(click)="reply()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:reply'"></mat-icon>
|
||||
<span class="ml-2">Reply</span>
|
||||
</button>
|
||||
<!-- Reply all -->
|
||||
<button
|
||||
class="m-2"
|
||||
mat-stroked-button
|
||||
[color]="'primary'"
|
||||
(click)="replyAll()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:reply'"></mat-icon>
|
||||
<span class="ml-2">Reply All</span>
|
||||
</button>
|
||||
<!-- Forward -->
|
||||
<button
|
||||
class="m-2"
|
||||
mat-stroked-button
|
||||
[color]="'primary'"
|
||||
(click)="forward()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[color]="'primary'"
|
||||
[svgIcon]="'heroicons_solid:chevron-double-right'"></mat-icon>
|
||||
<span class="ml-2">Forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reply form -->
|
||||
<ng-container *ngIf="replyFormActive">
|
||||
<div
|
||||
class="flex flex-col w-full"
|
||||
#replyForm>
|
||||
|
||||
<mat-form-field [subscriptSizing]="'dynamic'">
|
||||
<textarea
|
||||
class="textarea"
|
||||
matInput
|
||||
[placeholder]="'Type your reply here'"
|
||||
[rows]="4"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
|
||||
<div class="-ml-2">
|
||||
<!-- Attach file -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert link -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:link'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert emoji -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert image -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 sm:mt-0">
|
||||
<!-- Discard -->
|
||||
<button
|
||||
class="order-last sm:order-first ml-3 sm:ml-0"
|
||||
mat-button
|
||||
(click)="discard()">
|
||||
Discard
|
||||
</button>
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="sm:ml-3"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- Select mail to read template -->
|
||||
<ng-template #selectMailToRead>
|
||||
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:mail'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
@ -1,372 +0,0 @@
|
||||
import { Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { Mail, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
import { labelColorDefs } from 'app/modules/admin/apps/mailbox/mailbox.constants';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MailboxDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('infoDetailsPanelOrigin') private _infoDetailsPanelOrigin: MatButton;
|
||||
@ViewChild('infoDetailsPanel') private _infoDetailsPanel: TemplateRef<any>;
|
||||
|
||||
folders: MailFolder[];
|
||||
labelColors: any;
|
||||
labels: MailLabel[];
|
||||
mail: Mail;
|
||||
replyFormActive: boolean = false;
|
||||
private _overlayRef: OverlayRef;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _elementRef: ElementRef,
|
||||
private _mailboxService: MailboxService,
|
||||
private _overlay: Overlay,
|
||||
private _router: Router,
|
||||
private _viewContainerRef: ViewContainerRef
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the label colors
|
||||
this.labelColors = labelColorDefs;
|
||||
|
||||
// Folders
|
||||
this._mailboxService.folders$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((folders: MailFolder[]) => {
|
||||
this.folders = folders;
|
||||
});
|
||||
|
||||
// Labels
|
||||
this._mailboxService.labels$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((labels: MailLabel[]) => {
|
||||
this.labels = labels;
|
||||
});
|
||||
|
||||
// Mail
|
||||
this._mailboxService.mail$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mail: Mail) => {
|
||||
this.mail = mail;
|
||||
});
|
||||
|
||||
// Selected mail changed
|
||||
this._mailboxService.selectedMailChanged
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
|
||||
// De-activate the reply form
|
||||
this.replyFormActive = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get the current folder
|
||||
*/
|
||||
getCurrentFolder(): any
|
||||
{
|
||||
return this._activatedRoute.snapshot.paramMap.get('folder');
|
||||
}
|
||||
|
||||
/**
|
||||
* Move to folder
|
||||
*
|
||||
* @param folderSlug
|
||||
*/
|
||||
moveToFolder(folderSlug: string): void
|
||||
{
|
||||
// Find the folder details
|
||||
const folder = this.folders.find(item => item.slug === folderSlug);
|
||||
|
||||
// Return if the current folder of the mail
|
||||
// is already equals to the given folder
|
||||
if ( this.mail.folder === folder.id )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the mail object
|
||||
this.mail.folder = folder.id;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {folder: this.mail.folder}).subscribe();
|
||||
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
toggleLabel(label: MailLabel): void
|
||||
{
|
||||
let deleted = false;
|
||||
|
||||
// Update the mail object
|
||||
if ( this.mail.labels.includes(label.id) )
|
||||
{
|
||||
// Set the deleted
|
||||
deleted = true;
|
||||
|
||||
// Delete the label
|
||||
this.mail.labels.splice(this.mail.labels.indexOf(label.id), 1);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Add the label
|
||||
this.mail.labels.push(label.id);
|
||||
}
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {labels: this.mail.labels}).subscribe();
|
||||
|
||||
// If the label was deleted...
|
||||
if ( deleted )
|
||||
{
|
||||
// If the current activated route has a label parameter and it equals to the one we are removing...
|
||||
if ( this._activatedRoute.snapshot.paramMap.get('label') && this._activatedRoute.snapshot.paramMap.get('label') === label.slug )
|
||||
{
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle important
|
||||
*/
|
||||
toggleImportant(): void
|
||||
{
|
||||
// Update the mail object
|
||||
this.mail.important = !this.mail.important;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {important: this.mail.important}).subscribe();
|
||||
|
||||
// If the important was removed...
|
||||
if ( !this.mail.important )
|
||||
{
|
||||
// If the current activated route has a filter parameter and it equals to the 'important'...
|
||||
if ( this._activatedRoute.snapshot.paramMap.get('filter') && this._activatedRoute.snapshot.paramMap.get('filter') === 'important' )
|
||||
{
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle star
|
||||
*/
|
||||
toggleStar(): void
|
||||
{
|
||||
// Update the mail object
|
||||
this.mail.starred = !this.mail.starred;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {starred: this.mail.starred}).subscribe();
|
||||
|
||||
// If the star was removed...
|
||||
if ( !this.mail.starred )
|
||||
{
|
||||
// If the current activated route has a filter parameter and it equals to the 'starred'...
|
||||
if ( this._activatedRoute.snapshot.paramMap.get('filter') && this._activatedRoute.snapshot.paramMap.get('filter') === 'starred' )
|
||||
{
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle unread
|
||||
*
|
||||
* @param unread
|
||||
*/
|
||||
toggleUnread(unread: boolean): void
|
||||
{
|
||||
// Update the mail object
|
||||
this.mail.unread = unread;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {unread: this.mail.unread}).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply
|
||||
*/
|
||||
reply(): void
|
||||
{
|
||||
// Activate the reply form
|
||||
this.replyFormActive = true;
|
||||
|
||||
// Scroll to the bottom of the details pane
|
||||
setTimeout(() => {
|
||||
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply all
|
||||
*/
|
||||
replyAll(): void
|
||||
{
|
||||
// Activate the reply form
|
||||
this.replyFormActive = true;
|
||||
|
||||
// Scroll to the bottom of the details pane
|
||||
setTimeout(() => {
|
||||
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Forward
|
||||
*/
|
||||
forward(): void
|
||||
{
|
||||
// Activate the reply form
|
||||
this.replyFormActive = true;
|
||||
|
||||
// Scroll to the bottom of the details pane
|
||||
setTimeout(() => {
|
||||
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Discard
|
||||
*/
|
||||
discard(): void
|
||||
{
|
||||
// Deactivate the reply form
|
||||
this.replyFormActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Send
|
||||
*/
|
||||
send(): void
|
||||
{
|
||||
// Deactivate the reply form
|
||||
this.replyFormActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open info details panel
|
||||
*/
|
||||
openInfoDetailsPanel(): void
|
||||
{
|
||||
// Create the overlay
|
||||
this._overlayRef = this._overlay.create({
|
||||
backdropClass : '',
|
||||
hasBackdrop : true,
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._infoDetailsPanelOrigin._elementRef.nativeElement)
|
||||
.withFlexibleDimensions(true)
|
||||
.withViewportMargin(16)
|
||||
.withLockedPosition(true)
|
||||
.withPositions([
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'bottom',
|
||||
overlayX: 'start',
|
||||
overlayY: 'top'
|
||||
},
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'top',
|
||||
overlayX: 'start',
|
||||
overlayY: 'bottom'
|
||||
},
|
||||
{
|
||||
originX : 'end',
|
||||
originY : 'bottom',
|
||||
overlayX: 'end',
|
||||
overlayY: 'top'
|
||||
},
|
||||
{
|
||||
originX : 'end',
|
||||
originY : 'top',
|
||||
overlayX: 'end',
|
||||
overlayY: 'bottom'
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
// Create a portal from the template
|
||||
const templatePortal = new TemplatePortal(this._infoDetailsPanel, this._viewContainerRef);
|
||||
|
||||
// Attach the portal to the overlay
|
||||
this._overlayRef.attach(templatePortal);
|
||||
|
||||
// Subscribe to the backdrop click
|
||||
this._overlayRef.backdropClick().subscribe(() => {
|
||||
|
||||
// If overlay exists and attached...
|
||||
if ( this._overlayRef && this._overlayRef.hasAttached() )
|
||||
{
|
||||
// Detach it
|
||||
this._overlayRef.detach();
|
||||
}
|
||||
|
||||
// If template portal exists and attached...
|
||||
if ( templatePortal && templatePortal.isAttached )
|
||||
{
|
||||
// Detach it
|
||||
templatePortal.detach();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<!-- Select mail to read -->
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:mail'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,16 +0,0 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-empty-details',
|
||||
templateUrl : './empty-details.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MailboxEmptyDetailsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,154 +0,0 @@
|
||||
<div class="relative flex flex-auto w-full bg-card dark:bg-transparent">
|
||||
|
||||
<!-- Mails list -->
|
||||
<ng-container *ngIf="mails && mails.length > 0; else noMails">
|
||||
<div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-90 lg:max-w-90 border-r z-10">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative flex flex-0 items-center justify-between h-16 px-4 border-b bg-gray-50 dark:bg-transparent">
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="mailboxComponent.drawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Category name -->
|
||||
<div class="ml-2 font-semibold uppercase">{{category.name}}</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center">
|
||||
<!-- Info -->
|
||||
<div class="flex items-center mr-3 text-md font-medium">
|
||||
<span>{{pagination.startIndex + 1}}</span>
|
||||
<span class="mx-1 text-secondary">-</span>
|
||||
<span>{{pagination.endIndex + 1}}</span>
|
||||
<span class="mx-1 text-secondary">of</span>
|
||||
<span>{{pagination.totalResults}}</span>
|
||||
</div>
|
||||
<!-- Previous page button -->
|
||||
<a
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[disabled]="pagination.currentPage === 1"
|
||||
[routerLink]="['../' + (pagination.currentPage > 1 ? pagination.currentPage - 1 : 1 )]">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
|
||||
</a>
|
||||
<!-- Next page button-->
|
||||
<a
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[disabled]="pagination.currentPage === pagination.lastPage"
|
||||
[routerLink]="['../' + (pagination.currentPage < pagination.lastPage ? pagination.currentPage + 1 : pagination.lastPage )]">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Loading bar -->
|
||||
<mat-progress-bar
|
||||
class="absolute inset-x-0 bottom-0 h-0.5"
|
||||
*ngIf="mailsLoading"
|
||||
[mode]="'indeterminate'"></mat-progress-bar>
|
||||
</div>
|
||||
|
||||
<!-- Mail list -->
|
||||
<div
|
||||
class="overflow-y-auto"
|
||||
#mailList>
|
||||
|
||||
<!-- Item loop -->
|
||||
<ng-container *ngFor="let mail of mails; let i = index; trackBy: trackByFn">
|
||||
|
||||
<!-- Item -->
|
||||
<a
|
||||
class="relative flex border-t first:border-0 hover:bg-hover"
|
||||
[routerLink]="[mail.id]"
|
||||
(click)="onMailSelected(mail)">
|
||||
|
||||
<!-- Item content -->
|
||||
<div
|
||||
class="flex flex-col items-start justify-start w-full py-6 pr-4 pl-5 border-l-4 border-transparent"
|
||||
[ngClass]="{'border-primary': mail.unread,
|
||||
'bg-primary-50 dark:bg-black dark:bg-opacity-5': selectedMail && selectedMail.id === mail.id}">
|
||||
|
||||
<!-- Info -->
|
||||
<div class="flex items-center w-full">
|
||||
<!-- Sender name -->
|
||||
<div class="mr-2 font-semibold truncate">
|
||||
{{mail.from.contact.split('<')[0].trim()}}
|
||||
</div>
|
||||
<!-- Important indicator -->
|
||||
<mat-icon
|
||||
class="mr-3 icon-size-4 text-red-500 dark:text-red-600"
|
||||
*ngIf="mail.important"
|
||||
[svgIcon]="'heroicons_solid:exclamation-circle'"></mat-icon>
|
||||
<!-- Date -->
|
||||
<div class="ml-auto text-md text-right whitespace-nowrap text-hint">
|
||||
{{mail.date | date:'LLL dd'}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subject -->
|
||||
<div class="flex items-center w-full mt-1">
|
||||
<span class="leading-4 truncate">{{mail.subject}}</span>
|
||||
<!-- Indicators -->
|
||||
<div
|
||||
class="flex ml-auto pl-2"
|
||||
*ngIf="(mail.attachments && mail.attachments.length > 0) || mail.starred">
|
||||
<!-- Attachments -->
|
||||
<mat-icon
|
||||
class="flex justify-center icon-size-4"
|
||||
*ngIf="mail.attachments && mail.attachments.length > 0"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
<!-- Starred -->
|
||||
<mat-icon
|
||||
class="flex justify-center icon-size-4 ml-1 text-orange-500 dark:text-orange-400"
|
||||
*ngIf="mail.starred"
|
||||
[svgIcon]="'heroicons_solid:star'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Excerpt -->
|
||||
<div class="mt-2 leading-normal line-clamp-2 text-secondary">
|
||||
{{mail.content}}...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- No mails template -->
|
||||
<ng-template #noMails>
|
||||
<div class="z-100 absolute inset-0 flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:mail'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no e-mails</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- Mail details -->
|
||||
<ng-container *ngIf="mails && mails.length > 0">
|
||||
<div
|
||||
class="flex-auto"
|
||||
[ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedMail && selectedMail.id,
|
||||
'hidden lg:flex': !selectedMail || !selectedMail.id}">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
@ -1,130 +0,0 @@
|
||||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
|
||||
import { Mail, MailCategory } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MailboxListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('mailList') mailList: ElementRef;
|
||||
|
||||
category: MailCategory;
|
||||
mails: Mail[];
|
||||
mailsLoading: boolean = false;
|
||||
pagination: any;
|
||||
selectedMail: Mail;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public mailboxComponent: MailboxComponent,
|
||||
private _mailboxService: MailboxService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Category
|
||||
this._mailboxService.category$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((category: MailCategory) => {
|
||||
this.category = category;
|
||||
});
|
||||
|
||||
// Mails
|
||||
this._mailboxService.mails$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mails: Mail[]) => {
|
||||
this.mails = mails;
|
||||
});
|
||||
|
||||
// Mails loading
|
||||
this._mailboxService.mailsLoading$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mailsLoading: boolean) => {
|
||||
this.mailsLoading = mailsLoading;
|
||||
|
||||
// If the mail list element is available & the mails are loaded...
|
||||
if ( this.mailList && !mailsLoading )
|
||||
{
|
||||
// Reset the mail list element scroll position to top
|
||||
this.mailList.nativeElement.scrollTo(0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// Pagination
|
||||
this._mailboxService.pagination$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((pagination) => {
|
||||
this.pagination = pagination;
|
||||
});
|
||||
|
||||
// Selected mail
|
||||
this._mailboxService.mail$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mail: Mail) => {
|
||||
this.selectedMail = mail;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On mail selected
|
||||
*
|
||||
* @param mail
|
||||
*/
|
||||
onMailSelected(mail: Mail): void
|
||||
{
|
||||
// If the mail is unread...
|
||||
if ( mail.unread )
|
||||
{
|
||||
// Update the mail object
|
||||
mail.unread = false;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(mail.id, {unread: false}).subscribe();
|
||||
}
|
||||
|
||||
// Execute the mailSelected observable
|
||||
this._mailboxService.selectedMailChanged.next(mail);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container class="flex-auto h-full">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-72 dark:bg-gray-900"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#drawer>
|
||||
|
||||
<!-- Mailbox sidebar -->
|
||||
<mailbox-sidebar></mailbox-sidebar>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-auto overflow-hidden">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,63 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox',
|
||||
templateUrl : './mailbox.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MailboxComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('drawer') drawer: MatDrawer;
|
||||
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = true;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode and drawerOpened if the given breakpoint is active
|
||||
if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
export const labelColors = [
|
||||
'gray',
|
||||
'red',
|
||||
'orange',
|
||||
'yellow',
|
||||
'green',
|
||||
'teal',
|
||||
'blue',
|
||||
'indigo',
|
||||
'purple',
|
||||
'pink'
|
||||
];
|
||||
|
||||
export const labelColorDefs = {
|
||||
gray : {
|
||||
text : 'text-gray-500',
|
||||
bg : 'bg-gray-500',
|
||||
combined: 'text-gray-800 bg-gray-100'
|
||||
},
|
||||
red : {
|
||||
text : 'text-red-500',
|
||||
bg : 'bg-red-500',
|
||||
combined: 'text-red-800 bg-red-100'
|
||||
},
|
||||
orange: {
|
||||
text : 'text-orange-500',
|
||||
bg : 'bg-orange-500',
|
||||
combined: 'text-orange-800 bg-orange-100'
|
||||
},
|
||||
yellow: {
|
||||
text : 'text-yellow-500',
|
||||
bg : 'bg-yellow-500',
|
||||
combined: 'text-yellow-800 bg-yellow-100'
|
||||
},
|
||||
green : {
|
||||
text : 'text-green-500',
|
||||
bg : 'bg-green-500',
|
||||
combined: 'text-green-800 bg-green-100'
|
||||
},
|
||||
teal : {
|
||||
text : 'text-teal-500',
|
||||
bg : 'bg-teal-500',
|
||||
combined: 'text-teal-800 bg-teal-100'
|
||||
},
|
||||
blue : {
|
||||
text : 'text-blue-500',
|
||||
bg : 'bg-blue-500',
|
||||
combined: 'text-blue-800 bg-blue-100'
|
||||
},
|
||||
indigo: {
|
||||
text : 'text-indigo-500',
|
||||
bg : 'bg-indigo-500',
|
||||
combined: 'text-indigo-800 bg-indigo-100'
|
||||
},
|
||||
purple: {
|
||||
text : 'text-purple-500',
|
||||
bg : 'bg-purple-500',
|
||||
combined: 'text-purple-800 bg-purple-100'
|
||||
},
|
||||
pink : {
|
||||
text : 'text-pink-500',
|
||||
bg : 'bg-pink-500',
|
||||
combined: 'text-pink-800 bg-pink-100'
|
||||
}
|
||||
};
|
||||
@ -1,64 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { QuillModule } from 'ngx-quill';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { FuseScrollbarModule } from '@fuse/directives/scrollbar';
|
||||
import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
|
||||
import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component';
|
||||
import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
|
||||
import { MailboxEmptyDetailsComponent } from 'app/modules/admin/apps/mailbox/empty-details/empty-details.component';
|
||||
import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
|
||||
import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
|
||||
import { MailboxSidebarComponent } from 'app/modules/admin/apps/mailbox/sidebar/sidebar.component';
|
||||
import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
MailboxComponent,
|
||||
MailboxComposeComponent,
|
||||
MailboxDetailsComponent,
|
||||
MailboxEmptyDetailsComponent,
|
||||
MailboxListComponent,
|
||||
MailboxSettingsComponent,
|
||||
MailboxSidebarComponent
|
||||
],
|
||||
imports: [
|
||||
RouterModule.forChild(mailboxRoutes),
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatDialogModule,
|
||||
MatDividerModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
MatProgressBarModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
QuillModule.forRoot(),
|
||||
FuseFindByKeyPipeModule,
|
||||
FuseNavigationModule,
|
||||
FuseScrollbarModule,
|
||||
FuseScrollResetModule,
|
||||
SharedModule,
|
||||
]
|
||||
})
|
||||
export class MailboxModule
|
||||
{
|
||||
}
|
||||
@ -1,245 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError, finalize, forkJoin, Observable, throwError } from 'rxjs';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { Mail, MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MailboxFoldersResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _mailboxService: MailboxService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MailFolder[]>
|
||||
{
|
||||
return this._mailboxService.getFolders();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MailboxFiltersResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _mailboxService: MailboxService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MailFilter[]>
|
||||
{
|
||||
return this._mailboxService.getFilters();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MailboxLabelsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _mailboxService: MailboxService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MailLabel[]>
|
||||
{
|
||||
return this._mailboxService.getLabels();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MailboxMailsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _mailboxService: MailboxService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Mail[]> | any
|
||||
{
|
||||
// Don't allow page param to go below 1
|
||||
if ( route.paramMap.get('page') && parseInt(route.paramMap.get('page'), 10) <= 0 )
|
||||
{
|
||||
// Get the parent url
|
||||
const url = state.url.split('/').slice(0, -1).join('/') + '/1';
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(url);
|
||||
|
||||
// Don't allow request to go through
|
||||
return false;
|
||||
}
|
||||
|
||||
// Create and build the sources array
|
||||
const sources = [];
|
||||
|
||||
// If folder is set on the parameters...
|
||||
if ( route.paramMap.get('folder') )
|
||||
{
|
||||
sources.push(this._mailboxService.getMailsByFolder(route.paramMap.get('folder'), route.paramMap.get('page')));
|
||||
}
|
||||
|
||||
// If filter is set on the parameters...
|
||||
if ( route.paramMap.get('filter') )
|
||||
{
|
||||
sources.push(this._mailboxService.getMailsByFilter(route.paramMap.get('filter'), route.paramMap.get('page')));
|
||||
}
|
||||
|
||||
// If label is set on the parameters...
|
||||
if ( route.paramMap.get('label') )
|
||||
{
|
||||
sources.push(this._mailboxService.getMailsByLabel(route.paramMap.get('label'), route.paramMap.get('page')));
|
||||
}
|
||||
|
||||
// Fork join all the sources
|
||||
return forkJoin(sources)
|
||||
.pipe(
|
||||
finalize(() => {
|
||||
|
||||
// If there is no selected mail, reset the mail every
|
||||
// time mail list changes. This will ensure that the
|
||||
// mail will be reset while navigating between the
|
||||
// folders/filters/labels but it won't reset on page
|
||||
// reload if we are reading a mail.
|
||||
|
||||
// Try to get the current activated route
|
||||
let currentRoute = route;
|
||||
while ( currentRoute.firstChild )
|
||||
{
|
||||
currentRoute = currentRoute.firstChild;
|
||||
}
|
||||
|
||||
// Make sure there is no 'id' parameter on the current route
|
||||
if ( !currentRoute.paramMap.get('id') )
|
||||
{
|
||||
// Reset the mail
|
||||
this._mailboxService.resetMail().subscribe();
|
||||
}
|
||||
}),
|
||||
|
||||
// Error here means the requested page is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error.message);
|
||||
|
||||
// Get the parent url and append the last possible page number to the parent url
|
||||
const url = state.url.split('/').slice(0, -1).join('/') + '/' + error.pagination.lastPage;
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(url);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MailboxMailResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _mailboxService: MailboxService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Mail>
|
||||
{
|
||||
return this._mailboxService.getMailById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested mail is either
|
||||
// not available on the requested page or not
|
||||
// available at all
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,163 +0,0 @@
|
||||
import { ActivatedRouteSnapshot, Route, UrlMatchResult, UrlSegment } from '@angular/router';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
|
||||
import { MailboxFiltersResolver, MailboxFoldersResolver, MailboxLabelsResolver, MailboxMailResolver, MailboxMailsResolver } from 'app/modules/admin/apps/mailbox/mailbox.resolvers';
|
||||
import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
|
||||
import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
|
||||
import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
|
||||
import { MailboxEmptyDetailsComponent } from 'app/modules/admin/apps/mailbox/empty-details/empty-details.component';
|
||||
|
||||
/**
|
||||
* Mailbox custom route matcher
|
||||
*
|
||||
* @param url
|
||||
*/
|
||||
export const mailboxRouteMatcher: (url: UrlSegment[]) => UrlMatchResult = (url: UrlSegment[]) => {
|
||||
|
||||
// Prepare consumed url and positional parameters
|
||||
let consumed = url;
|
||||
const posParams = {};
|
||||
|
||||
// Settings
|
||||
if ( url[0].path === 'settings' )
|
||||
{
|
||||
// Do not match
|
||||
return null;
|
||||
}
|
||||
// Filter or label
|
||||
else if ( url[0].path === 'filter' || url[0].path === 'label' )
|
||||
{
|
||||
posParams[url[0].path] = url[1];
|
||||
posParams['page'] = url[2];
|
||||
|
||||
// Remove the id if exists
|
||||
if ( url[3] )
|
||||
{
|
||||
consumed = url.slice(0, -1);
|
||||
}
|
||||
}
|
||||
// Folder
|
||||
else
|
||||
{
|
||||
posParams['folder'] = url[0];
|
||||
posParams['page'] = url[1];
|
||||
|
||||
// Remove the id if exists
|
||||
if ( url[2] )
|
||||
{
|
||||
consumed = url.slice(0, -1);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
consumed,
|
||||
posParams
|
||||
};
|
||||
};
|
||||
|
||||
export const mailboxRunGuardsAndResolvers: (from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) => boolean = (from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) => {
|
||||
|
||||
// If we are navigating from mail to mails, meaning there is an id in
|
||||
// from's deepest first child and there isn't one in the to's, we will
|
||||
// trigger the resolver
|
||||
|
||||
// Get the current activated route of the 'from'
|
||||
let fromCurrentRoute = from;
|
||||
while ( fromCurrentRoute.firstChild )
|
||||
{
|
||||
fromCurrentRoute = fromCurrentRoute.firstChild;
|
||||
}
|
||||
|
||||
// Get the current activated route of the 'to'
|
||||
let toCurrentRoute = to;
|
||||
while ( toCurrentRoute.firstChild )
|
||||
{
|
||||
toCurrentRoute = toCurrentRoute.firstChild;
|
||||
}
|
||||
|
||||
// Trigger the resolver if the condition met
|
||||
if ( fromCurrentRoute.paramMap.get('id') && !toCurrentRoute.paramMap.get('id') )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
// If the from and to params are equal, don't trigger the resolver
|
||||
const fromParams = {};
|
||||
const toParams = {};
|
||||
|
||||
from.paramMap.keys.forEach((key) => {
|
||||
fromParams[key] = from.paramMap.get(key);
|
||||
});
|
||||
|
||||
to.paramMap.keys.forEach((key) => {
|
||||
toParams[key] = to.paramMap.get(key);
|
||||
});
|
||||
|
||||
if ( isEqual(fromParams, toParams) )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
// Trigger the resolver on other cases
|
||||
return true;
|
||||
};
|
||||
|
||||
export const mailboxRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
redirectTo: 'inbox/1',
|
||||
pathMatch : 'full'
|
||||
},
|
||||
{
|
||||
path : 'filter/:filter',
|
||||
redirectTo: 'filter/:filter/1',
|
||||
pathMatch : 'full'
|
||||
},
|
||||
{
|
||||
path : 'label/:label',
|
||||
redirectTo: 'label/:label/1',
|
||||
pathMatch : 'full'
|
||||
},
|
||||
{
|
||||
path : ':folder',
|
||||
redirectTo: ':folder/1',
|
||||
pathMatch : 'full'
|
||||
},
|
||||
{
|
||||
path : '',
|
||||
component: MailboxComponent,
|
||||
resolve : {
|
||||
filters: MailboxFiltersResolver,
|
||||
folders: MailboxFoldersResolver,
|
||||
labels : MailboxLabelsResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
component : MailboxListComponent,
|
||||
matcher : mailboxRouteMatcher,
|
||||
runGuardsAndResolvers: mailboxRunGuardsAndResolvers,
|
||||
resolve : {
|
||||
mails: MailboxMailsResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: MailboxEmptyDetailsComponent
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: MailboxDetailsComponent,
|
||||
resolve : {
|
||||
mail: MailboxMailResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'settings',
|
||||
component: MailboxSettingsComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -1,395 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
import { Mail, MailCategory, MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MailboxService
|
||||
{
|
||||
selectedMailChanged: BehaviorSubject<any> = new BehaviorSubject(null);
|
||||
private _category: BehaviorSubject<MailCategory> = new BehaviorSubject(null);
|
||||
private _filters: BehaviorSubject<MailFilter[]> = new BehaviorSubject(null);
|
||||
private _folders: BehaviorSubject<MailFolder[]> = new BehaviorSubject(null);
|
||||
private _labels: BehaviorSubject<MailLabel[]> = new BehaviorSubject(null);
|
||||
private _mails: BehaviorSubject<Mail[]> = new BehaviorSubject(null);
|
||||
private _mailsLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
||||
private _mail: BehaviorSubject<Mail> = new BehaviorSubject(null);
|
||||
private _pagination: BehaviorSubject<any> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for category
|
||||
*/
|
||||
get category$(): Observable<MailCategory>
|
||||
{
|
||||
return this._category.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for filters
|
||||
*/
|
||||
get filters$(): Observable<MailFilter[]>
|
||||
{
|
||||
return this._filters.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for folders
|
||||
*/
|
||||
get folders$(): Observable<MailFolder[]>
|
||||
{
|
||||
return this._folders.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for labels
|
||||
*/
|
||||
get labels$(): Observable<MailLabel[]>
|
||||
{
|
||||
return this._labels.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mails
|
||||
*/
|
||||
get mails$(): Observable<Mail[]>
|
||||
{
|
||||
return this._mails.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mails loading
|
||||
*/
|
||||
get mailsLoading$(): Observable<boolean>
|
||||
{
|
||||
return this._mailsLoading.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mail
|
||||
*/
|
||||
get mail$(): Observable<Mail>
|
||||
{
|
||||
return this._mail.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for pagination
|
||||
*/
|
||||
get pagination$(): Observable<any>
|
||||
{
|
||||
return this._pagination.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get filters
|
||||
*/
|
||||
getFilters(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<MailFilter[]>('api/apps/mailbox/filters').pipe(
|
||||
tap((response: any) => {
|
||||
this._filters.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get folders
|
||||
*/
|
||||
getFolders(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<MailFolder[]>('api/apps/mailbox/folders').pipe(
|
||||
tap((response: any) => {
|
||||
this._folders.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get labels
|
||||
*/
|
||||
getLabels(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<MailLabel[]>('api/apps/mailbox/labels').pipe(
|
||||
tap((response: any) => {
|
||||
this._labels.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mails by filter
|
||||
*/
|
||||
getMailsByFilter(filter: string, page: string = '1'): Observable<any>
|
||||
{
|
||||
// Execute the mails loading with true
|
||||
this._mailsLoading.next(true);
|
||||
|
||||
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
|
||||
params: {
|
||||
filter,
|
||||
page
|
||||
}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._category.next({
|
||||
type: 'filter',
|
||||
name: filter
|
||||
});
|
||||
this._mails.next(response.mails);
|
||||
this._pagination.next(response.pagination);
|
||||
this._mailsLoading.next(false);
|
||||
}),
|
||||
switchMap((response) => {
|
||||
|
||||
if ( response.mails === null )
|
||||
{
|
||||
return throwError({
|
||||
message : 'Requested page is not available!',
|
||||
pagination: response.pagination
|
||||
});
|
||||
}
|
||||
|
||||
return of(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mails by folder
|
||||
*/
|
||||
getMailsByFolder(folder: string, page: string = '1'): Observable<any>
|
||||
{
|
||||
// Execute the mails loading with true
|
||||
this._mailsLoading.next(true);
|
||||
|
||||
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
|
||||
params: {
|
||||
folder,
|
||||
page
|
||||
}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._category.next({
|
||||
type: 'folder',
|
||||
name: folder
|
||||
});
|
||||
this._mails.next(response.mails);
|
||||
this._pagination.next(response.pagination);
|
||||
this._mailsLoading.next(false);
|
||||
}),
|
||||
switchMap((response) => {
|
||||
|
||||
if ( response.mails === null )
|
||||
{
|
||||
return throwError({
|
||||
message : 'Requested page is not available!',
|
||||
pagination: response.pagination
|
||||
});
|
||||
}
|
||||
|
||||
return of(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mails by label
|
||||
*/
|
||||
getMailsByLabel(label: string, page: string = '1'): Observable<any>
|
||||
{
|
||||
// Execute the mails loading with true
|
||||
this._mailsLoading.next(true);
|
||||
|
||||
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
|
||||
params: {
|
||||
label,
|
||||
page
|
||||
}
|
||||
}).pipe(
|
||||
tap((response: any) => {
|
||||
this._category.next({
|
||||
type: 'label',
|
||||
name: label
|
||||
});
|
||||
this._mails.next(response.mails);
|
||||
this._pagination.next(response.pagination);
|
||||
this._mailsLoading.next(false);
|
||||
}),
|
||||
switchMap((response) => {
|
||||
|
||||
if ( response.mails === null )
|
||||
{
|
||||
return throwError({
|
||||
message : 'Requested page is not available!',
|
||||
pagination: response.pagination
|
||||
});
|
||||
}
|
||||
|
||||
return of(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mail by id
|
||||
*/
|
||||
getMailById(id: string): Observable<any>
|
||||
{
|
||||
return this._mails.pipe(
|
||||
take(1),
|
||||
map((mails) => {
|
||||
|
||||
// Find the mail
|
||||
const mail = mails.find(item => item.id === id) || null;
|
||||
|
||||
// Update the mail
|
||||
this._mail.next(mail);
|
||||
|
||||
// Return the mail
|
||||
return mail;
|
||||
}),
|
||||
switchMap((mail) => {
|
||||
|
||||
if ( !mail )
|
||||
{
|
||||
return throwError('Could not found mail with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(mail);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update mail
|
||||
*
|
||||
* @param id
|
||||
* @param mail
|
||||
*/
|
||||
updateMail(id: string, mail: Mail): Observable<any>
|
||||
{
|
||||
return this._httpClient.patch('api/apps/mailbox/mail', {
|
||||
id,
|
||||
mail
|
||||
}).pipe(
|
||||
tap(() => {
|
||||
|
||||
// Re-fetch the folders on mail update
|
||||
// to get the updated counts on the sidebar
|
||||
this.getFolders().subscribe();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the current mail
|
||||
*/
|
||||
resetMail(): Observable<boolean>
|
||||
{
|
||||
return of(true).pipe(
|
||||
take(1),
|
||||
tap(() => {
|
||||
this._mail.next(null);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
addLabel(label: MailLabel): Observable<any>
|
||||
{
|
||||
return this.labels$.pipe(
|
||||
take(1),
|
||||
switchMap(labels => this._httpClient.post<MailLabel>('api/apps/mailbox/label', {label}).pipe(
|
||||
map((newLabel) => {
|
||||
|
||||
// Update the labels with the new label
|
||||
this._labels.next([...labels, newLabel]);
|
||||
|
||||
// Return the new label
|
||||
return newLabel;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update label
|
||||
*
|
||||
* @param id
|
||||
* @param label
|
||||
*/
|
||||
updateLabel(id: string, label: MailLabel): Observable<any>
|
||||
{
|
||||
return this.labels$.pipe(
|
||||
take(1),
|
||||
switchMap(labels => this._httpClient.patch<MailLabel>('api/apps/mailbox/label', {
|
||||
id,
|
||||
label
|
||||
}).pipe(
|
||||
map((updatedLabel: any) => {
|
||||
|
||||
// Find the index of the updated label within the labels
|
||||
const index = labels.findIndex(item => item.id === id);
|
||||
|
||||
// Update the label
|
||||
labels[index] = updatedLabel;
|
||||
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
|
||||
// Return the updated label
|
||||
return updatedLabel;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete label
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteLabel(id: string): Observable<any>
|
||||
{
|
||||
return this.labels$.pipe(
|
||||
take(1),
|
||||
switchMap(labels => this._httpClient.delete('api/apps/mailbox/label', {params: {id}}).pipe(
|
||||
map((isDeleted: any) => {
|
||||
|
||||
// Find the index of the deleted label within the labels
|
||||
const index = labels.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the label
|
||||
labels.splice(index, 1);
|
||||
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
export interface Mail
|
||||
{
|
||||
id?: string;
|
||||
type?: string;
|
||||
from?: {
|
||||
avatar?: string;
|
||||
contact?: string;
|
||||
};
|
||||
to?: string;
|
||||
cc?: string[];
|
||||
ccCount?: number;
|
||||
bcc?: string[];
|
||||
bccCount?: number;
|
||||
date?: string;
|
||||
subject?: string;
|
||||
content?: string;
|
||||
attachments?: {
|
||||
type?: string;
|
||||
name?: string;
|
||||
size?: number;
|
||||
preview?: string;
|
||||
downloadUrl?: string;
|
||||
}[];
|
||||
starred?: boolean;
|
||||
important?: boolean;
|
||||
unread?: boolean;
|
||||
folder?: string;
|
||||
labels?: string[];
|
||||
}
|
||||
|
||||
export interface MailCategory
|
||||
{
|
||||
type: 'folder' | 'filter' | 'label';
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface MailFolder
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
icon: string;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
export interface MailFilter
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface MailLabel
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
color: string;
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto p-8">
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- Sidebar toggle button -->
|
||||
<div class="md:hidden -ml-2 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="mailboxComponent.drawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<div class="text-3xl font-extrabold tracking-tight">Manage Labels</div>
|
||||
<div class="text-secondary">Create, update and delete labels</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Labels form -->
|
||||
<form
|
||||
class="mt-8"
|
||||
[formGroup]="labelsForm">
|
||||
|
||||
<!-- New label -->
|
||||
<div
|
||||
class="flex items-center justify-start w-full max-w-80 mt-6"
|
||||
[formGroupName]="'newLabel'">
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>New Label</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'title'"
|
||||
[placeholder]="'Label title'">
|
||||
<mat-select
|
||||
[formControlName]="'color'"
|
||||
[disableOptionCentering]="true"
|
||||
matPrefix>
|
||||
<mat-select-trigger class="h-6">
|
||||
<mat-icon
|
||||
[ngClass]="labelColorDefs[labelsForm.get('newLabel.color').value].text"
|
||||
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of labelColors">
|
||||
<mat-option
|
||||
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
||||
[value]="color"
|
||||
#matOption="matOption">
|
||||
<mat-icon
|
||||
class="absolute m-3 text-white"
|
||||
*ngIf="matOption.selected"
|
||||
[svgIcon]="'heroicons_outline:check'"></mat-icon>
|
||||
<span
|
||||
class="flex w-10 h-10 m-1 rounded-full"
|
||||
[ngClass]="labelColorDefs[color].bg"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
<button
|
||||
mat-icon-button
|
||||
matSuffix
|
||||
[disabled]="!labelsForm.get('newLabel').valid || !labelsForm.get('newLabel').dirty"
|
||||
(click)="addLabel()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Labels -->
|
||||
<div
|
||||
class="flex flex-col w-full max-w-80 mt-4"
|
||||
[formArrayName]="'labels'">
|
||||
<!-- Label -->
|
||||
<ng-container *ngFor="let label of labelsForm.get('labels')['controls']">
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
matInput
|
||||
[formControl]="label.get('title')">
|
||||
<mat-select
|
||||
[formControl]="label.get('color')"
|
||||
[disableOptionCentering]="true"
|
||||
matPrefix>
|
||||
<mat-select-trigger class="h-6">
|
||||
<mat-icon
|
||||
[ngClass]="labelColorDefs[label.get('color').value].text"
|
||||
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of labelColors">
|
||||
<mat-option
|
||||
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
||||
[value]="color"
|
||||
#matOption="matOption">
|
||||
<mat-icon
|
||||
class="absolute m-3 text-white"
|
||||
*ngIf="matOption.selected"
|
||||
[svgIcon]="'heroicons_outline:check'"></mat-icon>
|
||||
<span
|
||||
class="flex w-10 h-10 m-1 rounded-full"
|
||||
[ngClass]="labelColorDefs[color].bg"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
<button
|
||||
mat-icon-button
|
||||
matSuffix
|
||||
(click)="deleteLabel(label.get('id').value)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user