mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 16:24:35 +00:00
End Urses Tab
This commit is contained in:
Diyar Akhgar
parent
b0c893caaa
commit
0e0c45dba1
336
xroom-dashboard/src/components/AddUserModal.vue
Normal file
336
xroom-dashboard/src/components/AddUserModal.vue
Normal 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>
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
267
xroom-dashboard/src/components/TeamUser.vue
Normal file
267
xroom-dashboard/src/components/TeamUser.vue
Normal 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>
|
||||||
|
|
@ -5,22 +5,21 @@
|
||||||
<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'"
|
||||||
|
|
@ -30,82 +29,50 @@
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Tab Content -->
|
<!-- Tab Content -->
|
||||||
<div v-if="activeTab === 'users'">
|
<div v-if="activeTab === 'users'">
|
||||||
<div class="card license-card">
|
<TeamUser
|
||||||
<span>لایسنس های قابل استفاده :</span>
|
:userList="userList"
|
||||||
<div class="buy-subscription">خرید اشتراک</div>
|
@add-user="submitNewUser"
|
||||||
|
@change-tab="changeTab"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="user-cards">
|
|
||||||
<div class="user-card add-card" @click="openAddUserDialog">
|
|
||||||
<span class="add-text">➕ اضافه کردن کاربر جدید</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<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 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>
|
||||||
|
|
@ -138,18 +107,13 @@
|
||||||
@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>
|
||||||
</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 class="form-row">
|
|
||||||
<label>نام خانوادگی</label>
|
|
||||||
<input v-model="newUser.last_name" required />
|
|
||||||
</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;
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -610,12 +494,8 @@ 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);
|
||||||
|
|
@ -625,15 +505,12 @@ 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 = '';
|
||||||
|
|
@ -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,16 +615,12 @@ 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 {
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user