기능추가 :: 새로운 대화 개설용 유저 선택 팝업

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -1,4 +1,10 @@
 <div class="container">
+  <div>
+    LG ucap
+    <button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
+      <mat-icon>chat</mat-icon>
+    </button>
+  </div>
   <mat-tab-group mat-stretch-tabs>
     <mat-tab>
       <ng-template mat-tab-label>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -1,5 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
+import { NGXLogger } from 'ngx-logger';
+import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
+import {
+  CreateChatDialogComponent,
+  CreateChatDialogData,
+  CreateChatDialogResult
+} from '../dialogs/create-chat.dialog.component';
 
 @Component({
   selector: 'app-layout-messenger-left-side',
@@ -8,7 +14,31 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
   animations: ucapAnimations
 })
 export class LeftSideComponent implements OnInit {
-  constructor() {}
+  constructor(
+    private dialogService: DialogService,
+    private logger: NGXLogger
+  ) {}
 
   ngOnInit() {}
+
+  async onClickNewChat() {
+    const result = await this.dialogService.open<
+      CreateChatDialogComponent,
+      CreateChatDialogData,
+      CreateChatDialogResult
+    >(CreateChatDialogComponent, {
+      width: '500px',
+      height: '500px',
+      data: {
+        title: 'New Chat'
+      }
+    });
+
+    this.logger.debug(result.choice);
+    // if (result.choice) {
+
+    // } else {
+
+    // }
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -1,9 +1,3 @@
-<ucap-room-list-item
+<ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
-  *ngFor="let room of roomList"
+  [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo" (click)="onSelectedRoom(room)">
-  [loginRes]="loginRes$ | async"
-  [roomInfo]="room"
-  [roomUserInfo]="getRoomUserList(room)"
-  [sessionVerinfo]="sessionVerinfo"
-  (click)="onSelectedRoom(room)"
->
 </ucap-room-list-item>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts

@@ -31,8 +31,9 @@ export class ChatComponent implements OnInit, OnDestroy {
   roomUserList: RoomUserDetailData[];
   roomUserShortList: RoomUserData[];
   sessionVerinfo: VersionInfo2Response;
-  loginRes$: Observable<LoginResponse>;
 
+  loginRes: LoginResponse;
+  loginResSubscription: Subscription;
   roomSubscription: Subscription;
 
   constructor(
@@ -66,9 +67,14 @@ export class ChatComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
-    this.loginRes$ = this.store.pipe(
+    this.loginResSubscription = this.store
-      select(AppStore.AccountSelector.AuthenticationSelector.loginRes)
+      .pipe(
-    );
+        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
+        tap(loginRes => {
+          this.loginRes = loginRes;
+        })
+      )
+      .subscribe();
 
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
       KEY_VER_INFO
@@ -79,6 +85,9 @@ export class ChatComponent implements OnInit, OnDestroy {
     if (!!this.roomSubscription) {
       this.roomSubscription.unsubscribe();
     }
+    if (!!this.loginResSubscription) {
+      this.loginResSubscription.unsubscribe();
+    }
   }
 
   onSelectedRoom(roomInfo: RoomInfo) {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-chat.dialog.component.html

@@ -0,0 +1,55 @@
+<mat-card class="confirm-card">
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+    <mat-card-title>{{ data.title }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
+    <div fxFlex class="container">
+      <mat-tab-group mat-stretch-tabs>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+          </ng-template>
+          <ng-template matTabContent>
+            <ucap-organization-tenant-search [companyList]="companyList$ | async" [companyCode]="companyCode"
+              (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"></ucap-organization-tenant-search>
+            <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
+              [favoritBuddyList]="favoritBuddyList$ | async" [checkable]="true">
+              <ucap-profile-user-list-item *ucapGroupExpansionPanelItem="let userInfo" [userInfo]="userInfo"
+                [sessionVerinfo]="sessionVerinfo" [checkable]="true">
+              </ucap-profile-user-list-item>
+            </ucap-group-expansion-panel>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>device_hub</mat-icon>
+          </ng-template>
+          <ng-template matTabContent>
+            <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>chat</mat-icon>
+          </ng-template>
+          <ng-template matTabContent>
+            <ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
+              [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo">
+            </ucap-room-list-item>
+          </ng-template>
+        </mat-tab>
+      </mat-tab-group>
+    </div>
+    <div fxFlex="100px">
+      choiced users
+    </div>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-chat.dialog.component.spec.ts

@@ -0,0 +1,27 @@
+/* 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 { CreateChatDialogComponent } from './create-chat.dialog.component';
+
+describe('CreateChatDialogComponent', () => {
+  let component: CreateChatDialogComponent;
+  let fixture: ComponentFixture<CreateChatDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateChatDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateChatDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-chat.dialog.component.ts

@@ -0,0 +1,197 @@
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { NGXLogger } from 'ngx-logger';
+import { Observable, combineLatest, Subscription } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { Store, select } from '@ngrx/store';
+import * as AppStore from '@app/store';
+import * as QueryStore from '@app/store/messenger/query';
+
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { Company } from '@ucap-webmessenger/api-external';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import {
+  UserInfo,
+  GroupDetailData,
+  RoomUserDetailData,
+  RoomUserData
+} from '@ucap-webmessenger/protocol-sync';
+import { DeptSearchType } from '@ucap-webmessenger/protocol-query';
+import {
+  RoomInfo,
+  UserInfoShort,
+  UserInfo as RoomUserInfo
+} from '@ucap-webmessenger/protocol-room';
+
+export interface CreateChatDialogData {
+  title: string;
+}
+
+export interface CreateChatDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-create-chat',
+  templateUrl: './create-chat.dialog.component.html',
+  styleUrls: ['./create-chat.dialog.component.scss']
+})
+export class CreateChatDialogComponent implements OnInit, OnDestroy {
+  constructor(
+    public dialogRef: MatDialogRef<
+      CreateChatDialogData,
+      CreateChatDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: CreateChatDialogData,
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService,
+    private logger: NGXLogger
+  ) {}
+
+  loginRes: LoginResponse;
+  loginResSubscription: Subscription;
+  sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+    KEY_VER_INFO
+  );
+
+  companyList$: Observable<Company[]>;
+  companyCode: string;
+  groupBuddyList$: Observable<
+    { group: GroupDetailData; buddyList: UserInfo[] }[]
+  >;
+  favoritBuddyList$: Observable<UserInfo[]>;
+
+  roomList: RoomInfo[];
+  roomUserList: RoomUserDetailData[];
+  roomUserShortList: RoomUserData[];
+  roomSubscription: Subscription;
+
+  ngOnInit() {
+    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
+    this.companyCode = loginInfo.companyCode;
+
+    this.companyList$ = this.store.pipe(
+      select(AppStore.SettingSelector.CompanySelector.companyList)
+    );
+
+    this.loginResSubscription = this.store
+      .pipe(
+        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
+        tap(loginRes => {
+          this.loginRes = loginRes;
+        })
+      )
+      .subscribe();
+
+    this.groupBuddyList$ = combineLatest([
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2)
+      ),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectAllGroup2)
+      )
+    ]).pipe(
+      map(([buddyList, groupList]) => {
+        const groupBuddyList: {
+          group: GroupDetailData;
+          buddyList: UserInfo[];
+        }[] = [];
+        for (const group of groupList) {
+          groupBuddyList.push({
+            group,
+            buddyList: buddyList.filter(buddy => {
+              return group.userSeqs.indexOf(buddy.seq) > -1;
+            })
+          });
+        }
+
+        return groupBuddyList;
+      })
+    );
+
+    this.favoritBuddyList$ = this.store
+      .pipe(select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2))
+      .pipe(
+        map(buddyInfoList => {
+          return buddyInfoList
+            .filter(buddy => buddy.isFavorit)
+            .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+        })
+      );
+
+    this.roomSubscription = combineLatest([
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectAllRoom)
+      ),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectAllRoomUser)
+      ),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectAllRoomUserShort)
+      )
+    ])
+      .pipe(
+        tap(([room, roomUser, roomUserShort]) => {
+          this.roomList = room;
+          this.roomUserList = roomUser;
+          this.roomUserShortList = roomUserShort;
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.roomSubscription) {
+      this.roomSubscription.unsubscribe();
+    }
+    if (!!this.loginResSubscription) {
+      this.loginResSubscription.unsubscribe();
+    }
+  }
+
+  getRoomUserList(roomInfo: RoomInfo): RoomUserInfo[] | UserInfoShort[] {
+    if (!!this.roomUserList && 0 < this.roomUserList.length) {
+      const i = this.roomUserList.findIndex(
+        value => roomInfo.roomSeq === value.roomSeq
+      );
+      if (-1 < i) {
+        return this.roomUserList[i].userInfos;
+      }
+    }
+
+    if (!!this.roomUserShortList && 0 < this.roomUserShortList.length) {
+      const i = this.roomUserShortList.findIndex(
+        value => roomInfo.roomSeq === value.roomSeq
+      );
+      if (-1 < i) {
+        return this.roomUserShortList[i].userInfos;
+      }
+    }
+  }
+
+  onKeyDownEnterOrganizationTenantSearch(params: {
+    companyCode: string;
+    searchWord: string;
+  }) {
+    this.store.dispatch(
+      QueryStore.deptUser({
+        divCd: 'GRP',
+        companyCode: params.companyCode,
+        searchRange: DeptSearchType.All,
+        search: params.searchWord,
+        senderCompanyCode: params.companyCode,
+        senderEmployeeType: this.loginRes.userInfo.employeeType
+      })
+    );
+  }
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts

@@ -1,3 +1,4 @@
 import { CreateGroupDialogComponent } from './create-group.dialog.component';
+import { CreateChatDialogComponent } from './create-chat.dialog.component';
 
-export const DIALOGS = [CreateGroupDialogComponent];
+export const DIALOGS = [CreateGroupDialogComponent, CreateChatDialogComponent];

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -1,18 +1,13 @@
 <mat-accordion #groupAccordion="matAccordion" [multi]="true">
-  <mat-expansion-panel
+  <mat-expansion-panel *ngIf="favoritBuddyList.length > 0 && !checkable" [togglePosition]="'before'">
-    *ngIf="favoritBuddyList.length > 0"
-    [togglePosition]="'before'"
-  >
     <mat-expansion-panel-header>
       <mat-panel-title> 즐겨찾기 </mat-panel-title>
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
     <ng-container *ngFor="let favUserList of favoritBuddyList">
-      <ng-template
+      <ng-template [ngTemplateOutlet]="expansionPanelItemTemplateRef"
-        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
+        [ngTemplateOutletContext]="{ $implicit: favUserList }">
-        [ngTemplateOutletContext]="{ $implicit: favUserList }"
-      >
       </ng-template>
     </ng-container>
 
@@ -24,29 +19,22 @@
     </ucap-profile-user-list-item> -->
   </mat-expansion-panel>
 
-  <mat-expansion-panel
+  <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList" [togglePosition]="'before'">
-    *ngFor="let groupBuddy of groupBuddyList"
-    [togglePosition]="'before'"
-  >
     <mat-expansion-panel-header>
       <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
       <mat-panel-description>
         <span class="more-spacer"></span>
-        <button
+        <button mat-icon-button aria-label="group menu" *ngIf="!checkable"
-          mat-icon-button
+          (click)="onClickMore($event, groupBuddy.group)">
-          aria-label="group menu"
-          (click)="onClickMore($event, groupBuddy.group)"
-        >
           <mat-icon>more_vert</mat-icon>
         </button>
+        <mat-checkbox *ngIf="checkable"></mat-checkbox>
       </mat-panel-description>
     </mat-expansion-panel-header>
 
     <ng-container *ngFor="let userInfo of groupBuddy.buddyList">
-      <ng-template
+      <ng-template [ngTemplateOutlet]="expansionPanelItemTemplateRef"
-        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
+        [ngTemplateOutletContext]="{ $implicit: userInfo }"></ng-template>
-        [ngTemplateOutletContext]="{ $implicit: userInfo }"
-      ></ng-template>
     </ng-container>
 
     <!-- <ucap-profile-user-list-item

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -28,6 +28,9 @@ export class ExpansionPanelComponent implements OnInit {
   @Input()
   favoritBuddyList: UserInfo[];
 
+  @Input()
+  checkable = false;
+
   @Output()
   more = new EventEmitter<{
     event: MouseEvent;

projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts

@@ -10,6 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
 
 import { ExpansionPanelComponent } from './components/expansion-panel.component';
 import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
+import { MatCheckboxModule } from '@angular/material';
 
 const COMPONENTS = [ExpansionPanelComponent];
 const DIALOGS = [];
@@ -23,7 +24,8 @@ const SERVICES = [];
     FlexLayoutModule,
     MatButtonModule,
     MatExpansionModule,
-    MatIconModule
+    MatIconModule,
+    MatCheckboxModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],
   declarations: [...COMPONENTS, ...DIRECTIVES],