Archive.vue 47 KB
Newer Older
1
<template>
2
  <div class="archive-container">
3
      <div class="panel nav"><NavBar/></div>
4 5 6 7 8
      <div class="browse-data-container">
          <Row class="search-row">
              <Card>
                <p slot="title">Search</p>
                <div class="search-container">
shabai517's avatar
shabai517 committed
9
                    <div class="search-input">
shabai517's avatar
shabai517 committed
10 11 12 13
                       
                        <div class="search-input-wrapper">
                            <div class="fake-input">
                              <div class="tag-wrapper">
shabai517's avatar
shabai517 committed
14
                                  <Tag class="tag-in-search-input" v-for="(item,index) in tagArray" :key="index" closable @on-close="tagDelete">{{item}}</Tag>
shabai517's avatar
shabai517 committed
15 16 17 18 19 20 21 22 23 24
                                  <Select
                                      ref="searchRef"
                                      v-model="selectTemp"
                                      filterable
                                      remote
                                      placeholder="input here"
                                      :remote-method="searchInputChange"
                                      :loading="searchInputLoading"
                                      @on-open-change="searchInputLoadingDropdownOpen"
                                      style="width:500px">
shabai517's avatar
shabai517 committed
25
                                      <Option v-for="(item, index) in autoCompleteArray" :value="item" :key="index">{{item}}</Option>
shabai517's avatar
shabai517 committed
26 27 28 29 30 31 32
                                  </Select>
                                  <!--<Input class="tag-input" v-model="keyword" placeholder="input here" style="width: 500px;"></Input>-->
                              </div>
                              <Icon type="ios-search"></Icon>
                            </div>
                        </div>
                        <!--
shabai517's avatar
shabai517 committed
33 34 35
                        <AutoComplete
                            class="archive-search-input"
                            v-model="keyword"
shabai517's avatar
shabai517 committed
36
                            @on-search="keywordSearch"
shabai517's avatar
shabai517 committed
37
 
shabai517's avatar
shabai517 committed
38 39 40 41 42 43
                            icon="ios-search"
                            :filter-method="autoCompleteFilter"
                            placeholder="input here"
                            style="width: 100%" 
                            size="large">
                        </AutoComplete>
shabai517's avatar
shabai517 committed
44
                      -->
shabai517's avatar
shabai517 committed
45 46 47 48
                    </div>
                    <div class="search-filter">
                        <div class="filter-wrapper">
                            <div class="filter-condition">
shabai517's avatar
shabai517 committed
49
                                <Select ref="fieldRef" class="filter-selector" v-model="fieldValue" style="width:200px" @on-change="fieldChange">
50
                                    <Option v-for="item in fieldSelectors" :value="item.value" :label="item.label" :key="item.value" >
shabai517's avatar
shabai517 committed
51 52 53
                                            <span>{{ item.label }}</span>
                                            <span style="float:right;color:#ccc">{{item.number}}</span>
                                    </Option>
shabai517's avatar
shabai517 committed
54 55
                                </Select>
                            </div>
shabai517's avatar
shabai517 committed
56
                            <span class="separator">></span>
shabai517's avatar
shabai517 committed
57
                            <div class="filter-condition ">
58 59
                                <Select ref="containRef" class="filter-selector input-search-needed" v-model="containValue" style="min-width:200px" size="small" filterable remote :remote-method="querySpecificFacets" :loading="querySpecificFacetsLoading" @on-change="containChange" loading-text="loading..." @on-open-change="containDropdownOpen" @on-query-change="queryChange">
                                    <Option v-for="item in containSelectors" :value="item.value" :label="item.label" :key="item.value">
shabai517's avatar
shabai517 committed
60
                                      <span>
shabai517's avatar
shabai517 committed
61
                                            <span>{{ item.label }}</span>
shabai517's avatar
shabai517 committed
62
                                            <span style="color:#ccc"><span v-if="item.number">(</span>{{item.number}}<span v-if="item.number">)</span></span>
shabai517's avatar
shabai517 committed
63
                                      </span>
shabai517's avatar
shabai517 committed
64
                                    </Option>
shabai517's avatar
shabai517 committed
65 66 67
                                </Select>
                            </div>
                        </div>
shabai517's avatar
shabai517 committed
68 69

                        <div class="search-button">
shabai517's avatar
shabai517 committed
70
                            <a class="button search-button" @click="submitSearch">Search</a>
shabai517's avatar
shabai517 committed
71 72
                        </div>
                    </div>
shabai517's avatar
shabai517 committed
73
                    <div class="search-condition-container">
shabai517's avatar
shabai517 committed
74
                      <div class="tag-container">
shabai517's avatar
shabai517 committed
75
                          <Tag type="border" v-for="(item,index) in tagArray" :key="index" closable @on-close="tagDelete">{{item}}</Tag>
76
                      </div>
shabai517's avatar
shabai517 committed
77
                    </div>
shabai517's avatar
shabai517 committed
78
                    <div v-for="(item, index) in filterCombination" class="search-condition-container">
shabai517's avatar
shabai517 committed
79
                      <div class="tag-container">
shabai517's avatar
shabai517 committed
80 81 82
                          <Tag type="border" closable @on-close="conditionDelete(index,item)">
                            <Dropdown>
                                <a class="dropdown-action" href="javascript:void(0)">
shabai517's avatar
shabai517 committed
83
                                    {{item.condition}}
shabai517's avatar
shabai517 committed
84 85 86
                                    <Icon type="arrow-down-b"></Icon>
                                </a>
                                <DropdownMenu slot="list">
shabai517's avatar
shabai517 committed
87 88 89
                                    <DropdownItem @click.native="conditionChange(index,'And')">And</DropdownItem>
                                    <DropdownItem @click.native="conditionChange(index,'Not')">Not</DropdownItem>
                                    <DropdownItem @click.native="conditionChange(index,'Or')">Or</DropdownItem>
shabai517's avatar
shabai517 committed
90 91
                                </DropdownMenu>
                            </Dropdown>
