Compare commits

..

2 Commits

Author SHA1 Message Date
Diyar Akhgar
90bbff45cf add Trainings popUp in dashboard 2025-05-30 04:08:36 +03:30
Diyar Akhgar
b59c059ce5 fix all tab in team page 2025-05-30 02:32:44 +03:30
7 changed files with 658 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 527 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -1,16 +1,177 @@
<template>
<div class="tab-content">
<div class="card">جزئیات تیم ۱</div>
<div class="card">جزئیات تیم ۲</div>
<div class="team-logo">
<div class="card-title">
<h2>لوگوی تیم</h2>
<p>این لوگو در اتاقهای شما استفاده خواهد شد. توصیه میکنیم از یک تصویر شفاف با نسبت تصویر 2:1 استفاده کنید.</p>
</div>
<div class="logo-info">
<img :src="teamLogo || require('@/assets/img/team-logo.jpg')" alt="team logo" />
<label for="file-upload">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
viewBox="0 0 16 16"
fill="none"
>
<g clip-path="url(#clip0_312_7133)">
<path
d="M2.66602 11.3333V12.6666C2.66602 13.0202 2.80649 13.3593 3.05654 13.6094C3.30659 13.8594 3.64573 13.9999 3.99935 13.9999H11.9993C12.353 13.9999 12.6921 13.8594 12.9422 13.6094C13.1922 13.3593 13.3327 13.0202 13.3327 12.6666V11.3333"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4.66602 6.00008L7.99935 2.66675L11.3327 6.00008"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8 2.66675V10.6667"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_312_7133">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span>آپلود</span>
</label>
<input
id="file-upload"
type="file"
accept="image/*"
style="display: none;"
@change="handleLogoUpload"
ref="fileUpload"
/>
</div>
<div class="logo-sample">
<div class="logo-sample-title">
<h2>نمونه</h2>
<span>به این ترتیب لوگوی تیم شما در اتاقهای شما به نظر میرسد.</span>
</div>
<div class="sample-logos">
<img
v-for="(logo, index) in sampleLogos"
:key="index"
:src="require(`@/assets${logo.path}`)"
:alt="logo.alt"
/>
</div>
</div>
</div>
<div class="team-info">
<div class="card-title">
<h2>جزئیات تیم</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="team_name">نام تیم</label>
<input
id="team_name"
type="text"
v-model="form.teamName"
/>
</div>
<div class="form-group">
<label for="company_name">نام شرکت</label>
<input
id="company_name"
type="text"
v-model="form.companyName"
/>
</div>
<div class="form-group">
<label for="type_activity">نوع فعالیت شرکت</label>
<input
id="type_activity"
type="text"
v-model="form.activityType"
/>
</div>
<button type="submit" class="submit-btn">تایید</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TeamDetails',
data() {
return {
form: {
teamName: '',
companyName: '',
activityType: '',
},
teamLogo: null,
uploadedLogoFile: null,
sampleLogos: [
{ path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
{ path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
{ path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
],
};
},
methods: {
handleLogoUpload(event) {
const file = event.target.files[0];
if (file) {
this.teamLogo = URL.createObjectURL(file);
this.uploadedLogoFile = file;
}
},
submitForm() {
// Check if there's any data to submit
const hasFormData = this.form.teamName || this.form.companyName || this.form.activityType;
const hasLogo = !!this.uploadedLogoFile;
if (!hasFormData && !hasLogo) {
alert('لطفاً حداقل یک فیلد یا لوگو را وارد کنید.');
return;
}
// Prepare data to emit, including only non-empty fields
const formData = {};
if (this.form.teamName) formData.teamName = this.form.teamName;
if (this.form.companyName) formData.companyName = this.form.companyName;
if (this.form.activityType) formData.activityType = this.form.activityType;
if (hasLogo) formData.teamLogo = this.uploadedLogoFile;
this.$emit('update:teamData', formData);
// Reset form and logo
this.form = {
teamName: '',
companyName: '',
activityType: '',
};
this.teamLogo = null;
this.uploadedLogoFile = null;
// Reset file input
const fileInput = this.$refs.fileUpload;
if (fileInput) {
fileInput.value = '';
}
},
},
};
</script>
<style scoped>
.tab-content {
display: flex;
@ -18,12 +179,132 @@ export default {
gap: 16px;
}
.card {
background-color: white;
border: 1px solid #e2e8f0;
.team-logo,
.team-info {
width: 49%;
background-color: #ffffff;
border: none;
border-radius: 16px;
padding: 1.5rem;
}
.team-logo {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.card-title,
.logo-sample-title {
display: flex;
flex-direction: column;
gap: 2rem;
}
.card-title h2,
.logo-sample-title h2 {
color: #101010;
font-weight: 600;
font-size: 20px;
}
.card-title p,
.logo-sample-title span {
color: #5a6678;
font-weight: 500;
font-size: 17px;
line-height: 190%;
max-width: 90%;
}
.logo-sample-title {
gap: 1rem !important;
}
.logo-sample {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1.5rem !important;
}
.logo-info {
display: flex;
align-items: center;
gap: 3rem;
}
.logo-info img {
border-radius: 12px;
padding: 20px;
min-width: 200px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
height: 150px;
max-width: 150px;
width: 100%;
object-fit: cover;
}
.logo-info label {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: #6dc993;
padding: 10px 26px;
border-radius: 10px;
border: none;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.sample-logos {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.sample-logos img {
height: 110px;
width: 110px;
border-radius: 12px;
}
.form-group {
margin-bottom: 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-group label {
font-weight: 500;
width: 70%;
font-size: 16px;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #718096;
border-radius: 8px;
font-size: 1rem;
}
.form-group input:focus {
outline: none;
}
.submit-btn {
background-color: #3a57e8;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
height: 50px;
width: 60%;
font-weight: 500;
font-size: 18px;
text-align: center;
float: left;
margin-top: 0.5rem;
}
</style>

View File

@ -0,0 +1,316 @@
<template>
<div v-if="isOpen" class="modal-overlay" @click="closeModal">
<div class="modal-content" @click.stop>
<div class="popUp-header">
<h2>آموزش ها</h2>
<button @click="closeModal">
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 32 32"
fill="none"
>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="#101010" />
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#E2DEE9" />
<path
d="M21 11L11 21"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11 11L21 21"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="popUp-body">
<div v-for="(section, index) in sections" :key="index" class="popUp-object">
<h2>{{ section.title }}</h2>
<div class="cards">
<div v-for="(card, cardIndex) in section.cards" :key="cardIndex" class="card">
<div class="card-header"></div>
<span class="card-logo">
<img :src="card.icon" alt="icon">
</span>
<div class="card-body">
{{ card.title }}
</div>
<div class="card-footer">
مشاهده محتوا
</div>
</div>
</div>
</div>
</div>
<button class="exit-btn" @click="closeModal">خروج</button>
</div>
</div>
</template>
<script>
export default {
name: 'MeetingModal',
props: {
isOpen: {
type: Boolean,
default: false,
},
},
data() {
return {
sections: [
{
title: 'شروع به کار',
cards: [
{
title: 'راهنمای دسکتاپ',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'راهنمای متا',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'راهنمای مهمان',
icon: require('@/assets/img/card-icon.png'),
},
],
},
{
title: 'ویژگی‌های پیشرفته',
cards: [
{
title: 'تنظیمات پیشرفته',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'اتوماسیون',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'مدیریت کاربران',
icon: require('@/assets/img/card-icon.png'),
},
],
},
{
title: 'راهنمای کاربری',
cards: [
{
title: 'راهنمای نصب',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'راهنمای به‌روزرسانی',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'پشتیبانی',
icon: require('@/assets/img/card-icon.png'),
},
],
},
{
title: 'سوالات متداول',
cards: [
{
title: 'سوالات عمومی',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'مشکلات رایج',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'تماس با ما',
icon: require('@/assets/img/card-icon.png'),
},
{
title: 'ارتباط با ما',
icon: require('@/assets/img/card-icon.png'),
},
],
},
],
};
},
methods: {
closeModal() {
this.$emit('close');
},
},
};
</script>
<style scoped>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: #F7F5FA;
border-radius: 8px;
width: 100%;
max-width: 700px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
direction: rtl;
border-radius: 20px;
padding-bottom: 2rem;
height: 95vh;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-content::-webkit-scrollbar {
display: none;
}
.popUp-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #101010;
color: #fff;
width: 100%;
padding: 20px 26px;
margin-bottom: 1.5rem;
border-radius: 20px 20px 0px 0px;
}
.popUp-header h2 {
font-size: 22px;
}
.popUp-header button {
background-color: #101010;
border: none;
cursor: pointer;
}
.popUp-body {
display: flex;
flex-direction: column;
gap: 1rem;
padding-bottom: 2.5rem;
}
.popUp-object {
margin-top: 1rem !important;
padding: 20px;
background-color: #FFFFFF;
border-radius: 16px;
width: 100%;
max-width: 620px;
display: block;
margin: auto;
}
.popUp-object {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.popUp-object h2 {
font-size: 20px;
color: #101010;
line-height: 140%;
font-weight: 600;
}
.cards {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem 0;
}
.card {
width: 31.5%;
height: 10.5rem;
border-radius: 12px;
position: relative;
}
.card-header {
width: 100%;
height: 3.5rem;
background-color: #182561;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card-logo img {
height: 30px;
width: 30px;
}
.card-logo {
position: absolute;
top: 15px;
right: 34%;
background-color: #fff;
border-radius: 100%;
padding: 1rem 1rem 0.7rem 1rem;
border: 1px solid #182561;
}
.card-body {
background-color: #F7F6FA;
height: 4.5rem;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 1.2rem;
}
.card-footer {
color: #667387;
font-size: 14px;
border-top: 0.5px solid #E2DEE9;
background-color: #F7F6FA;
height: 2.5rem;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.exit-btn {
background-color: #3A57E8;
border-radius: 8px;
color: #fff;
border: none;
padding: 15px 45px 15px 45px;
display: block;
margin: auto;
font-size: 16px;
cursor: pointer;
}
</style>

View File

@ -11,7 +11,12 @@
<div class="right-section">
<h2 class="section-title">راهنمای شروع</h2>
<div class="tutorial-grid">
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
<img
class="tutorial-item"
@click="tutorialShowModal = true;"
src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg"
style="cursor: pointer;"
/>
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
@ -25,7 +30,7 @@
فقط یک ایده با جلسه شگفتانگیز بعدیتان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
</p>
<button class="create-meeting-btn">
<button class="create-meeting-btn" @click="showModal = true">
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
<span>ایجاد جلسه جدید</span>
</button>
@ -96,18 +101,60 @@
</div>
<!-- Create Meeting Modal -->
<CreateMeetingModal
:is-open="showModal"
@create-meeting="createNewMeeting"
@close="showModal = false"
/>
<!-- Tutorial Modal -->
<TutorialShowModal
:is-open="tutorialShowModal"
@close="tutorialShowModal = false"
/>
</template>
<script>
import SidebarMenu from '@/components/SidebarMenu.vue'
import AppHeader from '@/components/Header.vue';
import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
import TutorialShowModal from '@/components/TutorialShowModal.vue';
export default {
name: 'DashboardPage',
components: {
SidebarMenu,
AppHeader,
CreateMeetingModal,
TutorialShowModal,
},
data() {
return {
showModal: false,
tutorialShowModal: false,
}
},
methods: {
createNewMeeting(meetingData) {
const newMeeting = {
id: this.meetings.length + 1,
title: meetingData.title,
date: meetingData.date,
image: 'https://via.placeholder.com/150',
type: meetingData.type,
maxCapacity: meetingData.maxCapacity,
};
this.meetings.push(newMeeting);
this.showModal = false;
},
filterMeetings() {
console.log('Filtering meetings');
},
}
}
</script>

View File

@ -60,7 +60,7 @@
/>
</div>
<div v-if="activeTab === 'details'">
<TeamDetails />
<TeamDetails @update:teamData="handleTeamData" />
</div>
<div v-if="activeTab === 'buy-subscription'">
<BuySubscription
@ -236,6 +236,9 @@ export default {
this.closePreviewDialog();
}
},
handleTeamData(data) {
console.log('اطلاعات دریافتی : ', data);
},
openPreviewDialog(type, index, url) {
if (type === 'video') {
this.videoOptions.sources[0].src = url;