268 lines
9.9 KiB
HTML
268 lines
9.9 KiB
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-error
|
|
*ngIf="inputForm.get('groupName').hasError('groupNameSamed')"
|
|
>
|
|
{{ 'group.errors.sameNameExist' | translate }}
|
|
</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"
|
|
[activate$]="groupTreeActivatedSubject.asObservable()"
|
|
(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>
|
|
|
|
<perfect-scrollbar fxFlex="1 1 auto">
|
|
<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>
|
|
</perfect-scrollbar>
|
|
</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
|
|
[isMain]="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;">
|
|
<perfect-scrollbar fxFlex="1 1 auto">
|
|
<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 checkbox"
|
|
>
|
|
</ucap-room-list-item>
|
|
</div>
|
|
</perfect-scrollbar>
|
|
</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>
|