#801 Deprecar grid antiguo
This commit is contained in:
Gerard
parent
ee5527d4ed
commit
9f5395c804
|
|
@ -1,23 +0,0 @@
|
||||||
<div class="{{$ctrl.className}}" ng-mouseover="$ctrl.mouseIsOver = true" ng-mouseleave="$ctrl.mouseIsOver = false">
|
|
||||||
<vn-horizontal ng-if="$ctrl.text" class="orderly">
|
|
||||||
<vn-none
|
|
||||||
class="title"
|
|
||||||
ng-class="{'noDrop': $ctrl.orderLocked, 'pointer' : !$ctrl.orderLocked}"
|
|
||||||
ng-click="$ctrl.onClick($event)" translate>
|
|
||||||
{{::$ctrl.text}}
|
|
||||||
</vn-none>
|
|
||||||
<vn-none ng-if="!$ctrl.orderLocked">
|
|
||||||
<vn-icon
|
|
||||||
icon="arrow_drop_down"
|
|
||||||
ng-class="{'active': $ctrl.showArrow('DESC')}"
|
|
||||||
ng-click="$ctrl.onClick($event, 'DESC')"
|
|
||||||
></vn-icon>
|
|
||||||
<vn-icon
|
|
||||||
icon="arrow_drop_up"
|
|
||||||
ng-class="{'active': $ctrl.showArrow('ASC')}"
|
|
||||||
ng-click="$ctrl.onClick($event, 'ASC')"
|
|
||||||
></vn-icon>
|
|
||||||
</vn-none>
|
|
||||||
</vn-horizontal>
|
|
||||||
<ng-transclude ng-if="!$ctrl.text"></ng-transclude>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import ngModule from '../../module';
|
|
||||||
|
|
||||||
export default class ColumnHeader {
|
|
||||||
constructor($attrs) {
|
|
||||||
this.order = undefined;
|
|
||||||
this.mouseIsOver = false;
|
|
||||||
this.orderLocked = ($attrs.orderLocked !== undefined);
|
|
||||||
}
|
|
||||||
onClick(event, order) {
|
|
||||||
if (!this.orderLocked) {
|
|
||||||
if (order) {
|
|
||||||
this.order = order;
|
|
||||||
} else if (this.order === 'ASC') {
|
|
||||||
this.order = 'DESC';
|
|
||||||
} else {
|
|
||||||
this.order = 'ASC';
|
|
||||||
}
|
|
||||||
this.gridHeader.selectColum(this);
|
|
||||||
}
|
|
||||||
if (event)
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
showArrow(type) {
|
|
||||||
if (this.orderLocked)
|
|
||||||
return false;
|
|
||||||
|
|
||||||
let showArrow = (this.gridHeader && this.gridHeader.currentColumn && this.gridHeader.currentColumn.field === this.field && this.order === type);
|
|
||||||
let showOther = (this.gridHeader && this.gridHeader.currentColumn && this.gridHeader.currentColumn.field === this.field && this.order !== type);
|
|
||||||
if (type === 'DESC' && this.mouseIsOver && !showOther) {
|
|
||||||
showArrow = true;
|
|
||||||
}
|
|
||||||
return showArrow;
|
|
||||||
}
|
|
||||||
$onInit() {
|
|
||||||
if (this.defaultOrder && !this.orderLocked) {
|
|
||||||
this.order = this.defaultOrder;
|
|
||||||
this.onClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnHeader.$inject = ['$attrs'];
|
|
||||||
|
|
||||||
ngModule.component('vnColumnHeader', {
|
|
||||||
template: require('./column-header.html'),
|
|
||||||
bindings: {
|
|
||||||
field: '@?',
|
|
||||||
text: '@?',
|
|
||||||
className: '@?',
|
|
||||||
defaultOrder: '@?'
|
|
||||||
},
|
|
||||||
require: {
|
|
||||||
gridHeader: '^^vnGridHeader'
|
|
||||||
},
|
|
||||||
controller: ColumnHeader,
|
|
||||||
transclude: true
|
|
||||||
});
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
import './column-header.js';
|
|
||||||
|
|
||||||
describe('Component vnColumnHeader', () => {
|
|
||||||
let $componentController;
|
|
||||||
let controller;
|
|
||||||
let $event;
|
|
||||||
let $attrs;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
angular.mock.module('client');
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(angular.mock.inject(_$componentController_ => {
|
|
||||||
$componentController = _$componentController_;
|
|
||||||
$event = {
|
|
||||||
preventDefault: () => {}
|
|
||||||
};
|
|
||||||
$attrs = {};
|
|
||||||
controller = $componentController('vnColumnHeader', {$attrs});
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('onClick()', () => {
|
|
||||||
it(`should change the ordenation to DESC (descendant) if it was ASC (ascendant)`, () => {
|
|
||||||
controller.gridHeader = {selectColum: () => {}};
|
|
||||||
controller.order = 'ASC';
|
|
||||||
controller.onClick($event);
|
|
||||||
|
|
||||||
expect(controller.order).toEqual('DESC');
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should change the ordenation to ASC (ascendant) if it wasnt ASC`, () => {
|
|
||||||
controller.gridHeader = {selectColum: () => {}};
|
|
||||||
controller.order = 'DESC or any other value that might occur';
|
|
||||||
controller.onClick($event);
|
|
||||||
|
|
||||||
expect(controller.order).toEqual('ASC');
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should call the selectColum() function after changing a value`, () => {
|
|
||||||
controller.gridHeader = {selectColum: () => {}};
|
|
||||||
controller.order = 'Change me!';
|
|
||||||
spyOn(controller.gridHeader, 'selectColum');
|
|
||||||
controller.onClick($event);
|
|
||||||
|
|
||||||
expect(controller.gridHeader.selectColum).toHaveBeenCalledWith(controller);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('showArrow()', () => {
|
|
||||||
it(`should return true when the type is DESC and MouseIsOver`, () => {
|
|
||||||
controller.gridHeader = {selectColum: () => {}};
|
|
||||||
controller.mouseIsOver = true;
|
|
||||||
let result = controller.showArrow('DESC');
|
|
||||||
|
|
||||||
expect(result).toEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should return true if many conditions are true`, () => {
|
|
||||||
controller.gridHeader = {currentColumn: {field: 'fields should be identical'}};
|
|
||||||
controller.field = 'fields should be identical';
|
|
||||||
controller.order = 'ASC';
|
|
||||||
let result = controller.showArrow('ASC');
|
|
||||||
|
|
||||||
expect(result).toEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should return false without type being DESC or any other values being true`, () => {
|
|
||||||
controller.gridHeader = {currentColumn: {field: 'fields should be identical'}};
|
|
||||||
controller.field = 'I am the controllers field';
|
|
||||||
controller.order = 'ASC';
|
|
||||||
let result = controller.showArrow('ASC');
|
|
||||||
|
|
||||||
expect(result).toEqual(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('onInit()', () => {
|
|
||||||
it(`should never call onClick()`, () => {
|
|
||||||
spyOn(controller, 'onClick');
|
|
||||||
controller.$onInit();
|
|
||||||
|
|
||||||
expect(controller.onClick).not.toHaveBeenCalledWith();
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should define controllers order as per defaultOrder then call onClick()`, () => {
|
|
||||||
controller.defaultOrder = 'ASC';
|
|
||||||
spyOn(controller, 'onClick');
|
|
||||||
controller.$onInit();
|
|
||||||
|
|
||||||
expect(controller.order).toEqual('ASC');
|
|
||||||
expect(controller.onClick).toHaveBeenCalledWith();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<vn-horizontal class="list" ng-transclude></vn-horizontal>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import ngModule from '../../module';
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
export default class GridHeader {
|
|
||||||
constructor() {
|
|
||||||
this.currentColumn = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectColum(col) {
|
|
||||||
if (this.currentColumn && this.currentColumn.field != col.field)
|
|
||||||
this.currentColumn.order = undefined;
|
|
||||||
|
|
||||||
this.currentColumn = col;
|
|
||||||
if (this.onOrder)
|
|
||||||
this.onOrder(this.currentColumn);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngModule.component('vnGridHeader', {
|
|
||||||
template: require('./grid-header.html'),
|
|
||||||
transclude: true,
|
|
||||||
bindings: {
|
|
||||||
onOrder: '&?'
|
|
||||||
},
|
|
||||||
controller: GridHeader
|
|
||||||
});
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import './grid-header.js';
|
|
||||||
|
|
||||||
describe('Component vnGridHeader', () => {
|
|
||||||
let $componentController;
|
|
||||||
let controller;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
angular.mock.module('client');
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(angular.mock.inject(_$componentController_ => {
|
|
||||||
$componentController = _$componentController_;
|
|
||||||
controller = $componentController('vnGridHeader', {});
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('selectColum()', () => {
|
|
||||||
it(`should set controller currentColumn to equal the argument received`, () => {
|
|
||||||
let col = {columnStuff: 'some stuff'};
|
|
||||||
controller.selectColum(col);
|
|
||||||
|
|
||||||
expect(controller.currentColumn).toEqual(col);
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should set controller currentColumn.order to undefined then set currentColumn to equal the argument received`, () => {
|
|
||||||
controller.currentColumn = {field: 'some field', order: 'ordered'};
|
|
||||||
let col = {columnStuff: 'some stuff'};
|
|
||||||
controller.selectColum(col);
|
|
||||||
|
|
||||||
expect(controller.currentColumn.order).not.toBeDefined();
|
|
||||||
expect(controller.currentColumn).toEqual(col);
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should set controller currentColumn.order to undefined then call onOrder passing currentColumn as argument`, () => {
|
|
||||||
controller.onOrder = () => {};
|
|
||||||
spyOn(controller, 'onOrder');
|
|
||||||
let col = {columnStuff: 'some stuff'};
|
|
||||||
controller.selectColum(col);
|
|
||||||
|
|
||||||
expect(controller.currentColumn).toEqual(col);
|
|
||||||
expect(controller.onOrder).toHaveBeenCalledWith(col);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
@import "colors";
|
|
||||||
|
|
||||||
vn-grid-header {
|
|
||||||
border-bottom: 3px solid $lines;
|
|
||||||
font-weight: bold;
|
|
||||||
.orderly{
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
vn-none{
|
|
||||||
min-width: 17px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vn-icon{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
i {
|
|
||||||
padding: 0;
|
|
||||||
margin: -2px -17px 0 0;
|
|
||||||
opacity: 0.2;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
i {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
[min-none]{
|
|
||||||
min-width: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
import './style.scss';
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
@import "effects";
|
|
||||||
|
|
||||||
.vn-grid {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
& > thead,
|
|
||||||
& > tbody,
|
|
||||||
& > tfoot {
|
|
||||||
tr {
|
|
||||||
td, th {
|
|
||||||
text-align: left;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
&[number]{
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > thead, & > tbody {
|
|
||||||
border-bottom: 3px solid $lines;
|
|
||||||
}
|
|
||||||
& > tbody > tr {
|
|
||||||
border-bottom: 1px solid $lines;
|
|
||||||
transition: background-color 200ms ease-in-out;
|
|
||||||
|
|
||||||
&.clickable {
|
|
||||||
@extend %clickable;
|
|
||||||
}
|
|
||||||
&.success {
|
|
||||||
background-color: rgba(163, 209, 49, 0.3);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(163, 209, 49, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.warning {
|
|
||||||
background-color: rgba(247, 147, 30, 0.3);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(247, 147, 30, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -16,9 +16,6 @@ import './popover/popover';
|
||||||
import './autocomplete/autocomplete';
|
import './autocomplete/autocomplete';
|
||||||
import './drop-down/drop-down';
|
import './drop-down/drop-down';
|
||||||
import './menu/menu';
|
import './menu/menu';
|
||||||
import './column-header/column-header';
|
|
||||||
import './grid-header/grid-header';
|
|
||||||
import './grid/grid';
|
|
||||||
import './multi-check/multi-check';
|
import './multi-check/multi-check';
|
||||||
import './date-picker/date-picker';
|
import './date-picker/date-picker';
|
||||||
import './button/button';
|
import './button/button';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue