full screen content // add get_user_meeting

This commit is contained in:
Diyar Akhgar 2025-06-09 18:41:03 +03:30
parent cf8997c238
commit ad3a84b0d8
5 changed files with 174 additions and 84 deletions

View File

@ -20,6 +20,7 @@
</div> </div>
</template> </template>
<script> <script>
import AppHeader from '@/components/Header.vue'; import AppHeader from '@/components/Header.vue';
import SidebarMenu from '@/components/SidebarMenu.vue'; import SidebarMenu from '@/components/SidebarMenu.vue';
@ -46,10 +47,20 @@ export default {
toggleSidebar() { toggleSidebar() {
this.isSidebarOpen = !this.isSidebarOpen; 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> </script>
<style scoped> <style scoped>
/* Reset default margins and set base font */ /* Reset default margins and set base font */
body { body {
@ -57,12 +68,15 @@ body {
padding: 0; padding: 0;
font-family: 'Yekan', 'Arial', sans-serif; font-family: 'Yekan', 'Arial', sans-serif;
background-color: #f4f7fa; background-color: #f4f7fa;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
} }
/* App title styling */ /* App title styling */
.app-title { .app-title {
color: #fff; color: #fff;
font-size: 2rem; /* 32px, using rem for scalability */ font-size: 2rem;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
} }
@ -72,12 +86,14 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
overflow-y: auto;
} }
/* Router view content */ /* Router view content */
router-view { router-view {
flex-grow: 1; flex-grow: 1;
padding: 1.25rem; /* 20px, using rem for consistency */ padding: 1.25rem;
} }
</style> </style>
@ -90,7 +106,7 @@ router-view {
src: url('@/assets/fonts/IRANSansXFaNum-Medium.ttf') format('truetype'); src: url('@/assets/fonts/IRANSansXFaNum-Medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; /* Improves font loading performance */ font-display: swap;
} }
/* Global Font Application */ /* Global Font Application */
@ -106,6 +122,14 @@ router-view {
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
padding: 35px 80px; padding: 35px 80px;
height: 100vh;
overflow-y: scroll;
box-sizing: border-box;
}
.content::-webkit-scrollbar {
width: 0;
display: none;
} }
/* Responsive Styles */ /* Responsive Styles */

View File

@ -416,6 +416,8 @@ export default {
endHour: 18, endHour: 18,
endMinute: 0, endMinute: 0,
selectedRoom: null, selectedRoom: null,
space: null,
asset_bundle: null,
use_space: false, use_space: false,
}, },
participants: [], participants: [],
@ -431,8 +433,9 @@ export default {
return JSON.parse(localStorage.getItem('customer') || '{}'); return JSON.parse(localStorage.getItem('customer') || '{}');
}, },
fullName() { fullName() {
const user = JSON.parse(localStorage.getItem('user') || '{}'); return this.customer.first_name && this.customer.last_name
return user.first_name && user.last_name ? `${user.first_name} ${user.last_name}` : 'کاربر مهمان'; ? `${this.customer.first_name} ${this.customer.last_name}`
: 'کاربر مهمان';
}, },
userPhone() { userPhone() {
return this.customer.mobile_number || 'شماره تلفن موجود نیست'; return this.customer.mobile_number || 'شماره تلفن موجود نیست';
@ -514,6 +517,8 @@ export default {
}, },
handleRoomSelection(room) { handleRoomSelection(room) {
this.form.selectedRoom = 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.form.use_space = room.use_space;
this.isRoomSelectionOpen = false; this.isRoomSelectionOpen = false;
}, },
@ -573,6 +578,8 @@ export default {
endHour: 18, endHour: 18,
endMinute: 0, endMinute: 0,
selectedRoom: null, selectedRoom: null,
space: null,
asset_bundle: null,
use_space: false, use_space: false,
}; };
this.participants = []; this.participants = [];
@ -593,7 +600,7 @@ export default {
this.error = 'لطفاً نام جلسه و تاریخ را وارد کنید.'; this.error = 'لطفاً نام جلسه و تاریخ را وارد کنید.';
return; return;
} }
if (!this.form.selectedRoom) { if (!this.form.selectedRoom || this.form.space === null || this.form.asset_bundle === null) {
this.error = 'لطفاً یک اتاق برای جلسه انتخاب کنید.'; this.error = 'لطفاً یک اتاق برای جلسه انتخاب کنید.';
return; return;
} }
@ -612,16 +619,18 @@ export default {
.clone() .clone()
.set({ hour: this.form.startHour, minute: this.form.startMinute, second: 0 }) .set({ hour: this.form.startHour, minute: this.form.startMinute, second: 0 })
.toISOString(); .toISOString();
try {
const meetingData = { const meetingData = {
name: this.form.title, name: this.form.title,
description: this.form.description, description: this.form.description,
date_time: startDateTime, date_time: startDateTime,
space: this.form.selectedRoom.id, space: this.form.space,
asset_bundle: 1, asset_bundle: this.form.asset_bundle,
use_space: this.form.use_space, use_space: this.form.use_space,
user_ids: [this.userId, ...this.participants.map((p) => p.id)], user_ids: [this.userId, ...this.participants.map((p) => p.id)],
}; };
try {
this.$emit('create-meeting', meetingData); this.$emit('create-meeting', meetingData);
this.closeModalByButton(); this.closeModalByButton();
} catch (error) { } catch (error) {

View File

@ -1,3 +1,4 @@
<!-- RoomSelectionModal.vue -->
<template> <template>
<div v-if="isOpen" class="modal-overlay" @click="cancel"> <div v-if="isOpen" class="modal-overlay" @click="cancel">
<div class="modal-content" @click.stop> <div class="modal-content" @click.stop>
@ -343,7 +344,7 @@ export default {
async fetchSpaces() { async fetchSpaces() {
try { try {
const token = localStorage.getItem('token'); 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`, { const response = await axios.get(`${API_BASE_URL}/get_space`, {
headers: { Authorization: `Token ${token.trim()}` }, headers: { Authorization: `Token ${token.trim()}` },
@ -351,6 +352,7 @@ export default {
this.rooms = response.data.spaces.map((space) => ({ this.rooms = response.data.spaces.map((space) => ({
id: space.id, id: space.id,
assetBundleRoomId: space.assetBundleRoomId?.id,
image: space.assetBundleRoomId?.img image: space.assetBundleRoomId?.img
? `${API_BASE_URL}${space.assetBundleRoomId.img}` ? `${API_BASE_URL}${space.assetBundleRoomId.img}`
: DEFAULT_IMAGE, : DEFAULT_IMAGE,
@ -361,7 +363,6 @@ export default {
})); }));
} catch (error) { } catch (error) {
if (error.response?.status === 403) { if (error.response?.status === 403) {
alert('لطفاً دوباره وارد شوید');
window.location.href = '/login'; window.location.href = '/login';
} }
this.error = 'خطا در بارگذاری لیست اتاق‌ها'; this.error = 'خطا در بارگذاری لیست اتاق‌ها';
@ -370,7 +371,7 @@ export default {
async fetchTemporaryRooms() { async fetchTemporaryRooms() {
try { try {
const token = localStorage.getItem('token'); 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`, { const response = await axios.get(`${API_BASE_URL}/get_assigned_assetbundle_rooms`, {
headers: { Authorization: `Token ${token.trim()}` }, headers: { Authorization: `Token ${token.trim()}` },
@ -386,7 +387,6 @@ export default {
})); }));
} catch (error) { } catch (error) {
if (error.response?.status === 403) { if (error.response?.status === 403) {
alert('لطفاً دوباره وارد شوید');
window.location.href = '/login'; window.location.href = '/login';
} }
this.error = 'خطا در بارگذاری لیست اتاق‌های موقت'; this.error = 'خطا در بارگذاری لیست اتاق‌های موقت';
@ -401,24 +401,42 @@ export default {
}, },
submitRoom() { submitRoom() {
if (!this.selectedRoom) { if (!this.selectedRoom) {
alert('لطفاً یک اتاق انتخاب کنید.');
return; return;
} }
const selectedRoomDetails = [...this.rooms, ...this.temporaryRooms].find( const selectedRoomDetails = [...this.rooms, ...this.temporaryRooms].find(
(room) => room.id === this.selectedRoom (room) => room.id === this.selectedRoom
); );
this.$emit('submit-room', { if (!selectedRoomDetails) {
return;
}
let roomData;
if (selectedRoomDetails.isTemporary) {
roomData = {
...selectedRoomDetails, ...selectedRoomDetails,
id: selectedRoomDetails.isTemporary ? 12 : selectedRoomDetails.id, space: 18,
use_space: !selectedRoomDetails.isTemporary, 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; this.selectedRoom = null;
}, },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;

View File

@ -109,6 +109,8 @@ export default {
gap: 1rem; gap: 1rem;
} }
.platform-card { .platform-card {
position: relative; position: relative;
width: 100%; width: 100%;

View File

@ -107,6 +107,7 @@
</div> </div>
</div> </div>
<swiper <swiper
ref="swiper"
:slides-per-view="1.4" :slides-per-view="1.4"
:space-between="10" :space-between="10"
:loop="true" :loop="true"
@ -178,6 +179,7 @@
</div> </div>
</template> </template>
<script> <script>
import CreateMeetingModal from '@/components/CreateMeetingModal.vue'; import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
@ -192,7 +194,7 @@ export default {
components: { components: {
Swiper, Swiper,
SwiperSlide, SwiperSlide,
CreateMeetingModal CreateMeetingModal,
}, },
data() { data() {
return { return {
@ -200,49 +202,74 @@ export default {
activeFilter: 'future', activeFilter: 'future',
showModal: false, showModal: false,
modules: [Pagination], modules: [Pagination],
meetings: [ 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,
},
],
filteredMeetings: [], filteredMeetings: [],
}; };
}, },
created() { created() {
this.filterMeetings(); this.fetchMeetings();
}, },
methods: { 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() { filterMeetings() {
let filtered = this.meetings; let filtered = this.meetings;
if (this.searchQuery) { if (this.searchQuery) {
filtered = filtered.filter((meeting) => filtered = filtered.filter((meeting) =>
[meeting.title, meeting.type].some((field) => [meeting.title, meeting.type].some((field) =>
@ -250,9 +277,11 @@ export default {
) )
); );
} }
if (this.activeFilter === 'future') { if (this.activeFilter === 'future') {
filtered = filtered.filter((meeting) => new Date(meeting.date) > new Date()); filtered = filtered.filter((meeting) => new Date(meeting.date) > new Date());
} }
this.filteredMeetings = filtered; this.filteredMeetings = filtered;
}, },
setFilter(filter) { 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) { if (error.response?.status === 403) {
token = await this.refreshToken(); token = await this.refreshToken();
return axios.post(`${API_BASE_URL}/add_meeting`, meetingData, { return axios.post(`${API_BASE_URL}/add_meeting`, meetingData, {
@ -295,17 +324,8 @@ export default {
throw error; throw error;
}); });
const newMeeting = { await new Promise((resolve) => setTimeout(resolve, 500));
id: response.data.meeting.id, await this.fetchMeetings();
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();
this.showModal = false; this.showModal = false;
alert('جلسه با موفقیت ایجاد شد!'); alert('جلسه با موفقیت ایجاد شد!');
} catch (error) { } catch (error) {
@ -354,18 +374,28 @@ export default {
background-color: #ffffff; background-color: #ffffff;
} }
.search-wrapper { .search-wrapper {
margin-top: 1rem; margin-top: 1rem;
padding: 1px; position: relative;
padding-left: 0.7px; display: inline-block;
padding-top: 1.4px; width: 100%;
}
.search-wrapper::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: 10px; border-radius: 10px;
background: linear-gradient(to right, #001940, #4364f7); background: linear-gradient(to right, #001940, #4364f7);
position: relative; z-index: 0;
} }
.search-input { .search-input {
width: 99.9%; width: 100%;
height: 43px; height: 43px;
padding: 10px; padding: 10px;
border: none; border: none;
@ -374,7 +404,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
background-color: white; background-color: white;
display: block; 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 { .search-input::placeholder {
@ -490,6 +526,7 @@ export default {
.meeting-image { .meeting-image {
border-radius: 10px; border-radius: 10px;
object-fit: cover;
} }
.swiper-meetings-list { .swiper-meetings-list {