From d11803b30c60570418fe277dfef8872d9c19af4e Mon Sep 17 00:00:00 2001 From: Park Byung Eun Date: Thu, 21 Jul 2022 08:29:08 +0000 Subject: [PATCH] compose component added --- .eslintrc.json | 3 + package-lock.json | 135 +++++++++++++++--- package.json | 2 - .../main/compose/comp-compose.component.html | 123 ++++++++++++++++ .../main/compose/comp-compose.component.ts | 94 ++++++++++++ .../compose/customer-compose.component.html | 123 ++++++++++++++++ .../compose/customer-compose.component.ts | 93 ++++++++++++ .../compose/deposit-compose.component.html | 123 ++++++++++++++++ .../main/compose/deposit-compose.component.ts | 94 ++++++++++++ .../deposit-history-compose.component.html | 123 ++++++++++++++++ .../deposit-history-compose.component.ts | 94 ++++++++++++ src/app/modules/user/main/compose/index.ts | 17 +++ .../compose/notice-compose.component.html | 123 ++++++++++++++++ .../main/compose/notice-compose.component.ts | 94 ++++++++++++ .../compose/withdraw-compose.component.html | 123 ++++++++++++++++ .../compose/withdraw-compose.component.ts | 94 ++++++++++++ .../withdraw-history-compose.component.html | 123 ++++++++++++++++ .../withdraw-history-compose.component.ts | 94 ++++++++++++ src/app/modules/user/main/main.component.html | 49 ++++++- src/app/modules/user/main/main.component.ts | 59 +++++++- src/app/modules/user/main/main.module.ts | 8 +- 21 files changed, 1762 insertions(+), 29 deletions(-) create mode 100644 src/app/modules/user/main/compose/comp-compose.component.html create mode 100644 src/app/modules/user/main/compose/comp-compose.component.ts create mode 100644 src/app/modules/user/main/compose/customer-compose.component.html create mode 100644 src/app/modules/user/main/compose/customer-compose.component.ts create mode 100644 src/app/modules/user/main/compose/deposit-compose.component.html create mode 100644 src/app/modules/user/main/compose/deposit-compose.component.ts create mode 100644 src/app/modules/user/main/compose/deposit-history-compose.component.html create mode 100644 src/app/modules/user/main/compose/deposit-history-compose.component.ts create mode 100644 src/app/modules/user/main/compose/index.ts create mode 100644 src/app/modules/user/main/compose/notice-compose.component.html create mode 100644 src/app/modules/user/main/compose/notice-compose.component.ts create mode 100644 src/app/modules/user/main/compose/withdraw-compose.component.html create mode 100644 src/app/modules/user/main/compose/withdraw-compose.component.ts create mode 100644 src/app/modules/user/main/compose/withdraw-history-compose.component.html create mode 100644 src/app/modules/user/main/compose/withdraw-history-compose.component.ts diff --git a/.eslintrc.json b/.eslintrc.json index 561b750..5fcd7d5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -44,6 +44,9 @@ "accessibility": "explicit" } ], + "@typescript-eslint/naming-convention": [ + { "leadingUnderscore": "allowSingleOrDouble" } + ], "@typescript-eslint/no-inferrable-types": "off", "arrow-parens": [ "error", diff --git a/package-lock.json b/package-lock.json index b1fd7d9..e2a4713 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,9 +28,10 @@ "moment": "2.29.1", "ng-apexcharts": "1.7.0", "ngx-markdown": "13.1.0", - "ngx-quill": "16.1.2", + "ngx-quill": "^16.1.2", "perfect-scrollbar": "1.5.3", "quill": "1.3.7", + "quill-delta": "^5.0.0", "rxjs": "7.5.4", "tslib": "2.3.1", "zone.js": "0.11.4" @@ -54,6 +55,7 @@ "@types/lodash": "4.14.178", "@types/lodash-es": "4.17.6", "@types/node": "12.20.46", + "@types/quill": "^2.0.9", "@typescript-eslint/eslint-plugin": "5.12.0", "@typescript-eslint/parser": "5.12.0", "autoprefixer": "10.4.2", @@ -3395,6 +3397,27 @@ "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "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": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", @@ -7284,9 +7307,9 @@ "dev": true }, "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==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==" }, "node_modules/fast-glob": { "version": "3.2.7", @@ -9405,12 +9428,22 @@ "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=", "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": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "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": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", @@ -11734,6 +11767,29 @@ } }, "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", "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", @@ -11746,11 +11802,6 @@ "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": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -16792,6 +16843,29 @@ "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "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": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", @@ -19626,9 +19700,9 @@ "dev": true }, "fast-diff": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", - "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==" }, "fast-glob": { "version": "3.2.7", @@ -21194,12 +21268,22 @@ "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=", "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": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "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": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", @@ -22867,17 +22951,32 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", "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": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "requires": { + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" + } } } }, "quill-delta": { - "version": "3.6.3", - "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", - "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.0.0.tgz", + "integrity": "sha512-lVORU8dBPJdxPmwtdGhfRcz2cekn8Osuj5kwHoPMQ3MNlDT/IZ0CGUnQ/tLsAaTn31LWcDC1KyL+gkiGbBlBBw==", "requires": { - "deep-equal": "^1.0.1", - "extend": "^3.0.2", - "fast-diff": "1.1.2" + "fast-diff": "1.2.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" } }, "randombytes": { diff --git a/package.json b/package.json index f55c405..3bda5e9 100644 --- a/package.json +++ b/package.json @@ -33,9 +33,7 @@ "moment": "2.29.1", "ng-apexcharts": "1.7.0", "ngx-markdown": "13.1.0", - "ngx-quill": "16.1.2", "perfect-scrollbar": "1.5.3", - "quill": "1.3.7", "rxjs": "7.5.4", "tslib": "2.3.1", "zone.js": "0.11.4" diff --git a/src/app/modules/user/main/compose/comp-compose.component.html b/src/app/modules/user/main/compose/comp-compose.component.html new file mode 100644 index 0000000..a8b20be --- /dev/null +++ b/src/app/modules/user/main/compose/comp-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
Comp
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/comp-compose.component.ts b/src/app/modules/user/main/compose/comp-compose.component.ts new file mode 100644 index 0000000..4e4171d --- /dev/null +++ b/src/app/modules/user/main/compose/comp-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/compose/customer-compose.component.html b/src/app/modules/user/main/compose/customer-compose.component.html new file mode 100644 index 0000000..85d12de --- /dev/null +++ b/src/app/modules/user/main/compose/customer-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
customer
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/customer-compose.component.ts b/src/app/modules/user/main/compose/customer-compose.component.ts new file mode 100644 index 0000000..1f37b46 --- /dev/null +++ b/src/app/modules/user/main/compose/customer-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/compose/deposit-compose.component.html b/src/app/modules/user/main/compose/deposit-compose.component.html new file mode 100644 index 0000000..114eb35 --- /dev/null +++ b/src/app/modules/user/main/compose/deposit-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
deposit
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/deposit-compose.component.ts b/src/app/modules/user/main/compose/deposit-compose.component.ts new file mode 100644 index 0000000..d56e036 --- /dev/null +++ b/src/app/modules/user/main/compose/deposit-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/compose/deposit-history-compose.component.html b/src/app/modules/user/main/compose/deposit-history-compose.component.html new file mode 100644 index 0000000..9a8f338 --- /dev/null +++ b/src/app/modules/user/main/compose/deposit-history-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
Deposit History
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/deposit-history-compose.component.ts b/src/app/modules/user/main/compose/deposit-history-compose.component.ts new file mode 100644 index 0000000..380d329 --- /dev/null +++ b/src/app/modules/user/main/compose/deposit-history-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/compose/index.ts b/src/app/modules/user/main/compose/index.ts new file mode 100644 index 0000000..848d00d --- /dev/null +++ b/src/app/modules/user/main/compose/index.ts @@ -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, +]; diff --git a/src/app/modules/user/main/compose/notice-compose.component.html b/src/app/modules/user/main/compose/notice-compose.component.html new file mode 100644 index 0000000..bea4966 --- /dev/null +++ b/src/app/modules/user/main/compose/notice-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
Notice
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/notice-compose.component.ts b/src/app/modules/user/main/compose/notice-compose.component.ts new file mode 100644 index 0000000..265a577 --- /dev/null +++ b/src/app/modules/user/main/compose/notice-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/compose/withdraw-compose.component.html b/src/app/modules/user/main/compose/withdraw-compose.component.html new file mode 100644 index 0000000..4789dc2 --- /dev/null +++ b/src/app/modules/user/main/compose/withdraw-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
Withdraw
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/withdraw-compose.component.ts b/src/app/modules/user/main/compose/withdraw-compose.component.ts new file mode 100644 index 0000000..51a1295 --- /dev/null +++ b/src/app/modules/user/main/compose/withdraw-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/compose/withdraw-history-compose.component.html b/src/app/modules/user/main/compose/withdraw-history-compose.component.html new file mode 100644 index 0000000..5eb6d19 --- /dev/null +++ b/src/app/modules/user/main/compose/withdraw-history-compose.component.html @@ -0,0 +1,123 @@ +
+ +
+
Withdraw History
+ +
+ + +
+ + + To + +
+ + Cc + + + Bcc + +
+ + + + + Cc + + + + + + Bcc + + + + + + Subject + + + + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + +
+
+
+
diff --git a/src/app/modules/user/main/compose/withdraw-history-compose.component.ts b/src/app/modules/user/main/compose/withdraw-history-compose.component.ts new file mode 100644 index 0000000..31e50d7 --- /dev/null +++ b/src/app/modules/user/main/compose/withdraw-history-compose.component.ts @@ -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, + 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 {} +} diff --git a/src/app/modules/user/main/main.component.html b/src/app/modules/user/main/main.component.html index 4c84098..aa571f9 100644 --- a/src/app/modules/user/main/main.component.html +++ b/src/app/modules/user/main/main.component.html @@ -11,31 +11,66 @@ >
- - - - - - - diff --git a/src/app/modules/user/main/main.component.ts b/src/app/modules/user/main/main.component.ts index dec357d..7b684ac 100644 --- a/src/app/modules/user/main/main.component.ts +++ b/src/app/modules/user/main/main.component.ts @@ -1,4 +1,22 @@ 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({ selector: 'main', @@ -6,6 +24,8 @@ import { Component, ViewEncapsulation } from '@angular/core'; encapsulation: ViewEncapsulation.None, }) export class MainComponent { + composeMenuType = ComposeMenuType; + components = [ { id: 'ag(1)', @@ -166,7 +186,7 @@ export class MainComponent { /** * Constructor */ - constructor() {} + constructor(private _matDialog: MatDialog) {} /** * Track by function for ngFor loops @@ -177,4 +197,41 @@ export class MainComponent { trackByFn(index: number, item: any): any { 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!'); + }); + } } diff --git a/src/app/modules/user/main/main.module.ts b/src/app/modules/user/main/main.module.ts index 35b1523..03855b5 100644 --- a/src/app/modules/user/main/main.module.ts +++ b/src/app/modules/user/main/main.module.ts @@ -4,12 +4,16 @@ import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatFormFieldModule } from '@angular/material/form-field'; 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 { SharedModule } from 'app/shared/shared.module'; import { MainComponent } from 'app/modules/user/main/main.component'; +import { COMPOSE } from './compose'; + const mainRoutes: Route[] = [ { path: '', @@ -18,13 +22,15 @@ const mainRoutes: Route[] = [ ]; @NgModule({ - declarations: [MainComponent], + declarations: [MainComponent, COMPOSE], imports: [ RouterModule.forChild(mainRoutes), MatButtonModule, MatIconModule, MatFormFieldModule, MatTabsModule, + MatInputModule, + MatDialogModule, FuseCardModule, SharedModule, ],