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

<div>
  <div>
    <div class="current-head">
      <h3>그룹</h3>
      <div class="btn-box">
        <button mat-icon-button>
          <mat-icon>person_add</mat-icon>
        </button>
        <button
          mat-icon-button
          #groupMenuTrigger="matMenuTrigger"
          [matMenuTriggerFor]="groupMenu"
          aria-label="group menu"
          (ucapUiClickOutside)="groupMenuTrigger.closeMenu()"
        >
          <mat-icon>more_vert</mat-icon>
        </button>
      </div>
    </div>
    <ucap-organization-tenant-search
      [companyList]="companyList$ | async"
      [companyCode]="companyCode"
      (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
      (cancel)="onClickCancel($event)"
    ></ucap-organization-tenant-search>

    <mat-menu
      #groupMenu="matMenu"
      xPosition="after"
      yPosition="below"
      [hasBackdrop]="false"
    >
      <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
        <mat-icon>group_add</mat-icon>
        <span>새 그룹 추가</span>
      </button>
      <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
        <mat-icon>expand_more</mat-icon>
        <span>그룹 전체 열기</span>
      </button>
      <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
        <mat-icon>expand_less</mat-icon>
        <span>그룹 전체 닫기</span>
      </button>
      <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
        <mat-icon>save</mat-icon>
        <span>그룹 저장하기</span>
      </button>
      <button mat-menu-item (click)="onClickGroupMenu('GROUP_RESTORE')">
        <mat-icon>restore</mat-icon>
        <span>그룹 가져오기</span>
      </button>
    </mat-menu>
  </div>
  <div *ngIf="!isShowSearch">
    <ucap-group-expansion-panel
      #groupExpansionPanel
      [groupBuddyList]="groupBuddyList$ | async"
      [favoritBuddyList]="favoritBuddyList$ | async"
      [myProfileInfo]="loginRes.userInfo"
      (more)="onMoreGroup($event)"
    >
      <ucap-profile-user-list-item
        *ucapGroupExpansionPanelItem="let userInfo"
        [userInfo]="userInfo"
        [presence]="getStatusBulkInfo(userInfo) | async"
        [sessionVerinfo]="sessionVerinfo"
        (click)="onSelectBuddy(userInfo)"
        (contextmenu)="onContextMenuProfile($event, userInfo)"
      >
      </ucap-profile-user-list-item>
    </ucap-group-expansion-panel>
  </div>
  <div *ngIf="isShowSearch">
    <div *ngIf="searchProcessing">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
    <div>검색결과({{ searchUserInfos.length }}명)</div>
    <ucap-profile-user-list-item
      *ngFor="let userInfo of searchUserInfos"
      [userInfo]="userInfo"
      [presence]="getStatusBulkInfo(userInfo) | async"
      [sessionVerinfo]="sessionVerinfo"
      (click)="onSelectBuddy(userInfo)"
    >
    </ucap-profile-user-list-item>
  </div>
</div>

<div
  style="visibility: hidden; position: fixed"
  [style.left]="profileContextMenuPosition.x"
  [style.top]="profileContextMenuPosition.y"
  #profileContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="profileContextMenu"
></div>
<mat-menu
  #profileContextMenu="matMenu"
  [hasBackdrop]="false"
  (ucapUiClickOutside)="profileContextMenuTrigger.closeMenu()"
>
  <ng-template matMenuContent let-userInfo="userInfo">
    <button
      mat-menu-item
      (click)="onClickProfileContextMenu('VIEW_PROFILE', userInfo)"
    >
      프로필 보기
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu(userInfo)"
      (click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)"
    >
      즐겨찾기 {{ userInfo.isFavorit ? '해제' : '등록' }}
    </button>
    <button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">
      대화하기
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu(userInfo)"
      (click)="onClickProfileContextMenu('REMOVE_FROM_GROUP', userInfo)"
    >
      이 그룹에서 삭제
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu(userInfo)"
      (click)="onClickProfileContextMenu('COPY_BUDDY', userInfo)"
    >
      대화 상대 복사
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu(userInfo)"
      (click)="onClickProfileContextMenu('MOVE_BUDDY', userInfo)"
    >
      대화 상대 이동
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu(userInfo)"
      (click)="onClickProfileContextMenu('SEND_NOTE', userInfo)"
    >
      쪽지 보내기
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu(userInfo)"
      (click)="onClickProfileContextMenu('REGISTER_NICKNAME', userInfo)"
    >
      닉네임 설정
    </button>
  </ng-template>
</mat-menu>

<div
  style="visibility: hidden; position: fixed"
  [style.left]="groupContextMenuPosition.x"
  [style.top]="groupContextMenuPosition.y"
  #groupContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="groupContextMenu"
></div>
<mat-menu
  #groupContextMenu="matMenu"
  [hasBackdrop]="false"
  (ucapUiClickOutside)="groupContextMenuTrigger.closeMenu()"
>
  <ng-template matMenuContent let-group="group">
    <button mat-menu-item (click)="onClickGroupContextMenu('CHAT', group)">
      그룹 대화하기
    </button>
    <button mat-menu-item (click)="onClickGroupContextMenu('SEND_NOTE', group)">
      그룹 쪽지 보내기
    </button>
    <button mat-menu-item (click)="onClickGroupContextMenu('RENAME', group)">
      그룹 이름 바꾸기
    </button>
    <mat-divider></mat-divider>
    <button
      mat-menu-item
      (click)="onClickGroupContextMenu('EDIT_MEMBER', group)"
    >
      그룹 멤버 변경
    </button>
    <button mat-menu-item (click)="onClickGroupContextMenu('DELETE', group)">
      그룹 삭제
    </button>
  </ng-template>
</mat-menu>