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 dialog-creat-chat">
  <mat-card-header>
    <mat-card-title
      cdkDrag
      cdkDragRootElement=".cdk-overlay-pane"
      cdkDragHandle
      >{{ data.title }}</mat-card-title
    >
    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <div *ngIf="data.type === UserSelectDialogType.NewGroup">
      <form name="inputForm" [formGroup]="inputForm" novalidate>
        <mat-form-field
          hintLabel="{{
            'common.useOnlyForSpecialCharacter'
              | translate: { specialCharacter: '-,_' }
          }}"
          style="display:block;margin-bottom:10px;"
        >
          <input
            matInput
            #input
            maxlength="20"
            placeholder="{{ 'group.name' | translate }}"
            formControlName="groupName"
            (keyup)="onKeyupGroupName()"
          />
          <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
          <mat-error
            *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"
          >
            {{
              'group.errors.bannedWords'
                | translate: { bannedWords: bannedWords.join(',') }
            }}
          </mat-error>
        </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="{{ 'group.label' | translate }}"
                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>-->
              <button class="icon-button">
                <i class="mid mid-24 mdi-account-multiple"></i>
              </button>
            </ng-template>
            <div fxFlexFill>
              <div class="mat-tab-frame dialog-tab-grouplist">
                <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="group"
                >
                  <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"
                      [showPresence]="false"
                      [sessionVerinfo]="sessionVerinfo"
                      [selectedUserList]="selectedUserList"
                      [isChecked]="getCheckedUser(userInfo)"
                      [checkable]="true"
                      [checkDisabled]="!getCheckableUser(userInfo)"
                      (checkUser)="onCheckUser($event)"
                      (click)="onToggleUser(userInfo)"
                      class="group-list-item"
                    >
                    </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">
                    {{ 'common.searchResult' | translate }}
                    <span class="text-accent-color">
                      ({{ searchUserInfos.length
                      }}{{ 'common.units.persons' | translate }})
                    </span>
                  </div>
                  <ucap-profile-user-list-item
                    *ngFor="let userInfo of searchUserInfos"
                    [userInfo]="userInfo"
                    [showPresence]="false"
                    [sessionVerinfo]="sessionVerinfo"
                    [selectedUserList]="selectedUserList"
                    [isChecked]="getCheckedUser(userInfo)"
                    [checkable]="userInfo.seq !== loginRes.userSeq"
                    [checkDisabled]="!getCheckableUser(userInfo)"
                    (checkUser)="onCheckUser($event)"
                    (click)="onToggleUser(userInfo)"
                  >
                  </ucap-profile-user-list-item>
                </div>
              </div>
              <ng-template
                [ngTemplateOutlet]="selectedUserListTemplate"
              ></ng-template>
            </div>
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              <button class="icon-button">
                <i class="mid mid-24 mdi-file-tree"></i>
              </button>
            </ng-template>
            <div fxFlexFill>
              <div class="mat-tab-frame dialog-tab-orglist">
                <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="oraganization"
                >
                </app-layout-chat-left-sidenav-organization>
              </div>
              <ng-template
                [ngTemplateOutlet]="selectedUserListTemplate"
              ></ng-template>
            </div>
          </mat-tab>
          <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
            <ng-template mat-tab-label>
              <mat-icon
                matTooltip="{{ 'chat.room' | translate }}"
                matTooltipPosition="before"
                class="icon-button"
                ><i class="mid mid-24 mdi-chat"></i>
              </mat-icon>
            </ng-template>
            <div fxFlexFill style="max-height: 508px;">
              <div class="mat-tab-frame dialog-tab-chatlist">
                <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)"
                  class="chat"
                >
                </ucap-room-list-item>
              </div>
            </div>
          </mat-tab>
        </mat-tab-group>
      </div>
    </div>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.no' | translate }}
    </button>
    <button
      mat-flat-button
      [disabled]="getBtnValid()"
      (click)="onClickChoice(true)"
      class="mat-primary"
    >
      {{ 'common.messages.yes' | translate }}
    </button>
  </mat-card-actions>
</mat-card>

<ng-template #selectedUserListTemplate>
  <div 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 }}
    {{ 'common.units.persons' | translate }}
  </span>
</ng-template>