mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 00:04:35 +00:00
Compare commits
2 Commits
94e8b089a9
...
ad3a84b0d8
| Author | SHA1 | Date | |
|---|---|---|---|
|
ad3a84b0d8 | ||
|
|
cf8997c238 |
|
|
@ -20,6 +20,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import AppHeader from '@/components/Header.vue';
|
||||
import SidebarMenu from '@/components/SidebarMenu.vue';
|
||||
|
|
@ -46,10 +47,20 @@ export default {
|
|||
toggleSidebar() {
|
||||
this.isSidebarOpen = !this.isSidebarOpen;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const content = document.querySelector('.content');
|
||||
if (content) {
|
||||
content.addEventListener('scroll', () => {
|
||||
document.body.scrollTop = content.scrollTop;
|
||||
document.documentElement.scrollTop = content.scrollTop;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* Reset default margins and set base font */
|
||||
body {
|
||||
|
|
@ -57,12 +68,15 @@ body {
|
|||
padding: 0;
|
||||
font-family: 'Yekan', 'Arial', sans-serif;
|
||||
background-color: #f4f7fa;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* App title styling */
|
||||
.app-title {
|
||||
color: #fff;
|
||||
font-size: 2rem; /* 32px, using rem for scalability */
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -71,13 +85,15 @@ body {
|
|||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
/* Router view content */
|
||||
router-view {
|
||||
flex-grow: 1;
|
||||
padding: 1.25rem; /* 20px, using rem for consistency */
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -90,7 +106,7 @@ router-view {
|
|||
src: url('@/assets/fonts/IRANSansXFaNum-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap; /* Improves font loading performance */
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Global Font Application */
|
||||
|
|
@ -106,6 +122,14 @@ router-view {
|
|||
flex-direction: column;
|
||||
gap: 32px;
|
||||
padding: 35px 80px;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar {
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
|
|
|
|||
|
|
@ -416,6 +416,8 @@ export default {
|
|||
endHour: 18,
|
||||
endMinute: 0,
|
||||
selectedRoom: null,
|
||||
space: null,
|
||||
asset_bundle: null,
|
||||
use_space: false,
|
||||
},
|
||||
participants: [],
|
||||
|
|
@ -431,8 +433,9 @@ export default {
|
|||
return JSON.parse(localStorage.getItem('customer') || '{}');
|
||||
},
|
||||
fullName() {
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
return user.first_name && user.last_name ? `${user.first_name} ${user.last_name}` : 'کاربر مهمان';
|
||||
return this.customer.first_name && this.customer.last_name
|
||||
? `${this.customer.first_name} ${this.customer.last_name}`
|
||||
: 'کاربر مهمان';
|
||||
},
|
||||
userPhone() {
|
||||
return this.customer.mobile_number || 'شماره تلفن موجود نیست';
|
||||
|
|
@ -514,6 +517,8 @@ export default {
|
|||
},
|
||||
handleRoomSelection(room) {
|
||||
this.form.selectedRoom = room;
|
||||
this.form.space = room.space;
|
||||
this.form.asset_bundle = room.asset_bundle;
|
||||
this.form.use_space = room.use_space;
|
||||
this.isRoomSelectionOpen = false;
|
||||
},
|
||||
|
|
@ -573,6 +578,8 @@ export default {
|
|||
endHour: 18,
|
||||
endMinute: 0,
|
||||
selectedRoom: null,
|
||||
space: null,
|
||||
asset_bundle: null,
|
||||
use_space: false,
|
||||
};
|
||||
this.participants = [];
|
||||
|
|
@ -593,7 +600,7 @@ export default {
|
|||
this.error = 'لطفاً نام جلسه و تاریخ را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
if (!this.form.selectedRoom) {
|
||||
if (!this.form.selectedRoom || this.form.space === null || this.form.asset_bundle === null) {
|
||||
this.error = 'لطفاً یک اتاق برای جلسه انتخاب کنید.';
|
||||
return;
|
||||
}
|
||||
|
|
@ -612,16 +619,18 @@ export default {
|
|||
.clone()
|
||||
.set({ hour: this.form.startHour, minute: this.form.startMinute, second: 0 })
|
||||
.toISOString();
|
||||
|
||||
const meetingData = {
|
||||
name: this.form.title,
|
||||
description: this.form.description,
|
||||
date_time: startDateTime,
|
||||
space: this.form.space,
|
||||
asset_bundle: this.form.asset_bundle,
|
||||
use_space: this.form.use_space,
|
||||
user_ids: [this.userId, ...this.participants.map((p) => p.id)],
|
||||
};
|
||||
|
||||
try {
|
||||
const meetingData = {
|
||||
name: this.form.title,
|
||||
description: this.form.description,
|
||||
date_time: startDateTime,
|
||||
space: this.form.selectedRoom.id,
|
||||
asset_bundle: 1,
|
||||
use_space: this.form.use_space,
|
||||
user_ids: [this.userId, ...this.participants.map((p) => p.id)],
|
||||
};
|
||||
this.$emit('create-meeting', meetingData);
|
||||
this.closeModalByButton();
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- RoomSelectionModal.vue -->
|
||||
<template>
|
||||
<div v-if="isOpen" class="modal-overlay" @click="cancel">
|
||||
<div class="modal-content" @click.stop>
|
||||
|
|
@ -343,7 +344,7 @@ export default {
|
|||
async fetchSpaces() {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) throw new Error('توکن احراز هویت پیدا نشد');
|
||||
if (!token) throw new Error();
|
||||
|
||||
const response = await axios.get(`${API_BASE_URL}/get_space`, {
|
||||
headers: { Authorization: `Token ${token.trim()}` },
|
||||
|
|
@ -351,6 +352,7 @@ export default {
|
|||
|
||||
this.rooms = response.data.spaces.map((space) => ({
|
||||
id: space.id,
|
||||
assetBundleRoomId: space.assetBundleRoomId?.id,
|
||||
image: space.assetBundleRoomId?.img
|
||||
? `${API_BASE_URL}${space.assetBundleRoomId.img}`
|
||||
: DEFAULT_IMAGE,
|
||||
|
|
@ -361,7 +363,6 @@ export default {
|
|||
}));
|
||||
} catch (error) {
|
||||
if (error.response?.status === 403) {
|
||||
alert('لطفاً دوباره وارد شوید');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
this.error = 'خطا در بارگذاری لیست اتاقها';
|
||||
|
|
@ -370,7 +371,7 @@ export default {
|
|||
async fetchTemporaryRooms() {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) throw new Error('توکن احراز هویت پیدا نشد');
|
||||
if (!token) throw new Error();
|
||||
|
||||
const response = await axios.get(`${API_BASE_URL}/get_assigned_assetbundle_rooms`, {
|
||||
headers: { Authorization: `Token ${token.trim()}` },
|
||||
|
|
@ -386,7 +387,6 @@ export default {
|
|||
}));
|
||||
} catch (error) {
|
||||
if (error.response?.status === 403) {
|
||||
alert('لطفاً دوباره وارد شوید');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
this.error = 'خطا در بارگذاری لیست اتاقهای موقت';
|
||||
|
|
@ -401,24 +401,42 @@ export default {
|
|||
},
|
||||
submitRoom() {
|
||||
if (!this.selectedRoom) {
|
||||
alert('لطفاً یک اتاق انتخاب کنید.');
|
||||
return;
|
||||
}
|
||||
const selectedRoomDetails = [...this.rooms, ...this.temporaryRooms].find(
|
||||
(room) => room.id === this.selectedRoom
|
||||
);
|
||||
this.$emit('submit-room', {
|
||||
...selectedRoomDetails,
|
||||
id: selectedRoomDetails.isTemporary ? 12 : selectedRoomDetails.id,
|
||||
use_space: !selectedRoomDetails.isTemporary,
|
||||
});
|
||||
if (!selectedRoomDetails) {
|
||||
return;
|
||||
}
|
||||
|
||||
let roomData;
|
||||
if (selectedRoomDetails.isTemporary) {
|
||||
roomData = {
|
||||
...selectedRoomDetails,
|
||||
space: 18,
|
||||
asset_bundle: selectedRoomDetails.id,
|
||||
use_space: false,
|
||||
};
|
||||
} else {
|
||||
if (!selectedRoomDetails.assetBundleRoomId) {
|
||||
return;
|
||||
}
|
||||
roomData = {
|
||||
...selectedRoomDetails,
|
||||
space: selectedRoomDetails.id,
|
||||
asset_bundle: selectedRoomDetails.assetBundleRoomId,
|
||||
use_space: true,
|
||||
};
|
||||
}
|
||||
|
||||
this.$emit('submit-room', roomData);
|
||||
this.selectedRoom = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Top Header -->
|
||||
<AppHeader pageTitle="دانلود ها" />
|
||||
|
||||
<!-- Description -->
|
||||
<div class="section-description">
|
||||
|
|
@ -74,127 +73,109 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
/* .dashboard-page {
|
||||
margin-right: 360px;
|
||||
padding: 20px;
|
||||
direction: rtl;
|
||||
font-family: IRANSansXFaNum, sans-serif;
|
||||
}
|
||||
.content {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 20px;
|
||||
padding: 35px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
*/
|
||||
/* Base styles applied across all screen sizes */
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
color: #101010;
|
||||
font-size: 19px;
|
||||
line-height: 26.6px;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin: 1rem 0 3rem;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.section-description p {
|
||||
line-height: 190%;
|
||||
color: #4F5A69;
|
||||
font-size: 16px;
|
||||
margin-top: 1rem;
|
||||
line-height: 190%;
|
||||
color: #4f5a69;
|
||||
font-size: 15px;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.chose-device {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.card-border {
|
||||
background: linear-gradient(to right, #001940, #4364F7);
|
||||
padding: 2px 1px;
|
||||
border-radius: 20px;
|
||||
width: 287px;
|
||||
height: 442px;
|
||||
margin-left: 2.5rem;
|
||||
.chose-device {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.platform-card {
|
||||
position: relative;
|
||||
width: 287px;
|
||||
height: 442px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
min-height: 320px;
|
||||
border-radius: 20px;
|
||||
background: white;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
margin-left: 2.5rem;
|
||||
margin: 0;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.platform-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 2.5px;
|
||||
padding: 2px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(to right, #001940, #4364F7);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
background: linear-gradient(to right, #001940, #4364f7);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.card-objects {
|
||||
text-align: center;
|
||||
padding: 1.5rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card-objects {
|
||||
text-align: center;
|
||||
padding: 2.5rem 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color : #718096;
|
||||
max-width: 220px;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #718096;
|
||||
max-width: 80%;
|
||||
line-height: 190%;
|
||||
}
|
||||
|
||||
.active-button {
|
||||
position: relative;
|
||||
width: 207px;
|
||||
width: 80%;
|
||||
max-width: 207px;
|
||||
height: 46px;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
color: black;
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding-top: 5%;
|
||||
transition: background 0.8s ease, color 0.6s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.8s ease, color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.active-button::before {
|
||||
|
|
@ -203,35 +184,162 @@ export default {
|
|||
inset: 0;
|
||||
padding: 1px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(to right, #001940, #4364F7);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
background: linear-gradient(to right, #001940, #4364f7);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
z-index: -1;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.active-button:hover {
|
||||
background: linear-gradient(to right, #001940, #4364F7);
|
||||
color: #fff;
|
||||
background: linear-gradient(to right, #001940, #4364f7);
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
width: 207px;
|
||||
height: 46px;
|
||||
color: #111;
|
||||
background-color: #E6E6E6;
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
padding-top: 5%;
|
||||
width: 80%;
|
||||
max-width: 207px;
|
||||
height: 46px;
|
||||
color: #111;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.instructions-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #4f5a69;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Media Query for Tablets (600px < width ≤ 1024px) */
|
||||
@media (min-width: 600px) and (max-width: 1024px) {
|
||||
.section-description {
|
||||
font-size: 20px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section-description p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.platform-card {
|
||||
width: 287px;
|
||||
height: 442px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.platform-card::before {
|
||||
padding: 2.5px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.active-button,
|
||||
.disabled-button {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.instructions-text {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media Query for Small Desktops (1024px <س width ≤ 1280px) */
|
||||
@media (min-width: 1024px) and (max-width: 1280px) {
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #4F5A69;
|
||||
color: #101010;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.platform-card {
|
||||
width: 287px;
|
||||
height: 442px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.platform-card::before {
|
||||
padding: 2.5px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.active-button,
|
||||
.disabled-button {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media Query for Large Desktops (width > 1280px) */
|
||||
@media (min-width: 1280px) {
|
||||
.section-title {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.platform-card {
|
||||
width: 287px;
|
||||
height: 442px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.platform-card::before {
|
||||
padding: 2.5px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.active-button,
|
||||
.disabled-button {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -107,6 +107,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<swiper
|
||||
ref="swiper"
|
||||
:slides-per-view="1.4"
|
||||
:space-between="10"
|
||||
:loop="true"
|
||||
|
|
@ -119,7 +120,7 @@
|
|||
:modules="modules"
|
||||
class="swiper-meetings-list"
|
||||
>
|
||||
<swiper-slide v-for="meeting in filteredMeetings" :key="meeting.id" class="swiper-meeting-item">
|
||||
<swiper-slide v-for="meeting in filteredMeetings" :key="meeting.id" class="swiper-meeting-item">
|
||||
<img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="120" height="120" />
|
||||
<div class="meeting-details" style="margin-right: 10px;">
|
||||
<h3 class="meet-title">{{ meeting.title }}</h3>
|
||||
|
|
@ -178,6 +179,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
|
|
@ -189,60 +191,85 @@ const API_BASE_URL = 'http://my.xroomapp.com:8000';
|
|||
|
||||
export default {
|
||||
name: 'Meetings',
|
||||
components: {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
CreateMeetingModal
|
||||
},
|
||||
CreateMeetingModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
activeFilter: 'future',
|
||||
showModal: false,
|
||||
modules: [Pagination],
|
||||
meetings: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Interview room',
|
||||
date: '2025-05-25T10:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
type: 'فضا تیم',
|
||||
maxCapacity: 33,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'جلسه بررسی پیشرفت',
|
||||
date: '2025-05-18T14:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
type: 'مدیریتی',
|
||||
maxCapacity: 8,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'جلسه تیم فنی',
|
||||
date: '2025-06-01T09:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
type: 'فنی',
|
||||
maxCapacity: 12,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'جلسه تیم طرای',
|
||||
date: '2025-06-01T09:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
type: 'طراحی',
|
||||
maxCapacity: 24,
|
||||
},
|
||||
],
|
||||
meetings: [],
|
||||
filteredMeetings: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.filterMeetings();
|
||||
this.fetchMeetings();
|
||||
},
|
||||
methods: {
|
||||
refreshSwiper() {
|
||||
if (this.$refs.swiper && this.$refs.swiper.swiper) {
|
||||
this.$refs.swiper.swiper.update();
|
||||
}
|
||||
},
|
||||
async fetchMeetings() {
|
||||
try {
|
||||
let token = localStorage.getItem('token');
|
||||
if (!token) throw new Error('توکن احراز هویت پیدا نشد');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Token ${token.trim()}`,
|
||||
},
|
||||
};
|
||||
|
||||
const response = await axios.get(`${API_BASE_URL}/get_user_meetings`, config).catch(async (error) => {
|
||||
if (error.response?.status === 403) {
|
||||
token = await this.refreshToken();
|
||||
return axios.get(`${API_BASE_URL}/get_user_meetings`, {
|
||||
headers: { ...config.headers, Authorization: `Token ${token.trim()}` },
|
||||
});
|
||||
}
|
||||
throw error;
|
||||
});
|
||||
|
||||
this.meetings = response.data.meetings.map((meeting) => {
|
||||
const isSpaceUsed = meeting.use_space;
|
||||
const imagePath = isSpaceUsed
|
||||
? meeting.space_data?.assetBundleRoomId?.img
|
||||
: meeting.asset_bundle_data?.img;
|
||||
|
||||
return {
|
||||
id: meeting.id,
|
||||
title: meeting.name,
|
||||
date: meeting.date_time,
|
||||
image: imagePath
|
||||
? imagePath.startsWith('http')
|
||||
? imagePath
|
||||
: `${API_BASE_URL}${imagePath}`
|
||||
: 'https://via.placeholder.com/150',
|
||||
type: isSpaceUsed
|
||||
? meeting.space_data?.name || 'جلسه'
|
||||
: meeting.asset_bundle_data?.name || 'جلسه',
|
||||
maxCapacity: isSpaceUsed
|
||||
? meeting.space_data?.capacity || 10
|
||||
: meeting.asset_bundle_data?.maxPerson || 10,
|
||||
};
|
||||
});
|
||||
|
||||
this.filterMeetings();
|
||||
this.refreshSwiper();
|
||||
} catch (error) {
|
||||
alert(`خطایی در دریافت جلسات رخ داد: ${error.response?.data?.message || error.message}`);
|
||||
}
|
||||
},
|
||||
filterMeetings() {
|
||||
let filtered = this.meetings;
|
||||
|
||||
if (this.searchQuery) {
|
||||
filtered = filtered.filter((meeting) =>
|
||||
[meeting.title, meeting.type].some((field) =>
|
||||
|
|
@ -250,9 +277,11 @@ export default {
|
|||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.activeFilter === 'future') {
|
||||
filtered = filtered.filter((meeting) => new Date(meeting.date) > new Date());
|
||||
}
|
||||
|
||||
this.filteredMeetings = filtered;
|
||||
},
|
||||
setFilter(filter) {
|
||||
|
|
@ -285,7 +314,7 @@ export default {
|
|||
},
|
||||
};
|
||||
|
||||
let response = await axios.post(`${API_BASE_URL}/add_meeting`, meetingData, config).catch(async (error) => {
|
||||
await axios.post(`${API_BASE_URL}/add_meeting`, meetingData, config).catch(async (error) => {
|
||||
if (error.response?.status === 403) {
|
||||
token = await this.refreshToken();
|
||||
return axios.post(`${API_BASE_URL}/add_meeting`, meetingData, {
|
||||
|
|
@ -295,17 +324,8 @@ export default {
|
|||
throw error;
|
||||
});
|
||||
|
||||
const newMeeting = {
|
||||
id: response.data.meeting.id,
|
||||
title: response.data.meeting.name,
|
||||
date: response.data.meeting.date_time,
|
||||
image: 'https://via.placeholder.com/150',
|
||||
type: 'جلسه',
|
||||
maxCapacity: 10,
|
||||
};
|
||||
|
||||
this.meetings.push(newMeeting);
|
||||
this.filterMeetings();
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
await this.fetchMeetings();
|
||||
this.showModal = false;
|
||||
alert('جلسه با موفقیت ایجاد شد!');
|
||||
} catch (error) {
|
||||
|
|
@ -354,18 +374,28 @@ export default {
|
|||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.search-wrapper {
|
||||
margin-top: 1rem;
|
||||
padding: 1px;
|
||||
padding-left: 0.7px;
|
||||
padding-top: 1.4px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(to right, #001940, #4364f7);
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 99.9%;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
|
|
@ -374,7 +404,13 @@ export default {
|
|||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: relative;
|
||||
z-index: 1; /* Ensures the button stays above the pseudo-element */
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
|
|
@ -490,6 +526,7 @@ export default {
|
|||
|
||||
.meeting-image {
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.swiper-meetings-list {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user