Add mock configured/non-configured state to the client

parent 460eabb7
......@@ -5,7 +5,7 @@
<div class='profile-information'>
<h1 class='profile-name'>{{name}}</h1>
<p class='profile-bio'>{{bio}}</p>
<button v-if='!signedIn' id='follow-button' @click='followButtonPress' class='button'>Follow</button>
<button v-if='!signedIn && configured' id='follow-button' @click='followButtonPress' class='button'>Follow</button>
</div>
</header>
</template>
......@@ -15,7 +15,9 @@ export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
signedIn () { return this.$store.state.signedIn }
signedIn () { return this.$store.state.signedIn },
configured () { return this.$store.state.configured }
},
methods: {
followButtonPress () {
......
......@@ -4,16 +4,16 @@
<indie-header @followButtonPress='followModalActive = true' />
<!-- Main tabs with currently hard-coded content. -->
<b-tabs position="is-centered" class="block">
<b-tab-item label="Me">
<b-tabs v-model='activeTab' position='is-centered' class='block'>
<b-tab-item label='Me' :disabled='!configured'>
<content-type-filter />
<textComposer @composerChange='composerChange' v-if='signedIn'/>
<pre style='word-break: break-word;' v-if='signedIn'>{{ composerContent }}</pre>
</b-tab-item>
<b-tab-item label="Everyone"><!-- Nothing yet. --></b-tab-item>
<b-tab-item label='Search'><search /></b-tab-item>
<b-tab-item label="Settings" v-if='signedIn'><settings /></b-tab-item>
<b-tab-item label="…" v-if='signedIn'><!-- “More” tab: other features will go here. --></b-tab-item>
<b-tab-item label="Everyone" :disabled='!configured'><!-- Nothing yet. --></b-tab-item>
<b-tab-item label='Search' :disabled='!configured'><search /></b-tab-item>
<b-tab-item label="Settings" v-if='signedIn || !configured'><settings /></b-tab-item>
<b-tab-item label="…" v-if='signedIn || !configured' :disabled='!configured'><!-- “More” tab: other features will go here. --></b-tab-item>
</b-tabs>
<!-- Follow modal -->
......@@ -32,6 +32,14 @@ import settings from '~/components/settings'
import search from '~/components/search'
import textComposer from '~/components/textComposer'
const Tabs = Object.freeze({
Me: 0,
Everyone: 1,
Search: 2,
Settings: 3,
More: 4
})
export default {
components: {
indieHeader,
......@@ -45,13 +53,15 @@ export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
signedIn () { return this.$store.state.signedIn }
signedIn () { return this.$store.state.signedIn },
configured () { return this.$store.state.configured }
},
data () {
return {
followModalActive: false,
composerContent: ''
composerContent: '',
activeTab: 0
}
},
......@@ -63,6 +73,11 @@ export default {
mounted () {
console.log(`Index component mounted.`)
// Decide which tab to show based on whether the site has been
// configured yet or not.
this.activeTab = this.configured ? Tabs.Me : Tabs.Settings;
console.log(`Active tab: ${this.activeTab}`)
}
}
</script>
......
......@@ -3,7 +3,8 @@
const siteConfiguration = require('../assets/data.json')
// Mock: sign-in state
siteConfiguration.signedIn = false
siteConfiguration.signedIn = true
siteConfiguration.configured = true
export const state = () => (siteConfiguration)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment