Skip to content

M
myhr-portal
Commit 16a26cd2 by Nattana Chaiyamat
Options

แก้หน้าdatasource table

parent 52be4e8d
Showing with 37 additions and 26 deletions
src/app/apps/datasource-table/datasource-table.component.html
......@@ -4,7 +4,7 @@
<h4 class="card-title">Datasorce Table</h4>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Company ID
Company ID<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyId">
......@@ -12,7 +12,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Company Name
Company Name<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyName">
......@@ -20,7 +20,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Database Name
Database Name<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.databaseName">
......@@ -28,7 +28,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Database Type
Database Type<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="datasourceTable.select.dbType">
......@@ -41,7 +41,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Port Number
Port Number<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.portNumber">
......@@ -49,7 +49,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Server Name
Server Name<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.serverName">
......@@ -57,7 +57,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
User Name
User Name<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.userName">
......@@ -65,7 +65,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Password
Password<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [class.secure-input]="!showPassword"
......@@ -76,7 +76,7 @@
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Status
Status<span class="text-danger">*</span>
</div>
<div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="datasourceTable.select.status">
......@@ -88,12 +88,14 @@
</div>
</div>
<div class="row justify-content-center align-items-center mb-2">
<button type="button" class="btn btn-info" (click)="postData()">บันทึก</button>
<button type="button" class="btn btn-info" (click)="postData()"
[disabled]="checkDatasourceTable()">บันทึก</button>
&nbsp;
<button type="button" class="btn btn-danger" (click)="deleteData()">ลบ</button>
<button type="button" class="btn btn-danger" (click)="deleteData()"
[disabled]="checkDatasourceTable()">ลบ</button>
</div>
<div class="row justify-content-end mr-0 mb-2">
<input type="text" class="col-5 form-control" [(ngModel)]="datasourceTable.search">
<input type="text" class="col-5 form-control" [(ngModel)]="datasourceTable.search" placeholder="ค้นหา...">
</div>
<div class="table-responsive">
<table class="table mb-0 no-wrap v-middle ">
......@@ -118,9 +120,9 @@
<tbody *ngIf="datasourceTableFilter().length">
<ng-container
*ngFor="let item of datasourceTableFilter() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<tr (mouseenter)="tableHover.set(item.userName,!tableHover.get(item.userName))"
<tr (mouseenter)="tableHover.set(item.companyId,!tableHover.get(item.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.userName)?'rgb(201 223 235)':'#ebf2f6'}">
[ngStyle]="{'background-color':tableHover.get(item.companyId)?'rgb(201 223 235)':'#ebf2f6'}">
<td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;">
{{item.companyId}}
......@@ -131,15 +133,15 @@
</td>
<td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;">
{{item.databaseName}}
{{item.dbType}}
</td>
<td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;">
{{item.dbType}}
{{item.portNumber}}
</td>
<td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;">
{{item.portNumber}}
{{item.databaseName}}
</td>
<td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;">
......@@ -155,15 +157,15 @@
</td>
<td class="text-center" style="white-space: normal !important;word-break: break-word;">
<span class="cursor-pointer" (click)="selectData(item)">
{{tableShowPassword.get(item.userName)?item.password :
{{tableShowPassword.get(item.companyId)?item.password :
'*'.repeat(item.password?.length || 0) }}
</span>
&nbsp;
<i class="cursor-pointer fa fa-eye" *ngIf="tableShowPassword.get(item.userName)"
(click)="tableShowPassword.set(item.userName,false)"></i>
<i class="cursor-pointer fa fa-eye" *ngIf="tableShowPassword.get(item.companyId)"
(click)="tableShowPassword.set(item.companyId,false)"></i>
<i class="cursor-pointer fa fa-eye-slash"
*ngIf="!tableShowPassword.get(item.userName)"
(click)="tableShowPassword.set(item.userName,true)"></i>
*ngIf="!tableShowPassword.get(item.companyId)"
(click)="tableShowPassword.set(item.companyId,true)"></i>
</td>
</tr>
</ng-container>
......
src/app/apps/datasource-table/datasource-table.component.ts
......@@ -85,10 +85,13 @@ export class DatasourceTableComponent implements OnInit {
this.scrollTop()
}
datasourceTableFilter() {
return this.datasourceTable.data.filter(e => e.companyId.includes(this.datasourceTable.search) ||
e.companyName.includes(this.datasourceTable.search) ||
e.serverName.includes(this.datasourceTable.search) ||
e.databaseName.includes(this.datasourceTable.search))
return this.datasourceTable.data.filter(e =>
Object.entries(e)
.filter(([key]) => key !== 'password') // ตัด field 'password' ออก
.some(([_, value]) =>
value != null && value.toString().toLowerCase().includes(this.datasourceTable.search.toLowerCase())
)
)
}
scrollTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
......@@ -103,4 +106,9 @@ export class DatasourceTableComponent implements OnInit {
}, reason => {
})
}
checkDatasourceTable() {
return Object.values(this.datasourceTable.select).some(value => value === '' || value == null)
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment