VC-HB3-Accelerator/DLE
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

ваше сообщение коммита

Browse Source
This commit is contained in:
Alex
2025-06-19 20:19:09 +03:00
parent 90a088e021
commit f728c5f5da
24 changed files with 512 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/BaseLayout.vue
View File

@@ -176,8 +176,8 @@ onMounted(() => {
if (savedSidebarState !== null) {
showWalletSidebar.value = savedSidebarState;
} else {
showWalletSidebar.value = true;
setToStorage('showWalletSidebar', true);
showWalletSidebar.value = false; // по умолчанию закрыт
setToStorage('showWalletSidebar', false);
}
});
</script>

94
frontend/src/components/ContactTable.vue
View File

@@ -4,6 +4,17 @@
<h2>Контакты</h2>
<button class="close-btn" @click="$emit('close')">×</button>
</div>
<div class="filters-panel">
<input v-model="filterName" placeholder="Имя" />
<input v-model="filterEmail" placeholder="Email" />
<input v-model="filterTelegram" placeholder="Telegram" />
<input v-model="filterWallet" placeholder="Кошелек" />
<input v-model="filterDateFrom" type="date" placeholder="Дата от" />
<input v-model="filterDateTo" type="date" placeholder="Дата до" />
<label class="checkbox-label">
<input type="checkbox" v-model="filterOnlyNewMessages" /> Только с новыми сообщениями
</label>
</div>
<table class="contact-table">
<thead>
<tr>
@@ -16,13 +27,14 @@
</tr>
</thead>
<tbody>
<tr v-for="contact in contacts" :key="contact.id">
<tr v-for="contact in filteredContactsArray" :key="contact.id" :class="{ 'new-contact-row': newIds.includes(contact.id) }">
<td>{{ contact.name || '-' }}</td>
<td>{{ contact.email || '-' }}</td>
<td>{{ contact.telegram || '-' }}</td>
<td>{{ contact.wallet || '-' }}</td>
<td>{{ formatDate(contact.created_at) }}</td>
<td>{{ contact.created_at ? new Date(contact.created_at).toLocaleString() : '-' }}</td>
<td>
<span v-if="newMsgUserIds.includes(String(contact.id))" class="new-msg-icon" title="Новое сообщение">✉️</span>
<button class="details-btn" @click="showDetails(contact)">Подробнее</button>
</td>
</tr>
@@ -32,17 +44,58 @@
</template>
<script setup>
import { defineProps } from 'vue';
import { defineProps, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
contacts: { type: Array, required: true }
contacts: { type: Array, default: () => [] },
newContacts: { type: Array, default: () => [] },
newMessages: { type: Array, default: () => [] },
markMessagesAsReadForUser: { type: Function, default: null },
markContactAsRead: { type: Function, default: null }
});
const contactsArray = computed(() => Array.from(props.contacts || []));
const newIds = computed(() => props.newContacts.map(c => c.id));
const newMsgUserIds = computed(() => props.newMessages.map(m => String(m.user_id)));
const router = useRouter();
// Фильтры
const filterName = ref('');
const filterEmail = ref('');
const filterTelegram = ref('');
const filterWallet = ref('');
const filterDateFrom = ref('');
const filterDateTo = ref('');
const filterOnlyNewMessages = ref(false);
const filteredContactsArray = computed(() => {
return contactsArray.value.filter(contact => {
const nameMatch = !filterName.value || (contact.name || '').toLowerCase().includes(filterName.value.toLowerCase());
const emailMatch = !filterEmail.value || (contact.email || '').toLowerCase().includes(filterEmail.value.toLowerCase());
const telegramMatch = !filterTelegram.value || (contact.telegram || '').toLowerCase().includes(filterTelegram.value.toLowerCase());
const walletMatch = !filterWallet.value || (contact.wallet || '').toLowerCase().includes(filterWallet.value.toLowerCase());
let dateFromMatch = true, dateToMatch = true;
if (filterDateFrom.value && contact.created_at) {
dateFromMatch = new Date(contact.created_at) >= new Date(filterDateFrom.value);
}
if (filterDateTo.value && contact.created_at) {
dateToMatch = new Date(contact.created_at) <= new Date(filterDateTo.value);
}
const newMsgMatch = !filterOnlyNewMessages.value || newMsgUserIds.value.includes(String(contact.id));
return nameMatch && emailMatch && telegramMatch && walletMatch && dateFromMatch && dateToMatch && newMsgMatch;
});
});
function formatDate(date) {
if (!date) return '-';
return new Date(date).toLocaleString();
}
function showDetails(contact) {
async function showDetails(contact) {
if (props.markContactAsRead) {
await props.markContactAsRead(contact.id);
}
if (props.markMessagesAsReadForUser) {
props.markMessagesAsReadForUser(contact.id);
}
router.push({ name: 'contact-details', params: { id: contact.id } });
}
</script>
@@ -144,4 +197,35 @@ function showDetails(contact) {
.details-btn:hover {
background: #138496;
}
.new-contact-row {
background: #e6ffe6 !important;
transition: background 0.3s;
}
.filters-panel {
display: flex;
gap: 10px;
margin-bottom: 18px;
align-items: center;
}
.filters-panel input {
padding: 6px 10px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-size: 1em;
min-width: 110px;
}
.filters-panel input[type="checkbox"] {
margin-right: 4px;
}
.checkbox-label {
display: flex;
align-items: center;
font-size: 0.98em;
user-select: none;
}
.new-msg-icon {
color: #ff9800;
font-size: 1.2em;
margin-left: 4px;
}
</style>

149
frontend/src/composables/useContactsWebSocket.js
View File

@@ -1,55 +1,150 @@
import { ref, onMounted, onUnmounted } from 'vue';
import { getContacts } from '../services/contactsService';
import { getAllMessages } from '../services/messagesService';
import axios from 'axios';
export function useContactsAndMessagesWebSocket() {
const contacts = ref([]);
const messages = ref([]);
const readContacts = ref([]); // id просмотренных контактов
const newContacts = ref([]);
const newMessages = ref([]);
const readUserIds = ref([]);
const lastReadMessageDate = ref({});
let ws = null;
let lastContactId = null;
let lastMessageId = null;
let lastMessageDate = null;
// Загружаем прочитанные userId из localStorage при инициализации
try {
const stored = localStorage.getItem('readUserIds');
if (stored) {
readUserIds.value = JSON.parse(stored);
}
} catch (e) {
readUserIds.value = [];
}
// Загружаем lastReadMessageDate из localStorage при инициализации
try {
const stored = localStorage.getItem('lastReadMessageDate');
if (stored) {
lastReadMessageDate.value = JSON.parse(stored);
}
} catch (e) {
lastReadMessageDate.value = {};
}
async function fetchContacts() {
const all = await getContacts();
contacts.value = all;
if (lastContactId) {
newContacts.value = all.filter(c => c.id > lastContactId);
} else {
newContacts.value = [];
updateNewContacts();
}
async function fetchContactsReadStatus() {
try {
const { data } = await axios.get('/api/users/read-contacts-status');
readContacts.value = data || [];
} catch (e) {
readContacts.value = [];
}
updateNewContacts();
}
function updateNewContacts() {
if (!contacts.value.length) {
newContacts.value = [];
return;
}
newContacts.value = contacts.value.filter(c => !readContacts.value.includes(c.id));
}
async function markContactAsRead(contactId) {
try {
await axios.post('/api/users/mark-contact-read', { contactId });
if (!readContacts.value.includes(contactId)) {
readContacts.value.push(contactId);
updateNewContacts();
}
} catch (e) {}
}
async function fetchReadStatus() {
try {
const { data } = await axios.get('/api/messages/read-status');
lastReadMessageDate.value = data || {};
} catch (e) {
lastReadMessageDate.value = {};
}
if (all.length) lastContactId = Math.max(...all.map(c => c.id));
}
async function fetchMessages() {
const all = await getAllMessages();
messages.value = all;
if (lastMessageId) {
newMessages.value = all.filter(m => m.id > lastMessageId);
} else {
newMessages.value = [];
}
if (all.length) lastMessageId = Math.max(...all.map(m => m.id));
filterNewMessages();
}
onMounted(() => {
fetchContacts();
fetchMessages();
function markMessagesAsRead() {
if (messages.value.length) {
lastMessageDate = Math.max(...messages.value.map(m => new Date(m.created_at).getTime()));
newMessages.value = [];
}
}
async function markMessagesAsReadForUser(userId) {
// Найти максимальный created_at для сообщений этого пользователя
const userMessages = messages.value.filter(m => m.user_id === userId && m.sender_type === 'user');
if (userMessages.length) {
const maxDate = Math.max(...userMessages.map(m => new Date(m.created_at).getTime()));
const maxDateISO = new Date(maxDate).toISOString();
try {
await axios.post('/api/messages/mark-read', { userId, lastReadAt: maxDateISO });
lastReadMessageDate.value[userId] = maxDateISO;
} catch (e) {}
}
filterNewMessages();
}
function filterNewMessages() {
newMessages.value = messages.value.filter(m => {
if (m.sender_type !== 'user') return false;
const lastRead = lastReadMessageDate.value[m.user_id];
if (!lastRead) return true;
return new Date(m.created_at).getTime() > new Date(lastRead).getTime();
});
}
function setupWebSocket() {
ws = new WebSocket('ws://localhost:8000');
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if (data.type === 'contacts-updated') fetchContacts();
if (data.type === 'messages-updated') fetchMessages();
} catch (e) {}
const data = JSON.parse(event.data);
if (data.type === 'contacts-updated') {
fetchContacts();
}
if (data.type === 'messages-updated') {
fetchMessages();
}
};
}
onMounted(async () => {
await fetchContactsReadStatus();
await fetchContacts();
await fetchReadStatus();
await fetchMessages();
setupWebSocket();
});
onUnmounted(() => {
if (ws) ws.close();
});
onUnmounted(() => { if (ws) ws.close(); });
function markContactsAsRead() { newContacts.value = []; }
function markMessagesAsRead() { newMessages.value = []; }
return { contacts, messages, newContacts, newMessages, markContactsAsRead, markMessagesAsRead };
return {
contacts,
newContacts,
messages,
newMessages,
markContactAsRead,
markMessagesAsRead,
markMessagesAsReadForUser,
readUserIds
};
}

2
frontend/src/services/contactsService.js
View File

@@ -29,7 +29,7 @@ export default {
}
return null;
}
};
};
export async function getContacts() {
const res = await fetch('/api/users');

2
frontend/src/services/messagesService.js
View File

@@ -6,7 +6,7 @@ export default {
const { data } = await axios.get(`/api/messages?userId=${userId}`);
return data;
}
};
};
export async function getAllMessages() {
const { data } = await axios.get('/api/messages');

43
frontend/src/views/ContactsView.vue
View File

@@ -1,19 +1,11 @@
<template>
<BaseLayout>
<div class="contacts-tabs">
<button :class="{active: tab==='all'}" @click="tab='all'">Все контакты</button>
<button :class="{active: tab==='newContacts'}" @click="tab='newContacts'; markContactsAsRead()">
Новые контакты
<span v-if="newContacts.length" class="badge">{{ newContacts.length }}</span>
</button>
<button :class="{active: tab==='newMessages'}" @click="tab='newMessages'; markMessagesAsRead()">
Новые сообщения
<span v-if="newMessages.length" class="badge">{{ newMessages.length }}</span>
</button>
<div class="contacts-header">
<span>Контакты</span>
<span v-if="newContacts.length" class="badge">+{{ newContacts.length }}</span>
</div>
<ContactTable v-if="tab==='all'" :contacts="contacts" />
<ContactTable v-if="tab==='newContacts'" :contacts="newContacts" />
<MessagesTable v-if="tab==='newMessages'" :messages="newMessages" />
<ContactTable :contacts="contacts" :new-contacts="newContacts" :new-messages="newMessages" @markNewAsRead="markContactsAsRead"
:markMessagesAsReadForUser="markMessagesAsReadForUser" :markContactAsRead="markContactAsRead" />
</BaseLayout>
</template>
@@ -22,13 +14,11 @@ import { ref } from 'vue';
import { useRouter } from 'vue-router';
import BaseLayout from '../components/BaseLayout.vue';
import ContactTable from '../components/ContactTable.vue';
import MessagesTable from '../components/MessagesTable.vue';
import { useContactsAndMessagesWebSocket } from '../composables/useContactsWebSocket';
const tab = ref('all');
const {
contacts, newContacts, newMessages,
markContactsAsRead, markMessagesAsRead
markContactsAsRead, markMessagesAsReadForUser, markContactAsRead
} = useContactsAndMessagesWebSocket();
const router = useRouter();
@@ -42,26 +32,13 @@ function goBack() {
</script>
<style scoped>
.contacts-tabs {
.contacts-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.contacts-tabs button {
background: #f5f7fa;
border: none;
border-radius: 8px 8px 0 0;
padding: 10px 22px;
font-size: 1.08rem;
cursor: pointer;
position: relative;
transition: background 0.18s, color 0.18s;
}
.contacts-tabs button.active {
background: #fff;
color: #17a2b8;
font-size: 1.2rem;
font-weight: 600;
box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
margin-bottom: 24px;
}
.badge {
background: #dc3545;

1
frontend/src/views/CrmView.vue
View File

@@ -95,7 +95,6 @@ function connectWebSocket() {
// Функция для перехода на домашнюю страницу и открытия боковой панели
const goToHomeAndShowSidebar = () => {
setToStorage('showWalletSidebar', true);
router.push({ name: 'home' });
};

1
frontend/src/views/SettingsView.vue
View File

@@ -59,7 +59,6 @@ const handleAuthEvent = (eventData) => {
};
const goToHomeAndShowSidebar = () => {
setToStorage('showWalletSidebar', true);
router.push({ name: 'home' });
};

190
frontend/src/views/contacts/ContactDetailsView.vue
View File

@@ -1,103 +1,103 @@
<template>
<BaseLayout>
<div class="contact-details-page">
<div v-if="isLoading">Загрузка...</div>
<div v-else-if="!contact">Контакт не найден</div>
<div v-else class="contact-details-content">
<div class="contact-details-header">
<h2>Детали контакта</h2>
<div class="contact-details-page">
<div v-if="isLoading">Загрузка...</div>
<div v-else-if="!contact">Контакт не найден</div>
<div v-else class="contact-details-content">
<div class="contact-details-header">
<h2>Детали контакта</h2>
<button class="close-btn" @click="goBack">×</button>
</div>
<div class="contact-info-block">
<div>
<strong>Имя:</strong>
<input v-model="editableName" class="edit-input" @blur="saveName" @keyup.enter="saveName" />
<span v-if="isSavingName" class="saving">Сохранение...</span>
</div>
<div><strong>Email:</strong> {{ contact.email || '-' }}</div>
<div><strong>Telegram:</strong> {{ contact.telegram || '-' }}</div>
<div><strong>Кошелек:</strong> {{ contact.wallet || '-' }}</div>
<div>
<strong>Язык:</strong>
<div class="multi-select">
<div class="selected-langs">
<span v-for="lang in selectedLanguages" :key="lang" class="lang-tag">
{{ getLanguageLabel(lang) }}
<span class="remove-tag" @click="removeLanguage(lang)">×</span>
</span>
<input
v-model="langInput"
@focus="showLangDropdown = true"
@input="showLangDropdown = true"
@keydown.enter.prevent="addLanguageFromInput"
class="lang-input"
placeholder="Добавить язык..."
/>
</div>
<ul v-if="showLangDropdown" class="lang-dropdown">
<li
v-for="lang in filteredLanguages"
:key="lang.value"
@mousedown.prevent="addLanguage(lang.value)"
:class="{ selected: selectedLanguages.includes(lang.value) }"
>
{{ lang.label }}
</li>
</ul>
</div>
<span v-if="isSavingLangs" class="saving">Сохранение...</span>
</div>
<div><strong>Дата создания:</strong> {{ formatDate(contact.created_at) }}</div>
<div><strong>Дата последнего сообщения:</strong> {{ formatDate(lastMessageDate) }}</div>
<div class="user-tags-block">
<strong>Теги пользователя:</strong>
<span v-for="tag in userTags" :key="tag.id" class="user-tag">
{{ tag.name }}
<span class="remove-tag" @click="removeUserTag(tag.id)">×</span>
</span>
<button class="add-tag-btn" @click="openTagModal">Добавить тег</button>
</div>
<button class="delete-btn" @click="deleteContact">Удалить контакт</button>
</div>
<div class="messages-block">
<h3>История сообщений</h3>
<div v-if="isLoadingMessages" class="loading">Загрузка...</div>
<div v-else-if="messages.length === 0" class="empty">Нет сообщений</div>
<div v-else class="messages-list">
<Message v-for="msg in messages" :key="msg.id" :message="msg" />
</div>
</div>
<el-dialog v-model="showTagModal" title="Добавить тег пользователю">
<div v-if="allTags.length">
<el-select
v-model="selectedTags"
multiple
filterable
placeholder="Выберите теги"
@change="addTagsToUser"
>
<el-option
v-for="tag in allTags"
:key="tag.id"
:label="tag.name"
:value="tag.id"
/>
</el-select>
<div style="margin-top: 1em; color: #888; font-size: 0.95em;">
<strong>Существующие теги:</strong>
<span v-for="tag in allTags" :key="'list-' + tag.id" style="margin-right: 0.7em;">
{{ tag.name }}<span v-if="tag.description"> ({{ tag.description }})</span>
</span>
</div>
</div>
<div style="margin-top: 1em;">
<el-input v-model="newTagName" placeholder="Новый тег" />
<el-input v-model="newTagDescription" placeholder="Описание" />
<el-button type="primary" @click="createTag">Создать тег</el-button>
</div>
</el-dialog>
</div>
<div class="contact-info-block">
<div>
<strong>Имя:</strong>
<input v-model="editableName" class="edit-input" @blur="saveName" @keyup.enter="saveName" />
<span v-if="isSavingName" class="saving">Сохранение...</span>
</div>
<div><strong>Email:</strong> {{ contact.email || '-' }}</div>
<div><strong>Telegram:</strong> {{ contact.telegram || '-' }}</div>
<div><strong>Кошелек:</strong> {{ contact.wallet || '-' }}</div>
<div>
<strong>Язык:</strong>
<div class="multi-select">
<div class="selected-langs">
<span v-for="lang in selectedLanguages" :key="lang" class="lang-tag">
{{ getLanguageLabel(lang) }}
<span class="remove-tag" @click="removeLanguage(lang)">×</span>
</span>
<input
v-model="langInput"
@focus="showLangDropdown = true"
@input="showLangDropdown = true"
@keydown.enter.prevent="addLanguageFromInput"
class="lang-input"
placeholder="Добавить язык..."
/>
</div>
<ul v-if="showLangDropdown" class="lang-dropdown">
<li
v-for="lang in filteredLanguages"
:key="lang.value"
@mousedown.prevent="addLanguage(lang.value)"
:class="{ selected: selectedLanguages.includes(lang.value) }"
>
{{ lang.label }}
</li>
</ul>
</div>
<span v-if="isSavingLangs" class="saving">Сохранение...</span>
</div>
<div><strong>Дата создания:</strong> {{ formatDate(contact.created_at) }}</div>
<div><strong>Дата последнего сообщения:</strong> {{ formatDate(lastMessageDate) }}</div>
<div class="user-tags-block">
<strong>Теги пользователя:</strong>
<span v-for="tag in userTags" :key="tag.id" class="user-tag">
{{ tag.name }}
<span class="remove-tag" @click="removeUserTag(tag.id)">×</span>
</span>
<button class="add-tag-btn" @click="openTagModal">Добавить тег</button>
</div>
<button class="delete-btn" @click="deleteContact">Удалить контакт</button>
</div>
<div class="messages-block">
<h3>История сообщений</h3>
<div v-if="isLoadingMessages" class="loading">Загрузка...</div>
<div v-else-if="messages.length === 0" class="empty">Нет сообщений</div>
<div v-else class="messages-list">
<Message v-for="msg in messages" :key="msg.id" :message="msg" />
</div>
</div>
<el-dialog v-model="showTagModal" title="Добавить тег пользователю">
<div v-if="allTags.length">
<el-select
v-model="selectedTags"
multiple
filterable
placeholder="Выберите теги"
@change="addTagsToUser"
>
<el-option
v-for="tag in allTags"
:key="tag.id"
:label="tag.name"
:value="tag.id"
/>
</el-select>
<div style="margin-top: 1em; color: #888; font-size: 0.95em;">
<strong>Существующие теги:</strong>
<span v-for="tag in allTags" :key="'list-' + tag.id" style="margin-right: 0.7em;">
{{ tag.name }}<span v-if="tag.description"> ({{ tag.description }})</span>
</span>
</div>
</div>
<div style="margin-top: 1em;">
<el-input v-model="newTagName" placeholder="Новый тег" />
<el-input v-model="newTagDescription" placeholder="Описание" />
<el-button type="primary" @click="createTag">Создать тег</el-button>
</div>
</el-dialog>
</div>
</div>
</BaseLayout>
</template>

16
frontend/src/views/tables/TableView.vue
View File

@@ -1,14 +1,14 @@
<template>
<BaseLayout>
<div class="table-block-wrapper">
<div class="tableview-header-row">
<button class="nav-btn" @click="goToTables">Таблицы</button>
<button class="nav-btn" @click="goToCreate">Создать таблицу</button>
<button class="close-btn" @click="closeTable">Закрыть</button>
<button class="action-btn" @click="goToEdit">Редактировать</button>
<button class="danger-btn" @click="goToDelete">Удалить</button>
</div>
<UserTableView :table-id="Number($route.params.id)" />
<div class="tableview-header-row">
<button class="nav-btn" @click="goToTables">Таблицы</button>
<button class="nav-btn" @click="goToCreate">Создать таблицу</button>
<button class="close-btn" @click="closeTable">Закрыть</button>
<button class="action-btn" @click="goToEdit">Редактировать</button>
<button class="danger-btn" @click="goToDelete">Удалить</button>
</div>
<UserTableView :table-id="Number($route.params.id)" />
</div>
</BaseLayout>
</template>

6
frontend/src/views/tables/TablesListView.vue
View File

@@ -2,8 +2,8 @@
<BaseLayout>
<div class="tables-list-block">
<button class="close-btn" @click="goBack">×</button>
<h2>Список таблиц</h2>
<UserTablesList />
<h2>Список таблиц</h2>
<UserTablesList />
</div>
</BaseLayout>
</template>
@@ -21,7 +21,7 @@ function goBack() {
router.push({ name: 'crm' });
}
}
</script>
</script>
<style scoped>
.tables-list-block {

2
frontend/src/views/tables/TagsTableViewPage.vue
View File

@@ -3,7 +3,7 @@
<TagsTableView />
</BaseLayout>
</template>
<script setup>
import BaseLayout from '../../components/BaseLayout.vue';
import TagsTableView from '../../components/tables/TagsTableView.vue';