팝업에 닫기 버튼 생성.
This commit is contained in:
leejinho
parent
9b18f6ec64
commit
9ab918cd1d
|
|
@ -1,7 +1,10 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<!-- 이용시 주의사항 항목 -->
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div #messageContainer class="notice">
|
||||
|
|
|
|||
|
|
@ -1,22 +1,29 @@
|
|||
.mat-card{
|
||||
padding:10px;
|
||||
.mat-card-header{
|
||||
margin-bottom:20px;
|
||||
.mat-card-title{
|
||||
margin:0 -16px;
|
||||
padding-bottom:10px;
|
||||
.mat-card {
|
||||
padding: 10px;
|
||||
.mat-card-header {
|
||||
margin-bottom: 20px;
|
||||
.mat-card-title {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
text-align: right;
|
||||
.mat-primary {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
form {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ 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">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
::ng-deep .mat-card-header-tex {
|
||||
margin: 0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
//조직도 레이아웃 변경
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ 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>
|
||||
<form name="inputForm" [formGroup]="inputForm" novalidate>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
::ng-deep .mat-card-header-tex {
|
||||
margin: 0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
.mat-card-header {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<perfect-scrollbar>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
::ng-deep .mat-card-header-tex {
|
||||
margin: 0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
.mat-card-header {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ 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>
|
||||
<form name="inputForm" [formGroup]="inputForm" novalidate>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,35 @@
|
|||
::ng-deep .mat-card-header-tex{
|
||||
margin:0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
.confirm-card{
|
||||
min-width:500px;
|
||||
.mat-card-header{
|
||||
margin-bottom:20px;
|
||||
.mat-card-header-text{
|
||||
.mat-card-title{
|
||||
margin:0 -16px;
|
||||
}
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
.mat-card-header {
|
||||
margin-bottom: 20px;
|
||||
.mat-card-header-text {
|
||||
.mat-card-title {
|
||||
margin: 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
text-align: right;
|
||||
.mat-primary {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
form {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close">
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-tex {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@
|
|||
}}</span>
|
||||
</ng-container>
|
||||
</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-drawer-container
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
::ng-deep .mat-card-header-tex {
|
||||
margin: 0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
.mat-card-content {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
<mat-card-title>
|
||||
{{ (isModify ? 'message.modify' : 'message.sendTo') | translate }}
|
||||
</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close" (click)="onCancel()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<ucap-message-write
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@
|
|||
</span>
|
||||
{{ data.notice.title }}
|
||||
</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,13 @@
|
|||
width: 480px;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@
|
|||
{{ 'common.messages.selectAll' | translate }}
|
||||
</mat-checkbox>
|
||||
</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 class="item-list">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
::ng-deep .mat-card-header-tex {
|
||||
margin: 0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,28 @@
|
|||
<ucap-integrated-search
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
[presence]="presence$ | async"
|
||||
[searchWord]="!!data.keyword ? data.keyword : ''"
|
||||
[searchingProcessing]="searchingProcessing"
|
||||
[searchUserInfos]="searchUserInfos"
|
||||
[totalCount]="totalCount"
|
||||
[pageCurrent]="pageCurrent"
|
||||
[pageListCount]="pageListCount"
|
||||
(search)="onSearch($event)"
|
||||
(changePage)="onChangePage($event)"
|
||||
>
|
||||
</ucap-integrated-search>
|
||||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header
|
||||
cdkDrag
|
||||
cdkDragRootElement=".cdk-overlay-pane"
|
||||
cdkDragHandle
|
||||
class="card-header"
|
||||
>
|
||||
<mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close" (click)="onCancel()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<ucap-integrated-search
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
[presence]="presence$ | async"
|
||||
[searchWord]="!!data.keyword ? data.keyword : ''"
|
||||
[searchingProcessing]="searchingProcessing"
|
||||
[searchUserInfos]="searchUserInfos"
|
||||
[totalCount]="totalCount"
|
||||
[pageCurrent]="pageCurrent"
|
||||
[pageListCount]="pageListCount"
|
||||
(search)="onSearch($event)"
|
||||
(changePage)="onChangePage($event)"
|
||||
>
|
||||
</ucap-integrated-search>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
|
@ -154,6 +154,10 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.dialogRef.close({});
|
||||
}
|
||||
|
||||
onChangePage(event: PageEvent) {
|
||||
this.pageCurrent = event.pageIndex + 1;
|
||||
this.pageListCount = event.pageSize;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<mat-card class="confirm-card mat-elevation-z setting-frame">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ 'settings.label' | translate }}</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 fxFlex class="setting-tab">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
width: 100%;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-card-content {
|
||||
|
|
|
|||
|
|
@ -1,231 +1,207 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header
|
||||
cdkDrag
|
||||
cdkDragRootElement=".cdk-overlay-pane"
|
||||
cdkDragHandle
|
||||
class="card-header"
|
||||
>
|
||||
<mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div fxLayout="column" class="rightDrawer-notice">
|
||||
<div fxFlex="1 1 80px" class="search-area">
|
||||
<ucap-integrated-search-form
|
||||
[searchWord]="!!searchWord ? searchWord : ''"
|
||||
(search)="onSearch($event)"
|
||||
>
|
||||
</ucap-integrated-search-form>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="searchingProcessing"
|
||||
style="position: absolute; width: 100%; z-index: 101;"
|
||||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex="0 0 auto" class="table-box">
|
||||
<perfect-scrollbar class="search-scrollbar">
|
||||
<table mat-table [dataSource]="searchUserInfos">
|
||||
<ng-container matColumnDef="profile">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="profile"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldProfile' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="profile">
|
||||
{{ getPresence(element, PresenceType.PC) }} /
|
||||
{{ getPresence(element, PresenceType.MOBILE) }} /
|
||||
{{ getWorkstatus(element) }} /
|
||||
<img
|
||||
class="thumbnail"
|
||||
ucapImage
|
||||
[base]="profileImageRoot"
|
||||
[path]="element.profileImageFile"
|
||||
[default]="'assets/images/img_nophoto_50.png'"
|
||||
(click)="onClickOpenProfile($event, element.seq)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="name"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldName' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="name">
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="deptName">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="deptName"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldDeptartment' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="deptName">
|
||||
{{ element.deptName }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="companyName">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="companyName"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldCompany' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="companyName">
|
||||
{{ element.companyName }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="grade">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="grade"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldGrade' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="grade">
|
||||
<div class="grade">
|
||||
{{ element.grade }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="lineNumber">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="lineNumber"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldOfficePhoneNumber' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="lineNumber">
|
||||
<div class="lineNumber">
|
||||
{{ element.lineNumber }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hpNumber">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="hpNumber"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldHandphone' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="hpNumber">
|
||||
<div class="hpNumber">
|
||||
{{ element.hpNumber }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="email">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="email"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldEmail' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="email">
|
||||
<div class="email">
|
||||
{{ element.email }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="responsibilities">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="responsibilities"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldResponsibilities' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="responsibilities">
|
||||
<div class="responsibilities">
|
||||
{{ element.responsibilities }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="workplace">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="workplace"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldWorkPlace' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="workplace">
|
||||
<div class="workplace">
|
||||
{{ element.workplace }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr
|
||||
mat-header-row
|
||||
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||
></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
<div class="footer-fix">
|
||||
<mat-paginator
|
||||
[length]="totalCount"
|
||||
[pageSize]="pageListCount"
|
||||
[pageSizeOptions]="[10, 20, 30]"
|
||||
(page)="onChangePage($event)"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<!-- <mat-card-actions *ngIf="!hideAction" class="button-farm flex-row">
|
||||
<button
|
||||
mat-stroked-button
|
||||
(click)="onClickChoice(false)"
|
||||
class="mat-primary"
|
||||
<div fxLayout="column" class="rightDrawer-notice">
|
||||
<div fxFlex="1 1 80px" class="search-area">
|
||||
<ucap-integrated-search-form
|
||||
[searchWord]="!!searchWord ? searchWord : ''"
|
||||
(search)="onSearch($event)"
|
||||
>
|
||||
{{ 'common.messages.no' | translate }}
|
||||
</button>
|
||||
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
|
||||
{{ 'common.messages.yes' | translate }}
|
||||
</button>
|
||||
</mat-card-actions> -->
|
||||
</mat-card>
|
||||
</ucap-integrated-search-form>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="searchingProcessing"
|
||||
style="position: absolute; width: 100%; z-index: 101;"
|
||||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex="0 0 auto" class="table-box">
|
||||
<perfect-scrollbar class="search-scrollbar">
|
||||
<table mat-table [dataSource]="searchUserInfos">
|
||||
<ng-container matColumnDef="profile">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="profile"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldProfile' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="profile">
|
||||
{{ getPresence(element, PresenceType.PC) }} /
|
||||
{{ getPresence(element, PresenceType.MOBILE) }} /
|
||||
{{ getWorkstatus(element) }} /
|
||||
<img
|
||||
class="thumbnail"
|
||||
ucapImage
|
||||
[base]="profileImageRoot"
|
||||
[path]="element.profileImageFile"
|
||||
[default]="'assets/images/img_nophoto_50.png'"
|
||||
(click)="onClickOpenProfile($event, element.seq)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="name"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldName' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="name">
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="deptName">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="deptName"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldDeptartment' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="deptName">
|
||||
{{ element.deptName }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="companyName">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="companyName"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldCompany' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="companyName">
|
||||
{{ element.companyName }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="grade">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="grade"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldGrade' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="grade">
|
||||
<div class="grade">
|
||||
{{ element.grade }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="lineNumber">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="lineNumber"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldOfficePhoneNumber' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="lineNumber">
|
||||
<div class="lineNumber">
|
||||
{{ element.lineNumber }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hpNumber">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="hpNumber"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldHandphone' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="hpNumber">
|
||||
<div class="hpNumber">
|
||||
{{ element.hpNumber }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="email">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="email"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldEmail' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="email">
|
||||
<div class="email">
|
||||
{{ element.email }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="responsibilities">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="responsibilities"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldResponsibilities' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="responsibilities">
|
||||
<div class="responsibilities">
|
||||
{{ element.responsibilities }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="workplace">
|
||||
<th
|
||||
mat-header-cell
|
||||
*matHeaderCellDef
|
||||
#header
|
||||
class="workplace"
|
||||
(mousedown)="resizeTable($event, header)"
|
||||
>
|
||||
{{ 'search.fieldWorkPlace' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="workplace">
|
||||
<div class="workplace">
|
||||
{{ element.workplace }}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr
|
||||
mat-header-row
|
||||
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||
></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
<div class="footer-fix">
|
||||
<mat-paginator
|
||||
[length]="totalCount"
|
||||
[pageSize]="pageListCount"
|
||||
[pageSizeOptions]="[10, 20, 30]"
|
||||
(page)="onChangePage($event)"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header *ngIf="data.title">
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
|
||||
<mat-card-header>
|
||||
<mat-card-title *ngIf="data.title">{{ data.title }}</mat-card-title>
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div #messageContainer class="notice">
|
||||
|
|
|
|||
|
|
@ -1,22 +1,30 @@
|
|||
.mat-card{
|
||||
padding:10px;
|
||||
.mat-card-header{
|
||||
margin-bottom:20px;
|
||||
.mat-card-title{
|
||||
margin:0 -16px;
|
||||
padding-bottom:10px;
|
||||
.mat-card {
|
||||
padding: 10px;
|
||||
.mat-card-header {
|
||||
margin-bottom: 20px;
|
||||
.mat-card-title {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
text-align: right;
|
||||
.mat-primary {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
form {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
class="card-header"
|
||||
>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
|
||||
<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 #messageContainer class="notice">
|
||||
|
|
|
|||
|
|
@ -1,25 +1,34 @@
|
|||
::ng-deep .mat-card-header-tex{
|
||||
margin:0;
|
||||
::ng-deep .mat-card-header {
|
||||
.mat-card-header-text {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-dialog-close {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-self: flex-start;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
.mat-card{
|
||||
padding:10px;
|
||||
.mat-card-header{
|
||||
margin-bottom:20px;
|
||||
.mat-card-title{
|
||||
margin:0 -16px;
|
||||
padding-bottom:10px;
|
||||
.mat-card {
|
||||
padding: 10px;
|
||||
.mat-card-header {
|
||||
margin-bottom: 20px;
|
||||
.mat-card-title {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
text-align: right;
|
||||
.mat-primary {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
form {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user