Skip to content

Commit

Permalink
#9 Inprove design
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anthony-Jhoiro
Anthony-Jhoiro committed Aug 1, 2019
1 parent b4748d6 commit a219f87
Show file tree
Hide file tree
Showing 17 changed files with 226 additions and 188 deletions.
11 changes: 7 additions & 4 deletions src/app/feat-design/datalibrary/datalibrary.columnsdata.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export var DataLibColumnsData: Column[] = [
{
displayName: "ID",
contentName: 'testDataLibID',
active: true,
active: false,
defaultActive: true,
sSearch: [],
databaseName: 'tdl.TestDataLibID',
Expand Down Expand Up @@ -56,7 +56,8 @@ export var DataLibColumnsData: Column[] = [
{
displayName: "Country",
contentName: 'country',
active: false,
active: true,
defaultActive: true,
sSearch: [],
databaseName : 'tdl.Country',
searchable: true,
Expand All @@ -80,7 +81,8 @@ export var DataLibColumnsData: Column[] = [
{
displayName: "Description",
contentName: 'description',
active: false,
active: true,
defaultActive: true,
sSearch: [],
databaseName : 'tdl.Description',
searchable: true,
Expand All @@ -93,7 +95,8 @@ export var DataLibColumnsData: Column[] = [
{
displayName: "Type",
contentName: 'type',
active: false,
active: true,
defaultActive: true,
sSearch: [],
databaseName : 'tdl.Type',
searchable: true,
Expand Down
8 changes: 1 addition & 7 deletions src/app/feat-design/testcaselist/testcaselist.columnsdata.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,14 +147,8 @@ export var TestCasesColumnsData: Column[] = [
databaseName: '',
contentName: 'countryList',
width: 200,
dropActive: false,
active: false,
searchable: true,
param: {
multiple: true,
field: 'countryList',
placeholder: 'Select Country',
},

sSearch: []

},
Expand Down
25 changes: 15 additions & 10 deletions src/app/shared/datatable-page/datatable-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,18 @@
[selection]="selection">
</app-filters>

<app-table
[rows]="rows"
[columns]="columns"
[testcaseslist]="true"
[page]="page"
[selection]="selection"
[massAction]="massAction"
[selected]="selectedRows"
(pageUpdate)="pageUpdate($event)">
</app-table>
<!-- <div class="content"> -->
<!-- <div class="block-content"> -->
<app-table
[rows]="rows"
[columns]="columns"
[testcaseslist]="true"
[page]="page"
[selection]="selection"
[massAction]="massAction"
[selected]="selectedRows"
(pageUpdate)="pageUpdate($event)">
</app-table>
<!-- </div> -->
<!-- </div> -->

13 changes: 13 additions & 0 deletions src/app/shared/datatable-page/datatable-page.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.content {
width: 100%;
padding: 0;
margin-right: 0;
margin-left: 0;

.block-content {
width: 100%;
margin: 0;
padding: 0;
margin-right: 0;
}
}
48 changes: 5 additions & 43 deletions src/app/shared/datatable-page/datatable/datatable.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[footerHeight]="50"
[rowHeight]="50"
[headerHeight]="50"
[loadingIndicator]="isLoading"
[selected]="(selected)? selected : ''"
[selectionType]="(selection)? 'checkbox' : ''"
[selectAllRowsOnPage]="selection" [scrollbarH]="false"
[selectAllRowsOnPage]="selection"
[scrollbarH]="false"
[scrollbarV]="true"
[externalSorting]="true"
(select)='onSelect($event)'
Expand All @@ -32,7 +32,7 @@
</ngx-datatable-row-detail> -->


<!--Top header-->
<!-- Top header
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
Expand All @@ -41,49 +41,11 @@
<app-actions [selectedRows]="selectedCount"></app-actions>
</div>
<div class="right-side">
<!--Column Selector-->
<ng-select class="column-selector custom auto-width" bindLabel="name"
placeholder="Columns : {{ columnActive }}" [items]="columns" [closeOnSelect]="false"
(change)="resetColumnDrop" [searchable]="false" [clearable]="false">

<ng-template ng-header-tmp>
<button class="btn btn-outline-info" style="width: 100%" (click)="resetDefaultColumns()">Reset</button>
</ng-template>

<!--Content in the top container-->
<ng-template ng-label-tmp>
<div>Selected : {{ columnActive }}</div>
</ng-template>

<!--List of columns (underline if selected)-->
<ng-template ng-option-tmp let-item="item" let-index="index">
<div [ngClass]="{'selected': item.active}" (click)="toggleColumn(item)">
{{item.displayName}}</div>
</ng-template>

</ng-select>

<!--Page size selector-->
<ng-select class="column-selector custom page-size auto-width" bindLabel="name"
placeholder="Show : {{ page.size }}" [(ngModel)]="page.size" [items]="[10, 25, 50, 100]"
[closeOnSelect]="true" [clearable]="false" (change)="applyChange()">


<!--Content in the top container-->
<ng-template ng-label-tmp>
<div>Show : {{ page.size }}</div>
</ng-template>

<!--Items list-->
<ng-template ng-option-tmp let-item="item" let-index="index">
<div>Show : {{ item }}</div>
</ng-template>

</ng-select>
</div>
</div>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable-footer> -->


<!--CheckBox Column-->
Expand Down
40 changes: 21 additions & 19 deletions src/app/shared/datatable-page/datatable/datatable.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.data-table {
margin: 20px;
margin-top: 140px;
height: 100%;
width: 100%;
overflow-x: hidden;
.material {
box-shadow: none;
}
Expand Down Expand Up @@ -31,6 +32,7 @@
}
}


.hover-action{
color: black;
position: absolute;
Expand Down Expand Up @@ -80,24 +82,24 @@
opacity: .8;
}

.top-header {
width: 100%;
position: relative;
margin: 0 20px;
.right-side {
position: absolute;
right: 0;
top: -18px;
&>*{
display: inline-block;
margin-left: 20px;
}
.selected {
border-bottom: 2px solid #0077ff;
}
// .top-header {
// width: 100%;
// position: relative;
// margin: 0 20px;
// .right-side {
// position: absolute;
// right: 0;
// top: -18px;
// &>*{
// display: inline-block;
// margin-left: 20px;
// }
// .selected {
// border-bottom: 2px solid #0077ff;
// }

}
}
// }
// }
.cell {
white-space: nowrap;
overflow: hidden;
Expand Down
5 changes: 1 addition & 4 deletions src/app/shared/datatable-page/datatable/datatable.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,6 @@ export class DatatableComponent implements OnInit {
onDetailToggle(event) {
console.log('Detail Toggled', event);
}
resetDefaultColumns() {
this.columns.forEach(c => c.active = c.defaultActive);
this.columnActive = this.columns.filter(a => a.active).length;
}

}

116 changes: 83 additions & 33 deletions src/app/shared/datatable-page/filters/filters.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
<div class="header-area">
<div class="filter-container">
<div class="main-side">
<!-- Global Search Field -->
<input type="text" class="form-control" (keyup)="onKeyUp()" (blur)="applySystem()"
[(ngModel)]="gloabalSearchModel" placeholder="Search...">

<!--Distinct filters-->
<ng-template ngFor let-column [ngForOf]="columns">
<app-filter *ngIf="column.dropActive" class="filter-drop" [column]="column" [servlet]="servlet"
(applyFilterOutput)=applySystem()></app-filter>
</ng-template>
<!--Like filters-->
<ng-template ngFor let-column [ngForOf]="columns">
<app-filterlike *ngIf="column.fieldActive" [column]="column" (applyFilterOutput)=applySystem()>
</app-filterlike>
</ng-template>


<!--Filter Selector-->
<ng-select class="column-selector custom auto-width" bindLabel="name" placeholder="Add Filters"
[items]="searchableColumns" [closeOnSelect]="false" [searchable]="true" [clearable]="false">

<!--Content in the top container-->
<ng-template ng-label-tmp>
<div>Add Filters</div>
</ng-template>
<div class="header-area bg-body-light">
<div class="filter-container ">
<div class="content content-full">
<div class="main-side ">
<!-- Global Search Field -->
<input type="text" class="form-control" (keyup)="onKeyUp()" (blur)="applySystem()"
[(ngModel)]="gloabalSearchModel" placeholder="Search...">

<!--List of filters (underline if selected)-->
<ng-template ng-option-tmp let-item="item" let-index="index">
<div [ngClass]="{'selected': item.dropActive || item.fieldActive}" (click)="addFilter(item)">{{item.displayName}}</div>
</ng-template>
<!--Filter Selector-->
<ng-select class="column-selector custom auto-width" bindLabel="name" placeholder="Add Filters"
[items]="searchableColumns" [closeOnSelect]="false" [searchable]="true" [clearable]="false">

<!--Content in the top container-->
<ng-template ng-label-tmp>
<div>Add Filters</div>
</ng-template>

</ng-select>
<!--List of filters (underline if selected)-->
<ng-template ng-option-tmp let-item="item" let-index="index">
<div [ngClass]="{'selected': item.dropActive || item.fieldActive}" (click)="addFilter(item)">
{{item.displayName}}</div>
</ng-template>

</ng-select>

</div>
<div class="filter-list">
<!--Distinct filters-->
<ng-template ngFor let-column [ngForOf]="columns">
<app-filter *ngIf="column.dropActive" class="filter-drop" [column]="column" [servlet]="servlet"
(applyFilterOutput)=applySystem()></app-filter>
</ng-template>
<!--Like filters-->
<ng-template ngFor let-column [ngForOf]="columns">
<app-filterlike *ngIf="column.fieldActive" [column]="column" (applyFilterOutput)=applySystem()>
</app-filterlike>
</ng-template>
</div>
<div class="action-container" *ngIf="selectedRows">
<app-actions [selectedRows]="selectedRows"></app-actions>
</div>
</div>
<div class="right-side">

<div class="flex-sm-00-auto ml-sm-3">

<ngb-pagination [(page)]="page.number" [pageSize]="page.size" [collectionSize]="page.totalCount"
[maxSize]="5" [boundaryLinks]="true" (pageChange)="applySystem()" [rotate]="true" [ellipses]="false">
Expand All @@ -46,6 +52,50 @@
</ngb-pagination>
<div *ngIf="selectedRows">{{selectedRows.length}} selected / {{page.totalCount}} total</div>
<div *ngIf="!selection">Total : {{page.totalCount}}</div>
<div>

<!--Column Selector-->
<ng-select class="column-selector custom auto-width" bindLabel="name"
placeholder="Columns : {{ columnActive }}" [items]="columns" [closeOnSelect]="false"
(change)="resetColumnDrop" [searchable]="false" [clearable]="false">

<ng-template ng-header-tmp>
<button class="btn btn-outline-info" style="margin: auto; width: 100%;"
(click)="resetDefaultColumns()">Reset</button>
</ng-template>

<!--Content in the top container-->
<ng-template ng-label-tmp>
<div>Selected : {{ columnActive }}</div>
</ng-template>

<!--List of columns (underline if selected)-->
<ng-template ng-option-tmp let-item="item" let-index="index">
<div [ngClass]="{'selected': item.active}" (click)="toggleColumn(item)">
{{item.displayName}}</div>
</ng-template>

</ng-select>

<!--Page size selector-->
<ng-select class="page-selector custom page-size" bindLabel="name"
placeholder="Show : {{ page.size }}" [(ngModel)]="page.size" [items]="[10, 25, 50, 100]"
[closeOnSelect]="true" [clearable]="false" (change)="applySystem()">


<!--Content in the top container-->
<ng-template ng-label-tmp>
<div>Show : {{ page.size }}</div>
</ng-template>

<!--Items list-->
<ng-template ng-option-tmp let-item="item" let-index="index">
<div>Show : {{ item }}</div>
</ng-template>

</ng-select>
</div>


</div>
</div>
Expand Down
Loading

0 comments on commit a219f87

Please sign in to comment.