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

<div>
  <div class="current-head">
    <h3>{{ 'group.label' | translate }}</h3>
    <div class="btn-box">
      <button
        mat-icon-button
        #groupMenuTrigger="matMenuTrigger"
        [matMenuTriggerFor]="groupMenu"
        aria-label="group menu"
        (ucapClickOutside)="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()"
  ></ucap-organization-tenant-search>
</div>
<div
  [style.display]="isShowSearch ? 'none' : 'block'"
  class="search-result"
  style="overflow: auto;"
>
  <ucap-group-expansion-panel
    #groupExpansionPanel
    [groupBuddyList]="groupBuddyList"
    [favoritBuddyList]="favoritBuddyList$ | async"
    [myProfileInfo]="loginRes.userInfo"
    (more)="onMoreGroup($event)"
  >
    <ucap-profile-user-list-item
      *ucapGroupExpansionPanelItem="let userInfo; let group = group"
      [userInfo]="userInfo"
      [presence]="getStatusBulkInfo(userInfo) | async"
      [sessionVerinfo]="sessionVerinfo"
      (click)="onSelectBuddy(userInfo)"
      (openProfile)="onClickOpenProfile($event, group)"
      (contextmenu)="onContextMenuProfile($event, userInfo, group, false)"
      class="list-item-frame ucap-clickable"
    >
    </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.howManyPersons' | translate }})</span
    >
  </div>
  <ucap-profile-user-list-item
    *ngFor="let userInfo of searchUserInfos"
    [userInfo]="userInfo"
    [presence]="getStatusBulkInfo(userInfo) | async"
    [sessionVerinfo]="sessionVerinfo"
    (click)="onSelectBuddy(userInfo)"
    (openProfile)="onClickOpenProfile($event)"
    (contextmenu)="onContextMenuProfile($event, userInfo, null, true)"
  >
  </ucap-profile-user-list-item>
</div>

<mat-menu
  #groupMenu="matMenu"
  xPosition="after"
  yPosition="below"
  [hasBackdrop]="false"
>
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
    <!--<mat-icon>group_add</mat-icon>-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="butt"
      stroke-linejoin="round"
    >
      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
      <circle cx="8.5" cy="7" r="4"></circle>
      <line x1="20" y1="8" x2="20" y2="14"></line>
      <line x1="23" y1="11" x2="17" y2="11"></line>
    </svg>
    <span>{{ 'group.addNew' | translate }}</span>
  </button>
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
    <!--<mat-icon>expand_more</mat-icon>-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="butt"
      stroke-linejoin="round"
    >
      <path d="M6 9l6 6 6-6" />
    </svg>
    <span>{{ 'group.expandMore' | translate }}</span>
  </button>
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
    <!--<mat-icon>expand_less</mat-icon>-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="butt"
      stroke-linejoin="round"
    >
      <path d="M18 15l-6-6-6 6" />
    </svg>
    <span>{{ 'group.expandLess' | translate }}</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
  style="visibility: hidden; position: fixed"
  [style.left]="profileContextMenuPosition.x"
  [style.top]="profileContextMenuPosition.y"
  #profileContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="profileContextMenu"
></div>
<mat-menu
  #profileContextMenu="matMenu"
  [hasBackdrop]="false"
  (ucapClickOutside)="profileContextMenuTrigger.closeMenu()"
>
  <ng-template
    matMenuContent
    let-userInfo="userInfo"
    let-group="group"
    let-isSearchData="isSearchData"
  >
    <button
      mat-menu-item
      (click)="onClickProfileContextMenu('VIEW_PROFILE', userInfo, group)"
    >
      {{ 'profile.open' | translate }}
    </button>
    <button
      mat-menu-item
      *ngIf="
        getShowProfileContextMenu(
          'REGISTER_FAVORITE',
          userInfo,
          group,
          isSearchData
        )
      "
      (click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)"
    >
      즐겨찾기 {{ userInfo.isFavorit ? '해제' : '등록' }}
    </button>
    <button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">
      대화하기
    </button>
    <button
      mat-menu-item
      *ngIf="
        getShowProfileContextMenu(
          'REMOVE_FROM_GROUP',
          userInfo,
          group,
          isSearchData
        )
      "
      (click)="onClickProfileContextMenu('REMOVE_FROM_GROUP', userInfo, group)"
    >
      이 그룹에서 삭제
    </button>
    <button
      mat-menu-item
      *ngIf="
        getShowProfileContextMenu('COPY_BUDDY', userInfo, group, isSearchData)
      "
      (click)="onClickProfileContextMenu('COPY_BUDDY', userInfo)"
    >
      대화 상대 복사
    </button>
    <button
      mat-menu-item
      *ngIf="
        getShowProfileContextMenu('MOVE_BUDDY', userInfo, group, isSearchData)
      "
      (click)="onClickProfileContextMenu('MOVE_BUDDY', userInfo, group)"
    >
      대화 상대 이동
    </button>
    <button
      mat-menu-item
      *ngIf="
        getShowProfileContextMenu('SEND_MESSAGE', userInfo, group, isSearchData)
      "
      (click)="onClickProfileContextMenu('SEND_MESSAGE', userInfo)"
    >
      쪽지 보내기
    </button>
    <!-- <button
      mat-menu-item
      *ngIf="getShowProfileContextMenu('REGISTER_NICKNAME', userInfo, group)"
      (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"
  (ucapClickOutside)="groupContextMenuTrigger.closeMenu()"
>
  <ng-template matMenuContent let-group="group">
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('CHAT', group)"
      (click)="onClickGroupContextMenu('CHAT', group)"
    >
      그룹 대화하기
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('SEND_MESSAGE', group)"
      (click)="onClickGroupContextMenu('SEND_MESSAGE', group)"
    >
      그룹 쪽지 보내기
    </button>
    <mat-divider *ngIf="getShowGroupContextMenu('DIV1', group)"></mat-divider>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('RENAME', group)"
      (click)="onClickGroupContextMenu('RENAME', group)"
    >
      그룹 이름 바꾸기
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('EDIT_MEMBER', group)"
      (click)="onClickGroupContextMenu('EDIT_MEMBER', group)"
    >
      그룹 멤버 변경
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('DELETE', group)"
      (click)="onClickGroupContextMenu('DELETE', group)"
    >
      그룹 삭제
    </button>
  </ng-template>
</mat-menu>