next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title
      cdkDrag
      cdkDragRootElement=".cdk-overlay-pane"
      cdkDragHandle
      class="card-header"
      >{{ 'search.label' | translate }}</mat-card-title
    >
    <button class="icon-button btn-dialog-close" (click)="onCancel()">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
      <div class="search-area">
        <ucap-integrated-search-form
          [searchWord]="!!currentSearchWord ? currentSearchWord : ''"
          (search)="onSearch($event)"
        >
        </ucap-integrated-search-form>
      </div>
      <div style="position: relative;">
        <div
          *ngIf="searchingProcessing$ | async"
          style="position: absolute; width: 100%; z-index: 101;"
        >
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </div>
      </div>
      <div class="contents-table">
        <div fxFlex="0 0 auto" class="table-box">
          <ucap-organization-detail-table
            [loginRes]="loginRes"
            [presence$]="presenceSubject.asObservable()"
            [departmentUserInfoList]="departmentUserInfoList"
            [profileImageRoot]="profileImageRoot"
            [selectedUserList]="selectedUserList"
            (openProfile)="onClickOpenProfile($event)"
            (toggleAllUser)="onToggleAllUser($event)"
            (toggleUser)="onToggleUser($event)"
            class="detail-table"
          ></ucap-organization-detail-table>
        </div>
        <div class="footer-fix search-result-footer">
          <mat-accordion>
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  {{ 'organization.selectedUser' | translate }}
                  <span *ngIf="selectedUserList.length > 0">
                    ({{ selectedUserList.length }})
                    {{ 'common.units.persons' | translate }}
                  </span>
                </mat-panel-title>
                <mat-panel-description> </mat-panel-description>
              </mat-expansion-panel-header>

              <div class="list-chip">
                <mat-chip-list aria-label="User selection">
                  <mat-chip
                    *ngFor="let userInfo of selectedUserList"
                    (removed)="onClickDeleteUser(userInfo)"
                  >
                    {{ userInfo.name }}
                    <mat-icon matChipRemove>clear</mat-icon>
                  </mat-chip>
                </mat-chip-list>
              </div>
              <div class="btn-box">
                <ul>
                  <li>
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickAddGroup()"
                      class="mat-primary"
                    >
                      {{ 'organization.addToGroup' | translate }}
                    </button>
                  </li>
                  <li>
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickChatOpen()"
                      class="mat-primary"
                    >
                      {{ 'organization.startChat' | translate }}
                    </button>
                  </li>
                  <li *ngIf="!!authInfo && authInfo.canVideoConference">
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickConference()"
                      class="mat-primary"
                    >
                      {{ 'organization.startVideoConference' | translate }}
                    </button>
                  </li>
                </ul>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
        </div>
      </div>
      <div class="footer-fix search-result-footer">
        <ul>
          <li>
            <button mat-flat-button (click)="onCancel()" class="mat-primary">
              검색 초기화 & 닫기
            </button>
          </li>
          <li>
            <button mat-flat-button (click)="onClickHide()" class="mat-primary">
              접어두기
            </button>
          </li>
        </ul>
      </div>
    </div>
  </mat-card-content>
</mat-card>