list item of message is added
This commit is contained in:
parent
0a419bcc15
commit
398fc77e19
|
|
@ -50,108 +50,36 @@
|
|||
수신
|
||||
</ng-template>
|
||||
|
||||
<div
|
||||
<ucap-message-list-item
|
||||
*ngFor="let message of messageList"
|
||||
[message]="message"
|
||||
(click)="onClickDetail(message)"
|
||||
class="message-item"
|
||||
>
|
||||
<dl>
|
||||
<dt>
|
||||
<mat-icon
|
||||
*ngIf="
|
||||
!!message.resType && message.resType === ContentType.Image
|
||||
"
|
||||
>image</mat-icon
|
||||
>
|
||||
<mat-icon
|
||||
*ngIf="
|
||||
!!message.resType &&
|
||||
message.resType === ContentType.AttachFile
|
||||
"
|
||||
>attach_file</mat-icon
|
||||
>
|
||||
<ul>
|
||||
<li>{{ message.userName }}</li>
|
||||
<li>{{ message.title }}</li>
|
||||
</ul>
|
||||
</dt>
|
||||
<dd>
|
||||
{{ message.regDate | dateToStringFormat: 'MM:DD' }}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
></ucap-message-list-item>
|
||||
</mat-tab>
|
||||
<mat-tab [label]="MessageType.Send">
|
||||
<ng-template mat-tab-label>
|
||||
발신
|
||||
</ng-template>
|
||||
|
||||
<div
|
||||
<ucap-message-list-item
|
||||
*ngFor="let message of messageList"
|
||||
[message]="message"
|
||||
(click)="onClickDetail(message)"
|
||||
class="message-item"
|
||||
>
|
||||
<dl>
|
||||
<dt>
|
||||
<mat-icon
|
||||
*ngIf="
|
||||
!!message.resType && message.resType === ContentType.Image
|
||||
"
|
||||
>image</mat-icon
|
||||
>
|
||||
<mat-icon
|
||||
*ngIf="
|
||||
!!message.resType &&
|
||||
message.resType === ContentType.AttachFile
|
||||
"
|
||||
>attach_file</mat-icon
|
||||
>
|
||||
<ul>
|
||||
<li>{{ message.userName }}</li>
|
||||
<li>{{ message.title }}</li>
|
||||
</ul>
|
||||
</dt>
|
||||
<dd>
|
||||
{{ message.regDate | dateToStringFormat: 'MM:DD' }}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
></ucap-message-list-item>
|
||||
</mat-tab>
|
||||
<mat-tab [label]="MessageType.Reservation">
|
||||
<ng-template mat-tab-label>
|
||||
예약
|
||||
</ng-template>
|
||||
|
||||
<div
|
||||
<ucap-message-list-item
|
||||
*ngFor="let message of messageList"
|
||||
[message]="message"
|
||||
(click)="onClickDetail(message)"
|
||||
class="message-item"
|
||||
>
|
||||
<dl>
|
||||
<dt>
|
||||
<mat-icon
|
||||
*ngIf="
|
||||
!!message.resType && message.resType === ContentType.Image
|
||||
"
|
||||
>image</mat-icon
|
||||
>
|
||||
<mat-icon
|
||||
*ngIf="
|
||||
!!message.resType &&
|
||||
message.resType === ContentType.AttachFile
|
||||
"
|
||||
>attach_file</mat-icon
|
||||
>
|
||||
<ul>
|
||||
<li>{{ message.userName }}</li>
|
||||
<li>{{ message.title }}</li>
|
||||
</ul>
|
||||
</dt>
|
||||
<dd>
|
||||
{{ message.regDate | dateToStringFormat: 'MM:DD' }}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
></ucap-message-list-item>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple> 클래스에 checkbox만 추가-->
|
||||
<div class="list-item" *ngIf="message" matRipple>
|
||||
<dl class="item-default">
|
||||
<dt>
|
||||
<mat-icon
|
||||
*ngIf="!!message.resType && message.resType === ContentType.Image"
|
||||
>image</mat-icon
|
||||
>
|
||||
<mat-icon
|
||||
*ngIf="!!message.resType && message.resType === ContentType.AttachFile"
|
||||
>attach_file</mat-icon
|
||||
>
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
<span class="name">
|
||||
<b>{{ message.userName }}</b>
|
||||
{{ message.title }}
|
||||
</span>
|
||||
<span class="dept">
|
||||
{{ message.regDate | dateToStringFormat: 'MM:DD' }}
|
||||
</span>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ListItemComponent } from './list-item.component';
|
||||
|
||||
describe('Message::ListItemComponent', () => {
|
||||
let component: ListItemComponent;
|
||||
let fixture: ComponentFixture<ListItemComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ListItemComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ListItemComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ViewChild,
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
OnDestroy,
|
||||
ElementRef,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
|
||||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
import {
|
||||
ContentType,
|
||||
MessageList,
|
||||
MessageType
|
||||
} from '@ucap-webmessenger/api-message';
|
||||
|
||||
@Component({
|
||||
selector: 'ucap-message-list-item',
|
||||
templateUrl: './list-item.component.html',
|
||||
styleUrls: ['./list-item.component.scss'],
|
||||
animations: ucapAnimations
|
||||
})
|
||||
export class ListItemComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
@Input()
|
||||
message: MessageList;
|
||||
|
||||
ContentType = ContentType;
|
||||
MessageType = MessageType;
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logger: NGXLogger
|
||||
) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
ngAfterViewInit(): void {}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
|
|||
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
|
||||
import { MatRippleModule } from '@angular/material';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
|
|
@ -21,9 +22,12 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
|||
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import { UCapUiModule } from '@ucap-webmessenger/ui';
|
||||
|
||||
import { ListItemComponent } from './components/list-item.component';
|
||||
import { WriteComponent } from './components/write.component';
|
||||
|
||||
const COMPONENTS = [WriteComponent];
|
||||
const COMPONENTS = [ListItemComponent, WriteComponent];
|
||||
const DIALOGS = [];
|
||||
const DIRECTIVES = [];
|
||||
const SERVICES = [];
|
||||
|
|
@ -36,6 +40,7 @@ const SERVICES = [];
|
|||
|
||||
ScrollingModule,
|
||||
|
||||
MatRippleModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatChipsModule,
|
||||
|
|
@ -48,7 +53,9 @@ const SERVICES = [];
|
|||
MatListModule,
|
||||
MatMomentDateModule,
|
||||
|
||||
PerfectScrollbarModule
|
||||
PerfectScrollbarModule,
|
||||
|
||||
UCapUiModule
|
||||
],
|
||||
exports: [...COMPONENTS, ...DIRECTIVES],
|
||||
declarations: [...COMPONENTS, ...DIRECTIVES, ...DIALOGS],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user