통합검색 - 수정중

This commit is contained in:
khk 2020-03-16 17:25:40 +09:00
parent d0a1c0f3ee
commit 556c7c5ad3
3 changed files with 167 additions and 97 deletions

View File

@ -19,7 +19,7 @@
(search)="onSearch($event)"
>
</ucap-integrated-search-form>
<div class="organization-option">
<div class="organization-option selectbox">
<mat-form-field>
<mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
<mat-select
@ -137,112 +137,113 @@
</mat-form-field>
</div>
</div>
<div style="position: relative;">
<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>
<div class="contents-table">
<div fxFlex="0 0 auto" 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">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'organization.selectedUser' | translate }}
<span *ngIf="selectedUserList.length > 0">
({{ selectedUserList.length }})
{{ 'common.units.persons' | translate }}
</span>
</mat-panel-title>
<mat-panel-description> </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"
<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">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'organization.selectedUser' | translate }}
<span *ngIf="selectedUserList.length > 0">
({{ selectedUserList.length }})
{{ 'common.units.persons' | translate }}
</span>
</mat-panel-title>
<mat-panel-description> </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)"
>
{{ '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>
{{ 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="footer-fix search-result-footer">
<ul>
<div class="btn-box">
<ul class="">
<li>
<button mat-flat-button (click)="onCancel()" class="mat-primary">
{{ 'search.clearAndColse' | translate }}

View File

@ -10,3 +10,59 @@
color: #444444;
}
}
ucap-integrated-search-form {
position: relative;
display: inline-flex;
.search-container {
width: 20%;
}
}
.organization-option {
position: relative;
display: inline-flex;
width: 70%;
}
.content-area {
display: flex;
height: calc(100% - 140px);
}
.contents-table {
position: relative;
flex-direction: column;
box-sizing: border-box;
display: flex;
flex: 1 1 100%;
max-width: 100%;
height: 100%;
overflow: hidden;
.table-box {
position: relative;
width: 100%;
height: calc(100% - 60px);
overflow: hidden;
display: flex;
}
.footer-fix {
display: flex;
flex: 1 1 auto;
bottom: 0;
width: 100%;
flex-direction: column;
box-sizing: border-box;
}
}
.btn-box {
position: absolute;
width: 100%;
bottom: 0;
ul {
display: flex;
flex-flow: row;
li {
display: inline-flex;
margin-left: 4px;
}
}
}

View File

@ -118,3 +118,16 @@ $search-font-size: 14px;
}
}
}
.search-area {
.selectbox {
display: inline-flex;
width: 70%;
padding-left: 20px;
line-height: 1.4em;
.mat-form-field {
font-size: 0.88rem;
color: #333333;
flex: 1 1 auto;
}
}
}