Resource.vue 15.2 KB
Newer Older
shabai517's avatar
shabai517 committed
1 2
<template>
  <div class="resource-container">
3 4 5 6
    <!--<div class="resouce-title">-->
        <!--<h1>{{title}}</h1>-->
        <!--&lt;!&ndash;<p>Search through thousands of resources from Pride that are looking.</p>&ndash;&gt;-->
    <!--</div>-->
shabai517's avatar
shabai517 committed
7
    <div class="search-container">
8 9 10 11
        <div class="normal-search-wrapper" v-if="!advanceSearchDisplay">
            <Input id="search-bar-pride" v-model="keyword" placeholder="search" size="large" @on-keyup.enter.prevent="submitSearchCondition">
                <Select v-model="selected" slot="prepend" style="width: 100px">
                    <Option value="archive">Archive</Option>
12
                    <Option value="peptidome">Peptidome</Option>
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
                </Select>
                <Button slot="append" @click="submitSearchCondition">Search</Button>
            </Input>
        </div>
        <div class="advance-search-wrapper" v-if="advanceSearchDisplay">
            <Table id="advance-search-table" border :columns="searchConditions" :data="searchItems" size="small" no-data-text="No Search Data"></Table>
            <div class="advance-search-button-wrapper">
                <div>
                    <Button class="advance-search-action" @click="advanceSearchConditoinAdd" size="small">Add</Button>
                    <Button class="advance-search-action" size="small">Search</Button>
                </div>
                <div>
                    <Button type='error' class="advance-search-action close" @click="advanceSearchToggle" size="small">Close</Button>
                </div>
            </div>
        </div>
        <div class="search-settings" v-if="!advanceSearchDisplay">
shabai517's avatar
shabai517 committed
30
            <div class="example-wrapper">
shabai517's avatar
shabai517 committed
31
                <a class="example-item" v-for="item in searchExample" v-bind:key = "item" @click="setSearchKeyword(item)">{{item}}></a>
shabai517's avatar
shabai517 committed
32
            </div>
33
            <!--
34 35
            <div class="advance-search">
                <a @click="advanceSearchToggle">Advance</a>
shabai517's avatar
shabai517 committed
36
            </div>
37
            -->
shabai517's avatar
shabai517 committed
38 39
        </div>
    </div>
shabai517's avatar
shabai517 committed
40
    <div class="button-container">
41 42 43 44 45 46
        <a class="button resource-button" @click="goToArchive">
            <span>
            <svg class="icon-archive" aria-hidden="true">
                <use xlink:href="#icon-data"></use>
            </svg>
            </span>
shabai517's avatar
shabai517 committed
47
            <span class="resource-button-content">{{archivebutton}}</span>
48 49 50 51 52
        </a>
        <a class="button resource-button peptidome" @click="goToPeptidome">
            <span>
            <svg class="icon-peptidome" aria-hidden="true">
                <use xlink:href="#icon-checklist"></use>
shabai517's avatar
shabai517 committed
53
                <!--<use xlink:href="#icon-checklist1"></use>-->
54 55
            </svg>
            </span>
shabai517's avatar
shabai517 committed
56
            <span class="resource-button-content">{{peptidomebutton}}</span>
57
        </a>
shabai517's avatar
shabai517 committed
58
    </div>
shabai517's avatar
shabai517 committed
59 60 61
  </div>
</template>
<script>
shabai517's avatar
shabai517 committed
62
    import store from "@/store/store.js"
