vnDialog opens in body

This commit is contained in:
Juan Ferrer 2019-10-27 01:30:01 +02:00
parent dc18c4ba2a
commit 47998aaa97
34 changed files with 480 additions and 396 deletions

View File

@ -1,4 +1,4 @@
<root>
<div>
<tpl-body>
<h6 translate>{{::$ctrl.message}}</h6>
<span translate>{{::$ctrl.question}}</span>
@ -7,4 +7,4 @@
<button response="CANCEL" translate>Cancel</button>
<button response="ACCEPT" translate>Accept</button>
</tpl-buttons>
</root>
</div>

View File

@ -1,24 +1,27 @@
import ngModule from '../../module';
import Dialog from '../dialog/dialog';
import Dialog from '../dialog';
import template from './confirm.html';
export default class Confirm extends Dialog {
constructor($element, $scope, $compile) {
super($element);
let cTemplate = $compile(template)($scope)[0];
this.body = cTemplate.querySelector('tpl-body');
this.buttons = cTemplate.querySelector('tpl-buttons');
constructor($element, $, $transclude) {
super($element, $, $transclude);
let $template = angular.element(template);
let slots = $transclude.$$boundTransclude.$$slots;
let bodyLinkFn = this.$compile($template.find('tpl-body'));
slots.body = this.createBoundTranscludeFn(bodyLinkFn);
let buttonsLinkFn = this.$compile($template.find('tpl-buttons'));
slots.buttons = this.createBoundTranscludeFn(buttonsLinkFn);
}
}
Confirm.$inject = ['$element', '$scope', '$compile'];
ngModule.component('vnConfirm', {
template: require('../dialog/dialog.html'),
ngModule.vnComponent('vnConfirm', {
controller: Confirm,
transclude: true,
bindings: {
onOpen: '&?',
onResponse: '&',
question: '@',
message: '@?'
},
controller: Confirm
}
});

View File

@ -1,17 +0,0 @@
<div ng-mousedown="$ctrl.onDialogMouseDown($event)">
<button
class="close"
ng-click="$ctrl.hide()"
translate-attr="{title: 'Close'}">
<vn-icon icon="clear"></vn-icon>
</button>
<form>
<div
class="body">
</div>
<div
class="buttons"
ng-click="$ctrl.onButtonClick($event)">
</div>
</form>
</div>

View File

@ -1,126 +0,0 @@
import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';
/**
* Dialog component.
*
* @property {HTMLElement} body The dialog HTML body
* @property {HTMLElement} buttons The dialog HTML buttons
*/
export default class Dialog extends Component {
constructor($element, $scope, $transclude) {
super($element, $scope);
this.shown = false;
this.$element.addClass('vn-dialog');
this.element.addEventListener('mousedown',
e => this.onBackgroundMouseDown(e));
if ($transclude) {
$transclude($scope.$parent, tClone => {
this.body = tClone[0];
}, null, 'body');
$transclude($scope.$parent, tClone => {
this.buttons = tClone[0];
}, null, 'buttons');
}
}
set body(value) {
this.element.querySelector('.body').appendChild(value);
}
set buttons(value) {
this.element.querySelector('.buttons').appendChild(value);
}
/**
* Displays the dialog to the user.
*/
show() {
if (this.shown) return;
this.shown = true;
this.keyDownHandler = e => this.onkeyDown(e);
this.document.addEventListener('keydown', this.keyDownHandler);
this.element.style.display = 'flex';
this.transitionTimeout = setTimeout(() => this.$element.addClass('shown'), 30);
this.emit('open');
}
/**
* Hides the dialog calling the response handler.
*/
hide() {
this.fireResponse();
this.realHide();
this.emit('close');
}
/**
* Calls the response handler.
*
* @param {String} response The response code
* @return {Boolean} %true if response was canceled, %false otherwise
*/
fireResponse(response) {
let cancel = false;
if (this.onResponse)
cancel = this.onResponse({response: response});
return cancel;
}
realHide() {
if (!this.shown) return;
this.element.style.display = 'none';
this.document.removeEventListener('keydown', this.keyDownHandler);
this.lastEvent = null;
this.shown = false;
this.transitionTimeout = setTimeout(() => this.$element.removeClass('shown'), 30);
}
onButtonClick(event) {
let buttons = this.element.querySelector('.buttons');
let tplButtons = buttons.querySelector('tpl-buttons');
let node = event.target;
while (node.parentNode != tplButtons) {
if (node == buttons) return;
node = node.parentNode;
}
let response = node.getAttribute('response');
let cancel = this.fireResponse(response);
if (cancel !== false) this.realHide();
}
onDialogMouseDown(event) {
this.lastEvent = event;
}
onBackgroundMouseDown(event) {
if (event != this.lastEvent)
this.hide();
}
onkeyDown(event) {
if (event.keyCode == 27) // Esc
this.hide();
}
$onDestroy() {
clearTimeout(this.transitionTimeout);
}
}
Dialog.$inject = ['$element', '$scope', '$transclude'];
ngModule.component('vnDialog', {
template: require('./dialog.html'),
transclude: {
body: 'tplBody',
buttons: '?tplButtons'
},
bindings: {
onResponse: '&?'
},
controller: Dialog
});

View File

@ -0,0 +1,17 @@
<vn-button
ng-click="$ctrl.hide()"
translate-attr="{title: 'Close'}"
icon="clear"
class="flat close">
</vn-button>
<form>
<div
class="body"
ng-transclude="body">
</div>
<div
class="buttons"
ng-click="$ctrl.onButtonClick($event)"
ng-transclude="buttons">
</div>
</form>

View File

@ -0,0 +1,73 @@
import ngModule from '../../module';
import Popup from '../popup';
import template from './index.html';
import './style.scss';
/**
* Dialog component.
*
* @property {HTMLElement} body The dialog HTML body
* @property {HTMLElement} buttons The dialog HTML buttons
*/
export default class Dialog extends Popup {
constructor($element, $, $transclude) {
super($element, $, $transclude);
let linkFn = this.$compile(template);
$transclude.$$boundTransclude = this.createBoundTranscludeFn(linkFn);
}
/**
* Hides the dialog calling the response handler.
*/
hide() {
// this.fireResponse();
super.hide();
}
/**
* Calls the response handler.
*
* @param {String} response The response code
* @return {Boolean} %true if response was canceled, %false otherwise
*/
fireResponse(response) {
let cancel;
if (this.onResponse)
cancel = this.onResponse({response: response});
return cancel;
}
onButtonClick(event) {
let buttons = this.popup.querySelector('.buttons');
let tplButtons = buttons.querySelector('tpl-buttons');
let node = event.target;
while (node.parentNode != tplButtons) {
if (node == buttons) return;
node = node.parentNode;
}
let response = node.getAttribute('response');
let cancel = this.fireResponse(response);
let close = res => {
if (res !== false) super.hide();
};
if (cancel instanceof Object && cancel.then)
cancel.then(close);
else
close(cancel);
}
}
ngModule.vnComponent('vnDialog', {
controller: Dialog,
transclude: {
body: 'tplBody',
buttons: '?tplButtons'
},
bindings: {
onResponse: '&?'
}
});

View File

@ -1,55 +1,27 @@
@import "effects";
.vn-dialog {
display: none;
justify-content: center;
align-items: center;
z-index: 20;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .6);
opacity: 0;
transition: opacity 300ms ease-in-out;
padding: 3em;
box-sizing: border-box;
.vn-dialog > .window {
padding: $spacing-lg;
&.shown {
opacity: 1;
& > .close {
@extend %clickable;
text-transform: uppercase;
background-color: transparent;
border: none;
border-radius: .1em;
position: absolute;
top: 0;
right: 0;
padding: .3em;
color: #666;
}
& > div {
position: relative;
box-shadow: 0 0 .4em $color-shadow;
background-color: $color-bg-panel;
border-radius: .2em;
overflow: auto;
padding: 2em;
box-sizing: border-box;
max-height: 100%;
tpl-body {
& > form {
& > .body > tpl-body {
display: block;
min-width: 16em;
}
& > button.close {
@extend %clickable;
text-transform: uppercase;
background-color: transparent;
border: none;
border-radius: .1em;
position: absolute;
top: 0;
right: 0;
padding: .3em;
& > vn-icon {
display: block;
color: #666;
}
}
& > form > .buttons {
& > .buttons > tpl-buttons {
display: block;
margin-top: 1.5em;
text-align: right;

View File

@ -3,7 +3,6 @@ import './crud-model/crud-model';
import './watcher/watcher';
import './textfield/textfield';
import './icon/icon';
import './dialog/dialog';
import './confirm/confirm';
import './title/title';
import './subtitle/subtitle';
@ -28,6 +27,7 @@ import './chip';
import './data-viewer';
import './date-picker';
import './debug-info';
import './dialog';
import './field';
import './float-button';
import './icon-menu';
@ -39,6 +39,7 @@ import './input-time';
import './input-file';
import './label';
import './list';
import './popup';
import './radio';
import './submit';
import './table';

View File

@ -0,0 +1,7 @@
<div ng-mousedown="$ctrl.onBgMouseDown($event)">
<div
class="window"
ng-mousedown="$ctrl.onWindowMouseDown($event)"
ng-transclude>
</div>
</div>

View File

@ -0,0 +1,125 @@
import ngModule from '../../module';
import Component from '../../lib/component';
import template from './index.html';
import './style.scss';
/**
* Base class for windows displayed over application content.
*/
export default class Popup extends Component {
constructor($element, $scope, $transclude) {
super($element, $scope);
this.$transclude = $transclude;
this._shown = false;
this.displayMode = 'centered';
}
$onDestroy() {
this.hide();
}
/**
* @type {Boolean} Wether to show or hide the popup.
*/
get shown() {
return this._shown;
}
set shown(value) {
if (value)
this.show();
else
this.hide();
}
/**
* Displays the dialog to the user.
*/
show() {
if (this.shown) return;
this._shown = true;
let linkFn = this.$compile(template);
this.$contentScope = this.$.$new();
this.popup = linkFn(this.$contentScope, null,
{parentBoundTranscludeFn: this.$transclude}
)[0];
let classList = this.popup.classList;
classList.add(this.displayMode);
classList.add(...this.constructor.$classNames);
if (!this.transitionTimeout)
this.document.body.appendChild(this.popup);
this.keyDownHandler = e => this.onkeyDown(e);
this.document.addEventListener('keydown', this.keyDownHandler);
this.deregisterCallback = this.$transitions.onStart({},
() => this.hide());
this.$timeout.cancel(this.transitionTimeout);
this.transitionTimeout = this.$timeout(() => {
this.transitionTimeout = null;
classList.add('shown');
}, 10);
this.emit('open');
}
/**
* Hides the dialog calling the response handler.
*/
hide() {
if (!this.shown) return;
this.document.removeEventListener('keydown', this.keyDownHandler);
this.keyDownHandler = null;
if (this.deregisterCallback) {
this.deregisterCallback();
this.deregisterCallback = null;
}
this.popup.classList.remove('shown');
this.$timeout.cancel(this.transitionTimeout);
this.transitionTimeout = this.$timeout(() => {
this.transitionTimeout = null;
this.document.body.removeChild(this.popup);
this.$contentScope.$destroy();
this.popup.remove();
this.popup = null;
this.emit('close');
}, 200);
this.lastEvent = null;
this._shown = false;
this.emit('closeStart');
}
onWindowMouseDown(event) {
this.lastEvent = event;
}
onBgMouseDown(event) {
if (!event.defaultPrevented && event != this.lastEvent)
this.hide();
}
onkeyDown(event) {
if (!event.defaultPrevented && event.key == 'Escape')
this.hide();
}
}
Popup.$inject = ['$element', '$scope', '$transclude'];
ngModule.vnComponent('vnPopup', {
controller: Popup,
transclude: true,
bindings: {
shown: '=?'
}
});

View File

@ -0,0 +1,40 @@
@import "effects";
.vn-popup {
z-index: 20;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
&.shown {
opacity: 1;
transform: scale3d(1, 1, 1);
}
&.centered {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .6);
padding: 1em;
box-sizing: border-box;
& > .window {
position: relative;
box-shadow: 0 0 .4em $color-shadow;
background-color: $color-bg-panel;
border-radius: .2em;
overflow: auto;
box-sizing: border-box;
max-height: 100%;
transform: scale3d(.5, .5, .5);
transition: transform 200ms ease-in-out;
}
&.shown > .window {
transform: scale3d(1, 1, 1);
}
}
}

View File

@ -1,5 +1,5 @@
import ngModule from '../module';
import Dialog from '../components/dialog/dialog';
import Dialog from '../components/dialog';
import {kebabToCamel} from '../lib/string';
/**

View File

@ -56,6 +56,31 @@ export default class Component extends EventEmitter {
$t(string, params) {
return this.$translate.instant(string, params);
}
createBoundTranscludeFn(transcludeFn) {
let scope = this.$;
let previousBoundTranscludeFn = this.$transclude.$$boundTransclude;
function vnBoundTranscludeFn(
transcludedScope,
cloneFn,
controllers,
futureParentElement,
containingScope) {
if (!transcludedScope) {
transcludedScope = scope.$new(false, containingScope);
transcludedScope.$$transcluded = true;
}
return transcludeFn(transcludedScope, cloneFn, {
parentBoundTranscludeFn: previousBoundTranscludeFn,
transcludeControllers: controllers,
futureParentElement: futureParentElement
});
}
vnBoundTranscludeFn.$$slots = previousBoundTranscludeFn.$$slots;
return vnBoundTranscludeFn;
}
}
Component.$inject = ['$element', '$scope'];

View File

@ -6,10 +6,19 @@
* @return {String} The camelized string
*/
export function kebabToCamel(str) {
let camelCased = str.replace(/-([a-z])/g, function(g) {
return g[1].toUpperCase();
});
return camelCased;
return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
}
/**
* Transforms a camelCase to kebab-case.
*
* @param {String} str The camelized string
* @return {String} The hyphenized string
*/
export function camelToKebab(str) {
let kebabCased = str.substr(1)
.replace(/[A-Z]/g, g => `-${g[0]}`);
return `${str.charAt(0)}${kebabCased}`.toLowerCase();
}
/**

View File

@ -1,4 +1,5 @@
import {ng, ngDeps} from './vendor';
import {camelToKebab} from './lib/string';
const ngModule = ng.module('vnCore', ngDeps);
export default ngModule;
@ -21,14 +22,24 @@ ngModule.vnComponent = function(name, options) {
let parent = Object.getPrototypeOf(controller);
let parentOptions = parent.$options || {};
let parentTransclude = parentOptions.transclude;
let transclude = parentTransclude instanceof Object
? Object.assign({}, parentTransclude)
: parentTransclude;
if (options.transclude instanceof Object) {
if (transclude instanceof Object)
Object.assign(transclude, options.transclude);
else
transclude = options.transclude;
} else if (options.transclude !== undefined)
transclude = options.transclude;
let mergedOptions = Object.assign({},
parentOptions,
options,
{
transclude: Object.assign({},
parentOptions.transclude,
options.transclude
),
transclude,
bindings: Object.assign({},
parentOptions.bindings,
options.bindings
@ -41,6 +52,10 @@ ngModule.vnComponent = function(name, options) {
);
controller.$options = mergedOptions;
let classNames = [camelToKebab(name)];
if (parent.$classNames) classNames = classNames.concat(parent.$classNames);
controller.$classNames = classNames;
return this.component(name, mergedOptions);
};

View File

@ -4,8 +4,10 @@
cursor: pointer;
transition: background-color 250ms ease-out;
&:hover {
&:hover,
&:focus {
background-color: $color-hover-cd;
outline: none;
}
}
@ -13,8 +15,10 @@
cursor: pointer;
transition: opacity 250ms ease-out;
&:hover {
&:hover,
&:focus {
opacity: $color-hover-dc;
outline: none;
}
}

View File

@ -56,24 +56,7 @@
}
}
.vn-dialog.dialog-summary {
vn-card {
border: none;
box-shadow: none;
}
& > div > button.close {
display: none;
}
& > div {
padding: 0
}
tpl-body {
width: auto;
}
.buttons {
display: none;
}
vn-check label span {
font-size: .9em
}
.vn-popup .summary {
border: none;
box-shadow: none;
}

View File

@ -63,13 +63,9 @@
</vn-card>
</vn-data-viewer>
</div>
<vn-dialog
vn-id="summary"
class="dialog-summary">
<tpl-body>
<vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="summary">
<vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
</vn-popup>
<vn-confirm
vn-id="clone"
on-response="$ctrl.onCloneAccept(response)"

View File

@ -123,7 +123,7 @@
vn-id="descriptor">
</vn-item-descriptor-popover>
<vn-popover
class="edit dialog-summary"
class="edit"
vn-id="edit-popover"
on-open="$ctrl.getManaSalespersonMana()"
on-close="$ctrl.mana = null">

View File

@ -74,10 +74,7 @@
vn-id="workerDescriptor"
worker-fk="$ctrl.selectedWorker">
</vn-worker-descriptor-popover>
<vn-dialog class="dialog-summary"
vn-id="dialog-summary-claim">
<tpl-body>
<vn-claim-summary claim="$ctrl.claimSelected"></vn-claim-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="dialog-summary-claim">
<vn-claim-summary claim="$ctrl.claimSelected"></vn-claim-summary>
</vn-popup>
<vn-scroll-up></vn-scroll-up>

View File

@ -69,12 +69,9 @@
fixed-bottom-right>
<vn-float-button icon="person_add"></vn-float-button>
</a>
<vn-dialog class="dialog-summary"
vn-id="dialog-summary-client">
<tpl-body>
<vn-client-summary
client="$ctrl.clientSelected">
</vn-client-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="dialog-summary-client">
<vn-client-summary
client="$ctrl.clientSelected">
</vn-client-summary>
</vn-popup>
<vn-scroll-up></vn-scroll-up>

View File

@ -71,15 +71,11 @@
</vn-card>
</vn-data-viewer>
</div>
<vn-dialog
vn-id="summary"
class="dialog-summary">
<tpl-body>
<vn-invoice-out-summary
invoice-out="$ctrl.selectedInvoiceOut">
</vn-invoice-out-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="summary">
<vn-invoice-out-summary
invoice-out="$ctrl.selectedInvoiceOut">
</vn-invoice-out-summary>
</vn-popup>
<vn-client-descriptor-popover
vn-id="clientDescriptor">
</vn-client-descriptor-popover>

View File

@ -131,11 +131,9 @@
<a ui-sref="item.create" vn-tooltip="New item" vn-bind="+" fixed-bottom-right>
<vn-float-button icon="add"></vn-float-button>
</a>
<vn-dialog vn-id="preview" class="dialog-summary">
<tpl-body>
<vn-item-summary item="$ctrl.itemSelected"></vn-item-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="preview">
<vn-item-summary item="$ctrl.itemSelected"></vn-item-summary>
</vn-popup>
<vn-confirm
vn-id="clone"
on-response="$ctrl.onCloneAccept(response)"

View File

@ -82,11 +82,7 @@
vn-id="workerDescriptor"
worker-fk="$ctrl.selectedWorker">
</vn-worker-descriptor-popover>
<vn-dialog
vn-id="summary"
class="dialog-summary">
<tpl-body>
<vn-order-summary order="$ctrl.selectedOrder"></vn-order-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="summary">
<vn-order-summary order="$ctrl.selectedOrder"></vn-order-summary>
</vn-popup>
<vn-scroll-up></vn-scroll-up>

View File

@ -63,15 +63,11 @@
</vn-card>
</vn-data-viewer>
</div>
<vn-dialog
vn-id="summary"
class="dialog-summary">
<tpl-body>
<vn-route-summary
route="$ctrl.routeSelected">
</vn-route-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="summary">
<vn-route-summary
route="$ctrl.routeSelected">
</vn-route-summary>
</vn-popup>
<vn-worker-descriptor-popover
vn-id="workerDescriptor"
worker-fk="$ctrl.selectedWorker">

View File

@ -91,46 +91,43 @@
</div>
</div>
</div>
<vn-dialog class="dialog-summary"
vn-id="addTurn">
<tpl-body>
<div class="vn-pa-md">
<h5 style="text-align: center">
<span translate>In which day you want to add the ticket?</span>
</h5>
<vn-tool-bar class="vn-mt-md">
<vn-button
label="Monday"
ng-click="$ctrl.addTurn(0)">
</vn-button>
<vn-button
label="Tuesday"
ng-click="$ctrl.addTurn(1)">
</vn-button>
<vn-button
label="Wednesday"
ng-click="$ctrl.addTurn(2)">
</vn-button>
<vn-button
label="Thursday"
ng-click="$ctrl.addTurn(3)">
</vn-button>
<vn-button
label="Friday"
ng-click="$ctrl.addTurn(4)">
</vn-button>
<vn-button
label="Saturday"
ng-click="$ctrl.addTurn(5)">
</vn-button>
<vn-button
label="Sunday"
ng-click="$ctrl.addTurn(6)">
</vn-button>
</vn-tool-bar>
</div>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="addTurn">
<div class="vn-pa-md">
<h5 style="text-align: center">
<span translate>In which day you want to add the ticket?</span>
</h5>
<vn-tool-bar class="vn-mt-md">
<vn-button
label="Monday"
ng-click="$ctrl.addTurn(0)">
</vn-button>
<vn-button
label="Tuesday"
ng-click="$ctrl.addTurn(1)">
</vn-button>
<vn-button
label="Wednesday"
ng-click="$ctrl.addTurn(2)">
</vn-button>
<vn-button
label="Thursday"
ng-click="$ctrl.addTurn(3)">
</vn-button>
<vn-button
label="Friday"
ng-click="$ctrl.addTurn(4)">
</vn-button>
<vn-button
label="Saturday"
ng-click="$ctrl.addTurn(5)">
</vn-button>
<vn-button
label="Sunday"
ng-click="$ctrl.addTurn(6)">
</vn-button>
</vn-tool-bar>
</div>
</vn-popup>
<vn-confirm
vn-id="deleteConfirmation"
on-response="$ctrl.deleteTicket(response)"
@ -155,7 +152,6 @@
</vn-confirm>
<vn-dialog
vn-id="changeShippedDialog"
on-open="$ctrl.focusInput()"
on-response="$ctrl.changeShipped(response)">
<tpl-body>
<div>
@ -166,7 +162,8 @@
vn-id="newShipped"
vn-one
ng-model="$ctrl.newShipped"
label="Shipped hour">
label="Shipped hour"
vn-focus>
</vn-input-time>
</div>
</tpl-body>

View File

@ -283,10 +283,6 @@ class Controller {
);
}
}
focusInput() {
this.$scope.newShipped.focus();
}
}
Controller.$inject = ['$state', '$scope', '$http', 'vnApp', '$translate', 'aclService'];

View File

@ -148,13 +148,9 @@
<a ui-sref="ticket.create" vn-tooltip="New ticket" vn-bind="+" fixed-bottom-right>
<vn-float-button icon="add"></vn-float-button>
</a>
<vn-dialog
vn-id="summary"
class="dialog-summary">
<tpl-body>
<vn-ticket-summary ticket="$ctrl.selectedTicket"></vn-ticket-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="summary">
<vn-ticket-summary ticket="$ctrl.selectedTicket"></vn-ticket-summary>
</vn-popup>
<vn-client-descriptor-popover
vn-id="clientDescriptor">
</vn-client-descriptor-popover>

View File

@ -204,8 +204,7 @@
</vn-item-descriptor-popover>
<!-- Edit Price Popover -->
<vn-popover
class="dialog-summary"
<vn-popover
vn-id="edit-price-popover"
on-open="$ctrl.getManaSalespersonMana()"
on-close="$ctrl.mana = null">
@ -239,8 +238,7 @@
</vn-popover>
<!-- Edit Popover -->
<vn-popover
class="dialog-summary"
<vn-popover
vn-id="edit-popover"
on-open="$ctrl.getManaSalespersonMana()"
on-close="$ctrl.mana = null">

View File

@ -60,13 +60,9 @@
</vn-card>
</vn-data-viewer>
</div>
<vn-dialog
vn-id="summary"
class="dialog-summary">
<tpl-body>
<vn-travel-summary
travel="$ctrl.travelSelected">
</vn-travel-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="summary">
<vn-travel-summary
travel="$ctrl.travelSelected">
</vn-travel-summary>
</vn-popup>
<vn-scroll-up></vn-scroll-up>

View File

@ -29,45 +29,44 @@
model="model"
class="vn-my-md">
<vn-card>
<div class="vn-list">
<a
ng-repeat="worker in workers track by worker.id"
ui-sref="worker.card.summary({id: worker.id})"
translate-attr="{title: 'View worker'}"
class="vn-list-item searchResult">
<vn-horizontal>
<vn-one>
<h6>{{::worker.nickname}}</h6>
<vn-label-value label="Id"
value="{{::worker.id}}">
</vn-label-value>
<vn-label-value label="User"
value="{{::worker.userName}}">
</vn-label-value>
<vn-label-value label="Email"
value="{{::worker.email}}">
</vn-label-value>
<vn-label-value label="Department"
value="{{::worker.department}}">
</vn-label-value>
</vn-one>
<vn-horizontal class="buttons">
<vn-icon-button
ng-click="$ctrl.preview($event, worker)"
vn-tooltip="Preview"
icon="desktop_windows">
</vn-icon-button>
<div class="vn-list">
<a
ng-repeat="worker in workers track by worker.id"
ui-sref="worker.card.summary({id: worker.id})"
translate-attr="{title: 'View worker'}"
class="vn-list-item searchResult">
<vn-horizontal>
<vn-one>
<h6>{{::worker.nickname}}</h6>
<vn-label-value label="Id"
value="{{::worker.id}}">
</vn-label-value>
<vn-label-value label="User"
value="{{::worker.userName}}">
</vn-label-value>
<vn-label-value label="Email"
value="{{::worker.email}}">
</vn-label-value>
<vn-label-value label="Department"
value="{{::worker.department}}">
</vn-label-value>
</vn-one>
<vn-horizontal class="buttons">
<vn-icon-button
ng-click="$ctrl.preview($event, worker)"
vn-tooltip="Preview"
icon="desktop_windows">
</vn-icon-button>
</vn-horizontal>
</vn-horizontal>
</vn-horizontal>
</a>
</vn-card>
</a>
</div>
</vn-card>
</vn-data-viewer>
</div>
<vn-dialog vn-id="preview" class="dialog-summary">
<tpl-body>
<vn-worker-summary
worker="$ctrl.selectedWorker">
</vn-worker-summary>
</tpl-body>
</vn-dialog>
<vn-popup vn-id="preview">
<vn-worker-summary
worker="$ctrl.selectedWorker">
</vn-worker-summary>
</vn-popup>
<vn-scroll-up></vn-scroll-up>

View File

@ -31,7 +31,6 @@ export default class Controller {
callback.call(this);
}
}
Controller.$inject = ['$scope', '$state'];
ngModule.component('vnWorkerIndex', {

View File

@ -147,10 +147,6 @@ class Controller {
this.newTime = now;
this.selectedWeekday = weekday;
this.$.addTimeDialog.show();
const selector = '[vn-id=addTimeDialog] input[type=time]';
const input = this.$element[0].querySelector(selector);
input.focus();
}
addTime(response) {