next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
2020-01-08 12:30:39 +09:00

289 lines
8.4 KiB
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.units.persons' | 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 ? 'group.unfavorite' : 'group.favorite') | translate
}}
</button>
<button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">
{{ 'chat.startChat' | translate }}
</button>
<button
mat-menu-item
*ngIf="
getShowProfileContextMenu(
'REMOVE_FROM_GROUP',
userInfo,
group,
isSearchData
)
"
(click)="onClickProfileContextMenu('REMOVE_FROM_GROUP', userInfo, group)"
>
{{ 'group.removeBuddyFromGroup' | translate }}
</button>
<button
mat-menu-item
*ngIf="
getShowProfileContextMenu('COPY_BUDDY', userInfo, group, isSearchData)
"
(click)="onClickProfileContextMenu('COPY_BUDDY', userInfo)"
>
{{ 'group.copyBuddyToGroup' | translate }}
</button>
<button
mat-menu-item
*ngIf="
getShowProfileContextMenu('MOVE_BUDDY', userInfo, group, isSearchData)
"
(click)="onClickProfileContextMenu('MOVE_BUDDY', userInfo, group)"
>
{{ 'group.moveBuddyToGroup' | translate }}
</button>
<button
mat-menu-item
*ngIf="
getShowProfileContextMenu('SEND_MESSAGE', userInfo, group, isSearchData)
"
(click)="onClickProfileContextMenu('SEND_MESSAGE', userInfo)"
>
{{ 'message.sendTo' | translate }}
</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)"
>
{{ 'group.startChatWithGroup' | translate }}
</button>
<button
mat-menu-item
*ngIf="getShowGroupContextMenu('SEND_MESSAGE', group)"
(click)="onClickGroupContextMenu('SEND_MESSAGE', group)"
>
{{ 'group.sendMessageToGroup' | translate }}
</button>
<mat-divider *ngIf="getShowGroupContextMenu('DIV1', group)"></mat-divider>
<button
mat-menu-item
*ngIf="getShowGroupContextMenu('RENAME', group)"
(click)="onClickGroupContextMenu('RENAME', group)"
>
{{ 'group.changeGroupName' | translate }}
</button>
<button
mat-menu-item
*ngIf="getShowGroupContextMenu('EDIT_MEMBER', group)"
(click)="onClickGroupContextMenu('EDIT_MEMBER', group)"
>
{{ 'group.modifyGroupMember' | translate }}
</button>
<button
mat-menu-item
*ngIf="getShowGroupContextMenu('DELETE', group)"
(click)="onClickGroupContextMenu('DELETE', group)"
>
{{ 'group.removeGroup' | translate }}
</button>
</ng-template>
</mat-menu>