add chat room UI,

modify ucap-profile-user-list-item, add group-expension-panel in ucap-profile-user-list-item.
2019-10-10 15:50:50 +09:00 · 2019-10-10 15:50:50 +09:00 · c098e88cc9
commit c098e88cc9
parent d6f32316ee
34 changed files with 453 additions and 111 deletions
--- a/angular.json
+++ b/angular.json
@ -436,6 +436,44 @@
        }
      }
    },
+    "ucap-webmessenger-ui-room": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-room",
+      "sourceRoot": "projects/ucap-webmessenger-ui-room/src",
+      "prefix": "ucap-room",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-room/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-room/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-room/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-room/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-room/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-room/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-room/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
    "ucap-webmessenger-ui-messenger": {
      "projectType": "library",
      "schematics": {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@ -1,5 +1,3 @@
-<div *ngFor="let room of roomList" (click)="onSelectedRoom(room)">
-  <div class="room-name">{{ getRoomName(room) }}</div>
-  <div>{{ room.finalEventDate }}</div>
-  <div>{{ room.finalEventMessage }}</div>
-</div>
+<ucap-room-list-item *ngFor="let room of roomList" [roomInfo]="room" [roomUserInfo]="getRoomUserList(room)"
+  (click)="onSelectedRoom(room)">
+</ucap-room-list-item>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
@ -53,43 +53,18 @@ export class ChatComponent implements OnInit, OnDestroy {
    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
  }

-  getRoomName(roomInfo: RoomInfo): string {
-    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
-      return roomInfo.roomName;
-    }
-
+  getRoomUserList(roomInfo: RoomInfo): RoomUserInfo[] | UserInfoShort[] {
    if (
      !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoList &&
      0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.length
    ) {
-      let roomName = '';
-      this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.forEach(
-        (roomUserInfo, index) => {
-          if (0 === index) {
-            roomName = roomName.concat('', roomUserInfo.name);
-          } else {
-            roomName = roomName.concat(',', roomUserInfo.name);
+      return this.roomUserInfoMap[roomInfo.roomSeq].userInfoList;
    }
-        }
-      );
-      return roomName;
-    }
-
    if (
      !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList &&
      0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.length
    ) {
-      let roomName = '';
-      this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.forEach(
-        (roomUserInfo, index) => {
-          if (0 === index) {
-            roomName = roomName.concat('', roomUserInfo.name);
-          } else {
-            roomName = roomName.concat(',', roomUserInfo.name);
-          }
-        }
-      );
-      return roomName;
+      return this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList;
    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@ -16,6 +16,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';

 import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
+import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
+
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';

@ -37,6 +39,7 @@ import { DIALOGS } from './dialogs';
    MatToolbarModule,
    UCapUiModule,
    UCapUiChatModule,
+    UCapUiRoomModule,
    UCapUiGroupModule,
    UCapUiOrganizationModule
  ],
--- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
@ -1,32 +1,15 @@
-<div fxLayout="column">
-  <button
-    mat-raised-button
-    color="accent"
-    class="submit-button"
-    aria-label="Login"
-    (click)="onClickLogin()"
-  >
+<div class="template" fxLayout="column">
+  <button mat-raised-button color="accent" class="submit-button" aria-label="Login" (click)="onClickLogin()">
    Login
  </button>

  <h3>User-list-item</h3>
  <div>
-    <ucap-profile-user-list-item
-      [userInfo]="userInfo"
-      [profileImageRoot]="profileImageRoot"
-      [presence]="presence"
-    >
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]="presence">
    </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item
-      [userInfo]="userInfo"
-      [profileImageRoot]="profileImageRoot"
-    >
+    <ucap-profile-user-list-item [userInfo]="userInfo">
    </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item
-      [userInfo]="userInfo"
-      [profileImageRoot]="profileImageRoot"
-      [checkable]="true"
-    >
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]="true">
    </ucap-profile-user-list-item>
  </div>
  <h3>Organization</h3>
@ -36,13 +19,16 @@
        Tenant Search
      </div>
      <div>
-        <ucap-organization-tenant-search
-          [companyList]="companyList"
-          [companyCode]="companyCode"
-        ></ucap-organization-tenant-search>
+        <ucap-organization-tenant-search [companyList]="companyList" [companyCode]="companyCode">
+        </ucap-organization-tenant-search>
      </div>
    </div>
  </div>
+  <h3>Chat</h3>
+  <div>
+    <ucap-room-list-item [roomInfo]="roomInfo">
+    </ucap-room-list-item>
+  </div>
  <h3>Chat::MessageBox</h3>
  <div>
    <div>
--- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.scss
@ -0,0 +1,4 @@
+div.template {
+  height: 100%;
+  overflow-y: auto;
+}
--- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.ts
@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
-import { EmployeeType } from '@ucap-webmessenger/protocol-room';
+import {
+  EmployeeType,
+  RoomInfo,
+  RoomType
+} from '@ucap-webmessenger/protocol-room';
 import { RoleCode } from '@ucap-webmessenger/protocol-authentication';
 import {
  StatusBulkInfo,
@ -10,6 +14,7 @@ import {
 import { StatusCode } from '@ucap-webmessenger/core';
 import { Router } from '@angular/router';
 import { Company } from '@ucap-webmessenger/api-external';
+import { EventType } from '@ucap-webmessenger/protocol-event';

@Component({
  selector: 'app-template.page',
@ -17,7 +22,7 @@ import { Company } from '@ucap-webmessenger/api-external';
  styleUrls: ['./template.page.component.scss']
 })
 export class TemplatePageComponent implements OnInit {
-  profileImageRoot: string = 'http://27.122.224.170:8011/ProfileImage';
+  profileImageRoot = 'http://27.122.224.170:8011/ProfileImage';

  userInfo: UserInfo = buddyData;

@ -27,6 +32,8 @@ export class TemplatePageComponent implements OnInit {

  companyCode: string = 'GUC006';

+  roomInfo: RoomInfo = roomInfo;
+
  constructor(private router: Router) {}

  ngOnInit() {}
@ -90,6 +97,22 @@ export const buddyData: UserInfo = {
  nickName: '채책임(닉)'
 };

+const roomInfo: RoomInfo = {
+  roomSeq: '2530',
+  roomType: RoomType.Single,
+  roomName: ' ',
+  finalEventType: EventType.Character,
+  finalEventMessage: '비밀 대화방입니다',
+  finalEventDate: '2019-09-30 13:57:06',
+  joinUserCount: 2,
+  noReadCnt: 0,
+  isAlarm: true,
+  isJoinRoom: true,
+  expiredFileStdSeq: 0,
+  isTimeRoom: true,
+  timeRoomInterval: 5
+};
+
 const companyList: Company[] = [
  {
    companyCode: 'GUC002',
--- a/projects/ucap-webmessenger-app/src/app/pages/template/template.page.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/template.page.module.ts
@ -6,6 +6,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';

 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
+import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
@ -21,6 +22,7 @@ import { COMPONENTS, MET_MODULES } from './components';
    FlexLayoutModule,
    MatButtonModule,
    UCapUiChatModule,
+    UCapUiRoomModule,
    UCapUiGroupModule,
    UCapUiOrganizationModule,
    UCapUiProfileModule,
--- a/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_30.png
+++ b/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_30.png
--- a/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_36.png
+++ b/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_36.png
--- a/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_50.png
+++ b/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_50.png
--- a/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_70.png
+++ b/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_70.png
--- a/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_88.png
+++ b/projects/ucap-webmessenger-app/src/assets/images/img_nophoto_88.png
--- a/projects/ucap-webmessenger-protocol-sync/src/lib/protocols/room.ts
+++ b/projects/ucap-webmessenger-protocol-sync/src/lib/protocols/room.ts
@ -88,7 +88,7 @@ export const decodeRoomData: ProtocolDecoder<RoomData> = (
        isJoinRoom: info[9] === 'Y' ? true : false,
        expiredFileStdSeq: Number(info[10]),
        isTimeRoom: info[11] === 'Y' ? true : false,
-        timeRoomInterval: info[11] !== 'Y' ? 0 : info[12] || 0
+        timeRoomInterval: info[11] !== 'Y' ? 0 : Number(info[12]) || 0
      });
    }
  }
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@ -1,44 +1,22 @@
 <mat-accordion #groupAccordion="matAccordion" [multi]="true">
+  <mat-expansion-panel *ngIf="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title> 즐겨찾기 </mat-panel-title>
+      <mat-panel-description> </mat-panel-description>
+    </mat-expansion-panel-header>
+  </mat-expansion-panel>
+
  <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
    <mat-expansion-panel-header>
      <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
      <mat-panel-description> </mat-panel-description>
    </mat-expansion-panel-header>

-    <button
-      mat-button
-      class="contact"
-      *ngFor="let buddy of groupBuddy.buddyList"
-      (click)="onClickBuddy(buddy)"
-      [@animate]="{ value: '*', params: { y: '100%' } }"
-    >
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <div
-          class="avatar-wrapper"
-          fxFlex="0 1 auto"
-          fxLayoutAlign="center center"
-        >
-          <img class="avatar" />
-        </div>
-
-        <div fxLayout="row" fxFlex>
-          <div
-            class="pr-4"
-            fxFlex
-            fxLayout="column"
-            fxLayoutAlign="center start"
-          >
-            <div class="contact-name">{{ buddy.name }}</div>
-            <div class="contact-last-message">{{ buddy.name }}</div>
-          </div>
-
-          <div fxLayout="column" fxLayoutAlign="start end">
-            <div class="contact-last-message-time">
-              {{ buddy.name }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
+    <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
+      (click)="onClickBuddy(userInfo)">
+    </ucap-profile-user-list-item>
+    <!-- <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
+      [presence]="presence">
+    </ucap-profile-user-list-item> -->
  </mat-expansion-panel>
 </mat-accordion>
--- a/projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts
+++ b/projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts
@ -8,6 +8,7 @@ import { MatExpansionModule } from '@angular/material/expansion';

 import { ExpansionPanelComponent } from './components/expansion-panel.component';
 import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
+import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';

 const COMPONENTS = [ExpansionPanelComponent];
 const DIRECTIVES = [ExpansionPanelItemDirective];
@ -16,6 +17,7 @@ const SERVICES = [];
@NgModule({
  imports: [
    CommonModule,
+    UCapUiProfileModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    MatExpansionModule
--- 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
@ -4,10 +4,8 @@
  <span class="presence pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
  <dl class="item-default">
    <dt>
-      <img
-        class="thumbnail"
-        src="{{ profileImageRoot + userInfo.profileImageFile }}"
-      />
+      <img class="thumbnail" [src]="profileImageRoot + userInfo.profileImageFile"
+        onerror="this.src='assets/images/img_nophoto_50.png'" />
    </dt>
    <dd class="info">
      <div class="detail">
@ -17,11 +15,10 @@
        </span>
        <span class="dept">
          {{ userInfo.deptName }}
-          가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
        </span>
      </div>
      <div class="msg-status">
-        {{ userInfo.intro }}상태메시지 상태메시지 상태메시지
+        {{ userInfo.intro }}
      </div>
    </dd>
  </dl>
--- 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
@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
  UserInfoSS,
@ -6,28 +6,47 @@ import {
  UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
 import { StatusBulkInfo, StatusInfo } from '@ucap-webmessenger/protocol-status';
+import { Store, select } from '@ngrx/store';
+import * as AppStore from '@app/store';
+import { Subscription } from 'rxjs';
+import { NGXLogger } from 'ngx-logger';
+import { tap } from 'rxjs/operators';

@Component({
  selector: 'ucap-profile-user-list-item',
  templateUrl: './user-list-item.component.html',
  styleUrls: ['./user-list-item.component.scss']
 })
-export class UserListItemComponent implements OnInit {
+export class UserListItemComponent implements OnInit, OnDestroy {
  @Input()
  userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
-
  @Input()
-  profileImageRoot: string;
-
+  profileImageRoot?: string;
  @Input()
  presence?: StatusBulkInfo | StatusInfo;
-
  @Input()
  checkable = false;
  @Input()
  compactable = false;

-  constructor() {}
+  private profileImageRootSubscription: Subscription;

-  ngOnInit() {}
+  constructor(private store: Store<any>, private logger: NGXLogger) {}
+
+  ngOnInit() {
+    this.profileImageRootSubscription = this.store
+      .pipe(
+        select(AppStore.SettingSelector.VersionInfoSelector.profileImageRoot),
+        tap(profileImageRoot => {
+          this.profileImageRoot = this.profileImageRoot || profileImageRoot;
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.profileImageRootSubscription) {
+      this.profileImageRootSubscription.unsubscribe();
+    }
+  }
 }
--- a/projects/ucap-webmessenger-ui-profile/src/public-api.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/public-api.ts
@ -3,5 +3,6 @@
 */

 export * from './lib/components/list-item.component';
+export * from './lib/components/user-list-item.component';

 export * from './lib/ucap-ui-profile.module';
--- a/projects/ucap-webmessenger-ui-room/README.md
+++ b/projects/ucap-webmessenger-ui-room/README.md
@ -0,0 +1,24 @@
+# UcapWebmessengerUiChat
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.5.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui-room` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui-room`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui-room` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui-room` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-ui-room`, go to the dist folder `cd dist/ucap-webmessenger-ui-room` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui-room` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/projects/ucap-webmessenger-ui-room/karma.conf.js
+++ b/projects/ucap-webmessenger-ui-room/karma.conf.js
@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-ui-room'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/ucap-webmessenger-ui-room/ng-package.json
+++ b/projects/ucap-webmessenger-ui-room/ng-package.json
@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui-room",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
--- a/projects/ucap-webmessenger-ui-room/package.json
+++ b/projects/ucap-webmessenger-ui-room/package.json
@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui-room",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.5",
+    "@angular/core": "^8.2.5"
+  }
+}
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@ -0,0 +1,5 @@
+<div>
+  <div class="room-name">{{ getRoomName(roomInfo) }}</div>
+  <div>{{ roomInfo.finalEventDate }}</div>
+  <div>{{ roomInfo.finalEventMessage }}</div>
+</div>
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@ -0,0 +1,46 @@
+.profile {
+  white-space: normal;
+  text-align: left;
+  letter-spacing: 0.01em;
+  min-height: 88px;
+  border-bottom: 1px solid;
+  padding: 16px;
+  font-weight: 400;
+  border-radius: 0;
+
+  .avatar-wrapper {
+    .avatar {
+      margin-right: 16px;
+    }
+  }
+
+  .profile-name {
+    font-size: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .profile-last-message {
+    line-height: normal;
+    margin-top: 0;
+  }
+
+  .profile-last-message-time {
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .profile-mood {
+    line-height: normal;
+    margin: 0;
+  }
+
+  .unread-message-count {
+    font-size: 12px;
+    border-radius: 50%;
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.spec.ts
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListItemComponent } from './list-item.component';
+
+describe('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();
+  });
+});
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
@ -0,0 +1,44 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  RoomInfo,
+  UserInfoShort,
+  UserInfo as RoomUserInfo
+} from '@ucap-webmessenger/protocol-room';
+import { NGXLogger } from 'ngx-logger';
+
+@Component({
+  selector: 'ucap-room-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.scss']
+})
+export class ListItemComponent implements OnInit {
+  @Input()
+  roomInfo: RoomInfo;
+
+  @Input()
+  roomUserInfo: RoomUserInfo[] | UserInfoShort[];
+
+  constructor(private logger: NGXLogger) {}
+
+  ngOnInit() {
+    // this.logger.debug(this.roomInfo);
+  }
+
+  getRoomName(roomInfo: RoomInfo): string {
+    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
+      return roomInfo.roomName;
+    }
+
+    if (!!this.roomUserInfo && 0 < this.roomUserInfo.length) {
+      let roomName = '';
+      this.roomUserInfo.forEach((roomUserInfo, index) => {
+        if (0 === index) {
+          roomName = roomName.concat('', roomUserInfo.name);
+        } else {
+          roomName = roomName.concat(',', roomUserInfo.name);
+        }
+      });
+      return roomName;
+    }
+  }
+}
--- a/projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts
+++ b/projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts
@ -0,0 +1,35 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { ListItemComponent } from './components/list-item.component';
+
+const COMPONENTS = [ListItemComponent];
+const SERVICES = [];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule
+  ],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UCapUiRoomModule {
+  public static forRoot(): ModuleWithProviders<UCapUiRoomModule> {
+    return {
+      ngModule: UCapUiRoomModule,
+      providers: [...SERVICES]
+    };
+  }
+}
--- a/projects/ucap-webmessenger-ui-room/src/public-api.ts
+++ b/projects/ucap-webmessenger-ui-room/src/public-api.ts
@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui-room
+ */
+
+export * from './lib/components/list-item.component';
+
+export * from './lib/ucap-ui-room.module';
--- a/projects/ucap-webmessenger-ui-room/src/test.ts
+++ b/projects/ucap-webmessenger-ui-room/src/test.ts
@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- a/projects/ucap-webmessenger-ui-room/tsconfig.lib.json
+++ b/projects/ucap-webmessenger-ui-room/tsconfig.lib.json
@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
--- a/projects/ucap-webmessenger-ui-room/tsconfig.spec.json
+++ b/projects/ucap-webmessenger-ui-room/tsconfig.spec.json
@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
--- a/projects/ucap-webmessenger-ui-room/tslint.json
+++ b/projects/ucap-webmessenger-ui-room/tslint.json
@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapChat",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-room",
+      "kebab-case"
+    ]
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -39,6 +39,9 @@
      "@ucap-webmessenger/ui-chat": [
        "projects/ucap-webmessenger-ui-chat/src/public-api"
      ],
+      "@ucap-webmessenger/ui-room": [
+        "projects/ucap-webmessenger-ui-room/src/public-api"
+      ],
      "@ucap-webmessenger/ui-group": [
        "projects/ucap-webmessenger-ui-group/src/public-api"
      ],