other components... (2)

src/views/messages/messages.ts

@@ -0,0 +1,276 @@
+import { defineComponent, ref, computed, watch } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useQuasar } from 'quasar'
+
+import { tools } from '@store/Modules/tools'
+
+import { IChat, IMessage, IMsgUsers, StatusMessage } from 'model'
+import MixinUsers from '../../mixins/mixin-users'
+import { CMyAvatar } from '../../components/CMyAvatar'
+import { useRoute, useRouter } from 'vue-router'
+import { useMessageStore } from '@store/MessageStore'
+import { func_tools } from '@store/Modules/toolsext'
+
+
+export default defineComponent({
+  name: 'Messages',
+  props: {
+    mystr: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    myval: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    mybool: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  components: { CMyAvatar },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const messageStore = useMessageStore()
+    const $router = useRouter()
+    const route = useRoute()
+
+    const {
+      getUsernameChatByMsg, getNumMsg,
+      getImgByMsg, getMsgText, Username
+    } = MixinUsers()
+
+    const mydrawer = ref(true)
+    const miniState = ref(false)
+    const usernameloading = ref(<string | undefined>'')
+    const widthdrawer = ref(300)
+    const chatsel = ref(<IChat>{
+      username: '',
+      lasttimeActive: new Date()
+    })
+    const mytexttosend = ref('')
+    const loading = ref(false)
+
+    const lasts_messages = computed(() => messageStore.getlasts_messages)
+
+    // function users_msg_saved: IMsgUsers[] = []
+
+
+    function getLastUserChatted() {
+      const lastmsg: IMessage = messageStore.getlasts_messages().slice(-1)[0]
+      console.log('lastmsg', lastmsg)
+      if (lastmsg) {
+        return (lastmsg.origin!.username !== Username()) ? lastmsg.origin!.username : lastmsg.origin!.username
+      } else {
+        return ''
+      }
+    }
+
+    function getlastdataread(username: string): any {
+      const myrec = msgchat(username)
+      // Get msg for this chat
+      const lastdata: any = (myrec) ? myrec.lastdataread : tools.getLastDateReadReset()
+      console.table(myrec)
+      let mydate = ''
+      if (!tools.isIsoDate(lastdata))
+        mydate = lastdata.toISOString()
+      else
+        return lastdata
+
+      // console.log('getlastdataread', mydate)
+      return mydate
+    }
+
+    function refreshdata(username: string) {
+      loading.value = true
+
+      chatsel.value.username = ''
+
+      return messageStore.updateMsgDataFromServer({
+        username,
+        lastdataread: getlastdataread(username)
+      }).then((ris) => {
+        usernameloading.value = username
+        chatsel.value.username = username
+        loading.value = false
+
+        const element = document.getElementById('last')
+        tools.scrollToElement(element)
+
+        // changemsgs('', '')
+
+      }).catch((err) => {
+        loading.value = false
+      })
+    }
+
+
+    const changeusername = watch(() => route.params.un, (newval, oldval) => {
+      if (route.params.un === undefined || route.params.un === ':un') {
+        usernameloading.value = getLastUserChatted()
+      } else {
+        let mystr2: any = route.params.un ? route.params.un : ''
+        usernameloading.value = mystr2
+      }
+
+      if (!miniState.value && tools.isMobile()) {
+        miniState.value = true
+      }
+
+      if (usernameloading.value) {
+        // Retrieve last msgs data from the server
+        refreshdata(usernameloading.value)
+      }
+    })
+
+    function styletextbar() {
+
+      let mystr = ''
+
+      if (mydrawer.value) {
+        if (!miniState.value)
+          mystr = `left: ${widthdrawer.value}px;`
+        else
+          mystr = 'left: 57px;'
+      } else {
+        mystr = 'left: 0;'
+      }
+
+      // console.log('tools.getwidth', tools.getwidth)
+
+      mystr += ` width: ${tools.getwidth($q) - widthdrawer.value - 40 - 300}px; `
+
+      return mystr
+    }
+
+    function showNotif(msgcode: any) {
+      tools.showNotif($q, (msgcode))
+    }
+
+    function drawerClick(e: any) {
+      // if in "mini" state and user
+      // click on drawer, we switch it to "normal" mode
+      if (miniState.value) {
+        miniState.value = false
+
+        // notice we have registered an event with capture flag;
+        // we need to stop further propagation as this click is
+        // intended for switching drawer to "normal" mode only
+        e.stopPropagation()
+      }
+    }
+
+    function getheight() {
+      // return height()
+      return $q.screen.height - 43 // .toolbar
+    }
+
+    function isMenuActive(username: string) {
+      return chatsel.value.username === username
+    }
+
+    function selChat(mymsg: IMessage) {
+      if (chatsel.value.username !== mymsg.dest!.username)
+        $router.replace('/messages/' + mymsg.dest!.username)
+      else {
+        // refresh
+        refreshdata(chatsel.value.username)
+      }
+    }
+
+    function msgchat(username: string): any {
+      // Get msg for this chat
+      if (messageStore.users_msg)
+        return messageStore.users_msg.find((rec: IMsgUsers) => rec.username === username)
+      // return users_msg_saved[username]
+    }
+
+    function msgchat_records(): IMessage[] {
+      const myrec = msgchat(chatsel.value.username)
+      // console.log('msgchat_records', myrec)
+      // Get msg for this chat
+      return (myrec) ? myrec.msgs : []
+    }
+
+    function sendMsg() {
+
+      const data: IMessage = {
+        dest: {
+          idapp: process.env.APP_ID,
+          username: chatsel.value.username
+        },
+        message: mytexttosend.value
+      }
+      data.dest!.username = chatsel.value.username
+      data.message = mytexttosend.value
+
+      mytexttosend.value = ''
+
+      messageStore.SendMsgEvent(data).then((ris) => {
+        data.status = StatusMessage.Sending
+
+        const element = document.getElementById('last')
+        tools.scrollToElement(element)
+
+        if (!ris)
+          tools.showNegativeNotif($q, t('cal.sendmsg_error'))
+
+        // tools.showPositiveNotif(self.$q, self.('cal.sendmsg_sent'))
+        // else
+      })
+    }
+
+    function loadMorePosts() {
+      // ....
+    }
+
+
+    // @ts-ignore
+    function myonScroll({ target: { scrollTop, clientHeight, scrollHeight } }: {scrollTop: number, clientHeight: number, scrollHeight: number}) {
+      if (scrollTop + clientHeight >= scrollHeight) {
+        loadMorePosts()
+      }
+    }
+
+    function created() {
+
+      changeusername()
+    }
+
+    created()
+
+    return {
+      msgchat_records,
+      msgchat,
+      sendMsg,
+      selChat,
+      isMenuActive,
+      getheight,
+      drawerClick,
+      showNotif,
+      styletextbar,
+      lasts_messages,
+      myonScroll,
+      widthdrawer,
+      chatsel,
+      mytexttosend,
+      loading,
+      mydrawer,
+      getUsernameChatByMsg,
+      getNumMsg,
+      getImgByMsg,
+      getMsgText,
+      Username,
+      func_tools,
+      tools,
+    }
+  }
+})