Последняя версия с сервера прошлого разработчика
This commit is contained in:
285
resources/js/Shared/Messanger/BoardMessage.vue
Executable file
285
resources/js/Shared/Messanger/BoardMessage.vue
Executable file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div v-if="user" class="flex flex-col h-full">
|
||||
<board-top :user="user">
|
||||
<template v-if="partnerIsBanned !== null" #menu>
|
||||
<button class="default text-gray text-sm underline" @click="bannRequest">
|
||||
{{ isBannedMessage }}
|
||||
</button>
|
||||
<!-- <button class="default mt-2 text-gray text-sm underline" @click="exitRoom">
|
||||
Покинуть беседу
|
||||
</button> -->
|
||||
</template>
|
||||
</board-top>
|
||||
<div class="px-2 sm:px-5 xl:px-10 flex bg-indigo-200 border-b border-indigo-300">
|
||||
<div class="flex-1 pt-5 pb-3">
|
||||
<textarea ref="textarea" v-model="textMessage"
|
||||
rows="3"
|
||||
autofocus
|
||||
name="comment" class="placeholder-gray bg-indigo-200 text-white max-h-56 block w-full py-3 border-0 resize-none focus:ring-0 text-sm sm:text-base"
|
||||
placeholder="Напишите сообщение ..."
|
||||
:disabled="frozen"
|
||||
@keyup.ctrl.enter="createMessage"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!frozen" class="mt-5 ml-3 flex-shrink-0 text-pink"
|
||||
@click="createMessage"
|
||||
>
|
||||
<button class="default">
|
||||
<svg class="w-8 h-8 flex-shrink-0">
|
||||
<use xlink:href="#arrow-circle"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-5 lg:py-10 px-2 sm:px-5 xl:px-10 space-y-5 flex-1 bg-indigo-400">
|
||||
<div v-if="frozen" class="p-3 text-sm rounded-md bg-orange text-white text-center">
|
||||
Вы не можете отправить сообщение пользователю
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="p-3 text-sm rounded-md bg-pink text-white text-center">
|
||||
Ошибка загрузки данных
|
||||
</div>
|
||||
|
||||
<div v-for="(messageCollection, key) in messages" :key="key"
|
||||
class="space-y-5"
|
||||
>
|
||||
<div class="text-gray-light text-xs text-right">
|
||||
{{ key }}
|
||||
</div>
|
||||
|
||||
<board-message-item v-for="message in messageCollection"
|
||||
:key="message.id"
|
||||
:ref="el => domNodeFn(el, message.id)"
|
||||
:profile-id="user.id"
|
||||
:user-message="message"
|
||||
@remove="removeMessage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="loading" class="flex items-center justify-center">
|
||||
<svg class="animate-spin h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24"
|
||||
>
|
||||
<circle class="opacity-25" cx="12"
|
||||
cy="12" r="10"
|
||||
stroke="currentColor" stroke-width="4"
|
||||
></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-10 text-center">
|
||||
<h2 class="text-lg xl:text-3xl font-bold text-indigo-100">
|
||||
Выберите пользователя
|
||||
|
||||
<board-friend-list />
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useAutoresizeTextarea } from '@/includes/composables'
|
||||
import { useInfinityScroll } from '@/includes/composables/useInfinityScroll'
|
||||
import { ref, watch, toRef, computed } from 'vue'
|
||||
import { Inertia } from '@inertiajs/inertia'
|
||||
import axios from 'axios'
|
||||
|
||||
import BoardMessageItem from './BoardMessageItem.vue'
|
||||
import BoardTop from './BoardTop.vue'
|
||||
import BoardFriendList from './BoardFriendList.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
BoardTop,
|
||||
BoardMessageItem,
|
||||
BoardFriendList
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
roomId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
frozen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
search: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
emits: {
|
||||
'disable': null,
|
||||
'last-message': null,
|
||||
'change-room': null,
|
||||
'leave-room': null,
|
||||
},
|
||||
|
||||
setup(props, {emit}){
|
||||
const roomId = toRef(props, 'roomId')
|
||||
|
||||
const partnerIsBanned = ref(null)
|
||||
const textarea = ref()
|
||||
const textMessage = ref()
|
||||
useAutoresizeTextarea(textarea)
|
||||
|
||||
const { domNodeFn, cursor, loading, error, refetchApi, data: messages } = useInfinityScroll(async () => {
|
||||
const url = props.search ? `messenger/${roomId.value}?search=${props.search}&cursor=${cursor.value}` : `messenger/${roomId.value}?cursor=${cursor.value}`
|
||||
const res = await axios.get(url)
|
||||
return res.data
|
||||
})
|
||||
|
||||
const checkRequestBanned = () => {
|
||||
axios.post(route('messenger.banned.user'), {
|
||||
params: {
|
||||
user: props.user.id,
|
||||
}
|
||||
}).then(response => {
|
||||
partnerIsBanned.value = response.data.banned
|
||||
})
|
||||
}
|
||||
|
||||
watch(roomId, (id) => {
|
||||
if(id){
|
||||
refetchApi()
|
||||
checkRequestBanned()
|
||||
partnerIsBanned.value = null
|
||||
}
|
||||
if(textarea.value){
|
||||
textarea.value.focus()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch(loading, (loading) => {
|
||||
emit('disable', loading)
|
||||
})
|
||||
|
||||
const createMessage = () => {
|
||||
if(!textMessage.value.trim()){
|
||||
alert('Введите сообщение')
|
||||
return
|
||||
}
|
||||
axios.post('messenger', {
|
||||
params: {
|
||||
message: textMessage.value,
|
||||
room: roomId.value,
|
||||
}
|
||||
}).then(response => {
|
||||
if(!response.data){
|
||||
alert('Вы не можете отправить сообщение данному пользователю')
|
||||
return
|
||||
}
|
||||
textMessage.value = ''
|
||||
const k = response.data.keyGroupDate // keyGroupDate - ключ, eg 28.11.21
|
||||
if(messages.value[k]){
|
||||
messages.value[k].unshift(response.data)
|
||||
}else{
|
||||
messages.value = { [k]: [ response.data ], ...messages.value }
|
||||
}
|
||||
emit('last-message', response.data)
|
||||
})
|
||||
}
|
||||
|
||||
const bannRequest = () => {
|
||||
Inertia.post(route('messenger.banned.room'), { room: roomId.value },
|
||||
{
|
||||
preserveState: true,
|
||||
onSuccess: () => {
|
||||
checkRequestBanned()
|
||||
emit('change-room', roomId.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const removeMessage = (message) => {
|
||||
// console.log(id)
|
||||
removeMessageRequest(message)
|
||||
}
|
||||
|
||||
const removeMessageRequest = (message) => {
|
||||
|
||||
const group = messages.value[message.group]
|
||||
const count = group.length
|
||||
const index = messages.value[message.group].findIndex((item) => item.id === message.id)
|
||||
axios.delete(route('messenger.message.remove', {'id': message.id})).then(response => {
|
||||
if(count === 1){
|
||||
delete messages.value[message.group]
|
||||
}else{
|
||||
// delete messages.value[message.group][index]
|
||||
messages.value[message.group] = messages.value[message.group].filter((i) => i.id != messages.value[message.group][index].id)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// const removeMessageRequest = (message) => {
|
||||
// // console.log(message)
|
||||
// // console.log(messages.value)
|
||||
// const group = messages.value[message.group]
|
||||
// const count = group.length
|
||||
// const index = messages.value[message.group].findIndex((item) => item.id === message.id)
|
||||
|
||||
// Inertia.delete(route('messenger.message.remove', {'id': message.id}),
|
||||
// {
|
||||
// preserveState: true,
|
||||
// onSuccess: () => {
|
||||
// if(count === 1){
|
||||
// delete messages.value[message.group]
|
||||
// }else{
|
||||
// delete messages.value[message.group][index]
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// })
|
||||
// }
|
||||
|
||||
// const exitRoom = () => {
|
||||
// Inertia.post(route('messenger.leave.room'), { room: roomId.value },
|
||||
// {
|
||||
// preserveState: true,
|
||||
// onSuccess: () => {
|
||||
// emit('leave-room')
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
const isBannedMessage = computed(() => {
|
||||
if(partnerIsBanned.value === null){
|
||||
return false
|
||||
}
|
||||
if(partnerIsBanned.value){
|
||||
return 'Убрать из черного списка'
|
||||
}
|
||||
return 'Добавить в черный список'
|
||||
})
|
||||
|
||||
|
||||
|
||||
return {
|
||||
textarea,
|
||||
textMessage,
|
||||
loading,
|
||||
messages,
|
||||
createMessage,
|
||||
error,
|
||||
domNodeFn,
|
||||
bannRequest,
|
||||
isBannedMessage,
|
||||
partnerIsBanned,
|
||||
removeMessage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user