src/ListView.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             <form>
  32                 <input type="text" class="form-control" placeholder="Filter drugs by name" v-model="filter">
  33             </form>
  34         </div>
  35         <div class="list-group">
  36             <template v-for="item in bigList">
  37                 <button type="button" class="list-group-item" v-on:click="launchModal(item)">{{item}}</button>
  38             </template>
  39         </div>
  40     </div>
  41 </template>
  42
  43 <script>
  44  import DrugView from "./DrugView.vue";
  45  export default {
  46      name: "ListView",
  47      props: ["patient", "dosage", "favs"],
  48      components: {"drug-view": DrugView},
  49      data:function(){
  50          return{
  51              filter: "",
  52              drug: {},
  53              modalId: "drug-view-2"
  54          }
  55      },
  56      computed:{
  57          bigList:function(){
  58              return this.dosage.listDrugs().filter(function(val){
  59                  if(val.toLowerCase().indexOf(this.toLowerCase())!=-1){
  60                      return true;
  61                  }
  62                  else{
  63                      return false;
  64                  }
  65              }, this.filter);
  66          }
  67      },
  68      methods: {
  69          launchModal:function(d){
  70              this.drug=this.dosage.getDrug(d, this.patient);
  71              $("#drug-view-2").modal("show");
  72          }
  73      }
  74  }
  75 </script>