mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-03 16:54:35 +00:00
Compare commits
No commits in common. "7e0d9c972f2341f68b386d09a111d2684707f65f" and "b5415a4d1cc557b3888a0a02fcccd52ddeef236c" have entirely different histories.
7e0d9c972f
...
b5415a4d1c
20
xroom-dashboard/package-lock.json
generated
20
xroom-dashboard/package-lock.json
generated
|
|
@ -14,7 +14,6 @@
|
|||
"axios": "^1.8.4",
|
||||
"core-js": "^3.8.3",
|
||||
"moment-jalaali": "^0.10.4",
|
||||
"swiper": "^11.2.8",
|
||||
"video.js": "^7.21.7",
|
||||
"vue": "^3.2.13",
|
||||
"vue-pdf-embed": "^2.1.2",
|
||||
|
|
@ -14212,25 +14211,6 @@
|
|||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.2.8",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
|
||||
"integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/table": {
|
||||
"version": "6.9.0",
|
||||
"resolved": "https://registry.npmmirror.com/table/-/table-6.9.0.tgz",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
"axios": "^1.8.4",
|
||||
"core-js": "^3.8.3",
|
||||
"moment-jalaali": "^0.10.4",
|
||||
"swiper": "^11.2.8",
|
||||
"video.js": "^7.21.7",
|
||||
"vue": "^3.2.13",
|
||||
"vue-pdf-embed": "^2.1.2",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
|
|
@ -1,281 +0,0 @@
|
|||
<template>
|
||||
<div v-if="isVisible" class="modal-overlay" @click="$emit('close')">
|
||||
<div class="modal-content" @click.stop>
|
||||
<div class="popUp-header">
|
||||
<h2>ایجاد جلسه جدید</h2>
|
||||
<button @click="$emit('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">
|
||||
<div class="form-group">
|
||||
<label for="spaceName">نام:</label>
|
||||
<input
|
||||
id="spaceName"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="نام فضا را وارد کنید"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="spaceCapacity">ظرفیت:</label>
|
||||
<input
|
||||
id="spaceCapacity"
|
||||
v-model.number="form.capacity"
|
||||
type="number"
|
||||
required
|
||||
placeholder="ظرفیت (تعداد کاربر)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="spaceType">امکانات فضای مد نظر:</label>
|
||||
<textarea
|
||||
id="spaceType"
|
||||
v-model="form.features"
|
||||
required
|
||||
placeholder="امکانات فضا را وارد کنید"
|
||||
></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-btn" @click="$emit('close')">بازگشت</button>
|
||||
<button type="submit" class="submit-btn" @click="handleSubmit">تایید</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CreateSpaceModal',
|
||||
props: {
|
||||
isVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
capacity: null,
|
||||
features: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
if (this.form.name && this.form.capacity && this.form.features) {
|
||||
console.log('دادههای فرم:', {
|
||||
name: this.form.name,
|
||||
capacity: this.form.capacity,
|
||||
features: this.form.features,
|
||||
});
|
||||
this.form = {
|
||||
name: '',
|
||||
capacity: null,
|
||||
features: '',
|
||||
};
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #F7F5FA;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
direction: rtl;
|
||||
border-radius: 20px;
|
||||
padding-bottom: 1.5rem;
|
||||
height: max-content;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
|
||||
.modal-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.popUp-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #101010;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 20px 26px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
}
|
||||
|
||||
.popUp-header h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.popUp-header button {
|
||||
background-color: #101010;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popUp-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
padding: 20px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.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-top: 1rem !important;
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #718096;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
max-width: 25rem
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #718096;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
max-width: 25rem;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.submit-btn,
|
||||
.cancel-btn {
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
width: 47%;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #3A57E8;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #EBEEFD;
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -352,7 +352,7 @@ export default {
|
|||
rooms: [
|
||||
{
|
||||
id: 1,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 1',
|
||||
capacity: 33,
|
||||
type: 'فضا تیم',
|
||||
|
|
@ -360,7 +360,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 2,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 2',
|
||||
capacity: 24,
|
||||
type: 'آموزشی',
|
||||
|
|
@ -368,7 +368,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 3,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 3',
|
||||
capacity: 60,
|
||||
type: 'جلسه تیمی',
|
||||
|
|
@ -376,7 +376,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 4,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 4',
|
||||
capacity: 33,
|
||||
type: 'فضا تیم',
|
||||
|
|
@ -384,7 +384,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 5,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 5',
|
||||
capacity: 24,
|
||||
type: 'آموزشی',
|
||||
|
|
@ -392,7 +392,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 6,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 6',
|
||||
capacity: 60,
|
||||
type: 'جلسه تیمی',
|
||||
|
|
@ -400,7 +400,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 7,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 7',
|
||||
capacity: 33,
|
||||
type: 'فضا تیم',
|
||||
|
|
@ -408,7 +408,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 8,
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
name: 'Interview room 8',
|
||||
capacity: 24,
|
||||
type: 'آموزشی',
|
||||
|
|
@ -463,7 +463,7 @@ export default {
|
|||
createTemporaryRoom() {
|
||||
const newRoom = {
|
||||
id: this.rooms.length + this.Temporaryrooms.length + 1,
|
||||
image: this.newTempRoom.image || require('@/assets/img/img.jpg'),
|
||||
image: this.newTempRoom.image || require('@/assets/img/img.png'),
|
||||
name: this.newTempRoom.name,
|
||||
capacity: this.newTempRoom.capacity,
|
||||
type: this.newTempRoom.type,
|
||||
|
|
@ -720,9 +720,4 @@ export default {
|
|||
display: block;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.room-image {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="text-wrapper">داشبورد</div>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/dashboard/spaces" class="nav-button" :class="{ active: isActive('/dashboard/spaces') }">
|
||||
<router-link to="/spaces" class="nav-button" :class="{ active: isActive('/spaces') }">
|
||||
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-4.svg" />
|
||||
<div class="text-wrapper">فضاها</div>
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ export default {
|
|||
id: 1,
|
||||
title: 'Interview room',
|
||||
date: '2025-05-25T10:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
type: 'فضا تیم',
|
||||
maxCapacity: 33,
|
||||
},
|
||||
|
|
@ -166,7 +166,7 @@ export default {
|
|||
id: 2,
|
||||
title: 'جلسه بررسی پیشرفت',
|
||||
date: '2025-05-18T14:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
type: 'مدیریتی',
|
||||
maxCapacity: 8,
|
||||
},
|
||||
|
|
@ -174,7 +174,7 @@ export default {
|
|||
id: 3,
|
||||
title: 'جلسه تیم فنی',
|
||||
date: '2025-06-01T09:00:00',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
image: require('@/assets/img/img.png'),
|
||||
type: 'فنی',
|
||||
maxCapacity: 12,
|
||||
},
|
||||
|
|
@ -330,9 +330,11 @@ export default {
|
|||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
height: 38px;
|
||||
width: 51px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
padding: 7px 12px;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
|
@ -342,6 +344,8 @@ export default {
|
|||
background-color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
height: 38px;
|
||||
width: 51px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
padding: 7px 10px;
|
||||
|
|
@ -372,6 +376,8 @@ export default {
|
|||
}
|
||||
|
||||
.create-meet {
|
||||
width: 191px;
|
||||
height: 46px;
|
||||
padding: 12px 24px 12px 24px;
|
||||
background-color: #3A57E8;
|
||||
border-radius: 8px;
|
||||
|
|
@ -380,8 +386,6 @@ export default {
|
|||
color: #FFFFFF;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: max-content;
|
||||
|
||||
}
|
||||
|
||||
.meetings-list {
|
||||
|
|
@ -424,10 +428,6 @@ export default {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.meeting-image {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,458 +0,0 @@
|
|||
<template>
|
||||
<SidebarMenu />
|
||||
|
||||
<div class="dashboard-page">
|
||||
<div class="content">
|
||||
<!-- Top Header -->
|
||||
<AppHeader pageTitle="فضاها" />
|
||||
|
||||
<!-- Description -->
|
||||
<div class="section-description">
|
||||
<div class="section-title">مدیریت فضای مجازی</div>
|
||||
<p class="title-description">
|
||||
با همکاران خود در یک فضای مجازی ملاقات کنید. در این صفحه میتوانید فضای اطراف خود را مشاهده و مدیریت کنید.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Page Objects -->
|
||||
<div>
|
||||
<!-- Sharing Filter -->
|
||||
<div class="filter-section">
|
||||
<div class="sharing-filters">
|
||||
<span style="font-size: 17px; font-weight: 600;">فیلتر اشتراکگذاری</span>
|
||||
<div class="filter-buttons">
|
||||
<button
|
||||
v-for="filter in sharingFilters"
|
||||
:key="filter.value"
|
||||
:class="activeSharingFilter === filter.value ? 'active-filter' : 'disable-filter'"
|
||||
@click="setActiveSharingFilter(filter.value)"
|
||||
>
|
||||
{{ filter.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-type-filter">
|
||||
<span style="font-size: 17px; font-weight: 600;">فیلتر نوع فضا</span>
|
||||
<div class="filter-buttons">
|
||||
<button
|
||||
v-for="filter in spaceTypeFilters"
|
||||
:key="filter.value"
|
||||
:class="activeSpaceTypeFilter === filter.value ? 'active-filter' : 'disable-filter'"
|
||||
@click="setActiveSpaceTypeFilter(filter.value)"
|
||||
>
|
||||
{{ filter.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Space Button -->
|
||||
<button class="add-space" @click="openCreateSpaceModal">
|
||||
+ <span style="margin-right: 0.5rem;">اضافه کردن فضای اختصاصی</span>
|
||||
</button>
|
||||
|
||||
<!-- Create Space Modal -->
|
||||
<CreateSpaceModal
|
||||
:isVisible="isCreateSpaceModalVisible"
|
||||
@close="closeCreateSpaceModal"
|
||||
/>
|
||||
|
||||
<!-- Spaces -->
|
||||
<div v-if="filteredSpaces.length > 0">
|
||||
<swiper
|
||||
:slidesPerView="3.6"
|
||||
:spaceBetween="30"
|
||||
:pagination="{ clickable: false }"
|
||||
:modules="modules"
|
||||
class="mySwiper"
|
||||
>
|
||||
<swiper-slide v-for="(space, index) in filteredSpaces" :key="index" class="card">
|
||||
<img :src="space.image" alt="تصویر فضا" />
|
||||
<div class="card-texts">
|
||||
<h2>{{ space.name }}</h2>
|
||||
<p class="space-capacity">
|
||||
<span style="margin-left: 4px;">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
>
|
||||
<g clip-path="url(#clip0_622_1334)">
|
||||
<path
|
||||
d="M3.33203 5.16667C3.33203 5.87391 3.61298 6.55219 4.11308 7.05228C4.61318 7.55238 5.29145 7.83333 5.9987 7.83333C6.70594 7.83333 7.38422 7.55238 7.88432 7.05228C8.38441 6.55219 8.66536 5.87391 8.66536 5.16667C8.66536 4.45942 8.38441 3.78115 7.88432 3.28105C7.38422 2.78095 6.70594 2.5 5.9987 2.5C5.29145 2.5 4.61318 2.78095 4.11308 3.28105C3.61298 3.78115 3.33203 4.45942 3.33203 5.16667Z"
|
||||
stroke="#718096"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5"
|
||||
stroke="#718096"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.668 2.58667C11.2416 2.73354 11.75 3.06714 12.1131 3.53488C12.4761 4.00262 12.6732 5.17 12.6732 5.17C12.6732 5.76212 12.4761 6.33739 12.1131 6.80513C11.75 7.27287 11.2416 7.60647 10.668 7.75334"
|
||||
stroke="#718096"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 14.5V13.1666C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0786 12.5699 10.7471 12 10.6"
|
||||
stroke="#718096"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_622_1334">
|
||||
<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
حداکثر: {{ space.capacity }} کاربر
|
||||
</p>
|
||||
<p class="space-type">
|
||||
<span style="margin-left: 4px;">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66797 4.5H9.33464"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66797 7.16663H9.33464"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66797 9.83337H9.33464"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66797 12.5H9.33464"
|
||||
stroke="#3A57E8"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
{{ space.type }}
|
||||
</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div v-else class="no-spaces-message">
|
||||
<p>هیچ فضایی با فیلترهای انتخابشده یافت نشد.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarMenu from '@/components/SidebarMenu.vue';
|
||||
import AppHeader from '@/components/Header.vue';
|
||||
import CreateSpaceModal from '@/components/CreateSpaceModal.vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
import { Pagination } from 'swiper/modules';
|
||||
|
||||
export default {
|
||||
name: 'DashboardPage',
|
||||
components: {
|
||||
SidebarMenu,
|
||||
AppHeader,
|
||||
CreateSpaceModal,
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modules: [Pagination],
|
||||
isCreateSpaceModalVisible: false,
|
||||
sharingFilters: [
|
||||
{ label: 'همه', value: 'all' },
|
||||
{ label: 'تیم', value: 'team' },
|
||||
{ label: 'حریم خصوصی', value: 'private' },
|
||||
],
|
||||
spaceTypeFilters: [
|
||||
{ label: 'فضاها', value: 'spaces' },
|
||||
{ label: 'قالبها', value: 'templates' },
|
||||
{ label: 'همه', value: 'all' },
|
||||
],
|
||||
activeSharingFilter: 'all',
|
||||
activeSpaceTypeFilter: 'spaces',
|
||||
spaces: [
|
||||
{
|
||||
name: 'فضای تیمی ۱',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
capacity: 33,
|
||||
type: 'فضا تیم',
|
||||
sharing: 'team',
|
||||
spaceType: 'spaces',
|
||||
},
|
||||
{
|
||||
name: 'فضای تیمی ۲',
|
||||
image: require('@/assets/img/img2.jpg'),
|
||||
capacity: 33,
|
||||
type: 'فضا تیم',
|
||||
sharing: 'team',
|
||||
spaceType: 'spaces',
|
||||
},
|
||||
{
|
||||
name: 'فضای خصوصی ۱',
|
||||
image: require('@/assets/img/img3.jpg'),
|
||||
capacity: 33,
|
||||
type: 'فضا خصوصی',
|
||||
sharing: 'private',
|
||||
spaceType: 'spaces',
|
||||
},
|
||||
{
|
||||
name: 'قالب ۱',
|
||||
image: require('@/assets/img/img4.jpg'),
|
||||
capacity: 33,
|
||||
type: 'قالب',
|
||||
sharing: 'team',
|
||||
spaceType: 'templates',
|
||||
},
|
||||
{
|
||||
name: 'فضای تیمی ۳',
|
||||
image: require('@/assets/img/img.jpg'),
|
||||
capacity: 33,
|
||||
type: 'فضا تیم',
|
||||
sharing: 'team',
|
||||
spaceType: 'spaces',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredSpaces() {
|
||||
return this.spaces.filter((space) => {
|
||||
const matchesSharing =
|
||||
this.activeSharingFilter === 'all' || space.sharing === this.activeSharingFilter;
|
||||
const matchesSpaceType =
|
||||
this.activeSpaceTypeFilter === 'all' || space.spaceType === this.activeSpaceTypeFilter;
|
||||
return matchesSharing && matchesSpaceType;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setActiveSharingFilter(value) {
|
||||
this.activeSharingFilter = value;
|
||||
},
|
||||
setActiveSpaceTypeFilter(value) {
|
||||
this.activeSpaceTypeFilter = value;
|
||||
},
|
||||
openCreateSpaceModal() {
|
||||
this.isCreateSpaceModalVisible = true;
|
||||
},
|
||||
closeCreateSpaceModal() {
|
||||
this.isCreateSpaceModalVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title-description {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 1.5rem;
|
||||
color: #4F5A69;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 24px 16px;
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.sharing-filters {
|
||||
max-width: 79%;
|
||||
width: 100%;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.space-type-filter {
|
||||
max-width: 21%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.active-filter {
|
||||
background-color: #3A57E8;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.disable-filter {
|
||||
color: #3A57E8;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.add-space {
|
||||
display: block;
|
||||
padding: 12px 24px 12px 24px;
|
||||
background-color: #3A57E8;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: max-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mySwiper {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 250px !important;
|
||||
width: 100% !important;
|
||||
height: 335px;
|
||||
border: 1px solid #B8C0CB;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card img {
|
||||
max-width: 235px;
|
||||
width: 100%;
|
||||
max-height: 205px;
|
||||
height: 100%;
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.card-texts {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding-right: 1rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.space-name {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #444D5A;
|
||||
}
|
||||
|
||||
.space-capacity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
.space-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #3A57E8;
|
||||
}
|
||||
|
||||
.no-spaces-message {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #101010;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 12rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -7,7 +7,6 @@ import DashboardPage from '../pages/dashboard/index.vue'
|
|||
import FilesPage from '@/pages/dashboard/files.vue';
|
||||
import TeamsPage from '@/pages/dashboard/team.vue';
|
||||
import DownloadPage from '@/pages/dashboard/Download.vue';
|
||||
import spacesPage from '@/pages/dashboard/Spaces.vue';
|
||||
import MeetingPage from '@/pages/dashboard/Meeting.vue';
|
||||
import axios from '@/axios';
|
||||
|
||||
|
|
@ -50,12 +49,6 @@ const routes = [
|
|||
component: DownloadPage,
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/dashboard/spaces',
|
||||
name: 'spaces',
|
||||
component: spacesPage,
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/dashboard/meetings',
|
||||
name: 'meetings',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user