End Urses Tab

This commit is contained in:
Diyar Akhgar 2025-05-27 03:31:58 +03:30
parent b0c893caaa
commit 0e0c45dba1
4 changed files with 1045 additions and 594 deletions

View File

@ -0,0 +1,336 @@
<template>
<div v-if="isVisible" class="modal-overlay" @click="close">
<div class="modal-content" @click.stop>
<div class="popUp-header">
<h2>کاربر جدید</h2>
<button @click="close">
<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-title">
<h2>دعوت کاربر جدید</h2>
<span>کاربر یک ایمیل دعوت برای فعال کردن حساب خود دریافت میکند.</span>
</div>
<div class="popUp-objects">
<form @submit.prevent="handleSubmit" autocomplete="off">
<div class="form-group">
<label for="full_name">نام و نام خانوادگی</label>
<input
id="full_name"
v-model="newUser.full_name"
type="text"
required
/>
</div>
<div class="form-group">
<label for="email">ایمیل</label>
<input
id="email"
v-model="newUser.email"
type="email"
required
style="text-align: left;"
/>
</div>
<div class="form-group">
<label for="phone">شماره تماس</label>
<input
id="phone"
v-model="newUser.phone"
type="tel"
required
/>
</div>
<div class="form-group">
<label for="job_title">عنوان شغلی</label>
<input
id="job_title"
v-model="newUser.job_title"
type="text"
required
/>
</div>
<div class="form-group" style="justify-content: normal;">
<span>مدیر</span>
<input
type="checkbox"
id="is_manager"
class="checkbox"
v-model="newUser.is_manager"
/>
<label for="is_manager" class="switch"></label>
</div>
<div class="form-group" style="justify-content: normal;">
<span>مجوز</span>
<input
type="checkbox"
id="has_permission"
class="checkbox"
v-model="newUser.has_permission"
/>
<label for="has_permission" class="switch"></label>
</div>
</form>
</div>
<div class="form-actions">
<button type="button" class="cancel-btn" @click="close">بازگشت</button>
<button type="submit" class="submit-btn" @click="handleSubmit">تایید</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AddUserModal',
props: {
isVisible: {
type: Boolean,
default: false,
},
},
data() {
return {
newUser: {
full_name: '',
phone: '',
email: '',
job_title: '',
is_manager: false,
has_permission: false,
},
};
},
methods: {
close() {
this.newUser = {
full_name: '',
phone: '',
email: '',
job_title: '',
is_manager: false,
has_permission: false,
};
this.$emit('close');
},
handleSubmit() {
if (!this.newUser.full_name || !this.newUser.email || !this.newUser.phone || !this.newUser.job_title) {
alert('لطفاً تمام فیلدها را پر کنید.');
return;
}
this.$emit('add-user', { ...this.newUser });
console.log('اطلاعات کاربر اضافه شده:', JSON.stringify(this.newUser, null, 2));
this.close();
},
},
};
</script>
<style scoped>
.modal-overlay {
position: fixed;
inset: 0; /* جایگزین 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: 20px;
width: 100%;
max-width: 700px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
direction: rtl;
padding-bottom: 1.5rem;
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;
padding: 20px 26px;
margin-bottom: 1.5rem;
border-radius: 20px 20px 0 0;
}
.popUp-header h2 {
font-size: 22px;
}
.popUp-header button {
background-color: inherit; /* استفاده از inherit برای حذف تکرار #101010 */
border: none;
cursor: pointer;
}
.popUp-title {
display: flex;
flex-direction: column;
align-items: flex-start; /* اصلاح start به flex-start برای استاندارد بودن */
padding: 20px 50px 20px 20px;
}
.popUp-title h2 {
font-size: 20px;
font-weight: 600;
color: #101010;
}
.popUp-title span {
font-size: 16px;
font-weight: 500;
color: #4F5A69;
margin-top: 1rem;
}
.popUp-objects {
margin: 1rem auto 0; /* ترکیب margin-top و margin: auto */
padding: 20px;
background-color: #FFFFFF;
border-radius: 16px;
width: 100%;
max-width: 620px;
display: block;
}
.form-group {
margin-bottom: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-group label {
font-weight: 500;
width: 50%;
font-size: 16px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #718096;
border-radius: 8px;
font-size: 1rem;
resize: none; /* برای textarea */
}
.form-group input {
height: 45px;
max-width: 22rem;
}
.form-group textarea {
height: 140px;
max-width: 25rem;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
}
.form-actions {
display: flex;
justify-content: space-between;
padding: 20px 0 0;
width: 100%;
max-width: 620px;
margin: auto;
}
.submit-btn,
.cancel-btn {
border: none;
border-radius: 8px;
cursor: pointer;
height: 50px;
width: 47%;
font-weight: 500;
font-size: 18px;
text-align: center;
}
.submit-btn {
background-color: #3A57E8;
color: white;
}
.cancel-btn {
background-color: #EBEEFD;
color: #101010;
}
/* checkbox toggler */
.switch {
position : relative ;
display : inline-block;
width: 60px !important;
height: 25px;
background-color: #CCCCCC;
border-radius: 20px;
margin-right: 12.5rem;
}
.switch::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
top: 2px;
right: 3px;
transition: all 0.3s;
}
.checkbox:checked + .switch::after {
right: 37px;
}
.checkbox:checked + .switch {
background-color: #3a57e8;
}
.checkbox {
display : none;
}
</style>

