diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
new file mode 100644
index 00000000..81f92bab
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -0,0 +1,12 @@
+
+
{{ presence.pcStatus }}
+
+
+ {{ userInfo.name }} {{ userInfo.grade }}
+
+
+ {{ userInfo.deptName }}
+
+
{{ userInfo.intro }}
+
+
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.spec.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.spec.ts
new file mode 100644
index 00000000..d9592309
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { UserListItemComponent } from './user-list-item.component';
+
+describe('UserListItemComponent', () => {
+ let component: UserListItemComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ UserListItemComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UserListItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
new file mode 100644
index 00000000..c67c3263
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import {
+ UserInfoSS,
+ UserInfoF,
+ UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+import { StatusBulkInfo, StatusInfo } from '@ucap-webmessenger/protocol-status';
+
+@Component({
+ selector: 'ucap-profile-user-list-item',
+ templateUrl: './user-list-item.component.html',
+ styleUrls: ['./user-list-item.component.scss']
+})
+export class UserListItemComponent implements OnInit {
+ @Input()
+ userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+
+ @Input()
+ profileImageRoot: string;
+
+ @Input()
+ presence?: StatusBulkInfo | StatusInfo;
+
+ @Input()
+ checkable = false;
+ @Input()
+ compactable = false;
+
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts b/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
index 0acc2ac2..383ba76a 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
@@ -7,13 +7,22 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { ListItemComponent } from './components/list-item.component';
+import { UserListItemComponent } from './components/user-list-item.component';
+import { MatRippleModule, MatCheckboxModule } from '@angular/material';
-const COMPONENTS = [ListItemComponent];
+const COMPONENTS = [ListItemComponent, UserListItemComponent];
const SERVICES = [];
@NgModule({
- imports: [CommonModule, FlexLayoutModule, MatButtonModule, MatIconModule],
+ imports: [
+ CommonModule,
+ FlexLayoutModule,
+ MatButtonModule,
+ MatIconModule,
+ MatRippleModule,
+ MatCheckboxModule
+ ],
exports: [...COMPONENTS],
declarations: [...COMPONENTS]
})