318 lines
12 KiB
HTML
318 lines
12 KiB
HTML
<mat-card class="confirm-card mat-elevation-z integrated-search">
|
|
<mat-card-header>
|
|
<mat-card-title
|
|
cdkDrag
|
|
cdkDragRootElement=".cdk-overlay-pane"
|
|
cdkDragHandle
|
|
class="card-header"
|
|
>{{ 'search.label' | translate }}</mat-card-title
|
|
>
|
|
<div class="btn-top-frme" fxFlex="0 0 auto">
|
|
<!-- <button class="icon-button btn-dialog-refresh" matTooltip="{{ 'search.clear' | translate }}" (click)="onCancel()">
|
|
<i class="mdi mdi-refresh"></i>
|
|
</button> -->
|
|
<button
|
|
class="icon-button btn-dialog-fold"
|
|
matTooltip="{{ 'search.fold' | translate }}"
|
|
(click)="onClickHide()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
style="fill:#444444"
|
|
>
|
|
<path
|
|
d="M19,19H5V5h9.38V3H5A2,2,0,0,0,3,5V19a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2V10.36H19Zm-4.24-2.76v-2H11.17L21,4.41,19.59,3,9.76,12.83V9.24h-2v7Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-button btn-dialog-close" (click)="onCancel()">
|
|
<i class="mdi mdi-window-close"></i>
|
|
</button>
|
|
</div>
|
|
</mat-card-header>
|
|
|
|
<mat-card-content>
|
|
<div
|
|
fxLayout="column"
|
|
fxFlex="1 1 auto"
|
|
class="rightDrawer-notice"
|
|
style="position: relative; width:100%"
|
|
>
|
|
<div class="search-area">
|
|
<ucap-integrated-search-form
|
|
[searchWord]="!!currentSearchWord ? currentSearchWord : ''"
|
|
(search)="onSearch($event)"
|
|
>
|
|
</ucap-integrated-search-form>
|
|
<div class="organization-option selectbox">
|
|
<mat-form-field>
|
|
<mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
|
|
<mat-select
|
|
#filterCompany
|
|
disableOptionCentering="true"
|
|
[formControl]="fcCompany"
|
|
multiple
|
|
(openedChange)="onOpenedChange($event)"
|
|
class="select-item"
|
|
>
|
|
<mat-select-trigger class="select-trigger">
|
|
{{ fcCompany.value ? fcCompany.value[0] : '' }}
|
|
<span
|
|
*ngIf="fcCompany.value?.length > 1"
|
|
class="example-additional-selection"
|
|
>
|
|
(+{{
|
|
'search.andOthers'
|
|
| translate: { count: fcCompany.value.length - 1 }
|
|
}})
|
|
</span>
|
|
</mat-select-trigger>
|
|
<mat-option
|
|
*ngFor="let option of filterCompanyOption"
|
|
[value]="option"
|
|
>{{ option }}</mat-option
|
|
>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{ 'search.fieldGrade' | translate }}</mat-label>
|
|
<mat-select
|
|
#filterGrade
|
|
disableOptionCentering="true"
|
|
[formControl]="fcGrade"
|
|
multiple
|
|
(openedChange)="onOpenedChange($event)"
|
|
class="select-item"
|
|
>
|
|
<mat-select-trigger class="select-trigger">
|
|
{{ fcGrade.value ? fcGrade.value[0] : '' }}
|
|
<span
|
|
*ngIf="fcGrade.value?.length > 1"
|
|
class="example-additional-selection"
|
|
>
|
|
(+{{
|
|
'search.andOthers'
|
|
| translate: { count: fcGrade.value.length - 1 }
|
|
}})
|
|
</span>
|
|
</mat-select-trigger>
|
|
<mat-option
|
|
*ngFor="let option of filterGradeOption"
|
|
[value]="option"
|
|
>{{ option }}</mat-option
|
|
>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{ 'search.fieldWorkPlace' | translate }}</mat-label>
|
|
<mat-select
|
|
#filterWorkPlace
|
|
disableOptionCentering="true"
|
|
[formControl]="fcWorkPlace"
|
|
multiple
|
|
(openedChange)="onOpenedChange($event)"
|
|
class="select-item"
|
|
>
|
|
<mat-select-trigger class="select-trigger">
|
|
{{ fcWorkPlace.value ? fcWorkPlace.value[0] : '' }}
|
|
<span
|
|
*ngIf="fcWorkPlace.value?.length > 1"
|
|
class="example-additional-selection"
|
|
>
|
|
(+{{
|
|
'search.andOthers'
|
|
| translate: { count: fcWorkPlace.value.length - 1 }
|
|
}})
|
|
</span>
|
|
</mat-select-trigger>
|
|
<mat-option
|
|
*ngFor="let option of filterWorkPlaceOption"
|
|
[value]="option"
|
|
>{{ option }}</mat-option
|
|
>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{ 'presence.label' | translate }}</mat-label>
|
|
<mat-select
|
|
#filterPresence
|
|
disableOptionCentering="true"
|
|
[formControl]="fcPresence"
|
|
multiple
|
|
(openedChange)="onOpenedChange($event)"
|
|
class="select-item"
|
|
>
|
|
<mat-select-trigger class="select-trigger">
|
|
{{ setFilterOptionSelectedTextPresence() }}
|
|
<span
|
|
*ngIf="fcPresence.value?.length > 1"
|
|
class="example-additional-selection"
|
|
>
|
|
(+{{
|
|
'search.andOthers'
|
|
| translate: { count: fcPresence.value.length - 1 }
|
|
}})
|
|
</span>
|
|
</mat-select-trigger>
|
|
<mat-option [value]="StatusCode.OnLine">{{
|
|
'presence.online' | translate
|
|
}}</mat-option>
|
|
<mat-option [value]="StatusCode.Away">{{
|
|
'presence.away' | translate
|
|
}}</mat-option>
|
|
<mat-option [value]="StatusCode.Busy">{{
|
|
'presence.statusMessage1' | translate
|
|
}}</mat-option>
|
|
<mat-option [value]="StatusCode.Offline">{{
|
|
'presence.offline' | translate
|
|
}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div class="content-area">
|
|
<div
|
|
*ngIf="searchingProcessing$ | async"
|
|
style="position: absolute; width: 100%; z-index: 101;"
|
|
>
|
|
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
|
</div>
|
|
|
|
<div class="contents-table" fxFlex="1 1 100%" fxLayout="column">
|
|
<div 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)"
|
|
(sendCall)="onClickCall($event)"
|
|
class="integrate-search-org detail-table"
|
|
></ucap-organization-detail-table>
|
|
</div>
|
|
|
|
<div
|
|
class="footer-fix search-result-footer"
|
|
fxFlex="auto"
|
|
fxLayout="column"
|
|
>
|
|
<mat-accordion>
|
|
<mat-expansion-panel hideToggle>
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title class="select-user-title">
|
|
{{ 'organization.selectedUser' | translate }}
|
|
<span
|
|
*ngIf="selectedUserList.length > 0"
|
|
class="text-accent-color"
|
|
>
|
|
({{ selectedUserList.length }})
|
|
{{ 'common.units.persons' | translate }}
|
|
</span>
|
|
</mat-panel-title>
|
|
<mat-panel-description fxFlex="0 0 auto" class="btn-dropdown">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
class="indicator"
|
|
>
|
|
<path
|
|
d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
|
|
/>
|
|
<path d="M0 0h24v24H0z" fill="none" />
|
|
</svg>
|
|
</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>
|
|
<li>
|
|
<button
|
|
mat-flat-button
|
|
[disabled]="
|
|
selectedUserList.length > 0 ? 'false' : 'true'
|
|
"
|
|
(click)="onClickMessage()"
|
|
class="mat-primary"
|
|
>
|
|
{{ 'organization.startMessage' | translate }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--상단 아이콘 버튼으로 대체
|
|
<div class="btn-box">
|
|
<ul class="">
|
|
<li>
|
|
<button mat-flat-button (click)="onCancel()" class="mat-primary">
|
|
{{ 'search.clearAndColse' | translate }}
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button mat-flat-button (click)="onClickHide()" class="mat-primary">
|
|
{{ 'search.fold' | translate }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>-->
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|