shabai517's avatar
shabai517 committed
63 64 65
    export default {
        data () {
            return {
shabai517's avatar
shabai517 committed
66 67 68
                title:'',
                peptidomebutton:'',
                archivebutton:'',
shabai517's avatar
shabai517 committed
69 70
                condition:'',
                keyword:'',
71
                selected:'archive',
shabai517's avatar
shabai517 committed
72 73 74 75 76 77 78 79 80 81
                value:'',
                test:'AND',
                conditionList: ['AND','NOT','OR'],
                typeList:['All','UniProtKB AC', 'Gene name [GN]'],
                defaultSearchCondition : {
                    condition: 'AND',
                    type: 'All',
                    term: ''
                },
                searchItems: [],
82
                advanceSearchDisplay:false,
shabai517's avatar
shabai517 committed
83 84 85 86 87 88 89 90 91 92
                searchConditions: [
                    {
                        title: 'Condition',
                        key: 'condition',
                        width:120,
                        align: 'center',
                        render: (h, params) => {
                            return h('Select', {
                                    props: {
                                        value:this.searchItems[params.index].condition,
93
                                        size:"small",
shabai517's avatar
shabai517 committed
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
                                        style:"width:100px"
                                    },
                                    on: {
                                        'on-change': (val) => {
                                           this.searchItems[params.index].condition = val;
                                        }
                                    }
                                },
                                this.conditionList.map(function(item){
                                    return h('Option', {
                                        props: {
                                            value: item
                                        }
                                    })
                                })
                            );
                        }
                    },
                    {
                        title: 'Type',
                        key: 'type',
115
                        width: 180,
shabai517's avatar
shabai517 committed
116 117 118 119 120
                        align: 'center',
                        render: (h, params) => {
                            return h('Select', {
                                    props: {
                                        value:this.searchItems[params.index].type,
121
                                        size:"small",
shabai517's avatar
shabai517 committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
                                    },
                                    on: {
                                        'on-change': (val) => {
                                           this.searchItems[params.index].type = val;
                                        }
                                    }
                                },
                                this.typeList.map(function(item){
                                    return h('Option', {
                                        props: {
                                            value: item
                                        }
                                    })
                                })
                            );
                        }
                    },
                    {
                        title: 'Term',
                        key: 'term',
                        align: 'center',
                        render: (h, params) => {
                            return h('Input', {
                                    props: {
                                        value:this.searchItems[params.index].term,
147
                                        size:"small",
shabai517's avatar
shabai517 committed
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
                                    },
                                    on: {
                                        'on-blur': (e) => {
                                           this.searchItems[params.index].term = e.target.value;
                                        }
                                    }
                            });
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.advanceSearchConditoinRemove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
shabai517's avatar
shabai517 committed
179
                searchExample:[],
shabai517's avatar
shabai517 committed
180
                landingPageJsonURL: this.$store.state.baseURL + '/static/landingPage/landing_page.json'
shabai517's avatar
shabai517 committed
181
            }
shabai517's avatar
shabai517 committed
182 183
        },
        methods:{
shabai517's avatar
shabai517 committed
184 185 186
            init(){
                this.initAdvanceSearch();
            },
shabai517's avatar
shabai517 committed
187 188 189 190 191
            setSearchKeyword(item){
                console.log(item);
                this.keyword = item;
                this.submitSearchCondition();
            },
shabai517's avatar
shabai517 committed
192
            submitSearchCondition(){
shabai517's avatar
shabai517 committed
193
                if(this.selected == 'archive')
194
                    this.$router.push({name:'archive',query:{ keyword: this.keyword }});
shabai517's avatar
shabai517 committed
195
                else if(this.selected == 'peptidome')
196
                    this.$router.push({name:'peptidesearch',query:{ keyword: this.keyword }});   
shabai517's avatar
shabai517 committed
197 198 199 200 201 202 203
            },
            advanceSearchConditoinRemove (index) {
                this.searchItems.splice(index, 1);
            },
            advanceSearchConditoinAdd(){
                this.searchItems.push(Object.assign({}, this.defaultSearchCondition));
            },
shabai517's avatar
shabai517 committed
204
            goToPeptidome(){
shabai517's avatar
shabai517 committed
205
                this.$router.push({name:'peptidome'});
shabai517's avatar
shabai517 committed
206
            },
shabai517's avatar
shabai517 committed
207
            goToArchive(){
shabai517's avatar
shabai517 committed
208 209
                //this.$Message.success({content:'Archive Coming Soon', duration:1});
                this.$router.push({name:'archive'});
shabai517's avatar
shabai517 committed
210 211 212 213 214
            },
            initAdvanceSearch(){
                this.searchItems = [];
                this.advanceSearchConditoinAdd();
            },
215
            advanceSearchToggle(){
shabai517's avatar
shabai517 committed
216
                this.initAdvanceSearch();
217
                this.advanceSearchDisplay = !this.advanceSearchDisplay;
shabai517's avatar
shabai517 committed
218 219 220
            },
            documentQuery(){
                this.$http
shabai517's avatar
shabai517 committed
221
                  .get(this.landingPageJsonURL)
shabai517's avatar
shabai517 committed
222
                  .then(function(res){
shabai517's avatar
shabai517 committed
223 224 225 226
                    this.title = res.body.resource.title;
                    this.searchExample = res.body.resource.searchexample;
                    this.peptidomebutton = res.body.resource.peptidomebutton;
                    this.archivebutton = res.body.resource.archivebutton;
shabai517's avatar
shabai517 committed
227
                  },function(err){
228 229

                  });
shabai517's avatar
shabai517 committed
230
            },
shabai517's avatar
shabai517 committed
231 232 233
        },
        mounted(){
            this.init();
shabai517's avatar
shabai517 committed
234
            this.documentQuery();
shabai517's avatar
shabai517 committed
235 236 237 238 239
        }
    }
</script>
<style scoped>
    .resource-container{
240
        width:80%;
shabai517's avatar
shabai517 committed
241
        height: 100%;
shabai517's avatar
shabai517 committed
242
        position: relative;
shabai517's avatar
shabai517 committed
243
        text-align: center;
shabai517's avatar
shabai517 committed
244
        padding: 50px 0;
245
        margin:0 auto;
246 247
        display: flex;
        flex-direction: column;
shabai517's avatar
shabai517 committed
248
        /*background-image: url("~/src/assets/image/bioinformatics-slide-slide-1-Slideviewer.jpg");
249
        background-position: center center;
shabai517's avatar
shabai517 committed
250
        background-size: cover;*/
shabai517's avatar
shabai517 committed
251
    }
shabai517's avatar
shabai517 committed
252 253 254 255 256
    .bg{
        height: 550px;
    }
    .bgone{
        background-image: url("~/src/assets/landing_page_bg/test1.jpg");
257
        background-position: center center;
shabai517's avatar
shabai517 committed
258 259 260 261
        background-size: cover;
    }
    .bgtwo{
        background-image: url("~/src/assets/landing_page_bg/test2.jpg");
262
        background-position: center center;
shabai517's avatar
shabai517 committed
263 264 265 266
        background-size: cover;
    }
    .bgthree{
        background-image: url("~/src/assets/landing_page_bg/test3.jpg");
267
        background-position: center center;
shabai517's avatar
shabai517 committed
268 269 270 271
        background-size: cover;
    }
    .bgfour{
        background-image: url("~/src/assets/landing_page_bg/test4.jpg");
272
        background-position: center center;
shabai517's avatar
shabai517 committed
273
        background-size: cover;
shabai517's avatar
shabai517 committed
274
    }
shabai517's avatar
shabai517 committed
275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
    .resouce-title{
        margin-bottom: 50px;
    }
    .resouce-title h1{
        color: #656665;
        font-size: 3.14285714em;
        font-weight: bold;
        font-family: Open Sans,Helvetica,Arial,sans-serif;
        margin-bottom: 20px;
    }
    .resouce-title p{
        font-weight: 400;
        color: gray;
        font-size: 20px;
    }
290

shabai517's avatar
shabai517 committed
291
    .button-container{
292 293 294 295 296
        display: flex;
         align-items: center; 
        justify-content: center;
            flex-direction: column;
        
shabai517's avatar
shabai517 committed
297
    }
shabai517's avatar
shabai517 committed
298
    .search-container{
shabai517's avatar
shabai517 committed
299
        margin: 0 auto 10px auto;
300
        width:100%;
shabai517's avatar
shabai517 committed
301 302
        text-align: center;
        border-radius:6px;
shabai517's avatar
shabai517 committed
303
        padding:50px;
304
        background:#fbfdff;
shabai517's avatar
shabai517 committed
305
    }
shabai517's avatar
shabai517 committed
306
    .resource-button{
shabai517's avatar
shabai517 committed
307
        padding: 30px 105px 30px 105px;
shabai517's avatar
shabai517 committed
308
        font-size: 18px;
309
        width: 80%;
shabai517's avatar
none  
shabai517 committed
310 311
        /*padding: 20px 85px;
        font-size: 24px;*/
shabai517's avatar
shabai517 committed
312
        font-weight: 700;
313
        margin: 0 0 40px 0;
shabai517's avatar
shabai517 committed
314 315
        background-color: #5bc0be;
        border-radius: 6px;
316 317 318
        display:flex;
        align-items: center;
        justify-content: center;
shabai517's avatar
shabai517 committed
319
        flex-direction: column;
shabai517's avatar
shabai517 committed
320
    }
shabai517's avatar
shabai517 committed
321 322 323
    .resource-button.peptidome{
        background-color: #ef7831;
    }
shabai517's avatar
shabai517 committed
324 325 326 327 328 329 330 331 332 333 334 335 336 337 338
    #search-bar-pride .ivu-select-single{
        /*width: 100px !important;*/
    }
    .search-settings{
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        font-size: 14px;
    }
    .example-item{
        margin-right: 5px;
    }
    .advance-search-button-wrapper .advance-search-action{
        color: white !important;
        width: 70px;
339

shabai517's avatar
shabai517 committed
340 341 342 343 344 345
    }
    .advance-search-button-wrapper .advance-search-action:hover{
        opacity:.8 !important;
        background-color: #3cc1c1 !important;
        border-color: #3cc1c1 !important;
    }
346 347 348 349
    .advance-search-button-wrapper .advance-search-action.close:hover{
        opacity:1!important;
        background-color: #f16543 !important;
        border-color: #f16543 !important;
shabai517's avatar
shabai517 committed
350
    }
351 352 353 354 355 356 357 358 359
    .advance-search-button-wrapper{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .advance-search-button-wrapper button{
        width: 50px !important;
        padding: 2px 0 !important;
    }
360
    .icon-archive {
shabai517's avatar
shabai517 committed
361
       width: 4em; height: 4em;
362 363 364
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
shabai517's avatar
shabai517 committed
365
       margin-bottom: 20px;
366 367
    }
    .icon-peptidome {
shabai517's avatar
shabai517 committed
368
       width: 4em; height: 4em;
369 370 371
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
shabai517's avatar
shabai517 committed
372 373 374 375
       margin-bottom: 20px;
    }
    .resource-button-content{
        font-size: 20px;
376
    }
377
    @media (min-width: 768px) {
shabai517's avatar
shabai517 committed
378
        .resource-container{
379 380 381 382 383 384 385
            width: 750px;
        }
        .resource-button{
            width: 380px;
            margin: 40px 30px 0 30px;
        }
    }
386
    @media (min-width: 992px) {
387 388
        .resource-container{
            width: 970px;
shabai517's avatar
shabai517 committed
389
        }
390 391 392
        .button-container{
            flex-direction: row
        }
shabai517's avatar
shabai517 committed
393 394 395
    }
    @media (min-width: 1200px) {
        .resource-container{
396 397 398 399 400 401
            width: 1170px;
        }
        .item-container{
            /*margin: 15px 50px;*/
        }
    }
402

403 404 405
    @media (min-width: 1600px) {
        .resource-container{
            width: 1300px;
shabai517's avatar
shabai517 committed
406 407
        }
    }
shabai517's avatar
shabai517 committed
408 409 410
</style>
<style>
    #search-bar-pride .ivu-input-group-prepend{
shabai517's avatar
shabai517 committed
411 412 413 414
        background-color: #5bc0be !important;
    }
    #search-bar-pride .ivu-input-group-prepend span{
        font-weight:700;
shabai517's avatar
shabai517 committed
415 416 417 418 419 420 421 422
    }
    #search-bar-pride .ivu-select-single .ivu-select-selection .ivu-select-placeholder{
        color: white !important;
    }
    #search-bar-pride .ivu-select{
        color: white !important;
    }
    #search-bar-pride .ivu-input-group-append{
shabai517's avatar
shabai517 committed
423
        background-color: #5bc0be !important;
shabai517's avatar
shabai517 committed
424
        color: #f8f8f8 !important;
shabai517's avatar
shabai517 committed
425 426 427 428 429
        width:100px;
    }
    #search-bar-pride .ivu-input-group-append span{
        font-weight:700;
        /*font-size: .85714286em;*/
shabai517's avatar
shabai517 committed
430 431
    }
    #search-bar-pride .ivu-select-arrow{
shabai517's avatar
shabai517 committed
432
        color: #f8f8f8 !important;
shabai517's avatar
shabai517 committed
433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448
    }
    #advance-search-table table{
        margin-bottom: 0;
    }
    #advance-search-table input{
        margin-bottom : 0px !important;
    }
    #advance-search-table .ivu-table-cell{
        padding: 0px !important;
    }
    .ivu-poptip-body-content{
        overflow: visible !important;
    }
    .ivu-poptip-body{
        padding: 15px 16px;
    }
449
    
shabai517's avatar
shabai517 committed
450
</style>