bet/beteran-frontend-app-browser
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

공지사항 화면수정

Browse Source
This commit is contained in:
이담 정 2022-09-28 09:35:48 +00:00
parent ff8038b078
commit c8ec647f1b
3 changed files with 91 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/modules/beteran/compose/compose.module.ts
View File

@ -9,6 +9,7 @@ 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 { MatTableModule } from '@angular/material/table';
import { FuseCardModule } from '@fuse/components/card';
import { SharedModule } from 'app/shared/shared.module';
@ -30,6 +31,7 @@ import { COMPOSE } from './compose';
MatSelectModule,
MatButtonToggleModule,
MatExpansionModule,
MatTableModule,
FuseCardModule,
SharedModule,

82
src/app/modules/beteran/compose/compose/notice-compose.component.html
View File

@ -11,44 +11,50 @@
></mat-icon>
</button>
</div>
<form
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
[formGroup]="composeForm"
<mat-table
[dataSource]="dataSource"
multiTemplateDataRows
class="mat-elevation-z8"
>
<!-- <ng-container *ngIf="notice">
<ng-container *ngIf="notice.length > 0; else noNotice">
<div class="grid">
<mat-accordion>
<div
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"
>
<span>번호</span>
<span>내용</span>
<span>날짜</span>
</div>
<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.content }}
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</ng-container>
</ng-container> -->
<ng-container
matColumnDef="{{ column }}"
*ngFor="let column of columnsToDisplay"
>
<mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
</ng-container>
<ng-template #noNotice>
<div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
>
There are no data!
</div>
</ng-template>
</form>
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let element">
<div
[@detailExpand]="
element == expandedElement ? 'expanded' : 'collapsed'
"
>
{{ element.description }}
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row
*matRowDef="let element; columns: columnsToDisplay"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element"
>
</mat-row>
<mat-row
*matRowDef="let row; columns: ['expandedDetail']"
class="example-detail-row"
></mat-row>
</mat-table>
<ng-template #noNotice>
<div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
>
There are no data!
</div>
</ng-template>
</div>

88
src/app/modules/beteran/compose/compose/notice-compose.component.ts
View File

@ -1,18 +1,23 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import {
animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
@Component({
selector: 'notice-compose',
templateUrl: './notice-compose.component.html',
styles: [
/* language=SCSS */
`
.notice-grid {
/* 번호 내용 날짜 */
grid-template-columns: 100px 250px 100px;
}
`,
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*', minHeight: '*' })),
]),
],
encapsulation: ViewEncapsulation.None,
})
@ -29,6 +34,9 @@ export class NoticeComposeComponent implements OnInit {
['clean'],
],
};
dataSource = ELEMENT_DATA;
columnsToDisplay = ['idx', 'content', 'applicationDate'];
expandedElement: PeriodicElement | null | undefined;
/**
* Constructor
@ -38,21 +46,6 @@ 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
// -----------------------------------------------------------------------------------------------------
@ -60,16 +53,7 @@ export class NoticeComposeComponent implements OnInit {
/**
* 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]],
});
}
ngOnInit(): void {}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
@ -115,14 +99,32 @@ 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;
}
}
export interface PeriodicElement {
idx: number;
content: string;
applicationDate: string;
description: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{
idx: 1,
content: '계좌등록안내',
applicationDate: '2022-08-23',
description: `안녕하세요. 운영진입니다.`,
},
{
idx: 2,
content: '오토프로그램 이용 안내',
applicationDate: '2022-08-23',
description: `하단이미지를 참고해주시기바랍니다`,
},
{
idx: 3,
content: '입출금 규정 안내',
applicationDate: '2022-08-23',
description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
},
];