compose component added
This commit is contained in:
Park Byung Eun
parent
4647e5b6a0
commit
d11803b30c
|
|
@ -44,6 +44,9 @@
|
||||||
"accessibility": "explicit"
|
"accessibility": "explicit"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"@typescript-eslint/naming-convention": [
|
||||||
|
{ "leadingUnderscore": "allowSingleOrDouble" }
|
||||||
|
],
|
||||||
"@typescript-eslint/no-inferrable-types": "off",
|
"@typescript-eslint/no-inferrable-types": "off",
|
||||||
"arrow-parens": [
|
"arrow-parens": [
|
||||||
"error",
|
"error",
|
||||||
|
|
|
||||||
127
package-lock.json
generated
127
package-lock.json
generated
|
|
@ -28,9 +28,10 @@
|
||||||
"moment": "2.29.1",
|
"moment": "2.29.1",
|
||||||
"ng-apexcharts": "1.7.0",
|
"ng-apexcharts": "1.7.0",
|
||||||
"ngx-markdown": "13.1.0",
|
"ngx-markdown": "13.1.0",
|
||||||
"ngx-quill": "16.1.2",
|
"ngx-quill": "^16.1.2",
|
||||||
"perfect-scrollbar": "1.5.3",
|
"perfect-scrollbar": "1.5.3",
|
||||||
"quill": "1.3.7",
|
"quill": "1.3.7",
|
||||||
|
"quill-delta": "^5.0.0",
|
||||||
"rxjs": "7.5.4",
|
"rxjs": "7.5.4",
|
||||||
"tslib": "2.3.1",
|
"tslib": "2.3.1",
|
||||||
"zone.js": "0.11.4"
|
"zone.js": "0.11.4"
|
||||||
|
|
@ -54,6 +55,7 @@
|
||||||
"@types/lodash": "4.14.178",
|
"@types/lodash": "4.14.178",
|
||||||
"@types/lodash-es": "4.17.6",
|
"@types/lodash-es": "4.17.6",
|
||||||
"@types/node": "12.20.46",
|
"@types/node": "12.20.46",
|
||||||
|
"@types/quill": "^2.0.9",
|
||||||
"@typescript-eslint/eslint-plugin": "5.12.0",
|
"@typescript-eslint/eslint-plugin": "5.12.0",
|
||||||
"@typescript-eslint/parser": "5.12.0",
|
"@typescript-eslint/parser": "5.12.0",
|
||||||
"autoprefixer": "10.4.2",
|
"autoprefixer": "10.4.2",
|
||||||
|
|
@ -3395,6 +3397,27 @@
|
||||||
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
|
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/quill": {
|
||||||
|
"version": "2.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-2.0.9.tgz",
|
||||||
|
"integrity": "sha512-/n40Ypp+jF3GDLqB/5z1P+Odq1K98txXbBgRDkG6Z90LGC1AwQPtZWNeOdDg0yUlgBSUASmpeDn3eBPUuPXtuw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"parchment": "^1.1.2",
|
||||||
|
"quill-delta": "^4.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/quill/node_modules/quill-delta": {
|
||||||
|
"version": "4.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-4.2.2.tgz",
|
||||||
|
"integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"fast-diff": "1.2.0",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
|
"lodash.isequal": "^4.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/range-parser": {
|
"node_modules/@types/range-parser": {
|
||||||
"version": "1.2.4",
|
"version": "1.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
|
||||||
|
|
@ -7284,9 +7307,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/fast-diff": {
|
"node_modules/fast-diff": {
|
||||||
"version": "1.1.2",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||||
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
|
||||||
},
|
},
|
||||||
"node_modules/fast-glob": {
|
"node_modules/fast-glob": {
|
||||||
"version": "3.2.7",
|
"version": "3.2.7",
|
||||||
|
|
@ -9405,12 +9428,22 @@
|
||||||
"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
|
"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash.clonedeep": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
|
||||||
|
},
|
||||||
"node_modules/lodash.debounce": {
|
"node_modules/lodash.debounce": {
|
||||||
"version": "4.0.8",
|
"version": "4.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
|
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash.isequal": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
|
||||||
|
},
|
||||||
"node_modules/lodash.isplainobject": {
|
"node_modules/lodash.isplainobject": {
|
||||||
"version": "4.0.6",
|
"version": "4.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||||
|
|
@ -11734,6 +11767,29 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/quill-delta": {
|
"node_modules/quill-delta": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-lVORU8dBPJdxPmwtdGhfRcz2cekn8Osuj5kwHoPMQ3MNlDT/IZ0CGUnQ/tLsAaTn31LWcDC1KyL+gkiGbBlBBw==",
|
||||||
|
"dependencies": {
|
||||||
|
"fast-diff": "1.2.0",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
|
"lodash.isequal": "^4.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/quill/node_modules/eventemitter3": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||||
|
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
||||||
|
},
|
||||||
|
"node_modules/quill/node_modules/fast-diff": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
||||||
|
},
|
||||||
|
"node_modules/quill/node_modules/quill-delta": {
|
||||||
"version": "3.6.3",
|
"version": "3.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
|
||||||
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
|
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
|
||||||
|
|
@ -11746,11 +11802,6 @@
|
||||||
"node": ">=0.10"
|
"node": ">=0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/quill/node_modules/eventemitter3": {
|
|
||||||
"version": "2.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
|
||||||
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
|
||||||
},
|
|
||||||
"node_modules/randombytes": {
|
"node_modules/randombytes": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||||
|
|
@ -16792,6 +16843,29 @@
|
||||||
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
|
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/quill": {
|
||||||
|
"version": "2.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-2.0.9.tgz",
|
||||||
|
"integrity": "sha512-/n40Ypp+jF3GDLqB/5z1P+Odq1K98txXbBgRDkG6Z90LGC1AwQPtZWNeOdDg0yUlgBSUASmpeDn3eBPUuPXtuw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"parchment": "^1.1.2",
|
||||||
|
"quill-delta": "^4.0.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"quill-delta": {
|
||||||
|
"version": "4.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-4.2.2.tgz",
|
||||||
|
"integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"fast-diff": "1.2.0",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
|
"lodash.isequal": "^4.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/range-parser": {
|
"@types/range-parser": {
|
||||||
"version": "1.2.4",
|
"version": "1.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
|
||||||
|
|
@ -19626,9 +19700,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"fast-diff": {
|
"fast-diff": {
|
||||||
"version": "1.1.2",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||||
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
|
||||||
},
|
},
|
||||||
"fast-glob": {
|
"fast-glob": {
|
||||||
"version": "3.2.7",
|
"version": "3.2.7",
|
||||||
|
|
@ -21194,12 +21268,22 @@
|
||||||
"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
|
"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.clonedeep": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
|
||||||
|
},
|
||||||
"lodash.debounce": {
|
"lodash.debounce": {
|
||||||
"version": "4.0.8",
|
"version": "4.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
|
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.isequal": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
|
||||||
|
},
|
||||||
"lodash.isplainobject": {
|
"lodash.isplainobject": {
|
||||||
"version": "4.0.6",
|
"version": "4.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||||
|
|
@ -22867,8 +22951,11 @@
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||||
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
||||||
}
|
},
|
||||||
}
|
"fast-diff": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
||||||
},
|
},
|
||||||
"quill-delta": {
|
"quill-delta": {
|
||||||
"version": "3.6.3",
|
"version": "3.6.3",
|
||||||
|
|
@ -22879,6 +22966,18 @@
|
||||||
"extend": "^3.0.2",
|
"extend": "^3.0.2",
|
||||||
"fast-diff": "1.1.2"
|
"fast-diff": "1.1.2"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"quill-delta": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-lVORU8dBPJdxPmwtdGhfRcz2cekn8Osuj5kwHoPMQ3MNlDT/IZ0CGUnQ/tLsAaTn31LWcDC1KyL+gkiGbBlBBw==",
|
||||||
|
"requires": {
|
||||||
|
"fast-diff": "1.2.0",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
|
"lodash.isequal": "^4.5.0"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"randombytes": {
|
"randombytes": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
|
|
|
||||||
|
|
@ -33,9 +33,7 @@
|
||||||
"moment": "2.29.1",
|
"moment": "2.29.1",
|
||||||
"ng-apexcharts": "1.7.0",
|
"ng-apexcharts": "1.7.0",
|
||||||
"ngx-markdown": "13.1.0",
|
"ngx-markdown": "13.1.0",
|
||||||
"ngx-quill": "16.1.2",
|
|
||||||
"perfect-scrollbar": "1.5.3",
|
"perfect-scrollbar": "1.5.3",
|
||||||
"quill": "1.3.7",
|
|
||||||
"rxjs": "7.5.4",
|
"rxjs": "7.5.4",
|
||||||
"tslib": "2.3.1",
|
"tslib": "2.3.1",
|
||||||
"zone.js": "0.11.4"
|
"zone.js": "0.11.4"
|
||||||
|
|
|
||||||
123
src/app/modules/user/main/compose/comp-compose.component.html
Normal file
123
src/app/modules/user/main/compose/comp-compose.component.html
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">Comp</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'"
|
||||||
|
[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>
|
||||||
94
src/app/modules/user/main/compose/comp-compose.component.ts
Normal file
94
src/app/modules/user/main/compose/comp-compose.component.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'comp-compose',
|
||||||
|
templateUrl: './comp-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class CompComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<CompComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">customer</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'"
|
||||||
|
[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>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'customer-compose',
|
||||||
|
templateUrl: './customer-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class CustomerComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<CustomerComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
123
src/app/modules/user/main/compose/deposit-compose.component.html
Normal file
123
src/app/modules/user/main/compose/deposit-compose.component.html
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">deposit</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'"
|
||||||
|
[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>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'deposit-compose',
|
||||||
|
templateUrl: './deposit-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class DepositComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<DepositComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">Deposit History</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'"
|
||||||
|
[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>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'deposit-history-compose',
|
||||||
|
templateUrl: './deposit-history-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class DepositHistoryComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<DepositHistoryComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
17
src/app/modules/user/main/compose/index.ts
Normal file
17
src/app/modules/user/main/compose/index.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { CompComposeComponent } from './comp-compose.component';
|
||||||
|
import { CustomerComposeComponent } from './customer-compose.component';
|
||||||
|
import { DepositComposeComponent } from './deposit-compose.component';
|
||||||
|
import { DepositHistoryComposeComponent } from './deposit-history-compose.component';
|
||||||
|
import { NoticeComposeComponent } from './notice-compose.component';
|
||||||
|
import { WithdrawComposeComponent } from './withdraw-compose.component';
|
||||||
|
import { WithdrawHistoryComposeComponent } from './withdraw-history-compose.component';
|
||||||
|
|
||||||
|
export const COMPOSE = [
|
||||||
|
DepositComposeComponent,
|
||||||
|
WithdrawComposeComponent,
|
||||||
|
CompComposeComponent,
|
||||||
|
CustomerComposeComponent,
|
||||||
|
DepositHistoryComposeComponent,
|
||||||
|
WithdrawHistoryComposeComponent,
|
||||||
|
NoticeComposeComponent,
|
||||||
|
];
|
||||||
123
src/app/modules/user/main/compose/notice-compose.component.html
Normal file
123
src/app/modules/user/main/compose/notice-compose.component.html
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">Notice</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'"
|
||||||
|
[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>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'notice-compose',
|
||||||
|
templateUrl: './notice-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class NoticeComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<NoticeComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">Withdraw</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'"
|
||||||
|
[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>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'withdraw-compose',
|
||||||
|
templateUrl: './withdraw-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class WithdrawComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<WithdrawComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<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">Withdraw History</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'"
|
||||||
|
[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>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'withdraw-history-compose',
|
||||||
|
templateUrl: './withdraw-history-compose.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
export class WithdrawHistoryComposeComponent implements OnInit {
|
||||||
|
composeForm!: FormGroup;
|
||||||
|
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<WithdrawHistoryComposeComponent>,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ 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 {}
|
||||||
|
}
|
||||||
|
|
@ -11,31 +11,66 @@
|
||||||
>
|
>
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="text-4xl font-extrabold tracking-tight">
|
<div class="text-4xl font-extrabold tracking-tight">
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.deposit)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">입금신청</span>
|
<span class="ml-2 mr-1">입금신청</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.withdraw)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">출금신청</span>
|
<span class="ml-2 mr-1">출금신청</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.notice)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">공지사항</span>
|
<span class="ml-2 mr-1">공지사항</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.comp)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">콤프</span>
|
<span class="ml-2 mr-1">콤프</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.customer)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">고객센터</span>
|
<span class="ml-2 mr-1">고객센터</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.depositHistory)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">입금내역</span>
|
<span class="ml-2 mr-1">입금내역</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="ml-4" mat-flat-button [color]="'primary'">
|
<button
|
||||||
|
class="ml-4"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="__onClickCompose(composeMenuType.withdrawHistory)"
|
||||||
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">출금내역</span>
|
<span class="ml-2 mr-1">출금내역</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,22 @@
|
||||||
import { Component, ViewEncapsulation } from '@angular/core';
|
import { Component, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
import { CompComposeComponent } from './compose/comp-compose.component';
|
||||||
|
import { CustomerComposeComponent } from './compose/customer-compose.component';
|
||||||
|
import { DepositComposeComponent } from './compose/deposit-compose.component';
|
||||||
|
import { DepositHistoryComposeComponent } from './compose/deposit-history-compose.component';
|
||||||
|
import { NoticeComposeComponent } from './compose/notice-compose.component';
|
||||||
|
import { WithdrawComposeComponent } from './compose/withdraw-compose.component';
|
||||||
|
import { WithdrawHistoryComposeComponent } from './compose/withdraw-history-compose.component';
|
||||||
|
|
||||||
|
export enum ComposeMenuType {
|
||||||
|
deposit = 'Deposit',
|
||||||
|
withdraw = 'Withdraw',
|
||||||
|
notice = 'Notice',
|
||||||
|
comp = 'Comp',
|
||||||
|
customer = 'Customer',
|
||||||
|
depositHistory = 'DepositHistory',
|
||||||
|
withdrawHistory = 'WithdrawHistory',
|
||||||
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'main',
|
selector: 'main',
|
||||||
|
|
@ -6,6 +24,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class MainComponent {
|
export class MainComponent {
|
||||||
|
composeMenuType = ComposeMenuType;
|
||||||
|
|
||||||
components = [
|
components = [
|
||||||
{
|
{
|
||||||
id: 'ag(1)',
|
id: 'ag(1)',
|
||||||
|
|
@ -166,7 +186,7 @@ export class MainComponent {
|
||||||
/**
|
/**
|
||||||
* Constructor
|
* Constructor
|
||||||
*/
|
*/
|
||||||
constructor() {}
|
constructor(private _matDialog: MatDialog) {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Track by function for ngFor loops
|
* Track by function for ngFor loops
|
||||||
|
|
@ -177,4 +197,41 @@ export class MainComponent {
|
||||||
trackByFn(index: number, item: any): any {
|
trackByFn(index: number, item: any): any {
|
||||||
return item.id || index;
|
return item.id || index;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param composeMenuType
|
||||||
|
*/
|
||||||
|
__onClickCompose(composeMenuType: ComposeMenuType): void {
|
||||||
|
let selectType: any;
|
||||||
|
|
||||||
|
switch (composeMenuType) {
|
||||||
|
case ComposeMenuType.deposit:
|
||||||
|
selectType = DepositComposeComponent;
|
||||||
|
break;
|
||||||
|
case ComposeMenuType.withdraw:
|
||||||
|
selectType = WithdrawComposeComponent;
|
||||||
|
break;
|
||||||
|
case ComposeMenuType.notice:
|
||||||
|
selectType = NoticeComposeComponent;
|
||||||
|
break;
|
||||||
|
case ComposeMenuType.comp:
|
||||||
|
selectType = CompComposeComponent;
|
||||||
|
break;
|
||||||
|
case ComposeMenuType.customer:
|
||||||
|
selectType = CustomerComposeComponent;
|
||||||
|
break;
|
||||||
|
case ComposeMenuType.depositHistory:
|
||||||
|
selectType = DepositHistoryComposeComponent;
|
||||||
|
break;
|
||||||
|
case ComposeMenuType.withdrawHistory:
|
||||||
|
selectType = WithdrawHistoryComposeComponent;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogRef = this._matDialog.open(selectType);
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe((result) => {
|
||||||
|
console.log('Compose dialog was closed!');
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,16 @@ import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { MatDialogModule } from '@angular/material/dialog';
|
||||||
|
|
||||||
import { FuseCardModule } from '@fuse/components/card';
|
import { FuseCardModule } from '@fuse/components/card';
|
||||||
import { SharedModule } from 'app/shared/shared.module';
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
|
|
||||||
import { MainComponent } from 'app/modules/user/main/main.component';
|
import { MainComponent } from 'app/modules/user/main/main.component';
|
||||||
|
|
||||||
|
import { COMPOSE } from './compose';
|
||||||
|
|
||||||
const mainRoutes: Route[] = [
|
const mainRoutes: Route[] = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
|
|
@ -18,13 +22,15 @@ const mainRoutes: Route[] = [
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [MainComponent],
|
declarations: [MainComponent, COMPOSE],
|
||||||
imports: [
|
imports: [
|
||||||
RouterModule.forChild(mainRoutes),
|
RouterModule.forChild(mainRoutes),
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatDialogModule,
|
||||||
FuseCardModule,
|
FuseCardModule,
|
||||||
SharedModule,
|
SharedModule,
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user