compose component added
This commit is contained in:
Park Byung Eun
parent
4647e5b6a0
commit
d11803b30c
|
|
@ -44,6 +44,9 @@
|
|||
"accessibility": "explicit"
|
||||
}
|
||||
],
|
||||
"@typescript-eslint/naming-convention": [
|
||||
{ "leadingUnderscore": "allowSingleOrDouble" }
|
||||
],
|
||||
"@typescript-eslint/no-inferrable-types": "off",
|
||||
"arrow-parens": [
|
||||
"error",
|
||||
|
|
|
|||
135
package-lock.json
generated
135
package-lock.json
generated
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
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 -->
|
||||
<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>
|
||||
<span class="ml-2 mr-1">입금신청</span>
|
||||
</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>
|
||||
<span class="ml-2 mr-1">출금신청</span>
|
||||
</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>
|
||||
<span class="ml-2 mr-1">공지사항</span>
|
||||
</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>
|
||||
<span class="ml-2 mr-1">콤프</span>
|
||||
</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>
|
||||
<span class="ml-2 mr-1">고객센터</span>
|
||||
</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>
|
||||
<span class="ml-2 mr-1">입금내역</span>
|
||||
</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>
|
||||
<span class="ml-2 mr-1">출금내역</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -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!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user