detailPage.vue

<template>
    <div class="page-section">
        <div class="container page-container">
            <filters></filters>

            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">

                    <event-cover-section
                        :status=event.status
                        :event-cover-url=event.event_cover_url
                        :event-title=event.event_title
                    >
                    </event-cover-section>

                    <share-bloc-section
                        :event-title=event.event_title
                        :event-id=event.id
                        :event-slug=event.slug
                    ></share-bloc-section>
                    
                    <info-section 
                        :event-description=event.description
                    ></info-section>

                    <map-section :event=event></map-section>

                    <news-section :fb-event-id=event.event_id></news-section>

                    <small-category-section
                        :city=event.city
                        :event-type=event.event_type
                    ></small-category-section>

                    <share-bloc-section
                        :event-title=event.event_title
                        :event-id=event.id
                        :event-slug=event.slug
                    ></share-bloc-section>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-left pull-right">
                    <main-info-section
                        :fb-event-id=event.event_id
                        :user-id=event.user_id
                        :event-id=event.id
                        :event-title=event.event_title
                        :event-slug=event.slug
                        :common-friend=event.common_friend
                        :is-loved=event.is_loved
                        :love-count=event.love_count
                        :is-eyelist=event.is_eyelist
                        :restriction=event.restriction
                        :attending-count=event.attending_count
                        :maybe-count=event.maybe_count
                        :invited-count=event.invited_count
                        :event-type=event.event_type
                        :city=event.city
                    >
                    </main-info-section>

                    <event-creator-section
                        :user-id=event.user_id
                        :user-name=event.event_creator.name
                        :user-photo=event.event_creator.photo
                        :phone=event.event_creator.phone
                        :user-events-count=event.event_creator.created_events
                        :event-id=event.id
                    ></event-creator-section>

                    <save-for-later-section
                        :event-title=event.event_title
                        :is-eyelist=event.is_eyelist
                        :event-location=event.event_location_address
                        :event-start-date=event.event_start_date
                        :event-end-date=event.event_end_date
                    ></save-for-later-section>

                    <suggestion-events-section
                        :event-id=event.id
                    ></suggestion-events-section>
                </div>
            </div>
        </div>

        <footer-layout></footer-layout>
    </div>
</template>

<script>
import store from '../vuex/store'
import Filters from '../partials/filters.vue'
import EventCoverSection from './event-cover-section.vue'
import ShareBlocSection from './share-bloc-section.vue'
import InfoSection from './info-section.vue'
import MapSection from './map-section.vue'
import NewsSection from './news-section.vue'
import SmallCategorySection from './small-category-section.vue'
import EventCreatorSection from './event-creator-section.vue'
import MainInfoSection from './main-info-section.vue'
import SaveForLaterSection from './save-for-later-section.vue'
import SuggestionEventsSection from './suggestion-events-section.vue'
import FooterLayout from '../partials/footer-layout.vue'
import BuyTicketSection from './buy-ticket-section.vue'
import helper from '../../helper/helper.js'

import { getSingleEvent } from '../vuex/getters'
import { setSingleEvent, updateIsDataLoaded } from '../vuex/actions'

export default {
    mixins: [helper],

    store: store,
    
    route: {
        data: function(transition){
            this.setInitialSingleEvent(transition.to.params.id); 
        }
    },

    created: function(){
        this.removeAppDownNavUnlessAndroid();
    },

    // when existing from detail-page.vue, app download nav section will remove.
    destroyed: function(){
        this.removeAppDownNav();
    },

    vuex: {
        getters: {
            event: getSingleEvent
        },

        actions: {
            setSingleEvent, updateIsDataLoaded
        }
    },

    components: {
        Filters, EventCoverSection, ShareBlocSection, InfoSection, MapSection, 
        NewsSection, SmallCategorySection, EventCreatorSection, MainInfoSection, SaveForLaterSection,
        SuggestionEventsSection, BuyTicketSection, FooterLayout
    },

    methods: {
        setInitialSingleEvent: function(id){
            NProgress.start(); 
            this.$http.get('/api/event/detail/' + id).success(function(data) {
                this.setSingleEvent(data);
                NProgress.done();
            }).error(function (data, status, request){
            });
        },

        removeAppDownNavUnlessAndroid: function(){
            let condition = this.isAndriod();
            if(condition === true){
                $('.app-download-nav').show();
            }
        },

        removeAppDownNav(){
            $('.app-download-nav').hide();
        }
    }
}
</script>