@neogrup/nc-doc
Version:
Polymer component to display document
271 lines (234 loc) • 7.57 kB
HTML
<!--
@license
Copyright (c) 2017 Neo
-->
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>nc-doc demo</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
import '@polymer/iron-demo-helpers/demo-snippet';
</script>
<script type="module" src="../nc-doc.js"></script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
div{
height: 50%;
width: 500px;
}
</style>
</custom-style>
</head>
<body>
<!-- <div class="vertical-section-container centered"> -->
<h3>POS nc-doc demo</h3>
<demo-snippet>
<template>
<demo-nc-doc-pos></demo-nc-doc-pos>
</template>
</demo-snippet>
<!-- <h3>Digital Signage nc-doc demo</h3>
<demo-snippet>
<template>
<demo-nc-doc-digital-signage></demo-nc-doc-digital-signage>
</template>
</demo-snippet>
</div> -->
<script type="module">
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-ajax/iron-ajax.js';
class DemoNcDocPos extends PolymerElement {
static get template() {
return html`
<style>
:host{
--app-accent-color: #FF9800;
}
paper-dialog{
margin: 30px 30px;
padding: 0;
}
.line-dialog-actions {
width: 110px;
}
paper-icon-button{
padding: 2px;
margin: 5px
}
.green{
color: #388E3C;
}
.red{
color: #D32F2F;
}
</style>
<iron-ajax
auto
id="getDoc"
url="data/pos-encolate.json"
_url="data/pos.json"
v_url="data/pos-subtype.json"
method="get"
handle-as="json"
last-response="{{dataDoc}}">
</iron-ajax>
<div>
<nc-doc
id="doc"
data="[[dataDoc]]"
language="es"
show-type-header
show-doc-header
show-doc-lines
show-doc-footer
line-actions-enabled
data-ticket-lines-actions="[[dataTicketLinesActions]]"
show-line-delivery-order
show-line-production-info
show-amounts-including-taxes
on-open-doc-lines-line-actions="_openDocLinesLineActions"
on-close-doc-lines-line-actions="_closeDocLinesLineActions"
on-line-selected="_lineSelected"
on-line-inc="_lineInc"
on-line-dec="_lineDec"
on-line-del="_lineDel">
</nc-doc>
</div>
<paper-dialog id="docLinesLineActions" vertical-align="top" dynamic-align>
<div class="line-dialog-actions">
<template is="dom-repeat" items="{{dataTicketLinesActions}}">
<paper-icon-button icon="[[item.icon]]" class\$="[[_getDocLinesLineActionClass(item)]]" on-tap="_docLineslineActionSelected"></paper-icon-button>
</template>
</div>
</paper-dialog>
`;
}
connectedCallback(){
super.connectedCallback();
this.dataTicketLinesActions=[
{
"icon": "remove-circle",
"action": "_removeQty"
},
{
"icon": "add-circle",
"action": "_addQty"
},
{
"icon": "create",
"action": "_selectQty"
},
{
"icon": "font-download",
"action": "_selectName"
},
{
"icon": "euro-symbol",
"action": "_selectPrice"
},
{
"icon": "speaker-notes",
"action": "_selectComments"
},
{
"icon": "delete",
"action": "_delete"
}
]
}
_openDocLinesLineActions(element){
this.shadowRoot.querySelector('#docLinesLineActions').positionTarget = element.detail;
this.shadowRoot.querySelector('#docLinesLineActions').open();
}
_scrollDocLinesToBottom(){
if (this.shadowRoot.querySelector('nc-doc')){
this._scrollDocDebouncer = Debouncer.debounce(this._scrollDocDebouncer,
timeOut.after(100),
() => this.shadowRoot.querySelector('nc-doc').scrollLinesToBottom()
);
this.scrollToBottom = false;
}
}
_closeDocLinesLineActions(){
this.shadowRoot.querySelector('#docLinesLineActions').close();
}
_docLineslineActionSelected(element){
if (this.shadowRoot.querySelector('nc-doc')){
this.shadowRoot.querySelector('nc-doc').lineActionSelectedPrev(element);
}
}
_lineSelected(e){
console.log('_line selected!')
}
_lineInc(currentLine){
console.log('line inc!')
console.log(currentLine.detail);
}
_lineDec(currentLine){
console.log('line dec!')
console.log(currentLine.detail);
}
_lineDel(currentLine){
console.log('line del!')
console.log(currentLine.detail);
}
_getDocLinesLineActionClass(element){
let className = '';
let lineAction = element.action;
switch (lineAction) {
case '_addQty':
className = 'green';
break;
case '_removeQty':
case '_delete':
className = 'red';
break;
}
return className;
}
}
window.customElements.define('demo-nc-doc-pos', DemoNcDocPos);
</script>
<script type="module">
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-ajax/iron-ajax.js';
class DemoNcDocDigitalSignage extends PolymerElement {
static get template() {
return html`
<style>
:host{
--app-accent-color: #FF9800;
}
</style>
<iron-ajax
auto
id="getDoc"
url="data/digitalSignage.json"
method="get"
handle-as="json"
last-response="{{dataDoc}}">
</iron-ajax>
<div>
<nc-doc
id="doc"
data="[[dataDoc]]"
language="es"
show-doc-header
show-doc-lines
show-doc-footer
show-change-in-dialog
preview-mode>
</nc-doc>
</div>
`;
}
}
window.customElements.define('demo-nc-doc-digital-signage', DemoNcDocDigitalSignage);
</script>
</body>
</html>