109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<template>
|
|
<Page class="page--welcome">
|
|
<Welcome />
|
|
<RecentSection class="section" v-if="isSectionActive('RecentSection') && hasRecentContent" @sectionChange="changeSection" @contentChanged="onContentChanged"/>
|
|
<TagsSection class="section tags-section" v-if="isSectionActive('TagsSection')" @sectionChange="changeSection"/>
|
|
<DatasetsSection v-if="isFirstTimeViewingDashboard" class="section" @contentChanged="onContentChanged"/>
|
|
<MapsSection v-if="isFirstTimeViewingDashboard" class="section section--noBorder" @contentChanged="onContentChanged"/>
|
|
<MapsSection v-if="!isFirstTimeViewingDashboard" class="section" @contentChanged="onContentChanged"/>
|
|
<DatasetsSection v-if="!isFirstTimeViewingDashboard" class="section section--noBorder" @contentChanged="onContentChanged"/>
|
|
<QuotaSection></QuotaSection>
|
|
|
|
<router-view name="onboarding-modal"/>
|
|
</Page>
|
|
</template>
|
|
|
|
<script>
|
|
import Welcome from './WelcomeSection/Welcome.vue';
|
|
import TagsSection from './TagsSection/TagsSection.vue';
|
|
import RecentSection from './RecentSection/RecentSection.vue';
|
|
import MapsSection from './MapsSection/MapsSection.vue';
|
|
import DatasetsSection from './DatasetsSection/DatasetsSection.vue';
|
|
import QuotaSection from './QuotaSection/QuotaSection.vue';
|
|
import Page from 'new-dashboard/components/Page';
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
Welcome,
|
|
TagsSection,
|
|
RecentSection,
|
|
MapsSection,
|
|
DatasetsSection,
|
|
QuotaSection,
|
|
Page
|
|
},
|
|
beforeMount () {
|
|
this.$store.dispatch('maps/resetFilters');
|
|
this.$store.dispatch('externalMaps/resetFilters');
|
|
this.$store.dispatch('datasets/resetFilters');
|
|
|
|
this.$store.dispatch('maps/setResultsPerPage', 6);
|
|
// this.$store.dispatch('externalMaps/setResultsPerPage', 6);
|
|
this.$store.dispatch('datasets/setResultsPerPage', 6);
|
|
|
|
// If user is viewer, show shared maps and datasets
|
|
if (this.$store.getters['user/isViewer']) {
|
|
this.$store.dispatch('maps/filter', 'shared');
|
|
this.$store.dispatch('datasets/filter', 'shared');
|
|
}
|
|
|
|
this.$store.dispatch('externalMaps/init')
|
|
.then(() => {
|
|
this.$store.dispatch('recentContent/fetch');
|
|
this.$store.dispatch('externalMaps/fetch');
|
|
this.$store.dispatch('datasets/fetch');
|
|
});
|
|
this.$store.dispatch('maps/fetch');
|
|
},
|
|
data () {
|
|
return {
|
|
activeSection: this.$route.query.section || 'RecentSection'
|
|
};
|
|
},
|
|
computed: {
|
|
hasRecentContent () {
|
|
return this.$store.getters['recentContent/hasRecentContent'] ||
|
|
this.$store.state.recentContent.isFetching;
|
|
},
|
|
isFirstTimeViewingDashboard () {
|
|
return this.$store.state.config.isFirstTimeViewingDashboard;
|
|
}
|
|
},
|
|
methods: {
|
|
isSectionActive (activeSection) {
|
|
return activeSection === this.activeSection;
|
|
},
|
|
changeSection (nextActiveSection) {
|
|
this.activeSection = nextActiveSection;
|
|
},
|
|
onContentChanged () {
|
|
this.$store.dispatch('recentContent/fetch');
|
|
this.$store.dispatch('maps/fetch');
|
|
this.$store.dispatch('externalMaps/fetch');
|
|
this.$store.dispatch('datasets/fetch');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'new-dashboard/styles/variables';
|
|
|
|
.section {
|
|
position: relative;
|
|
|
|
&--maps {
|
|
z-index: $z-index__stack-context--first;
|
|
}
|
|
|
|
&--datasets {
|
|
z-index: $z-index__stack-context--second;
|
|
}
|
|
}
|
|
|
|
.tags-section {
|
|
padding-bottom: 104px;
|
|
}
|
|
</style>
|