· 6 years ago · Mar 27, 2020, 08:14 AM
1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
3import Grid from '@material-ui/core/Grid';
4import LinearProgress from '@material-ui/core/LinearProgress';
5import Typography from '@material-ui/core/Typography';
6import moment from 'moment';
7import _ from 'lodash';
8import Button from '@material-ui/core/Button';
9import Menu from '@material-ui/core/Menu';
10import MenuItem from '@material-ui/core/MenuItem';
11import Divider from '@material-ui/core/Divider';
12import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
13import { change, Field } from 'redux-form';
14import Create from '@material-ui/icons/Create';
15import jsPDF from 'jspdf'
16import 'jspdf-autotable'
17import Mail from '@material-ui/icons/Mail';
18
19import { Link } from 'react-router-dom';
20import TableBody from '@material-ui/core/TableBody';
21import Hidden from '@material-ui/core/Hidden';
22
23import SelectOptionStatic from './redux-form/SelectOptionStatic';
24import base from '../services/base';
25import { iconShare, iconPrint, iconPdf, iconLink } from '../utils/globalConstants';
26import { Function } from '../utils/globalFunction'
27import { robotoLightFont } from '../utils/globalConstants'
28import { store } from '../services/src/redux/store';
29import sendEmail from '../utils/sendEmail';
30
31import { fieldStatusDetailTransaction } from '../components/Fields';
32import { cryptObj } from '../utils/urlCrypt';
33
34const FileSaver = require('file-saver');
35const { toNumber } = Function;
36const queryString = require('query-string');
37let keys = []
38
39class DetailTransactionContent extends Component {
40 constructor(props) {
41 super(props);
42 if (props.template) {
43 props.getTemplates(props.name, props.auth.user.restricted_reports);
44 props.getFields(props.name);
45 }
46 if (props.withJournalVoucher) {
47 props.getTemplatesJV('manual_journals');
48 props.getFieldsJV('manual_journals')
49 }
50 if (!props.template && !props.name) {
51 props.initialValues();
52 }
53 if (props.withJournalVoucher) {
54 props.journal_vouchers;
55 }
56
57 this.state = {
58 inputEmail: '',
59 sendingEmail: false,
60 successSendingEmail: false,
61 anchorEl: null,
62
63 inputEmailJV: '',
64 sendingEmailJV: false,
65 successSendingEmailJV: false,
66 anchorElJV: null,
67
68 editTemplate: false,
69 open: false,
70 pageSize: 'null',
71 }
72 }
73
74
75 componentWillUnmount() {
76 this.props.dispatch(base.set_initial_value_report_templates(null));
77 if (this.props.withJournalVoucher) {
78 this.props.dispatch(base.set_initial_value_report_templates_journal_voucher(null));
79 }
80 if (this.props.endpoint) {
81 this.props.dispatch(base[`set_initial_value_${this.props.endpoint}`](null));
82 } else {
83 this.props.dispatch(base[`set_initial_value_${this.props.module}`](null));
84 }
85 }
86
87 handlePrint = (html, title) => {
88 this.handleCloseSaveMore();
89
90 let mywindow = window.open('', 'printwindow');
91 mywindow.document.write(`
92 <html>
93 <head>
94 <title>${title}</title>
95 <style>
96 body{
97 margin: 0 !important;
98 padding 0 !important;
99 }
100
101 #table-4 tbody tr td {
102 padding-bottom: 0 !important;
103 margin-bottom : 0 !important;
104 }
105
106 </style>
107 </head>
108 <body>`);
109 mywindow.document.write(html);
110 mywindow.document.write('</body></html>');
111 mywindow.document.close(); // necessary for IE >= 10
112 mywindow.focus(); // necessary for IE >= 10*/
113
114 mywindow.print();
115 mywindow.close();
116
117 keys = [];
118 }
119
120 // export pdf nya sudah ganti dari api
121 handleExportPdf = (html) => {
122 const initialValues = this.props.data && this.props.data.initialValues
123 const number = initialValues && initialValues.number
124 const body = {
125 type: 'pdf',
126 name: `${number}`,
127 html: `<div style="width: 95%;">${html}</div>`
128 }
129 Function.exportPdf(body).then(res => {
130 const file = new Blob([res.data], {type: 'application/pdf'});
131 const fileURL = URL.createObjectURL(file);
132 FileSaver.saveAs(fileURL, `${number}.pdf`)
133 })
134 }
135
136 handleSendToEmail = (html, subject, company_email, company_name, text, name, send_to) => {
137 this.setState({ anchorEl: null });
138 const { pathname, search } = this.props.location
139 this.props.dispatch(change('detail', 'html', html));
140 this.props.dispatch(change('detail', 'subject', subject));
141 this.props.dispatch(change('detail', 'reply_to', company_email === '-' ? null : company_email));
142 this.props.dispatch(change('detail', 'company_name', company_name === '-' ? null : company_name));
143 this.props.dispatch(change('detail', 'send_to', send_to));
144 this.props.dispatch(change('detail', 'name', name));
145 this.props.dispatch(change('detail', 'text', text));
146 this.props.history.push(`${pathname}/send-to-email${search}`);
147 }
148
149 keysPressed = (event) => {
150 keys[event.key] = true
151
152 let curOS = '';
153 if (navigator.appVersion.indexOf("Win") != -1) curOS = "Windows";
154 if (navigator.appVersion.indexOf("Mac") != -1) curOS = "MacOS";
155 if (navigator.appVersion.indexOf("X11") != -1) curOS = "UNIX";
156 if (navigator.appVersion.indexOf("Linux") != -1) curOS = "Linux";
157
158 if (curOS === 'MacOS') {
159 if ((keys['Meta'] && keys['p']) || (keys['Command'] && keys['p'])) {
160 // non aktifkan fungsi default ctrl + p
161 event.preventDefault()
162
163 // trigger untuk membuka menu export
164 let foo = document.getElementById('export1')
165 foo.createAttribute = "autoFocus"
166 foo.focus()
167 foo.click()
168
169 // trigger function print
170 let node = document.getElementsByClassName('menu-item-custom-img')
171 node[0].createAttribute = "autoFocus"
172 node[0].focus()
173 node[0].click()
174
175 this.setState({ anchorEl: null })
176 }
177 } else {
178 if (keys['Control'] && keys['p']) {
179 // non aktifkan fungsi default ctrl + p
180 event.preventDefault()
181
182 // trigger untuk membuka menu export
183 let foo = document.getElementById('export1')
184 foo.createAttribute = "autoFocus"
185 foo.focus()
186 foo.click()
187
188 // trigger function print
189 let node = document.getElementsByClassName('menu-item-custom-img')
190 node[0].createAttribute = "autoFocus"
191 node[0].focus()
192 node[0].click()
193
194 this.setState({ anchorEl: null })
195 }
196 }
197 }
198
199 keysReleased = (event) => {
200 keys[event.key] = false
201 }
202
203 handleClick = (event) => {
204 this.setState({ anchorEl: event.currentTarget });
205 };
206
207 handleCloseSaveMore = () => {
208 this.setState({ anchorEl: null });
209 };
210
211 getTotalProduct = (index) => {
212 const { initialValues } = this.props.data;
213 if (initialValues && initialValues.line_items && initialValues.line_items[index]) {
214 const line_item = initialValues.line_items[index];
215 const unitPrice = line_item.unit_price;
216 const quantity = line_item.quantity;
217 const discount = line_item.discount ? (line_item.discount.type === 'rate' ? line_item.discount.rate : line_item.discount.amount) : 0;
218 const discountType = line_item.discount && line_item.discount.type;
219 const priceDiscount = discountType === 'rate' ? ((unitPrice * quantity) * (discount / 100)) : discount;
220 const priceAfterDiscount = (toNumber(unitPrice) * toNumber(quantity)) - toNumber(priceDiscount);
221 const tax = Number(line_item.taxes ? line_item.taxes.rate : 0);
222 return {
223 totalBeforeTax: 0,
224 totalTax: tax,
225 total: priceAfterDiscount
226 };
227 }
228 return {
229 totalBeforeTax: 0,
230 totalTax: 0,
231 total: 0
232 };
233 }
234
235 getTotalTax = () => {
236 var { initialValues } = this.props.data;
237 const line_items = (initialValues && initialValues.line_items) || null;
238 let totalTax = 0;
239 if (line_items && line_items.length) {
240 line_items.forEach((product, index) => {
241 totalTax += Number(this.getTotalProduct(index).totalTax);
242 });
243 }
244 return totalTax;
245 };
246
247 getTotalRefund = () => {
248 var { initialValues } = this.props.data;
249 const line_items = (initialValues && initialValues.line_items) || null;
250 let totalRefund = 0;
251 if (line_items && line_items.length > 0) {
252 line_items.forEach((item, index) => {
253 totalRefund += Number(item.amount)
254 })
255 }
256 return totalRefund
257 }
258
259 getDownPayment = () => {
260 const { initialValues } = this.props.data;
261 let down_payment = ''
262 let is_cash = ''
263 initialValues && initialValues.payments && initialValues.payments.forEach(item => {
264 if (initialValues.payments.length > 1 && item.is_cash) {
265 down_payment = item.amount_origin
266 item.is_cash = item.is_cash
267 }
268 });
269 return down_payment
270 }
271
272 getTotalAmount = () => {
273 let total = 0;
274 const { initialValues } = this.props.data;
275 if (initialValues && initialValues.line_items) {
276 initialValues.line_items.forEach((product, index) => {
277 total += Number(this.getTotalProduct(index).total);
278 });
279 }
280 return total;
281 };
282
283 getSubtotal = () => {
284 let total = 0;
285 const { initialValues } = this.props.data;
286 if (initialValues && initialValues.line_items) {
287 initialValues.line_items.forEach((item, index) => {
288 total += Number(item.amount);
289 });
290 }
291 return total;
292 };
293
294 getOtherCost = () => {
295 const { initialValues } = this.props.data;
296 const amount_origin = (initialValues && initialValues.others && initialValues.others[0] && initialValues.others[0].amount) || null;
297 const exchange_rate = (initialValues && initialValues.others && initialValues.others[0] && initialValues.others[0].exchange_rate) || null;
298 const otherCost = amount_origin / exchange_rate
299 return otherCost
300 }
301
302 getFinalDiscount = () => {
303 const { initialValues } = this.props.data;
304 const final_discount = (initialValues && initialValues.final_discount && initialValues.final_discount.amount_origin) || null;
305 return final_discount
306 }
307
308 getTotalWithDiscount = () => {
309 return (Number(this.getTotalAmount()) + Number(this.getOtherCost()) - Number(this.getFinalDiscount()));
310 }
311
312 getBalance = () => {
313 const balance = Number(this.getTotalWithDiscount()) - Number(this.getDownPayment());
314 return balance;
315 }
316
317 getTotalDebit = () => {
318 const { initialValues } = this.props.data;
319 let total = 0;
320 if (initialValues) {
321 total += isNaN(Number(initialValues.debit)) ? 0 : Number(initialValues.debit);
322 }
323 return total
324 }
325
326 getTotalCredit = () => {
327 const { initialValues } = this.props.data;
328 let total = 0;
329 if (initialValues) {
330 total += isNaN(Number(initialValues.credit)) ? 0 : Number(initialValues.credit);
331 }
332 return total
333 }
334
335 getTotalDebitOrigin = () => {
336 const { initialValues } = this.props.data;
337
338 let total = 0;
339 if (!initialValues) {
340 return total
341 }
342 initialValues.line_items && initialValues.line_items.forEach(item => {
343 total += Number(item.debit_origin)
344 })
345 return total
346 }
347
348 getTotalCreditOrigin = () => {
349 const { initialValues } = this.props.data;
350 let total = 0;
351 if (!initialValues) {
352 return total
353 }
354 initialValues.line_items && initialValues.line_items.forEach(item => {
355 total += Number(item.credit_origin)
356 })
357 return total
358 }
359
360 JournalGetTotalDebit = () => {
361 var { initialValues } = this.props.manual_journals.data;
362 const line_items = (initialValues && initialValues.line_items) || null;
363 let total = 0;
364 if (line_items) {
365 line_items.forEach((item, index) => {
366 total += isNaN(Number(item.debit_origin)) ? 0 : Number(item.debit_origin);
367 })
368 }
369 return total
370 }
371
372 JournalGetTotalCredit = () => {
373 var { initialValues } = this.props.manual_journals.data;
374 const line_items = (initialValues && initialValues.line_items) || null;
375 let total = 0;
376 if (line_items) {
377 line_items.forEach((item, index) => {
378 total += isNaN(Number(item.credit_origin)) ? 0 : Number(item.credit_origin);
379 })
380 }
381 return total
382 }
383
384 handleBack = (e, pathname) => {
385 e.preventDefault();
386 this.props.history.push(pathname);
387 }
388
389 handleChangeTemplate = (event, newValue) => {
390 this.setState({ template: newValue });
391 this.props.setTemplate(newValue.value);
392 }
393
394 handleChangePageSize = (e, newValue) => {
395 this.setState({ pageSize: newValue.value });
396 }
397
398 handleEditTemplate = (id, name, newBreadcrumbs) => {
399
400 newBreadcrumbs.push({
401 pathname: location.pathname + location.search,
402 title: name
403 })
404
405 if (this.props.module === 'general_ledgers') {
406 this.props.history.push({
407 pathname: `/edit-template`,
408 search: `?type=form&key=${this.props.name}&id=${id}&vouchers=true`,
409 state: { breadcrumbs: newBreadcrumbs }
410 });
411 } else {
412 this.props.history.push({
413 pathname: `/edit-template`,
414 search: `?type=form&key=${this.props.name}&id=${id}`,
415 state: { breadcrumbs: newBreadcrumbs }
416 });
417 }
418
419 }
420
421 handleSaveAsDefault = (id) => {
422 const { module, user_settings } = this.props
423
424 let update = null
425 const userSetting = user_settings && user_settings.queryResult && user_settings.queryResult.data
426 if (userSetting) {
427 userSetting.forEach(data => {
428 if (data.key == `default.template.form.${module}.id`) {
429 update = data
430 }
431 })
432 }
433
434 if (update) {
435 this.props.updateDefault(module, id, update);
436 } else {
437 this.props.saveAsDefault(module, id);
438 }
439 }
440
441 renderHeaderDetail = () => {
442 const {
443 settings,
444 data,
445 withoutAmount,
446 stringToFrom,
447 stringDate,
448 stringNumber,
449 componentCashBank,
450 componentAccount,
451 componentLedger,
452 componentJournal,
453 componentCashTransfers,
454 componentCashAdvance
455 } = this.props;
456
457 const { initialValues } = data;
458 const peopleName = (initialValues && initialValues.customer) || (initialValues && initialValues.supplier || initialValues && initialValues.contact);
459 const symbolCurrencyHeader = initialValues && initialValues.currency ? initialValues.currency.symbol : null;
460 const date = (initialValues && initialValues.date) ? moment(initialValues.date).format('ll') : '';
461 const number = (initialValues && initialValues.number) || null;
462 const total_amount = (initialValues && initialValues.total_amount_origin || initialValues && initialValues.cash && initialValues.cash.amount_origin) || null;
463 const description = (initialValues && initialValues.description) || null;
464 const department = (initialValues && initialValues.department) || null;
465 const project = (initialValues && initialValues.project) || null;
466 const { strings } = settings;
467
468 if (componentCashBank) {
469 return (
470 <Grid id="container-detail">
471 <Grid container justify="space-between" style={{ height: 100 }} alignItems="center">
472 <Grid item xs={8} md={4}>
473 <Grid item xs={12}>
474 <Typography variant="subheading" align="left">
475 <b>{stringToFrom}</b>
476 </Typography>
477 </Grid>
478 <Grid item xs={12}>
479 <Typography variant="body1" align="left">
480 {peopleName ? peopleName.name : ''}
481 </Typography>
482 </Grid>
483 </Grid>
484 <Grid item xs={4} md={2}>
485 <Grid item xs={12}>
486 <Typography
487 variant="subheading"
488 align="right"
489 >
490 <b>{strings.reference_no}</b>
491 </Typography>
492 </Grid>
493 <Grid item xs={12}>
494 <Typography variant="body1" align="right">
495 {number}
496 </Typography>
497 </Grid>
498 </Grid>
499 </Grid>
500
501 <Grid container justify="space-between">
502 <Grid item xs={8} md={4}>
503 <Grid item xs={12}>
504 <Typography variant="subheading" align="left">
505 {`${strings.description} :`}
506 </Typography>
507 </Grid>
508 <Grid item xs={12}>
509 <Typography variant="body1" align="left">
510 {description}
511 </Typography>
512 </Grid>
513 </Grid>
514 <Grid item xs={4} md={2}>
515 <Grid item xs={12}>
516 <Typography variant="subheading" align="right">
517 {strings.date}
518 </Typography>
519 </Grid>
520 <Grid item xs={12}>
521 <Typography variant="body1" align="right">
522 {date}
523 </Typography>
524 </Grid>
525 </Grid>
526 </Grid>
527 </Grid>
528 )
529 } else if (componentCashAdvance) {
530 return (
531 <Grid id="container-detail">
532 <Grid container justify="space-between" style={{ height: 100 }} alignItems="center">
533 <Grid item xs={8} md={4}>
534 <Grid item xs={12}>
535 <Typography variant="subheading" align="left">
536 <b>{stringToFrom}</b>
537 </Typography>
538 </Grid>
539 <Grid item xs={12}>
540 <Typography variant="body1" align="left">
541 {peopleName ? peopleName.name : ''}
542 </Typography>
543 </Grid>
544 </Grid>
545 <Grid item xs={4} md={2}>
546 <Grid item xs={12}>
547 <Typography
548 variant="subheading"
549 align="right"
550 >
551 <b>{strings.reference_no}</b>
552 </Typography>
553 </Grid>
554 <Grid item xs={12}>
555 <Typography variant="body1" align="right">
556 {number}
557 </Typography>
558 </Grid>
559 </Grid>
560 </Grid>
561
562 <Grid container justify="space-between">
563 <Grid item xs={8} md={4}>
564 <Grid item xs={12}>
565 <Typography variant="subheading" align="left">
566 {`${strings.description} :`}
567 </Typography>
568 </Grid>
569 <Grid item xs={12}>
570 <Typography variant="body1" align="left">
571 {description}
572 </Typography>
573 </Grid>
574 </Grid>
575 <Grid item xs={4} md={2}>
576 <Grid item xs={12}>
577 <Typography variant="subheading" align="right">
578 {strings.date}
579 </Typography>
580 </Grid>
581 <Grid item xs={12}>
582 <Typography variant="body1" align="right">
583 {date}
584 </Typography>
585 </Grid>
586 </Grid>
587 </Grid>
588 </Grid>
589 )
590 } else if (componentCashTransfers) {
591 return (
592 <table id="report" className="table-adjustment">
593 <tbody>
594 <tr>
595 <td className="st-td"></td>
596 <td className="sc-td"></td>
597 <td className="thr-td"></td>
598 <td className="fr-td"></td>
599 <td className="st-td"></td>
600 <td className="sc-td"></td>
601 <td className="thr-td"></td>
602 </tr>
603 <tr>
604 <td className="padding-td">{strings.reference_no}</td>
605 <td className="padding-td">:</td>
606 <td className="padding-td">{number || '-'}</td>
607 <td className="padding-td"></td>
608 <td className="padding-td">{strings.department}</td>
609 <td className="padding-td">:</td>
610 <td className="padding-td">{department ? department.name : '-'}</td>
611 </tr>
612 <tr>
613 <td className="padding-td">{strings.date}</td>
614 <td className="padding-td">:</td>
615 <td className="padding-td">{date}</td>
616 <td></td>
617 <td className="padding-td">{strings.project}</td>
618 <td className="padding-td">:</td>
619 <td className="padding-td">{project ? project.name : '-'}</td>
620 </tr>
621 <tr>
622 <td className="padding-td">{strings.description}</td>
623 <td className="padding-td">:</td>
624 <td className="padding-td">{description || '-'}</td>
625 </tr>
626 </tbody>
627 </table>
628 )
629 } else if (componentAccount) {
630 return (
631 <Grid>
632 <Grid container style={{ height: 100 }} alignItems="center">
633 <Grid item xs={12} sm={6}>
634 <Typography>
635 <b>{stringToFrom}</b>
636 </Typography>
637 <Typography>
638 {peopleName ? peopleName.name : ''}
639 </Typography>
640 </Grid>
641 </Grid>
642
643 <Grid container justify="space-between">
644 <Grid item xs={8} md={4}>
645 <Grid item xs={12}>
646 <Typography variant="subheading" align="left">
647 {`${strings.description} :`}
648 </Typography>
649 </Grid>
650 <Grid item xs={12}>
651 <Typography variant="body1" align="left">
652 {description || '-'}
653 </Typography>
654 </Grid>
655 </Grid>
656 <Grid item xs={4} md={2}>
657 <Grid item xs={12}>
658 <Typography variant="subheading" align="right">
659 {strings.date}
660 </Typography>
661 </Grid>
662 <Grid item xs={12}>
663 <Typography variant="body1" align="right">
664 {date || '-'}
665 </Typography>
666 </Grid>
667 </Grid>
668
669 </Grid>
670 </Grid>
671 )
672 }
673 else if (componentLedger) {
674 return (
675 <table id="report" className="table-adjustment">
676 <tbody>
677 <tr>
678 <td className="st-td"></td>
679 <td className="sc-td"></td>
680 <td className="thr-td"></td>
681 <td className="fr-td"></td>
682 <td className="st-td"></td>
683 <td className="sc-td"></td>
684 <td className="thr-td"></td>
685 </tr>
686 <tr>
687 <td className="padding-td">{strings.reference_no}</td>
688 <td className="padding-td">:</td>
689 <td className="padding-td">{number || '-'}</td>
690 <td className="padding-td"></td>
691 <td className="padding-td">{strings.department}</td>
692 <td className="padding-td">:</td>
693 <td className="padding-td">{department ? department.name : '-'}</td>
694 </tr>
695 <tr>
696 <td className="padding-td">{strings.date}</td>
697 <td className="padding-td">:</td>
698 <td className="padding-td">{date}</td>
699 <td></td>
700 <td className="padding-td">{strings.project}</td>
701 <td className="padding-td">:</td>
702 <td className="padding-td">{project ? project.name : '-'}</td>
703 </tr>
704 <tr>
705 <td className="padding-td">{strings.description}</td>
706 <td className="padding-td">:</td>
707 <td className="padding-td">{description || '-'}</td>
708 </tr>
709 </tbody>
710 </table>
711 )
712 }
713 else if (componentJournal) {
714 return (
715 <table id="report" className="table-adjustment">
716 <tbody>
717 <tr>
718 <td className="st-td"></td>
719 <td className="sc-td"></td>
720 <td className="thr-td"></td>
721 <td className="fr-td"></td>
722 <td className="st-td"></td>
723 <td className="sc-td"></td>
724 <td className="thr-td"></td>
725 </tr>
726 <tr>
727 <td className="padding-td">{strings.reference_no}</td>
728 <td className="padding-td">:</td>
729 <td className="padding-td">{number || '-'}</td>
730 <td className="padding-td"></td>
731 <td className="padding-td">{strings.department}</td>
732 <td className="padding-td">:</td>
733 <td className="padding-td">{department ? department.name : '-'}</td>
734 </tr>
735 <tr>
736 <td className="padding-td">{strings.date}</td>
737 <td className="padding-td">:</td>
738 <td className="padding-td">{date}</td>
739 <td></td>
740 <td className="padding-td">{strings.project}</td>
741 <td className="padding-td">:</td>
742 <td className="padding-td">{project ? project.name : '-'}</td>
743 </tr>
744 <tr>
745 <td className="padding-td">{strings.description}</td>
746 <td className="padding-td">:</td>
747 <td className="padding-td">{description || '-'}</td>
748 </tr>
749 </tbody>
750 </table>
751 )
752 }
753 else {
754 return (
755 <Grid>
756 <Grid container alignItems="center" style={{ height: 60, textAlign: 'right', alignItems: 'center' }}>
757 {!withoutAmount ?
758 <Grid item xs={12}>
759 <Typography>
760 <b>Invoice Amount</b>
761 </Typography>
762 <Typography style={{ fontSize: 28, color: '#107aae' }}>
763 {symbolCurrencyHeader} {Function.formatPrice(total_amount || 0)}
764 </Typography>
765 </Grid>
766 : null}
767 </Grid>
768
769 <Grid container style={{ height: 70 }}>
770 <Grid item xs={12} sm={6}>
771 <Typography>
772 <b>{stringToFrom}</b>
773 </Typography>
774 <Typography>
775 {peopleName ? peopleName.name : ''}
776 </Typography>
777 </Grid>
778 </Grid>
779
780 <Grid container justify="flex-end">
781 <Grid item xs={4} md={2}>
782 <Grid item xs={12}>
783 <Typography variant="subheading" align="right">
784 {stringNumber}
785 </Typography>
786 </Grid>
787 <Grid item xs={12}>
788 <Typography variant="body1" align="right">
789 {number || '-'}
790 </Typography>
791 </Grid>
792 </Grid>
793 <Grid item xs={4} md={2}>
794 <Grid item xs={12}>
795 <Typography
796 variant="subheading"
797 align="right"
798 >
799 {stringDate}
800 </Typography>
801 </Grid>
802 <Grid item xs={12}>
803 <Typography variant="body1" align="right">
804 {date || '-'}
805 </Typography>
806 </Grid>
807 </Grid>
808 </Grid>
809 </Grid>
810 )
811 }
812 }
813
814 renderLineItems = () => {
815 const {
816 settings,
817 data,
818 componentCashBank,
819 componentAccount,
820 amountRefund,
821 withoutDownPayment,
822 componentLedger,
823 componentJournal,
824 componentCashTransfers,
825 componentConsignment,
826 componentCashAdvance
827 } = this.props;
828 const { initialValues } = data;
829
830 const total_amount = (initialValues && initialValues.total_amount || initialValues && initialValues.cash && initialValues.cash.amount) || null;
831 const symbolCurrencyHeader = initialValues && initialValues.currency ? initialValues.currency.symbol : '';
832 const line_items = (initialValues && initialValues.line_items) || null;
833 const symbolAccount = initialValues && initialValues.cash && initialValues.cash.currency ? initialValues.cash.currency.symbol : null;
834 const paymentStatus = initialValues && initialValues.payment_status === "paid"
835 const account = (initialValues && initialValues.account) || null;
836 const debit_origin = (initialValues && initialValues.debit_origin);
837 const credit_origin = (initialValues && initialValues.credit_origin);
838 const total_debit = (initialValues && initialValues.total_debit);
839 const total_credit = (initialValues && initialValues.total_credit);
840 const amount_origin = (initialValues && initialValues.amount_origin);
841 const department = (initialValues && initialValues.department) || null;
842 const project = (initialValues && initialValues.project) || null;
843 const subtotal_before_tax_origin = initialValues && initialValues.subtotal_before_tax_origin
844 const total_discount_origin = initialValues && initialValues.total_discount_origin
845 const total_tax_origin = initialValues && initialValues.total_tax_origin
846 const total_other_origin = initialValues && initialValues.total_other_origin
847 const total_amount_origin = initialValues && initialValues.total_amount_origin
848 const { strings } = settings;
849
850 if (componentCashBank) {
851 return (
852 <table id="report" className="table table-bordered text-right">
853 <thead className="bg-primary border-blue">
854 <tr>
855 <td width="18%" className="text-left">{strings.account_code}</td>
856 <td width="17%" className="text-left">{strings.account_name}</td>
857 <td width="25%" className="text-left">{strings.note}</td>
858 <td width="17%">{strings.amount}</td>
859 </tr>
860 </thead>
861 <TableBody>
862 {line_items ? (
863 line_items.map((item, index) => (
864 <tr key={index}>
865 <td className="text-left td-font-detail">{item.account && item.account.code ? item.account.code : '-'}</td>
866 <td className="text-left td-font-detail">{item.account && item.account.name ? item.account.name : '-'}</td>
867 <td className="text-left td-font-detail">{item.note && item.note ? item.note : '-'}</td>
868 <td className="td-font-detail">{item.amount && item.amount ? symbolCurrencyHeader : ''} {Function.formatPrice(item.amount && item.amount ? item.amount : '')}</td>
869 </tr>
870 ))
871 ) : null}
872 <tr>
873 <td
874 width="20%"
875 colSpan="1"
876 rowSpan="2"
877 className="text-left border-right-transparent border-bottom-transparent border-left-transparent"
878 >
879 </td>
880 <td
881 width="10%"
882 rowSpan="4"
883 className="border-bottom-transparent"
884 />
885 <td width="10%">{strings.total}</td>
886 <td>{total_amount ? symbolCurrencyHeader : ''} {Function.formatPrice(total_amount)}</td>
887 </tr>
888 </TableBody>
889 </table>
890 )
891 } else if (componentCashAdvance) {
892 return (
893 <table id="report" className="table table-bordered text-right">
894 <thead className="bg-primary border-blue">
895 <tr>
896 <td width="17%" className="text-left">{strings.classification}</td>
897 <td width="25%" className="text-left">{strings.note}</td>
898 <td width="17%">{strings.amount}</td>
899 </tr>
900 </thead>
901 <TableBody>
902 {line_items ? (
903 line_items.map((item, index) => (
904 <tr key={index}>
905 <td className="text-left td-font-detail">apa ini</td>
906 <td className="text-left td-font-detail">opo iki</td>
907 <td className="td-font-detail">{item.amount && item.amount ? symbolCurrencyHeader : ''} {Function.formatPrice(item.amount && item.amount ? item.amount : '')}</td>
908 </tr>
909 ))
910 ) : null}
911 <tr>
912 <td
913 width="20%"
914 colSpan="1"
915 rowSpan="2"
916 className="text-left border-right-transparent border-bottom-transparent border-left-transparent"
917 >
918 </td>
919 <td
920 width="10%"
921 rowSpan="4"
922 className="border-bottom-transparent"
923 />
924 <td width="10%">{strings.total}</td>
925 <td>{total_amount ? symbolCurrencyHeader : ''} {Function.formatPrice(total_amount)}</td>
926 </tr>
927 </TableBody>
928 </table>
929 )
930 } else if (componentCashTransfers) {
931 return (
932 <table id="report" className="table table-bordered text-right">
933 <thead className="bg-primary border-blue">
934 <tr>
935 <td width="10%" className="text-left td-font-detail">
936 {strings.account_code}
937 </td>
938 <td width="20%" className="text-left td-font-detail">
939 {strings.account_name}
940 </td>
941 <td width="17%" className="text-left td-font-detail">
942 {strings.department}
943 </td>
944 <td width="17%" className="text-left td-font-detail">
945 {strings.project}
946 </td>
947 <td width="18%" className="text-left td-font-detail">
948 {strings.debit}
949 </td>
950 <td width="18%" className="text-left td-font-detail">
951 {strings.credit}
952 </td>
953 </tr>
954 </thead>
955 <TableBody>
956 {line_items ? (
957 line_items.map((item, index) => (
958 <tr key={index}>
959 <td className="text-left td-font-detail">{item.account && item.account.code ? item.account.code : '-'}</td>
960 <td className="text-left td-font-detail">{item.account && item.account.name ? item.account.name : '-'}</td>
961 <td className="text-left td-font-detail">{item.department && item.department.name ? item.department.name : '-'}</td>
962 <td className="text-left td-font-detail">{item.project && item.project.name ? item.project.name : '-'}</td>
963 <td className="td-font-detail">{item.debit_origin !== 0 ? `${item.currency ? item.currency.symbol : ''} ${Function.formatPrice(item.debit_origin)}` : '-'}</td>
964 <td className="td-font-detail">{item.credit_origin !== 0 ? `${item.currency ? item.currency.symbol : ''} ${Function.formatPrice(item.credit_origin)}` || '-' : '-'}</td>
965 </tr>
966 ))
967 ) : null}
968 <tr>
969 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
970 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
971 <td className="border-left-transparent border-bottom-transparent" />
972 <td className="td-font-detail">{strings.total}</td>
973 <td className="td-font-detail">{`${symbolCurrencyHeader} ${Function.formatPrice(total_debit)}`}</td>
974 <td className="td-font-detail">{`${symbolCurrencyHeader} ${Function.formatPrice(total_credit)}`}</td>
975 </tr>
976 <tr>
977 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
978 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
979 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
980 <td className="border-left-transparent border-bottom-transparent" />
981 <td className="td-font-detail">{strings.total_amount}</td>
982 <td className="td-font-detail">{`${symbolCurrencyHeader} ${Function.formatPrice(amount_origin)}`}</td>
983 </tr>
984 </TableBody>
985 </table>
986 )
987
988 } else if (componentAccount) {
989 return (
990 <table id="report" className="table table-bordered text-right">
991 <thead className="bg-primary border-blue">
992 <tr>
993 <td width="18%" className="text-left td-font-detail">
994 {strings.invoice_number}
995 </td>
996 <td width="17%" className="text-left td-font-detail">
997 {strings.invoice_date}
998 </td>
999 {/* <td width="17%" className="text-left">
1000 {strings.invoice_due_date}
1001 </td> */}
1002 <td width="15%" className="td-font-detail">{strings.discount}</td>
1003 <td width="25%" className="td-font-detail">{strings.amount}</td>
1004 </tr>
1005 </thead>
1006 <TableBody>
1007 {line_items ? (
1008 line_items.map((item, index) => (
1009 <tr key={index}>
1010 <td
1011 width="18%"
1012 className="text-left td-font-detail"
1013 >
1014 {item.invoice && item.invoice.number ? item.invoice.number : '-'}
1015 </td>
1016 <td
1017 width="17%"
1018 className="text-left td-font-detail"
1019 >
1020 {item.invoice && item.invoice.date ? item.invoice.date : '-'}
1021 </td>
1022 <td width="10%" className="td-font-detail">
1023 {Function.formatPrice(item.discount && item.discount.rate ? item.discount.rate : 0)}
1024 </td>
1025 <td className="td-font-detail">
1026 {`${item.currency ? item.currency.symbol : null} ${Function.formatPrice(item.amount ? item.amount : 0)}`}
1027 </td>
1028 </tr>
1029 ))
1030 ) : null}
1031 <tr>
1032 <td
1033 width="50%"
1034 colSpan="1"
1035 rowSpan="4"
1036 className="text-left td-font-detail border-right-transparent border-bottom-transparent border-left-transparent"
1037 >
1038 <i>{total_amount && total_amount.toString().length > 9}</i>
1039 </td>
1040 <td
1041 width="10%"
1042 rowSpan="4"
1043 className="border-bottom-transparent"
1044 />
1045 </tr>
1046 {amountRefund ?
1047 <tr>
1048 <td className="td-font-detail" width="10%">{strings.total_amount}</td>
1049 <td className="td-font-detail">{`${symbolAccount} ${Function.formatPrice(this.getTotalRefund())}`}</td>
1050 </tr>
1051 :
1052 <tr>
1053 <td className="td-font-detail" width="10%">{strings.total_amount}</td>
1054 <td className="td-font-detail">{`${symbolAccount} ${Function.formatPrice(total_amount)}`}</td>
1055 </tr>
1056 }
1057 </TableBody>
1058 </table>
1059 )
1060 }
1061 else if (componentLedger) {
1062 return (
1063 <table id="report" className="table table-bordered text-right">
1064 <thead className="bg-primary border-blue">
1065 <tr>
1066 <td width="10%" className="text-left">
1067 {strings.account_code}
1068 </td>
1069 <td width="20%" className="text-left">
1070 {strings.account_name}
1071 </td>
1072 <td width="17%" className="text-left">
1073 {strings.department}
1074 </td>
1075 <td width="17%" className="text-left">
1076 {strings.project}
1077 </td>
1078 <td width="18%" className="text-left">
1079 {strings.debit}
1080 </td>
1081 <td width="18%" className="text-left">
1082 {strings.credit}
1083 </td>
1084 </tr>
1085 </thead>
1086 <TableBody>
1087 {/* {line_items ? (
1088 line_items.map((item, index) => ( */}
1089 <tr>
1090 <td className="text-left td-font-detail">{(account && account.code) || '-'}</td>
1091 <td className="text-left td-font-detail">{(account && account.name) || '-'}</td>
1092 <td className="text-left td-font-detail">{(department && department.name) || '-'}</td>
1093 <td className="text-left td-font-detail">{(project && project.name) || '-'}</td>
1094 <td className="td-font-detail">{debit_origin !== 0 ? `${symbolCurrencyHeader} ${Function.formatPrice(debit_origin)}` : '-'}</td>
1095 <td className="td-font-detail">{credit_origin !== 0 ? `${symbolCurrencyHeader} ${Function.formatPrice(credit_origin)}` : '-'}</td>
1096 </tr>
1097 {/* ))
1098 ) : null} */}
1099 <tr>
1100 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
1101 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
1102 <td className="border-left-transparent border-bottom-transparent"></td>
1103 <td>{strings.total}</td>
1104
1105 <td>{`${symbolCurrencyHeader} ${Function.formatPrice(this.getTotalDebit())}`}</td>
1106 <td>{`${symbolCurrencyHeader} ${Function.formatPrice(this.getTotalCredit())}`}</td>
1107 </tr>
1108 </TableBody>
1109 </table>
1110 )
1111 }
1112 else if (componentJournal) {
1113 const { initialValues } = data;
1114 const symbolJournal = initialValues && initialValues.line_items ? initialValues.line_items.filter(item => item.currency)[0] : null
1115 return (
1116 <table id="report" className="table table-bordered text-right">
1117 <thead className="bg-primary border-blue">
1118 <tr>
1119 <td width="10%" className="text-left">
1120 {strings.account_code}
1121 </td>
1122 <td width="20%" className="text-left">
1123 {strings.account_name}
1124 </td>
1125 <td width="17%" className="text-left">
1126 {strings.department}
1127 </td>
1128 <td width="17%" className="text-left">
1129 {strings.project}
1130 </td>
1131 <td width="18%" className="text-left">
1132 {strings.debit}
1133 </td>
1134 <td width="18%" className="text-left">
1135 {strings.credit}
1136 </td>
1137 </tr>
1138 </thead>
1139 <TableBody>
1140 {line_items ? (
1141 line_items.map((item, index) => (
1142 <tr key={index}>
1143 <td className="text-left td-font-detail">{item.account && item.account.code ? item.account.code : '-'}</td>
1144 <td className="text-left td-font-detail">{item.account && item.account.name ? item.account.name : '-'}</td>
1145 <td className="text-left td-font-detail">{item.department && item.department.name ? item.department.name : '-'}</td>
1146 <td className="text-left td-font-detail">{item.project && item.project.name ? item.project.name : '-'}</td>
1147 <td className="td-font-detail">{item.debit_origin !== 0 ? `${item.currency ? item.currency.symbol : null} ${Function.formatPrice(item.debit_origin)}` : '-'}</td>
1148 <td className="td-font-detail">{item.credit_origin !== 0 ? `${item.currency ? item.currency.symbol : null} ${Function.formatPrice(item.credit_origin)}` || '-' : '-'}</td>
1149 </tr>
1150 ))
1151 ) : null}
1152 <tr>
1153 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
1154 <td className="border-left-transparent border-bottom-transparent border-right-transparent" />
1155 <td className="border-left-transparent border-bottom-transparent" />
1156 <td>{strings.total}</td>
1157 <td>{`${symbolJournal && symbolJournal.currency && symbolJournal.currency.symbol} ${Function.formatPrice(this.JournalGetTotalDebit())}`}</td>
1158 <td>{`${symbolJournal && symbolJournal.currency && symbolJournal.currency.symbol} ${Function.formatPrice(this.JournalGetTotalCredit())}`}</td>
1159 </tr>
1160 </TableBody>
1161 </table>
1162 )
1163 } else if (componentConsignment) {
1164 return (
1165 <table id="report" className="table table-bordered text-right">
1166 <thead className="bg-primary border-blue">
1167 <tr>
1168 <td width="30%" className="text-left">
1169 {strings.description}
1170 </td>
1171 <td width="10%">{strings.quantity}</td>
1172 <td width="15%">{strings.unit_price}</td>
1173 <td width="10%">{strings.discount}</td>
1174 <td width="15%">{strings.amount}</td>
1175 </tr>
1176 </thead>
1177 <TableBody>
1178 {line_items ? (
1179 line_items.map((item, index) => (
1180 <tr key={index}>
1181 <td width="30%" className="text-left td-font-detail">
1182 {item.description || ''}
1183 </td>
1184 <td width="10%" className="td-font-detail">
1185 {item.quantity ? Function.formatPrice(item.quantity) : '-'}{' '}
1186 {item.quantity && (item.unit && item.unit.code) ? item.unit.code : ''}
1187 </td>
1188 <td width="15%" className="td-font-detail">
1189 {item.unit_price ? symbolCurrencyHeader : ''} {item.unit_price ? Function.formatPrice(item.unit_price) : '-'}
1190 </td>
1191 <td width="10%" className="td-font-detail">
1192 {item.discount && item.discount.rate ? Function.formatPrice(item.discount && item.discount.rate) : '-'}
1193 </td>
1194 <td width="15%" className="td-font-detail">
1195 {symbolCurrencyHeader} {Function.formatPrice(this.getTotalProduct(index).total)}
1196 </td>
1197 </tr>
1198 ))
1199 ) : null}
1200 <tr>
1201 <td width="30%" colSpan="1" rowSpan="5" className="text-left border-right-transparent border-bottom-transparent border-left-transparent" />
1202 <td width="10%" rowSpan="5" className="text-left border-right-transparent border-bottom-transparent border-left-transparent" />
1203 <td width="15%" rowSpan="5" className="text-left border-bottom-transparent" />
1204 <td className="td-font-detail" width="10%">{strings.subtotal}</td>
1205 <td className="td-font-detail">{subtotal_before_tax_origin ? symbolCurrencyHeader : ''} {subtotal_before_tax_origin ? Function.formatPrice(subtotal_before_tax_origin) : '-'}</td>
1206 </tr>
1207 <tr>
1208 <td className="td-font-detail" width="10%">Final Discount</td>
1209 <td className="td-font-detail">{total_discount_origin ? symbolCurrencyHeader : ''} {total_discount_origin ? Function.formatPrice(total_discount_origin) : '-'}</td>
1210 </tr>
1211 <tr>
1212 <td className="td-font-detail" width="10%">{strings.total_tax}</td>
1213 <td className="td-font-detail">{total_tax_origin ? symbolCurrencyHeader : ''} {total_tax_origin ? Function.formatPrice(total_tax_origin) : '-'}</td>
1214 </tr>
1215 <tr>
1216 <td className="td-font-detail" width="10%">{strings.others}</td>
1217 <td className="td-font-detail">{total_other_origin ? symbolCurrencyHeader : ''} {total_other_origin ? Function.formatPrice(total_other_origin) : '-'}</td>
1218 </tr>
1219 <tr>
1220 <td className="td-font-detail" width="10%">{strings.total_amount}</td>
1221 <td className="td-font-detail">{total_amount_origin ? symbolCurrencyHeader : ''} {total_amount_origin ? Function.formatPrice(total_amount_origin) : '-'}</td>
1222 </tr>
1223 </TableBody>
1224 </table>
1225 )
1226 }
1227 else {
1228 return (
1229 <table id="report" className="table table-bordered text-right">
1230 <thead className="bg-primary border-blue">
1231 <tr>
1232 <td width="30%" className="text-left">
1233 {strings.description}
1234 </td>
1235 <td width="10%">{strings.quantity}</td>
1236 <td width="15%">{strings.unit_price}</td>
1237 <td width="10%">{strings.discount}</td>
1238 <td width="15%">{strings.amount}</td>
1239 </tr>
1240 </thead>
1241 <TableBody>
1242 {line_items ? (
1243 line_items.map((item, index) => (
1244 <tr key={index}>
1245 <td width="30%" className="text-left td-font-detail">
1246 {(item && item.product && item.product.name || item && item.account && item.account.name) || '-'}
1247 <td className="td-font-detail text-left border-right-transparent border-bottom-transparent border-left-transparent font-italic" style={{ position: "relative", left: -10 }}>
1248 {item.description || null}
1249 </td>
1250 </td>
1251 <td width="10%" className="td-font-detail">
1252 {item.quantity ? Function.formatPrice(item.quantity) : '-'}{' '}
1253 {item.quantity && (item.unit && item.unit.code) ? item.unit.code : ''}
1254 </td>
1255 <td width="15%" className="td-font-detail">
1256 {item.unit_price ? symbolCurrencyHeader : ''} {item.unit_price ? Function.formatPrice(item.unit_price) : '-'}
1257 </td>
1258 <td width="10%" className="td-font-detail">
1259 {item.discount && item.discount.rate ? Function.formatPrice(item.discount && item.discount.rate) : '-'}
1260 </td>
1261 <td width="15%" className="td-font-detail">
1262 {symbolCurrencyHeader} {Function.formatPrice(this.getTotalProduct(index).total)}
1263 </td>
1264 </tr>
1265 ))
1266 ) : null}
1267 <tr>
1268 <td width="30%" colSpan="1" rowSpan="4" className="text-left border-right-transparent border-bottom-transparent border-left-transparent" />
1269 <td width="10%" rowSpan="4" className="text-left border-right-transparent border-bottom-transparent border-left-transparent" />
1270 <td width="15%" rowSpan="4" className="text-left border-bottom-transparent" />
1271 <td className="td-font-detail" width="10%">{strings.other_cost}</td>
1272 <td className="td-font-detail">{this.getOtherCost() ? symbolCurrencyHeader : ''} {this.getOtherCost() ? Function.formatPrice(this.getOtherCost()) : '-'}</td>
1273 </tr>
1274 <tr>
1275 <td className="td-font-detail" width="10%">Final Discount</td>
1276 <td className="td-font-detail">{this.getFinalDiscount() ? symbolCurrencyHeader : ''} {this.getFinalDiscount() ? Function.formatPrice(this.getFinalDiscount()) : '-'}</td>
1277 </tr>
1278 <tr>
1279 <td className="td-font-detail" width="10%">{strings.total_tax}</td>
1280 <td className="td-font-detail">{this.getTotalTax() ? symbolCurrencyHeader : ''} {this.getTotalTax() ? Function.formatPrice(this.getTotalTax()) : '-'}</td>
1281 </tr>
1282 <tr>
1283 <td className="td-font-detail" width="10%">{!(paymentStatus || withoutDownPayment) ? strings.total_before_tax : strings.total}</td>
1284 <td className="td-font-detail">{this.getTotalWithDiscount() ? symbolCurrencyHeader : ''} {this.getTotalWithDiscount() ? Function.formatPrice(this.getTotalWithDiscount()) : '-'}</td>
1285 </tr>
1286 {!(paymentStatus || withoutDownPayment) ?
1287 <tr>
1288 <td width="15%" rowSpan="4" className="border-bottom-transparent border-right-transparent border-left-transparent" />
1289 <td width="15%" rowSpan="4" className="border-bottom-transparent border-right-transparent border-left-transparent" />
1290 <td width="15%" rowSpan="4" className="border-bottom-transparent border-left-transparent" />
1291 <td className="td-font-detail" width="10%">{strings.down_payment}</td>
1292 <td className="td-font-detail">{this.getDownPayment() ? symbolCurrencyHeader : ''} {this.getDownPayment() ? Function.formatPrice(this.getDownPayment()) : '-'}</td>
1293 </tr>
1294 : null}
1295 {!(paymentStatus || withoutDownPayment) ?
1296 <tr>
1297 <td className="td-font-detail" width="10%">{strings.balance}</td>
1298 <td className="td-font-detail">{this.getBalance() ? symbolCurrencyHeader : ''} {this.getBalance() ? Function.formatPrice(this.getBalance()) : '-'}</td>
1299 </tr>
1300 : null}
1301 {/* <tr>
1302 <td className="td-font-detail" width="10%">{strings.total_amount}</td>
1303 <td className="td-font-detail" width="10%">{symbolCurrencyHeader} {Function.formatPrice(this.getTotalAmount() || 0)}</td>
1304 </tr> */}
1305 </TableBody>
1306 </table>
1307 )
1308 }
1309 }
1310
1311 handleClickJV = (event) => {
1312 this.setState({ anchorElJV: event.currentTarget });
1313 };
1314
1315 handleCloseSaveMoreJV = () => {
1316 this.setState({ anchorElJV: null });
1317 };
1318
1319 handleSendToEmailJV = (html, subject, company_email, company_name, text, email_customer) => {
1320 this.setState({ anchorElJV: null });
1321 const { pathname, search } = this.props.location
1322 this.props.dispatch(change('detail', 'html', html));
1323 this.props.dispatch(change('detail', 'subject', subject));
1324 this.props.dispatch(change('detail', 'reply_to', company_email === '-' ? null : company_email));
1325 this.props.dispatch(change('detail', 'company_name', company_name === '-' ? null : company_name));
1326 this.props.dispatch(change('detail', 'email_customer', html));
1327 this.props.dispatch(change('detail', 'text', text));
1328 this.props.history.push(`${pathname}/send-to-email${search}`);
1329 }
1330
1331 handlePrintJV = (html, title) => {
1332 this.handleCloseSaveMoreJV();
1333
1334 let mywindow = window.open('', 'printwindow');
1335 mywindow.document.write(`<html><head><title>${title}</title></head><body>`);
1336 mywindow.document.write(html);
1337 mywindow.document.write('</body></html>');
1338 mywindow.document.close(); // necessary for IE >= 10
1339 mywindow.focus(); // necessary for IE >= 10*/
1340
1341 mywindow.print();
1342 mywindow.close();
1343
1344 keys = [];
1345 }
1346
1347 handleExportPdfJV = () => {
1348 const { settings } = this.props;
1349 const { strings } = settings;
1350 let pdf = new jsPDF(this.props.pageLayout ? this.props.pageLayout : 'p')
1351 const pageWidth = Function.pageWidth()
1352 const pageHeight = Function.pageHeight()
1353 pdf.addFileToVFS('Roboto-Light.ttf', robotoLightFont)
1354 pdf.addFont('Roboto-Light.ttf', 'roboto', 'normal')
1355 pdf.setFont('roboto')
1356 pdf.autoTable({
1357 html: '#table-1',
1358 bodyStyles: { fontSize: 7, font: 'roboto' },
1359 headStyles: { fontSize: 7, font: 'roboto' },
1360 useCss: true,
1361 })
1362 pdf.autoTable({
1363 html: '#table-2',
1364 bodyStyles: { fontSize: 7, font: 'roboto' },
1365 headStyles: { fontSize: 7, font: 'roboto' },
1366 useCss: true,
1367 })
1368 pdf.autoTable({
1369 html: '#table-3',
1370 bodyStyles: { fontSize: 7, font: 'roboto' },
1371 headStyles: { fontSize: 7, font: 'roboto' },
1372 useCss: true,
1373 })
1374 pdf.autoTable({
1375 html: '#table-4',
1376 bodyStyles: { fontSize: 7, font: 'roboto' },
1377 headStyles: { fontSize: 7, font: 'roboto' },
1378 useCss: true,
1379 })
1380 pdf.autoTable({
1381 html: '#table-5',
1382 bodyStyles: { fontSize: 7, font: 'roboto' },
1383 headStyles: { fontSize: 7, font: 'roboto' },
1384 useCss: true,
1385 })
1386 pdf.autoTable({
1387 html: '#table-6',
1388 bodyStyles: { fontSize: 7, font: 'roboto' },
1389 headStyles: { fontSize: 7, font: 'roboto' },
1390 useCss: true,
1391 })
1392 pdf.autoTable({
1393 html: '#table-7',
1394 bodyStyles: { fontSize: 7, font: 'roboto' },
1395 headStyles: { fontSize: 7, font: 'roboto' },
1396 useCss: true,
1397 })
1398 pdf.save('pdf.pdf')
1399 pdf = ''
1400 }
1401
1402 keysPressedJV = (event) => {
1403 keys[event.key] = true
1404
1405 let curOS = '';
1406 if (navigator.appVersion.indexOf("Win") != -1) curOS = "Windows";
1407 if (navigator.appVersion.indexOf("Mac") != -1) curOS = "MacOS";
1408 if (navigator.appVersion.indexOf("X11") != -1) curOS = "UNIX";
1409 if (navigator.appVersion.indexOf("Linux") != -1) curOS = "Linux";
1410
1411 if (curOS === 'MacOS') {
1412 if ((keys['Meta'] && keys['p']) || (keys['Command'] && keys['p'])) {
1413 // non aktifkan fungsi default ctrl + p
1414 event.preventDefault()
1415
1416 // trigger untuk membuka menu export
1417 let foo = document.getElementById('export2')
1418 foo.createAttribute = "autoFocus"
1419 foo.focus()
1420 foo.click()
1421
1422 // trigger function print
1423 let node = document.getElementsByClassName('menu-item-custom-img')
1424 node[0].createAttribute = "autoFocus"
1425 node[0].focus()
1426 node[0].click()
1427
1428 this.setState({ anchorElJV: null })
1429 }
1430 } else {
1431 if (keys['Control'] && keys['p']) {
1432 // non aktifkan fungsi default ctrl + p
1433 event.preventDefault()
1434
1435 // trigger untuk membuka menu export
1436 let foo = document.getElementById('export2')
1437 foo.createAttribute = "autoFocus"
1438 foo.focus()
1439 foo.click()
1440
1441 // trigger function print
1442 let node = document.getElementsByClassName('menu-item-custom-img')
1443 node[0].createAttribute = "autoFocus"
1444 node[0].focus()
1445 node[0].click()
1446
1447 this.setState({ anchorElJV: null })
1448 }
1449 }
1450 }
1451
1452 keysReleasedJV = (event) => {
1453 keys[event.key] = false
1454 }
1455
1456 handleBackJV = (e, pathname) => {
1457 e.preventDefault();
1458 this.props.history.push(pathname);
1459 }
1460
1461 getTotalDebitJV = () => {
1462 const { journal_vouchers } = this.props
1463 const initialValues = journal_vouchers && journal_vouchers.data && journal_vouchers.data.initialValues
1464
1465 let total = 0;
1466 if (!initialValues) {
1467 return total
1468 }
1469 initialValues.line_items.forEach(item => {
1470 total += Number(item.debit)
1471 })
1472 return total
1473 }
1474
1475 getTotalCreditJV = () => {
1476 const { journal_vouchers } = this.props
1477 const initialValues = journal_vouchers && journal_vouchers.data && journal_vouchers.data.initialValues
1478
1479 let total = 0;
1480 if (!initialValues) {
1481 return total
1482 }
1483 initialValues.line_items.forEach(item => {
1484 total += Number(item.credit)
1485 })
1486 return total
1487 }
1488
1489 getTotalDebitJVOrigin = () => {
1490 const { journal_vouchers } = this.props
1491 const initialValues = journal_vouchers && journal_vouchers.data && journal_vouchers.data.initialValues
1492
1493 let total = 0;
1494 if (!initialValues) {
1495 return total
1496 }
1497 initialValues.line_items.forEach(item => {
1498 total += Number(item.debit_origin)
1499 })
1500 return total
1501 }
1502
1503 getTotalCreditJVOrigin = () => {
1504 const { journal_vouchers } = this.props
1505 const initialValues = journal_vouchers && journal_vouchers.data && journal_vouchers.data.initialValues
1506 let total = 0;
1507 if (!initialValues) {
1508 return total
1509 }
1510 initialValues.line_items.forEach(item => {
1511 total += Number(item.credit_origin)
1512 })
1513 return total
1514 }
1515
1516 handleChangeTemplateJV = (event, newValue) => {
1517 this.setState({ templateJV: newValue });
1518 this.props.setTemplateJV(newValue.value);
1519 }
1520
1521 handleEditTemplateJV = (id, name, newBreadcrumbs) => {
1522
1523 newBreadcrumbs.push({
1524 pathname: location.pathname + location.search,
1525 title: name
1526 })
1527
1528 this.props.history.push({
1529 pathname: `/edit-template`,
1530 search: `?type=form&key=${this.props.name}&id=${id}&vouchers=true`,
1531 state: { breadcrumbs: newBreadcrumbs }
1532 });
1533 }
1534
1535 handleSaveAsDefaultJV = (id) => {
1536 const { module, user_settings_journal_voucher } = this.props
1537 const key = 'journal_vouchers'
1538 let update = null
1539 const userSettingJV = user_settings_journal_voucher && user_settings_journal_voucher.queryResult && user_settings_journal_voucher.queryResult.data
1540 if (userSettingJV) {
1541 userSettingJV.forEach(data => {
1542 if (data.key == `default.template.form.${key}.id`) {
1543 update = data
1544 }
1545 })
1546 }
1547
1548 if (update) {
1549 this.props.updateDefaultJV(key, id, update);
1550 } else {
1551 this.props.saveAsDefaultJV(key, id);
1552 }
1553 }
1554
1555 render() {
1556 const {
1557 auth,
1558 settings,
1559 breadcrumbs,
1560 data,
1561 title,
1562 module,
1563 report_templates,
1564 dispatch,
1565 user_settings,
1566 company_settings,
1567 sample_bodies,
1568 componentLedger,
1569 componentJournal,
1570 componentCashTransfers,
1571 template,
1572 name,
1573 journal_vouchers,
1574 titleJV,
1575 templateJV,
1576 nameJV,
1577 report_templates_journal_voucher,
1578 sample_bodies_journal_voucher,
1579 withJournalVoucher,
1580 user_settings_journal_voucher,
1581 componentCashBank,
1582 endpoint,
1583 detailHtml,
1584 } = this.props;
1585 const { strings } = settings;
1586 const baseCurrency = auth && auth.settingApp && auth.settingApp.baseCurrency
1587 const listTemplate = report_templates && report_templates.queryResult.data &&
1588 report_templates.queryResult.data.map(data => { return { label: data.name, value: data } });
1589 const initialTemplate = report_templates && report_templates.data && report_templates.data.initialValues
1590 let idTemplate = null
1591 let content = null
1592
1593 const { initialValues } = data;
1594 const peopleName = (initialValues && initialValues.customer) || (initialValues && initialValues.supplier || initialValues && initialValues.contact);
1595 const id = initialValues && initialValues.id
1596 const status = initialValues && initialValues.status
1597 const paymentStatus = initialValues && initialValues.payment_status
1598 const department = (initialValues && initialValues.department) || null;
1599 const number = (initialValues && initialValues.number) || null;
1600
1601 const listTemplateJV = report_templates_journal_voucher && report_templates_journal_voucher.queryResult.data &&
1602 report_templates_journal_voucher.queryResult.data.map(data => { return { label: data.name, value: data } });
1603 const initialTemplateJV = report_templates_journal_voucher && report_templates_journal_voucher.data && report_templates_journal_voucher.data.initialValues
1604 let idTemplateJV = null
1605 let contentJV = null
1606 const initialValuesJV = journal_vouchers && journal_vouchers.data && journal_vouchers.data.initialValues
1607 const numberJV = initialValuesJV && initialValuesJV.number || '-';
1608 let objJournal = {}
1609 if (withJournalVoucher) {
1610 objJournal = {
1611 account_journal_voucher: initialValuesJV && initialValuesJV.account || null,
1612 contact_journal_voucher: initialValuesJV && initialValuesJV.contact || null,
1613 created_journal_voucher: initialValuesJV && initialValuesJV.created || null,
1614 credit_journal_voucher: initialValuesJV && initialValuesJV.credit || null,
1615 credit_origin_journal_voucher: initialValuesJV && initialValuesJV.credit_origin || null,
1616 currency_journal_voucher: initialValuesJV && initialValuesJV.currency || null,
1617 date_journal_voucher: initialValuesJV && initialValuesJV.date || null,
1618 debit_journal_voucher: initialValuesJV && initialValuesJV.debit || null,
1619 debit_origin_journal_voucher: initialValuesJV && initialValuesJV.debit_origin || null,
1620 department_journal_voucher: initialValuesJV && initialValuesJV.department || null,
1621 description_journal_voucher: initialValuesJV && initialValuesJV.description || null,
1622 exchange_rate_journal_voucher: initialValuesJV && initialValuesJV.exchange_rate || null,
1623 id_journal_voucher: initialValuesJV && initialValuesJV.id || null,
1624 is_reconciled_journal_voucher: initialValuesJV && initialValuesJV.is_reconciled || null,
1625 line_items_journal_voucher: initialValuesJV && initialValuesJV.line_items || null,
1626 number_journal_voucher: initialValuesJV && initialValuesJV.number || null,
1627 project_journal_voucher: initialValuesJV && initialValuesJV.project || null,
1628 symbol_journal_voucher: initialValuesJV && initialValuesJV.symbol || null,
1629 template_journal_voucher: initialValuesJV && initialValuesJV.template || null,
1630 time_journal_voucher: initialValuesJV && initialValuesJV.time || null,
1631 transaction_journal_voucher: initialValuesJV && initialValuesJV.transaction || null,
1632 type_journal_voucher: initialValuesJV && initialValuesJV.type || null,
1633 updated_journal_voucher: initialValuesJV && initialValuesJV.updated || null,
1634 }
1635 }
1636
1637 //jogresss initialvaluees
1638 let initalValuesBoth = {
1639 ...initialValues,
1640 ...objJournal
1641 }
1642 //set initial template in select option
1643 if (initialTemplate) {
1644 idTemplate = initialTemplate.id
1645 content = initialTemplate && initialTemplate.content && initialTemplate.content.replace(/\\/gi, '');
1646 const template = {
1647 label: initialTemplate.name,
1648 name: initialTemplate.name,
1649 value: initialTemplate
1650 }
1651 dispatch(change('detail', 'dataTemplate', template));
1652 } else {
1653 if (initalValuesBoth && initalValuesBoth.template && initalValuesBoth.template.content) {
1654 idTemplate = initalValuesBoth.template.id
1655 content = initalValuesBoth.template.content.replace(/\\/gi, '');
1656
1657 const template = {
1658 label: initalValuesBoth.template.name,
1659 name: initalValuesBoth.template.name,
1660 value: initalValuesBoth.template
1661 }
1662 dispatch(change('detail', 'dataTemplate', template));
1663 } else {
1664 const templateIndex = report_templates && report_templates.queryResult.data && report_templates.queryResult.data[0]
1665 if (templateIndex && initalValuesBoth) {
1666 idTemplate = templateIndex.id
1667 content = templateIndex.content && templateIndex.content.replace(/\\/gi, '');
1668 const template = {
1669 label: templateIndex.name,
1670 name: templateIndex.name,
1671 value: templateIndex
1672 }
1673 dispatch(change('detail', 'dataTemplate', template));
1674 }
1675 }
1676 }
1677
1678 //set initial template in select option Journal Voucher
1679 if (initialTemplateJV) {
1680 idTemplateJV = initialTemplateJV.id
1681 contentJV = initialTemplateJV && initialTemplateJV.content && initialTemplateJV.content.replace(/\\/gi, '');
1682 const templateJV = {
1683 label: initialTemplateJV.name,
1684 name: initialTemplateJV.name,
1685 value: initialTemplateJV
1686 }
1687 dispatch(change('detail', 'dataTemplateJV', templateJV));
1688 } else {
1689 if (initialValuesJV && initialValuesJV.template) {
1690 idTemplateJV = initialValuesJV.template.id
1691 contentJV = initialValuesJV && initialValuesJV.template && initialValuesJV.template.content && initialValuesJV.template.content.replace(/\\/gi, '');
1692 const templateJV = {
1693 label: initialValuesJV.template.name,
1694 name: initialValuesJV.template.name,
1695 value: initialValuesJV.template
1696 }
1697 dispatch(change('detail', 'dataTemplateJV', templateJV));
1698 } else {
1699 const templateIndex = report_templates_journal_voucher && report_templates_journal_voucher.queryResult.data && report_templates_journal_voucher.queryResult.data[0]
1700 if (templateIndex) {
1701 idTemplateJV = templateIndex.id
1702 contentJV = templateIndex && templateIndex.content && templateIndex.content.replace(/\\/gi, '');
1703 const templateJV = {
1704 label: templateIndex.name,
1705 name: templateIndex.name,
1706 value: templateIndex
1707 }
1708 dispatch(change('detail', 'dataTemplateJV', templateJV));
1709 }
1710 }
1711 }
1712
1713 //close set initial template in select option Journal Voucher
1714 // ======sample bodies for both component===
1715 let sampleBodies = sample_bodies && sample_bodies.queryResult && sample_bodies.queryResult.data;
1716 let sampleBodiesJV = sample_bodies_journal_voucher && sample_bodies_journal_voucher.queryResult && sample_bodies_journal_voucher.queryResult.data;
1717 let objSampleJournal = {}
1718 if (withJournalVoucher) {
1719 objSampleJournal = {
1720 attachments_journal_voucher: sampleBodiesJV.attachments,
1721 created_journal_voucher: sampleBodiesJV.created,
1722 date_journal_voucher: sampleBodiesJV.date,
1723 department_journal_voucher: sampleBodiesJV.department,
1724 description_journal_voucher: sampleBodiesJV.description,
1725 document_journal_voucher: sampleBodiesJV.document,
1726 id_journal_voucher: sampleBodiesJV.id,
1727 line_items_journal_voucher: sampleBodiesJV.line_items,
1728 number_journal_voucher: sampleBodiesJV.number,
1729 other_fields_journal_voucher: sampleBodiesJV.other_fields,
1730 project_journal_voucher: sampleBodiesJV.project,
1731 status_journal_voucher: sampleBodiesJV.status,
1732 time_journal_voucher: sampleBodiesJV.time,
1733 total_credit_journal_voucher: sampleBodiesJV.total_credit,
1734 total_debit_journal_voucher: sampleBodiesJV.total_debit,
1735 type_journal_voucher: sampleBodiesJV.type,
1736 updated_journal_voucher: sampleBodiesJV.updated,
1737 }
1738 }
1739
1740 let sampleBodiesBoth = {
1741 ...sampleBodies,
1742 ...objSampleJournal
1743 };
1744 //make template
1745 let html = content;
1746 let htmlJV = contentJV;
1747 //field company
1748 const getCompany = (key) => {
1749 let company_value = company_settings && company_settings.queryResult && company_settings.queryResult.data && company_settings.queryResult.data.filter(item => item.key === key)[0];
1750 return company_value && company_value.value ? company_value.value : '-';
1751 }
1752
1753 const company_name = getCompany("company.name");
1754 const company_address = getCompany("company.address");
1755 const company_city = getCompany("company.city");
1756 const company_postal_code = getCompany("company.postal_code");
1757 const company_phone = getCompany("company.phone");
1758 const company_email = getCompany("company.email");
1759
1760 let companySettings = company_settings.queryResult && company_settings.queryResult.data
1761 let companyObj = {}
1762 companySettings.forEach(data => {
1763 if (data.key.includes('company.')) {
1764 companyObj[`{${data.key}}`] = data.value
1765 }
1766 })
1767
1768 if (content && initalValuesBoth) {
1769 let mapObj = {}
1770 let dataArray = []
1771 let newInitialValues = {
1772 ...initalValuesBoth,
1773 date: (initalValuesBoth && initalValuesBoth.date) ? moment(initalValuesBoth.date).format('ll') : '-',
1774 time: (initalValuesBoth && initalValuesBoth.time) ? moment(initalValuesBoth.time).format('LT') : '-',
1775 date_journal_voucher: (initalValuesBoth && initalValuesBoth.date_journal_voucher) ? moment(initalValuesBoth.date_journal_voucher).format('ll') : '-',
1776 time_journal_voucher: (initalValuesBoth && initalValuesBoth.time_journal_voucher) ? moment(initalValuesBoth.time_journal_voucher).format('LT') : '-',
1777 }
1778 if (initalValuesBoth) {
1779 // overide value from backend
1780 if (module === 'manual_journals') {
1781 newInitialValues = {
1782 ...newInitialValues,
1783 total_debit: initalValuesBoth && initalValuesBoth.total_debit ? Function.formatPrice(initalValuesBoth.total_debit) : '-',
1784 total_credit: initalValuesBoth && initalValuesBoth.total_credit ? Function.formatPrice(initalValuesBoth.total_credit) : '-',
1785 }
1786 } else if (module === 'general_ledgers') {
1787 newInitialValues = {
1788 ...newInitialValues,
1789 ...newInitialValues.transaction,
1790 date: (newInitialValues && newInitialValues.transaction && newInitialValues.transaction.date) ? moment(initalValuesBoth.transaction.date).format('ll') : '-',
1791 line_items: [{
1792 ...newInitialValues
1793 }],
1794 total_debit: initalValuesBoth && initalValuesBoth.debit ? Function.formatPrice(initalValuesBoth.debit) : '-',
1795 total_credit: initalValuesBoth && initalValuesBoth.credit ? Function.formatPrice(initalValuesBoth.credit) : '-',
1796 }
1797 } else if (module === 'cash_ins' || module === 'cash_outs') {
1798 newInitialValues = {
1799 ...newInitialValues,
1800 cash: {
1801 ...newInitialValues.cash,
1802 amount: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount) ? Function.formatPrice(initalValuesBoth.cash.amount) : '-',
1803 amount_origin: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount_origin) ? Function.formatPrice(initalValuesBoth.cash.amount_origin) : '-',
1804 exchange_rate: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.exchange_rate) ? Function.formatPrice(initalValuesBoth.cash.exchange_rate) : '-',
1805 }
1806 }
1807
1808 } else if (withJournalVoucher) {
1809 newInitialValues = {
1810 ...newInitialValues,
1811 amount_origin: (initalValuesBoth && initalValuesBoth.amount_origin) ? Function.formatPrice(initalValuesBoth.amount_origin) : '-',
1812 balance: (initalValuesBoth && initalValuesBoth.balance) ? Function.formatPrice(initalValuesBoth.balance) : '-',
1813 balance_origin: (initalValuesBoth && initalValuesBoth.balance_origin) ? Function.formatPrice(initalValuesBoth.balance_origin) : '-',
1814 receivable: (initalValuesBoth && initalValuesBoth.receivable) ? Function.formatPrice(initalValuesBoth.receivable) : '-',
1815 receivable_origin: (initalValuesBoth && initalValuesBoth.receivable_origin) ? Function.formatPrice(initalValuesBoth.receivable_origin) : '-',
1816 subtotal: (initalValuesBoth && initalValuesBoth.subtotal) ? Function.formatPrice(initalValuesBoth.subtotal) : '-',
1817 subtotal_before_tax: (initalValuesBoth && initalValuesBoth.subtotal_before_tax) ? Function.formatPrice(initalValuesBoth.subtotal_before_tax) : '-',
1818 subtotal_before_tax_origin: (initalValuesBoth && initalValuesBoth.subtotal_before_tax_origin) ? Function.formatPrice(initalValuesBoth.subtotal_before_tax_origin) : '-',
1819 subtotal_origin: (initalValuesBoth && initalValuesBoth.subtotal_origin) ? Function.formatPrice(initalValuesBoth.subtotal_origin) : '-',
1820 total_discount: (initalValuesBoth && initalValuesBoth.total_discount) ? Function.formatPrice(initalValuesBoth.total_discount) : '-',
1821 total_discount_origin: (initalValuesBoth && initalValuesBoth.total_discount_origin) ? Function.formatPrice(initalValuesBoth.total_discount_origin) : '-',
1822 total_other: (initalValuesBoth && initalValuesBoth.total_other) ? Function.formatPrice(initalValuesBoth.total_other) : '-',
1823 total_other_origin: (initalValuesBoth && initalValuesBoth.total_other_origin) ? Function.formatPrice(initalValuesBoth.total_other_origin) : '-',
1824 total_tax: (initalValuesBoth && initalValuesBoth.total_tax) ? Function.formatPrice(initalValuesBoth.total_tax) : '-',
1825 total_tax_origin: (initalValuesBoth && initalValuesBoth.total_tax_origin) ? Function.formatPrice(initalValuesBoth.total_tax_origin) : '-',
1826 total_amount: (initalValuesBoth && initalValuesBoth.total_amount) ? Function.formatPrice(initalValuesBoth.total_amount) : '-',
1827 total_amount_origin: (initalValuesBoth && initalValuesBoth.total_amount_origin) ? Function.formatPrice(initalValuesBoth.total_amount_origin) : '-',
1828 total_cash_amount_origin: (initalValuesBoth && initalValuesBoth.total_cash_amount_origin) ? Function.formatPrice(initalValuesBoth.total_cash_amount_origin) : '-',
1829 total_credit: (initalValuesBoth && initalValuesBoth.total_credit) ? Function.formatPrice(initalValuesBoth.total_credit) : '-',
1830 total_debit: (initalValuesBoth && initalValuesBoth.total_debit) ? Function.formatPrice(initalValuesBoth.total_debit) : '-',
1831 final_discount: {
1832 ...newInitialValues.final_discount,
1833 amount: (initalValuesBoth && initalValuesBoth.final_discount && initalValuesBoth.final_discount.amount) ? Function.formatPrice(initalValuesBoth.final_discount.amount) : '-',
1834 amount_origin: (initalValuesBoth && initalValuesBoth.final_discount && initalValuesBoth.final_discount.amount_origin) ? Function.formatPrice(initalValuesBoth.final_discount.amount_origin) : '-',
1835 },
1836 cash: {
1837 ...newInitialValues.cash,
1838 amount: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount) ? Function.formatPrice(initalValuesBoth.cash.amount) : '-',
1839 amount_origin: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount_origin) ? Function.formatPrice(initalValuesBoth.cash.amount_origin) : '-',
1840 exchange_rate: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.exchange_rate) ? Function.formatPrice(initalValuesBoth.cash.exchange_rate) : '-',
1841 },
1842 journal_vouchers: {
1843 credit_journal_voucher: (initalValuesBoth && initalValuesBoth.credit_journal_voucher) ? Function.formatPrice(initalValuesBoth.credit_journal_voucher) : '-',
1844 credit_origin_journal_voucher: (initalValuesBoth && initalValuesBoth.credit_origin_journal_voucher) ? Function.formatPrice(initalValuesBoth.credit_origin_journal_voucher) : '-',
1845 debit_journal_voucher: (initalValuesBoth && initalValuesBoth.debit_journal_voucher) ? Function.formatPrice(initalValuesBoth.debit_journal_voucher) : '-',
1846 debit_origin_journal_voucher: (initalValuesBoth && initalValuesBoth.debit_origin_journal_voucher) ? Function.formatPrice(initalValuesBoth.debit_origin_journal_voucher) : '-',
1847 }
1848 }
1849 } else {
1850 newInitialValues = {
1851 ...newInitialValues,
1852 amount_origin: (initalValuesBoth && initalValuesBoth.amount_origin) ? Function.formatPrice(initalValuesBoth.amount_origin) : '-',
1853 balance: (initalValuesBoth && initalValuesBoth.balance) ? Function.formatPrice(initalValuesBoth.balance) : '-',
1854 balance_origin: (initalValuesBoth && initalValuesBoth.balance_origin) ? Function.formatPrice(initalValuesBoth.balance_origin) : '-',
1855 receivable: (initalValuesBoth && initalValuesBoth.receivable) ? Function.formatPrice(initalValuesBoth.receivable) : '-',
1856 receivable_origin: (initalValuesBoth && initalValuesBoth.receivable_origin) ? Function.formatPrice(initalValuesBoth.receivable_origin) : '-',
1857 subtotal: (initalValuesBoth && initalValuesBoth.subtotal) ? Function.formatPrice(initalValuesBoth.subtotal) : '-',
1858 subtotal_before_tax: (initalValuesBoth && initalValuesBoth.subtotal_before_tax) ? Function.formatPrice(initalValuesBoth.subtotal_before_tax) : '-',
1859 subtotal_before_tax_origin: (initalValuesBoth && initalValuesBoth.subtotal_before_tax_origin) ? Function.formatPrice(initalValuesBoth.subtotal_before_tax_origin) : '-',
1860 subtotal_origin: (initalValuesBoth && initalValuesBoth.subtotal_origin) ? Function.formatPrice(initalValuesBoth.subtotal_origin) : '-',
1861 total_discount: (initalValuesBoth && initalValuesBoth.total_discount) ? Function.formatPrice(initalValuesBoth.total_discount) : '-',
1862 total_discount_origin: (initalValuesBoth && initalValuesBoth.total_discount_origin) ? Function.formatPrice(initalValuesBoth.total_discount_origin) : '-',
1863 total_other: (initalValuesBoth && initalValuesBoth.total_other) ? Function.formatPrice(initalValuesBoth.total_other) : '-',
1864 total_other_origin: (initalValuesBoth && initalValuesBoth.total_other_origin) ? Function.formatPrice(initalValuesBoth.total_other_origin) : '-',
1865 total_tax: (initalValuesBoth && initalValuesBoth.total_tax) ? Function.formatPrice(initalValuesBoth.total_tax) : '-',
1866 total_tax_origin: (initalValuesBoth && initalValuesBoth.total_tax_origin) ? Function.formatPrice(initalValuesBoth.total_tax_origin) : '-',
1867 total_amount: (initalValuesBoth && initalValuesBoth.total_amount) ? Function.formatPrice(initalValuesBoth.total_amount) : '-',
1868 total_amount_origin: (initalValuesBoth && initalValuesBoth.total_amount_origin) ? Function.formatPrice(initalValuesBoth.total_amount_origin) : '-',
1869 total_cash_amount_origin: (initalValuesBoth && initalValuesBoth.total_cash_amount_origin) ? Function.formatPrice(initalValuesBoth.total_cash_amount_origin) : '-',
1870 total_credit: (initalValuesBoth && initalValuesBoth.total_credit) ? Function.formatPrice(initalValuesBoth.total_credit) : '-',
1871 total_debit: (initalValuesBoth && initalValuesBoth.total_debit) ? Function.formatPrice(initalValuesBoth.total_debit) : '-',
1872 final_discount: {
1873 ...newInitialValues.final_discount,
1874 amount: (initalValuesBoth && initalValuesBoth.final_discount && initalValuesBoth.final_discount.amount) ? Function.formatPrice(initalValuesBoth.final_discount.amount) : '-',
1875 amount_origin: (initalValuesBoth && initalValuesBoth.final_discount && initalValuesBoth.final_discount.amount_origin) ? Function.formatPrice(initalValuesBoth.final_discount.amount_origin) : '-',
1876 },
1877 cash: {
1878 ...newInitialValues.cash,
1879 amount: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount) ? Function.formatPrice(initalValuesBoth.cash.amount) : '-',
1880 amount_origin: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount_origin) ? Function.formatPrice(initalValuesBoth.cash.amount_origin) : '-',
1881 exchange_rate: (initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.exchange_rate) ? Function.formatPrice(initalValuesBoth.cash.exchange_rate) : '-',
1882 }
1883 }
1884 }
1885 }
1886
1887 // add field base currency in sample bodies
1888 if (sampleBodiesBoth && baseCurrency) {
1889 sampleBodiesBoth = {
1890 ...sampleBodiesBoth,
1891 company_currency: baseCurrency
1892 }
1893
1894 newInitialValues = {
1895 ...newInitialValues,
1896 company_currency: baseCurrency
1897 }
1898
1899 // add field in cash transfer
1900 if (initalValuesBoth.amount_origin) {
1901 sampleBodiesBoth.amount_origin = 1
1902 sampleBodiesBoth.spelled_out_amount_origin = 1
1903 newInitialValues.spelled_out_amount_origin = Function.currencyCalledWithDecimal(initalValuesBoth.amount_origin, this.props)
1904 }
1905
1906 // add field spelled out
1907 if (newInitialValues.total_amount) {
1908 sampleBodiesBoth.spelled_out_amount = 1
1909 newInitialValues.spelled_out_amount = Function.currencyCalledWithDecimal(initalValuesBoth.total_amount, this.props)
1910 }
1911
1912 if (newInitialValues.total_amount_origin) {
1913 sampleBodiesBoth.spelled_out_amount_origin = 1
1914 newInitialValues.spelled_out_amount_origin = Function.currencyCalledWithDecimal(initalValuesBoth.total_amount_origin, this.props)
1915 }
1916
1917 //add cash spelled out amount
1918 if (newInitialValues && newInitialValues.cash && newInitialValues.cash.amount !== '-') {
1919 sampleBodiesBoth.spelled_out_amount = 1
1920 newInitialValues.spelled_out_amount = Function.currencyCalledWithDecimal(initalValuesBoth.cash.amount, this.props)
1921 }
1922
1923 //add cash spelled out amount_origin
1924 if (newInitialValues && newInitialValues.cash && newInitialValues.cash.amount_origin !== '-') {
1925 sampleBodiesBoth.spelled_out_amount_origin = 1
1926 newInitialValues.spelled_out_amount_origin = Function.currencyCalledWithDecimal(initalValuesBoth.cash.amount_origin, this.props)
1927 }
1928 }
1929
1930 if (sampleBodiesBoth && initalValuesBoth) {
1931 const fields = Object.keys(sampleBodiesBoth);
1932 const newObj = fields.reduce((o, key) => ({ ...o, [`{${key}}`]: newInitialValues[key] ? newInitialValues[key] : '-' }), {});
1933 let newObjChildrenObject = {}
1934
1935 fields.forEach(field => {
1936
1937 if (_.isObject(sampleBodiesBoth[field]) && !_.isArray(sampleBodiesBoth[field])) {
1938 const fieldObject = Object.keys(sampleBodiesBoth[field])
1939 const fieldCustomerAndSupplier = (field === 'customer' || field === 'supplier') && initalValuesBoth[field] ? Object.keys(initalValuesBoth[field]).filter(custom => custom === "contact_persons" || custom === "phones" || custom === "emails") : [] //update by Teguh 26des2019
1940 let childrenObject = fieldObject.reduce((o, key) => ({ ...o, [`{${field}.${key}}`]: (newInitialValues[field] && newInitialValues[field][key]) ? newInitialValues[field][key] : '-' }), {});
1941
1942 if (fieldCustomerAndSupplier.length) { //update by Teguh 26des2019
1943 fieldCustomerAndSupplier.forEach(node => {
1944 const CustomerAndSupplierNode = Object.keys(newInitialValues[field][node])
1945 CustomerAndSupplierNode.forEach(keys => {
1946 const customerAndSupplierKey = Object.keys(newInitialValues[field][node][keys])
1947 let customerAndSupplier = customerAndSupplierKey.reduce((o, key) => ({ ...o, [`{${field}.${node}.${key}}`]: (newInitialValues[field] && newInitialValues[field][node] && newInitialValues[field][node][keys][key]) ? newInitialValues[field][node][keys][key] : '-' }), {});
1948 newObjChildrenObject = { ...newObjChildrenObject, ...customerAndSupplier }
1949 })
1950 })
1951 }
1952
1953 fieldObject.forEach(node => {
1954 if (_.isObject(sampleBodiesBoth[field][node])) {
1955 const fieldObjectNode = !(node === "contact_persons" || node === "phones" || node === "emails") ? Object.keys(sampleBodiesBoth[field][node]) : []
1956 let childrenObjectNode = fieldObjectNode.reduce((o, key) => ({ ...o, [`{${field}.${node}.${key}}`]: (newInitialValues[field] && newInitialValues[field][node] && newInitialValues[field][node][key]) ? newInitialValues[field][node][key] : '-' }), {});
1957 newObjChildrenObject = { ...newObjChildrenObject, ...childrenObjectNode }
1958 }
1959 })
1960
1961 newObjChildrenObject = { ...newObjChildrenObject, ...childrenObject }
1962 } else if (_.isArray(sampleBodiesBoth[field])) {
1963 dataArray.push(field)
1964 }
1965 })
1966 mapObj = { ...companyObj, ...newObj, ...mapObj, ...newObjChildrenObject }
1967 }
1968
1969 //other fields
1970 let otherFields = {};
1971 if (module === 'general_ledgers') {
1972 otherFields = {
1973 '{total_debit_origin}': initalValuesBoth && initalValuesBoth.debit_origin ? Function.formatPrice(initalValuesBoth.debit_origin) : '-',
1974 '{total_credit_origin}': initalValuesBoth && initalValuesBoth.credit_origin ? Function.formatPrice(initalValuesBoth.credit_origin) : '-',
1975 '{spelled_out_debit_origin}': initalValuesBoth && initalValuesBoth.debit_origin ? Function.currencyCalledWithDecimal(initalValuesBoth.debit_origin, this.props) : '-',
1976 '{spelled_out_credit_origin}': initalValuesBoth && initalValuesBoth.credit_origin ? Function.currencyCalledWithDecimal(initalValuesBoth.credit_origin, this.props) : '-',
1977 '{spelled_out_debit}': initalValuesBoth && initalValuesBoth.debit ? Function.currencyCalledWithDecimal(initalValuesBoth.debit, this.props) : '-',
1978 '{spelled_out_credit}': initalValuesBoth && initalValuesBoth.credit ? Function.currencyCalledWithDecimal(initalValuesBoth.credit, this.props) : '-',
1979 }
1980 } else if (module === 'manual_journals') {
1981 otherFields = {
1982 '{total_debit_origin}': `${Function.formatPrice(this.getTotalDebitOrigin())}`,
1983 '{total_credit_origin}': `${Function.formatPrice(this.getTotalCreditOrigin())}`,
1984 '{spelled_out_debit_origin}': this.getTotalDebitOrigin() ? Function.currencyCalledWithDecimal(this.getTotalDebitOrigin(), this.props) : '-',
1985 '{spelled_out_credit_origin}': this.getTotalCreditOrigin() ? Function.currencyCalledWithDecimal(this.getTotalCreditOrigin(), this.props) : '-',
1986 '{spelled_out_debit}': initalValuesBoth && initalValuesBoth.total_debit ? Function.currencyCalledWithDecimal(initalValuesBoth.total_debit, this.props) : '-',
1987 '{spelled_out_credit}': initalValuesBoth && initalValuesBoth.total_credit ? Function.currencyCalledWithDecimal(initalValuesBoth.total_credit, this.props) : '-',
1988 }
1989 } else if (module === 'cash_ins' || module === 'cash_outs' || module === 'paylable_payments' || module === 'receivable_payments') {
1990
1991 otherFields = {
1992 '{total_amount_origin}': initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount_origin ? Function.formatPrice(initalValuesBoth.cash.amount_origin) : '-',
1993 '{other_cost}': this.getOtherCost() ? Function.formatPrice(this.getOtherCost()) : '-',
1994 '{total_tax}': this.getTotalTax() ? Function.formatPrice(this.getTotalTax()) : '-',
1995 '{subtotal}': this.getSubtotal() ? Function.formatPrice(this.getSubtotal()) : '-',
1996 '{spelled_out_amount}': initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount ? Function.currencyCalledWithDecimal(initalValuesBoth.cash.amount, this.props) : '-',
1997 '{spelled_out_amount_origin}': initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount_origin ? Function.currencyCalledWithDecimal(initalValuesBoth.cash.amount_origin, this.props) : '-',
1998 }
1999 } else {
2000 otherFields = {
2001 '{other_cost}': this.getOtherCost() ? Function.formatPrice(this.getOtherCost()) : '-',
2002 '{total_tax}': this.getTotalTax() ? Function.formatPrice(this.getTotalTax()) : '-',
2003 '{subtotal}': this.getTotalAmount() ? Function.formatPrice(this.getTotalAmount()) : '-',
2004 '{spelled_out_amount}': initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount ? Function.currencyCalledWithDecimal(initalValuesBoth.cash.amount, this.props) : '-',
2005 '{spelled_out_amount_origin}': initalValuesBoth && initalValuesBoth.cash && initalValuesBoth.cash.amount_origin ? Function.currencyCalledWithDecimal(initalValuesBoth.cash.amount_origin, this.props) : '-',
2006 }
2007 }
2008
2009 let otherFieldsJournalVoucer = {}
2010 if (module === 'cash_ins' || module === 'cash_outs' || module === 'paylable_payments' || module === 'receivable_payments' || module === 'sales_invoices' || module === 'purchases_invoices' && withJournalVoucher) {
2011 otherFieldsJournalVoucer = {
2012 '{total_debit_journal_voucher}': Function.formatPrice(this.getTotalDebitJV()),
2013 '{total_credit_journal_voucher}': Function.formatPrice(this.getTotalCreditJV()),
2014 '{total_debit_origin_journal_voucher}': Function.formatPrice(this.getTotalDebitJVOrigin()),
2015 '{total_credit_origin_journal_voucher}': Function.formatPrice(this.getTotalCreditJVOrigin()),
2016 '{spelled_out_debit_origin_journal_voucher}': this.getTotalDebitJVOrigin() ? Function.currencyCalledWithDecimal(this.getTotalDebitJVOrigin(), this.props) : '-',
2017 '{spelled_out_credit_origin_journal_voucher}': this.getTotalCreditJVOrigin() ? Function.currencyCalledWithDecimal(this.getTotalCreditJVOrigin(), this.props) : '-',
2018 '{spelled_out_debit_journal_voucher}': this.getTotalDebitJV() ? Function.currencyCalledWithDecimal(this.getTotalDebitJV(), this.props) : '-',
2019 '{spelled_out_credit_journal_voucher}': this.getTotalCreditJV() ? Function.currencyCalledWithDecimal(this.getTotalCreditJV(), this.props) : '-',
2020 }
2021 }
2022 // other fields journal voucehr
2023 mapObj = { ...otherFields, ...mapObj, ...otherFieldsJournalVoucer }
2024
2025 // replace field in html to data
2026 let re = new RegExp(Object.keys(mapObj).join("|"), "gi");
2027 html = content.replace(re, function (matched) {
2028 return mapObj[matched];
2029 });
2030
2031 //replace data array
2032 dataArray.forEach(data => {
2033 if (html.includes(`<!--${data}-->`)) {
2034 let list = html.split(`<!--${data}-->`)[1];
2035 let arrayContent = html.split(`<!--${data}-->`);
2036 let newList = '';
2037 if (newInitialValues[data]) {
2038 newInitialValues[data].forEach((item, index) => {
2039 let newItem = { ...item }
2040 if (name == 'manual_journals') {
2041 newItem.debit = newItem.debit ? Function.formatPrice(newItem.debit) : '-';
2042 newItem.credit = newItem.credit ? Function.formatPrice(newItem.credit) : '-';
2043 newItem.debit_origin = newItem.debit_origin ? Function.formatPrice(newItem.debit_origin) : '-';
2044 newItem.credit_origin = newItem.credit_origin ? Function.formatPrice(newItem.credit_origin) : '-';
2045 newItem.debit_journal_voucher = newItem.debit_journal_voucher !== 0 ? Function.formatPrice(newItem.debit_journal_voucher) : '-';
2046 newItem.credit_journal_voucher = newItem.credit_journal_voucher !== 0 ? Function.formatPrice(newItem.credit_journal_voucher) : '-';
2047 newItem.debit_origin_journal_voucher = newItem.debit_origin_journal_voucher !== 0 ? Function.formatPrice(newItem.debit_origin_journal_voucher) : '-';
2048 newItem.credit_origin_journal_voucher = newItem.credit_origin_journal_voucher !== 0 ? Function.formatPrice(newItem.credit_origin_journal_voucher) : '-';
2049 newItem.exchange_rate_journal_voucher = newItem.exchange_rate_journal_voucher !== 0 ? Function.formatPrice(newItem.exchange_rate_journal_voucher) : '-';
2050 } else {
2051 newItem.debit_origin = newItem.debit_origin ? Function.formatPrice(newItem.debit_origin) : '-';
2052 newItem.credit_origin = newItem.credit_origin ? Function.formatPrice(newItem.credit_origin) : '-';
2053 newItem.debit = newItem.debit ? Function.formatPrice(newItem.debit) : '-';
2054 newItem.credit = newItem.credit ? Function.formatPrice(newItem.credit) : '-';
2055 newItem.amount_origin = newItem.amount_origin ? Function.formatPrice(newItem.amount_origin) : '-';
2056 newItem.amount = newItem.amount ? Function.formatPrice(newItem.amount) : '-';
2057 newItem.exchange_rate = newItem.exchange_rate ? Function.formatPrice(newItem.exchange_rate) : '-';
2058 newItem.unit_price = newItem.unit_price ? Function.formatPrice(newItem.unit_price) : '-';
2059 newItem.discount = {
2060 ...newItem.discount,
2061 rate: newItem.discount && newItem.discount.rate ? Function.formatPrice(newItem.discount && newItem.discount.rate) : '-',
2062 amount: newItem.discount && newItem.discount.amount ? Function.formatPrice(newItem.discount && newItem.discount.amount) : '-',
2063 amount_origin: newItem.discount && newItem.discount.amount_origin ? Function.formatPrice(newItem.discount && newItem.discount.amount_origin) : '-',
2064 }
2065 }
2066
2067 // rebuild note new line
2068 if (module === 'general_ledgers') {
2069 newItem.note = (newItem.note && newItem.note.description) ? newItem.note.description.replace(/\n/g, "<br />") : '-';
2070 } else {
2071 let note = typeof (item.note)
2072 newItem.note = item && item.note && note === 'string' ? newItem.note.replace(/\n/g, "<br />") : '-';
2073 }
2074
2075 let fields = Object.keys(sampleBodiesBoth[data][0]);
2076 let newObjString = {};
2077 let newObjChild = {};
2078
2079 fields.forEach(field => {
2080 if (_.isArray(sampleBodiesBoth[data][0][field])) {
2081 let childFieldArray = Object.keys(sampleBodiesBoth[data][0][field][0]);
2082 let childArray = childFieldArray.reduce((o, key) => ({ ...o, [`{${data == 'line_items' ? 'item' : data}.${field}.${key}}`]: newItem[field] && newItem[field][0] && newItem[field][0][key] ? newItem[field][0][key] : '-' }), {});
2083 newObjChild = { ...newObjChild, ...childArray }
2084 } else if (_.isObject(sampleBodiesBoth[data][0][field])) {
2085 let childField = Object.keys(sampleBodiesBoth[data][0][field]);
2086 let child = childField.reduce((o, key) => ({ ...o, [`{${data == 'line_items' ? 'item' : data}.${field}.${key}}`]: newItem[field] && newItem[field][key] ? newItem[field][key] : '-' }), {});
2087 newObjChild = { ...newObjChild, ...child }
2088 } else {
2089 newObjString = fields.reduce((o, key) => ({ ...o, [`{${data == 'line_items' ? 'item' : data}.${key}}`]: newItem[key] ? newItem[key] : '-' }), {});
2090 }
2091 });
2092 // other field
2093 let otherObj = {};
2094 if (module === 'manual_journals' || module === 'general_ledgers') {
2095
2096 } else {
2097 otherObj = {
2098 '{item.amount}': Function.formatPrice(this.getTotalProduct(index).total),
2099 }
2100 }
2101
2102 let newObj = { ...otherObj, ...newObjString, ...newObjChild }
2103
2104 let re = new RegExp(Object.keys(newObj).join("|"), "gi");
2105 let htmlList = list.replace(re, function (matched) {
2106 return newObj[matched];
2107 });
2108 newList = newList.concat(htmlList);
2109 });
2110 }
2111
2112 arrayContent[1] = newList;
2113 html = arrayContent.join(`<!--${data}-->`);
2114
2115 }
2116 })
2117
2118 }
2119
2120 // ===========setup si journal voucher===
2121 if (contentJV && initialValuesJV) {
2122 let mapObj = {}
2123 let dataArray = []
2124 let newInitialValues = {
2125 ...initialValuesJV,
2126 date: (initialValuesJV && initialValuesJV.date) ? moment(initialValuesJV.date).format('ll') : '-',
2127 time: (initialValuesJV && initialValuesJV.time) ? moment(initialValuesJV.time).format('LT') : '-',
2128 }
2129
2130
2131 // add data currency from company settings
2132 if (sampleBodiesJV && baseCurrency) {
2133 sampleBodiesJV = {
2134 ...sampleBodiesJV,
2135 company_currency: baseCurrency
2136 }
2137
2138 newInitialValues = {
2139 ...newInitialValues,
2140 company_currency: baseCurrency
2141 }
2142 }
2143
2144 if (sampleBodiesJV && initialValuesJV) {
2145 const fields = Object.keys(sampleBodiesJV);
2146 const newObj = fields.reduce((o, key) => ({ ...o, [`{${key}}`]: newInitialValues[key] ? newInitialValues[key] : '-' }), {});
2147 let newObjChildrenObject = {}
2148
2149 fields.forEach(field => {
2150
2151 if (_.isObject(sampleBodiesJV[field]) && !_.isArray(sampleBodiesJV[field])) {
2152 const fieldObject = Object.keys(sampleBodiesJV[field])
2153 let childrenObject = fieldObject.reduce((o, key) => ({ ...o, [`{${field}.${key}}`]: (newInitialValues[field] && newInitialValues[field][key]) ? newInitialValues[field][key] : '-' }), {});
2154
2155 fieldObject.forEach(node => {
2156 if (_.isObject(sampleBodiesJV[field][node])) {
2157 const fieldObjectNode = Object.keys(sampleBodiesJV[field][node])
2158 let childrenObjectNode = fieldObjectNode.reduce((o, key) => ({ ...o, [`{${field}.${node}.${key}}`]: (newInitialValues[field] && newInitialValues[field][node] && newInitialValues[field][node][key]) ? newInitialValues[field][node][key] : '-' }), {});
2159 newObjChildrenObject = { ...newObjChildrenObject, ...childrenObjectNode }
2160 }
2161 })
2162
2163 newObjChildrenObject = { ...newObjChildrenObject, ...childrenObject }
2164 } else if (_.isArray(sampleBodiesJV[field])) {
2165 dataArray.push(field)
2166 }
2167 })
2168 mapObj = { ...newObj, ...newObjChildrenObject }
2169 }
2170
2171 // other fields
2172 let otherFields = {
2173 '{total_debit}': Function.formatPrice(this.getTotalDebitJV()),
2174 '{total_credit}': Function.formatPrice(this.getTotalCreditJV()),
2175 '{total_debit_origin}': Function.formatPrice(this.getTotalDebitJVOrigin()),
2176 '{total_credit_origin}': Function.formatPrice(this.getTotalCreditJVOrigin()),
2177 '{spelled_out_debit_origin}': this.getTotalDebitJVOrigin() ? Function.currencyCalledWithDecimal(this.getTotalDebitJVOrigin(), this.props) : '-',
2178 '{spelled_out_credit_origin}': this.getTotalCreditJVOrigin() ? Function.currencyCalledWithDecimal(this.getTotalCreditJVOrigin(), this.props) : '-',
2179 '{spelled_out_debit}': this.getTotalDebitJV() ? Function.currencyCalledWithDecimal(this.getTotalDebitJV(), this.props) : '-',
2180 '{spelled_out_credit}': this.getTotalCreditJV() ? Function.currencyCalledWithDecimal(this.getTotalCreditJV(), this.props) : '-',
2181 }
2182
2183 mapObj = { ...mapObj, ...companyObj, ...otherFields }
2184 // replace field in html to data
2185 let re = new RegExp(Object.keys(mapObj).join("|"), "gi");
2186 htmlJV = contentJV && contentJV.replace(re, function (matched) {
2187 return mapObj[matched];
2188 });
2189
2190 // replace data array
2191 dataArray.forEach(data => {
2192 if (htmlJV.includes(`<!--${data}-->`)) {
2193 let list = htmlJV.split(`<!--${data}-->`)[1];
2194 let arrayContent = htmlJV.split(`<!--${data}-->`);
2195 let newList = '';
2196
2197 if (initialValuesJV[data]) {
2198 initialValuesJV[data].forEach((item, index) => {
2199 let newItem = { ...item }
2200 if (nameJV == 'manual_journals') {
2201 newItem.debit = newItem.debit !== 0 ? Function.formatPrice(newItem.debit) : '-';
2202 newItem.credit = newItem.credit !== 0 ? Function.formatPrice(newItem.credit) : '-';
2203 newItem.debit_origin = newItem.debit_origin !== 0 ? Function.formatPrice(newItem.debit_origin) : '-';
2204 newItem.credit_origin = newItem.credit_origin !== 0 ? Function.formatPrice(newItem.credit_origin) : '-';
2205 newItem.exchange_rate = newItem.exchange_rate !== 0 ? Function.formatPrice(newItem.exchange_rate) : '-';
2206 newItem.note = (newItem.note && newItem.note.description) ? newItem.note.description.replace(/\n/g, "<br />") : '-';
2207 }
2208 let fields = Object.keys(sampleBodiesJV[data][0]);
2209 let newObjString = {};
2210 let newObjChild = {};
2211
2212 fields.forEach(field => {
2213 if (_.isArray(sampleBodiesJV[data][0][field])) {
2214 let childFieldArray = Object.keys(sampleBodiesJV[data][0][field][0]);
2215 let childArray = childFieldArray.reduce((o, key) => ({ ...o, [`{${data == 'line_items' ? 'item' : data}.${field}.${key}}`]: newItem[field] && newItem[field][0] && newItem[field][0][key] ? newItem[field][0][key] : '-' }), {});
2216 newObjChild = { ...newObjChild, ...childArray }
2217 } else if (_.isObject(sampleBodiesJV[data][0][field])) {
2218 let childField = Object.keys(sampleBodiesJV[data][0][field]);
2219 let child = childField.reduce((o, key) => ({ ...o, [`{${data == 'line_items' ? 'item' : data}.${field}.${key}}`]: newItem[field] && newItem[field][key] ? newItem[field][key] : '-' }), {});
2220 newObjChild = { ...newObjChild, ...child }
2221 } else {
2222 newObjString = fields.reduce((o, key) => ({ ...o, [`{${data == 'line_items' ? 'item' : data}.${key}}`]: newItem[key] ? newItem[key] : '-' }), {});
2223 }
2224 });
2225
2226
2227
2228 let newObj = { ...newObjString, ...newObjChild }
2229
2230
2231 let re = new RegExp(Object.keys(newObj).join("|"), "gi");
2232 let htmlList = list && list.replace(re, function (matched) {
2233 return newObj[matched];
2234 });
2235 newList = newList.concat(htmlList);
2236 });
2237 }
2238
2239 arrayContent[1] = newList;
2240 htmlJV = arrayContent.join(`<!--${data}-->`);
2241 }
2242 })
2243
2244 }
2245
2246 // template html to jsx JV
2247 const createMarkupJV = () => {
2248 if (initialValuesJV) {
2249 return { __html: htmlJV };
2250 } else {
2251 return { __html: '' };
2252 }
2253 }
2254
2255 // find template default
2256 let idTemplateJVDefault = null
2257 const userSettingJV = user_settings_journal_voucher && user_settings_journal_voucher.queryResult && user_settings_journal_voucher.queryResult.data
2258 if (userSettingJV) {
2259 userSettingJV.forEach(data => {
2260 if (data.key == `default.template.form.journal_vouchers.id`) {
2261 idTemplateJVDefault = data.value
2262 }
2263 })
2264 }
2265
2266 const subjectJV = `${titleJV} ${numberJV} from ${company_name}`
2267 let textSplitJV = '';
2268 let textJV = ''
2269 if (this.props.withJournalVoucher) {
2270 textSplitJV = titleJV.split(" ") || '';
2271 textJV = textSplitJV[1] && textSplitJV[1].toLowerCase()
2272 }
2273
2274 // listener for print
2275 window.addEventListener("keydown", this.keysPressedJV, false);
2276 window.addEventListener("keyup", this.keysReleasedJV, false);
2277
2278 // set breadcrumb
2279 let breadcrumbsJVDetail = breadcrumbs
2280 let titleBreadcumbJV = titleJV
2281 ///====== close setup journal voucher
2282
2283 // template html to jsx
2284 const createMarkup = () => {
2285 if (initalValuesBoth) {
2286 return { __html: html };
2287 } else {
2288 return { __html: '' };
2289 }
2290 }
2291
2292
2293
2294 // set title breadcrumb
2295 let titleBreadcumb = '-'
2296 if (componentLedger || componentJournal || componentCashTransfers) {
2297 titleBreadcumb = department && department.name ? department.name : '-';
2298 } else {
2299 titleBreadcumb = peopleName && peopleName.name ? peopleName.name : '-'
2300 }
2301
2302 // set id template in default
2303 let idTemplateDefault = null
2304 const userSetting = user_settings && user_settings.queryResult && user_settings.queryResult.data
2305 if (userSetting) {
2306 userSetting.forEach(data => {
2307 if (data.key === `default.template.form.${module}.id`) {
2308 idTemplateDefault = data.value
2309 }
2310 })
2311 }
2312
2313 // subject for email
2314 const subject = `${title} ${number ? number : initalValuesBoth && initalValuesBoth.transaction && initalValuesBoth.transaction.number} from ${company_name}`
2315 const textSplit = title.split(" ")
2316 const nameEmail = peopleName ? peopleName.name || '' : ''
2317 let text = ''
2318 if (textSplit[1]) {
2319 text = textSplit[1].toLowerCase()
2320 } else {
2321 text = title.toLowerCase()
2322 }
2323
2324 // listener
2325 window.addEventListener("keydown", this.keysPressed, false)
2326 window.addEventListener("keyup", this.keysReleased, false)
2327
2328 // set breadcrumb
2329 let breadcrumbsDetail = breadcrumbs
2330 const parsedQueryString = queryString.parse(this.props.location.search);
2331 const { dashboard } = parsedQueryString;
2332 if (dashboard) {
2333 breadcrumbsDetail = [
2334 {
2335 pathname: '/',
2336 title: strings.dashboard
2337 }
2338 ]
2339 }
2340 if (dashboard) {
2341 breadcrumbsJVDetail = [
2342 {
2343 pathname: '/',
2344 title: strings.dashboard
2345 }
2346 ]
2347 }
2348
2349 return (
2350 <div className="scroll">
2351 {!initalValuesBoth ? <LinearProgress /> : null}
2352 <div className="page">
2353 <div className="page-content container-fluid container-fluid-custom">
2354 <div className="page-breadcrumb">
2355 <ol className="breadcrumb">
2356 {breadcrumbsDetail.map((breadcrumb) => (
2357 <li className="breadcrumb-item">
2358 <a href="#" onClick={(e) => this.handleBack(e, breadcrumb.pathname)}>{breadcrumb.title}</a>
2359 </li>
2360 ))}
2361 {title ? (
2362 <li className="breadcrumb-item active">
2363 <span>{titleBreadcumb}</span>
2364 </li>
2365 ) : null}
2366 </ol>
2367 </div>
2368 <div>
2369 <div className="row widget-row rwiget">
2370 <Grid container justify="center">
2371 <Grid item xs={12} sm={10}>
2372 <Grid sm={12} className="tmobile">
2373
2374 <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', marginTop: 5 }}>
2375 <div>
2376
2377 </div>
2378 <div>
2379 <div style={{ display: 'flex', position: 'relative', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
2380 { //show edit template
2381 template && listTemplate && listTemplate.length > 0 ?
2382 <div style={{ display: 'flex', marginRight: 10, flexWrap: 'wrap' }}>
2383 <div style={{ width: 250, marginTop: -25 }}>
2384 <Field
2385 name='dataTemplate'
2386 component={SelectOptionStatic}
2387 list={listTemplate}
2388 onChange={this.handleChangeTemplate}
2389 showDefault
2390 templateDefault={idTemplateDefault}
2391 />
2392 </div>
2393 {
2394 idTemplate == idTemplateDefault
2395 ?
2396 null
2397 :
2398 <Button onClick={() => this.handleSaveAsDefault(idTemplate)} style={{ marginLeft: 10, width: 'auto' }} variant="contained" color="secondary" size="medium">
2399 {strings.save_as_default}
2400 </Button>
2401 }
2402 <Button
2403 style={{ background: 'white', marginLeft: 10, }}
2404 className="button-icon"
2405 variant="outlined"
2406 size="medium"
2407 aria-haspopup="true"
2408 onClick={() => this.handleEditTemplate(idTemplate, titleBreadcumb, breadcrumbsDetail)}
2409 >
2410 <Create style={{ fontSize: 22, color: "#3c4550" }} />
2411 </Button>
2412 </div>
2413 : null
2414 }
2415
2416 <div className="filter-options">
2417 <Button
2418 id="export1"
2419 style={{ background: 'white' }}
2420 className="button-icon"
2421 variant="outlined"
2422 size="medium"
2423 aria-owns={this.state.anchorEl ? 'simple-menu' : undefined}
2424 aria-haspopup="true"
2425 onClick={this.handleClick}
2426 >
2427 <FontAwesomeIcon icon={iconShare} size="xs" style={{ width: 18, height: 18 }} color="#3c4550" />
2428 </Button>
2429 <Menu
2430 anchorEl={this.state.anchorEl}
2431 open={Boolean(this.state.anchorEl)}
2432 onClose={this.handleCloseSaveMore}
2433 anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
2434 transformOrigin={{ vertical: 'top', horizontal: 'right' }}
2435 classes={{ paper: 'position-popup-transaksi' }}
2436 >
2437 <MenuItem
2438 className="menu-item-custom-img"
2439 onClick={() => { this.handlePrint(html, `${title} ${number}`) }}
2440 >
2441 <FontAwesomeIcon icon={iconPrint} size="xs" style={{ width: 16, height: 16 }} color="#0078b0" />
2442 <Typography className="font-option-report" >{strings.print}</Typography>
2443 </MenuItem>
2444 <Divider />
2445
2446 <MenuItem
2447 className="menu-item-custom-img"
2448 onClick={() => this.handleExportPdf(html)}
2449 >
2450 <FontAwesomeIcon icon={iconPdf} size="xs" style={{ width: 16, height: 16 }} color="#c45353" />
2451 <Typography className="font-option-report" >Export To Pdf</Typography>
2452 </MenuItem>
2453 <Divider />
2454 {
2455 template &&
2456 <MenuItem
2457 className="menu-item-custom-img"
2458 onClick={() => this.handleSendToEmail(html, subject, company_email, company_name, text, nameEmail)}
2459 >
2460 <Mail size="xs" style={{ width: 16, height: 16, color: "#0078b0" }} />
2461 <Typography className="font-option-report" >{strings.send_to_email}</Typography>
2462 </MenuItem>
2463 }
2464
2465 {process.env.NODE_ENV == 'sandbox' || process.env.NODE_ENV == 'development' || process.env.NODE_ENV == 'production' ?
2466 <React.Fragment>
2467 <Divider />
2468 <MenuItem
2469 className="menu-item-custom-img"
2470 onClick={() => this.props.exportLinks(html)}
2471 >
2472 <FontAwesomeIcon icon={iconLink} size="xs" style={{ width: 16, height: 16 }} color="green" />
2473 <Typography className="font-option-report" >Export Link</Typography>
2474 </MenuItem>
2475
2476 </React.Fragment>
2477 : null
2478 }
2479 {/* <Divider />
2480 <MenuItem className="menu-item-custom-img">
2481 <FontAwesomeIcon icon={iconExcel} size="xs" style={{ width: 16, height: 16 }} color="#47bf84" />
2482 <Typography className="font-option-report" >Export To Excel</Typography>
2483 </MenuItem> */}
2484 {/* <Divider />
2485 <MenuItem className="menu-item-custom-img" onClick={ () => this.setState({ open: true }) }>
2486 <Settings size="xs" style={{ width: 16, height: 16 }} color="#47bf84" />
2487 <Typography className="font-option-report" >{strings.settings}</Typography>
2488 </MenuItem> */}
2489 </Menu>
2490 </div>
2491 {
2492 (module == "sales_invoices" || module == "purchases_invoices") && status == "approved" && paymentStatus !== "paid" ?
2493 <div className="filter-options">
2494 <Link to={`${this.props.pathnamePayment}?id=${id}&name=${peopleName ? peopleName.name : '-'}`}>
2495 <Button color="secondary" variant="contained" size="medium" style={{ marginLeft: 10 }}>
2496 <FontAwesomeIcon icon="plus" />
2497 <span className="label-button-new">{strings.add_payment}</span>
2498 </Button>
2499 </Link>
2500 </div>
2501 : null
2502 }
2503 </div>
2504 </div>
2505 </div>
2506
2507 {!componentLedger
2508 ?
2509 <div style={{ position: "relative", left: "45%", top: 10 }}>
2510 <div style={status == 'approved' && paymentStatus == null ? { position: "absolute", top: 8 } : { position: "absolute" }}>
2511 {fieldStatusDetailTransaction(status, paymentStatus)}
2512 </div>
2513 </div>
2514 : null}
2515
2516 <div style={{ marginTop: 10 }} className="panel-custom panel-custom-mobile" id="print-page">
2517
2518 {
2519 template ?
2520 <div dangerouslySetInnerHTML={createMarkup()} />
2521 :
2522 <div style={{ marginTop: 10 }}>
2523 <div className="panel-heading panel-heading-distance">
2524 <div className="data-item-2col" style={{ paddingTop: -10 }}>
2525 <Grid container style={{ height: 150 }}>
2526 <Grid
2527 item
2528 xs={12}
2529 md={6}
2530 className="invoice-box-flex padding-margin-none"
2531 >
2532 <Typography variant="headline" className="text-primary">
2533 {title}
2534 </Typography>
2535 </Grid>
2536 <Grid item xs={12} md={6} className="text-right text-primary invoice-box-flex padding-margin-none">
2537 <Grid container justify="space-around" direction="column">
2538 <Grid item>
2539 <Typography className="text-primary">{company_name}</Typography>
2540 <Typography>{company_address}</Typography>
2541 <Typography>{company_city}</Typography>
2542 <Typography>{company_postal_code}</Typography>
2543 {/* <Typography>{company_country_name}</Typography> */}
2544 <Typography>{company_email}</Typography>
2545 <Typography>{company_phone}</Typography>
2546 </Grid>
2547 </Grid>
2548 </Grid>
2549 </Grid>
2550 </div>
2551 </div>
2552
2553 <div className="panel-heading panel-heading-custom" />
2554
2555 <div className="panel-body panel-body-distance">
2556 <div className="row-custom panel-row-2-between customed-new-margin">
2557 <div className="rows">
2558 <div className="invoice-amount">
2559 {this.renderHeaderDetail()}
2560 </div>
2561
2562 <Grid item xs={12}>
2563 {this.renderLineItems()}
2564 </Grid>
2565 <Hidden smDown>
2566 <Grid container>
2567 <Grid item s={4} className="text-center box-tanda-tangan">
2568 {strings.created_by}
2569 <div className="boxed" />
2570 </Grid>
2571 <Grid item xs={4} className="text-center box-tanda-tangan">
2572 {strings.approved_by}
2573 <div className="boxed" />
2574 </Grid>
2575 <Grid item xs={4} className="text-center box-tanda-tangan">
2576 {strings.received_by_ttd}
2577 <div className="boxed" />
2578 </Grid>
2579 </Grid>
2580 </Hidden>
2581 </div>
2582 </div>
2583 </div>
2584 </div>
2585 }
2586 </div>
2587 </Grid>
2588 </Grid>
2589 </Grid>
2590 </div>
2591 </div>
2592 </div>
2593 </div>
2594 </div>
2595 );
2596 }
2597}
2598
2599DetailTransactionContent.propTypes = {
2600 template: PropTypes.bool,
2601 name: PropTypes.string,
2602};
2603
2604
2605export default DetailTransactionContent