공지사항 화면수정
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 { MatDialogModule } from '@angular/material/dialog';
|
||||||
import { MatSelectModule } from '@angular/material/select';
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||||
|
import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
|
|
||||||
import { FuseCardModule } from '@fuse/components/card';
|
import { FuseCardModule } from '@fuse/components/card';
|
||||||
import { SharedModule } from 'app/shared/shared.module';
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
|
|
@ -28,6 +29,7 @@ import { COMPOSE } from './compose';
|
||||||
MatDialogModule,
|
MatDialogModule,
|
||||||
MatSelectModule,
|
MatSelectModule,
|
||||||
MatButtonToggleModule,
|
MatButtonToggleModule,
|
||||||
|
MatExpansionModule,
|
||||||
|
|
||||||
FuseCardModule,
|
FuseCardModule,
|
||||||
SharedModule,
|
SharedModule,
|
||||||
|
|
|
||||||
|
|
@ -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">Notice</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,113 +11,52 @@
|
||||||
></mat-icon>
|
></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 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 -->
|
<ng-container *ngIf="notice">
|
||||||
<mat-form-field>
|
<ng-container *ngIf="notice.length > 0; else noNotice">
|
||||||
<mat-label>To</mat-label>
|
<div class="grid">
|
||||||
<input matInput [formControlName]="'to'" />
|
<mat-accordion>
|
||||||
<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
|
<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">
|
<span>번호</span>
|
||||||
<!-- Attach file -->
|
<span>내용</span>
|
||||||
<button mat-icon-button>
|
<span>날짜</span>
|
||||||
<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>
|
||||||
|
<!-- <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">
|
<ng-template #noNotice>
|
||||||
<!-- Discard -->
|
<div
|
||||||
<button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
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
|
There are no data!
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</ng-template>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'notice-compose',
|
selector: 'notice-compose',
|
||||||
templateUrl: './notice-compose.component.html',
|
templateUrl: './notice-compose.component.html',
|
||||||
|
styles: [
|
||||||
|
/* language=SCSS */
|
||||||
|
`
|
||||||
|
.notice-grid {
|
||||||
|
/* 번호 내용 날짜 */
|
||||||
|
grid-template-columns: 100px 250px 100px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class NoticeComposeComponent implements OnInit {
|
export class NoticeComposeComponent implements OnInit {
|
||||||
|
|
@ -29,6 +38,21 @@ export class NoticeComposeComponent implements OnInit {
|
||||||
private _formBuilder: FormBuilder
|
private _formBuilder: FormBuilder
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
|
notice = [
|
||||||
|
{
|
||||||
|
idx: '1',
|
||||||
|
title: '계좌등록안내',
|
||||||
|
contents: '안녕하세요. 운영진입니다dkfjkjdfkjdkfjfkjdkjkdfjdkjk',
|
||||||
|
applicationDate: '2022.08.23',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
idx: '2',
|
||||||
|
title: '오토프로그램 이용안내',
|
||||||
|
contents: '안녕하세요. 운영진입니다',
|
||||||
|
applicationDate: '2022.08.23',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
// @ Lifecycle hooks
|
// @ Lifecycle hooks
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
@ -91,4 +115,14 @@ export class NoticeComposeComponent implements OnInit {
|
||||||
* Send the message
|
* Send the message
|
||||||
*/
|
*/
|
||||||
send(): void {}
|
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