공지사항 화면수정
This commit is contained in:
parent
babc00d88a
commit
e22fff9493
|
|
@ -8,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
|
|||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
|
||||
import { FuseCardModule } from '@fuse/components/card';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
|
|
@ -28,6 +29,7 @@ import { COMPOSE } from './compose';
|
|||
MatDialogModule,
|
||||
MatSelectModule,
|
||||
MatButtonToggleModule,
|
||||
MatExpansionModule,
|
||||
|
||||
FuseCardModule,
|
||||
SharedModule,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<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>
|
||||
<div class="text-lg font-medium">공지사항</div>
|
||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
|
|
@ -11,113 +11,52 @@
|
|||
></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 -->
|
||||
<ng-container *ngIf="notice">
|
||||
<ng-container *ngIf="notice.length > 0; else noNotice">
|
||||
<div class="grid">
|
||||
<mat-accordion>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
||||
class="notice-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
|
||||
style="font-size: x-small"
|
||||
>
|
||||
<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>
|
||||
<span>번호</span>
|
||||
<span>내용</span>
|
||||
<span>날짜</span>
|
||||
</div>
|
||||
<!-- <ng-container *ngIf="notice"> -->
|
||||
<!-- <ng-container *ngFor="let info of notice; trackBy: __trackByFn"> -->
|
||||
<mat-expansion-panel *ngFor="let info of notice">
|
||||
<mat-expansion-panel-header>
|
||||
|
||||
<span>{{ info.idx }}</span
|
||||
>
|
||||
<span>{{ info.title }}</span>
|
||||
|
||||
|
||||
|
||||
<span>{{ info.applicationDate }}</span>
|
||||
</mat-expansion-panel-header>
|
||||
<div>
|
||||
{{ info.contents }}
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<!-- </ng-container> -->
|
||||
<!-- </ng-container> -->
|
||||
</mat-accordion>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<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()"
|
||||
<ng-template #noNotice>
|
||||
<div
|
||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
There are no data!
|
||||
</div>
|
||||
</ng-template>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
|
|||
@Component({
|
||||
selector: 'notice-compose',
|
||||
templateUrl: './notice-compose.component.html',
|
||||
styles: [
|
||||
/* language=SCSS */
|
||||
`
|
||||
.notice-grid {
|
||||
/* 번호 내용 날짜 */
|
||||
grid-template-columns: 100px 250px 100px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class NoticeComposeComponent implements OnInit {
|
||||
|
|
@ -29,6 +38,21 @@ export class NoticeComposeComponent implements OnInit {
|
|||
private _formBuilder: FormBuilder
|
||||
) {}
|
||||
|
||||
notice = [
|
||||
{
|
||||
idx: '1',
|
||||
title: '계좌등록안내',
|
||||
contents: '안녕하세요. 운영진입니다dkfjkjdfkjdkfjfkjdkjkdfjdkjk',
|
||||
applicationDate: '2022.08.23',
|
||||
},
|
||||
{
|
||||
idx: '2',
|
||||
title: '오토프로그램 이용안내',
|
||||
contents: '안녕하세요. 운영진입니다',
|
||||
applicationDate: '2022.08.23',
|
||||
},
|
||||
];
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
@ -91,4 +115,14 @@ export class NoticeComposeComponent implements OnInit {
|
|||
* Send the message
|
||||
*/
|
||||
send(): void {}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
__trackByFn(index: number, item: any): any {
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user