vnCheck componentized, Client style changes
This commit is contained in:
Juan Ferrer Toribio
parent
88d50e3d00
commit
c4b184e5e8
|
|
@ -12,7 +12,7 @@ vn-login > div {
|
|||
|
||||
.box-wrapper {
|
||||
position: relative;
|
||||
max-width: 22em;
|
||||
max-width: 19em;
|
||||
margin: auto;
|
||||
height: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ No: No
|
|||
Yes, notify: Sí, notificar
|
||||
Notification sent!: ¡Notificación enviada!
|
||||
Notification error: Error al enviar notificación
|
||||
You changes the equivalent tax: Has cambiado el recargo de equivalencia
|
||||
Do you want to spread the change to their consignees?: ¿Deseas propagar el cambio a sus consignatarios?
|
||||
Yes, propagate: Si, propagar
|
||||
Equivalent tax spreaded: Recargo de equivalencia propagado
|
||||
Invoice by address: Facturar por consignatario
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</mg-ajax>
|
||||
<vn-horizontal>
|
||||
<vn-auto class="left-block">
|
||||
<vn-descriptor client="$ctrl.client"></vn-descriptor>
|
||||
<vn-client-descriptor client="$ctrl.client"></vn-client-descriptor>
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-auto>
|
||||
<vn-one>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<vn-card margin-medium-v>
|
||||
<vn-vertical>
|
||||
<vn-auto class="descriptor-header pointer" ui-sref="clients">
|
||||
<i class="material-icons">person</i>
|
||||
</vn-auto>
|
||||
<vn-auto pad-medium>
|
||||
<vn-vertical>
|
||||
<vn-horizontal ng-repeat="(field, title) in $ctrl.fieldsToShow">
|
||||
<strong vn-auto>{{::title}}:</strong>
|
||||
<vn-auto margin-small-left>
|
||||
<span ng-if="field.includes('credit')">{{$ctrl.client[field] || 0 | number:2}} €</span>
|
||||
<span ng-if="!field.includes('credit')">{{$ctrl.client[field]}}</span>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-auto>
|
||||
</vn-vertical>
|
||||
<div class="descriptor-header pointer" ui-sref="clients">
|
||||
<i class="material-icons">person</i>
|
||||
</div>
|
||||
<div pad-medium class="data">
|
||||
<h6>{{$ctrl.client.name}}</h6>
|
||||
<div>
|
||||
<span translate>Id</span> {{$ctrl.client.id}}
|
||||
</div>
|
||||
<div>
|
||||
<span translate>Phone</span> {{$ctrl.client.phone | phone}}
|
||||
</div>
|
||||
<div>
|
||||
<span translate>Credit</span> {{$ctrl.client.credit | number:2}}€
|
||||
</div>
|
||||
<div>
|
||||
<span translate>Secured credit</span> {{$ctrl.client.creditInsurance || 0 | number:2}}€
|
||||
</div>
|
||||
</div>
|
||||
</vn-card>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,9 @@
|
|||
import ngModule from '../module';
|
||||
import './style.scss';
|
||||
|
||||
export default class Controller {
|
||||
constructor($translate) {
|
||||
this.$translate = $translate;
|
||||
// CLient fields to display
|
||||
this.fields = ['id', 'name', 'phone', 'credit', 'creditInsurance'];
|
||||
this.fieldsToShow = {};
|
||||
}
|
||||
|
||||
// concat 2 Arrays without duplicates
|
||||
_concatFields(a, b) {
|
||||
return a.concat(b.filter(item => a.indexOf(item) < 0));
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
let fields = (this.moreFields && this.moreFields instanceof Array) ? this._concatFields(this.fields, this.moreFields) : this.fields;
|
||||
fields.forEach(field => {
|
||||
this.fieldsToShow[field] = this.$translate.instant(field);
|
||||
});
|
||||
}
|
||||
}
|
||||
Controller.$inject = ['$translate'];
|
||||
|
||||
ngModule.component('vnDescriptor', {
|
||||
ngModule.component('vnClientDescriptor', {
|
||||
template: require('./descriptor.html'),
|
||||
controller: Controller,
|
||||
bindings: {
|
||||
client: '<',
|
||||
moreFields: '<?'
|
||||
client: '<'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
import './descriptor.js';
|
||||
|
||||
describe('Client', () => {
|
||||
describe('Component vnDescriptor', () => {
|
||||
let $componentController;
|
||||
let $translate;
|
||||
let controller;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
});
|
||||
|
||||
beforeEach(angular.mock.inject((_$componentController_, _$translate_) => {
|
||||
$componentController = _$componentController_;
|
||||
$translate = _$translate_;
|
||||
controller = $componentController('vnDescriptor', {$translate: $translate});
|
||||
}));
|
||||
|
||||
describe('onInit()', () => {
|
||||
it('should create Object with basic fields', () => {
|
||||
controller.client = {
|
||||
id: 1,
|
||||
name: "Peter Parker",
|
||||
phone: null,
|
||||
mobile: "666666",
|
||||
credit: 300,
|
||||
creditInsurance: null
|
||||
};
|
||||
controller.$onInit();
|
||||
|
||||
expect(controller.fieldsToShow.id).toBe('id');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
vn-client-descriptor {
|
||||
.data span {
|
||||
font-size: .9em;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,17 +10,49 @@
|
|||
<vn-vertical pad-large>
|
||||
<vn-title>Fiscal data</vn-title>
|
||||
<vn-horizontal>
|
||||
<vn-textfield autofocus vn-two label="Social name" field="$ctrl.client.socialName" vn-acl="administrative"></vn-textfield>
|
||||
<vn-textfield vn-one label="Tax number" field="$ctrl.client.fi" vn-acl="administrative"></vn-textfield>
|
||||
<vn-check vn-one label="Is equalizated" field="$ctrl.client.isEqualizated" vn-acl="administrative"></vn-check>
|
||||
<vn-textfield
|
||||
vn-two
|
||||
vn-focus
|
||||
label="Social name"
|
||||
field="$ctrl.client.socialName"
|
||||
vn-acl="administrative">
|
||||
</vn-textfield>
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="Tax number"
|
||||
field="$ctrl.client.fi"
|
||||
vn-acl="administrative">
|
||||
</vn-textfield>
|
||||
<vn-check
|
||||
vn-one
|
||||
label="Is equalizated"
|
||||
field="$ctrl.client.isEqualizated"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-two label="Street" field="$ctrl.client.street" vn-focus vn-acl="administrative"></vn-textfield>
|
||||
<vn-textfield vn-one label="City" field="$ctrl.client.city" vn-acl="administrative"></vn-textfield>
|
||||
<vn-textfield
|
||||
vn-two
|
||||
label="Street"
|
||||
field="$ctrl.client.street"
|
||||
vn-acl="administrative">
|
||||
</vn-textfield>
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="City"
|
||||
field="$ctrl.client.city"
|
||||
vn-acl="administrative">
|
||||
</vn-textfield>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Postcode" field="$ctrl.client.postcode" vn-acl="administrative"></vn-textfield>
|
||||
<vn-autocomplete vn-one
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="Postcode"
|
||||
field="$ctrl.client.postcode"
|
||||
vn-acl="administrative">
|
||||
</vn-textfield>
|
||||
<vn-autocomplete
|
||||
vn-one
|
||||
initial-data="$ctrl.client.province"
|
||||
field="$ctrl.client.provinceFk"
|
||||
url="/client/api/Provinces"
|
||||
|
|
@ -29,7 +61,8 @@
|
|||
label="Province"
|
||||
vn-acl="administrative">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete vn-one
|
||||
<vn-autocomplete
|
||||
vn-one
|
||||
initial-data="$ctrl.client.country"
|
||||
field="$ctrl.client.countryFk"
|
||||
url="/client/api/Countries"
|
||||
|
|
@ -41,24 +74,48 @@
|
|||
</vn-horizontal>
|
||||
<vn-horizontal margin-small-bottom>
|
||||
<vn-one>
|
||||
<vn-check label="Active" field="$ctrl.client.isActive" vn-acl="administrative"></vn-check>
|
||||
<vn-check
|
||||
label="Active"
|
||||
field="$ctrl.client.isActive"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Invoice by address" field="$ctrl.client.hasToInvoiceByAddress" vn-acl="administrative"></vn-check>
|
||||
<vn-check
|
||||
label="Invoice by address"
|
||||
field="$ctrl.client.hasToInvoiceByAddress"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Verified data" field="$ctrl.client.isTaxDataChecked" vn-acl="administrative"></vn-check>
|
||||
<vn-check
|
||||
label="Verified data"
|
||||
field="$ctrl.client.isTaxDataChecked"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<vn-check label="Has to invoice" field="$ctrl.client.hasToInvoice" vn-acl="administrative"></vn-check>
|
||||
<vn-check
|
||||
label="Has to invoice"
|
||||
field="$ctrl.client.hasToInvoice"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check vn-one label="Invoice by mail" field="$ctrl.client.isToBeMailed" vn-acl="administrative"></vn-check>
|
||||
<vn-check
|
||||
label="Invoice by mail"
|
||||
field="$ctrl.client.isToBeMailed"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check vn-one label="Vies" field="$ctrl.client.isVies" vn-acl="administrative"></vn-check>
|
||||
<vn-check
|
||||
label="Vies"
|
||||
field="$ctrl.client.isVies"
|
||||
vn-acl="administrative">
|
||||
</vn-check>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
|
|
@ -67,17 +124,9 @@
|
|||
<vn-submit label="Save" vn-acl="administrative"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</form>
|
||||
<vn-dialog
|
||||
<vn-confirm
|
||||
vn-id="propagate-isEqualizated"
|
||||
question="You changed the equalization tax"
|
||||
message="Do you want to spread the change?"
|
||||
on-response="$ctrl.returnDialogEt(response)">
|
||||
<tpl-body>
|
||||
<vn-vertical>
|
||||
<vn-one text-center translate>You changes the equivalen
|
||||
<vn-one text-center translate>Do you want to spread the change to their consig
|
||||
</vn-vertical>
|
||||
</tpl-body>
|
||||
<tpl-buttons>
|
||||
<button response="CANCEL" translate>No</button>
|
||||
<button response="ACCEPT" translate>Yes, propagate</button>
|
||||
</tpl-buttons>
|
||||
</vn-dialog>
|
||||
</vn-confirm>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
No: No
|
||||
Yes, notify: Sí, notificar
|
||||
You changed the equalization tax: Has cambiado el recargo de equivalencia
|
||||
Do you want to spread the change: ¿Deseas propagar el cambio a sus consignatarios?
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<mg-ajax path="/client/api/Clients/filter" options="mgIndex"></mg-ajax>
|
||||
<div margin-medium>
|
||||
<div style="max-width: 40em; margin: 0 auto;">
|
||||
<div style="max-width: 36em; margin: 0 auto;">
|
||||
<vn-card>
|
||||
<vn-horizontal pad-medium>
|
||||
<vn-searchbar vn-one
|
||||
|
|
@ -8,13 +8,16 @@
|
|||
on-search="$ctrl.search(index)"
|
||||
advanced="true"
|
||||
popover="vn-client-search-panel"
|
||||
ignore-keys = "['page', 'size', 'search']"
|
||||
>
|
||||
ignore-keys = "['page', 'size', 'search']">
|
||||
</vn-searchbar>
|
||||
</vn-horizontal>
|
||||
</vn-card>
|
||||
<vn-card margin-medium-top>
|
||||
<vn-item-client ng-repeat="client in index.model.instances" title="View client" client="client"></vn-item-client>
|
||||
<vn-item-client
|
||||
ng-repeat="client in index.model.instances"
|
||||
title="View client"
|
||||
client="client">
|
||||
</vn-item-client>
|
||||
</vn-card>
|
||||
<vn-paging index="index" total="index.model.count"></vn-paging>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import ngModule from '../module';
|
||||
import './style.css';
|
||||
import './style.scss';
|
||||
import './item-client';
|
||||
|
||||
export default class Controller {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<a ui-sref="clientCard.basicData({ id: {{::$ctrl.client.id}} })" pad-medium border-solid-bottom>
|
||||
<div class="vn-item-client-name">{{::$ctrl.client.name}}</div>
|
||||
<div><span translate>Client id</span>: <b>{{::$ctrl.client.id}}</b></div>
|
||||
<div><span translate>Phone</span>: <b>{{::$ctrl.client.phone | phone}}</b></div>
|
||||
<div><span translate>Town/City</span>: <b>{{::$ctrl.client.city}}</b></div>
|
||||
<div><span translate>Email</span>: <b>{{::$ctrl.client.email}}</b></div>
|
||||
<h6>{{::$ctrl.client.name}}</h6>
|
||||
<div><span translate>Id</span> {{::$ctrl.client.id}}</div>
|
||||
<div><span translate>Phone</span> {{::$ctrl.client.phone | phone}}</div>
|
||||
<div><span translate>Town/City</span> {{::$ctrl.client.city}}</div>
|
||||
<div><span translate>Email</span> {{::$ctrl.client.email}}</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
vn-item-client {
|
||||
display: block;
|
||||
}
|
||||
vn-item-client a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
vn-item-client a:hover {
|
||||
color: white;
|
||||
background-color: #424242;
|
||||
}
|
||||
|
||||
.vn-item-client-name {
|
||||
font-family: vn-font-bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
vn-item-client {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: white;
|
||||
background-color: #424242;
|
||||
}
|
||||
span {
|
||||
font-size: .9em;
|
||||
color: #666;
|
||||
}
|
||||
a:hover span {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,13 +5,13 @@
|
|||
ng-repeat="n in $ctrl.observations"
|
||||
pad-small border-solid
|
||||
border-radius
|
||||
margin-small-bottom style="align-items: center;">
|
||||
<vn-horizontal>
|
||||
<vn-one >{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
|
||||
margin-small-bottom>
|
||||
<vn-horizontal margin-small-bottom style="color: #666">
|
||||
<vn-one>{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
|
||||
<vn-auto>{{::n.created | date:'dd/MM/yyyy HH:mm'}}</vn-auto>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<b>{{::n.text}}</b>
|
||||
{{::n.text}}
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
</vn-vertical>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" name="*[name]*" class="*[className]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]*>
|
||||
<span class="mdl-checkbox__label" translate>*[label]*</span>
|
||||
<input type="checkbox" class="mdl-checkbox__input"/>
|
||||
<span class="mdl-checkbox__label" translate>{{::$ctrl.label}}</span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,50 @@
|
|||
import ngModule from '../../module';
|
||||
import template from './check.html';
|
||||
import './style.css';
|
||||
import Input from '../../lib/input';
|
||||
import './style.scss';
|
||||
|
||||
directive.$inject = ['vnTemplate'];
|
||||
export default function directive(vnTemplate) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
template: (_, $attrs) =>
|
||||
vnTemplate.getNormalized(template, $attrs, {
|
||||
enabled: 'true',
|
||||
className: 'mdl-checkbox__input'
|
||||
}),
|
||||
link: function(scope, element, attrs) {
|
||||
scope.$watch(attrs.model, () => {
|
||||
let mdlField = element[0].firstChild.MaterialCheckbox;
|
||||
if (mdlField)
|
||||
mdlField.updateClasses_();
|
||||
export default class Controller extends Input {
|
||||
constructor($element, $scope) {
|
||||
super($element, $scope);
|
||||
componentHandler.upgradeElement(this.element.firstChild);
|
||||
this.mdlElement = this.element.firstChild.MaterialCheckbox;
|
||||
this.input.addEventListener('change', () => this.onChange());
|
||||
}
|
||||
set field(value) {
|
||||
this.input.checked = value == true;
|
||||
this.mdlUpdate();
|
||||
}
|
||||
get field() {
|
||||
return this.input.checked == true;
|
||||
}
|
||||
$onInit() {
|
||||
if (this.model) {
|
||||
this.model.$render = () => {
|
||||
this.input.checked = this.model.$viewValue || false;
|
||||
this.mdlUpdate();
|
||||
};
|
||||
this.$element.on('blur keyup change', () => {
|
||||
this.$.$evalAsync(() => {
|
||||
this.model.$setViewValue(this.input.checked);
|
||||
});
|
||||
});
|
||||
componentHandler.upgradeElement(element[0].firstChild);
|
||||
}
|
||||
};
|
||||
}
|
||||
onChange() {
|
||||
this.$.$applyAsync();
|
||||
}
|
||||
}
|
||||
ngModule.directive('vnCheck', directive);
|
||||
Controller.$inject = ['$element', '$scope', '$injector'];
|
||||
|
||||
ngModule.component('vnCheck', {
|
||||
template: require('./check.html'),
|
||||
controller: Controller,
|
||||
require: {
|
||||
model: '?ngModel'
|
||||
},
|
||||
bindings: {
|
||||
field: '=?',
|
||||
label: '@?',
|
||||
disabled: '<?',
|
||||
rule: '@?'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
<div>
|
||||
<tpl-body>
|
||||
<h6 class="dialog-title" translate>
|
||||
{{$ctrl.question}}
|
||||
</h6>
|
||||
<h6 translate>
|
||||
{{$ctrl.message}}
|
||||
{{::$ctrl.question}}
|
||||
</h6>
|
||||
<span translate>
|
||||
{{::$ctrl.message}}
|
||||
</span>
|
||||
</tpl-body>
|
||||
</div>
|
||||
<div class="button-bar" ng-click="$ctrl.onButtonClick($event)">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import ngModule from '../../module';
|
||||
import Dialog from '../dialog/dialog';
|
||||
import './style.css';
|
||||
import './style.scss';
|
||||
|
||||
export default class Confirm extends Dialog {}
|
||||
Dialog.$inject = ['$element'];
|
||||
|
|
@ -10,7 +10,7 @@ ngModule.component('vnConfirm', {
|
|||
bindings: {
|
||||
onResponse: '&',
|
||||
question: '@',
|
||||
message: '@'
|
||||
message: '@?'
|
||||
},
|
||||
controller: Confirm
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@
|
|||
ng-disabled="$ctrl.disabled"
|
||||
ng-readonly="$ctrl.readonly"
|
||||
ng-focus="$ctrl.hasFocus = true"
|
||||
ng-blur="$ctrl.hasFocus = false"
|
||||
/>
|
||||
ng-blur="$ctrl.hasFocus = false"/>
|
||||
<div class="mdl-chip__action">
|
||||
<i class="material-icons"
|
||||
ng-if="$ctrl.hasInfo"
|
||||
|
|
@ -26,5 +25,5 @@
|
|||
clear
|
||||
</i>
|
||||
</div>
|
||||
<label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>
|
||||
<label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,12 @@ import Input from '../../lib/input';
|
|||
import './style.scss';
|
||||
|
||||
export default class Textfield extends Input {
|
||||
constructor($element, $scope, $attrs, $timeout, vnTemplate) {
|
||||
super($element);
|
||||
|
||||
constructor($element, $scope, $attrs, vnTemplate) {
|
||||
super($element, $scope);
|
||||
vnTemplate.normalizeInputAttrs($attrs);
|
||||
|
||||
this.$scope = $scope;
|
||||
this.$attrs = $attrs;
|
||||
this.$element = $element;
|
||||
this.$timeout = $timeout;
|
||||
|
||||
this._value = null;
|
||||
this.type = $attrs.type || 'text';
|
||||
this.showActions = false;
|
||||
this.input = $element[0].querySelector('input');
|
||||
this.hasInfo = Boolean($attrs.info);
|
||||
this.info = $attrs.info || null;
|
||||
this.hasFocus = false;
|
||||
|
|
@ -35,17 +27,16 @@ export default class Textfield extends Input {
|
|||
set tabIndex(value) {
|
||||
this.input.tabIndex = value;
|
||||
}
|
||||
mdlUpdate() {
|
||||
let mdlField = this.$element[0].firstChild.MaterialTextfield;
|
||||
if (mdlField)
|
||||
mdlField.updateClasses_();
|
||||
}
|
||||
clear() {
|
||||
this.value = null;
|
||||
this.input.focus();
|
||||
}
|
||||
mdlUpdate() {
|
||||
let mdlElement = this.element.firstChild.MaterialTextfield;
|
||||
if (mdlElement) mdlElement.updateClasses_();
|
||||
}
|
||||
}
|
||||
Textfield.$inject = ['$element', '$scope', '$attrs', '$timeout', 'vnTemplate'];
|
||||
Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
|
||||
|
||||
ngModule.component('vnTextfield', {
|
||||
template: require('./textfield.html'),
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ directive.$inject = ['$interpolate', '$compile', '$window'];
|
|||
export function directive(interpolate, compile, $window) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
require: ['ngModel', '?^^form'],
|
||||
require: ['ngModel', '^^?form'],
|
||||
link: link
|
||||
};
|
||||
|
||||
|
|
@ -32,14 +32,14 @@ export function directive(interpolate, compile, $window) {
|
|||
if (!validations || validations.length == 0)
|
||||
return;
|
||||
|
||||
let input = ctrl[0];
|
||||
let ngModel = ctrl[0];
|
||||
let form = ctrl[1];
|
||||
let errorSpan = angular.element('<span class="mdl-textfield__error"></span>');
|
||||
let errorMsg;
|
||||
let errorShown = false;
|
||||
|
||||
input.$options.$$options.allowInvalid = true;
|
||||
input.$validators.entity = value => {
|
||||
ngModel.$options.$$options.allowInvalid = true;
|
||||
ngModel.$validators.entity = value => {
|
||||
try {
|
||||
validateAll(value, validations);
|
||||
return true;
|
||||
|
|
@ -51,7 +51,7 @@ export function directive(interpolate, compile, $window) {
|
|||
};
|
||||
|
||||
scope.$watch(() => {
|
||||
return (form.$submitted || input.$dirty) && input.$invalid;
|
||||
return (form.$submitted || ngModel.$dirty) && ngModel.$invalid;
|
||||
}, value => {
|
||||
let parent = element.parent();
|
||||
|
||||
|
|
|
|||
|
|
@ -18,10 +18,12 @@ export default class Component {
|
|||
* Contructor.
|
||||
*
|
||||
* @param {HTMLElement} $element The main component element
|
||||
* @param {$rootScope.Scope} $scope The element scope
|
||||
*/
|
||||
constructor($element) {
|
||||
constructor($element, $scope) {
|
||||
this.$ = $scope;
|
||||
this.$element = $element;
|
||||
this.element = $element[0];
|
||||
this.element.$ctrl = this;
|
||||
}
|
||||
}
|
||||
Component.$inject = ['$element'];
|
||||
Component.$inject = ['$element', '$scope'];
|
||||
|
|
|
|||
|
|
@ -4,10 +4,26 @@ import Component from './component';
|
|||
* Component that host an input.
|
||||
*/
|
||||
export default class Input extends Component {
|
||||
constructor($element, $scope) {
|
||||
super($element, $scope);
|
||||
this.input = this.element.querySelector('input');
|
||||
}
|
||||
set disabled(value) {
|
||||
this.input.disabled = value == true;
|
||||
this.mdlUpdate();
|
||||
}
|
||||
get disabled() {
|
||||
return this.input.disabled;
|
||||
}
|
||||
select() {
|
||||
this.input.select();
|
||||
}
|
||||
focus() {
|
||||
this.input.focus();
|
||||
}
|
||||
mdlUpdate() {
|
||||
if (this.mdlElement)
|
||||
this.mdlElement.updateClasses_();
|
||||
}
|
||||
}
|
||||
Input.$inject = ['$element', '$scope'];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
function validKey(key) {
|
||||
export default function validKey(key) {
|
||||
let keycode = key.keyCode || key;
|
||||
|
||||
let valid =
|
||||
|
|
@ -11,5 +11,3 @@ function validKey(key) {
|
|||
|
||||
return valid;
|
||||
}
|
||||
|
||||
export default validKey;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,3 @@ export default function getModifiedData(object, objectOld) {
|
|||
|
||||
return newObject;
|
||||
}
|
||||
|
||||
export const NAME = 'getDataModified';
|
||||
ngModule.value(NAME, getModifiedData);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ export function factory($http, $window, $ocLazyLoad, $translatePartialLoader, $t
|
|||
.then(() => {
|
||||
let promises = [];
|
||||
|
||||
// FIXME: https://github.com/angular-translate/angular-translate/pull/1674
|
||||
$translatePartialLoader.addPart(moduleName);
|
||||
promises.push(new Promise(resolve => {
|
||||
$translate.refresh().then(
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
* Rewrited CSS rules from Material Design Lite.
|
||||
* FIXME: don't use !important
|
||||
*/
|
||||
body {
|
||||
line-height: initial;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.mdl-textfield {
|
||||
width: 100%;
|
||||
|
|
@ -35,7 +39,7 @@
|
|||
.mdl-dialog{
|
||||
width: 400px;
|
||||
font-family: vn-font;
|
||||
line-height:60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<vn-vertical full-height class="bg-content">
|
||||
<vn-topbar vn-auto>
|
||||
<a ui-sref="home" title="{{'Home' | translate}}">
|
||||
<img class="logo" src="./logo.svg" alt="Logo" ></img>
|
||||
<img class="logo" src="./logo.svg" alt="Logo"></img>
|
||||
</a>
|
||||
<vn-spinner enable="$root.loading"></vn-spinner>
|
||||
<vn-main-menu></vn-main-menu>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ vn-app {
|
|||
vn-topbar {
|
||||
.logo {
|
||||
float: left;
|
||||
height: 30px;
|
||||
height: 1.8em;
|
||||
padding: 1em;
|
||||
}
|
||||
vn-spinner {
|
||||
float: left;
|
||||
padding: .9em;
|
||||
padding: .4em;
|
||||
}
|
||||
}
|
||||
.main-view {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<h6 vn-one translate="Modules access"></h6>
|
||||
</vn-horizontal>
|
||||
<vn-module-container>
|
||||
<a ng-repeat="mod in $ctrl.modules" ui-sref="{{::mod.route.state}}" class="vn-module mdl-shadow--4dp">
|
||||
<a ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}" class="vn-module mdl-shadow--4dp">
|
||||
<vn-vertical class="home__icon">
|
||||
<vn-one>
|
||||
<vn-icon ng-if="mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
|
||||
<img ng-if="mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
|
||||
<vn-icon ng-if="::mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
|
||||
<img ng-if="::mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<h4 translate="{{::mod.name}}"></h4>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<vn-horizontal>
|
||||
<ul style="list-style-type: none; margin: 0; padding: 0; width: 100%; color: #666;">
|
||||
<vn-menu-item ng-repeat="item in $ctrl.items" item = "item"></vn-menu-item>
|
||||
<vn-menu-item ng-repeat="item in $ctrl.items" item="::item"></vn-menu-item>
|
||||
</ul>
|
||||
</vn-horizontal>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<li ng-class="{active: $ctrl.item.active}">
|
||||
<a ui-sref="{{$ctrl.item.href}}" style="display: block; text-decoration: none; color: inherit; padding: .5em 2em;">
|
||||
<a ui-sref="{{::$ctrl.item.href}}" style="display: block; text-decoration: none; color: inherit; padding: .5em 2em;">
|
||||
<i class="material-icons" style="float: right; margin-left: .4em;">keyboard_arrow_right</i>
|
||||
<i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{$ctrl.item.icon}}</i>
|
||||
<span translate>{{$ctrl.item.description}}</span>
|
||||
<i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{::$ctrl.item.icon}}</i>
|
||||
<span translate>{{::$ctrl.item.description}}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -1,6 +1,21 @@
|
|||
<div style="position: fixed; top: 0; right: 0; padding: .8em 1.5em; z-index: 10;">
|
||||
<vn-icon icon="apps" id="apps" translate-attr="{title: 'Applications'}"></vn-icon>
|
||||
<vn-icon icon="language" translate-attr="{title: 'Change language'}" ng-click="$ctrl.onChangeLanguage()"></vn-icon>
|
||||
<ul for="langs" class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small>
|
||||
<li
|
||||
ng-repeat="lang in ::$ctrl.langs"
|
||||
class="mdl-menu__item"
|
||||
ng-click="$ctrl.onChangeLangClick(lang)">
|
||||
<span>{{::lang}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<vn-icon icon="language" id="langs" translate-attr="{title: 'Change language'}"></vn-icon>
|
||||
<ul for="apps" class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small>
|
||||
<li ng-repeat="mod in ::$ctrl.modules" class="mdl-menu__item" ui-sref="{{::mod.route.state}}">
|
||||
<vn-icon ng-if="::mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
|
||||
<img ng-if="::mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
|
||||
<span translate="{{::mod.name}}"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<vn-icon icon="exit_to_app" translate-attr="{title: 'Logout'}" ng-click="$ctrl.onLogoutClick()"></vn-icon>
|
||||
<!--
|
||||
TODO: Keep it commented until they are functional
|
||||
|
|
@ -8,11 +23,4 @@
|
|||
<vn-icon icon="notifications" translate-attr="{title: 'Notifications'}"></vn-icon>
|
||||
<vn-icon icon="account_circle" translate-attr="{title: 'Profile'}"></vn-icon>
|
||||
-->
|
||||
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small for="apps">
|
||||
<li class="mdl-menu__item" ng-repeat="mod in $ctrl.modules track by $index" ui-sref="{{::mod.route.state}}">
|
||||
<vn-icon ng-if="mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
|
||||
<img ng-if="mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
|
||||
<span translate="{{::mod.name}}"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@ export default class MainMenu {
|
|||
this.$translate = $translate;
|
||||
this.$window = $window;
|
||||
this.modules = modulesFactory.getModules();
|
||||
this.langs = $translate.getAvailableLanguageKeys();
|
||||
}
|
||||
onLogoutClick() {
|
||||
this.$window.location = '/logout';
|
||||
}
|
||||
onChangeLanguage() {
|
||||
let lang = this.$translate.use() == 'en' ? 'es' : 'en';
|
||||
onChangeLangClick(lang) {
|
||||
this.$translate.use(lang);
|
||||
console.log(`Locale changed: ${lang}`);
|
||||
}
|
||||
}
|
||||
MainMenu.$inject = ['$translate', '$window', 'modulesFactory'];
|
||||
|
|
|
|||
|
|
@ -1,33 +1,32 @@
|
|||
vn-main-menu {
|
||||
& > div > vn-icon {
|
||||
font-size: 2.5em;
|
||||
font-size: 2.2em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #FF9300;
|
||||
}
|
||||
}
|
||||
|
||||
li.mdl-menu__item{
|
||||
li.mdl-menu__item {
|
||||
background-color: #FF9300;
|
||||
margin-bottom: 8px;
|
||||
color: white;
|
||||
img{
|
||||
img {
|
||||
max-width: 18px;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
i{
|
||||
i {
|
||||
float: left;
|
||||
padding-top: 13px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
li.mdl-menu__item:hover{
|
||||
li.mdl-menu__item:hover {
|
||||
background-color: #FF9300;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
li.mdl-menu__item:last-child{
|
||||
li.mdl-menu__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,10 +6,13 @@ export const appName = 'salix';
|
|||
const ngModule = ng.module('salix', ['vnCore']);
|
||||
export default ngModule;
|
||||
|
||||
config.$inject = ['$translatePartialLoaderProvider', '$httpProvider'];
|
||||
export function config($translatePartialLoaderProvider, $httpProvider) {
|
||||
config.$inject = ['$translatePartialLoaderProvider', '$httpProvider', '$qProvider'];
|
||||
export function config($translatePartialLoaderProvider, $httpProvider, $qProvider) {
|
||||
$translatePartialLoaderProvider.addPart(appName);
|
||||
$httpProvider.interceptors.push('vnInterceptor');
|
||||
|
||||
// TODO: Handle or remove unhandled rejections
|
||||
// $qProvider.errorOnUnhandledRejections(false);
|
||||
}
|
||||
ngModule.config(config);
|
||||
|
||||
|
|
|
|||
|
|
@ -107,8 +107,8 @@ vn-main-block {
|
|||
margin: 0 auto;
|
||||
|
||||
.left-block {
|
||||
max-width: 20em;
|
||||
min-width: 18em;
|
||||
width: 16em;
|
||||
min-width: 16em;
|
||||
padding-left: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ h6 {
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
padding: 0;
|
||||
margin: .4em 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: .2em;
|
||||
font-family: vn-font-bold;
|
||||
}
|
||||
|
|
@ -87,8 +87,8 @@ gulp.task('install', () => {
|
|||
|
||||
// Deployment
|
||||
|
||||
gulp.task('build', ['clean'], () => {
|
||||
return gulp.start('routes', 'locales', 'webpack', 'docker-compose', 'nginx-conf');
|
||||
gulp.task('build', ['clean'], async () => {
|
||||
await runSequenceP(['routes', 'locales', 'webpack', 'docker-compose', 'nginx-conf']);
|
||||
});
|
||||
|
||||
gulp.task('docker-compose', async () => {
|
||||
|
|
@ -161,7 +161,7 @@ gulp.task('nginx-stop', async () => {
|
|||
} catch (e) {}
|
||||
});
|
||||
|
||||
gulp.task('nginx-conf', async () => {
|
||||
gulp.task('nginx-conf', ['nginx-stop'], async () => {
|
||||
const mustache = require('mustache');
|
||||
|
||||
if (!await fs.exists(nginxTemp))
|
||||
|
|
|
|||
Loading…
Reference in New Issue