<mat-card class="confirm-card mat-elevation-z"> <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle> <mat-card-title>{{ data.title }}</mat-card-title> </mat-card-header> <mat-card-content> <div *ngIf="data.type === UserSelectDialogType.NewGroup"> <form name="inputForm" [formGroup]="inputForm" novalidate> <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다." style="display:block;margin-bottom:10px;" > <input matInput #input maxlength="20" placeholder="그룹이름" formControlName="groupName" /> <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint> </mat-form-field> </form> </div> <div fxLayout="column" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0" > <div fxFlex class="container"> <mat-tab-group mat-stretch-tabs (selectedTabChange)="onSelectedTabChange($event)" > <mat-tab> <ng-template mat-tab-label> <!--<mat-icon>group</mat-icon>--> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" matTooltip="그룹" matTooltipPosition="after" > <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </ng-template> <div class="mat-tab-frame"> <div> <ucap-organization-tenant-search [companyList]="companyList$ | async" [companyCode]="companyCode" (keyDownEnter)=" onKeyDownEnterOrganizationTenantSearch($event) " (cancel)="onClickCancel()" ></ucap-organization-tenant-search> </div> <div [style.display]="isShowSearch ? 'none' : 'block'" class="list-panel" > <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async" [selectedUserList]="selectedUserList" [ignoreUserList]="data.curRoomUser" [checkable]="true" (checkGroup)="onCheckGroup($event)" class="group-expansion" > <ucap-profile-user-list-item *ucapGroupExpansionPanelItem="let userInfo" [userInfo]="userInfo" [sessionVerinfo]="sessionVerinfo" [selectedUserList]="selectedUserList" [isChecked]="getCheckedUser(userInfo)" [checkable]="true" [checkDisabled]="!getCheckableUser(userInfo)" (checkUser)="onCheckUser($event)" (click)="onToggleUser(userInfo)" class="list-item-frame" > </ucap-profile-user-list-item> </ucap-group-expansion-panel> </div> <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result" > <div style="position: relative;"> <div *ngIf="searchProcessing" style="position: absolute; width: 100%;" > <mat-progress-bar mode="indeterminate"></mat-progress-bar> </div> </div> <div class="result-num"> 검색결과 <span class="text-accent-color" >({{ searchUserInfos.length }}명)</span > </div> <ucap-profile-user-list-item *ngFor="let userInfo of searchUserInfos" [userInfo]="userInfo" [sessionVerinfo]="sessionVerinfo" [selectedUserList]="selectedUserList" [isChecked]="getCheckedUser(userInfo)" [checkable]="true" [checkDisabled]="!getCheckableUser(userInfo)" (checkUser)="onCheckUser($event)" (click)="onToggleUser(userInfo)" > </ucap-profile-user-list-item> </div> </div> </mat-tab> <mat-tab> <ng-template mat-tab-label> <mat-icon matTooltip="조직도" matTooltipPosition="after" >device_hub</mat-icon > </ng-template> <div> <app-layout-chat-left-sidenav-organization [showTitle]="false" [selectedUserList]="selectedUserList" [ignoreUserList]="data.curRoomUser" [isUserSelect]="true" [isVisible]="currentTabIndex === 1" (checkAllUser)="onCheckAllUser($event)" (checkUser)="onCheckUser($event)" (toggleUser)="onToggleUser($event)" class="dialog-org" > </app-layout-chat-left-sidenav-organization> </div> </mat-tab> <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward"> <ng-template mat-tab-label> <mat-icon matTooltip="대화방" matTooltipPosition="before" >chat</mat-icon > </ng-template> <div> <ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room" [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo" [checkable]="getCheckableRoom(room)" [isChecked]="getCheckedRoom(room)" [multiCheckable]="false" (checkRoom)="onCheckRoom($event)" (click)="onToggleRoom(room)" > </ucap-room-list-item> </div> </mat-tab> </mat-tab-group> </div> <div *ngIf="isShowSelectedUserList" class="list-chip"> <mat-chip-list aria-label="User selection"> <mat-chip *ngFor="let userInfo of selectedUserList" [selected]="getChipsRemoveYn(userInfo)" (removed)="onClickDeleteUser(userInfo)" > {{ userInfo.name }} <mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)" >clear</mat-icon > </mat-chip> </mat-chip-list> </div> <span *ngIf="isShowSelectedUserList" >{{ selectedUserList.length }}명</span > </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 [disabled]="getBtnValid()" (click)="onClickChoice(true)" class="mat-primary" > Yes </button> </mat-card-actions> </mat-card>