Advertisement
Guest User

Untitled

a guest
Feb 25th, 2018
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.  
  3. <div class="table_list__row__info row" :class="{ 'curosor-pointer': item.DETAIL_ID != null }">
  4.  
  5.     <div class="col-12 col-md-3 col hidden-sm-down">
  6.         <div class="row">
  7.            
  8.             <div class="table-list__col col table-list__col--date" style="text-align: left; padding-left: 30px">
  9.                 <!--
  10.                 <p>
  11.                     <span>{{item.DATADOK_DATE.getDate() }}</span>
  12.                     <span>{{item.DATADOK_DATE.getMonth() | monthName }}</span>
  13.                     <small>{{item.DATADOK_DATE.getFullYear() }}</small>
  14.                 </p>
  15.                 -->
  16.                 <p><strong>{{item.DATVAL}}</strong></p>  
  17.                 <p>{{item.DATDOK}}</p>  
  18.                 <p ><small style="max-width: 65%; display: block;">{{item.FORMAT_TEXT}}</small></p>
  19.  
  20.             </div>
  21.            
  22.             <!--
  23.             <div class="table-list__col col table-list__col--date table-list__col--date--fix">
  24.                 <p>
  25.                     <strong>{{item.DATAVAL_DATE.getDate()}}</strong>
  26.                     <strong>{{item.DATAVAL_DATE.getMonth() | monthName}}</strong>
  27.                     <small>{{item.DATAVAL_DATE.getFullYear()}}</small>
  28.                 </p>
  29.             </div>
  30.             -->
  31.         </div>
  32.     </div>
  33.    
  34.     <!--
  35.     <div class="col  col-md-2">
  36.         <div class="row">
  37.            /*
  38.             <div class="table-list__col col table-list__col--date hidden-lg-down">
  39.                 <p>
  40.                     <span>{{item.DATADOK_DATE.getDate() }}</span>
  41.                     <span>{{item.DATADOK_DATE.getMonth() | monthName }}</span>
  42.                     <small>{{item.DATADOK_DATE.getFullYear() }}</small>
  43.                 </p>
  44.             </div>
  45.             */
  46.  
  47.             <div class="table-list__col col table-list__col--date table-list__col--date--fix">
  48.                 <p>
  49.                     <strong>{{item.DATAVAL_DATE.getDate()}}</strong>
  50.                     <strong>{{item.DATAVAL_DATE.getMonth() | monthName}}</strong>
  51.                     <small>{{item.DATAVAL_DATE.getFullYear()}}</small>
  52.                 </p>
  53.             </div>
  54.         </div>
  55.     </div>
  56.     -->
  57.  
  58.     <div class="col-12 col-md-5 col">
  59.         <div class="table-list__col table-list__col--desc">
  60.             <div>
  61.                 <p>
  62.                     <strong>{{item.DUGNAZ}}</strong>
  63.                     <small class="color-small">{{item.DUGIBN}}</small>
  64.                     <small class="color-small" v-if="item.MODEL1 && item.POZBR1">HR{{ item.MODEL1 || "" }} {{ item.POZBR1 || "" }}</small>
  65.                     <small class="color-small" v-else>---</small>
  66.                     <small>{{item.OPISNO}}</small>
  67.                 </p>
  68.                 <p v-if="item.POTIBN">
  69.                     <small>{{fromAccountLabel}} {{item.POTIBN}}</small>  
  70.                     <!--    <small>{{item.FORMAT_TEXT }}</small> -->
  71.                 </p>
  72.             </div>
  73.  
  74.         </div>
  75.     </div>
  76.  
  77.  
  78.     <div class="col-12 col-md-4 col col-md-down-no-rev">
  79.         <div class="table-list__col table-list__col--value text-right" v-bind:class="{ 'table-list__col--cbox': hasCheckbox && !signPaymentOverview }">
  80.             <p v-if="item.FORMAT != 465">{{item.POTRAZ}} {{item.AKRPOT }}</p>
  81.             <p v-if="item.FORMAT == 465">{{item.DUGUJE }} {{item.AKRDUG }} <small>{{item.POTRAZ}} {{item.AKRPOT }}</small></p>
  82.  
  83.             <div class="ui-checkbox id-sign-now" v-if="hasCheckbox && isSelectedOnSignActive">
  84.                 <input type="checkbox" v-bind:disabled="itemDisabled || signStatus == true" v-bind:unchecked="item.checked || itemDisabled" v-model="item.checked" :key="item.DETAIL_ID">
  85.                 <span class="ui-checkbox__handle"></span>
  86.             </div>                            
  87.  
  88.             <div class="table-list__col__icons" v-if="!signPaymentOverview">
  89.                 <div class="tooltip tooltip--inline-block">
  90.                     <span class="tooltip__content tooltip__content--pos-right">{{labels.lblTooltipSendEmail}}</span>
  91.                     <a href="#" v-if="orderStatus == 3"  @click.prevent="sendEmail"><svg ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-send-receipt"></use></svg></a>
  92.                 </div>
  93.                 <div class="tooltip tooltip--inline-block">
  94.                     <span class="tooltip__content tooltip__content--pos-right">{{labels.lblTooltipDownloadPDF}}</span>
  95.                     <a href="#" @click.prevent="downloadPdf"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-download-pdf"></use></svg></a>
  96.                 </div>
  97.                 <div class="tooltip tooltip--inline-block">
  98.                     <span class="tooltip__content tooltip__content--pos-right">{{labels.lblTooltipSepaDetails}}</span>
  99.                     <a href="#" v-if="item.PAIN_ID" @click.prevent="painLink"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sepa"></use></svg></a>
  100.                 </div>
  101.             </div>
  102.         </div>
  103.     </div>
  104.  
  105.     <div class="col-12 col adf" v-if="item.PORUKA != ''" data-bak-show="hasCheckbox || signPaymentOverview" style="padding-top: 14px">
  106.         <div class="table-list__col table-list__col--additional" :class="{'table-list__col--nopad': signPaymentOverview == true }">
  107.             <p>
  108.                 <svg>
  109.                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
  110.                 </svg>
  111.                 {{item.PORUKA}}
  112.                 <span  v-if="signPaymentOverview" class="badge-txt badge-txt--success" v-bind:class="'badge-txt--status-' + item.STATUS">{{ item.STATUS_TEXT }}</span>
  113.             </p>
  114.         </div>
  115.     </div>
  116.  
  117. </div>                                
  118.  
  119. </template>
  120.  
  121.  
  122. <script>
  123.   import { shortMonths } from '../../helpers/months';
  124.   import defFilters from '../../dashboard-app/mixins/table-list-info'
  125.   import EventBus from '../event-bus';
  126.  
  127.   export default {
  128.  
  129.   mixins: [defFilters],
  130.   props: [ 'item', 'labels', 'orderStatus', 'signStatus', 'signPaymentOverview', 'dozrad' ],
  131.  
  132.   created() {
  133.  
  134.  
  135.         this.fromAccountLabel = window.global.lang == 'hr' ? 'S računa' : 'From Account';
  136.         /*
  137.  
  138.         --- OLD Logic
  139.  
  140.         let r = (this.item.STATUS == 1 || this.itemDisabled) ? true : false;
  141.         this.$set(this.item, 'checked', r);
  142.  
  143.         if( this.itemDisabled ) {
  144.             this.$set(this.item, 'disabled', true);
  145.         } else {
  146.             this.$set(this.item, 'disabled', false);
  147.         }
  148.  
  149.         */
  150.  
  151.         let item = this.item;
  152.         if( this.dozrad != 1 )  {
  153.  
  154.             if( item.SUMAUT == 6 ) {
  155.  
  156.                 this.$set(item, 'checked', false);
  157.                 this.$set(item, 'disabled', true);
  158.  
  159.             } else if( item.SUMAUT == 7 ) {
  160.  
  161.                  
  162.                 this.$set(item, 'checked', false);
  163.                 this.$set(item, 'disabled', true);
  164.  
  165.             } else if( item.SUMAUT == 8 ) {
  166.                
  167.                 this.$set(item, 'checked', false);
  168.                 this.$set(item, 'disabled', true);
  169.  
  170.             } else {
  171.                 this.$set(item, 'checked', false);
  172.                 this.$set(item, 'disabled', false);
  173.             }
  174.  
  175.         } else {
  176.             // no checkbox
  177.         }
  178.  
  179.  
  180.   },
  181.  
  182.   methods: {
  183.  
  184.     sendEmail() {
  185.         this.$emit( 'sendEmail' );
  186.     },
  187.  
  188.     downloadPdf() {
  189.         EventBus.$emit( 'downloadPdf', this.item );
  190.     },
  191.  
  192.     painLink() {
  193.  
  194.         let painIDSplit = this.item.PAIN_ID.split("#");
  195.         //console.log( 'painID', painID[4] );
  196.  
  197.         let painID = painIDSplit[4];
  198.  
  199.         if( painID ) {
  200.  
  201.             EventBus.$emit('getDetailsSepa', { painID } );
  202.  
  203.         } else {
  204.  
  205.             alert('Cannot get details with current setup');
  206.            
  207.         }
  208.  
  209.         /*
  210.  
  211.         getPain001Details(string pain001Id)
  212.         PaymentOrders.asmx
  213.  
  214.         Session["P01_ID"] = IDKontrole[4];
  215.         string[] IDKontrole = eventTargetArgument.ToString().Split('#');
  216.         else if (eventTarget == "PAIN_001")
  217.  
  218.         */
  219.  
  220.       //  __doPostBack('PAIN_001', this.item.PAIN_ID)
  221.         return;
  222.     }
  223.  
  224.   },
  225.  
  226.   computed: {
  227.  
  228.     hasCheckbox() {
  229.         return this.orderStatus ==  0 && this.dozrad != 1
  230.     },
  231.  
  232.     itemDisabled() {
  233.         /*
  234.         const STATUS = parseInt(this.item.STATUS);
  235.         const SUMAUT = parseInt(this.item.SUMAUT);
  236.         */
  237.         return this.item.disabled;
  238.       //  return (STATUS + SUMAUT) > 0;
  239.     },
  240.  
  241.     isSelectedOnSignActive() {
  242.         if( this.signStatus ) {
  243.             return this.item.checked == true && this.item.disabled == false;
  244.         } else {
  245.             return true;
  246.         }
  247.     }
  248.  
  249.     },
  250.  
  251.     filters: {
  252.              monthName(month) {
  253.                 let monthName = shortMonths[month];
  254.                 let currentLang = window.global.lang;
  255.                 return monthName[currentLang];
  256.             },
  257.  
  258.             descFormat(value) {
  259.                 let hasIndex = value.indexOf(",");
  260.                 if( hasIndex == -1 ) {
  261.                     return `<strong>${value}</strong>`;
  262.                 } else {
  263.  
  264.                     let strongString = value.slice( 0, hasIndex );
  265.                     let spanString = value.slice( hasIndex + 1 );
  266.  
  267.                     return `
  268.                         <strong>${strongString}</strong>
  269.                         <small>${spanString}</small>
  270.                     `;
  271.  
  272.                 }
  273.             }
  274.         }
  275.     }
  276. </script>
  277.  
  278.  
  279. <style scoped>
  280.     .table-list__col--date p,
  281.     .table-list__col--date p strong {
  282.         font-size: 16px !important;
  283.         color: #445C75;
  284.         text-align: left;
  285.     }
  286.  
  287.     .table-list__col--date p {
  288.         margin-bottom: 2px;
  289.     }
  290.  
  291.     .table-list__col--date p small {
  292.         color: #94a8b6;
  293.         line-height: 1.2;
  294.     }
  295.  
  296.     .color-small {
  297.         color: #445c75 !important;
  298.         /*#94a8b6*/
  299.         margin-bottom: 2px;
  300.     }
  301.    
  302. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement