LandingPage.vue

<template>
    <div id="page-content-wrapper" class="main">
        <h2>Project Summary</h2>
        <p>
            <b>
            Add your project summary information here.
            </b>
            <br/>
            <br/>
            Please search for your proteins of interest!
        </p>

        <form class="form-horizontal" onSubmit="return false;">
            <div class="form-group">
                <label class="control-label col-sm-2" for="species">Species</label>
                <div class="col-sm-4">
                    <fetch-species>
                        <template slot-scope="{response, loading}">
                            <div v-if="loading">Loading...</div>
                            <div v-else>
                                <select class="form-control input-sm" id="species" v-model="species">
                                    <option v-for="item in response.data" :key="item.tax_id">
                                        {{item._id}} ({{item.tax_id}})</option>
                                </select>
                            </div>
                        </template>
                    </fetch-species>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="keyword">Search</label>
                <div class="col-sm-4">
                    <input class="form-control input-sm" id="keyword" v-model="keyword" type="text" placeholder="Protein or GO term name: "/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2"></label>
                <div class="col-sm-4 input-sm">
                    <input class="radio-inline" type="radio" v-model="pick" value="protein" id="protein"> <label class="radio-label" for="protein">Protein</label>
                    <input class="radio-inline" type="radio" v-model="pick" value="condensate" id="condensate"> <label class="radio-label" for="condensate">Condensate</label>
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-primary mb-2" type="submit" @click="searchWithKeyword">Search</button>
                </div>
            </div>
        </form>

        <!--<div>{{require('lodash').map(this.$store.getters['Param/proteinList'], d => d.proteinName)}}</div>-->
        <!--<tags-input v-model="proteinNameList"/>-->
        <!--<div>-->
            <!--<router-link to="/endo2" tag="button">Overview</router-link>-->
            <!--<router-link to="/pheno_profile" tag="button">Phenotype Profiles</router-link>-->
        <!--</div>-->

            <Search ref="search" >
                <template v-if="searchKeyword !== ''" slot-scope="{response, loading}">
                    <div v-if="loading">Loading...</div>
                    <div v-else>
                        <data-table id='dataTable' :category="pick" :data='response.data' :keyword='keyword'/>
                    </div>
                </template>
            </Search>

        <div style="float: left">
        <h3>Reference</h3>
        <p>
            New publication authors will be provided.
            <strong>New publication title will be provided.</strong> Journal Name: ***-***.<br>
            <a href="http://www.ncbi.nlm.nih.gov/pubmed/[id]">[PubMed]</a>
        </p>
        </div>
    </div>
</template>

<script>
  import Search from '@/components/Search.vue'
  import DataTable from '@/components/DataTable.vue'
  import FetchSpecies from '@/components/DDCODE/fetchSpecies.vue'
  const _ = require('lodash')

  export default {
    name: 'LandingPage',
    components: {
      Search, FetchSpecies, DataTable
    },
    props: {
      msg: String
    },
    data() {
      return {
        keyword: 'fus human',
        species: 'Homo sapiens (9606)',
        searchKeyword: '',
        pick: 'protein'
      }
    },
    computed: {
      proteinNameList: {
        get() {
          return _.map(this.proteinList, d => { return {text: d.proteinName}; })
        },
        set(obj) {
          const idx = this.proteinList.findIndex(d => d.proteinName === obj.tag.text)
          this.$store.dispatch('Param/removeProtein', idx);
          obj.deleteTag()
          // console.log(this.$store.getters['Param/proteinList'])
        }
      },
    },
    methods: {
      searchWithKeyword() {
        const vm = this

        const host = require('./js/const').host
        // console.log(/\((\d+)\)$/gm.exec(vm.species))
        const taxId = /\((\d+)\)$/gm.exec(vm.species)[1]
        const page = 1;
        console.log(`http://${host}/proteins?query=${vm.keyword}&species_tax_id=${taxId}&page=${page}`)
        vm.searchKeyword = vm.keyword
        // console.log(vm.pick)

        if(vm.pick === 'protein') {
          vm.$refs.search.fetchProteinList(vm.keyword)
        } else if(vm.pick === 'condensate') {
          vm.$refs.search.fetchCondensateList(vm.keyword)
        }
        // /* eslint-disable no-console */
        // console.log(this.searchKeyword)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    @import url('~@/assets/bootstrap.css');
    @import url('~@/assets/datatable.css');

    .main {
        margin: 1.5rem;
    }

    h3 {
        margin: 40px 0 0;
    }

    a {
        color: #42b983;
    }

    input[type="radio"] {
        margin: 2px;
    }

    .radio-label {
        margin-left: 0px;
        margin-right: 5px;
    }
</style>