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 @@ ...@@ -4,7 +4,7 @@
<h4 class="card-title">Datasorce Table</h4> <h4 class="card-title">Datasorce Table</h4>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Company ID Company ID<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyId"> <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyId">
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Company Name Company Name<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyName"> <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyName">
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Database Name Database Name<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.databaseName"> <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.databaseName">
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Database Type Database Type<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="datasourceTable.select.dbType"> <select class="custom-select" [(ngModel)]="datasourceTable.select.dbType">
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Port Number Port Number<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.portNumber"> <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.portNumber">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Server Name Server Name<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.serverName"> <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.serverName">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
User Name User Name<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="datasourceTable.select.userName"> <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.userName">
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Password Password<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<input type="text" class="form-control" [class.secure-input]="!showPassword" <input type="text" class="form-control" [class.secure-input]="!showPassword"
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </div>
<div class="row align-items-center mb-2"> <div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <div class="col-4 col-lg-3 text-right">
Status Status<span class="text-danger">*</span>
</div> </div>
<div class="col-8 col-lg-3"> <div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="datasourceTable.select.status"> <select class="custom-select" [(ngModel)]="datasourceTable.select.status">
...@@ -88,12 +88,14 @@ ...@@ -88,12 +88,14 @@
</div> </div>
</div> </div>
<div class="row justify-content-center align-items-center mb-2"> <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; &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>
<div class="row justify-content-end mr-0 mb-2"> <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>
<div class="table-responsive"> <div class="table-responsive">
<table class="table mb-0 no-wrap v-middle "> <table class="table mb-0 no-wrap v-middle ">
...@@ -118,9 +120,9 @@ ...@@ -118,9 +120,9 @@
<tbody *ngIf="datasourceTableFilter().length"> <tbody *ngIf="datasourceTableFilter().length">
<ng-container <ng-container
*ngFor="let item of datasourceTableFilter() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index"> *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()" (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" <td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.companyId}} {{item.companyId}}
...@@ -131,15 +133,15 @@ ...@@ -131,15 +133,15 @@
</td> </td>
<td (click)="selectData(item)" class="cursor-pointer text-center" <td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.databaseName}} {{item.dbType}}
</td> </td>
<td (click)="selectData(item)" class="cursor-pointer text-center" <td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.dbType}} {{item.portNumber}}
</td> </td>
<td (click)="selectData(item)" class="cursor-pointer text-center" <td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.portNumber}} {{item.databaseName}}
</td> </td>
<td (click)="selectData(item)" class="cursor-pointer text-center" <td (click)="selectData(item)" class="cursor-pointer text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
...@@ -155,15 +157,15 @@ ...@@ -155,15 +157,15 @@
</td> </td>
<td class="text-center" style="white-space: normal !important;word-break: break-word;"> <td class="text-center" style="white-space: normal !important;word-break: break-word;">
<span class="cursor-pointer" (click)="selectData(item)"> <span class="cursor-pointer" (click)="selectData(item)">
{{tableShowPassword.get(item.userName)?item.password : {{tableShowPassword.get(item.companyId)?item.password :
'*'.repeat(item.password?.length || 0) }} '*'.repeat(item.password?.length || 0) }}
</span> </span>
&nbsp; &nbsp;
<i class="cursor-pointer fa fa-eye" *ngIf="tableShowPassword.get(item.userName)" <i class="cursor-pointer fa fa-eye" *ngIf="tableShowPassword.get(item.companyId)"
(click)="tableShowPassword.set(item.userName,false)"></i> (click)="tableShowPassword.set(item.companyId,false)"></i>
<i class="cursor-pointer fa fa-eye-slash" <i class="cursor-pointer fa fa-eye-slash"
*ngIf="!tableShowPassword.get(item.userName)" *ngIf="!tableShowPassword.get(item.companyId)"
(click)="tableShowPassword.set(item.userName,true)"></i> (click)="tableShowPassword.set(item.companyId,true)"></i>
</td> </td>
</tr> </tr>
</ng-container> </ng-container>
......
src/app/apps/datasource-table/datasource-table.component.ts
...@@ -85,10 +85,13 @@ export class DatasourceTableComponent implements OnInit { ...@@ -85,10 +85,13 @@ export class DatasourceTableComponent implements OnInit {
this.scrollTop() this.scrollTop()
} }
datasourceTableFilter() { datasourceTableFilter() {
return this.datasourceTable.data.filter(e => e.companyId.includes(this.datasourceTable.search) || return this.datasourceTable.data.filter(e =>
e.companyName.includes(this.datasourceTable.search) || Object.entries(e)
e.serverName.includes(this.datasourceTable.search) || .filter(([key]) => key !== 'password') // ตัด field 'password' ออก
e.databaseName.includes(this.datasourceTable.search)) .some(([_, value]) =>
value != null && value.toString().toLowerCase().includes(this.datasourceTable.search.toLowerCase())
)
)
} }
scrollTop() { scrollTop() {
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });
...@@ -103,4 +106,9 @@ export class DatasourceTableComponent implements OnInit { ...@@ -103,4 +106,9 @@ export class DatasourceTableComponent implements OnInit {
}, reason => { }, 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