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

<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>
            </ng-template>
            <div>
              <div>
                <ucap-organization-tenant-search
                  [companyList]="companyList$ | async"
                  [companyCode]="companyCode"
                  (keyDownEnter)="
                    onKeyDownEnterOrganizationTenantSearch($event)
                  "
                  (cancel)="onClickCancel($event)"
                ></ucap-organization-tenant-search>
              </div>
              <div *ngIf="!isShowSearch" class="list-panel">
                <ucap-group-expansion-panel
                  #groupExpansionPanel
                  [groupBuddyList]="groupBuddyList$ | async"
                  [favoritBuddyList]="favoritBuddyList$ | async"
                  [selectedUserList]="selectedUserList"
                  [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"
                    (checkUser)="onCheckUser($event)"
                  >
                  </ucap-profile-user-list-item>
                </ucap-group-expansion-panel>
              </div>
              <div *ngIf="isShowSearch" class="search-result">
                <div *ngIf="searchProcessing">
                  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                </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"
                  (checkUser)="onCheckUser($event)"
                >
                </ucap-profile-user-list-item>
              </div>
            </div>
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              <mat-icon>device_hub</mat-icon>
            </ng-template>
            <div>
              <app-layout-chat-left-sidenav-organization
                [selectedUserList]="selectedUserList"
                [isUserSelect]="true"
                (checkAllUser)="onCheckAllUser($event)"
                (checkUser)="onCheckUser($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>chat</mat-icon>
            </ng-template>
            <div>
              <!-- <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
                <ucap-room-list-item
                  *cdkVirtualFor="let room of roomList"
                  [loginRes]="loginRes"
                  [roomInfo]="room"
                  [roomUserInfo]="getRoomUserList(room)"
                  [sessionVerinfo]="sessionVerinfo"
                  [checkable]="getCheckableRoom(room)"
                  [isChecked]="getCheckedRoom(room)"
                  [multiCheckable]="false"
                  (checkRoom)="onCheckRoom($event)"
                >
                </ucap-room-list-item>
              </cdk-virtual-scroll-viewport> -->
              <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)"
              >
              </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>{{ 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 (click)="onClickChoice(true)" class="mat-primary">
      Yes
    </button>
  </mat-card-actions>
</mat-card>