View File

@ -289,7 +289,7 @@ export default {
.form-actions { .form-actions {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20px; padding: 20px 0px;
padding-bottom: 0; padding-bottom: 0;
width: 100%; width: 100%;
max-width: 620px; max-width: 620px;

View File

@ -0,0 +1,267 @@
<template>
<div class="card license-card">
<span>لایسنس های قابل استفاده : 0</span>
<div class="buy-subscription" @click="goToBuySubscription">
خرید اشتراک
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M12 19.5L5 12.5L12 5.5" stroke="#48BB78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 12.5H5" stroke="#48BB78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
</div>
<div class="user-cards">
<div class="user-card" v-for="(user, index) in userList" :key="index">
<div class="user-card-header">
<img :src="user.avatar" class="user-avatar" alt="avatar" />
<div class="user-info-box">
<div class="user-info-tags">
<div class="user-name">{{ user.name }}</div>
<div class="user-email">{{ user.email }}</div>
</div>
<div class="user-activity">
<div class="user-role">{{ user.role }}</div>
<div class="user-version">{{ user.version }}</div>
</div>
</div>
</div>
<div class="user-footer">
<span>اکانت XRoom</span>
<div class="user-actions">
<button><i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20" fill="none">
<path d="M16.666 5.83325H9.16602" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.666 14.1667H4.16602" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.166 16.6667C15.5467 16.6667 16.666 15.5475 16.666 14.1667C16.666 12.786 15.5467 11.6667 14.166 11.6667C12.7853 11.6667 11.666 12.786 11.666 14.1667C11.666 15.5475 12.7853 16.6667 14.166 16.6667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.83398 8.33325C7.2147 8.33325 8.33398 7.21396 8.33398 5.83325C8.33398 4.45254 7.2147 3.33325 5.83398 3.33325C4.45327 3.33325 3.33398 4.45254 3.33398 5.83325C3.33398 7.21396 4.45327 8.33325 5.83398 8.33325Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</i></button>
<button><i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20" fill="none">
<path d="M2.5 5H17.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.8327 5V16.6667C15.8327 17.5 14.9993 18.3333 14.166 18.3333H5.83268C4.99935 18.3333 4.16602 17.5 4.16602 16.6667V5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.66602 5.00008V3.33341C6.66602 2.50008 7.49935 1.66675 8.33268 1.66675H11.666C12.4993 1.66675 13.3327 2.50008 13.3327 3.33341V5.00008" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.33398 9.16675V14.1667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.666 9.16675V14.1667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</i></button>
</div>
</div>
</div>
<div class="user-card add-card" @click="openAddUserModal">
<span class="add-text"><span style="font-size: 23px;margin-left: 0.5rem;">+</span> اضافه کردن کاربر جدید</span>
</div>
</div>
<!-- Modal -->
<AddUserModal
:isVisible="isAddUserModalVisible"
@close="closeAddUserModal"
@add-user="submitNewUser"
/>
</template>
<script>
import AddUserModal from '@/components/AddUserModal.vue';
export default {
name: 'UsersTab',
components: {
AddUserModal,
},
props: {
userList: {
type: Array,
default: () => [],
},
},
data() {
return {
isAddUserModalVisible: false,
};
},
methods: {
openAddUserModal() {
this.isAddUserModalVisible = true;
},
closeAddUserModal() {
this.isAddUserModalVisible = false;
},
submitNewUser(user) {
this.$emit('add-user', user);
this.closeAddUserModal();
},
goToBuySubscription() {
this.$emit('change-tab', 'buy-subscription');
},
},
};
</script>
<style scoped>
/* User Info Section */
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.user-name {
font-size: 16px;
font-weight: 700;
color: #101010;
}
.user-email {
font-size: 14px;
font-weight: 500;
color: #4F5A69;
}
.user-info-tags,
.user-activity {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.user-activity {
padding-left: 2rem;
}
/* User Cards Section */
.user-cards {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2.5rem;
justify-content: space-between;
}
.user-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 4px 0 #00000029;
width: 48%;
height: 158px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.user-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.user-info-box {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
align-items: center;
text-align: right;
gap: 4px;
}
.user-role {
color: #3a57e8;
font-weight: 600;
font-size: 17px;
}
.buy-subscription {
display: flex;
align-items: center;
color: #48bb78;
font-weight: 500;
cursor: pointer;
}
.buy-subscription span {
margin-right: 0.5rem;
}
.add-card {
display: flex;
align-items: center;
justify-content: center;
color: #3a57e8;
font-weight: 500;
font-size: 20px;
width: 48%;
height: 158px;
cursor: pointer;
}
.card {
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
min-width: 200px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.add-text {
text-align: center;
cursor: pointer;
}
.license-card {
max-width: 1600px;
display: flex;
justify-content: space-between;
align-items: center;
}
.license-card span {
font-size: 17px;
}
/* User Footer Section */
.user-footer {
background: #3a57e8;
color: #fff;
border-radius: 0 0 12px 12px;
padding: 10px 10px 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.user-footer span {
font-size: 17px;
}
.user-actions button {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}
/* User Avatar */
.user-avatar {
width: 70px;
height: 86px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
align-self: flex-end;
margin-top: 10px;
}
</style>

View File

@ -5,107 +5,74 @@
<div class="content"> <div class="content">
<!-- Top Header --> <!-- Top Header -->
<AppHeader pageTitle="تیم ها" /> <AppHeader pageTitle="تیم ها" />
<!-- Description --> <!-- Description -->
<div class="section-description"> <div class="section-description">
<div class="section-title">مدیریت اعضا</div> <div class="section-title">مدیریت اعضا</div>
<p> <p>
در این بخش به شما امکان میدهد تا اتاقها، فایلها و جلسات را با همکاران خود به اشتراک بگذارید. در این بخش میتوانید تیم خود را مدیریت کنید. </p> در این بخش به شما امکان میدهد تا اتاقها، فایلها و جلسات را با همکاران خود به اشتراک بگذارید. در این بخش میتوانید تیم خود را مدیریت کنید.
</p>
</div> </div>
<!-- Tab Buttons -->
<!-- Tab Buttons --> <div class="tab-buttons">
<div class="tab-buttons">
<button <button
:class="['tab-btn', activeTab === 'users' ? 'active' : '']" :class="['tab-btn', activeTab === 'users' ? 'active' : '']"
@click="activeTab = 'users'" @click="activeTab = 'users'"
>کاربران</button> >
کاربران
</button>
<button <button
:class="['tab-btn', activeTab === 'buy-subscription' ? 'active' : '']" :class="['tab-btn', activeTab === 'buy-subscription' ? 'active' : '']"
@click="activeTab = 'buy-subscription'" @click="activeTab = 'buy-subscription'"
> >
خرید اشتراک خرید اشتراک
</button> </button>
<button <button
:class="['tab-btn', activeTab === 'membership' ? 'active' : '']" :class="['tab-btn', activeTab === 'membership' ? 'active' : '']"
@click="activeTab = 'membership'" @click="activeTab = 'membership'"
>اشتراک ها</button> >
اشتراک ها
</button>
<button <button
:class="['tab-btn', activeTab === 'details' ? 'active' : '']" :class="['tab-btn', activeTab === 'details' ? 'active' : '']"
@click="activeTab = 'details'" @click="activeTab = 'details'"
>جزئیات</button> >
جزئیات
</button>
</div>
<!-- Tab Content -->
<div v-if="activeTab === 'users'">
<div class="card license-card">
<span>لایسنس های قابل استفاده :</span>
<div class="buy-subscription">خرید اشتراک</div>
</div> </div>
<!-- Tab Content -->
<div class="user-cards"> <div v-if="activeTab === 'users'">
<div class="user-card add-card" @click="openAddUserDialog"> <TeamUser
<span class="add-text"> اضافه کردن کاربر جدید</span> :userList="userList"
@add-user="submitNewUser"
@change-tab="changeTab"
/>
</div> </div>
<div v-if="activeTab === 'membership'" class="tab-content">
<div class="user-card" v-for="(user, index) in userList" :key="index">
<div class="user-card-header">
<img :src="user.avatar" class="user-avatar" alt="avatar" />
<div class="user-info-box">
<div class="user-name">{{ user.name }}</div>
<div class="user-email">{{ user.email }}</div>
<div class="user-role">{{ user.role }}</div>
<div class="user-version">{{ user.version }}</div>
</div>
</div>
<div class="user-footer">
<span>اکانت XRoom</span>
<div class="user-actions">
<button><i class="icon">🗑</i></button>
<button><i class="icon"></i></button>
</div>
</div>
</div>
</div>
</div>
<div v-if="activeTab === 'membership'" class="tab-content">
<div class="access-container"> <div class="access-container">
<!-- Title Section --> <!-- Title Section -->
<div class="access-header" style=" <div
background: white; class="access-header"
border-radius: 20px; style="background: white; border-radius: 20px; padding: 20px;"
padding: 20px;"
> >
<img
<img :src="require('@/assets/img/lock Icon.png')" alt="logout" class="lock-icon"/> :src="require('@/assets/img/lock Icon.png')"
alt="logout"
class="lock-icon"
/>
<div class="header-text"> <div class="header-text">
<h3>فعالسازی دسترسی XRoom</h3> <h3>فعالسازی دسترسی XRoom</h3>
<p>دسترسی کامل به امکانات XRoom بدون واترمارک</p> <p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
</div> </div>
<!-- Subscription Button --> <!-- Subscription Button -->
<button class="primary-button"> <button class="primary-button">
<img style="margin-left:10px" :src="require('@/assets/img/hand.png')" alt="logout" /> <img
style="margin-left: 10px"
:src="require('@/assets/img/hand.png')"
alt="logout"
/>
انتخاب طرح اشتراکی انتخاب طرح اشتراکی
</button> </button>
</div> </div>
<!-- Info Cards --> <!-- Info Cards -->
<div class="info-cards"> <div class="info-cards">
<!-- Billing Info --> <!-- Billing Info -->
@ -117,16 +84,18 @@
شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br /> شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
ایمیل: aminimperator@gmail.com ایمیل: aminimperator@gmail.com
</p> </p>
<button class="secondary-button" @click="openBillingModal">ویرایش جزئیات صورتحساب</button> <button class="secondary-button" @click="openBillingModal">
ویرایش جزئیات صورتحساب
</button>
</div> </div>
<!-- Membership Info --> <!-- Membership Info -->
<div class="info-card"> <div class="info-card">
<h4>عضویت ها</h4> <h4>عضویت ها</h4>
<p>هنوز مجوزی فعال نیست. کاربران شما نمیتوانند از XRoom با واترمارک استفاده کنند.</p> <p>
هنوز مجوزی فعال نیست. کاربران شما نمیتوانند از XRoom با واترمارک استفاده کنند.
</p>
<button class="secondary-button">مدیریت عضویت ها</button> <button class="secondary-button">مدیریت عضویت ها</button>
</div> </div>
<!-- Payment Method --> <!-- Payment Method -->
<div class="info-card"> <div class="info-card">
<h4>روش پرداخت</h4> <h4>روش پرداخت</h4>
@ -137,19 +106,14 @@
:isVisible="isBillingModalVisible" :isVisible="isBillingModalVisible"
@close="closeBillingModal" @close="closeBillingModal"
/> />
</div> </div>
</div>
</div> <div v-if="activeTab === 'details'" class="tab-content">
<div v-if="activeTab === 'details'" class="tab-content">
<div class="card">جزئیات تیم ۱</div> <div class="card">جزئیات تیم ۱</div>
<div class="card">جزئیات تیم ۲</div> <div class="card">جزئیات تیم ۲</div>
</div> </div>
<div v-if="activeTab === 'buy-subscription'" class="tab-content">
<div v-if="activeTab === 'buy-subscription'" class="tab-content">
<div class="buy-subscription-container"> <div class="buy-subscription-container">
<div style="text-align: center; margin-bottom: 20px;"> <div style="text-align: center; margin-bottom: 20px;">
<label for="memberCount" style="margin-left: 10px;">تعداد کاربران:</label> <label for="memberCount" style="margin-left: 10px;">تعداد کاربران:</label>
<select <select
@ -163,31 +127,38 @@
</option> </option>
</select> </select>
</div> </div>
<h3 style="text-align: center; margin-bottom: 20px;">
<h3 style="text-align: center; margin-bottom: 20px;">لطفا نوع اشتراک خود را انتخاب کنید</h3> لطفا نوع اشتراک خود را انتخاب کنید
</h3>
<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;"> <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
<div class="plan-card"> <div class="plan-card">
<h4>هفتگی</h4> <h4>هفتگی</h4>
<p>۲۵۰٬۰۰۰ تومان<br><small>برای یک کاربر، در هفته</small></p> <p>۲۵۰٬۰۰۰ تومان<br /><small>برای یک کاربر، در هفته</small></p>
<button class="primary-button" @click="selectPlan('weekly')">انتخاب طرح اشتراک</button> <button class="primary-button" @click="selectPlan('weekly')">
انتخاب طرح اشتراک
</button>
</div> </div>
<div class="plan-card"> <div class="plan-card">
<h4>ماهانه</h4> <h4>ماهانه</h4>
<p>۶۷۰٬۰۰۰ تومان<br><small>برای یک کاربر، در هفته</small></p> <p>۶۷۰٬۰۰۰ تومان<br /><small>برای یک کاربر، در هفته</small></p>
<button class="primary-button" @click="selectPlan('monthly')">انتخاب طرح اشتراک</button> <button class="primary-button" @click="selectPlan('monthly')">
انتخاب طرح اشتراک
</button>
</div> </div>
<div class="plan-card"> <div class="plan-card">
<h4>سالانه</h4> <h4>سالانه</h4>
<p>۴٬۶۰۰٬۰۰۰ تومان<br><small>برای یک کاربر، در هفته</small></p> <p>۴٬۶۰۰٬۰۰۰ تومان<br /><small>برای یک کاربر، در هفته</small></p>
<button class="primary-button" @click="selectPlan('yearly')">انتخاب طرح اشتراک</button> <button class="primary-button" @click="selectPlan('yearly')">
انتخاب طرح اشتراک
</button>
</div> </div>
</div> </div>
<!-- فاکتور --> <!-- فاکتور -->
<div v-if="selectedPlan" class="invoice-box" style="margin-top: 40px; background: white; padding: 20px; border-radius: 12px; max-width: 400px; margin-right: auto; margin-left: auto;"> <div
v-if="selectedPlan"
class="invoice-box"
style="margin-top: 40px; background: white; padding: 20px; border-radius: 12px; max-width: 400px; margin-right: auto; margin-left: auto;"
>
<h4 style="margin-bottom: 16px;">پیشفاکتور اشتراک {{ selectedPlan.name }}</h4> <h4 style="margin-bottom: 16px;">پیشفاکتور اشتراک {{ selectedPlan.name }}</h4>
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;"> <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>قیمت پایه:</span> <span>قیمت پایه:</span>
@ -197,70 +168,28 @@
<span>مالیات (۹٪):</span> <span>مالیات (۹٪):</span>
<span>{{ selectedPlan.tax.toLocaleString() }} تومان</span> <span>{{ selectedPlan.tax.toLocaleString() }} تومان</span>
</div> </div>
<div style="display: flex; justify-content: space-between; font-weight: bold; font-size: 16px; margin-bottom: 20px;"> <div
style="display: flex; justify-content: space-between; font-weight: bold; font-size: 16px; margin-bottom: 20px;"
>
<span>مبلغ قابل پرداخت:</span> <span>مبلغ قابل پرداخت:</span>
<span>{{ selectedPlan.total.toLocaleString() }} تومان</span> <span>{{ selectedPlan.total.toLocaleString() }} تومان</span>
</div> </div>
<button class="primary-button" style="width: 100%;" @click="pay">
<button class="primary-button" style="width: 100%;" @click="pay">پرداخت</button> پرداخت
</div> </button>
</div>
</div>
</div> </div>
</div> </div>
<dialog ref="addUserDialog" class="add-user-dialog">
<div class="dialog-header">
<button class="close-btn" @click="closeAddUserDialog"></button>
<h3>کاربر جدید</h3>
</div> </div>
<div class="dialog-body">
<h4>دعوت کاربر جدید</h4>
<p style=" line-height: 45px;">کاربر یک ایمیل دعوت برای فعال کردن حساب خود دریافت میکند.</p>
<form class="form-fields" @submit.prevent="submitNewUser">
<div class="form-row">
<label>نام </label>
<input v-model="newUser.first_name" required />
</div> </div>
<div class="form-row">
<label>نام خانوادگی</label>
<input v-model="newUser.last_name" required />
</div> </div>
<div class="form-row">
<label>شماره تماس</label>
<input v-model="newUser.phone" />
</div>
<div class="form-row">
<label>پسورد </label>
<input type="password" v-model="newUser.password" />
</div>
<div class="dialog-actions">
<button type="submit" class="confirm-btn">تایید</button>
<button type="button" class="cancel-btn" @click="closeAddUserDialog">بازگشت</button>
</div>
</form>
</div>
</dialog>
</template> </template>
<script> <script>
import 'video.js/dist/video-js.css'; import SidebarMenu from '@/components/SidebarMenu.vue';
import '@videojs/themes/dist/sea/index.css';
import '@google/model-viewer'
import SidebarMenu from '@/components/SidebarMenu.vue'
import EditBillingModal from '@/components/EditBillingModal.vue'; import EditBillingModal from '@/components/EditBillingModal.vue';
import axios from 'axios';
import 'video.js/dist/video-js.css';
import AppHeader from '@/components/Header.vue'; import AppHeader from '@/components/Header.vue';
import TeamUser from '@/components/TeamUser.vue';
import axios from 'axios';
export default { export default {
name: 'DashboardPage', name: 'DashboardPage',
@ -268,33 +197,19 @@ export default {
SidebarMenu, SidebarMenu,
EditBillingModal, EditBillingModal,
AppHeader, AppHeader,
TeamUser,
}, },
data() { data() {
return { return {
isBillingModalVisible: false, isBillingModalVisible: false,
memberCount: 5, memberCount: 5,
availableMemberOptions: [5, 10, 20, 100], availableMemberOptions: [5, 10, 20, 100],
newUser: {
first_name: '',
last_name: '',
phone: '',
password: '',
isAdmin: false,
hasAccess: false,
}
,
selectedPlan: null, selectedPlan: null,
plans: { plans: {
weekly: { name: 'هفتگی', price: 250000 }, weekly: { name: 'هفتگی', price: 250000 },
monthly: { name: 'ماهانه', price: 670000 }, monthly: { name: 'ماهانه', price: 670000 },
yearly: { name: 'سالانه', price: 4600000 } yearly: { name: 'سالانه', price: 4600000 },
}, },
// ... existing data ...
userList: [ userList: [
{ {
name: 'دانیال پژوهش کیا', name: 'دانیال پژوهش کیا',
@ -316,33 +231,32 @@ export default {
role: 'مدیر', role: 'مدیر',
version: 'نسخه آزمایشی', version: 'نسخه آزمایشی',
avatar: 'https://models.readyplayer.me/681f59760bc631a87ad25172.png', avatar: 'https://models.readyplayer.me/681f59760bc631a87ad25172.png',
} },
] ],
,
activeTab: 'users', activeTab: 'users',
previewUrl: '', previewUrl: '',
currentPreviewIndex: null, currentPreviewIndex: null,
currentPreviewType: null, currentPreviewType: null,
videoOptions: { videoOptions: {
autoplay: false, autoplay: false,
controls: true, controls: true,
sources: [{ sources: [
{
type: 'video/mp4', type: 'video/mp4',
src: '' // Will be set dynamically src: '',
}] },
],
}, },
userData: { userData: {
customer: {}, customer: {},
user: { user: {
first_name: '', first_name: '',
last_name: '' last_name: '',
}, },
images: [], images: [],
pdfs: [], pdfs: [],
videos: [], videos: [],
glbs: [] glbs: [],
}, },
newFileName: '', newFileName: '',
selectedFile: null, selectedFile: null,
@ -350,21 +264,23 @@ export default {
baseUrl: 'http://194.62.43.230:8000', baseUrl: 'http://194.62.43.230:8000',
currentUploadType: 'image', currentUploadType: 'image',
dialogTitle: 'آپلود فایل جدید', dialogTitle: 'آپلود فایل جدید',
fileAccept: '*/*' fileAccept: '*/*',
} };
}, },
created() { created() {
this.fetchUserData(); this.fetchUserData();
}, },
methods: { methods: {
changeTab(tabName) {
this.activeTab = tabName;
},
openBillingModal() { openBillingModal() {
this.isBillingModalVisible = true; this.isBillingModalVisible = true;
}, },
closeBillingModal() { closeBillingModal() {
this.isBillingModalVisible = false; this.isBillingModalVisible = false;
}, },
selectPlan(planKey) { selectPlan(planKey) {
const plan = this.plans[planKey]; const plan = this.plans[planKey];
if (!plan) return; if (!plan) return;
@ -376,32 +292,19 @@ export default {
...plan, ...plan,
basePrice: base, basePrice: base,
tax, tax,
total: base + tax total: base + tax,
}; };
} },
,
pay() { pay() {
alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`); alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
this.selectedPlan = null; this.selectedPlan = null;
}, },
submitNewUser(newUser) {
console.log('کاربر جدید:', newUser);
openAddUserDialog() {
this.$refs.addUserDialog.showModal();
},
closeAddUserDialog() {
this.$refs.addUserDialog.close();
},
submitNewUser() {
// اینجا میتونی ارسال به API اضافه کنی
console.log('کاربر جدید:', this.newUser);
alert('کاربر با موفقیت اضافه شد'); alert('کاربر با موفقیت اضافه شد');
this.closeAddUserDialog(); // میتوانید اینجا کد مربوط به ارسال به API را اضافه کنید
} },
,
handleBackdropClick(event) { handleBackdropClick(event) {
// Check if click was directly on the dialog element (backdrop)
if (event.target === this.$refs.filePreviewDialog) { if (event.target === this.$refs.filePreviewDialog) {
this.closePreviewDialog(); this.closePreviewDialog();
} }
@ -421,10 +324,6 @@ submitNewUser() {
this.currentPreviewType = type; this.currentPreviewType = type;
this.currentPreviewIndex = index; this.currentPreviewIndex = index;
this.previewUrl = url; this.previewUrl = url;
// Special handling for video
this.currentPreviewType = type;
this.currentPreviewIndex = index;
if (type === 'video') { if (type === 'video') {
this.videoOptions.sources[0].src = url; this.videoOptions.sources[0].src = url;
@ -446,36 +345,25 @@ submitNewUser() {
this.previewImageUrl = ''; this.previewImageUrl = '';
} }
// this.$refs.imagePreviewDialog.showModal();
this.$refs.filePreviewDialog.showModal(); this.$refs.filePreviewDialog.showModal();
}, },
getVideoThumbnail(videoUrl) { getVideoThumbnail() {
// You can implement a proper thumbnail generation here return 'https://cdn-icons-png.flaticon.com/512/2839/2839038.png';
// For now, we'll just return a placeholder
videoUrl = 'https://cdn-icons-png.flaticon.com/512/2839/2839038.png'
return videoUrl;
}, },
closePreviewDialog() { closePreviewDialog() {
// Safely access the dialog reference
const dialog = this.$refs.filePreviewDialog; const dialog = this.$refs.filePreviewDialog;
if (dialog && typeof dialog.close === 'function') { if (dialog && typeof dialog.close === 'function') {
dialog.close(); dialog.close();
} else { } else {
console.warn('Dialog reference not found or close method unavailable'); console.warn('Dialog reference not found or close method unavailable');
} }
// Reset preview state
this.previewUrl = ''; this.previewUrl = '';
this.currentPreviewIndex = null; this.currentPreviewIndex = null;
this.currentPreviewType = null; this.currentPreviewType = null;
}, },
async downloadFile() { async downloadFile() {
const url = this.currentPreviewType === 'image' const url =
? this.previewImageUrl this.currentPreviewType === 'image' ? this.previewImageUrl : this.previewPdfUrl;
: this.previewPdfUrl;
if (!url) return; if (!url) return;
try { try {
@ -485,7 +373,6 @@ submitNewUser() {
const a = document.createElement('a'); const a = document.createElement('a');
a.href = downloadUrl; a.href = downloadUrl;
// Set appropriate filename
if (this.currentPreviewType === 'image') { if (this.currentPreviewType === 'image') {
a.download = `image-${new Date().getTime()}.${url.split('.').pop()}`; a.download = `image-${new Date().getTime()}.${url.split('.').pop()}`;
} else if (this.currentPreviewType === 'pdf') { } else if (this.currentPreviewType === 'pdf') {
@ -501,7 +388,6 @@ submitNewUser() {
alert('خطا در دانلود فایل'); alert('خطا در دانلود فایل');
} }
}, },
async deleteFile() { async deleteFile() {
if (this.currentPreviewIndex === null || !this.currentPreviewType) return; if (this.currentPreviewIndex === null || !this.currentPreviewType) return;
@ -511,7 +397,7 @@ submitNewUser() {
let itemId = ''; let itemId = '';
let fileArray = []; let fileArray = [];
switch(this.currentPreviewType) { switch (this.currentPreviewType) {
case 'image': case 'image':
fileArray = this.userData.images; fileArray = this.userData.images;
itemId = fileArray[this.currentPreviewIndex].id; itemId = fileArray[this.currentPreviewIndex].id;
@ -536,8 +422,8 @@ submitNewUser() {
await axios.delete(deleteUrl, { await axios.delete(deleteUrl, {
headers: { headers: {
'Authorization': `Token ${token}` Authorization: `Token ${token}`,
} },
}); });
this.closePreviewDialog(); this.closePreviewDialog();
@ -551,13 +437,11 @@ submitNewUser() {
async fetchUserData() { async fetchUserData() {
try { try {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
const response = await axios.get(`${this.baseUrl}/getInfo`, { const response = await axios.get(`${this.baseUrl}/getInfo`, {
headers: { headers: {
'Authorization': `Token ${token}` Authorization: `Token ${token}`,
} },
}); });
this.userData = response.data; this.userData = response.data;
} catch (error) { } catch (error) {
console.error('Error fetching user data:', error); console.error('Error fetching user data:', error);
@ -575,7 +459,7 @@ submitNewUser() {
openDialog(type) { openDialog(type) {
this.currentUploadType = type; this.currentUploadType = type;
switch(type) { switch (type) {
case 'image': case 'image':
this.dialogTitle = 'آپلود تصویر جدید'; this.dialogTitle = 'آپلود تصویر جدید';
this.fileAccept = 'image/*'; this.fileAccept = 'image/*';
@ -610,13 +494,9 @@ submitNewUser() {
this.uploading = true; this.uploading = true;
const formData = new FormData(); const formData = new FormData();
// formData.append('file', this.selectedFile);
formData.append('name', this.newFileName || this.selectedFile.name); formData.append('name', this.newFileName || this.selectedFile.name);
switch (this.currentUploadType) {
switch(this.currentUploadType) {
case 'image': case 'image':
formData.append('image', this.selectedFile); formData.append('image', this.selectedFile);
break; break;
@ -625,20 +505,17 @@ submitNewUser() {
break; break;
case 'video': case 'video':
formData.append('video', this.selectedFile); formData.append('video', this.selectedFile);
break; break;
case 'glb': case 'glb':
formData.append('glb', this.selectedFile); formData.append('glb', this.selectedFile);
break; break;
} }
try { try {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
let uploadUrl = ''; let uploadUrl = '';
switch(this.currentUploadType) { switch (this.currentUploadType) {
case 'image': case 'image':
uploadUrl = `${this.baseUrl}/uploadImage/`; uploadUrl = `${this.baseUrl}/uploadImage/`;
break; break;
@ -655,16 +532,13 @@ submitNewUser() {
await axios.post(uploadUrl, formData, { await axios.post(uploadUrl, formData, {
headers: { headers: {
'Authorization': `Token ${token}`, Authorization: `Token ${token}`,
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data',
} },
}); });
this.closeDialog(); this.closeDialog();
// Refresh the data after successful upload
await this.fetchUserData(); await this.fetchUserData();
// Show success message
alert('فایل با موفقیت آپلود شد'); alert('فایل با موفقیت آپلود شد');
} catch (error) { } catch (error) {
console.error('Error uploading file:', error); console.error('Error uploading file:', error);
@ -672,12 +546,10 @@ submitNewUser() {
} finally { } finally {
this.uploading = false; this.uploading = false;
} }
} },
} },
} };
</script> </script>
<!-- Your existing styles remain the same --> <!-- Your existing styles remain the same -->
<style scoped> <style scoped>
@ -712,7 +584,6 @@ submitNewUser() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
min-height: 80vh;
} }
.header-row { .header-row {
@ -744,17 +615,13 @@ submitNewUser() {
height: 20px; height: 20px;
} }
.user-info { .user-info-box {
text-align: right;
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 10px; gap: 6px;
} margin-top: 20px;
}
.user-name {
font-size: 14px;
font-weight: 500;
color: #2d3748;
}
.avatar-box { .avatar-box {
width: 40px; width: 40px;
@ -785,13 +652,13 @@ submitNewUser() {
} }
.section-title { .section-title {
font-size: 17px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #1a202c; color: #1a202c;
} }
.section-description p { .section-description p {
font-size: 14px; font-size: 15px;
color: #4a5568; color: #4a5568;
line-height: 1.8; line-height: 1.8;
} }
@ -1294,11 +1161,7 @@ submitNewUser() {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
}
.user-info { .user-info {
flex-grow: 1; flex-grow: 1;
@ -1338,7 +1201,7 @@ submitNewUser() {
background: none; background: none;
border: none; border: none;
color: gray; color: gray;
font-size: 14px; font-size: 17px;
padding: 8px 16px; padding: 8px 16px;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@ -1348,6 +1211,7 @@ submitNewUser() {
.tab-btn.active { .tab-btn.active {
color: #3a57e8; color: #3a57e8;
border-bottom: 2px solid #3a57e8; border-bottom: 2px solid #3a57e8;
font-size: 20px;
} }
.tab-content { .tab-content {
@ -1373,25 +1237,32 @@ submitNewUser() {
} }
.buy-subscription { .buy-subscription {
display: flex;
align-items: center;
color: #48bb78; /* Tailwind-style green */ color: #48bb78; /* Tailwind-style green */
font-weight: 600; font-weight: 500;
cursor: pointer; cursor: pointer;
} }
.buy-subscription span {
margin-right : 0.5rem;
}
.user-cards { .user-cards {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 2rem;
margin-top: 20px; margin-top: 2.5rem;
height: 280px; height: 100%;
justify-content: space-between;
} }
.user-card { .user-card {
background: #fff; background: #fff;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-shadow: 0 1px 4px 0 #00000029;
width: 440px; width: 48%;
height: 158px; height: 158px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1400,55 +1271,41 @@ submitNewUser() {
position: relative; position: relative;
} }
.user-info-box {
text-align: right;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 20px;
}
.user-role { .user-role {
color: #3a57e8; color: #3a57e8 !important;
font-weight: 600; font-weight: 600;
font-size: 17px !important;
} }
.user-name { .user-name {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
} }
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
align-self: flex-end;
margin-top: 10px;
}
.user-actions button {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}
.add-card { .add-card {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #3a57e8; color: #3a57e8;
font-weight: 600; font-weight: 500;
font-size: 14px; font-size: 20px;
border: 2px dashed #3a57e8; width: 48%;
width: 440px;
height: 158px; height: 158px;
cursor: pointer;
} }
.add-text { .add-text {
text-align: center; text-align: center;
cursor: pointer;
} }
/* dialog */ /* dialog */
@ -1460,6 +1317,10 @@ submitNewUser() {
padding: 0; padding: 0;
} }
.license-card span{
font-size: 17px;
}
.dialog-header { .dialog-header {
background: black; background: black;
color: white; color: white;
@ -1631,30 +1492,10 @@ submitNewUser() {
.user-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.user-avatar {
width: 70px;
height: 86px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.user-info-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
text-align: right;
gap: 4px;
}
.user-name { .user-name {
font-weight: 700; font-weight: 700;
@ -1662,7 +1503,7 @@ submitNewUser() {
} }
.user-email, .user-role, .user-version { .user-email, .user-role, .user-version {
font-size: 14px; font-size: 15px;
color: #4a5568; color: #4a5568;
} }
@ -1671,12 +1512,17 @@ submitNewUser() {
color: #fff; color: #fff;
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
padding: 10px; padding: 10px;
padding-bottom: 5px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* margin-top: 20px; */ /* margin-top: 20px; */
} }
.user-footer span{
font-size: 17px;
}
.user-actions button { .user-actions button {
background: none; background: none;
border: none; border: none;
@ -1689,6 +1535,8 @@ submitNewUser() {
.plan-card { .plan-card {
background-color: white; background-color: white;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;