cartodb/lib/assets/javascripts/new-dashboard/App.vue
2020-06-15 10:58:47 +08:00

98 lines
2.6 KiB
Vue

<template>
<div id="app">
<header class="header" :class="{ 'has-user-notification': isNotificationVisible }">
<NotificationWarning v-if="isNotificationVisible" :htmlBody=user.notification />
<NavigationBar
:user="user"
:baseUrl="baseUrl"
:notificationsCount="notificationsCount"
:isNotificationVisible=isNotificationVisible
:isFirstTimeInDashboard="isFirstTimeInDashboard"
bundleType="dashboard"/>
</header>
<router-view/>
<Footer :user="user"/>
<BackgroundPollingView ref="backgroundPollingView" :routeType="$route.name"/>
<MamufasImportView ref="mamufasImportView"/>
</div>
</template>
<script>
import NavigationBar from 'new-dashboard/components/NavigationBar/NavigationBar';
import NotificationWarning from 'new-dashboard/components/NotificationWarning';
import Footer from 'new-dashboard/components/Footer';
import BackgroundPollingView from './components/Backbone/BackgroundPollingView.vue';
import MamufasImportView from './components/Backbone/MamufasImportView.vue';
import { sendMetric, MetricsTypes } from 'new-dashboard/core/metrics';
export default {
name: 'App',
components: {
NavigationBar,
NotificationWarning,
BackgroundPollingView,
Footer,
MamufasImportView
},
created () {
sendMetric(MetricsTypes.VISITED_PRIVATE_PAGE, { page: 'dashboard' });
},
computed: {
user () {
return this.$store.state.user;
},
isNotificationVisible () {
return !!this.$store.getters['user/isNotificationVisible'];
},
baseUrl () {
return this.$store.state.user.base_url;
},
notificationsCount () {
return this.$store.state.user.organizationNotifications.length;
},
isFirstTimeInDashboard () {
return this.$store.state.config.isFirstTimeViewingDashboard;
}
},
provide () {
const backboneViews = {};
Object.defineProperty(backboneViews, 'backgroundPollingView', {
enumerable: true,
get: () => this.$refs.backgroundPollingView
});
Object.defineProperty(backboneViews, 'mamufasImportView', {
enumerable: true,
get: () => this.$refs.mamufasImportView
});
return { backboneViews };
}
};
</script>
<style lang="scss" scoped>
@import 'new-dashboard/styles/variables';
#app {
font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
}
.header {
padding-top: $header__height;
&.has-user-notification {
padding-top: $header__height + $notification-warning__height;
}
}
</style>