콤프 수정

This commit is contained in:
이담 정 2022-09-06 04:08:05 +00:00
parent 614b0acb63
commit e15e05943a
2 changed files with 28 additions and 112 deletions

View File

@ -3,7 +3,7 @@
<div <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" 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> <div class="text-lg font-medium">콤프</div>
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1"> <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
<mat-icon <mat-icon
class="text-current" class="text-current"
@ -11,103 +11,39 @@
></mat-icon> ></mat-icon>
</button> </button>
</div> </div>
<fuse-alert
class="mt-8 -mb-4"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
[type]="alert.type"
[@shake]="alert.type === 'error'"
>
{{ alert.message }}
</fuse-alert>
<!-- Compose form --> <!-- Compose form -->
<form <form
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto" class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
[formGroup]="composeForm" [formGroup]="composeForm"
> >
<!-- To --> <!-- Nickname -->
<mat-form-field> <mat-form-field>
<mat-label>To</mat-label> <mat-label>닉네임</mat-label>
<input matInput [formControlName]="'to'" /> <input matInput [formControlName]="'accountHolder'" />
<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> </mat-form-field>
<mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
닉네임은 필수 입력입니다.
</mat-error>
<!-- Cc --> <!-- Holding comp -->
<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-form-field>
<mat-label>Subject</mat-label> <mat-label>보유콤프</mat-label>
<input matInput [formControlName]="'subject'" /> <input #inputAmount matInput [formControlName]="'amount'" value="" />
</mat-form-field> </mat-form-field>
<!-- Body --> <div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
<!-- <quill-editor <div class="flex mt-4 sm:mt-0">
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 --> <!-- Send -->
<button <button
class="order-first sm:order-last" class="order-first sm:order-last"
@ -115,7 +51,7 @@
[color]="'primary'" [color]="'primary'"
(click)="send()" (click)="send()"
> >
Send 콤프사용
</button> </button>
</div> </div>
</div> </div>

View File

@ -1,6 +1,7 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
import { FuseAlertType } from '@fuse/components/alert';
@Component({ @Component({
selector: 'comp-compose', selector: 'comp-compose',
@ -9,17 +10,11 @@ import { MatDialogRef } from '@angular/material/dialog';
}) })
export class CompComposeComponent implements OnInit { export class CompComposeComponent implements OnInit {
composeForm!: FormGroup; composeForm!: FormGroup;
copyFields: { cc: boolean; bcc: boolean } = { alert: { type: FuseAlertType; message: string } = {
cc: false, type: 'success',
bcc: false, message: '출금신청이 완료 되었습니다.',
};
quillModules: any = {
toolbar: [
['bold', 'italic', 'underline'],
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
['clean'],
],
}; };
showAlert: boolean = false;
/** /**
* Constructor * Constructor
@ -51,21 +46,6 @@ export class CompComposeComponent implements OnInit {
// @ Public methods // @ 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 * Save and close
*/ */