src/QuickView.vue

   1 <!--
   2 ***********************************************************************
   3  * Title: PDosage
   4  * Description: Pediatric Dose Calculator
   5  * Author: Agnibho Mondal
   6  * Website: http://code.agnibho.com
   7  **********************************************************************
   8    Copyright (c) 2016 Agnibho Mondal
   9    All rights reserved
  10  **********************************************************************
  11    This file is part of PDosage.
  12
  13    PDosage is free software: you can redistribute it and/or modify
  14    it under the terms of the GNU General Public License as published by
  15    the Free Software Foundation, either version 3 of the License, or
  16    (at your option) any later version.
  17
  18    PDosage is distributed in the hope that it will be useful,
  19    but WITHOUT ANY WARRANTY; without even the implied warranty of
  20    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21    GNU General Public License for more details.
  22
  23    You should have received a copy of the GNU General Public License
  24    along with PDosage. If not, see <http://www.gnu.org/licenses/>.
  25 ***********************************************************************
  26 -->
  27 <template>
  28     <div class="panel panel-default">
  29         <drug-view :drug="drug" :patient="patient" :favs="favs" :id="modalId"></drug-view>
  30         <div class="panel-body">
  31             <template v-for="item in favList">
  32                 <template v-if="item">
  33                     <div class="panel panel-default clickable" v-on:click="launchModal(item)">
  34                         <div class="panel-heading">
  35                             <div class="panel-title">{{item.name}}</div>
  36                         </div>
  37                         <div class="panel-body">
  38                             <ul class="list-group">
  39                                 <template v-for="f in item.form">
  40                                     <template v-for="d in f.dose">
  41                                         <template v-if="f.gen && d.val[0]">
  42                                             <li class="list-group-item">{{f.mode}} {{item.name}} <strong>{{d.val[0]}}<span v-if="d.val[1]"> - {{d.val[1]}}</span> {{d.unit}}</strong> <span v-if="d.txt">{{d.txt}}</span><span v-else>per dose</span></li>
  43                                         </template>
  44                                     </template>
  45                                 </template>
  46                             </ul>
  47                         </div>
  48                     </div>
  49                 </template>
  50             </template>
  51         </div>
  52     </div>
  53 </template>
  54
  55 <script>
  56  import DrugView from "./DrugView.vue";
  57  export default {
  58      name: "QuickView",
  59      props: ["patient", "dosage", "favs"],
  60      components: {"drug-view": DrugView},
  61      data:function(){
  62          return {
  63              favList: "[]",
  64              drug: "{}",
  65              modalId: "drug-view-1"
  66          }
  67      },
  68      computed: {
  69          favList:function(){
  70              var arr=[];
  71              for(var i=0; i<this.favs.length; i++){
  72                  arr.push(this.dosage.getDrug(this.favs[i], this.patient));
  73              }
  74              return arr;
  75          }
  76      },
  77      methods: {
  78          launchModal:function(d){
  79              this.drug=d;
  80              $("#"+this.modalId).modal("show");
  81          }
  82      }
  83  }
  84 </script>