merge conflicts
This commit is contained in:
commit
9218aaf059
|
@ -1,26 +1,6 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Iniciar",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "${workspaceRoot}/services/auth/server/server.js",
|
||||
"stopOnEntry": false,
|
||||
"args": [],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"preLaunchTask": null,
|
||||
"runtimeExecutable": null,
|
||||
"runtimeArgs": [
|
||||
"--nolazy"
|
||||
],
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
},
|
||||
"console": "internalConsole",
|
||||
"sourceMaps": false,
|
||||
"outFiles": []
|
||||
},
|
||||
{
|
||||
"name": "Asociar",
|
||||
"type": "node",
|
||||
|
|
|
@ -43,7 +43,7 @@ node
|
|||
|
||||
stage ("Stopping/Removing Docker")
|
||||
{
|
||||
sh "docker-compose down --rmi all"
|
||||
sh "docker-compose down --rmi 'all'"
|
||||
}
|
||||
|
||||
stage ("Generar dockers")
|
||||
|
@ -51,4 +51,4 @@ node
|
|||
sh "docker-compose up -d --build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
62
README.md
62
README.md
|
@ -1,53 +1,67 @@
|
|||
# Project Title
|
||||
|
||||
One Paragraph of project description goes here
|
||||
Salix is an Enterprise resource planning (ERP) integrated management of core business processes, in real-time and mediated by software and technology developed with the stack listed below.
|
||||
|
||||
Salix is also the scientific name of a beautifull tree! :)
|
||||
|
||||
### Prerequisites
|
||||
|
||||
For testing purposes you will need to install globally the following items:
|
||||
npm install -g karma
|
||||
npm install -g karma-cli
|
||||
|
||||
## Getting Started // ### Installing
|
||||
|
||||
Pull from repo.
|
||||
|
||||
install nodejs v6 or above.
|
||||
You will need to install globally the following items:
|
||||
$ npm install -g karma
|
||||
$ npm install -g karma-cli
|
||||
$ npm install -g gulp
|
||||
$ npm install -g webpack
|
||||
$ npm install -g nodemon
|
||||
|
||||
install nginx globally.
|
||||
|
||||
Ask a senior dev for the datasources.development.json files required to run the project.
|
||||
## Getting Started // ### Installing
|
||||
|
||||
Pull from repository.
|
||||
|
||||
install nodejs v6.
|
||||
|
||||
Ask a senior developer for the datasources.development.json files required to run the project.
|
||||
|
||||
on root run:
|
||||
npm install
|
||||
gulp install
|
||||
$ npm install
|
||||
$ gulp install
|
||||
|
||||
lauching nginx:
|
||||
./dev.sh
|
||||
$ ./dev.sh
|
||||
|
||||
launching frontend:
|
||||
gulp client
|
||||
$ gulp client
|
||||
or start nginx before client on sequence
|
||||
$ gulp clientDev
|
||||
|
||||
launching backend:
|
||||
gulp services
|
||||
$ gulp services
|
||||
or start the local database before services on sequence
|
||||
$ gulp serivcesDev
|
||||
|
||||
Manually reset local fixtures:
|
||||
$ gulp docker
|
||||
|
||||
to check docker images and containers status:
|
||||
$ docker images
|
||||
$ docker ps -a
|
||||
|
||||
## Running the tests
|
||||
|
||||
for client-side unit tests run from project's root:
|
||||
karma start
|
||||
$ karma start
|
||||
|
||||
for server-side unit tests run from project's root:
|
||||
npm run testWatch or test for single run
|
||||
$ npm run test
|
||||
|
||||
### Break down into end to end tests
|
||||
|
||||
on root run:
|
||||
Run local database plus e2e paths:
|
||||
$ gulp e2e
|
||||
|
||||
gulp docker
|
||||
|
||||
wait 10 secs for db to be ready
|
||||
|
||||
npm run e2e
|
||||
Just the e2e paths as the fixtures are untainted:
|
||||
$ npm run e2e
|
||||
|
||||
## Built With
|
||||
|
||||
|
|
|
@ -48,7 +48,6 @@ export default class Controller {
|
|||
onLoginErr(json) {
|
||||
this.loading = false;
|
||||
this.password = '';
|
||||
this.focusUser();
|
||||
|
||||
let message;
|
||||
|
||||
|
@ -64,6 +63,7 @@ export default class Controller {
|
|||
}
|
||||
|
||||
this.showMessage(message);
|
||||
this.focusUser();
|
||||
}
|
||||
focusUser() {
|
||||
this.$.userField.select();
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Datos básicos",
|
||||
"description": "Basic data",
|
||||
"icon": "person"
|
||||
}
|
||||
}, {
|
||||
|
@ -37,7 +37,7 @@
|
|||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Datos fiscales",
|
||||
"description": "Fiscal data",
|
||||
"icon": "account_balance"
|
||||
}
|
||||
}, {
|
||||
|
@ -64,7 +64,7 @@
|
|||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Consignatarios",
|
||||
"description": "Addresses",
|
||||
"icon": "local_shipping"
|
||||
}
|
||||
}, {
|
||||
|
@ -83,7 +83,7 @@
|
|||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Acceso web",
|
||||
"description": "Web access",
|
||||
"icon": "language"
|
||||
}
|
||||
}, {
|
||||
|
@ -99,13 +99,67 @@
|
|||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Notas",
|
||||
"description": "Notes",
|
||||
"icon": "insert_drive_file"
|
||||
}
|
||||
}, {
|
||||
"url": "/create",
|
||||
"state": "clientCard.notes.create",
|
||||
"component": "vn-note-create"
|
||||
}, {
|
||||
"url": "/credit",
|
||||
"abstract": true,
|
||||
"state": "clientCard.credit",
|
||||
"component": "ui-view"
|
||||
}, {
|
||||
"url": "/list",
|
||||
"state": "clientCard.credit.list",
|
||||
"component": "vn-client-credit-list",
|
||||
"params": {
|
||||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Credit",
|
||||
"icon": "credit_card"
|
||||
}
|
||||
}, {
|
||||
"url": "/create",
|
||||
"state": "clientCard.credit.create",
|
||||
"component": "vn-client-credit-create",
|
||||
"params": {
|
||||
"client": "$ctrl.client"
|
||||
}
|
||||
}, {
|
||||
"url": "/greuge",
|
||||
"abstract": true,
|
||||
"state": "clientCard.greuge",
|
||||
"component": "ui-view"
|
||||
}, {
|
||||
"url": "/list",
|
||||
"state": "clientCard.greuge.list",
|
||||
"component": "vn-client-greuge-list",
|
||||
"params": {
|
||||
"client": "$ctrl.client"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Greuge",
|
||||
"icon": "work"
|
||||
}
|
||||
}, {
|
||||
"url": "/create",
|
||||
"state": "clientCard.greuge.create",
|
||||
"component": "vn-client-greuge-create",
|
||||
"params": {
|
||||
"client": "$ctrl.client"
|
||||
}
|
||||
}, {
|
||||
"url": "/mandate",
|
||||
"state": "clientCard.mandate",
|
||||
"component": "vn-client-mandate",
|
||||
"menu": {
|
||||
"description": "Mandate",
|
||||
"icon": "pan_tool"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -12,10 +12,10 @@
|
|||
<vn-title>Address</vn-title>
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<vn-check label="enabled" field="$ctrl.address.isEnabled"></vn-check>
|
||||
<vn-check label="Enabled" field="$ctrl.address.isEnabled"></vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Is equalizated" field="$ctrl.address.isEqualizated"></vn-check>
|
||||
<vn-check label="Is equalizated" field="$ctrl.address.isEqualizated" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
|
|
|
@ -5,29 +5,31 @@
|
|||
<vn-horizontal>
|
||||
<vn-title vn-one>Addresses</vn-title>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal ng-repeat="i in index.model track by i.id" class="pad-medium-top" style="align-items: center;">
|
||||
<vn-auto style="border-radius: .5em;" class="pad-small border-solid"
|
||||
<vn-horizontal ng-repeat="i in index.model.items track by i.id" class="pad-medium-top" style="align-items: center;">
|
||||
<vn-one border-radius class="pad-small border-solid"
|
||||
ng-class="{'bg-dark-item': i.isDefaultAddress,'bg-opacity-item': !i.isEnabled && !i.isDefaultAddress}">
|
||||
<vn-horizontal style="align-items: center;">
|
||||
<vn-none pad-medium-h style="color:#FFA410;">
|
||||
<i class="material-icons" ng-if="i.isDefaultAddress">star</i>
|
||||
<i class="material-icons pointer" ng-if="!i.isDefaultAddress&&i.isEnabled" vn-tooltip="Set as default" tooltip-position="left" ng-click="$ctrl.setDefault(i.id)">star_border</i>
|
||||
</vn-none>
|
||||
<vn-auto>
|
||||
<vn-one>
|
||||
<div><b>{{::i.consignee}}</b></div>
|
||||
<div>{{::i.street}}</div>
|
||||
<div>{{::i.city}}, {{::i.province}}</div>
|
||||
<div>{{::i.phone}}, {{::i.mobile}}</div>
|
||||
</vn-auto>
|
||||
<a vn-empty ui-sref="clientCard.addresses.edit({addressId: {{i.id}}})">
|
||||
</vn-one>
|
||||
<a vn-auto ui-sref="clientCard.addresses.edit({addressId: {{i.id}}})">
|
||||
<vn-icon-button icon="edit"></vn-icon-button>
|
||||
</a>
|
||||
</vn-horizontal>
|
||||
</vn-auto>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-paging index="index"></vn-paging>
|
||||
|
||||
<vn-paging index="index" total="index.model.total"></vn-paging>
|
||||
|
||||
<vn-float-button
|
||||
fixed-bottom-right
|
||||
ui-sref="clientCard.addresses.create"
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
{
|
||||
"Addresses": "Consignatarios",
|
||||
"Set as default": "Establecer como predeterminado"
|
||||
}
|
|
@ -1,5 +1,4 @@
|
|||
{
|
||||
"Basic data": "Datos básicos",
|
||||
"Comercial Name": "Nombre comercial",
|
||||
"Tax number": "NIF/CIF",
|
||||
"Social name": "Razón social",
|
||||
|
|
|
@ -19,28 +19,24 @@
|
|||
label="Pay method">
|
||||
</vn-autocomplete>
|
||||
<vn-textfield vn-two label="IBAN" field="$ctrl.client.iban" vn-acl="administrative"></vn-textfield>
|
||||
<vn-textfield vn-one label="Vencimiento" field="$ctrl.client.dueDay" vn-acl="administrative"></vn-textfield>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Crédito" field="$ctrl.client.credit" vn-acl="administrative"></vn-textfield>
|
||||
<vn-textfield vn-one label="Crédito asegurado" field="$ctrl.client.creditInsurance" vn-acl="administrative"></vn-textfield>
|
||||
<vn-textfield vn-one label="Due day" field="$ctrl.client.dueDay" vn-acl="administrative"></vn-textfield>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal margin-medium-bottom>
|
||||
<vn-one>
|
||||
<vn-check label="Recibido core VNH" field="$ctrl.client.coreVnh" vn-acl="administrative"></vn-check>
|
||||
<vn-check label="Received core VNH" field="$ctrl.client.hasCoreVnh" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Recibido core VNL" field="$ctrl.client.coreVnl" vn-acl="administrative"></vn-check>
|
||||
<vn-check label="Received core VNL" field="$ctrl.client.hasCoreVnl" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Recibido B2B VNL" field="$ctrl.client.sepaVnl" vn-acl="administrative"></vn-check>
|
||||
<vn-check label="Received B2B VNL" field="$ctrl.client.hasSepaVnl" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Guardar" vn-acl="administrative"></vn-submit>
|
||||
<vn-submit label="Save" vn-acl="administrative"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</form>
|
||||
<vn-dialog
|
||||
|
|
|
@ -17,9 +17,6 @@ export default class Controller {
|
|||
this.billData.payMethodFk = this.client.payMethodFk;
|
||||
this.billData.iban = this.client.iban;
|
||||
this.billData.dueDay = this.client.dueDay;
|
||||
this.billData.discount = this.client.discount;
|
||||
this.billData.credit = this.client.credit;
|
||||
this.billData.creditInsurance = this.client.creditInsurance;
|
||||
}
|
||||
}
|
||||
submit() {
|
||||
|
@ -43,7 +40,7 @@ export default class Controller {
|
|||
}
|
||||
returnDialog(response) {
|
||||
if (response === 'ACCEPT') {
|
||||
this.$http.post(`/mailer/manuscript/payment-update/${this.client.id}`).then(
|
||||
this.$http.post(`/mailer/notification/payment-update/${this.client.id}`).then(
|
||||
() => {
|
||||
this.vnApp.showMessage(this.translate.instant('Notification sent!'));
|
||||
}
|
||||
|
|
|
@ -25,9 +25,6 @@ describe('Client', () => {
|
|||
describe('copyData()', () => {
|
||||
it(`should define billData using client's data`, () => {
|
||||
controller.client = {
|
||||
credit: 1000000000000,
|
||||
creditInsurance: null,
|
||||
discount: 99,
|
||||
dueDay: 0,
|
||||
iban: null,
|
||||
payMethodFk: 1
|
||||
|
@ -72,8 +69,8 @@ describe('Client', () => {
|
|||
describe('returnDialog()', () => {
|
||||
it('should request to send notification email', () => {
|
||||
controller.client = {id: '123'};
|
||||
$httpBackend.when('POST', `/mailer/manuscript/payment-update/${controller.client.id}`).respond('done');
|
||||
$httpBackend.expectPOST(`/mailer/manuscript/payment-update/${controller.client.id}`);
|
||||
$httpBackend.when('POST', `/mailer/notification/payment-update/${controller.client.id}`).respond('done');
|
||||
$httpBackend.expectPOST(`/mailer/notification/payment-update/${controller.client.id}`);
|
||||
controller.returnDialog('ACCEPT');
|
||||
$httpBackend.flush();
|
||||
});
|
||||
|
|
|
@ -10,5 +10,10 @@
|
|||
"Yes, propagate": "Si, propagar",
|
||||
"Equivalent tax spreaded": "Recargo de equivalencia propagado",
|
||||
"Invoice by address": "Facturar por consignatario",
|
||||
"Equalization tax": "Recargo de equivalencia"
|
||||
"Equalization tax": "Recargo de equivalencia",
|
||||
"Due day": "Vencimiento",
|
||||
"Received core VNH": "Recibido core VNH",
|
||||
"Received core VNL": "Recibido core VNL",
|
||||
"Received B2B VNL": "Recibido B2B VNL",
|
||||
"SAVE": "GUARDAR"
|
||||
}
|
|
@ -1,18 +1,16 @@
|
|||
<vn-horizontal>
|
||||
<vn-main-block>
|
||||
<mg-ajax
|
||||
path="/client/api/Clients/{{edit.params.id}}/card"
|
||||
actions="$ctrl.client = edit.model"
|
||||
options="mgEdit">
|
||||
</mg-ajax>
|
||||
<vn-empty style="min-width: 18em; padding-left: 1em; padding-bottom: 1em;">
|
||||
<vn-descriptor
|
||||
client="$ctrl.client"
|
||||
active="$ctrl.client.active"
|
||||
class="display-block" >
|
||||
</vn-descriptor>
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-empty>
|
||||
<vn-auto>
|
||||
<vn-vertical style="max-width: 70em; margin: 0 auto;" ui-view></vn-vertical>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-auto class="left-block">
|
||||
<vn-descriptor client="$ctrl.client"></vn-descriptor>
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-auto>
|
||||
<vn-one>
|
||||
<vn-vertical ui-view></vn-vertical>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-main-block>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import ngModule from '../module';
|
||||
import './style.css';
|
||||
|
||||
export default class Controller {
|
||||
constructor() {
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
vn-descriptor {
|
||||
font-family: raleway-bold;
|
||||
}
|
|
@ -14,3 +14,8 @@ import './address-edit/address-edit';
|
|||
import './notes/notes';
|
||||
import './note-create/note-create';
|
||||
import './web-access/web-access';
|
||||
import './credit-list/credit-list';
|
||||
import './credit-create/credit-create';
|
||||
import './greuge-list/greuge-list';
|
||||
import './greuge-create/greuge-create';
|
||||
import './mandate/mandate';
|
||||
|
|
|
@ -20,13 +20,20 @@
|
|||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Email" field="$ctrl.client.email" info="You can save multiple emails by chaining them using comma without spaces, example: user@domain.com,user2@domain.com the first email will be considered as the main"></vn-textfield>
|
||||
<vn-one></vn-one>
|
||||
<vn-autocomplete vn-one
|
||||
field="$ctrl.client.salesPersonFk"
|
||||
url="/client/api/Clients/activeSalesPerson"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
select-fields="surname"
|
||||
label="Salesperson"
|
||||
filter-search="{where: {or: [{name: {regexp: 'search'}}, {surname: {regexp: 'search'}}]}}"
|
||||
></vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Create and edit"></vn-submit>
|
||||
<vn-button label="Create" ng-click="watcher.submitBack()"></vn-button>
|
||||
<vn-submit label="Create"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
<mg-ajax path="/client/api/Clients/{{patch.params.id}}" options="vnPatch"></mg-ajax>
|
||||
<vn-watcher
|
||||
vn-id="watcher"
|
||||
data="$ctrl.client"
|
||||
form="form"
|
||||
save="patch">
|
||||
</vn-watcher>
|
||||
<form name="form" ng-submit="watcher.submitGo('clientCard.credit.list')" pad-medium>
|
||||
<vn-card >
|
||||
<vn-vertical pad-large>
|
||||
<vn-title>Add credit</vn-title>
|
||||
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Credit" field="$ctrl.client.credit" type="number" vn-focus></vn-textfield>
|
||||
<vn-one></vn-one>
|
||||
</vn-horizontal>
|
||||
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Save"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</form>
|
|
@ -0,0 +1,8 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
ngModule.component('vnClientCreditCreate', {
|
||||
template: require('./credit-create.html'),
|
||||
bindings: {
|
||||
client: '<'
|
||||
}
|
||||
});
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"Add credit": "Añadir crédito"
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
<mg-ajax path="/client/api/ClientCredits/filter" options="vnIndexNonAuto"></mg-ajax>
|
||||
<vn-card pad-medium>
|
||||
<vn-vertical pad-large>
|
||||
<vn-title vn-one margin-large-bottom>Credit</vn-title>
|
||||
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
|
||||
<vn-column-header vn-one pad-medium-h field="amount" text="Credit"></vn-column-header>
|
||||
<vn-column-header vn-two pad-medium-h field="created" text="Since" default-order="ASC"></vn-column-header>
|
||||
<vn-column-header vn-two pad-medium-h field="employee.name" text="Employee" order-locked></vn-column-header>
|
||||
</vn-grid-header>
|
||||
<vn-one class="list list-content">
|
||||
<vn-horizontal
|
||||
vn-one class="list list-element text-center"
|
||||
pad-small-bottom
|
||||
ng-repeat="credit in index.model.instances track by credit.id">
|
||||
<vn-one pad-medium-h>{{::credit.amount | number:2}} €</vn-one>
|
||||
<vn-two pad-medium-h>{{::credit.created | date:'dd/MM/yyyy HH:mm' }}</vn-two>
|
||||
<vn-two pad-medium-h>{{::credit.employee.name}} {{::credit.employee.surname}}</vn-two>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one class="text-center pad-small-v" ng-if="index.model.count === 0" translate>No results</vn-one>
|
||||
<vn-horizontal vn-one class="list list-footer"></vn-horizontal>
|
||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<a ui-sref="clientCard.credit.create" fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
</a>
|
|
@ -0,0 +1,9 @@
|
|||
import ngModule from '../module';
|
||||
import FilterClientList from '../filterClientList';
|
||||
|
||||
class ClientCreditList extends FilterClientList {}
|
||||
|
||||
ngModule.component('vnClientCreditList', {
|
||||
template: require('./credit-list.html'),
|
||||
controller: ClientCreditList
|
||||
});
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"Since" : "Desde",
|
||||
"Employee" : "Empleado",
|
||||
"No results": "Sin resultados"
|
||||
}
|
|
@ -1,15 +1,18 @@
|
|||
<vn-card>
|
||||
<vn-vertical class="margin-medium" pad-medium-top pad-medium-bottom>
|
||||
<vn-horizontal>
|
||||
<a vn-one ui-sref="clients">
|
||||
<i class="material-icons descriptor-icon">person</i>
|
||||
</a>
|
||||
<vn-vertical vn-two>
|
||||
<div class="margin-none">{{::$ctrl.client.id}}</div>
|
||||
<div class="margin-none">{{$ctrl.client.name}}</div>
|
||||
<div class="margin-none">{{$ctrl.client.phone}}</div>
|
||||
<vn-switch label="Activo" model="$ctrl.active"></vn-switch>
|
||||
<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-horizontal>
|
||||
</vn-auto>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
|
|
|
@ -1,26 +1,32 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
export default class Controller {
|
||||
constructor($scope, $http) {
|
||||
this.$http = $http;
|
||||
constructor($translate) {
|
||||
this.$translate = $translate;
|
||||
// CLient fields to display
|
||||
this.fields = ['id', 'name', 'phone', 'credit', 'creditInsurance'];
|
||||
this.fieldsToShow = {};
|
||||
}
|
||||
set active(value) {
|
||||
if (this._active !== value && this._active !== undefined)
|
||||
this.$http.put(`/client/api/Clients/${this.client.id}/activate`);
|
||||
|
||||
this._active = value;
|
||||
// concat 2 Arrays without duplicates
|
||||
_concatFields(a, b) {
|
||||
return a.concat(b.filter(item => a.indexOf(item) < 0));
|
||||
}
|
||||
get active() {
|
||||
return this._active;
|
||||
|
||||
$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 = ['$scope', '$http'];
|
||||
Controller.$inject = ['$translate'];
|
||||
|
||||
ngModule.component('vnDescriptor', {
|
||||
template: require('./descriptor.html'),
|
||||
controller: Controller,
|
||||
bindings: {
|
||||
client: '<',
|
||||
active: '<'
|
||||
moreFields: '<?'
|
||||
}
|
||||
});
|
||||
|
|
|
@ -3,30 +3,32 @@ import './descriptor.js';
|
|||
describe('Client', () => {
|
||||
describe('Component vnDescriptor', () => {
|
||||
let $componentController;
|
||||
let $scope;
|
||||
let $translate;
|
||||
let controller;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
});
|
||||
|
||||
beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
|
||||
beforeEach(angular.mock.inject((_$componentController_, _$translate_) => {
|
||||
$componentController = _$componentController_;
|
||||
$scope = $rootScope.$new();
|
||||
controller = $componentController('vnDescriptor', {$scope: $scope});
|
||||
$translate = _$translate_;
|
||||
controller = $componentController('vnDescriptor', {$translate: $translate});
|
||||
}));
|
||||
|
||||
describe('set active', () => {
|
||||
it('should check if active is defined and diferent from the new value', () => {
|
||||
controller.client = {id: 1};
|
||||
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._active).toBe(undefined);
|
||||
controller.active = false;
|
||||
|
||||
expect(controller._active).toBe(false);
|
||||
controller.active = true;
|
||||
|
||||
expect(controller._active).toBe(true);
|
||||
expect(controller.fieldsToShow.id).toBe('id');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
// Generic object to list models, related to the client, with mgCrud
|
||||
export default class FilterClientList {
|
||||
constructor($scope, $timeout, $state) {
|
||||
this.$ = $scope;
|
||||
this.$timeout = $timeout;
|
||||
this.$state = $state;
|
||||
|
||||
this.waitingMgCrud = 0;
|
||||
this.clientFk = $state.params.id;
|
||||
}
|
||||
onOrder(field, order) {
|
||||
this.filter(`${field} ${order}`);
|
||||
}
|
||||
filter(order) {
|
||||
if (this.$.index && this.clientFk) {
|
||||
this.waitingMgCrud = 0;
|
||||
this.$.index.filter = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
clientFk: this.clientFk
|
||||
};
|
||||
|
||||
if (order) {
|
||||
this.$.index.filter.order = order;
|
||||
}
|
||||
|
||||
this.$.index.accept();
|
||||
} else if (!this.clientFk) {
|
||||
throw new Error('Error: ClientFk not found');
|
||||
} else if (this.waitingMgCrud > 3) {
|
||||
throw new Error('Error: Magic Crud is not loaded');
|
||||
} else {
|
||||
this.waitingMgCrud++;
|
||||
this.$timeout(() => {
|
||||
this.filter(order);
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
}
|
||||
FilterClientList.$inject = ['$scope', '$timeout', '$state'];
|
|
@ -12,6 +12,7 @@
|
|||
<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-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-two label="Street" field="$ctrl.client.street" vn-focus vn-acl="administrative"></vn-textfield>
|
||||
|
@ -42,41 +43,42 @@
|
|||
</vn-horizontal>
|
||||
<vn-horizontal margin-small-bottom>
|
||||
<vn-one>
|
||||
<vn-check label="Equalization tax" field="$ctrl.client.equalizationTax" vn-acl="administrative" 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-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-one>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<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-one>
|
||||
<vn-one>
|
||||
<vn-check vn-one label="Vies" field="$ctrl.client.isVies" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
<vn-one></vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<vn-check label="Has to invoice" field="$ctrl.client.hasToInvoice" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Invoice by mail" field="$ctrl.client.invoiceByEmail" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-check label="Vies" field="$ctrl.client.vies" vn-acl="administrative" vn-acl="administrative"></vn-check>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
|
||||
</vn-vertical>
|
||||
|
||||
</vn-card>
|
||||
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Save"></vn-submit>
|
||||
<vn-submit label="Save" vn-acl="administrative"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</form>
|
||||
<vn-dialog
|
||||
vn-id="propagate-equalizationTax"
|
||||
vn-id="propagate-isEqualizated"
|
||||
on-response="$ctrl.returnDialogEt(response)"
|
||||
>
|
||||
<tpl-body>
|
||||
<vn-vertical>
|
||||
<vn-one text-center translate>You changes the equivalent tax</vn-one>
|
||||
<vn-one text-center translate>Do you want to spread the change to their consignees?</vn-one>
|
||||
<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>
|
||||
|
|
|
@ -6,7 +6,7 @@ export default class ClientFiscalData {
|
|||
this.$http = $http;
|
||||
this.vnApp = vnApp;
|
||||
this.translate = $translate;
|
||||
this.equalizationTax = undefined;
|
||||
this.isEqualizated = undefined;
|
||||
this.copyData();
|
||||
}
|
||||
|
||||
|
@ -16,7 +16,7 @@ export default class ClientFiscalData {
|
|||
|
||||
copyData() {
|
||||
if (this.client) {
|
||||
this.equalizationTax = this.client.equalizationTax;
|
||||
this.isEqualizated = this.client.isEqualizated;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -26,16 +26,16 @@ export default class ClientFiscalData {
|
|||
}
|
||||
|
||||
checkEtChanges() {
|
||||
let equals = this.equalizationTax == this.client.equalizationTax;
|
||||
this.equalizationTax = this.client.equalizationTax;
|
||||
let equals = this.isEqualizated == this.client.isEqualizated;
|
||||
this.isEqualizated = this.client.isEqualizated;
|
||||
|
||||
if (!equals)
|
||||
this.$.propagateEqualizationTax.show();
|
||||
this.$.propagateIsEqualizated.show();
|
||||
}
|
||||
|
||||
returnDialogEt(response) {
|
||||
if (response === 'ACCEPT') {
|
||||
this.$http.patch(`/client/api/Clients/${this.client.id}/addressesPropagateRe`, {isEqualizated: this.client.equalizationTax}).then(
|
||||
this.$http.patch(`/client/api/Clients/${this.client.id}/addressesPropagateRe`, {isEqualizated: this.client.isEqualizated}).then(
|
||||
res => {
|
||||
if (res.data)
|
||||
this.vnApp.showMessage(this.translate.instant('Equivalent tax spreaded'));
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
<mg-ajax path="/client/api/greuges" options="vnPost"></mg-ajax>
|
||||
<vn-watcher
|
||||
vn-id="watcher"
|
||||
data="$ctrl.greuge"
|
||||
form="form"
|
||||
save="post">
|
||||
</vn-watcher>
|
||||
|
||||
<form pad-medium name="form" ng-submit="$ctrl.onSubmit()">
|
||||
<vn-card>
|
||||
<vn-vertical pad-medium>
|
||||
<vn-title vn-one margin-large-bottom>Add Greuge</vn-title>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one margin-medium-right label="Amount" field="$ctrl.greuge.amount" type="number" step="1" vn-focus></vn-textfield>
|
||||
<vn-date-picker vn-one
|
||||
label="Date"
|
||||
model="$ctrl.greuge.shipped"
|
||||
ini-options="{enableTime: true, dateFormat: 'd-m-Y h:i', time_24hr: true}"
|
||||
>
|
||||
</vn-date-picker>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one margin-medium-right label="Comment" field="$ctrl.greuge.description"></vn-textfield>
|
||||
<vn-autocomplete vn-one
|
||||
field="$ctrl.greuge.greugeTypeFk"
|
||||
url="/client/api/greugeTypes"
|
||||
label="Type"
|
||||
>
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Save"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</form>
|
|
@ -0,0 +1,25 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
class ClientGreugeCreate {
|
||||
constructor($scope, $state, $filter) {
|
||||
this.$ = $scope;
|
||||
this.$state = $state;
|
||||
this.greuge = {
|
||||
shipped: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
|
||||
};
|
||||
}
|
||||
onSubmit() {
|
||||
this.greuge.clientFk = this.$state.params.id;
|
||||
this.$.watcher.submit().then(
|
||||
() => {
|
||||
this.$state.go('clientCard.greuge.list');
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
ClientGreugeCreate.$inject = ['$scope', '$state', '$filter'];
|
||||
|
||||
ngModule.component('vnClientGreugeCreate', {
|
||||
template: require('./greuge-create.html'),
|
||||
controller: ClientGreugeCreate
|
||||
});
|
|
@ -0,0 +1,39 @@
|
|||
import './greuge-create.js';
|
||||
|
||||
describe('Client', () => {
|
||||
describe('Component vnClientGreugeCreate', () => {
|
||||
let $componentController;
|
||||
let $scope;
|
||||
let $state;
|
||||
let controller;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
});
|
||||
|
||||
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
|
||||
$componentController = _$componentController_;
|
||||
$scope = $rootScope.$new();
|
||||
$state = _$state_;
|
||||
$scope.watcher = {
|
||||
submit: () => {
|
||||
return {
|
||||
then: callback => {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
controller = $componentController('vnClientGreugeCreate', {$scope: $scope});
|
||||
}));
|
||||
|
||||
describe('onSubmit()', () => {
|
||||
it('should call the function go() on $state to go to the greuges list', () => {
|
||||
spyOn($state, 'go');
|
||||
controller.onSubmit();
|
||||
|
||||
expect(controller.$state.go).toHaveBeenCalledWith('clientCard.greuge.list');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,38 @@
|
|||
<mg-ajax path="/client/api/greuges/filter" options="vnIndexNonAuto"></mg-ajax>
|
||||
<mg-ajax path="/client/api/greuges/{{edit.params.id}}/sumAmount" options="mgEdit"></mg-ajax>
|
||||
<vn-card pad-medium>
|
||||
<vn-vertical pad-medium>
|
||||
<vn-title vn-one margin-large-bottom>Greuge</vn-title>
|
||||
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
|
||||
<vn-column-header vn-one pad-medium-h field="shipped" text="Date" default-order="ASC"></vn-column-header>
|
||||
<vn-column-header vn-two pad-medium-h field="description" text="Comment"></vn-column-header>
|
||||
<vn-column-header vn-one pad-medium-h field="amount" text="Amount"></vn-column-header>
|
||||
<vn-column-header vn-one pad-medium-h field="greugeTypeFk" text="Type"></vn-column-header>
|
||||
</vn-grid-header>
|
||||
|
||||
<vn-one class="list list-content">
|
||||
<vn-horizontal
|
||||
class="list list-element text-center"
|
||||
pad-small-bottom
|
||||
ng-repeat="greuge in index.model.instances track by greuge.id"
|
||||
>
|
||||
<vn-one pad-medium-h>{{::greuge.shipped | date:'dd/MM/yyyy HH:mm' }}</vn-one>
|
||||
<vn-two pad-medium-h>{{::greuge.description}}</vn-two>
|
||||
<vn-one pad-medium-h>{{::greuge.amount | number:2}} €</vn-one>
|
||||
<vn-one pad-medium-h>{{::greuge.greugeType.name}}</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
|
||||
<vn-one class="text-center pad-small-v" ng-if="index.model.count === 0" translate>No results</vn-one>
|
||||
<vn-horizontal vn-one class="list list-footer text-center">
|
||||
<vn-one pad-medium-h></vn-one>
|
||||
<vn-two pad-medium-h></vn-two>
|
||||
<vn-one pad-medium-h ng-if="index.model.count > 0">{{edit.model.sumAmount | number:2}} €</vn-one>
|
||||
<vn-one pad-medium-h></vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<a ui-sref="clientCard.greuge.create" fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
</a>
|
|
@ -0,0 +1,9 @@
|
|||
import ngModule from '../module';
|
||||
import FilterClientList from '../filterClientList';
|
||||
|
||||
class ClientGreugeList extends FilterClientList {}
|
||||
|
||||
ngModule.component('vnClientGreugeList', {
|
||||
template: require('./greuge-list.html'),
|
||||
controller: ClientGreugeList
|
||||
});
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"Date" : "Fecha",
|
||||
"Comment" : "Comentario",
|
||||
"Amount" : "Importe",
|
||||
"Type": "Tipo",
|
||||
"Add Greuge": "Añadir Greuge"
|
||||
}
|
|
@ -3,12 +3,13 @@
|
|||
<div style="max-width: 40em; margin: 0 auto;">
|
||||
<vn-card>
|
||||
<vn-horizontal pad-medium>
|
||||
<vn-searchbar vn-auto
|
||||
<vn-searchbar vn-one
|
||||
index="index"
|
||||
on-search="$ctrl.search(index)"
|
||||
advanced="true"
|
||||
search="$ctrl.model.search"
|
||||
popover="vn-client-search-panel">
|
||||
popover="vn-client-search-panel"
|
||||
ignore-keys = "['page', 'size', 'search']"
|
||||
>
|
||||
</vn-searchbar>
|
||||
</vn-horizontal>
|
||||
</vn-card>
|
||||
|
|
|
@ -7,7 +7,6 @@ export default class Controller {
|
|||
this.model = {};
|
||||
}
|
||||
search(index) {
|
||||
index.filter.search = this.model.search;
|
||||
index.accept();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,19 +18,19 @@ describe('Client', () => {
|
|||
expect(controller.model).toEqual({});
|
||||
});
|
||||
|
||||
describe('search()', () => {
|
||||
it(`should set model's search to the search input`, () => {
|
||||
controller.model.search = 'batman';
|
||||
let index = {
|
||||
filter: {},
|
||||
accept: () => {
|
||||
return 'accepted';
|
||||
}
|
||||
};
|
||||
controller.search(index);
|
||||
// describe('search()', () => {
|
||||
// it(`should set model's search to the search input`, () => {
|
||||
// controller.model.search = 'batman';
|
||||
// let index = {
|
||||
// filter: {},
|
||||
// accept: () => {
|
||||
// return 'accepted';
|
||||
// }
|
||||
// };
|
||||
// controller.search(index);
|
||||
|
||||
expect(index.filter.search).toBe('batman');
|
||||
});
|
||||
});
|
||||
// expect(index.filter.search).toBe('batman');
|
||||
// });
|
||||
// });
|
||||
});
|
||||
});
|
||||
|
|
|
@ -12,5 +12,5 @@ vn-item-client a:hover {
|
|||
}
|
||||
|
||||
.vn-item-client-name {
|
||||
font-family: raleway-bold;
|
||||
font-family: vn-font-bold;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
{
|
||||
"Active": "Activo",
|
||||
"Client": "Cliente",
|
||||
"Clients": "Clientes",
|
||||
"Basic data": "Datos básicos",
|
||||
"Fiscal data": "Datos Fiscales",
|
||||
"Addresses": "Consignatarios",
|
||||
"Web access": "Acceso web",
|
||||
"Notes": "Notas",
|
||||
"Has to invoice": "Factura",
|
||||
"Invoice by mail": "Factura impresa",
|
||||
"Country": "País",
|
||||
|
@ -10,5 +15,11 @@
|
|||
"Postcode": "Código postal",
|
||||
"Province": "Provincia",
|
||||
"Save": "Guardar",
|
||||
"Pay method" : "Forma de pago"
|
||||
"Pay method" : "Forma de pago",
|
||||
"Address": "Consignatario",
|
||||
"Credit" : "Crédito",
|
||||
"Secured credit": "Crédito asegurado",
|
||||
"Verified data": "Datos comprobados",
|
||||
"Mandate": "Mandato",
|
||||
"Amount": "Importe"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"Company": "Empresa",
|
||||
"Register date": "Fecha alta",
|
||||
"End date": "Fecha baja"
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
<mg-ajax path="/client/api/Mandates/filter" options="vnIndexNonAuto"></mg-ajax>
|
||||
<vn-card pad-medium>
|
||||
<vn-vertical pad-medium>
|
||||
<vn-title vn-one margin-large-bottom>Mandate</vn-title>
|
||||
|
||||
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
|
||||
<vn-column-header vn-one pad-medium-h field="id" text="Id"></vn-column-header>
|
||||
<vn-column-header vn-one pad-medium-h field="companyFk" text="Company"></vn-column-header>
|
||||
<vn-column-header vn-one pad-medium-h field="mandateTypeFk" text="Type"></vn-column-header>
|
||||
<vn-column-header vn-one pad-medium-h field="created" text="Register date" default-order="ASC"></vn-column-header>
|
||||
<vn-column-header vn-one pad-medium-h field="finished" text="End date"></vn-column-header>
|
||||
</vn-grid-header>
|
||||
<vn-one class="list list-content">
|
||||
<vn-horizontal
|
||||
vn-one class="list list-element text-center"
|
||||
pad-small-bottom
|
||||
ng-repeat="mandate in index.model.instances track by mandate.id"
|
||||
>
|
||||
<vn-one pad-medium-h>{{::mandate.id}}</vn-one>
|
||||
<vn-one pad-medium-h>{{::mandate.company.code}}</vn-one>
|
||||
<vn-one pad-medium-h>{{::mandate.mandateType.name}}</vn-one>
|
||||
<vn-one pad-medium-h>{{::mandate.created | date:'dd/MM/yyyy HH:mm' }}</vn-one>
|
||||
<vn-one pad-medium-h>{{::mandate.finished | date:'dd/MM/yyyy HH:mm' || '-'}}</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one class="text-center pad-small-v" ng-if="index.model.count === 0" translate>No results</vn-one>
|
||||
<vn-horizontal vn-one class="list list-footer"></vn-horizontal>
|
||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||
|
||||
</vn-vertical>
|
||||
</vn-card>
|
|
@ -0,0 +1,7 @@
|
|||
import ngModule from '../module';
|
||||
import FilterClientList from '../filterClientList';
|
||||
|
||||
ngModule.component('vnClientMandate', {
|
||||
template: require('./mandate.html'),
|
||||
controller: FilterClientList
|
||||
});
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"Notes": "Notas"
|
||||
}
|
|
@ -1,13 +1,19 @@
|
|||
<vn-card ng-show="$ctrl.observations.length" pad-medium>
|
||||
<vn-vertical pad-large>
|
||||
<vn-title>Notes</vn-title>
|
||||
<vn-horizontal ng-repeat="n in $ctrl.observations" margin-small-bottom style="align-items: center;">
|
||||
<vn-auto style="border-radius: .3em;" class="pad-small border-solid">
|
||||
<div class="notes-date">{{::n.created | date:'dd/MM/yyyy HH:mm'}}</div>
|
||||
<div class="notes-date">{{::n.employee.name}}</div>
|
||||
<div>{{::n.text}}</div>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
<vn-one
|
||||
ng-repeat="n in $ctrl.observations"
|
||||
pad-small border-solid
|
||||
border-radius
|
||||
margin-small-bottom style="align-items: center;">
|
||||
<vn-horizontal>
|
||||
<vn-one >{{::n.employee.name}} {{::n.employee.surname}}</vn-one>
|
||||
<vn-auto>{{::n.created | date:'dd/MM/yyyy HH:mm'}}</vn-auto>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<b>{{::n.text}}</b>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-float-button
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
.notes-date {
|
||||
font-family: raleway-bold;
|
||||
}
|
|
@ -1,28 +1,16 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
export default class Controller {
|
||||
constructor(sessionStorage) {
|
||||
this.sessionStorage = sessionStorage;
|
||||
constructor() {
|
||||
// onSubmit() is defined by @vnSearchbar
|
||||
this.onSubmit = () => {};
|
||||
}
|
||||
|
||||
onSearch() {
|
||||
this.setStorageValue();
|
||||
this.onSubmit(this.filter);
|
||||
}
|
||||
|
||||
$onChanges() {
|
||||
var value = this.sessionStorage.get('filter');
|
||||
if (value !== undefined)
|
||||
this.filter = value;
|
||||
}
|
||||
|
||||
setStorageValue() {
|
||||
this.sessionStorage.set('filter', this.filter);
|
||||
}
|
||||
}
|
||||
Controller.$inject = ['sessionStorage'];
|
||||
Controller.$inject = [];
|
||||
|
||||
ngModule.component('vnClientSearchPanel', {
|
||||
template: require('./search-panel.html'),
|
||||
|
|
|
@ -16,26 +16,26 @@ describe('Client', () => {
|
|||
controller = $componentController('vnClientSearchPanel', {sessionStorage: sessionStorage});
|
||||
}));
|
||||
|
||||
describe('onSearch()', () => {
|
||||
it('should call setStorageValue() and onSubmit()', () => {
|
||||
spyOn(controller, 'setStorageValue');
|
||||
spyOn(controller, 'onSubmit');
|
||||
controller.setStorageValue();
|
||||
controller.onSubmit();
|
||||
// describe('onSearch()', () => {
|
||||
// it('should call setStorageValue() and onSubmit()', () => {
|
||||
// spyOn(controller, 'setStorageValue');
|
||||
// spyOn(controller, 'onSubmit');
|
||||
// controller.setStorageValue();
|
||||
// controller.onSubmit();
|
||||
|
||||
expect(controller.setStorageValue).toHaveBeenCalledWith();
|
||||
expect(controller.onSubmit).toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
// expect(controller.setStorageValue).toHaveBeenCalledWith();
|
||||
// expect(controller.onSubmit).toHaveBeenCalledWith();
|
||||
// });
|
||||
// });
|
||||
|
||||
describe('$onChanges()', () => {
|
||||
it('should set filter properties using the search values', () => {
|
||||
expect(controller.filter).not.toBeDefined();
|
||||
spyOn(sessionStorage, 'get').and.returnValue({data: 'data'});
|
||||
controller.$onChanges();
|
||||
// describe('$onChanges()', () => {
|
||||
// it('should set filter properties using the search values', () => {
|
||||
// expect(controller.filter).not.toBeDefined();
|
||||
// spyOn(sessionStorage, 'get').and.returnValue({data: 'data'});
|
||||
// controller.$onChanges();
|
||||
|
||||
expect(controller.filter).toBe(sessionStorage.get({data: 'data'}));
|
||||
});
|
||||
});
|
||||
// expect(controller.filter).toBe(sessionStorage.get({data: 'data'}));
|
||||
// });
|
||||
// });
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"User": "Usuario",
|
||||
"Enable web access": "Habilitar acceso web",
|
||||
"Web access": "Acceso web",
|
||||
"New password": "Nueva contraseña",
|
||||
"Repeat password": "Repetir contraseña",
|
||||
"Change password": "Cambiar contraseña"
|
||||
|
|
|
@ -1,6 +1,12 @@
|
|||
<vn-vertical ng-click="$ctrl.showDropDown = true">
|
||||
<vn-textfield vn-one label="{{$ctrl.label}}" model="$ctrl.displayValue" readonly="$ctrl.readonly"></vn-textfield>
|
||||
<vn-drop-down vn-one
|
||||
<vn-vertical ng-click="$ctrl.showDropDown = true" tabindex="0">
|
||||
<vn-textfield vn-auto
|
||||
label="{{$ctrl.label}}"
|
||||
model="$ctrl.displayValue"
|
||||
readonly="$ctrl.readonly"
|
||||
tab-index="-1"
|
||||
>
|
||||
</vn-textfield>
|
||||
<vn-drop-down vn-auto
|
||||
items="$ctrl.items"
|
||||
show="$ctrl.showDropDown"
|
||||
selected="$ctrl.field"
|
||||
|
@ -11,5 +17,6 @@
|
|||
filter-action="$ctrl.findItems(search)"
|
||||
item-width="$ctrl.width"
|
||||
multiple="$ctrl.multiple"
|
||||
parent = "$ctrl.element"
|
||||
><vn-item ng-transclude="tplItem">{{$parent.item.name}}</vn-item></vn-drop-down>
|
||||
</vn-vertical>
|
|
@ -2,6 +2,7 @@ import {module} from '../module';
|
|||
import Component from '../lib/component';
|
||||
import copyObject from '../lib/copy';
|
||||
import './style.scss';
|
||||
import { log } from 'util';
|
||||
|
||||
class Autocomplete extends Component {
|
||||
constructor($element, $scope, $http, $timeout, $filter) {
|
||||
|
@ -27,6 +28,8 @@ class Autocomplete extends Component {
|
|||
this._multiField = [];
|
||||
this.readonly = true;
|
||||
this.removeLoadMore = false;
|
||||
this.form = null;
|
||||
this.findForm = false;
|
||||
}
|
||||
|
||||
get showDropDown() {
|
||||
|
@ -87,6 +90,7 @@ class Autocomplete extends Component {
|
|||
if (this.multiple) {
|
||||
this.setMultiField(value[this.valueField]);
|
||||
}
|
||||
this.setDirtyForm();
|
||||
} else {
|
||||
this.setValue(value);
|
||||
}
|
||||
|
@ -284,6 +288,22 @@ class Autocomplete extends Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
_parentForm() {
|
||||
this.findForm = true;
|
||||
let formScope = this.$scope;
|
||||
while (formScope && !formScope.form && formScope.$id > 1) {
|
||||
formScope = formScope.$parent;
|
||||
}
|
||||
this.form = formScope ? formScope.form || null : null;
|
||||
}
|
||||
setDirtyForm() {
|
||||
if (!this.form && !this.findForm) {
|
||||
this._parentForm();
|
||||
}
|
||||
if (this.form) {
|
||||
this.form.$setDirty();
|
||||
}
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.findMore = this.url && this.maxRow;
|
||||
|
|
|
@ -18,18 +18,23 @@ ul.vn-autocomplete {
|
|||
}
|
||||
&.load-more {
|
||||
color: #ffa410;
|
||||
font-weight: bold;
|
||||
font-family: vn-font-bold;
|
||||
padding: .4em .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
vn-autocomplete {
|
||||
position: relative;
|
||||
vn-vertical {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.mdl-chip__action {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -6px;
|
||||
margin: 22px 0px;
|
||||
background-color: white;
|
||||
background: transparent;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 18px;
|
||||
|
|
|
@ -1,11 +1,22 @@
|
|||
<div class="{{$ctrl.className}}" ng-mouseover="$ctrl.mouseIsOver = true" ng-mouseleave="$ctrl.mouseIsOver = false">
|
||||
<vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()">
|
||||
<vn-none class="title" translate>
|
||||
{{::$ctrl.text}}
|
||||
<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>
|
||||
<vn-icon icon="arrow_drop_down" ng-if="$ctrl.showArrow('DESC')"></vn-icon>
|
||||
<vn-icon icon="arrow_drop_up" ng-if="$ctrl.showArrow('ASC')"></vn-icon>
|
||||
<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>
|
||||
|
|
|
@ -1,19 +1,29 @@
|
|||
import {module} from '../module';
|
||||
|
||||
export default class ColumnHeader {
|
||||
constructor() {
|
||||
constructor($attrs) {
|
||||
this.order = undefined;
|
||||
this.mouseIsOver = false;
|
||||
this.orderLocked = ($attrs.orderLocked !== undefined);
|
||||
}
|
||||
onClick() {
|
||||
if (this.order === 'ASC') {
|
||||
this.order = 'DESC';
|
||||
} else {
|
||||
this.order = 'ASC';
|
||||
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);
|
||||
}
|
||||
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) {
|
||||
|
@ -22,13 +32,13 @@ export default class ColumnHeader {
|
|||
return showArrow;
|
||||
}
|
||||
$onInit() {
|
||||
if (this.defaultOrder) {
|
||||
if (this.defaultOrder && !this.orderLocked) {
|
||||
this.order = this.defaultOrder;
|
||||
this.onClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
ColumnHeader.$inject = [];
|
||||
ColumnHeader.$inject = ['$attrs'];
|
||||
|
||||
module.component('vnColumnHeader', {
|
||||
template: require('./column-header.html'),
|
||||
|
|
|
@ -3,6 +3,8 @@ import './column-header.js';
|
|||
describe('Component vnColumnHeader', () => {
|
||||
let $componentController;
|
||||
let controller;
|
||||
let $event;
|
||||
let $attrs;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
|
@ -10,14 +12,18 @@ describe('Component vnColumnHeader', () => {
|
|||
|
||||
beforeEach(angular.mock.inject(_$componentController_ => {
|
||||
$componentController = _$componentController_;
|
||||
controller = $componentController('vnColumnHeader', {});
|
||||
$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();
|
||||
controller.onClick($event);
|
||||
|
||||
expect(controller.order).toEqual('DESC');
|
||||
});
|
||||
|
@ -25,7 +31,7 @@ describe('Component vnColumnHeader', () => {
|
|||
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();
|
||||
controller.onClick($event);
|
||||
|
||||
expect(controller.order).toEqual('ASC');
|
||||
});
|
||||
|
@ -34,7 +40,7 @@ describe('Component vnColumnHeader', () => {
|
|||
controller.gridHeader = {selectColum: () => {}};
|
||||
controller.order = 'Change me!';
|
||||
spyOn(controller.gridHeader, 'selectColum');
|
||||
controller.onClick();
|
||||
controller.onClick($event);
|
||||
|
||||
expect(controller.gridHeader.selectColum).toHaveBeenCalledWith(controller);
|
||||
});
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
vn-confirm .dialog-title {
|
||||
color:#424242;
|
||||
font-family: raleway-bold;
|
||||
}
|
||||
|
||||
vn-confirm .dialog-title {
|
||||
color:#424242;
|
||||
font-family: vn-font-bold;
|
||||
}
|
||||
|
|
|
@ -4,7 +4,8 @@
|
|||
ng-focus="$ctrl.hasFocus = true"
|
||||
ng-blur="$ctrl.hasFocus = false"
|
||||
ng-mouseenter="$ctrl.hasMouseIn = true"
|
||||
ng-mouseleave="$ctrl.hasMouseIn = false"
|
||||
ng-mouseleave="$ctrl.hasMouseIn = false"
|
||||
ng-click="$ctrl.onClick()"
|
||||
>
|
||||
<input type="text"
|
||||
class="mdl-textfield__input"
|
||||
|
|
|
@ -18,16 +18,19 @@ export const formatEquivalence = {
|
|||
};
|
||||
|
||||
class DatePicker extends Component {
|
||||
constructor($element, $translate, $filter, $timeout) {
|
||||
constructor($element, $translate, $filter, $timeout, $attrs) {
|
||||
super($element);
|
||||
this.input = $element[0].querySelector('input');
|
||||
this.$translate = $translate;
|
||||
this.$filter = $filter;
|
||||
this.$timeout = $timeout;
|
||||
this.$attrs = $attrs;
|
||||
|
||||
this.enabled = true;
|
||||
this._modelView = null;
|
||||
this._model = undefined;
|
||||
this._optionsChecked = false;
|
||||
this._waitingInit = 0;
|
||||
this.hasFocus = false;
|
||||
this.hasMouseIn = false;
|
||||
componentHandler.upgradeElement($element[0].firstChild);
|
||||
|
@ -37,12 +40,34 @@ class DatePicker extends Component {
|
|||
return this._model;
|
||||
}
|
||||
set model(value) {
|
||||
this._model = value;
|
||||
if (value && !this.modelView) {
|
||||
let options = this._getOptions();
|
||||
let initialDateFormat = (options && options.dateFormat) ? options.dateFormat : 'Y-m-d';
|
||||
let format = this._formatFlat2Angular(initialDateFormat);
|
||||
this.modelView = this.$filter('date')(value, format);
|
||||
if (this._optionsChecked) {
|
||||
this._waitingInit = 0;
|
||||
this._model = value;
|
||||
if (value && !this.modelView) {
|
||||
let options = this._getOptions();
|
||||
let initialDateFormat;
|
||||
if (options && options.dateFormat) {
|
||||
initialDateFormat = options.dateFormat;
|
||||
} else {
|
||||
initialDateFormat = this.$translate.use() === 'es' ? 'd-m-Y' : 'Y-m-d';
|
||||
if (options.enableTime) {
|
||||
initialDateFormat += ' H:i:s';
|
||||
}
|
||||
}
|
||||
|
||||
let format = this._formatFlat2Angular(initialDateFormat);
|
||||
this._modelView = this.$filter('date')(new Date(this._model), format);
|
||||
this.mdlUpdate();
|
||||
}
|
||||
} else if (this._waitingInit < 4) {
|
||||
this._waitingInit++;
|
||||
this.$timeout(() => {
|
||||
this.model = value;
|
||||
}, 250);
|
||||
} else {
|
||||
this.model = null;
|
||||
this.modelView = '';
|
||||
this._waitingInit = 0;
|
||||
}
|
||||
}
|
||||
get modelView() {
|
||||
|
@ -52,17 +77,23 @@ class DatePicker extends Component {
|
|||
this._modelView = value;
|
||||
this.input.value = value;
|
||||
this._setModel(value);
|
||||
this.$timeout(() => {
|
||||
this.mdlUpdate();
|
||||
}, 500);
|
||||
this.mdlUpdate();
|
||||
}
|
||||
|
||||
onClear() {
|
||||
this.modelView = null;
|
||||
}
|
||||
onClick() {
|
||||
if (this.vp) {
|
||||
this.vp.open();
|
||||
}
|
||||
}
|
||||
mdlUpdate() {
|
||||
let mdlField = this.element.firstChild.MaterialTextfield;
|
||||
if (mdlField)
|
||||
mdlField.updateClasses_();
|
||||
this.$timeout(() => {
|
||||
let mdlField = this.element.firstChild.MaterialTextfield;
|
||||
if (mdlField)
|
||||
mdlField.updateClasses_();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
_formatFlat2Angular(string) { // change string Flatpickr format to angular format (d-m-Y -> dd-MM-yyyy)
|
||||
|
@ -83,54 +114,59 @@ class DatePicker extends Component {
|
|||
return parts.join('-');
|
||||
}
|
||||
|
||||
_string2BackFormat(value) {
|
||||
let formats = this.iniOptions.dateFormat.split(/[ZT.,/ :-]/);
|
||||
let aux = value.split(/[ZT.,/ :-]/);
|
||||
let date = {};
|
||||
formats.forEach(
|
||||
(k, i) => {
|
||||
if (k.toLowerCase() === 'y') {
|
||||
date.year = aux[i];
|
||||
} else if (k === 'm' || k === 'n') {
|
||||
date.month = aux[i];
|
||||
} else if (k === 'd' || k === 'j') {
|
||||
date.day = aux[i];
|
||||
} else if (k.toLowerCase() === 'h') {
|
||||
date.hour = aux[i];
|
||||
} else if (k === 'i') {
|
||||
date.minutes = aux[i];
|
||||
} else if (k === 's') {
|
||||
date.seccons = aux[i];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dateStr = '';
|
||||
let hourStr = '';
|
||||
|
||||
if (date.year && date.month && date.day) {
|
||||
dateStr = `${date.year}-${date.month}-${date.day}`;
|
||||
}
|
||||
if (date.hour) {
|
||||
hourStr = date.hour;
|
||||
if (date.minutes) {
|
||||
hourStr += ':' + date.minutes;
|
||||
} else {
|
||||
hourStr += ':00';
|
||||
}
|
||||
if (date.seccons) {
|
||||
hourStr += ':' + date.seccons;
|
||||
} else {
|
||||
hourStr += ':00';
|
||||
}
|
||||
}
|
||||
return `${dateStr} ${hourStr}`.trim();
|
||||
}
|
||||
|
||||
_setModel(value) {
|
||||
let model;
|
||||
let options = this._getOptions();
|
||||
if (!value) {
|
||||
model = undefined;
|
||||
} else if (!this.iniOptions || (this.iniOptions.dateFormat && this.iniOptions.dateFormat.startsWith('Y-m-d'))) {
|
||||
} else if (!options || (options.dateFormat && options.dateFormat.startsWith('Y-m-d'))) {
|
||||
model = value;
|
||||
} else {
|
||||
let formats = this.iniOptions.dateFormat.split(/[ZT.,/ :-]/);
|
||||
let aux = value.split(/[ZT.,/ :-]/);
|
||||
let date = {};
|
||||
formats.forEach(
|
||||
(k, i) => {
|
||||
if (k.toLowerCase() === 'y') {
|
||||
date.year = aux[i];
|
||||
} else if (k === 'm' || k === 'n') {
|
||||
date.month = aux[i];
|
||||
} else if (k === 'd' || k === 'j') {
|
||||
date.day = aux[i];
|
||||
} else if (k.toLowerCase() === 'h') {
|
||||
date.hour = aux[i];
|
||||
} else if (k === 'i') {
|
||||
date.minutes = aux[i];
|
||||
} else if (k === 's') {
|
||||
date.seccons = aux[i];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dateStr = '';
|
||||
let hourStr = '';
|
||||
|
||||
if (date.year && date.month && date.day) {
|
||||
dateStr = `${date.year}-${date.month}-${date.day}`;
|
||||
}
|
||||
if (date.hour) {
|
||||
hourStr = date.hour;
|
||||
if (date.minutes) {
|
||||
hourStr += ':' + date.minutes;
|
||||
} else {
|
||||
hourStr += ':00';
|
||||
}
|
||||
if (date.seccons) {
|
||||
hourStr += ':' + date.seccons;
|
||||
} else {
|
||||
hourStr += ':00';
|
||||
}
|
||||
}
|
||||
model = `${dateStr} ${hourStr}`.trim();
|
||||
model = this._string2BackFormat(value);
|
||||
}
|
||||
|
||||
if (this.model !== model) {
|
||||
|
@ -148,8 +184,8 @@ class DatePicker extends Component {
|
|||
if (!this.iniOptions.locale)
|
||||
this.iniOptions.locale = this.$translate.use();
|
||||
|
||||
if (!this.iniOptions.dateFormat && this.iniOptions.locale === 'es')
|
||||
this.iniOptions.dateFormat = 'd-m-Y';
|
||||
if (!this.iniOptions.dateFormat)
|
||||
this.iniOptions.dateFormat = this.iniOptions.locale === 'es' ? 'd-m-Y' : 'Y-m-d';
|
||||
else if (this.iniOptions.dateFormat) {
|
||||
let format = this.iniOptions.dateFormat.split(/[ZT.,/ :-]/);
|
||||
if (format.length <= 1) {
|
||||
|
@ -163,21 +199,44 @@ class DatePicker extends Component {
|
|||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (this.$attrs.hasOwnProperty('today')) {
|
||||
this.iniOptions.defaultDate = new Date();
|
||||
}
|
||||
|
||||
this._optionsChecked = true;
|
||||
return this.iniOptions;
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
initPicker() {
|
||||
this.iniOptions = this._getOptions();
|
||||
this.isTimePicker = (this.iniOptions && this.iniOptions.enableTime && this.iniOptions.noCalendar);
|
||||
this.vp = new Flatpickr(this.input, this.iniOptions);
|
||||
if (this.iniOptions.defaultDate) {
|
||||
this.modelView = this.vp.formatDate(this.iniOptions.defaultDate, this.iniOptions.dateFormat);
|
||||
}
|
||||
}
|
||||
$onDestroy() {
|
||||
destroyPicker() {
|
||||
if (this.vp)
|
||||
this.vp.destroy();
|
||||
this.vp = undefined;
|
||||
}
|
||||
|
||||
$onChanges(objChange) {
|
||||
if (objChange.iniOptions && objChange.iniOptions.currentValue) {
|
||||
this.iniOptions = Object.assign(this.iniOptions, objChange.iniOptions.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.initPicker();
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.destroyPicker();
|
||||
}
|
||||
}
|
||||
DatePicker.$inject = ['$element', '$translate', '$filter', '$timeout'];
|
||||
DatePicker.$inject = ['$element', '$translate', '$filter', '$timeout', '$attrs'];
|
||||
|
||||
module.component('vnDatePicker', {
|
||||
template: require('./datePicker.html'),
|
||||
|
|
|
@ -2,9 +2,10 @@ import './datePicker.js';
|
|||
|
||||
describe('Component vnDatePicker', () => {
|
||||
let $componentController;
|
||||
let $scope;
|
||||
let $filter;
|
||||
let $timeout;
|
||||
let $element;
|
||||
let $attrs;
|
||||
let $translate;
|
||||
let controller;
|
||||
|
||||
|
@ -12,13 +13,14 @@ describe('Component vnDatePicker', () => {
|
|||
angular.mock.module('client');
|
||||
});
|
||||
|
||||
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$timeout_, _$translate_) => {
|
||||
beforeEach(angular.mock.inject((_$componentController_, _$filter_, _$timeout_, _$translate_) => {
|
||||
$componentController = _$componentController_;
|
||||
$scope = $rootScope.$new();
|
||||
$filter = _$filter_;
|
||||
$timeout = _$timeout_;
|
||||
$element = angular.element(`<div><input></div>`);
|
||||
$translate = _$translate_;
|
||||
controller = $componentController('vnDatePicker', {$scope, $element, $translate, $timeout});
|
||||
$attrs = {};
|
||||
controller = $componentController('vnDatePicker', {$element, $translate, $filter, $timeout, $attrs});
|
||||
}));
|
||||
|
||||
describe('_formatFlat2Angular()', () => {
|
||||
|
@ -36,6 +38,7 @@ describe('Component vnDatePicker', () => {
|
|||
|
||||
it(`should split the given string into parts`, () => {
|
||||
controller.iniOptions = {dateFormat: 'd/m/Y'};
|
||||
controller._optionsChecked = true;
|
||||
controller.model = '2017-12-23';
|
||||
|
||||
expect(controller.modelView).toBe('23-12-2017');
|
||||
|
|
|
@ -1,68 +1,68 @@
|
|||
.vn-dialog {
|
||||
display: none;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(1,1,1,.4);
|
||||
|
||||
button.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: .3em;
|
||||
cursor: pointer;
|
||||
|
||||
vn-icon {
|
||||
display: block;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
box-shadow: 0 0 .4em rgba(1,1,1,.4);
|
||||
background-color: white;
|
||||
border-radius: .2em;
|
||||
overflow: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 2em;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 28em;
|
||||
margin-top: -10em;
|
||||
margin-left: -14em;
|
||||
}
|
||||
.button-bar {
|
||||
margin-top: 1.5em;
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.1em;
|
||||
color: #ffa410;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: .5em;
|
||||
margin: -0.5em;
|
||||
margin-left: .5em;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(1,1,1,.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vn-dialog {
|
||||
display: none;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(1,1,1,.4);
|
||||
|
||||
button.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: .3em;
|
||||
cursor: pointer;
|
||||
|
||||
vn-icon {
|
||||
display: block;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
box-shadow: 0 0 .4em rgba(1,1,1,.4);
|
||||
background-color: white;
|
||||
border-radius: .2em;
|
||||
overflow: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 2em;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 28em;
|
||||
margin-top: -10em;
|
||||
margin-left: -14em;
|
||||
}
|
||||
.button-bar {
|
||||
margin-top: 1.5em;
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.1em;
|
||||
color: #ffa410;
|
||||
font-family: vn-font-bold;
|
||||
cursor: pointer;
|
||||
padding: .5em;
|
||||
margin: -0.5em;
|
||||
margin-left: .5em;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(1,1,1,.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,25 @@
|
|||
import {module} from '../module';
|
||||
|
||||
function vnAcl(aclService, $timeout) {
|
||||
function getMaterialType(className) {
|
||||
let type = '';
|
||||
if (className) {
|
||||
type = className.replace('mdl-', '').replace('__input', '');
|
||||
type = type.charAt(0).toUpperCase() + type.slice(1);
|
||||
}
|
||||
return type;
|
||||
}
|
||||
function udateMaterial(input) {
|
||||
if (input && input.className) {
|
||||
let find = input.className.match(/mdl-[\w]+input/g);
|
||||
if (find && find.length && find[0]) {
|
||||
let type = getMaterialType(find[0]);
|
||||
if (type && input.parentNode[`Material${type}`] && input.parentNode[`Material${type}`].updateClasses_) {
|
||||
input.parentNode[`Material${type}`].updateClasses_();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
restrict: 'A',
|
||||
priority: -1,
|
||||
|
@ -18,6 +37,7 @@ function vnAcl(aclService, $timeout) {
|
|||
if (input) {
|
||||
$timeout(() => {
|
||||
input.setAttribute("disabled", "true");
|
||||
udateMaterial(input);
|
||||
});
|
||||
$element[0].querySelectorAll('i, vn-drop-down').forEach(element => {
|
||||
element.parentNode.removeChild(element);
|
||||
|
|
|
@ -3,3 +3,4 @@ import './focus';
|
|||
import './dialog';
|
||||
import './validation';
|
||||
import './acl';
|
||||
import './onErrorSrc';
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
import {module} from '../module';
|
||||
|
||||
function onErrorSrc() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: (scope, element, attrs) => {
|
||||
let imgError = '/static/images/no-image200x200.png';
|
||||
element.bind('error', function() {
|
||||
if (attrs.src != imgError) {
|
||||
attrs.$set('src', imgError);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.directive('onErrorSrc', onErrorSrc);
|
|
@ -0,0 +1,186 @@
|
|||
describe('Directive validation', () => {
|
||||
let scope;
|
||||
let element;
|
||||
let compile;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
});
|
||||
|
||||
compile = (_element, validations, value) => {
|
||||
inject(($compile, $rootScope, aclService, _$timeout_, $window) => {
|
||||
$window.validations = validations;
|
||||
scope = $rootScope.$new();
|
||||
scope.user = {name: value};
|
||||
element = angular.element(_element);
|
||||
$compile(element)(scope);
|
||||
scope.$digest();
|
||||
});
|
||||
};
|
||||
|
||||
it(`should throw an error if the vnValidation doesn't have the right syntax`, () => {
|
||||
let html = `<input type="name" ng-model="user.name" vn-validation="user"/>`;
|
||||
|
||||
expect(() => {
|
||||
compile(html, {});
|
||||
}).toThrow(new Error(`vnValidation: Attribute must have this syntax: [entity].[field]`));
|
||||
});
|
||||
|
||||
it('should throw an error if the window.validations aint defined', () => {
|
||||
let html = `<input type="name" ng-model="user.name" vn-validation="user.name"/>`;
|
||||
|
||||
expect(() => {
|
||||
compile(html, {});
|
||||
}).toThrow(new Error(`vnValidation: Entity 'User' doesn't exist`));
|
||||
});
|
||||
|
||||
describe('Validator presence()', () => {
|
||||
it('should not validate the user name as it is an empty string', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'presence'}]}}};
|
||||
compile(html, validations, 'Spiderman');
|
||||
scope.user.name = '';
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validator absence()', () => {
|
||||
it('should not validate the entity as it should be an empty string', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'absence'}]}}};
|
||||
compile(html, validations, 'Spiderman');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
|
||||
it('should validate the entity as it is an empty string', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'absence'}]}}};
|
||||
compile(html, validations, '');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-valid');
|
||||
expect(element[0].classList).not.toContain('ng-invalid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validator length()', () => {
|
||||
it('should not validate the user name as it should have min length of 15', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'length', min: 10, max: 50, is: 15}]}}};
|
||||
compile(html, validations, 'fifteen!');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
|
||||
it('should validate the user name as it has length of 15', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'length', min: 10, max: 50, is: 15}]}}};
|
||||
compile(html, validations, 'fifteen length!');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-valid');
|
||||
expect(element[0].classList).not.toContain('ng-invalid');
|
||||
});
|
||||
|
||||
it('should not validate the user name as it should have min length of 10', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'length', min: 10}]}}};
|
||||
compile(html, validations, 'shortname');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
|
||||
it('should validate the user name as its length is greater then the minimum', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'length', min: 10}]}}};
|
||||
compile(html, validations, 'verylongname');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-valid');
|
||||
expect(element[0].classList).not.toContain('ng-invalid');
|
||||
});
|
||||
|
||||
it('should not validate the user name as its length is greater then the maximum', () => {
|
||||
let html = `<form><input type="name" ng-model="user.name" vn-validation="user.name"/></form>`;
|
||||
let validations = {User: {validations: {name: [{validation: 'length', max: 10}]}}};
|
||||
compile(html, validations, 'toolongname');
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validator numericality()', () => {
|
||||
it('should not validate the phone number as it should a integer', () => {
|
||||
let html = `<form><input type="text" ng-model="user.phone" vn-validation="user.phone"/></form>`;
|
||||
let validations = {User: {validations: {phone: [{validation: 'numericality', is: 'what is this?'}]}}};
|
||||
compile(html, validations, 'spiderman');
|
||||
scope.user.phone = 'this is not a phone number!';
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
|
||||
it('should validate the phone number as it an integer', () => {
|
||||
let html = `<form><input type="text" ng-model="user.phone" vn-validation="user.phone"/></form>`;
|
||||
let validations = {User: {validations: {phone: [{validation: 'numericality', is: 'what is this?'}]}}};
|
||||
compile(html, validations, 'spiderman');
|
||||
scope.user.phone = '555555555';
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-valid');
|
||||
expect(element[0].classList).not.toContain('ng-invalid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validator inclusion()', () => {
|
||||
it('should not validate the phone number as it is not an integer', () => {
|
||||
let html = `<form><input type="text" ng-model="user.phone" vn-validation="user.phone"/></form>`;
|
||||
let validations = {User: {validations: {phone: [{validation: 'inclusion'}]}}};
|
||||
compile(html, validations, 'spiderman');
|
||||
scope.user.phone = 'this is not a phone number!';
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validator exclusion()', () => {
|
||||
it('should validate the phone number as it is an integer', () => {
|
||||
let html = `<form><input type="text" ng-model="user.phone" vn-validation="user.phone"/></form>`;
|
||||
let validations = {User: {validations: {phone: [{validation: 'exclusion'}]}}};
|
||||
compile(html, validations, 'spiderman');
|
||||
scope.user.phone = '555555555';
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-valid');
|
||||
expect(element[0].classList).not.toContain('ng-invalid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validator format()', () => {
|
||||
it('should not validate the email number as it doesnt contain @', () => {
|
||||
let html = `<form><input type="text" ng-model="user.email" vn-validation="user.email"/></form>`;
|
||||
let validations = {User: {validations: {email: [{validation: 'format', with: '@'}]}}};
|
||||
compile(html, validations, 'spiderman');
|
||||
scope.user.email = 'userverdnatura.es';
|
||||
scope.$digest();
|
||||
|
||||
expect(element[0].classList).toContain('ng-invalid');
|
||||
expect(element[0].classList).not.toContain('ng-valid');
|
||||
});
|
||||
});
|
||||
});
|
|
@ -29,7 +29,6 @@ export function directive(interpolate, compile, $window) {
|
|||
throw new Error(`vnValidation: Entity '${entityName}' doesn't exist`);
|
||||
|
||||
let validations = entity.validations[fieldName];
|
||||
|
||||
if (!validations || validations.length == 0)
|
||||
return;
|
||||
|
||||
|
@ -40,7 +39,7 @@ export function directive(interpolate, compile, $window) {
|
|||
let errorShown = false;
|
||||
|
||||
input.$options.$$options.allowInvalid = true;
|
||||
input.$validators.entity = function(value) {
|
||||
input.$validators.entity = value => {
|
||||
try {
|
||||
validateAll(value, validations);
|
||||
return true;
|
||||
|
@ -51,9 +50,9 @@ export function directive(interpolate, compile, $window) {
|
|||
}
|
||||
};
|
||||
|
||||
scope.$watch(function() {
|
||||
scope.$watch(() => {
|
||||
return (form.$submitted || input.$dirty) && input.$invalid;
|
||||
}, function(value) {
|
||||
}, value => {
|
||||
let parent = element.parent();
|
||||
|
||||
if (value) {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<vn-vertical class="dropdown-body" ng-show="$ctrl.show">
|
||||
<vn-one ng-show="$ctrl.filter" class="filter">
|
||||
<vn-vertical class="dropdown-body" ng-if="$ctrl.show">
|
||||
<vn-auto ng-show="$ctrl.filter" class="filter">
|
||||
<vn-horizontal>
|
||||
<input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="$ctrl.search"/>
|
||||
<vn-icon vn-none icon="clear" ng-click="$ctrl.clearSearch()"></vn-icon>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
</vn-auto>
|
||||
<vn-auto>
|
||||
<ul class="dropdown">
|
||||
<li tabIndex="-1"
|
||||
<li
|
||||
ng-repeat="item in $ctrl.itemsFiltered track by $index"
|
||||
ng-click="$ctrl.selectItem(item)"
|
||||
ng-class="{'active': $index === $ctrl.activeOption, 'checked': item.checked}"
|
||||
|
@ -19,11 +19,10 @@
|
|||
<li
|
||||
ng-if="$ctrl.loadMore&&!$ctrl.removeLoadMore"
|
||||
class="dropdown__loadMore"
|
||||
tabIndex="-1"
|
||||
ng-class="{'active': $ctrl.itemsFiltered.length === $ctrl.activeOption, 'noMore' : !$ctrl.showLoadMore}"
|
||||
ng-click="$ctrl.loadItems()"
|
||||
translate="{{$ctrl.showLoadMore ? 'Show More' : 'No more results'}}"
|
||||
></li>
|
||||
</ul>
|
||||
</vn-one>
|
||||
</vn-auto>
|
||||
</vn-vertical>
|
|
@ -1,5 +1,6 @@
|
|||
import {module} from '../module';
|
||||
import './style.scss';
|
||||
import validKey from '../lib/keyCodes';
|
||||
|
||||
export default class DropDown {
|
||||
constructor($element, $filter, $timeout) {
|
||||
|
@ -7,26 +8,36 @@ export default class DropDown {
|
|||
this.$filter = $filter;
|
||||
this.$timeout = $timeout;
|
||||
|
||||
this.parent = this.parent || $element[0].parentNode;
|
||||
this._search = null;
|
||||
this.itemsFiltered = [];
|
||||
this._activeOption = -1;
|
||||
this._focusingFilter = false;
|
||||
this._tryToShow = 0;
|
||||
}
|
||||
|
||||
get container() {
|
||||
return this.$element[0].querySelector('ul.dropdown');
|
||||
}
|
||||
|
||||
get show() {
|
||||
return this._show;
|
||||
}
|
||||
|
||||
set show(value) {
|
||||
let oldValue = this.show;
|
||||
this._show = value;
|
||||
if (value && !this._focusingFilter && oldValue !== value && this.filter) {
|
||||
let inputFilterSearch = this.$element[0].querySelector('input');
|
||||
this._focusingFilter = true;
|
||||
// It wait up to 1 second if the dropdown opens but there is no data to show
|
||||
if (value && !oldValue && !this.itemsFiltered.length && this._tryToShow < 4) {
|
||||
this.$timeout(() => {
|
||||
inputFilterSearch.focus();
|
||||
this._focusingFilter = false;
|
||||
this._tryToShow++;
|
||||
this.show = true;
|
||||
if (this.activeOption === -1) {
|
||||
this.activeOption = 0;
|
||||
}
|
||||
}, 250);
|
||||
} else {
|
||||
this._tryToShow = 0;
|
||||
this._show = value;
|
||||
this._toggleDropDown(value, oldValue);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -51,18 +62,92 @@ export default class DropDown {
|
|||
set activeOption(value) {
|
||||
if (value < 0) {
|
||||
value = 0;
|
||||
} else if (value >= this.items.length) {
|
||||
value = this.showLoadMore ? this.items.length : this.items.length - 1;
|
||||
} else if (value >= this.itemsFiltered.length) {
|
||||
value = this.showLoadMore ? this.itemsFiltered.length : this.itemsFiltered.length - 1;
|
||||
}
|
||||
this.$timeout(() => {
|
||||
this._activeOption = value;
|
||||
// AutoLoad items with "scroll" (1st version):
|
||||
if (value && value >= this.items.length - 3 && !this.removeLoadMore) {
|
||||
if (value && value >= this.itemsFiltered.length - 3 && !this.removeLoadMore) {
|
||||
this.loadItems();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_toggleDropDown(value, oldValue) {
|
||||
this.$timeout(() => {
|
||||
this._eventScroll(value);
|
||||
this._calculatePosition(value, oldValue);
|
||||
});
|
||||
}
|
||||
|
||||
_eventScroll(add, num) {
|
||||
let count = num || 0;
|
||||
if (add) {
|
||||
if (this.container) {
|
||||
this.container.addEventListener('scroll', e => this.loadFromScroll(e));
|
||||
// this.$timeout(() => { // falla al entrar por primera vez xq pierde el foco y cierra el dropdown
|
||||
// this._setFocusInFilterInput();
|
||||
// });
|
||||
} else if (count < 4) {
|
||||
count++;
|
||||
this.$timeout(() => { // wait angular ngIf
|
||||
this._eventScroll(add, count);
|
||||
}, 250);
|
||||
}
|
||||
} else if (this.container) {
|
||||
this.container.removeEventListener('scroll', e => this.loadFromScroll(e));
|
||||
}
|
||||
}
|
||||
|
||||
_setFocusInFilterInput() {
|
||||
let inputFilterSearch = this.$element[0].querySelector('input');
|
||||
this._focusingFilter = true;
|
||||
if (inputFilterSearch)
|
||||
this.$timeout(() => {
|
||||
inputFilterSearch.focus();
|
||||
this._focusingFilter = false;
|
||||
}, 250);
|
||||
}
|
||||
|
||||
_background(create) {
|
||||
let el = document.getElementById('ddBack');
|
||||
if (el) {
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
|
||||
if (create) {
|
||||
el = document.createElement('div');
|
||||
el.id = 'ddBack';
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
}
|
||||
_calculatePosition(value, oldValue) {
|
||||
if (value && !oldValue) {
|
||||
if (this.parent === undefined) {
|
||||
this.parent = this.$element.parent().parent();
|
||||
}
|
||||
|
||||
let parentRect = this.parent.getBoundingClientRect();
|
||||
let elemetRect = this.$element[0].getBoundingClientRect();
|
||||
let instOffset = parentRect.bottom + elemetRect.height;
|
||||
|
||||
if (instOffset >= window.innerHeight) {
|
||||
this._background(true);
|
||||
this.$element.addClass('fixed-dropDown');
|
||||
this.$element.css('top', `${(parentRect.top - elemetRect.height)}px`);
|
||||
this.$element.css('left', `${(parentRect.x)}px`);
|
||||
this.$element.css('height', `${elemetRect.height}px`);
|
||||
}
|
||||
} else if (!value && oldValue) {
|
||||
this.$element.removeAttr('style');
|
||||
if (this.itemWidth) {
|
||||
this.$element.css('width', this.itemWidth + 'px');
|
||||
}
|
||||
this.$element.removeClass('fixed-dropDown');
|
||||
this._background();
|
||||
}
|
||||
}
|
||||
|
||||
filterItems() {
|
||||
this.itemsFiltered = this.search ? this.$filter('filter')(this.items, this.search) : this.items;
|
||||
}
|
||||
|
@ -73,18 +158,6 @@ export default class DropDown {
|
|||
}
|
||||
}
|
||||
|
||||
$onChanges(changesObj) {
|
||||
if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
|
||||
this.$element.css('top', changesObj.top.currentValue + 'px');
|
||||
}
|
||||
if (changesObj.show && changesObj.itemWidth && changesObj.itemWidth.currentValue) {
|
||||
this.$element.css('width', changesObj.itemWidth.currentValue + 'px');
|
||||
}
|
||||
if (changesObj.items) {
|
||||
this.filterItems();
|
||||
}
|
||||
}
|
||||
|
||||
clearSearch() {
|
||||
this.search = null;
|
||||
}
|
||||
|
@ -101,42 +174,55 @@ export default class DropDown {
|
|||
|
||||
onKeydown(event) {
|
||||
if (this.show) {
|
||||
switch (event.keyCode) {
|
||||
case 13: // Enter
|
||||
if (event.keyCode === 13) { // Enter
|
||||
this.$timeout(() => {
|
||||
this.selectOption();
|
||||
});
|
||||
event.preventDefault();
|
||||
break;
|
||||
case 27: // Escape
|
||||
} else if (event.keyCode === 27) { // Escape
|
||||
this.clearSearch();
|
||||
break;
|
||||
case 38: // Arrow up
|
||||
} else if (event.keyCode === 38) { // Arrow up
|
||||
this.activeOption--;
|
||||
this.$timeout(() => {
|
||||
this.setScrollPosition();
|
||||
}, 100);
|
||||
break;
|
||||
case 40: // Arrow down
|
||||
} else if (event.keyCode === 40) { // Arrow down
|
||||
this.activeOption++;
|
||||
this.$timeout(() => {
|
||||
this.setScrollPosition();
|
||||
}, 100);
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
} else if (event.keyCode === 35) { // End
|
||||
this.activeOption = this.itemsFiltered.length - 1;
|
||||
this.$timeout(() => {
|
||||
this.setScrollPosition();
|
||||
}, 100);
|
||||
} else if (event.keyCode === 36) { // Start
|
||||
this.activeOption = 0;
|
||||
this.$timeout(() => {
|
||||
this.setScrollPosition();
|
||||
}, 100);
|
||||
} else if (this.filter) {
|
||||
let oldValue = this.search || '';
|
||||
if (validKey(event)) {
|
||||
this.search = oldValue + String.fromCharCode(event.keyCode);
|
||||
} else if (event.keyCode === 8) { // backSpace
|
||||
this.search = oldValue.slice(0, -1);
|
||||
}
|
||||
} /* else {
|
||||
console.error(`Error: keyCode ${event.keyCode} not supported`);
|
||||
} */
|
||||
}
|
||||
}
|
||||
setScrollPosition() {
|
||||
let child = this.$element[0].querySelector('ul.dropdown li.active');
|
||||
if (child) {
|
||||
let childRect = child.getBoundingClientRect();
|
||||
let containerRect = this.container.getBoundingClientRect();
|
||||
if (typeof child.scrollIntoView === 'function' && (childRect.top > containerRect.top + containerRect.height || childRect.top < containerRect.top)) {
|
||||
child.scrollIntoView();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setScrollPosition() {
|
||||
let dropdown = this.$element[0].querySelector('ul.dropdown');
|
||||
let child = dropdown ? dropdown.childNodes[this.activeOption] : null;
|
||||
if (child && typeof child.scrollIntoView === 'function') {
|
||||
child.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
selectItem(item) {
|
||||
this.selected = item;
|
||||
if (this.multiple) {
|
||||
|
@ -146,14 +232,26 @@ export default class DropDown {
|
|||
this.show = false;
|
||||
}
|
||||
}
|
||||
|
||||
loadItems() {
|
||||
if (this.showLoadMore && this.loadMore) {
|
||||
this.loadMore();
|
||||
}
|
||||
this.show = true;
|
||||
}
|
||||
|
||||
loadFromScroll(e) {
|
||||
let containerRect = e.target.getBoundingClientRect();
|
||||
if (e.target.scrollHeight - e.target.scrollTop - containerRect.height <= 50) {
|
||||
this.loadItems();
|
||||
}
|
||||
}
|
||||
$onChanges(changesObj) {
|
||||
if (changesObj.show && changesObj.itemWidth && changesObj.itemWidth.currentValue) {
|
||||
this.$element.css('width', changesObj.itemWidth.currentValue + 'px');
|
||||
}
|
||||
if (changesObj.items) {
|
||||
this.filterItems();
|
||||
}
|
||||
}
|
||||
$onInit() {
|
||||
if (this.parent)
|
||||
this.parent.addEventListener('keydown', e => this.onKeydown(e));
|
||||
|
@ -179,7 +277,6 @@ module.component('vnDropDown', {
|
|||
removeLoadMore: '<?',
|
||||
filterAction: '&?',
|
||||
showLoadMore: '<?',
|
||||
top: '<?',
|
||||
itemWidth: '<?',
|
||||
parent: '<?',
|
||||
multiple: '<?'
|
||||
|
|
|
@ -17,6 +17,7 @@ describe('Component vnDropDown', () => {
|
|||
$timeout = _$timeout_;
|
||||
$filter = _$filter_;
|
||||
controller = $componentController('vnDropDown', {$element, $timeout, $filter});
|
||||
controller.parent = angular.element('<vn-parent></vn-parent>')[0];
|
||||
}));
|
||||
|
||||
describe('show() setter', () => {
|
||||
|
@ -62,43 +63,43 @@ describe('Component vnDropDown', () => {
|
|||
it(`should set _activeOption as items.length if showLoadMore is defined if activeOption is bigger than items.length then call loadItems()`, () => {
|
||||
spyOn(controller, 'loadItems');
|
||||
controller.showLoadMore = true;
|
||||
controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.activeOption = 10;
|
||||
$timeout.flush();
|
||||
|
||||
expect(controller._activeOption).toEqual(4);
|
||||
expect(controller.activeOption).toEqual(4);
|
||||
expect(controller.loadItems).toHaveBeenCalledWith();
|
||||
});
|
||||
|
||||
it(`should set _activeOption as activeOption if showLoadMore is defined if activeOption is smaller than items.length then call loadItems()`, () => {
|
||||
spyOn(controller, 'loadItems');
|
||||
controller.showLoadMore = true;
|
||||
controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.activeOption = 2;
|
||||
$timeout.flush();
|
||||
|
||||
expect(controller._activeOption).toEqual(2);
|
||||
expect(controller.activeOption).toEqual(2);
|
||||
expect(controller.loadItems).toHaveBeenCalledWith();
|
||||
});
|
||||
|
||||
it(`should set _activeOption as items.length -1 if showLoadMore is not defined then call loadItems()`, () => {
|
||||
spyOn(controller, 'loadItems');
|
||||
controller.showLoadMore = undefined;
|
||||
controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.activeOption = 10;
|
||||
$timeout.flush();
|
||||
|
||||
expect(controller._activeOption).toEqual(3);
|
||||
expect(controller.activeOption).toEqual(3);
|
||||
expect(controller.loadItems).toHaveBeenCalledWith();
|
||||
});
|
||||
|
||||
it(`should define _activeOption as activeOption and never call loadItems()`, () => {
|
||||
spyOn(controller, 'loadItems');
|
||||
controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}, {id: 5, name: 'Doctor X'}];
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}, {id: 5, name: 'Doctor X'}];
|
||||
controller.activeOption = 1;
|
||||
$timeout.flush();
|
||||
|
||||
expect(controller._activeOption).toEqual(1);
|
||||
expect(controller.activeOption).toEqual(1);
|
||||
expect(controller.loadItems).not.toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
|
@ -139,14 +140,6 @@ describe('Component vnDropDown', () => {
|
|||
});
|
||||
|
||||
describe('$onChanges()', () => {
|
||||
it(`should set the top css of the $element`, () => {
|
||||
let argumentObject = {show: true, top: {currentValue: 100}};
|
||||
spyOn(controller.$element, 'css');
|
||||
controller.$onChanges(argumentObject);
|
||||
|
||||
expect(controller.$element.css).toHaveBeenCalledWith('top', '100px');
|
||||
});
|
||||
|
||||
it(`should set the width css of the $element`, () => {
|
||||
let argumentObject = {show: true, itemWidth: {currentValue: 100}};
|
||||
spyOn(controller.$element, 'css');
|
||||
|
@ -235,7 +228,7 @@ describe('Component vnDropDown', () => {
|
|||
});
|
||||
|
||||
it(`should call clearSearch() Esc key is pressed and take off 1 from _activeOption`, () => {
|
||||
controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
spyOn(controller, 'setScrollPosition');
|
||||
controller._show = true;
|
||||
controller.element = document.createElement('div');
|
||||
|
@ -250,7 +243,7 @@ describe('Component vnDropDown', () => {
|
|||
});
|
||||
|
||||
it(`should call clearSearch() Esc key is pressed and add up 1 to _activeOption`, () => {
|
||||
controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
spyOn(controller, 'setScrollPosition');
|
||||
controller._show = true;
|
||||
controller.element = document.createElement('div');
|
||||
|
@ -265,18 +258,19 @@ describe('Component vnDropDown', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('setScrollPosition()', () => {
|
||||
it(`should call child.scrollIntoView if defined `, () => {
|
||||
$element[0].firstChild.setAttribute('class', 'dropdown');
|
||||
let child = $element[0].firstChild.firstChild;
|
||||
child.scrollIntoView = () => {};
|
||||
spyOn(child, 'scrollIntoView');
|
||||
controller._activeOption = 0;
|
||||
controller.setScrollPosition();
|
||||
// describe('setScrollPosition()', () => {
|
||||
// it(`should call child.scrollIntoView if defined `, () => {
|
||||
// $element[0].firstChild.setAttribute('class', 'dropdown');
|
||||
// let child = $element[0].firstChild.firstChild;
|
||||
|
||||
expect(child.scrollIntoView).toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
// child.scrollIntoView = () => {};
|
||||
// spyOn(child, 'scrollIntoView');
|
||||
// controller._activeOption = 0;
|
||||
// controller.setScrollPosition();
|
||||
|
||||
// expect(child.scrollIntoView).toHaveBeenCalledWith();
|
||||
// });
|
||||
// });
|
||||
|
||||
describe('selectItem()', () => {
|
||||
it(`should pass item to selected and set controller._show to false`, () => {
|
||||
|
@ -293,26 +287,40 @@ describe('Component vnDropDown', () => {
|
|||
controller.selectItem(item);
|
||||
|
||||
expect(controller.selected).toEqual(item);
|
||||
expect(controller._show).toEqual(true);
|
||||
expect(controller._show).not.toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('loadItems()', () => {
|
||||
it(`should set controller._show to true`, () => {
|
||||
it(`should set controller.show to true`, () => {
|
||||
controller.show = false;
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.loadItems();
|
||||
|
||||
expect(controller._show).toEqual(true);
|
||||
expect(controller.show).toEqual(true);
|
||||
});
|
||||
|
||||
it(`should call loadMore() and then set controller._show to true`, () => {
|
||||
it(`should call loadMore() and then set controller._show to true if there are items`, () => {
|
||||
controller.showLoadMore = () => {};
|
||||
controller.loadMore = () => {};
|
||||
spyOn(controller, 'loadMore');
|
||||
controller.itemsFiltered = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
|
||||
controller.loadItems();
|
||||
|
||||
expect(controller._show).toEqual(true);
|
||||
expect(controller.loadMore).toHaveBeenCalledWith();
|
||||
});
|
||||
|
||||
it(`should call loadMore() and then set controller._show to undefined if there are not items`, () => {
|
||||
controller.showLoadMore = () => {};
|
||||
controller.loadMore = () => {};
|
||||
spyOn(controller, 'loadMore');
|
||||
controller.itemsFiltered = [];
|
||||
controller.loadItems();
|
||||
|
||||
expect(controller._show).not.toBeDefined();
|
||||
expect(controller.loadMore).toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
|
||||
describe('$onInit()', () => {
|
||||
|
|
|
@ -4,6 +4,8 @@ vn-drop-down {
|
|||
padding: 0 15px;
|
||||
margin-left: -15px;
|
||||
background: transparent;
|
||||
max-height: 446px;
|
||||
overflow: hidden;
|
||||
.dropdown-body{
|
||||
background: white;
|
||||
border: 1px solid #A7A7A7;
|
||||
|
@ -27,7 +29,7 @@ vn-drop-down {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
background: white;
|
||||
max-height: 400px;
|
||||
max-height: 378px;
|
||||
overflow-y: auto;
|
||||
li {
|
||||
outline: none;
|
||||
|
@ -55,4 +57,24 @@ vn-drop-down {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#ddBack {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
vn-drop-down.fixed-dropDown {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.dropdown-body{
|
||||
height: 100%;
|
||||
ul{
|
||||
border-bottom: 1px solid #A7A7A7;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -2,7 +2,6 @@ vn-grid-header {
|
|||
border-bottom: 3px solid #9D9D9D;
|
||||
font-weight: bold;
|
||||
.orderly{
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
|
@ -11,13 +10,18 @@ vn-grid-header {
|
|||
}
|
||||
}
|
||||
vn-icon{
|
||||
line-height: 17px;
|
||||
font-size: 17px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
i {
|
||||
padding-top: 3px;
|
||||
padding: 0;
|
||||
margin: -2px -17px 0 0;
|
||||
opacity: 0.2;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
[min-none]{
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div class="icon-menu">
|
||||
<div class="icon-menu" ng-click="$ctrl.showDropDown = true">
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square icon-menu__button">
|
||||
<vn-icon vn-none icon="{{::$ctrl.icon}}"></vn-icon>
|
||||
<vn-icon vn-none class="icon-menu__arrow_down" icon="keyboard_arrow_down" ng-click="$ctrl.showDropDown = true"></vn-icon>
|
||||
<vn-icon vn-none class="icon-menu__arrow_down" icon="keyboard_arrow_down"></vn-icon>
|
||||
</button>
|
||||
<div ng-if="!$ctrl.findMore">
|
||||
<vn-drop-down
|
||||
|
|
|
@ -79,25 +79,32 @@ export default class IconMenu {
|
|||
|
||||
this.findMore = this.url && this.maxRow;
|
||||
|
||||
this.mouseFocus = false;
|
||||
this.focused = false;
|
||||
|
||||
this.$element.bind('mouseover', e => {
|
||||
this.$timeout(() => {
|
||||
this.showDropDown = true;
|
||||
this.mouseFocus = true;
|
||||
this.showDropDown = this.focused;
|
||||
});
|
||||
});
|
||||
|
||||
this.$element.bind('mouseout', () => {
|
||||
this.$timeout(() => {
|
||||
this.showDropDown = false;
|
||||
this.mouseFocus = false;
|
||||
this.showDropDown = this.focused;
|
||||
});
|
||||
});
|
||||
this.$element.bind('focusin', e => {
|
||||
this.$timeout(() => {
|
||||
this.focused = true;
|
||||
this.showDropDown = true;
|
||||
});
|
||||
});
|
||||
this.$element.bind('focusout', e => {
|
||||
this.$timeout(() => {
|
||||
this.showDropDown = false;
|
||||
this.focused = false;
|
||||
this.showDropDown = this.mouseFocus;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -7,8 +7,13 @@ import {module} from '../module';
|
|||
* @property {Snackbar} snackbar The main object to show messages.
|
||||
*/
|
||||
export default class App {
|
||||
constructor($rootScope) {
|
||||
this.loaderStatus = 0;
|
||||
this.$rootScope = $rootScope;
|
||||
this.timeout = window.snackbarTimeout || 2000;
|
||||
}
|
||||
show(message) {
|
||||
if (this.snackbar) this.snackbar.show({message: message});
|
||||
if (this.snackbar) this.snackbar.show({message: message, timeout: this.timeout});
|
||||
}
|
||||
showMessage(message) {
|
||||
this.show(message);
|
||||
|
@ -16,5 +21,17 @@ export default class App {
|
|||
showError(message) {
|
||||
this.show(`Error: ${message}`);
|
||||
}
|
||||
pushLoader() {
|
||||
this.loaderStatus++;
|
||||
if (this.loaderStatus === 1)
|
||||
this.$rootScope.loading = true;
|
||||
}
|
||||
popLoader() {
|
||||
this.loaderStatus--;
|
||||
if (this.loaderStatus === 0)
|
||||
this.$rootScope.loading = false;
|
||||
}
|
||||
}
|
||||
App.$inject = ['$rootScope'];
|
||||
|
||||
module.service('vnApp', App);
|
||||
|
|
|
@ -8,6 +8,14 @@ function index(mgIndex) {
|
|||
}
|
||||
module.factory('vnIndex', index);
|
||||
|
||||
nonAuto.$inject = ['mgIndex'];
|
||||
function nonAuto(mgIndex) {
|
||||
return Object.assign({}, mgIndex, {
|
||||
auto: false
|
||||
});
|
||||
}
|
||||
module.factory('vnIndexNonAuto', nonAuto);
|
||||
|
||||
successFactoryCreate.$inject = ['mgSuccessFactoryCreate'];
|
||||
function successFactoryCreate(create) {
|
||||
return Object.assign({}, create, {
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
import {module} from '../module';
|
||||
|
||||
const isFullEmpty = item => {
|
||||
return (item === null || item === undefined) || (typeof item === 'object' && !Object.keys(item).length);
|
||||
};
|
||||
|
||||
export default isFullEmpty;
|
||||
export const NAME = 'isFullEmpty';
|
||||
module.value(NAME, isFullEmpty);
|
|
@ -14,3 +14,4 @@ export {NAME as INTERPOLATE, Interpolate} from './interpolate';
|
|||
export {NAME as COPY_OBJECT} from './copy';
|
||||
export {NAME as EQUALS_OBJECT} from './equals';
|
||||
export {NAME as GET_DATA_MODIFIED, factory as Modified} from './modified';
|
||||
export {NAME as VALID_KEY} from './keyCodes';
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
import Component from './component';
|
||||
|
||||
/**
|
||||
* Component that host an input.
|
||||
*/
|
||||
export default class Input extends Component {
|
||||
select() {
|
||||
this.input.select();
|
||||
}
|
||||
focus() {
|
||||
this.input.focus();
|
||||
}
|
||||
}
|
|
@ -1,11 +1,10 @@
|
|||
import {module} from '../module';
|
||||
|
||||
interceptor.$inject = ['$q', '$rootScope', '$window', 'vnApp', '$translate', '$cookies'];
|
||||
function interceptor($q, $rootScope, $window, vnApp, $translate, $cookies) {
|
||||
$rootScope.loading = false;
|
||||
interceptor.$inject = ['$q', '$window', 'vnApp', '$translate', '$cookies'];
|
||||
function interceptor($q, $window, vnApp, $translate, $cookies) {
|
||||
return {
|
||||
request: function(config) {
|
||||
$rootScope.loading = true;
|
||||
vnApp.pushLoader();
|
||||
let token = $cookies.get('vnToken');
|
||||
|
||||
if (token)
|
||||
|
@ -23,11 +22,11 @@ function interceptor($q, $rootScope, $window, vnApp, $translate, $cookies) {
|
|||
case 'PATCH':
|
||||
vnApp.showMessage($translate.instant('Data saved!'));
|
||||
}
|
||||
$rootScope.loading = false;
|
||||
vnApp.popLoader();
|
||||
return response;
|
||||
},
|
||||
responseError: function(rejection) {
|
||||
$rootScope.loading = false;
|
||||
vnApp.popLoader();
|
||||
let data = rejection.data;
|
||||
let error;
|
||||
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
import {module} from '../module';
|
||||
|
||||
const validKey = key => {
|
||||
let keycode = key.keyCode || key;
|
||||
|
||||
let valid =
|
||||
(keycode > 47 && keycode < 58) || // number keys
|
||||
(keycode > 64 && keycode < 91) || // letter keys
|
||||
(keycode > 95 && keycode < 112) || // numpad keys
|
||||
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
|
||||
(keycode > 218 && keycode < 223); // [\]' (in order)
|
||||
|
||||
return valid;
|
||||
};
|
||||
|
||||
export default validKey;
|
||||
|
||||
export const NAME = 'validKey';
|
||||
module.value(NAME, validKey);
|
|
@ -0,0 +1,50 @@
|
|||
describe('Service acl', () => {
|
||||
let aclService;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('vnCore');
|
||||
});
|
||||
|
||||
beforeEach(angular.mock.module($provide => {
|
||||
$provide.value('aclConstant', {});
|
||||
}));
|
||||
|
||||
beforeEach(inject((_aclService_, $httpBackend) => {
|
||||
aclService = _aclService_;
|
||||
}));
|
||||
|
||||
it("should return false as the service doesn't have roles", () => {
|
||||
expect(aclService.routeHasPermission('http://www.verdnatura.es')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("should return true as the service has roles but the route has no acl", () => {
|
||||
aclService.roles = {customer: true};
|
||||
|
||||
expect(aclService.routeHasPermission('http://www.verdnatura.es')).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should return false as the service roles have no length", () => {
|
||||
aclService.roles = {};
|
||||
let route = {url: 'http://www.verdnatura.es', acl: []};
|
||||
|
||||
expect(aclService.routeHasPermission(route)).toBeFalsy();
|
||||
});
|
||||
|
||||
it("should call the service aclPermission() function and return false as the service has roles and the rote has acl without length", () => {
|
||||
aclService.roles = {customer: true, employee: true};
|
||||
let route = {url: 'http://www.verdnatura.es', acl: []};
|
||||
spyOn(aclService, 'aclPermission').and.callThrough();
|
||||
|
||||
expect(aclService.routeHasPermission(route)).toBeFalsy();
|
||||
expect(aclService.aclPermission).toHaveBeenCalledWith(route.acl);
|
||||
});
|
||||
|
||||
it("should call the service aclPermission() function to return true as the service has roles matching with the ones in acl", () => {
|
||||
aclService.roles = {customer: true, employee: true};
|
||||
let route = {url: 'http://www.verdnatura.es', acl: ['customer']};
|
||||
spyOn(aclService, 'aclPermission').and.callThrough();
|
||||
|
||||
expect(aclService.routeHasPermission(route)).toBeTruthy();
|
||||
expect(aclService.aclPermission).toHaveBeenCalledWith(route.acl);
|
||||
});
|
||||
});
|
|
@ -1,20 +1,21 @@
|
|||
import {validator} from 'vendor';
|
||||
|
||||
export const validators = {
|
||||
presence: function(value, conf) {
|
||||
if (validator.isEmpty(value))
|
||||
presence: value => {
|
||||
if (validator.isEmpty(value ? String(value) : ''))
|
||||
throw new Error(`Value can't be empty`);
|
||||
},
|
||||
absence: function(value, conf) {
|
||||
absence: value => {
|
||||
if (!validator.isEmpty(value))
|
||||
throw new Error(`Value should be empty`);
|
||||
},
|
||||
length: function(value, conf) {
|
||||
length: (value, conf) => {
|
||||
let options = {
|
||||
min: conf.min || conf.is,
|
||||
max: conf.max || conf.is
|
||||
};
|
||||
if (!validator.isLength(value, options)) {
|
||||
let val = value ? String(value) : '';
|
||||
if (!validator.isLength(val, options)) {
|
||||
if (conf.is) {
|
||||
throw new Error(`Value should be ${conf.is} characters long`);
|
||||
} else if (conf.min && conf.max) {
|
||||
|
@ -26,26 +27,26 @@ export const validators = {
|
|||
}
|
||||
}
|
||||
},
|
||||
numericality: function(value, conf) {
|
||||
numericality: (value, conf) => {
|
||||
if (conf.int) {
|
||||
if (!validator.isInt(value))
|
||||
throw new Error(`Value should be integer`);
|
||||
} else if (!validator.isNumeric(value))
|
||||
throw new Error(`Value should be a number`);
|
||||
},
|
||||
inclusion: function(value, conf) {
|
||||
inclusion: (value, conf) => {
|
||||
if (!validator.isIn(value, conf.in))
|
||||
throw new Error(`Invalid value`);
|
||||
},
|
||||
exclusion: function(value, conf) {
|
||||
exclusion: (value, conf) => {
|
||||
if (validator.isIn(value, conf.in))
|
||||
throw new Error(`Invalid value`);
|
||||
},
|
||||
format: function(value, conf) {
|
||||
format: (value, conf) => {
|
||||
if (!validator.matches(value, conf.with))
|
||||
throw new Error(`Invalid value`);
|
||||
},
|
||||
custom: function(value, conf) {
|
||||
custom: (value, conf) => {
|
||||
if (!conf.bindedFunction(value))
|
||||
throw new Error(`Invalid value`);
|
||||
}
|
||||
|
@ -73,7 +74,7 @@ export function validate(value, conf) {
|
|||
try {
|
||||
checkNull(value, conf);
|
||||
|
||||
if (validator && value != null)
|
||||
if (validator) // && value != null ??
|
||||
validator(value, conf);
|
||||
} catch (e) {
|
||||
let message = conf.message ? conf.message : e.message;
|
||||
|
|
|
@ -1,60 +1,60 @@
|
|||
/**
|
||||
* Rewrited CSS rules from Material Design Lite.
|
||||
* TODO: don't use !important
|
||||
*/
|
||||
|
||||
.mdl-textfield {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mdl-button {
|
||||
font-weight: bolder;
|
||||
color: #ffa410;
|
||||
}
|
||||
.mdl-button--colored {
|
||||
color: white !important;
|
||||
}
|
||||
.mdl-button--colored,
|
||||
.mdl-button--colored:focus,
|
||||
.mdl-button--colored:active {
|
||||
background-color: #ffa410 !important;
|
||||
}
|
||||
.mdl-button--colored:hover,
|
||||
.mdl-button--raised:hover {
|
||||
background-color: #ffa410 !important;
|
||||
}
|
||||
.mdl-button--fab{
|
||||
color: white !important;
|
||||
background-color: #ff9400 !important;
|
||||
}
|
||||
|
||||
.mdl-dialog__actions--full-width>*{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mdl-dialog{
|
||||
width: 400px;
|
||||
font-family: raleway-regular;
|
||||
line-height:60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mdl-textfield__error {
|
||||
visibility: visible;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
.mdl-textfield.invalid .mdl-textfield__input {
|
||||
border-color: #d50000;
|
||||
box-shadow: none;
|
||||
}
|
||||
.mdl-textfield.invalid .mdl-textfield__label::after {
|
||||
background-color: #d50000;
|
||||
}
|
||||
.mdl-textfield--floating-label.invalid .mdl-textfield__label {
|
||||
color: #d50000;
|
||||
font-size: 12px;
|
||||
top: 4px;
|
||||
}
|
||||
/**
|
||||
* Rewrited CSS rules from Material Design Lite.
|
||||
* TODO: don't use !important
|
||||
*/
|
||||
|
||||
.mdl-textfield {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mdl-button {
|
||||
font-weight: bolder;
|
||||
color: #ffa410;
|
||||
}
|
||||
.mdl-button--colored {
|
||||
color: white !important;
|
||||
}
|
||||
.mdl-button--colored,
|
||||
.mdl-button--colored:focus,
|
||||
.mdl-button--colored:active {
|
||||
background-color: #ffa410 !important;
|
||||
}
|
||||
.mdl-button--colored:hover,
|
||||
.mdl-button--raised:hover {
|
||||
background-color: #ffa410 !important;
|
||||
}
|
||||
.mdl-button--fab{
|
||||
color: white !important;
|
||||
background-color: #ff9400 !important;
|
||||
}
|
||||
|
||||
.mdl-dialog__actions--full-width>*{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mdl-dialog{
|
||||
width: 400px;
|
||||
font-family: vn-font;
|
||||
line-height:60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mdl-textfield__error {
|
||||
visibility: visible;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
.mdl-textfield.invalid .mdl-textfield__input {
|
||||
border-color: #d50000;
|
||||
box-shadow: none;
|
||||
}
|
||||
.mdl-textfield.invalid .mdl-textfield__label::after {
|
||||
background-color: #d50000;
|
||||
}
|
||||
.mdl-textfield--floating-label.invalid .mdl-textfield__label {
|
||||
color: #d50000;
|
||||
font-size: 12px;
|
||||
top: 4px;
|
||||
}
|
||||
|
|
|
@ -7,12 +7,18 @@ vn-textfield {
|
|||
width: auto;
|
||||
top: 0px;
|
||||
right: -6px;
|
||||
margin: 22px 0px;
|
||||
background-color: white;
|
||||
margin: 21px 0px;
|
||||
background: white;
|
||||
opacity: 1;
|
||||
z-index: 9999;
|
||||
color: #aaa;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 18px;
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.material-icons:hover {
|
||||
color: rgba(0,0,0, .87);
|
||||
}
|
||||
}
|
|
@ -1,11 +1,7 @@
|
|||
<div
|
||||
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
|
||||
tabindex="1"
|
||||
ng-focus="$ctrl.hasFocus = true"
|
||||
ng-blur="$ctrl.hasFocus = false"
|
||||
ng-mouseenter="$ctrl.hasMouseIn = true"
|
||||
ng-mouseleave="$ctrl.hasMouseIn = false"
|
||||
>
|
||||
ng-mouseleave="$ctrl.hasMouseIn = false">
|
||||
<input
|
||||
class="mdl-textfield__input"
|
||||
type="{{$ctrl.type}}"
|
||||
|
@ -14,10 +10,21 @@
|
|||
vn-validation="{{$ctrl.rule}}"
|
||||
ng-disabled="$ctrl.disabled"
|
||||
ng-readonly="$ctrl.readonly"
|
||||
/>
|
||||
ng-focus="$ctrl.hasFocus = true"
|
||||
ng-blur="$ctrl.hasFocus = false"
|
||||
/>
|
||||
<div class="mdl-chip__action">
|
||||
<i class="material-icons" ng-if="$ctrl.hasInfo" vn-tooltip="{{$ctrl.info}}" tooltip-position="up">info_outline</i>
|
||||
<i class="material-icons pointer" ng-show="$ctrl.hasValue&&($ctrl.hasFocus||$ctrl.hasMouseIn)" ng-click="$ctrl.clear()">clear</i>
|
||||
<i class="material-icons"
|
||||
ng-if="$ctrl.hasInfo"
|
||||
vn-tooltip="{{$ctrl.info}}"
|
||||
tooltip-position="up">
|
||||
info_outline
|
||||
</i>
|
||||
<i class="material-icons pointer"
|
||||
ng-show="$ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)"
|
||||
ng-click="$ctrl.clear()">
|
||||
clear
|
||||
</i>
|
||||
</div>
|
||||
<label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import {module} from '../module';
|
||||
import Component from '../lib/component';
|
||||
import * as normalizerFactory from '../lib/inputAttrsNormalizer';
|
||||
import Input from '../lib/input';
|
||||
import './style.scss';
|
||||
|
||||
export default class TextfieldController extends Component {
|
||||
export default class Textfield extends Input {
|
||||
constructor($element, $scope, $attrs, $timeout, normalizer) {
|
||||
super($element);
|
||||
|
||||
|
@ -15,45 +14,42 @@ export default class TextfieldController extends Component {
|
|||
this.$timeout = $timeout;
|
||||
|
||||
this._value = null;
|
||||
this.type = this.$attrs.type || 'text';
|
||||
this.type = $attrs.type || 'text';
|
||||
this.showActions = false;
|
||||
this.input = $element[0].querySelector('input');
|
||||
this.focus = false;
|
||||
this.hasInfo = Boolean(this.$attrs.info);
|
||||
this.info = this.$attrs.info || null;
|
||||
this.hasInfo = Boolean($attrs.info);
|
||||
this.info = $attrs.info || null;
|
||||
this.hasFocus = false;
|
||||
this.hasMouseIn = false;
|
||||
componentHandler.upgradeElement($element[0].firstChild);
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this._value = (value === undefined || value === '') ? null : value;
|
||||
this.input.value = this._value;
|
||||
this.hasValue = Boolean(this._value);
|
||||
this.mdlUpdate();
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
TextfieldController.$inject = ['$element', '$scope', '$attrs', '$timeout', normalizerFactory.NAME];
|
||||
Textfield.$inject = ['$element', '$scope', '$attrs', '$timeout', 'vnInputAttrsNormalizer'];
|
||||
|
||||
module.component('vnTextfield', {
|
||||
template: require('./textfield.html'),
|
||||
controller: TextfieldController,
|
||||
controller: Textfield,
|
||||
bindings: {
|
||||
value: '=model',
|
||||
label: '@?',
|
||||
|
@ -61,6 +57,7 @@ module.component('vnTextfield', {
|
|||
disabled: '<?',
|
||||
readonly: '<?',
|
||||
rule: '@?',
|
||||
type: '@?'
|
||||
type: '@?',
|
||||
tabIndex: '@?'
|
||||
}
|
||||
});
|
||||
|
|
|
@ -3,6 +3,7 @@ import Component from '../lib/component';
|
|||
import getModifiedData from '../lib/modified';
|
||||
import copyObject from '../lib/copy';
|
||||
import isEqual from '../lib/equals';
|
||||
import isFullEmpty from '../lib/fullEmpty';
|
||||
|
||||
/**
|
||||
* Component that checks for changes on a specific model property and
|
||||
|
@ -11,12 +12,13 @@ import isEqual from '../lib/equals';
|
|||
* properties are provided.
|
||||
*/
|
||||
export default class Watcher extends Component {
|
||||
constructor($element, $scope, $state, $transitions, $http, vnApp, $translate) {
|
||||
constructor($element, $scope, $state, $transitions, $http, vnApp, $translate, $attrs) {
|
||||
super($element);
|
||||
this.$scope = $scope;
|
||||
this.$state = $state;
|
||||
this.$http = $http;
|
||||
this.$translate = $translate;
|
||||
this.$attrs = $attrs;
|
||||
this.vnApp = vnApp;
|
||||
|
||||
this.state = null;
|
||||
|
@ -68,9 +70,9 @@ export default class Watcher extends Component {
|
|||
*
|
||||
* @param {String} state The state name
|
||||
*/
|
||||
submitGo(state) {
|
||||
submitGo(state, params) {
|
||||
return this.submit().then(
|
||||
() => this.$state.go(state)
|
||||
() => this.$state.go(state, params || {})
|
||||
);
|
||||
}
|
||||
/**
|
||||
|
@ -92,10 +94,10 @@ export default class Watcher extends Component {
|
|||
(resolve, reject) => this.noChanges(reject)
|
||||
);
|
||||
}
|
||||
let changedData = getModifiedData(this.data, this.orgData);
|
||||
let changedData = (this.$attrs.save && this.$attrs.save.toLowerCase() === 'post') ? this.copyInNewObject(this.data) : getModifiedData(this.data, this.orgData);
|
||||
|
||||
if (this.save) {
|
||||
this.save.model = changedData;
|
||||
this.save.model = changedData; // this.copyInNewObject(changedData);
|
||||
return new Promise((resolve, reject) => {
|
||||
this.save.accept().then(
|
||||
json => this.writeData({data: json}, resolve),
|
||||
|
@ -154,7 +156,7 @@ export default class Watcher extends Component {
|
|||
if (data && typeof data === 'object') {
|
||||
Object.keys(data).forEach(
|
||||
val => {
|
||||
if (data[val] !== "" && data[val] !== undefined && data[val] !== null) {
|
||||
if (!isFullEmpty(data[val])) {
|
||||
if (typeof data[val] === 'object') {
|
||||
newCopy[val] = this.copyInNewObject(data[val]);
|
||||
} else {
|
||||
|
@ -179,6 +181,7 @@ export default class Watcher extends Component {
|
|||
}
|
||||
|
||||
dataChanged() {
|
||||
if (this.form && !this.form.$dirty) return false;
|
||||
let newData = this.copyInNewObject(this.data);
|
||||
return !isEqual(newData, this.orgData);
|
||||
}
|
||||
|
@ -193,7 +196,7 @@ export default class Watcher extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
Watcher.$inject = ['$element', '$scope', '$state', '$transitions', '$http', 'vnApp', '$translate'];
|
||||
Watcher.$inject = ['$element', '$scope', '$state', '$transitions', '$http', 'vnApp', '$translate', '$attrs'];
|
||||
|
||||
module.component('vnWatcher', {
|
||||
template: require('./watcher.html'),
|
||||
|
|
|
@ -11,6 +11,7 @@ describe('Component vnWatcher', () => {
|
|||
let vnApp;
|
||||
let $translate;
|
||||
let controller;
|
||||
let $attrs;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
|
@ -25,7 +26,10 @@ describe('Component vnWatcher', () => {
|
|||
$transitions = _$transitions_;
|
||||
$httpBackend = _$httpBackend_;
|
||||
$translate = _$translate_;
|
||||
controller = $componentController('vnWatcher', {$scope, $element, $state, vnApp, $transitions, $httpBackend, $translate});
|
||||
$attrs = {
|
||||
save: "patch"
|
||||
};
|
||||
controller = $componentController('vnWatcher', {$scope, $element, $state, vnApp, $transitions, $httpBackend, $translate, $attrs});
|
||||
}));
|
||||
|
||||
describe('$onInit()', () => {
|
||||
|
@ -100,11 +104,11 @@ describe('Component vnWatcher', () => {
|
|||
it(`should call controller.$state.go() function after calling controllers submit() function`, done => {
|
||||
spyOn(controller, 'submit').and.returnValue(Promise.resolve());
|
||||
spyOn(controller.$state, 'go');
|
||||
let state = 'the state';
|
||||
let state = 'the.State';
|
||||
controller.submitGo(state)
|
||||
.then(() => {
|
||||
expect(controller.submit).toHaveBeenCalledWith();
|
||||
expect(controller.$state.go).toHaveBeenCalledWith(state);
|
||||
expect(controller.$state.go).toHaveBeenCalledWith(state, {});
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
@ -290,4 +294,3 @@ describe('Component vnWatcher', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
// 309
|
|
@ -0,0 +1 @@
|
|||
export * from './src/item';
|
|
@ -0,0 +1,106 @@
|
|||
{
|
||||
"module": "item",
|
||||
"name": "Items",
|
||||
"icon": "/static/images/icon_item.png",
|
||||
"validations" : true,
|
||||
"routes": [
|
||||
{
|
||||
"url": "/item",
|
||||
"state": "item",
|
||||
"abstract": true,
|
||||
"component": "ui-view"
|
||||
},
|
||||
{
|
||||
"url": "/list",
|
||||
"state": "item.index",
|
||||
"component": "vn-item-list",
|
||||
"acl": ["developer"]
|
||||
}, {
|
||||
"url": "/create",
|
||||
"state": "item.create",
|
||||
"component": "vn-item-create"
|
||||
}, {
|
||||
"url": "/:id",
|
||||
"state": "item.card",
|
||||
"abstract": true,
|
||||
"component": "vn-item-card"
|
||||
}, {
|
||||
"url" : "/data",
|
||||
"state": "item.card.data",
|
||||
"component": "vn-item-data",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Basic data",
|
||||
"icon": "folder"
|
||||
}
|
||||
},{
|
||||
"url" : "/tags",
|
||||
"state": "item.card.tags",
|
||||
"component": "vn-item-tags",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Tags",
|
||||
"icon": "folder"
|
||||
}
|
||||
},{
|
||||
"url" : "/history",
|
||||
"state": "item.card.history",
|
||||
"component": "vn-item-history",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "History",
|
||||
"icon": "folder"
|
||||
}
|
||||
},{
|
||||
"url" : "/niche",
|
||||
"state": "item.card.niche",
|
||||
"component": "vn-item-niche",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Niche",
|
||||
"icon": "folder"
|
||||
}
|
||||
},{
|
||||
"url" : "/botanical",
|
||||
"state": "item.card.botanical",
|
||||
"component": "vn-item-botanical",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Botanical",
|
||||
"icon": "folder"
|
||||
}
|
||||
},{
|
||||
"url" : "/picture",
|
||||
"state": "item.card.picture",
|
||||
"component": "vn-item-picture",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Picture",
|
||||
"icon": "folder"
|
||||
}
|
||||
}, {
|
||||
"url" : "/barcode",
|
||||
"state": "item.card.barcode",
|
||||
"component": "vn-item-barcode",
|
||||
"params": {
|
||||
"item": "$ctrl.item"
|
||||
},
|
||||
"menu": {
|
||||
"description": "Barcode",
|
||||
"icon": "folder"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
<vn-card>
|
||||
<vn-vertical pad-large>
|
||||
<vn-title>Item barcode</vn-title>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
|
@ -0,0 +1,5 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
ngModule.component('vnItemBarcode', {
|
||||
template: require('./item-barcode.html')
|
||||
});
|
|
@ -0,0 +1,5 @@
|
|||
<vn-card>
|
||||
<vn-vertical pad-large>
|
||||
<vn-title>Botanical</vn-title>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
|
@ -0,0 +1,5 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
ngModule.component('vnItemBotanical', {
|
||||
template: require('./item-botanical.html')
|
||||
});
|
|
@ -0,0 +1,11 @@
|
|||
<vn-main-block>
|
||||
<vn-horizontal>
|
||||
<vn-auto class="left-block">
|
||||
<vn-item-descriptor item="$ctrl.item"></vn-item-descriptor>
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-auto>
|
||||
<vn-one>
|
||||
<vn-vertical margin-medium ui-view></vn-vertical>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-main-block>
|
|
@ -0,0 +1,32 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
class ItemCard {
|
||||
constructor($http, $state) {
|
||||
this.$http = $http;
|
||||
this.$state = $state;
|
||||
this.item = {};
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
let filter = {
|
||||
include: [
|
||||
{relation: "itemType"},
|
||||
{relation: "origin"},
|
||||
{relation: "ink"},
|
||||
{relation: "producer"},
|
||||
{relation: "intrastat"}
|
||||
]
|
||||
};
|
||||
this.$http.get(`/item/api/Items/${this.$state.params.id}?filter=${JSON.stringify(filter)}`).then(
|
||||
res => {
|
||||
this.item = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
ItemCard.$inject = ['$http', '$state'];
|
||||
|
||||
ngModule.component('vnItemCard', {
|
||||
template: require('./item-card.html'),
|
||||
controller: ItemCard
|
||||
});
|
|
@ -0,0 +1,57 @@
|
|||
<mg-ajax path="/item/api/Items" options="vnPost"></mg-ajax>
|
||||
<vn-watcher
|
||||
vn-id="watcher"
|
||||
data="$ctrl.item"
|
||||
form="form"
|
||||
save="post">
|
||||
</vn-watcher>
|
||||
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
|
||||
<div style="max-width: 70em; margin: 0 auto;">
|
||||
<vn-card>
|
||||
<vn-vertical pad-large>
|
||||
<vn-title>New item</vn-title>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/ItemTypes"
|
||||
label="Type"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
field="$ctrl.item.typeFk"
|
||||
>
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/Intrastats"
|
||||
label="Intrastat"
|
||||
show-field="description"
|
||||
value-field="id"
|
||||
field="$ctrl.item.intrastatFk"
|
||||
order="description ASC"
|
||||
filter-search="{where: {description: {regexp: 'search'}} }"
|
||||
>
|
||||
<tpl-item>{{$parent.$parent.item.description}}</tpl-item>
|
||||
</vn-autocomplete>
|
||||
<vn-textfield vn-one label="Relevancy" field="$ctrl.item.relevancy" type="number"></vn-textfield>
|
||||
|
||||
</vn-horizontal>
|
||||
|
||||
<vn-horizontal>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/Origins"
|
||||
label="Origin"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
field="$ctrl.item.originFk"
|
||||
></vn-autocomplete>
|
||||
<vn-one></vn-one>
|
||||
</vn-horizontal>
|
||||
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Create"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</div>
|
||||
</form>
|
|
@ -0,0 +1,23 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
class ItemCreate {
|
||||
constructor($scope, $state) {
|
||||
this.$ = $scope;
|
||||
this.$state = $state;
|
||||
this.item = {
|
||||
relevancy: 0
|
||||
};
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.$.watcher.submit().then(
|
||||
json => this.$state.go('item.card.data', {id: json.data.id})
|
||||
);
|
||||
}
|
||||
}
|
||||
ItemCreate.$inject = ['$scope', '$state'];
|
||||
|
||||
ngModule.component('vnItemCreate', {
|
||||
template: require('./item-create.html'),
|
||||
controller: ItemCreate
|
||||
});
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
<mg-ajax
|
||||
path="/item/api/Items/{{patch.params.id}}"
|
||||
options="vnPatch"
|
||||
override="{filter: {include: [{relation: 'itemType'}, {relation: 'origin'}, {relation: 'ink'}, {relation: 'producer'}, {relation: 'expence'}]}}"
|
||||
>
|
||||
</mg-ajax>
|
||||
<vn-watcher
|
||||
vn-id="watcher"
|
||||
data="$ctrl.item"
|
||||
form="form"
|
||||
save="patch">
|
||||
</vn-watcher>
|
||||
<form name="form" ng-submit="watcher.submit()" ng-cloak>
|
||||
<vn-card>
|
||||
<vn-vertical pad-large>
|
||||
<vn-title>Basic data</vn-title>
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/ItemTypes"
|
||||
label="Type"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
field="$ctrl.item.typeFk"
|
||||
>
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/Intrastats"
|
||||
label="Intrastat"
|
||||
show-field="description"
|
||||
value-field="id"
|
||||
field="$ctrl.item.intrastatFk"
|
||||
order="description ASC"
|
||||
filter-search="{where: {description: {regexp: 'search'}} }"
|
||||
>
|
||||
<tpl-item>{{$parent.$parent.item.description}}</tpl-item>
|
||||
</vn-autocomplete>
|
||||
<vn-textfield vn-one label="Relevancy" field="$ctrl.item.relevancy" type="number"></vn-textfield>
|
||||
|
||||
</vn-horizontal>
|
||||
|
||||
<vn-horizontal>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/Origins"
|
||||
label="Origin"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
field="$ctrl.item.originFk"
|
||||
></vn-autocomplete>
|
||||
<vn-autocomplete vn-one
|
||||
url="/item/api/Expences"
|
||||
label="Expence"
|
||||
field="$ctrl.item.expenceFk"
|
||||
></vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Save"></vn-submit>
|
||||
</vn-button-bar>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
ngModule.component('vnItemData', {
|
||||
template: require('./item-data.html'),
|
||||
bindings: {
|
||||
item: '<'
|
||||
}
|
||||
});
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue