前回はユーザーの情報を保存できるようになったので、今日はユーザー情報をページ上で表示できるようにしていきます。
今回の内容
・アバター画像の表示
・投稿にユーザー情報の表示
今回はこんな感じでやっていきます。
今回の内容
アバター画像の表示
現在はログインしている時でも、チャットフォームをクリックするとモーダルが表示されてしまうので、まずはログインしている時にはモーダルを表示させるようにします。
<template>
<div class="input-container">
+ <img v-if="isAuthenticated" :src="user.photoURL" class="avatar" />
+ <textarea
v-if="isAuthenticated"
v-model="text"
@keydown.enter="addMessage"
></textarea>
+ <textarea v-else v-model="text" @click="openLoginModal"></textarea>
<el-dialog title="" :visible.sync="dialogVisible" width="30%">
<div class="image-container">
<img src="~assets/google_sign_in.png" @click="login" />
</div>
</el-dialog>
</div>
</template>v-ifを使い、gettersで定義したisAuthenticatedを使い、ログインをしていないモーダルを表示せずに入力できるようにして、ログインをしている時にはモーダルを表示できるようにしました。
v-modelってなんだっけって少しだけ忘れていたので、参考資料を添付しておきます。
そして、isAuthenticatedをChatFormで定義していないので、定義してあげます。
<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import ElementUI from 'element-ui'
import { db, firebase } from '~/plugins/firebase'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export default {
data() {
return {
dialogVisible: false,
text: null,
}
},
+ computed: {
isAuthenticated(){
return this.$store.getters.isAuthenticated
}
},
methods: {...省略
}
</script>computedでisAuthenticatedメソッドを定義します。
これでログインしていてば、モーダルが出ないようになっているはずです。
そして次は、ユーザーのアバター画像を表示できるようにしたいと思います。
まずはユーザーの画像を表示できるようにします。
photoURLというのがgoogleで登録してあるユーザーの画像情報です。
そのphotoURLを使って、まずはHTMLの方を設定していきたいと思います。
<template>
<div class="input-container">
+ <img v-if="isAuthenticated" :src="user.photoURL" class="avatar" />
<textarea
v-if="isAuthenticated"
v-model="text"
@keydown.enter="addMessage"
></textarea>
<textarea v-else v-model="text" @click="openLoginModal"></textarea>
<el-dialog title="" :visible.sync="dialogVisible" width="30%">
<div class="image-container">
<img src="~assets/google_sign_in.png" @click="login" />
</div>
</el-dialog>
</div>
</template>:srcはv-bind:srcの省略形ですね。
それで下記のように表示されていればOKです。
それでは、投稿のメッセージの横にユーザー名とアカウント画像を表示させてみようと思います。
投稿にユーザー情報の表示
ユーザー名とユーザー画像を表示できるようにHTMLをコメントアウトを下記のように外しておきます。
それ以外は特に追加する必要はありません。
<template>
<div class="chat-container">
<div class="thumbnail-container">
<img :src="message.user.thumbnail" />
</div>
<div class="message-container">
<div class="user-name">{{ displayname }}</div>
<div class="message">{{ message.text }}</div>
</div>
</div>
</template>それでは、このdisplayNameとthumbnailに情報を入れていきたいと思います。
<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import ElementUI from 'element-ui'
import { db, firebase } from '~/plugins/firebase'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export default {
data() {
return {
dialogVisible: false,
text: null,
}
},
computed: {
user() {
return this.$store.state.user
},
isAuthenticated() {
return this.$store.getters.isAuthenticated
},
},
methods: {
...mapActions(['setUser']),
openLoginModal() {
this.dialogVisible = true
},
addMessage(event) {
if (this.enterJapaneseConversion(event)) {
return
}
const channelId = this.$route.params.id
db.collection('channels')
.doc(channelId)
.collection('messages')
.add({
text: this.text,
createdAt: new Date().getTime(),
+ user: {
+ name: this.user.displayName,
+ thumbnail: this.user.photoURL,
},
})
.then(() => {
this.text = null
})
},
enterJapaneseConversion(event) {
const codeForConversion = 229
return event.keyCode === codeForConversion
},
login() {...省略
},
}
</script>Firestoreにメッセージの内容だけを保存していたので、ユーザーの情報(ユーザー名とアイコン画像)を保存できるようにしました。
message.userがnullとなっているので、message.user.thumbnailはthumbnailだけで実行されます。
これでユーザーの情報が投稿に反映されれいるかどうかを確認してみましょう。
エラーが出てしまいました。
ユーザー情報が今現在の投稿はちゃんと保存されていないので、メッセージを削除しないといけません。
messagesのコレクションを下記のように、削除します。
削除を完了したら、再度投稿してみましょう。
上記のように違うアカウントでも投稿できるようになりました。
まとめ
これで投稿機能は完成しました。
次回はログアウト機能を追加すればほぼ完成です。
最後まで読んでいただきありがとうございました。