verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 58 Releases Wiki Activity

#757 ticket.weekly moved to the misc menu on ticket.index

This commit is contained in:
Gerard 2018-11-08 09:20:06 +01:00
parent 8db866339c
commit a32378ea6b
11 changed files with 198 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/core/src/components/button-menu/button-menu.html Normal file
View File

@ -0,0 +1,13 @@
<div class="button-menu">
<button
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored button-menu__button"
ng-click="$ctrl.onClick($event)">
<vn-label vn-none translate>{{::$ctrl.label}}</vn-label>
<vn-icon vn-none icon="{{::$ctrl.icon}}"></vn-icon>
<vn-icon vn-none class="button-menu__arrow_down" icon="keyboard_arrow_down"></vn-icon>
</button>
<vn-drop-down
vn-id="drop-down"
on-select="$ctrl.onDropDownSelect(value)">
</vn-drop-down>
</div>

105
client/core/src/components/button-menu/button-menu.js Normal file
View File

@ -0,0 +1,105 @@
import ngModule from '../../module';
import Input from '../../lib/input';
import assignProps from '../../lib/assign-props';
import './style.scss';
export default class ButtonMenu extends Input {
constructor($element, $scope, $transclude) {
super($element, $scope);
this.$transclude = $transclude;
this.input = this.element.querySelector('.mdl-button');
}
get model() {
return this._model;
}
set model(value) {
this.dropDownAssign({model: value});
}
get data() {
return this._data;
}
set data(value) {
this.dropDownAssign({data: value});
}
get url() {
return this._url;
}
set url(value) {
this.dropDownAssign({url: value});
}
dropDownAssign(props) {
for (let prop in props)
this[`_${prop}`] = props[prop];
if (this.$.dropDown)
Object.assign(this.$.dropDown, props);
}
onClick(event) {
event.preventDefault();
this.emit('open');
this.showDropDown();
}
onDropDownSelect(value) {
this.field = value;
this.emit('change', {value});
}
showDropDown() {
assignProps(this, this.$.dropDown, [
'valueField',
'showField',
'showFilter',
'multiple',
'$transclude',
'translateFields',
'model',
'data',
'url',
'fields',
'include',
'where',
'order',
'limit',
'searchFunction'
]);
this.$.dropDown.show(this.input);
}
}
ButtonMenu.$inject = ['$element', '$scope', '$transclude'];
ngModule.component('vnButtonMenu', {
template: require('./button-menu.html'),
bindings: {
label: '@',
showField: '@?',
selection: '<?',
valueField: '@?',
selectFields: '<?',
disabled: '<?',
initialData: '<?',
showFilter: '<?',
field: '=?',
url: '@?',
data: '<?',
where: '@?',
order: '@?',
limit: '<?',
multiple: '<?',
onChange: '&?',
icon: '@?',
translateFields: '<?',
onOpen: '&?'
},
transclude: {
tplItem: '?tplItem'
},
controller: ButtonMenu
});

17
client/core/src/components/button-menu/style.scss Normal file
View File

@ -0,0 +1,17 @@
vn-button-menu{
position: relative;
.button-menu__button {
padding: 0 10px;
}
vn-label{
float: left;
margin-top: 1px;
}
vn-icon{
float: left;
margin-top: 3px;
}
vn-icon.button-menu__arrow_down{
margin: 6px 0 0 5px;
}
}

14
client/core/src/components/icon-menu/icon-menu.html
View File

@ -1,11 +1,11 @@
<div class="icon-menu">
<button
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-menu__button"
ng-click="$ctrl.onClick($event)">
<vn-label vn-none translate>{{::$ctrl.label}}</vn-label>
<vn-icon vn-none icon="{{::$ctrl.icon}}"></vn-icon>
<vn-icon vn-none class="icon-menu__arrow_down" icon="keyboard_arrow_down"></vn-icon>
</button>
<vn-icon
class="button"
ng-click="$ctrl.onClick($event)"
vn-none
icon="{{::$ctrl.icon}}">
</vn-icon>
<vn-drop-down
vn-id="drop-down"
on-select="$ctrl.onDropDownSelect(value)">

70
client/core/src/components/icon-menu/icon-menu.js
View File

@ -1,76 +1,12 @@
import ngModule from '../../module';
import Input from '../../lib/input';
import assignProps from '../../lib/assign-props';
import ButtonMenu from '../button-menu/button-menu';
import './style.scss';
export default class IconMenu extends Input {
export default class IconMenu extends ButtonMenu {
constructor($element, $scope, $transclude) {
super($element, $scope);
this.$transclude = $transclude;
this.input = this.element.querySelector('.mdl-button');
}
get model() {
return this._model;
}
set model(value) {
this.dropDownAssign({model: value});
}
get data() {
return this._data;
}
set data(value) {
this.dropDownAssign({data: value});
}
get url() {
return this._url;
}
set url(value) {
this.dropDownAssign({url: value});
}
dropDownAssign(props) {
for (let prop in props)
this[`_${prop}`] = props[prop];
if (this.$.dropDown)
Object.assign(this.$.dropDown, props);
}
onClick(event) {
event.preventDefault();
this.emit('open');
this.showDropDown();
}
onDropDownSelect(value) {
this.field = value;
this.emit('change', {value});
}
showDropDown() {
assignProps(this, this.$.dropDown, [
'valueField',
'showField',
'showFilter',
'multiple',
'$transclude',
'translateFields',
'model',
'data',
'url',
'fields',
'include',
'where',
'order',
'limit',
'searchFunction'
]);
this.$.dropDown.show(this.input);
this.input = this.element.querySelector('.button');
}
}
IconMenu.$inject = ['$element', '$scope', '$transclude'];

16
client/core/src/components/icon-menu/style.scss
View File

@ -1,17 +1,3 @@
vn-icon-menu{
position: relative;
.icon-menu__button {
padding: 0 10px;
}
vn-label{
float: left;
margin-top: 1px;
}
vn-icon{
float: left;
margin-top: 3px;
}
vn-icon.icon-menu__arrow_down{
margin: 6px 0 0 5px;
}
}

1
client/core/src/components/index.js
View File

@ -11,6 +11,7 @@ import './spinner/spinner';
import './snackbar/snackbar';
import './tooltip/tooltip';
import './icon-menu/icon-menu';
import './button-menu/button-menu';
import './popover/popover';
import './autocomplete/autocomplete';
import './drop-down/drop-down';

3
client/ticket/routes.json
View File

@ -205,7 +205,6 @@
{"state": "ticket.card.components", "icon": "icon-components"},
{"state": "ticket.card.saleTracking", "icon": "assignment"},
{"state": "ticket.card.picture", "icon": "image"},
{"state": "ticket.card.log", "icon": "history"},
{"state": "ticket.weekly", "icon": "history"}
{"state": "ticket.card.log", "icon": "history"}
]
}

23
client/ticket/src/index/index.html
View File

@ -9,11 +9,24 @@
<div margin-medium>
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar
panel="vn-ticket-search-panel"
on-search="model.applyFilter(null, $params);"
vn-focus>
</vn-searchbar>
<vn-horizontal>
<vn-three>
<vn-searchbar
panel="vn-ticket-search-panel"
on-search="model.applyFilter(null, $params);"
vn-focus>
</vn-searchbar>
</vn-three>
<vn-icon-menu
vn-id="more-button"
icon="more_vert"
show-filter="false"
value-field="callback"
translate-fields="['name']"
on-change="$ctrl.onMoreChange(value)"
on-open="$ctrl.onMoreOpen()">
</vn-icon-menu>
</vn-horizontal>
</vn-card>
</div>
<vn-card margin-medium-v pad-medium>

22
client/ticket/src/index/index.js
View File

@ -1,9 +1,27 @@
import ngModule from '../module';
import './style.scss';
export default class Controller {
constructor($scope) {
constructor($scope, $state) {
this.$ = $scope;
this.$state = $state;
this.selectedTicket = null;
this.moreOptions = [
{callback: this.goToTurns, name: 'Turns', always: true},
];
}
goToTurns() {
this.$state.go('ticket.weekly');
}
onMoreOpen() {
let options = this.moreOptions.filter(o => o.always || this.isChecked);
this.$.moreButton.data = options;
}
onMoreChange(callback) {
callback.call(this);
}
compareDate(date) {
@ -36,7 +54,7 @@ export default class Controller {
}
}
Controller.$inject = ['$scope'];
Controller.$inject = ['$scope', '$state'];
ngModule.component('vnTicketIndex', {
template: require('./index.html'),

12
client/ticket/src/index/style.scss Normal file
View File

@ -0,0 +1,12 @@
@import 'colors';
vn-ticket-index{
vn-icon-menu{
padding-top: 30px;
padding-left: 10px;
color: $main-01;
li {
color: initial;
}
}
}