@mundogamernetwork/shared-ui 1.1.61 → 1.1.63

package/pages/key-campaigns/key-materials.vue

@@ -0,0 +1,653 @@
+<template>
+	<div id="shared-key-materials">
+		<div class="container">
+			<div class="header">
+				<NuxtLink @click.prevent="goBack" class="back">
+					<MGIcon size="2x" icon="chevron-left" />
+					<span>{{ $t("keys.materials.back") }}</span>
+				</NuxtLink>
+			</div>
+
+			<div class="form-content">
+				<div class="title-bar">
+					<div class="text-container">
+						<h3 class="custom-text">{{ $t("keys.materials.title") }}</h3>
+					</div>
+				</div>
+
+				<div class="boxes">
+					<!-- Submission form -->
+					<div class="box-container">
+						<div class="title-box">
+							<div>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="25"
+									viewBox="0 0 24 25"
+									:style="{ fill: isContentOpened[1] ? '#D297FF' : 'var(--inactive)' }"
+								>
+									<path d="M9.08471 16.3961L5.29164 12.603L4 13.8856L9.08471 18.9703L20 8.05501L18.7175 6.77246L9.08471 16.3961Z" />
+								</svg>
+								{{ $t("keys.materials.subtitle") }}
+							</div>
+							<button class="content__info__toggler" @click="toggleBox(1)">
+								<MGIcon icon="chevron-down" :class="{ rotate: isContentOpened[1] }" />
+							</button>
+						</div>
+
+						<div v-show="isContentOpened[1]">
+							<div v-for="(form, index) in forms" :key="index" v-show="activeForm === index">
+								<form class="card-form">
+									<div class="form-row">
+										<div class="col1">
+											<h5>{{ $t("keys.materials.type") }}</h5>
+										</div>
+										<div class="col2">
+											<div class="types">
+												<div
+													class="type"
+													:class="{ selected: form.content_types.includes('article') }"
+													@click="toggleType(index, 'article')"
+												>
+													<MGIcon icon="editorial-journalism" />
+													{{ $t("keys.materials.type_article") }}
+												</div>
+												<div
+													class="type"
+													:class="{ selected: form.content_types.includes('web') }"
+													@click="toggleType(index, 'web')"
+												>
+													<MGIcon icon="audio-sound" />
+													{{ $t("keys.materials.type_web") }}
+												</div>
+												<div
+													class="type"
+													:class="{ selected: form.content_types.includes('print') }"
+													@click="toggleType(index, 'print')"
+												>
+													<MGIcon icon="camera" />
+													{{ $t("keys.materials.type_print") }}
+												</div>
+												<div
+													class="type"
+													:class="{ selected: form.content_types.includes('stream') }"
+													@click="toggleType(index, 'stream')"
+												>
+													<MGIcon icon="twtch" />
+													{{ $t("keys.materials.type_stream") }}
+												</div>
+												<div
+													class="type"
+													:class="{ selected: form.content_types.includes('video') }"
+													@click="toggleType(index, 'video')"
+												>
+													<MGIcon icon="youtube" />
+													{{ $t("keys.materials.type_video") }}
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<div class="form-row">
+										<div class="col1">
+											<h5>{{ $t("keys.materials.link") }}</h5>
+										</div>
+										<div class="col2">
+											<MGIcon size="2x" icon="others" />
+											<input
+												class="form-control"
+												v-model="form.material_url"
+												:class="{ 'error-border': urlError }"
+												placeholder="https://example.com"
+											/>
+											<div v-if="urlError" class="error-message">{{ urlError }}</div>
+										</div>
+									</div>
+
+									<div class="form-row">
+										<div class="col1">
+											<h5>{{ $t("keys.materials.description") }}</h5>
+										</div>
+										<div class="col2">
+											<textarea class="form-control textarea" v-model="form.description"></textarea>
+										</div>
+									</div>
+
+									<div class="form-row">
+										<div class="col1">
+											<h5>{{ $t("keys.materials.date") }}</h5>
+										</div>
+										<div class="col2">
+											<input type="datetime-local" class="form-control" v-model="form.submitted_at" />
+										</div>
+									</div>
+								</form>
+							</div>
+						</div>
+
+						<div class="bottom">
+							<div class="buttons">
+								<div v-if="formError" class="form-error">{{ formError }}</div>
+								<div
+									class="btn button-submit"
+									:class="{ disabled: submitting }"
+									@click="submitForm"
+								>
+									<span v-if="submitting">{{ $t("keys.materials.sending") }}</span>
+									<span v-else>{{ $t("keys.materials.finish") }}</span>
+								</div>
+
+								<!-- Success modal -->
+								<div v-if="showSuccessModal" class="success-modal-overlay" @click.self="handleSuccessClose">
+									<div class="success-modal">
+										<MGIcon size="2x" icon="check" style="color: #42FF00" />
+										<p>{{ $t("keys.materials.success_message") }}</p>
+										<button class="btn button-submit" @click="handleSuccessClose">
+											{{ $t("keys.materials.success_close") }}
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Previously submitted materials -->
+					<div class="box-container" v-if="submittedMaterials.length > 0">
+						<div class="title-box">
+							<div>
+								<MGIcon size="1x" icon="version" style="color: #D297FF" />
+								{{ $t("keys.materials.submitted_title") }}
+							</div>
+						</div>
+						<div class="submitted-list">
+							<div class="submitted-item" v-for="(mat, i) in submittedMaterials" :key="mat.id">
+								<div class="submitted-index">#{{ i + 1 }}</div>
+								<div class="submitted-info">
+									<a :href="mat.material_url" target="_blank" rel="noopener" class="submitted-url">
+										{{ mat.material_url }}
+									</a>
+									<p v-if="mat.description" class="submitted-desc">{{ mat.description }}</p>
+									<div class="submitted-types" v-if="mat.content_types?.length">
+										<span v-for="ct in mat.content_types" :key="ct.id" class="submitted-tag">
+											{{ ct.name }}
+										</span>
+									</div>
+									<p v-if="mat.submitted_at" class="submitted-date">
+										{{ formatSubmittedAt(mat.submitted_at) }}
+									</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useI18n } from "#imports"
+import { submitMaterial, fetchMaterialsByRequest } from "../../services/campaignService"
+
+definePageMeta({
+	middleware: [
+		function (to) {
+			const requestId = Number(to.query.requestId)
+			if (!requestId || isNaN(requestId)) {
+				const locale = useCookie("i18n_redirected").value || "en"
+				return navigateTo(`/${locale}/key-campaigns`)
+			}
+		},
+	],
+})
+
+// Consuming front injects current user id (or null if not logged in)
+const currentUserId = inject<number | null>("currentUserId", null)
+
+const props = defineProps<{ goBackPage?: string | null }>()
+
+const route = useRoute()
+const { t, locale } = useI18n()
+const requestId = ref<number>(Number(route.query.requestId))
+
+type ContentType = "article" | "web" | "print" | "stream" | "video"
+
+interface FormData {
+	content_types: ContentType[]
+	material_url: string
+	description: string
+	submitted_at: string
+}
+
+const contentTypesMap: Record<ContentType, number> = {
+	article: 1,
+	video: 2,
+	stream: 3,
+	web: 4,
+	print: 5,
+}
+
+const forms = ref<FormData[]>([
+	{ content_types: [], material_url: "", description: "", submitted_at: "" },
+])
+const activeForm = ref(0)
+const isContentOpened = ref<Record<number, boolean>>({ 1: true })
+const submitting = ref(false)
+const submittedMaterials = ref<any[]>([])
+const urlError = ref<string | null>(null)
+const formError = ref<string | null>(null)
+const showSuccessModal = ref(false)
+
+function toggleType(formIndex: number, type: ContentType) {
+	const currentTypes = forms.value[formIndex].content_types
+	const idx = currentTypes.indexOf(type)
+	if (idx === -1) { currentTypes.push(type) } else { currentTypes.splice(idx, 1) }
+}
+
+function toggleBox(boxNumber: number) {
+	Object.keys(isContentOpened.value).forEach((key) => {
+		if (Number(key) !== boxNumber) isContentOpened.value[Number(key)] = false
+	})
+	isContentOpened.value[boxNumber] = !isContentOpened.value[boxNumber]
+}
+
+function goBack() {
+	if (props.goBackPage) {
+		window.location.href = props.goBackPage
+	} else {
+		window.history.back()
+	}
+}
+
+function handleSuccessClose() {
+	showSuccessModal.value = false
+	goBack()
+}
+
+function formatSubmittedAt(dateStr: string): string {
+	const d = new Date(dateStr)
+	if (isNaN(d.getTime())) return dateStr
+	return d.toLocaleString(locale.value, { dateStyle: "short", timeStyle: "short" })
+}
+
+function isValidUrl(urlString: string): boolean {
+	try {
+		const url = new URL(urlString)
+		return ["http:", "https:"].includes(url.protocol)
+	} catch {
+		return false
+	}
+}
+
+const submitForm = async () => {
+	if (submitting.value) return
+	submitting.value = true
+	urlError.value = null
+	formError.value = null
+
+	try {
+		forms.value.forEach((form) => {
+			form.material_url = form.material_url.trim()
+			form.description = form.description.trim()
+		})
+
+		const hasEmptyFields = forms.value.some(
+			(form) => form.content_types.length === 0 || !form.material_url || !form.description || !form.submitted_at,
+		)
+
+		if (hasEmptyFields) {
+			formError.value = t("keys.materials.required_fields")
+			return
+		}
+
+		const invalidUrls = forms.value.filter((form) => !isValidUrl(form.material_url))
+		if (invalidUrls.length > 0) {
+			urlError.value = t("keys.materials.url_error")
+			return
+		}
+
+		for (const form of forms.value) {
+			await submitMaterial({
+				key_request_id: requestId.value,
+				user_id: currentUserId,
+				status: true,
+				content_types: form.content_types.map((type) => contentTypesMap[type]),
+				material_url: form.material_url,
+				description: form.description,
+				submitted_at: new Date(form.submitted_at).toISOString(),
+			})
+		}
+
+		// Reload submitted list
+		try {
+			const res = await fetchMaterialsByRequest(requestId.value)
+			submittedMaterials.value = res?.data?.data ?? []
+		} catch { /* silent */ }
+
+		forms.value = [{ content_types: [], material_url: "", description: "", submitted_at: "" }]
+		activeForm.value = 0
+		showSuccessModal.value = true
+	} catch (error) {
+		console.error("[key-materials] Submit error:", error)
+		formError.value = t("keys.materials.submit_error")
+	} finally {
+		submitting.value = false
+	}
+}
+
+onMounted(async () => {
+	if (requestId.value) {
+		try {
+			const res = await fetchMaterialsByRequest(requestId.value)
+			submittedMaterials.value = res?.data?.data ?? []
+		} catch { /* silent */ }
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.form-error {
+	color: #ff4800;
+	font-size: 12px;
+	padding: 8px 0;
+	width: 100%;
+	text-align: right;
+}
+
+.error-border { border: 1px solid rgb(248, 60, 60) !important; }
+.error-message { color: rgb(248, 60, 60); font-size: 0.8rem; margin-top: 5px; }
+
+.success-modal-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+
+	.success-modal {
+		background: var(--body-bg-dash, #1c1c1c);
+		padding: 32px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 16px;
+		min-width: 300px;
+
+		p {
+			color: var(--card-cover-title);
+			font-size: 16px;
+			font-weight: 600;
+			text-align: center;
+		}
+	}
+}
+
+#shared-key-materials {
+	align-items: center;
+	width: 100%;
+	justify-content: center;
+	overflow: auto;
+	height: 100%;
+
+	.container { max-width: 1140px !important; }
+
+	.header {
+		display: flex;
+		flex-direction: column;
+		gap: 43px;
+		margin-top: 12px;
+
+		.back {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			color: var(--card-article-title);
+			font-size: 12px;
+			cursor: pointer;
+			text-decoration: none;
+		}
+	}
+
+	.form-content {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.title-bar {
+			display: flex;
+			margin-top: 32px;
+			.text-container {
+				width: 100%;
+				padding-left: 0.8em;
+				border-left: 2px solid #d297ff;
+				.custom-text {
+					margin: 0;
+					font-size: 18px;
+					font-weight: 600;
+					color: var(--card-cover-title);
+				}
+			}
+		}
+
+		.disabled {
+			cursor: not-allowed;
+			pointer-events: none;
+			opacity: 0.6;
+			background: var(--tab-control-disabled-bg) !important;
+		}
+
+		.rotate { transform: rotate(180deg); transition: transform 1s ease; }
+
+		.submitted-list {
+			padding: 12px 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+
+			.submitted-item {
+				display: flex;
+				gap: 12px;
+				padding: 12px;
+				background: var(--button-secondary-default-bg);
+
+				.submitted-index { font-size: 12px; font-weight: 700; color: #D297FF; min-width: 24px; }
+
+				.submitted-info {
+					display: flex;
+					flex-direction: column;
+					gap: 4px;
+
+					.submitted-url { font-size: 13px; color: #D297FF; word-break: break-all; text-decoration: underline; }
+					.submitted-desc { font-size: 12px; color: var(--secondary-info-fg); margin: 0; }
+
+					.submitted-types {
+						display: flex;
+						gap: 6px;
+						flex-wrap: wrap;
+						.submitted-tag {
+							font-size: 11px;
+							padding: 2px 8px;
+							background: rgba(210, 151, 255, 0.15);
+							color: #D297FF;
+						}
+					}
+
+					.submitted-date { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin: 4px 0 0; }
+				}
+			}
+		}
+
+		.boxes {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+			width: 100%;
+
+			.box-container {
+				width: 100%;
+
+				.content__info__toggler {
+					color: var(--card-cover-title);
+					display: flex;
+					height: 32px;
+					align-items: center;
+					background: transparent;
+					border: none;
+					padding: 0;
+					font-size: 14px;
+					font-weight: 600;
+					cursor: pointer;
+
+					.rotate { transform: rotate(180deg); transition: 0.5s; }
+					&:hover { color: var(--faq-toggler-active-fg); }
+				}
+
+				.title-box {
+					display: flex;
+					background-color: var(--bg-app-badge);
+					padding: 8px 16px;
+					align-items: center;
+					gap: 16px;
+					justify-content: space-between;
+					color: var(--card-cover-title);
+					font-size: 16px;
+					font-weight: 600;
+				}
+
+				.card-form {
+					width: 100%;
+					display: flex;
+					flex-direction: column;
+
+					.form-row {
+						width: 100%;
+						display: flex;
+						gap: 16px;
+						padding: 40px 24px;
+						background-color: var(--body-bg-dash);
+						border-bottom: 1px solid var(--bg-app-badge);
+
+						.col1 {
+							width: 100%;
+							max-width: 280px;
+							display: flex;
+							flex-direction: column;
+							justify-content: center;
+							margin-right: 16px;
+
+							h5 { font-size: 16px; font-weight: 600; color: var(--card-cover-title); margin-bottom: 4px; }
+						}
+
+						.col2 {
+							width: 100%;
+							display: flex;
+							align-items: center;
+							gap: 16px;
+							flex: 1 0 0;
+
+							input::placeholder { color: var(--inactive); }
+							i { color: #D297FF; }
+
+							.form-control {
+								display: flex;
+								padding: 12px;
+								border-radius: 0;
+								background-color: transparent;
+								height: 48px;
+								border: 1px solid var(--bg-app-badge);
+								width: 100%;
+								font-size: 16px;
+								color: var(--secondary-info-fg);
+								&:focus { border: 1px solid var(--section-title-marker-fg); box-shadow: none; outline: 0; }
+							}
+
+							.textarea { height: 134px; &::placeholder { color: var(--inactive); } }
+
+							.types {
+								display: flex;
+								align-items: center;
+								gap: 16px;
+								flex: 1 0 0;
+								flex-wrap: wrap;
+
+								.type {
+									display: flex;
+									height: 80px;
+									padding: 24px;
+									flex-direction: column;
+									justify-content: center;
+									align-items: center;
+									gap: 12px;
+									flex: 1 0 0;
+									background-color: var(--bg-app-badge);
+									color: var(--inactive);
+									text-align: center;
+									font-size: 10px;
+									cursor: pointer;
+									i { font-size: 32px; color: #D297FF; }
+									&:hover { border: 2px solid #D297FF; }
+									&.selected { border: 2px solid #D297FF; }
+								}
+							}
+						}
+					}
+				}
+
+				.bottom {
+					display: flex;
+					padding: 24px 32px;
+					width: 100%;
+					justify-content: flex-end;
+
+					.buttons {
+						display: flex;
+						align-items: center;
+						gap: 16px;
+						width: 100%;
+						justify-content: flex-end;
+
+						.button-submit {
+							border: none;
+							color: #0E0E0E;
+							text-align: center;
+							font-size: 16px;
+							font-weight: 400;
+							display: flex;
+							width: fit-content;
+							height: 44px;
+							padding: 0 12px;
+							justify-content: center;
+							align-items: center;
+							background: #d297ff;
+							min-width: 200px;
+							cursor: pointer;
+						}
+					}
+				}
+			}
+		}
+
+		@media screen and (max-width: 767px) {
+			padding: 10px;
+
+			.boxes .box-container {
+				.card-form .form-row {
+					display: block;
+					.col1 { width: 100%; max-width: 100%; margin-bottom: 16px; }
+					.col2 { width: 100%; margin-bottom: 16px; }
+				}
+				.bottom {
+					padding: 24px 0;
+					.buttons .button-submit { min-width: 100%; margin: 24px 0; }
+				}
+			}
+		}
+	}
+}
+</style>