shabai517's avatar
shabai517 committed
92
                            <span class="search-condition">{{item.field}} > {{item.contains}} </span>
shabai517's avatar
shabai517 committed
93
                          </Tag>
94
                      </div>
shabai517's avatar
shabai517 committed
95
                    </div>
96 97 98 99 100
                </div>
              </Card>
          </Row>
          <Row>
              <Card>
shabai517's avatar
shabai517 committed
101 102
                  <p slot="title" class="resource-list-title-container">
                    <span>Resources List</span>
103
                    <!--new api has no sort function
shabai517's avatar
shabai517 committed
104
                    <span>
shabai517's avatar
shabai517 committed
105 106
                        <span>Sort by: </span>
                        <div class="sortOption">
shabai517's avatar
shabai517 committed
107
                            <Select v-model="sortType" size="small" style="width:95px" @on-change="sortChange">
shabai517's avatar
shabai517 committed
108 109 110
                                <Option v-for="item in sortList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </div>
shabai517's avatar
shabai517 committed
111
                    </span>
112
                    -->
shabai517's avatar
shabai517 committed
113
                  </p>
shabai517's avatar
shabai517 committed
114 115
                  <Spin size="large" fix v-if="loading"></Spin>
                  <Card v-for="publicationItem in publicaitionList" class="resource-item" v-bind:key = "publicationItem.accession">
shabai517's avatar
shabai517 committed
116 117 118 119
                      <router-link class="resource-id" :to="{name:'dataset',  params: { id: publicationItem.accession}}"><text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{publicationItem.accession}}</text-highlight></router-link><span v-if="publicationItem.submissionType == 'COMPLETE'"><Icon type="checkmark-round"></Icon></span> 
                      <p class="resource-title"><text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{publicationItem.title}}</text-highlight></p> 
                      <p><span class="project-info">{{projectItemsSpecies}}: </span> <span v-for="item in publicationItem.species"><text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{item}}</text-highlight></span></p>
                      <span><span class="project-info">{{projectItemsProjectDescription}}: </span><text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{publicationItem.projectDescription}}</text-highlight>
120 121 122
                        <a @click="gotoDetails(publicationItem.accession)">(More)</a>
                        <!--<read-more class="readMore" more-str="(More)" :text="publicationItem.projectDescription" link="#" less-str="Less" :max-chars="200"></read-more>-->
                      </span>
shabai517's avatar
shabai517 committed
123
                      <p><span class="project-info">{{projectItemsPublicationDate}}: </span><text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{publicationItem.publicationDate}}</text-highlight></p>
shabai517's avatar
shabai517 committed
124
                      <Dropdown class="dataset-wrapper" v-for="(datesetItem, index) in publicationItem.projectTags" :key="index">
125 126
                          <a v-if="datesetItem == 'Biological'" class="button biological-dataset-button" href="javascript:void(0)">
                             <Icon type="ios-pricetag"></Icon>
shabai517's avatar
shabai517 committed
127
                              <text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{datesetItem}}</text-highlight> Dataset
128
                          </a>
129 130
                          <a v-else-if="datesetItem == 'Biomedical'" class="button biomedical-dataset-button" href="javascript:void(0)">
                             <Icon type="ios-pricetag"></Icon>
shabai517's avatar
shabai517 committed
131
                              <text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{datesetItem}}</text-highlight> Dataset Dataset
132 133 134
                          </a>
                          <a v-else-if="datesetItem == 'Highlighted'" class="button highlighted-dataset-button" href="javascript:void(0)">
                             <Icon type="ios-pricetag"></Icon>
shabai517's avatar
shabai517 committed
135
                              <text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{datesetItem}}</text-highlight> Dataset Dataset
136
                          </a>
shabai517's avatar
shabai517 committed
137 138
                          <a v-else-if="datesetItem == 'Technical'" class="button technical-dataset-button" href="javascript:void(0)">
                             <Icon type="ios-pricetag"></Icon>
shabai517's avatar
shabai517 committed
139
                              <text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{datesetItem}}</text-highlight> Dataset Dataset
shabai517's avatar
shabai517 committed
140
                          </a>
141
                          <a v-else class="button gray-dataset-button" href="javascript:void(0)">
shabai517's avatar
shabai517 committed
142
                             <Icon type="ios-pricetag"></Icon>
shabai517's avatar
shabai517 committed
143
                              <text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{datesetItem}}</text-highlight> Dataset Dataset
shabai517's avatar
shabai517 committed
144 145
                          </a>
                          <DropdownMenu slot="list">
shabai517's avatar
shabai517 committed
146
                              <DropdownItem>{{datesetItem}} Dataset</DropdownItem>
shabai517's avatar
shabai517 committed
147 148
                          </DropdownMenu>
                      </Dropdown>
149 150
                      <Collapse v-if="hightlightMode">
                          <Panel>
shabai517's avatar
shabai517 committed
151 152 153 154 155
                              <span>Matched Items</span>
                              <p class="matched-items" v-for="highlightItem in publicationItem.hightlightItemArray" slot="content">
                                  <span class="project-info">{{highlightItem.name}}: </span>
                                 <text-highlight :queries="highlightKeyword" :caseSensitive="HighlightKeywordSensitive">{{highlightItem.content}}</text-highlight>
                              </p>
156 157
                          </Panel>
                      </Collapse>
shabai517's avatar
shabai517 committed
158
                  </Card>
159 160
                  
                  <div class="page-container">
shabai517's avatar
shabai517 committed
161
                    <Page :total="total" :page-size="pageSize" :current="currentPage" size="small" show-sizer show-total class-name="page" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
162 163 164 165
                  </div>
              </Card>
          </Row>
      </div>
166 167 168 169
  </div>
</template>

<script>
170
  import NavBar from '@/components/archive/Nav'
shabai517's avatar
shabai517 committed
171
  import store from "@/store/store.js"
shabai517's avatar
shabai517 committed
172
  var paramsFromLandingPage='';
