2023-03-17 10:59:23 +00:00
|
|
|
<template>
|
|
|
|
<header class="layout__col-2-1 header header--space-between">
|
2024-05-02 14:25:42 +00:00
|
|
|
<PageHeaderMenuItems />
|
2023-03-17 10:59:23 +00:00
|
|
|
<DeviceSelector
|
|
|
|
:device-type-selected="deviceTypeSelected"
|
|
|
|
@selected="actionSetDeviceTypeSelected"
|
|
|
|
/>
|
2024-05-02 14:25:42 +00:00
|
|
|
<PageActions />
|
2023-03-17 10:59:23 +00:00
|
|
|
</header>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2023-06-22 14:23:00 +00:00
|
|
|
import DeviceSelector from '@baserow/modules/builder/components/page/header/DeviceSelector'
|
|
|
|
import PageHeaderMenuItems from '@baserow/modules/builder/components/page/header/PageHeaderMenuItems'
|
|
|
|
import PageActions from '@baserow/modules/builder/components/page/header/PageActions'
|
2023-03-17 10:59:23 +00:00
|
|
|
import { mapActions, mapGetters } from 'vuex'
|
2023-03-22 09:54:36 +00:00
|
|
|
|
2023-03-17 10:59:23 +00:00
|
|
|
export default {
|
|
|
|
name: 'PageHeader',
|
2023-03-22 09:54:36 +00:00
|
|
|
components: {
|
|
|
|
PageHeaderMenuItems,
|
|
|
|
DeviceSelector,
|
2023-04-27 06:48:58 +00:00
|
|
|
PageActions,
|
2023-03-22 09:54:36 +00:00
|
|
|
},
|
2023-03-17 10:59:23 +00:00
|
|
|
computed: {
|
|
|
|
...mapGetters({ deviceTypeSelected: 'page/getDeviceTypeSelected' }),
|
|
|
|
deviceTypes() {
|
|
|
|
return Object.values(this.$registry.getOrderedList('device'))
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
if (this.deviceTypeSelected === null) {
|
|
|
|
this.$store.dispatch(
|
|
|
|
'page/setDeviceTypeSelected',
|
|
|
|
this.deviceTypes[0].getType()
|
|
|
|
)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions({
|
|
|
|
actionSetDeviceTypeSelected: 'page/setDeviceTypeSelected',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|