@mundogamernetwork/shared-ui 1.0.0

package/components/ui/Header/MgMessageModal.vue

@@ -0,0 +1,414 @@
+<template>
+	<section id="mg-message-modal" ref="modalRef" @click.stop>
+		<div class="search" v-if="!showChatMessage">
+			<input v-model="searchTerm" :placeholder="$t('message_component.name')" @input="searchChat()" />
+			<MGIcon icon="search" />
+		</div>
+
+		<div class="read-all--button-wrapper" v-if="!showChatMessage">
+			<a
+				class="d-flex align-items-center chats"
+				:class="{ active: activeTab === 'chats' }"
+				@click="activeTab = 'chats'"
+			>
+				{{ $t("message_component.chats") }}
+			</a>
+		</div>
+
+		<!-- Chat detail view -->
+		<div v-if="showChatMessage">
+			<div class="message-detail">
+				<button @click="showChatMessage = false" class="back-button">
+					<MGIcon size="2x" icon="chevron-left" />
+					{{ $t("more.header_buttons.back") }}
+				</button>
+
+				<div class="infos" v-if="chatMessages?.data?.users[0]">
+					<div class="relative">
+						<img :src="chatMessages.data.users[0].avatar_url || '/imgs/default.jpg'" width="48" height="48" />
+					</div>
+					<div class="description">
+						<div class="title">{{ chatMessages.data.users[0].nickname }}</div>
+					</div>
+				</div>
+
+				<div class="message-content">
+					<div class="chat-container" ref="chatContainer">
+						<div class="messages">
+							<div
+								v-for="(group, index) in messagesGroupedByDate"
+								:key="group.date"
+								class="message-group"
+							>
+								<div
+									v-for="chat in group.messages"
+									:key="chat.id"
+									:class="chat.user_is_author ? 'message-me' : 'message-user'"
+								>
+									<span class="title">
+										<p class="user-name" v-if="!chat.user_is_author">{{ chat.user?.nickname }}</p>
+										{{ chat.message }}
+										<div class="message-info">{{ chat.created_at }}</div>
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="input-me">
+				<textarea
+					ref="inputRef"
+					v-model="chatMessageInput"
+					:disabled="chatMessageLoading"
+					:placeholder="$t('more.contact.message_title')"
+					@keydown.enter.exact.prevent="submitChatMessage"
+				/>
+				<button class="btn secondary send" :disabled="chatMessageLoading" @click="submitChatMessage">
+					{{ chatMessageLoading ? $t("components.loading") : $t("more.contact.btn_send_message") }}
+				</button>
+			</div>
+		</div>
+
+		<!-- Chat list view -->
+		<div class="cards" v-else-if="activeTab === 'chats'">
+			<template v-if="chatList.length === 0">
+				<div class="no-content">
+					<MGIcon icon="message" />
+					<p>{{ $t("message_component.chat_no_message.title") }}</p>
+				</div>
+			</template>
+			<template v-else>
+				<div class="card-list">
+					<MgMessageCard
+						v-for="chat in chatList"
+						:key="chat.id"
+						:chat="chat"
+						@show-message="handleSelectedChat(chat.id)"
+					/>
+				</div>
+			</template>
+		</div>
+	</section>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, nextTick, watch } from "vue";
+import { getChatList, postChatMessage, getChat } from "../../../services/chatService";
+import { serialize } from "../../../utils/serialize";
+
+const chatStore = useChatStore();
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
+
+const emit = defineEmits(["toggle-visible"]);
+const modalRef = ref<HTMLElement | null>(null);
+const activeTab = ref<"chats" | "requests">("chats");
+const showChatMessage = ref(false);
+const selectedChatId = ref<number | string>(0);
+const searchTerm = ref("");
+const chatList = ref<any[]>([]);
+const chatLoading = ref(false);
+const chatMessageInput = ref("");
+const chatMessageLoading = ref(false);
+const chatMessages = ref<any>({});
+const chatContainer = ref<HTMLElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const scrollToBottom = (smooth = true) => {
+	if (!chatContainer.value) return;
+	nextTick(() => {
+		const container = chatContainer.value!;
+		container.style.scrollBehavior = smooth ? "smooth" : "auto";
+		container.scrollTop = container.scrollHeight;
+		if (smooth) setTimeout(() => { container.style.scrollBehavior = "auto"; }, 300);
+	});
+};
+
+const fetchChatList = async (params: any = {}) => {
+	chatLoading.value = true;
+	try {
+		const config = useRuntimeConfig();
+		const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+		const response = await getChatList({ mg_network_system_id: systemId, ...params });
+		chatList.value = response.data.data || response.data;
+	} catch {
+		// silent fail
+	} finally {
+		chatLoading.value = false;
+	}
+};
+
+const handleSelectedChat = async (chatId: string | number) => {
+	selectedChatId.value = chatId;
+	showChatMessage.value = true;
+	chatMessageLoading.value = true;
+	try {
+		const response = await getChat({ chat_id: chatId });
+		chatMessages.value = response.data;
+		chatStore.setChatMessagesWidget(response.data, true);
+		nextTick(() => scrollToBottom(false));
+	} catch {
+		// silent fail
+	} finally {
+		chatMessageLoading.value = false;
+	}
+};
+
+const submitChatMessage = async () => {
+	if (!chatMessageInput.value.trim() || chatMessageLoading.value) return;
+	try {
+		chatMessageLoading.value = true;
+		await postChatMessage({
+			chat_id: selectedChatId.value,
+			message: chatMessageInput.value,
+		});
+		chatMessageInput.value = "";
+		scrollToBottom(true);
+	} catch {
+		// silent fail
+	} finally {
+		chatMessageLoading.value = false;
+	}
+};
+
+const messagesGroupedByDate = computed(() => {
+	const messages = chatMessages.value?.data?.chat_messages;
+	if (!messages || !Array.isArray(messages)) return [];
+
+	const grouped: Record<string, any[]> = {};
+	messages.forEach((chat: any) => {
+		const date = chat.created_at?.split("T")[0] || "unknown";
+		if (!grouped[date]) grouped[date] = [];
+		grouped[date].push(chat);
+	});
+
+	return Object.entries(grouped).map(([date, msgs]) => ({ date, messages: msgs }));
+});
+
+const searchChat = () => {
+	if (searchTerm.value.length >= 3 || searchTerm.value.length === 0) {
+		fetchChatList(searchTerm.value ? { search: searchTerm.value } : {});
+	}
+};
+
+watch(
+	() => chatStore.currentMessageData,
+	(newMessage) => {
+		if (newMessage) {
+			const messages = chatMessages.value?.data?.chat_messages;
+			if (messages) {
+				messages.push(newMessage.message || newMessage.message_object);
+				nextTick(() => scrollToBottom(true));
+			}
+		}
+	},
+	{ deep: true },
+);
+
+onMounted(() => {
+	fetchChatList();
+});
+
+const handleClickOutside = (event: MouseEvent) => {
+	if (modalRef.value && !modalRef.value.contains(event.target as Node)) {
+		emit("toggle-visible");
+	}
+};
+
+onMounted(() => document.addEventListener("click", handleClickOutside));
+onUnmounted(() => document.removeEventListener("click", handleClickOutside));
+</script>
+
+<style lang="scss" scoped>
+#mg-message-modal {
+	position: absolute;
+	width: 410px;
+	background-color: var(--chat-bg, var(--card-article-bg));
+	z-index: 30;
+	max-height: 750px;
+	top: 56px;
+	right: 80px;
+	overflow-y: auto;
+	border: 1px solid var(--text-secondary-color);
+}
+
+.search {
+	padding: 10px;
+	display: flex;
+	gap: 4px;
+
+	input {
+		width: 100%;
+		height: 32px;
+		padding-left: 10px;
+		margin-top: 20px;
+		border: none;
+		border-bottom: 2px solid var(--bt-active);
+		background-color: var(--header-ui-config-bg);
+		font-size: 16px;
+		color: var(--text-primary-color);
+		outline: none;
+	}
+
+	i {
+		font-size: 30px;
+		margin-top: 20px;
+		color: var(--text-primary-color);
+		cursor: pointer;
+	}
+}
+
+.read-all--button-wrapper {
+	padding: 16px;
+	font-size: 16px;
+	display: flex;
+	justify-content: space-between;
+
+	.chats {
+		color: var(--text-primary-color);
+		cursor: pointer;
+
+		&.active {
+			font-weight: bold;
+		}
+	}
+}
+
+.cards .card-list {
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	max-height: 450px;
+}
+
+.no-content {
+	color: var(--text-secondary-color);
+	text-align: center;
+	padding: 32px;
+
+	i {
+		font-size: 56px;
+	}
+}
+
+.message-detail {
+	padding: 24px 16px 16px;
+
+	.infos {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		padding: 8px 0;
+		border-bottom: 1px solid var(--body-bg);
+
+		img {
+			max-width: 48px;
+			height: 48px;
+			object-fit: cover;
+			border-radius: 100%;
+		}
+
+		.title {
+			font-size: 14px;
+			color: var(--text-primary-color);
+		}
+	}
+}
+
+.back-button {
+	padding: 0 0 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 16px;
+	color: var(--text-primary-color);
+	background: transparent;
+	border: none;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.chat-container {
+	height: 450px;
+	overflow-y: auto;
+	padding-top: 20px;
+
+	.messages {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.message-group {
+		display: flex;
+		flex-direction: column;
+		gap: 18px;
+		padding: 0 16px;
+		width: 100%;
+	}
+
+	.message-me {
+		align-self: flex-end;
+		text-align: right;
+		background-color: var(--input-bg);
+		padding: 8px;
+		font-size: 14px;
+	}
+
+	.message-user {
+		align-self: flex-start;
+		text-align: left;
+		background: var(--body-bg-card);
+		padding: 8px;
+		font-size: 14px;
+		color: var(--text-primary-color);
+
+		.user-name {
+			color: var(--header-active-fg);
+			margin-bottom: 0;
+		}
+	}
+
+	.message-info {
+		font-size: 10px;
+		color: var(--search-context-section-title-fg);
+		text-align: right;
+		margin-top: 3px;
+	}
+}
+
+.input-me {
+	display: flex;
+	height: 72px;
+	padding: 8px 16px;
+	align-items: center;
+	gap: 16px;
+	background-color: var(--body-bg);
+
+	textarea {
+		display: flex;
+		height: 40px;
+		padding: 6px;
+		resize: none;
+		flex: 1 0 0;
+
+		&:focus {
+			outline: 1px solid var(--highlight-color);
+		}
+	}
+
+	.send {
+		cursor: pointer;
+		min-height: 40px;
+	}
+}
+
+@media screen and (max-width: 576px) {
+	#mg-message-modal {
+		width: 100%;
+		right: 0;
+	}
+}
+</style>

package/components/ui/Header/MgNotificationCard.vue

@@ -0,0 +1,200 @@
+<template>
+	<article class="notification-card" :class="{ read: notification.read_at }">
+		<div :class="['infos', { read: notification.read_at }]">
+			<img
+				:src="notification.image"
+				alt=""
+				@click="toNotificationUrl(notification.url, notification.id, notification.object)"
+			/>
+			<div
+				class="description"
+				@click="toNotificationUrl(notification.url, notification.id, notification.object)"
+			>
+				<div class="description-top">
+					<div class="title">{{ truncatedText(notification.title, 80) }}</div>
+					<p v-html="truncatedText(notification.message, 95)"></p>
+				</div>
+				<div class="description-down">{{ notification.created_at }}</div>
+			</div>
+
+			<div class="action-bar">
+				<div ref="selectRef">
+					<div class="more" @click.prevent.stop="showMenu = !showMenu">
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+							<path d="M11 15V17H13V15H11Z" fill="var(--text-primary-color)" />
+							<path d="M11 11V13H13V11H11Z" fill="var(--text-primary-color)" />
+							<path d="M11 7V9H13V7H11Z" fill="var(--text-primary-color)" />
+						</svg>
+					</div>
+					<div v-if="showMenu" class="notification-menu">
+						<button @click="handleMarkAsRead">{{ $t("notification_component.mark_read") }}</button>
+						<button @click="handleDelete">{{ $t("notification_component.delete") }}</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</article>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { MgNotification } from "../../../types";
+
+const locale = useNuxtApp().$i18n.locale;
+const notificationsStore = useNotificationsStore();
+
+const props = defineProps<{
+	notification: MgNotification;
+}>();
+
+const emit = defineEmits(["close"]);
+const showMenu = ref(false);
+const selectRef = ref<HTMLElement | null>(null);
+
+const handleMarkAsRead = async () => {
+	if (props.notification.id) {
+		await notificationsStore.markAsRead(props.notification.id);
+	}
+	showMenu.value = false;
+};
+
+const handleDelete = async () => {
+	if (props.notification.id) {
+		await notificationsStore.removeNotification(props.notification.id);
+	}
+	showMenu.value = false;
+};
+
+const toNotificationUrl = async (url: string | null, id: string | null, object: string | null) => {
+	const router = useRouter();
+	if (!id) return;
+
+	await notificationsStore.markAsRead(id);
+	emit("close");
+
+	if (object === "invoice") {
+		setTimeout(() => {
+			router.push(`/${locale.value}/wallet`);
+		}, 500);
+	} else if (url) {
+		if (url.startsWith(window.location.origin)) {
+			router.push(url.replace(window.location.origin, ""));
+		} else {
+			window.open(url, "_blank");
+		}
+	}
+};
+
+const truncatedText = (text: string, size: number) => {
+	if (!text) return "";
+	return text.length > size ? text.substring(0, size) + "..." : text;
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+	if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+		showMenu.value = false;
+	}
+};
+
+onMounted(() => document.addEventListener("click", handleClickOutside));
+onBeforeUnmount(() => document.removeEventListener("click", handleClickOutside));
+</script>
+
+<style lang="scss" scoped>
+.notification-card {
+	display: flex;
+	height: 136px;
+	padding: 16px 8px;
+	align-items: center;
+	gap: 8px;
+	align-self: stretch;
+	border-bottom: 1px solid var(--body-bg);
+	cursor: pointer;
+	background-color: var(--card-article-bg);
+
+	&.read {
+		background-color: var(--body-bg);
+	}
+
+	.infos {
+		display: flex;
+		height: 104px;
+		gap: 8px;
+		flex: 1 0 0;
+
+		img {
+			width: 104px;
+			height: 104px;
+			object-fit: cover;
+		}
+
+		&.read img {
+			filter: grayscale(1);
+		}
+
+		.description {
+			font-size: 14px;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+
+			.description-top {
+				.title {
+					font-size: 14px;
+					font-weight: 500;
+					line-height: 20px;
+					color: var(--active);
+				}
+
+				p {
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 16px;
+					color: var(--secondary-info-fg);
+				}
+			}
+
+			.description-down {
+				font-size: 12px;
+				color: var(--secondary-info-fg);
+			}
+		}
+
+		.action-bar {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.more {
+				cursor: pointer;
+			}
+
+			.notification-menu {
+				position: absolute;
+				right: 0;
+				background: var(--header-ui-config-bg);
+				border: 1px solid var(--header-ui-config-border);
+				z-index: 10;
+				padding: 4px 0;
+
+				button {
+					display: block;
+					width: 100%;
+					padding: 8px 16px;
+					background: none;
+					border: none;
+					color: var(--active);
+					font-size: 12px;
+					cursor: pointer;
+					text-align: left;
+
+					&:hover {
+						background: var(--header-ui-config-hover);
+					}
+				}
+			}
+		}
+	}
+}
+</style>