173 174 175 176
  export default {
    name: 'archive',
    data(){
      return {
shabai517's avatar
shabai517 committed
177
          keyword:'',
shabai517's avatar
shabai517 committed
178 179
          selectTemp:'',
          searchInputLoading:false,
shabai517's avatar
shabai517 committed
180
          fieldValue:'',
181
          containValue:'',
shabai517's avatar
shabai517 committed
182
          loading:true,
183 184 185
          querySpecificFacetsLoading:false,
          highlightKeyword:'',
          HighlightKeywordSensitive:false,
shabai517's avatar
shabai517 committed
186 187 188 189 190
          facetsURL: this.$store.state.baseApiURL + '/facet/projects',
          searchConfigURL: this.$store.state.baseURL + '/static/config/facets/config.json', 
          projectItemsConfigURL: this.$store.state.baseURL + '/static/config/projectItems/config.json',
          queryArchiveProjectListApi: this.$store.state.baseApiURL + '/search/projects',
          autoCompleteApi: this.$store.state.baseApiURL + '/search/autocomplete?keyword=',
shabai517's avatar
shabai517 committed
191
          containItemSearch:'',
shabai517's avatar
shabai517 committed
192
          fieldSelectors:[],
shabai517's avatar
shabai517 committed
193
          currentPage:1,
194 195 196 197 198 199 200
          containSelectors:[{ //Need to be initial value to make sure "No match data" hint will not be shown.
              value: '',
              label: '',
              check: false,
              number: ''
          }],
          //containSelectors:[],
shabai517's avatar
shabai517 committed
201
          filterCombination:[],
202
          sortType:'Date',
shabai517's avatar
shabai517 committed
203
          publicaitionList:[],
shabai517's avatar
shabai517 committed
204 205 206 207 208 209 210 211 212 213 214 215
          sortList:[
            {
                value: 'Accession',
                label: 'Accession'
            },
            {
                value: 'Title',
                label: 'Title'
            },
            {
                value: 'Relevance',
                label: 'Relevance'
216 217 218 219
            },
            {
                value: 'Date',
                label: 'Date'
shabai517's avatar
shabai517 committed
220
            }
shabai517's avatar
shabai517 committed
221 222
          ],
          page:0,
223 224
          pageSize:20,
          filter:'',
225
          sort:'publication_date',
shabai517's avatar
shabai517 committed
226
          total:0,
shabai517's avatar
shabai517 committed
227 228 229 230 231 232 233 234
          facetsConfigRes:'',
          projectItemsConfigRes:'',
          hightlightMode:false,
          hightlightItemArray:[],
          tagArray:[],
          projectItemsSpecies:'',
          projectItemsProjectDescription:'',
          projectItemsPublicationDate:'',
shabai517's avatar
shabai517 committed
235 236
          normalQuery:{},
          autoCompleteArray:[]
shabai517's avatar
shabai517 committed
237 238
      }
    },
239 240 241 242 243 244 245
    beforeRouteUpdate:function (to, from, next) {
      //console.log('to query',to.query);
      /*
      let filter = to.query.split('?')[1].split('filter');
      if(filter.length>1)
        filter.split("=");
      console.log('filter',filter);*/
shabai517's avatar
shabai517 committed
246
      this.updateCondition(to.query);
shabai517's avatar
shabai517 committed
247
      console.log('beforeRouteUpdate',to.query);
248 249 250 251
      this.queryArchiveProjectList(to.query);
      //this.$bus.$emit('submit-search', {params: to.params, query: to.query});
      next();
    },
shabai517's avatar
shabai517 committed
252
    components: {
253
      NavBar
shabai517's avatar
shabai517 committed
254 255
    },
    methods:{
shabai517's avatar
shabai517 committed
256 257
      searchInputChange (query, splitBool) {
          if(splitBool){
shabai517's avatar
shabai517 committed
258
            //console.log('searchInputChange',query);
shabai517's avatar
shabai517 committed
259 260 261
            this.tadAdd(query);
            this.$refs.searchRef.setQuery(null);
          }
shabai517's avatar
shabai517 committed
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276

          if(query !== ''){
              console.log('query',query);
              this.searchInputLoading = false;
              this.$http
                  .get(this.autoCompleteApi + query)
                  .then(function(res){
                     this.autoCompleteArray=res.body;
                  },function(err){

                  });
          }
          else{
            this.autoCompleteArray = [];
          }
shabai517's avatar
shabai517 committed
277
      },
278 279 280
      setFilter(){
          this.$http
            .get(this.facetsURL + '?dateGap=%2B1YEAR&facetPageSize=100')
shabai517's avatar
shabai517 committed
281
            .then(function(res){
shabai517's avatar
shabai517 committed
282
                //console.log('res.body._embedded',res.body._embedded);
283
                let facetsMap = res.body._embedded.facets;
shabai517's avatar
shabai517 committed
284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301
                this.fieldSelectors = [];
                    let archiveObj = this.facetsConfigRes.body.archive;
                    for(let i in archiveObj){
                        let item = {
                            value: archiveObj[i].name,
                            label: archiveObj[i].name,
                            containItems:[]
                        }
                        for(let j in facetsMap){
                            if(facetsMap[j].field == i){
                              for(let k=0; k<facetsMap[j].values.length; k++){
                                  let containItem = {
                                      value: facetsMap[j].values[k].value,
                                      label: facetsMap[j].values[k].value,
                                      check: false,
                                      number: facetsMap[j].values[k].count
                                  }
                                  item.containItems.push(containItem);
302
                              }
shabai517's avatar
shabai517 committed
303 304 305 306 307 308 309 310 311
                              break;
                            }
                        }
                        this.fieldSelectors.push(item);
                    }
                    this.fieldValue = this.fieldSelectors[0].value;
                    //console.log( this.fieldSelectors[0].value);
                    //console.log('this.fieldValue',this.fieldValue);
                    this.containSelectors = this.fieldSelectors[0].containItems;
shabai517's avatar
shabai517 committed
312 313 314 315
            },function(err){

            });
      },
shabai517's avatar
shabai517 committed
316 317 318 319 320
      setSearchCondition(){
          let condition='';       
          for(let i=0; i<this.filterCombination.length; i++){
            for(let j in this.facetsConfigRes.body.archive){
              if(this.facetsConfigRes.body.archive[j].name == this.filterCombination[i].field){
shabai517's avatar
shabai517 committed
321
                   condition += j+'='+this.filterCombination[i].contains+','
shabai517's avatar
shabai517 committed
322 323 324 325 326 327
                break;
              }
            }
          }
          this.filter = condition.replace(/,$/gi,'');
      },
328
      queryArchiveProjectList(q){
329
          this.publicaitionList = [];
330 331 332 333 334 335 336 337 338 339 340 341
          this.loading = true;
          let query = q || this.$route.query;
          query.dateGap = '+1YEAR';
          let pageSizeFound = false;
          for(let i in query){
              if(i == 'pageSize'){
                  pageSizeFound = true;
                  break;
              }
          }
          if(!pageSizeFound)
            query.pageSize = this.pageSize;
shabai517's avatar
shabai517 committed
342

343
          this.$http
344
            .get(this.queryArchiveProjectListApi,{params: query})
345 346 347 348
            .then(function(res){
              this.total = res.body.page.totalElements;
                this.loading = false;
                if(res.body._embedded && res.body._embedded.compactprojects){
shabai517's avatar
shabai517 committed
349
                    this.setHighlightKeywords();
350 351 352 353 354 355 356 357 358
                    let projectsList = res.body._embedded.compactprojects;
                      for(let i=0; i<projectsList.length; i++){
                          let item = {
                              accession: projectsList[i].accession,
                              title: projectsList[i].title,
                              species: projectsList[i].organisms,
                              projectDescription: projectsList[i].projectDescription.replace(/\s*$/g,"").slice(0,200) + '...',
                              publicationDate: projectsList[i].publicationDate,
                              projectTags: projectsList[i].projectTags,
shabai517's avatar
shabai517 committed
359 360
                              submissionType: projectsList[i].submissionType,
                              hightlightItemArray:[],
361
                          }
shabai517's avatar
shabai517 committed
362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380
                          //console.log('projectsList[i].highlights',projectsList[i].highlights);
                          for(let j in projectsList[i].highlights){
                              let content='';
                              for(let k=0; k<projectsList[i].highlights[j].length;k++){
                                //let temp = projectsList[i].highlights[j].k;
                                //console.log(projectsList[i].highlights[j][k]);
                                content += (projectsList[i].highlights[j][k]+'').replace(/<(\w+|\/\w+)>/g,'')+',';
                              }
                              let hightlightItem={
                                  name:this.projectItemsConfigRes[j],
                                  content:content.replace(/,$/gi,'')
                              }
                              item.hightlightItemArray.push(hightlightItem);
                          }
                          this.projectItemsSpecies = this.projectItemsConfigRes['organisms'];
                          this.projectItemsProjectDescription = this.projectItemsConfigRes['projectDescription'];
                          this.projectItemsPublicationDate = this.projectItemsConfigRes['publicationDate'];
                          this.publicaitionList.push(item);
                           
shabai517's avatar
shabai517 committed
381
                      }
382 383 384 385 386 387 388 389 390 391 392
                }
                else{
                  this.$Message.error({content:'No results', duration:1});
                }
                
            },function(err){

            });
           
      },
      queryChange(query){
shabai517's avatar
shabai517 committed
393 394 395 396 397 398 399 400
        if(query === ''){
            for(let i=0; i<this.fieldSelectors.length; i++){
                if(this.fieldSelectors[i].value == this.fieldValue){
                    this.containSelectors = this.fieldSelectors[i].containItems;
                    break;
                }
            }
        }
401 402 403 404
      },
      gotoDetails(id){
          this.$router.push({name:'dataset',params:{id:id}});
      },
shabai517's avatar
shabai517 committed
405 406
      setHighlightKeywords(){
          this.highlightKeyword = this.keyword.split(',');
407
          //console.log('this.highlightKeyword',this.highlightKeyword);
shabai517's avatar
shabai517 committed
408
      },
409
      querySpecificFacets(keyword){
shabai517's avatar
shabai517 committed
410
          if(this.containSelectors[0] && !this.containSelectors[0].value || this.containValue == keyword)
411
            return;
shabai517's avatar
shabai517 committed
412 413
         
          if(keyword.length<4 && keyword.length>0) {
414 415 416 417 418
              this.querySpecificFacetsLoading = true;
              for(let i=0; i<this.fieldSelectors.length; i++){
                //console.log('aaa');
                  if(this.fieldSelectors[i].value == this.fieldValue){
                      let itemArray=[];
shabai517's avatar
shabai517 committed
419
                      var re = new RegExp(keyword,'i');
420 421 422 423 424 425 426 427 428 429 430 431 432 433
                      for(let j=0; j<this.fieldSelectors[i].containItems.length; j++){
                          if(this.fieldSelectors[i].containItems[j].value.match(re)){
                              let item = {
                                  value: this.fieldSelectors[i].containItems[j].value,
                                  label: this.fieldSelectors[i].containItems[j].label,
                                  check: false,
                                  number: this.fieldSelectors[i].containItems[j].number,
                              }
                              itemArray.push(item);
                          }
                      }
                      this.containSelectors=itemArray;
                      if(this.containSelectors.length>0){
                          this.querySpecificFacetsLoading = false;
shabai517's avatar
shabai517 committed
434
                          break;
435 436
                      }
                      else{
shabai517's avatar
shabai517 committed
437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462
                          for(let i in this.facetsConfigRes.body.archive){
                              if(this.facetsConfigRes.body.archive[i].name == this.fieldValue){
                                  this.$http
                                    .get(this.facetsURL + '?dateGap=%2B1YEAR' + '&filter='+i+'=='+keyword)
                                    .then(function(res){
                                        //console.log(res.body._embedded);
                                         if(res.body._embedded && res.body._embedded.facets){
                                              let facetsArray = res.body._embedded.facets;
                                              let fieldFind = false;
                                              for(let j=0; j<facetsArray.length; j++){
                                                //console.log('ddd');
                                                  if(this.facetsConfigRes.body.archive[facetsArray[j].field] && this.facetsConfigRes.body.archive[facetsArray[j].field].name == this.fieldValue && facetsArray[j].values.length>0){
                                                      fieldFind = true;
                                                      this.querySpecificFacetsLoading = false;
                                                      let itemArray = [];
                                                      for(let k=0; k<facetsArray[j].values.length; k++){
                                                        //console.log('eee');
                                                            let item = {
                                                                value: facetsArray[j].values[k].value,
                                                                label: facetsArray[j].values[k].value,
                                                                check: false,
                                                                number: facetsArray[j].values[k].count,
                                                            }
                                                            itemArray.push(item);
                                                      }
                                                      this.containSelectors = itemArray;
463 464
                                                  }
                                              }
shabai517's avatar
shabai517 committed
465 466 467 468 469 470 471 472 473
                                              if(!fieldFind){
                                                  this.querySpecificFacetsLoading = false;
                                              }
                                         }
                                    },function(err){
                                        this.querySpecificFacetsLoading = false;
                                    });
                                  break;
                              }
474 475 476 477 478 479
                          }
                      }
                  }
              }
          }
          else if(keyword.length>=4) { 
shabai517's avatar
shabai517 committed
480 481 482
              this.querySpecificFacetsLoading = true;
              for(let i in this.facetsConfigRes.body.archive){
                  if(this.facetsConfigRes.body.archive[i].name == this.fieldValue){
483
                      this.$http
shabai517's avatar
shabai517 committed
484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518
                        .get(this.facetsURL + '?dateGap=%2B1YEAR' + '&filter='+i+'=='+keyword)
                        .then(function(res){
                            //console.log(res.body._embedded);
                             if(res.body._embedded && res.body._embedded.facets){
                                  let facetsArray = res.body._embedded.facets;
                                  let fieldFind = false;
                                  for(let j=0; j<facetsArray.length; j++){
                                    //console.log('ddd');
                                      if(this.facetsConfigRes.body.archive[facetsArray[j].field] && this.facetsConfigRes.body.archive[facetsArray[j].field].name == this.fieldValue && facetsArray[j].values.length>0){
                                          fieldFind = true;
                                          this.querySpecificFacetsLoading = false;
                                          let itemArray = [];
                                          for(let k=0; k<facetsArray[j].values.length; k++){
                                            //console.log('eee');
                                                let item = {
                                                    value: facetsArray[j].values[k].value,
                                                    label: facetsArray[j].values[k].value,
                                                    check: false,
                                                    number: facetsArray[j].values[k].count,
                                                }
                                                itemArray.push(item);
                                          }
                                          this.containSelectors = itemArray;
                                      }
                                  }
                                  if(!fieldFind){
                                      this.querySpecificFacetsLoading = false;
                                  }
                             }
                        },function(err){
                            this.querySpecificFacetsLoading = false;
                        });
                      break;
                  }
              }
519 520 521 522 523 524
          }
      },
      containDropdownOpen(open){
          //console.log( this.$refs.containRef);
          //console.log('aaaaaa');
          if(!open && this.$refs.containRef.isFocused){
shabai517's avatar
shabai517 committed
525 526 527 528 529 530 531 532 533 534 535 536
            this.$refs.containRef.toggleMenu();
            //this.$Message.success({content:'repeated item', duration:1});
          }
      },
      searchInputLoadingDropdownOpen(open){
          if(open){
              window.addEventListener('mousedown', this.searchInputBlur, false);
              window.addEventListener('touchstart', this.searchInputBlur, false);
          }
          else{
            window.removeEventListener('mousedown', this.searchInputBlur, false);
            window.removeEventListener('touchstart', this.searchInputBlur, false);
537 538
          }
      },
shabai517's avatar
shabai517 committed
539 540 541 542 543 544 545 546 547 548 549 550 551 552
      searchInputBlur(e){
        this.$nextTick(()=>{
            e.target.click();
        });
      },
      keywordChange(keyword){
        /*
        if(keyword == ';'){
          this.keyword = ''
          console.log(123);
          return;
        }
        if(keyword.charAt(keyword.length-1) ==';')
          console.log(keyword);*/
shabai517's avatar
shabai517 committed
553 554 555
      },
      autoCompleteFilter (value, option) {
          return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
shabai517's avatar
shabai517 committed
556 557 558
      },
      conditionChange(index,condition){
        this.filterCombination[index].condition = condition;
shabai517's avatar
shabai517 committed
559
        this.setSearchCondition();
shabai517's avatar
shabai517 committed
560
      },
shabai517's avatar
shabai517 committed
561
      fieldChange(){
shabai517's avatar
shabai517 committed
562
          console.log('fieldChange');
shabai517's avatar
shabai517 committed
563 564
        for(let i in this.fieldSelectors){
          if(this.fieldSelectors[i].value == this.fieldValue){
565 566 567 568 569 570 571 572 573 574 575
              /*
              this.containSelectors=[{ //Need to be initial value to make sure "No match data" hint will not be shown.
                  value: '',
                  label: '',
                  check: false,
                  number: ''
              }],*/
             //console.log('fieldChange his.fieldValue', this.fieldValue);
              //console.log('fieldChange this.containSelectors',this.containSelectors);
              this.containSelectors = this.fieldSelectors[i].containItems
              this.containValue='';
shabai517's avatar
shabai517 committed
576
              this.$refs.containRef.setQuery(null);
shabai517's avatar
shabai517 committed
577 578 579 580
              break;
          }
        }
      },
shabai517's avatar
shabai517 committed
581
      containChange(){
shabai517's avatar
shabai517 committed
582
        console.log('containChange');
583 584 585 586 587 588
          if(this.containValue){
              this.$refs.containRef.toggleMenu();
              let filterCombinationFound =false;
              for(let j=0; j<this.filterCombination.length; j++){
                  if(this.filterCombination[j].field == this.fieldValue && this.filterCombination[j].contains == this.containValue){
                    filterCombinationFound = true;
shabai517's avatar
shabai517 committed
589
                    //this.$Message.success({content:'repeated item', duration:1});
590 591 592 593 594 595 596 597 598 599
                    break;
                  }
              }
              if(!filterCombinationFound){
                  let item={
                      condition:'And',
                      field:this.fieldValue,
                      contains:this.containValue
                  };
                  this.filterCombination.push(item);
shabai517's avatar
shabai517 committed
600
                  this.setSearchCondition();
601 602
              }
          }
shabai517's avatar
shabai517 committed
603
      },
shabai517's avatar
shabai517 committed
604 605 606 607 608 609 610 611 612 613 614 615 616 617
      tadAdd(item){
        this.tagArray.push(item);
        this.setKeywords();
      },
      tagDelete(event, name){
          const index = this.tagArray.indexOf(name);
          this.tagArray.splice(index, 1);
          this.setKeywords();
      },
      setKeywords(){
          this.keyword='';
          for(let i=0; i<this.tagArray.length; i++){
              this.keyword += this.tagArray[i]+',';
          }
618
          this.keyword = this.keyword.replace(/,$/gi,'');
shabai517's avatar
shabai517 committed
619 620 621
      },
      conditionDelete(index,item){
        this.filterCombination.splice(index,1);
shabai517's avatar
shabai517 committed
622 623 624
        this.$refs.containRef.setQuery(null);
        this.setSearchCondition();
        /*
shabai517's avatar
shabai517 committed
625 626 627 628 629 630 631 632 633 634 635
          for(let i=0; i<this.fieldSelectors.length; i++){
              if(this.fieldSelectors[i].value == item.field){
                  for(let j=0; j<this.fieldSelectors[i].containItems.length; j++){
                    if(this.fieldSelectors[i].containItems[j].value == item.contains){
                        this.fieldSelectors[i].containItems[j].check =false;
                        break;
                    }
                  }
                  break;
              }
          }
shabai517's avatar
shabai517 committed
636
        */
shabai517's avatar
shabai517 committed
637
      },
shabai517's avatar
shabai517 committed
638
      keywordSearch(value){
shabai517's avatar
shabai517 committed
639

640
        //console.log('this.keyword',this.keyword);
shabai517's avatar
shabai517 committed
641
        //this.keyword = value;
shabai517's avatar
shabai517 committed
642 643
      },
      submitSearch(){
shabai517's avatar
shabai517 committed
644 645 646 647 648 649
        let temp = this.$refs.searchRef.$el.querySelector('.ivu-select-selection .ivu-select-input').value;
        if(temp && this.tagArray.length == 0){
          this.tadAdd(temp);
          this.$refs.searchRef.setQuery(null);
        }
        
650 651 652 653
        if(this.keyword)
          this.hightlightMode = true;
        else
          this.hightlightMode = false;
654 655

        this.$router.push({name: 'archive', query: this.query});
shabai517's avatar
shabai517 committed
656
        //this.$Message.success({content:'new result', duration:1});
shabai517's avatar
shabai517 committed
657
      },
shabai517's avatar
shabai517 committed
658 659
      pageChange(page){
          this.page = page-1;
660
          this.setFilter();
661
          this.$router.push({name: 'archive', query: this.query});
shabai517's avatar
shabai517 committed
662
      },
shabai517's avatar
shabai517 committed
663
      pageSizeChange(size){
664 665
          this.pageSize = size;
          this.setFilter();
666
          this.$router.push({name: 'archive', query: this.query});
shabai517's avatar
shabai517 committed
667
      },
668
      /*new api has no sort funtions
669 670 671 672 673 674 675 676 677 678 679
      sortChange(type){
        console.log(type);
        if(type == 'Title')
          this.sort = 'project_title'
        else if(type == 'Accession')
          this.sort = 'id'
        else if(type == 'Relevance')
          this.sort = 'score'
        else if(type == 'Date')
          this.sort = 'publication_date';

680
        this.setFilter();
681
        this.queryArchiveProjectList();
682
      },*/
shabai517's avatar
shabai517 committed
683 684 685 686 687 688 689 690 691 692 693 694 695 696 697
      updateCondition(q){
          let query = q || this.$route.query;
          for(let i in query){
              if(i == 'keyword'){
                  this.tagArray=[];
                  if(query[i]){
                      let keywordArray = query[i].split(',');
                      for(let i=0; i<keywordArray.length;i++){
                          this.tadAdd(keywordArray[i]);
                      }
                  }
              }
              else if(i == 'filter'){
                if(query[i]){
                    let filterArray = query[i].split(',');
shabai517's avatar
shabai517 committed
698
                    console.log('filterArray',filterArray);
shabai517's avatar
shabai517 committed
699 700
                    this.filterCombination=[];
                      for(let i=0; i<filterArray.length;i++){
shabai517's avatar
shabai517 committed
701
                          let facetsArray = filterArray[i].split('=')
shabai517's avatar
shabai517 committed
702 703 704 705 706 707 708 709 710 711 712
                          let item={
                              condition:'And',
                              field: this.facetsConfigRes.body.archive[facetsArray[0]].name,     
                              contains:facetsArray[1]
                          };
                          this.filterCombination.push(item);
                          //this.tadAdd(keywordArray[i]);
                      }
                }
              }
              else if(i =='page'){
shabai517's avatar
shabai517 committed
713
                this.currentPage = parseInt(query[i])+1;
shabai517's avatar
shabai517 committed
714 715 716 717 718 719 720 721 722 723 724
                //console.log(this.currentPage );
              }
              else if(i =='pageSize'){
                  let tempPageSize = parseInt(query[i]);
                  if(tempPageSize == 10 || tempPageSize == 20 || tempPageSize == 30 || tempPageSize == 40)
                    this.pageSize = parseInt(query[i]);
                  else 
                    this.pageSize = 20;
              }
          }
          //console.log();
725
        //this.normalQuery = {keyword:this.keyword, page:0, pageSize:20}
shabai517's avatar
shabai517 committed
726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745
      },
      searchInputListener(){
          this.$refs.searchRef.$el.querySelector('.ivu-select-selection .ivu-select-input').addEventListener('keydown',(e)=>{
              if(e.keyCode == 13 || e.keyCode == 188){
                  e.preventDefault();
                  e.stopPropagation();
                  //this.searchInputChange(',');
              }
          });

          this.$refs.searchRef.$el.querySelector('.ivu-select-selection .ivu-select-input').addEventListener('keyup',(e)=>{
           // console.log('123');
           
              if(e.keyCode == 13 || e.keyCode == 188){
                  e.preventDefault();
                  e.stopPropagation();
                  if(e.target.value)
                    this.searchInputChange(e.target.value, true);
              }
          });
746 747 748 749 750 751 752 753 754 755 756 757
      },
      queryFormatter(query){
          console.log('query',query);
          let queryTemp = '?';
          for(let i in query){
              if(query[i] && i == 'keyword'){
                  queryTemp = queryTemp + i + '='+query[i]
              }
              else if(query[i] && i == 'filter'){
                console.log('query[i]',query[i]);
              }
          }
shabai517's avatar
shabai517 committed
758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776
      },
      queryConfig(){
          this.$http
            .get(this.searchConfigURL)
            .then(function(facetsConfigRes){
                this.facetsConfigRes = facetsConfigRes;
                this.$http
                  .get(this.projectItemsConfigURL)
                  .then(function(projectItemsConfigRes){
                      this.projectItemsConfigRes = projectItemsConfigRes.body.projectItems;
                      this.setFilter();
                      this.updateCondition();
                      this.queryArchiveProjectList();
                  },function(err){

                  });
            },function(err){

            });
shabai517's avatar
shabai517 committed
777
      }
shabai517's avatar
shabai517 committed
778 779 780 781 782
    },

    watch: {
      filterCombination: function (val) {
          //combine keyword (this.keyword) and filters together (val)
783
          //this.submitSearch();
shabai517's avatar
shabai517 committed
784
      },
shabai517's avatar
shabai517 committed
785

786
    },
shabai517's avatar
shabai517 committed
787
    computed:{
788
      //this variable is not used anymore and only for updating this.normalQuery;
shabai517's avatar
shabai517 committed
789
      query:function(){
790 791 792 793 794 795 796 797
          //let keyword= this.keyword? 'keyword='+this.keyword+'&' : '';
          //let filter = this.filter? 'filter='+this.filter+'&' : '';
          //let page='page='+this.page+'&';
          //let pageSize='pageSize='+this.pageSize;
          let normalQuery = {}
          for(let i=0; i<this.tagArray.length; i++){

          }
shabai517's avatar
shabai517 committed
798 799 800 801
          if(this.keyword)
            normalQuery.keyword = this.keyword;
          if(this.filter)
            normalQuery.filter = this.filter;
802 803 804 805 806
          normalQuery.page = this.page;
          normalQuery.pageSize = this.pageSize;
          //console.log('this.normalQuery',this.normalQuery);
          //return '?'+keyword+filter+page+pageSize;
          return normalQuery;
807
          
shabai517's avatar
shabai517 committed
808 809
      }
    },
810
    mounted: function(){
shabai517's avatar
shabai517 committed
811 812 813 814
      this.queryConfig();
      //this.updateCondition();//move into queryConfig function
      //this.queryArchiveProjectList();//move into queryConfig function
      //this.setFilter();//move into queryConfig function
shabai517's avatar
shabai517 committed
815
      this.searchInputListener();
shabai517's avatar
shabai517 committed
816 817
    },
    created(){
shabai517's avatar
shabai517 committed
818
      
shabai517's avatar
shabai517 committed
819 820
    },
    beforeDestroy(){
shabai517's avatar
shabai517 committed
821 822
          
    },
shabai517's avatar
shabai517 committed
823
    beforeRouteEnter(to,from,next){
824
      //console.log('from',from);
shabai517's avatar
shabai517 committed
825 826 827 828 829
      if(from.name == 'landingpage' && from.params.keyword)
        paramsFromLandingPage = from.params.keyword;
      
      next();
    }
830 831 832 833 834
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>  
835
  .archive-container{
836 837
    width: 100%;
   
838
  }
839
  .browse-data-container{
840 841
    width: 80%;
    margin:0 auto;
842 843 844 845
    padding: 90px 0;
  }
  .search-filter{
    display: flex;
shabai517's avatar
shabai517 committed
846 847
    margin-bottom: 2rem;
    justify-content: space-between;
848
  }
849 850
  .search-row{
    margin-bottom: 20px;
851
  }
shabai517's avatar
shabai517 committed
852
  .search-condition:not(.first){
shabai517's avatar
shabai517 committed
853 854 855
    display: inline-block;
    padding-left: 8px;
    border-left: 1px solid #e9eaec;
856
  }
shabai517's avatar
shabai517 committed
857 858
  .search-input{
    text-align: center;
shabai517's avatar
shabai517 committed
859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879
    margin-bottom: 10px;
  }
  .search-input-wrapper{
    position: relative;
  }
  .search-input-wrapper .fake-input{
    padding-right: 32px;
    border-radius: 3px !important;
        font-size: 14px;
    padding: 6px 7px;
    height: 36px;
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 1.5;
        border: 1px solid #5bc0be;
            color: #495060;
                background-color: #fcfcfc;
    background-image: none;
    cursor: text;
    text-align:left;
shabai517's avatar
shabai517 committed
880
  }
shabai517's avatar
shabai517 committed
881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896
  .search-input-wrapper .tag-wrapper{
    display: inline-block;
    width: 100%
   /* position: absolute;*/
  }

  .search-input-wrapper .tag-wrapper .tag-in-search-input:hover{
      opacity: 1 !important;
  }
  .search-input-wrapper .tag-wrapper .tag-in-search-input{
      background: none !important;
  }
  .search-input-wrapper .tag-wrapper .ivu-select{
      width: auto
  }

shabai517's avatar
shabai517 committed
897 898 899
  .refine-name{
    font-size: 12px;
  }
900 901 902 903 904 905
  .tag-container{
    display: inline-block;
  }
  .page-container{
    text-align: center;
  }
shabai517's avatar
shabai517 committed
906 907
  .filter-condition{
    display: inline-block;
shabai517's avatar
shabai517 committed
908
    margin-top: 5px; 
909
  }
shabai517's avatar
shabai517 committed
910 911 912
  .search-condition-container{
    display: inline-block;
  }
913 914
  .search-condition-container .ivu-tag{
    overflow: visible !important;
shabai517's avatar
shabai517 committed
915
    z-index: 2 !important;
916
    opacity: 1 !important;
shabai517's avatar
shabai517 committed
917 918
    height: 30px;
    line-height: 30px;
919 920 921 922
  }
  .search-condition-container a{
    border:none;
  }
shabai517's avatar
shabai517 committed
923 924 925
  .search-condition-container .ivu-select-dropdown .ivu-dropdown-menu{
    min-width: 50px;
  }
shabai517's avatar
shabai517 committed
926 927 928 929 930 931 932 933 934 935
  .resource-list-title-container{
    display: flex;
    justify-content: space-between;
  }
  .sort-action{
    font-size: 12px;
    font-weight: normal;
    color: #495060;
    border:none;
  }
shabai517's avatar
shabai517 committed
936 937
  .search-button a{
        padding: 8px 10px;
shabai517's avatar
shabai517 committed
938 939 940
        font-size: 12px;
        width: 100%;
        margin-bottom: 0;
shabai517's avatar
shabai517 committed
941
        margin-top: 5px;
shabai517's avatar
shabai517 committed
942 943 944 945 946 947 948 949 950
        /*padding: 20px 85px;
        font-size: 24px;*/
        font-weight: 700;
        background-color: #5bc0be;
        border-radius: 3px;
    }
    .resource-item{
      margin-bottom: 20px;
    }
shabai517's avatar
shabai517 committed
951 952 953
    .resource-item .project-info{
      font-weight: 400;
    }
shabai517's avatar
shabai517 committed
954 955
    .resource-id{
      font-size: 14px;
956
      margin-right: 2px;
shabai517's avatar
shabai517 committed
957 958 959 960 961 962 963
    }
    .resource-title{
      font-weight: bold;
    }
    .detailed-resouce{
      margin-left: 5px;
    }
964
    .biological-dataset-button{
shabai517's avatar
shabai517 committed
965 966 967 968 969 970 971 972
        padding: 2px 3px;
        font-size: 12px;
        margin-bottom: 0;
        /*padding: 20px 85px;
        font-size: 24px;*/
        background-color: #5bc0be;
        border-radius: 3px;
    }
973 974 975 976 977 978 979 980 981
    .biomedical-dataset-button{
        padding: 2px 3px;
        font-size: 12px;
        margin-bottom: 0;
        /*padding: 20px 85px;
        font-size: 24px;*/
        background-color: #bd7edc;
        border-radius: 3px;
    }
982 983 984 985 986 987 988 989 990
    .highlighted-dataset-button{
        padding: 2px 3px;
        font-size: 12px;
        margin-bottom: 0;
        /*padding: 20px 85px;
        font-size: 24px;*/
        background-color: #e2c94c;
        border-radius: 3px;
    }
shabai517's avatar
shabai517 committed
991 992 993 994 995 996 997 998 999
    .technical-dataset-button{
        padding: 2px 3px;
        font-size: 12px;
        margin-bottom: 0;
        /*padding: 20px 85px;
        font-size: 24px;*/
        background-color: #6acaef;
        border-radius: 3px;
    }
1000 1001 1002 1003 1004 1005 1006 1007 1008
    .gray-dataset-button{
        padding: 2px 3px;
        font-size: 12px;
        margin-bottom: 0;
        /*padding: 20px 85px;
        font-size: 24px;*/
        background-color: #999c9c;
        border-radius: 3px;
    }
shabai517's avatar
shabai517 committed
1009 1010 1011
    .dataset-wrapper{
      margin-right: 5px;
    }
1012 1013 1014 1015 1016 1017 1018 1019
    .search-item-input-wrapper{
      position: absolute;
      top:5px;
      width: 100%;
      text-align: center;
      padding-bottom: 5px;
      border-bottom: 1px solid rgb(200,200,200,0.5);
    }
shabai517's avatar
shabai517 committed
1020
    /*
shabai517's avatar
shabai517 committed
1021 1022
    .archive-search-input{
      margin-bottom: 10px;
shabai517's avatar
shabai517 committed
1023
    }*/
shabai517's avatar
shabai517 committed
1024 1025 1026
    .dropdown-action{
      width: 50px;
    }
shabai517's avatar
shabai517 committed
1027 1028 1029
    .separator{
      margin: 0 5px;
    }
shabai517's avatar
shabai517 committed
1030 1031 1032 1033
    .sortOption{
      display: inline-block;
      margin-left: 5px;
    }
shabai517's avatar
shabai517 committed
1034 1035 1036
    .matched-items{
      color: #948d8d;
    }
1037 1038 1039
    .readMore{
      display: inline;
    }
shabai517's avatar
shabai517 committed
1040 1041 1042 1043
</style>

<style>
    .page .ivu-select-dropdown-list{
shabai517's avatar
shabai517 committed
1044 1045
      margin-left: 0 !important;
    }
shabai517's avatar
shabai517 committed
1046
    /*
shabai517's avatar
shabai517 committed
1047
    .archive-search-input input{
shabai517's avatar