modified: main_dc/yalarba/easySite/easySite/app/pages/objects/my-objects.vue

fix bag with scroll table, delete table set boxes, verical scroll

main_dc/yalarba/easySite/easySite/app/pages/objects/my-objects.vue

@@ -60,79 +60,69 @@
           </div>
         </div>
 
-        <!-- Таблица объектов -->
+        <!-- Сетка карточек -->
-        <div class="objects-table card">
+        <div class="objects-grid">
-          <div class="card-header">
+          <!-- Карточка добавления нового объекта -->
-            <h2 class="card-title">Список объектов</h2>
+          <div class="add-card" @click="navigateToCreate">
-            <p class="card-subtitle">Всего: {{ myObjects.length }} объектов</p>
+            <div class="add-card-content">
+              <div class="add-icon">➕</div>
+              <h3 class="add-title">Добавить объект</h3>
+              <p class="add-description">Создайте новое место для размещения</p>
+            </div>
           </div>
 
-          <div class="table-container">
+          <!-- Карточки объектов -->
-            <table class="objects-table">
+          <div v-for="object in myObjects" :key="object.id" class="object-card">
-              <thead>
+            <div class="card-image">
-                <tr>
+              <img :src="object.image || '/images/placeholder.jpg'" :alt="object.title" />
-                  <th class="table-header">Название</th>
+              <div class="card-badge" :class="object.isActive ? 'badge-success' : 'badge-secondary'">
-                  <th class="table-header">Тип</th>
+                {{ object.isActive ? 'Активен' : 'Неактивен' }}
-                  <th class="table-header">Город</th>
+              </div>
-                  <th class="table-header">Цена</th>
+            </div>
-                  <th class="table-header">Статус</th>
-                  <th class="table-header">Действия</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="object in myObjects" :key="object.id" class="table-row">
-                  <td class="table-cell">
-                    <div class="object-info">
-                      <div class="object-title">{{ object.title }}</div>
-                      <div class="object-date">{{ formatDate(object.createdAt) }}</div>
-                    </div>
-                  </td>
-                  <td class="table-cell">
-                    <span class="badge badge-primary">
-                      {{ getTypeLabel(object.type) }}
-                    </span>
-                  </td>
-                  <td class="table-cell">{{ object.city }}</td>
-                  <td class="table-cell">
-                    <div class="object-price">{{ formatPrice(object.price) }}</div>
-                  </td>
-                  <td class="table-cell">
-                    <span class="status-badge" :class="object.isActive ? 'status-active' : 'status-inactive'">
-                      {{ object.isActive ? 'Активен' : 'Неактивен' }}
-                    </span>
-                  </td>
-                  <td class="table-cell">
-                    <div class="action-buttons">
-                      <NuxtLink :to="`/objects/${object.id}`" class="btn btn-outline btn-sm btn-with-icon"
-                        title="Просмотр">
-                        👁️
-                      </NuxtLink>
-                      <NuxtLink :to="`/objects/${object.id}/edit`" class="btn btn-outline btn-sm btn-with-icon"
-                        title="Редактировать">
-                        ✏️
-                      </NuxtLink>
-                      <button @click="deleteObject(object.id)" class="btn btn-outline btn-sm btn-with-icon delete-btn"
-                        title="Удалить">
-                        🗑️
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
 
-          <!-- Пустой state -->
+            <div class="card-content">
-          <div v-if="!loading && myObjects.length === 0" class="empty-state">
+              <h3 class="card-title">{{ object.title }}</h3>
-            <div class="empty-icon">🏢</div>
+              <div class="card-meta">
-            <h3 class="empty-title">У вас пока нет объектов</h3>
+                <span class="card-type">{{ getTypeLabel(object.type) }}</span>
-            <p class="empty-description">Добавьте первый объект, чтобы начать работу</p>
+                <span class="card-location">📍 {{ object.city }}</span>
-            <NuxtLink to="/objects/create" class="btn btn-primary">
+              </div>
-              Добавить первый объект
+              <p class="card-description">{{ truncateDescription(object.description) }}</p>
-            </NuxtLink>
+              <div class="card-price">{{ formatPrice(object.price) }}</div>
+              <div class="card-date">Добавлен: {{ formatDate(object.createdAt) }}</div>
+            </div>
+
+            <div class="card-actions">
+              <!-- Кнопка просмотра объекта -->
+              <NuxtLink :to="`/objects/${object.id}`" class="btn btn-outline btn-sm btn-with-icon view-btn"
+                title="Просмотреть объект">
+                <span>👁️</span>
+                Просмотр
+              </NuxtLink>
+
+              <div class="action-buttons">
+                <NuxtLink :to="`/objects/${object.id}/edit`" class="btn btn-outline btn-sm btn-with-icon"
+                  title="Редактировать">
+                  <span>✏️</span>
+                </NuxtLink>
+                <button @click="deleteObject(object.id)" class="btn btn-outline btn-sm btn-with-icon delete-btn"
+                  title="Удалить">
+                  <span>🗑️</span>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
 
+        <!-- Пустой state -->
+        <div v-if="!loading && myObjects.length === 0" class="empty-state">
+          <div class="empty-icon">🏢</div>
+          <h3 class="empty-title">У вас пока нет объектов</h3>
+          <p class="empty-description">Добавьте первый объект, чтобы начать работу</p>
+          <NuxtLink to="/objects/create" class="btn btn-primary">
+            Добавить первый объект
+          </NuxtLink>
+        </div>
+
         <!-- Навигация -->
         <div class="page-navigation">
           <NuxtLink to="/objects" class="btn btn-outline btn-with-icon">
@@ -150,9 +140,6 @@
 </template>
 
 <script setup lang="ts">
-import Header from '~/components/layout/Header.vue'
-import Footer from '~/components/layout/Footer.vue'
-
 interface MyObjectItem {
   id: number
   title: string
@@ -161,9 +148,11 @@ interface MyObjectItem {
   price: number
   isActive: boolean
   createdAt: string
+  image?: string
+  description: string
 }
 
-// Мок-данные
+// Мок-данные с изображениями и описаниями
 const mockMyObjects: MyObjectItem[] = [
   {
     id: 1,
@@ -172,7 +161,9 @@ const mockMyObjects: MyObjectItem[] = [
     city: 'Карелия',
     price: 2800,
     isActive: true,
-    createdAt: '2024-01-15'
+    createdAt: '2024-01-15',
+    image: '/images/objects/lake-house-1.jpg',
+    description: 'Уютный гостевой дом на берегу живописного озера в Карелии. Идеальное место для отдыха от городской суеты.'
   },
   {
     id: 2,
@@ -181,7 +172,9 @@ const mockMyObjects: MyObjectItem[] = [
     city: 'Санкт-Петербург',
     price: 1500,
     isActive: true,
-    createdAt: '2024-01-10'
+    createdAt: '2024-01-10',
+    image: '/images/objects/city-tour.jpg',
+    description: 'Увлекательная пешеходная экскурсия по самым знаковым местам Северной столицы с опытным гидом.'
   },
   {
     id: 3,
@@ -190,7 +183,31 @@ const mockMyObjects: MyObjectItem[] = [
     city: 'Красная Поляна',
     price: 5200,
     isActive: false,
-    createdAt: '2024-01-05'
+    createdAt: '2024-01-05',
+    image: '/images/objects/ski-resort.jpg',
+    description: 'Современный горнолыжный комплекс с комфортабельными номерами и прямым доступом к склонам.'
+  },
+  {
+    id: 4,
+    title: 'Санаторий "Здоровье"',
+    type: 'sanatorium',
+    city: 'Кисловодск',
+    price: 3200,
+    isActive: true,
+    createdAt: '2024-01-03',
+    image: '/images/objects/sanatorium.jpg',
+    description: 'Лечебно-оздоровительный комплекс с минеральными водами и современным медицинским оборудованием.'
+  },
+  {
+    id: 5,
+    title: 'Тур по Золотому кольцу',
+    type: 'tour',
+    city: 'Москва',
+    price: 12500,
+    isActive: true,
+    createdAt: '2024-01-01',
+    image: '/images/objects/golden-ring.jpg',
+    description: '7-дневный автобусный тур по древним городам России с проживанием в комфортабельных отелях.'
   }
 ]
 
@@ -203,6 +220,12 @@ const filters = ref({
   search: ''
 })
 
+// Навигация
+const navigateToCreate = () => {
+  navigateTo('/objects/create')
+}
+
+// Методы
 const applyFilters = () => {
   let filtered = [...mockMyObjects]
 
@@ -220,7 +243,8 @@ const applyFilters = () => {
     const search = filters.value.search.toLowerCase()
     filtered = filtered.filter(obj =>
       obj.title.toLowerCase().includes(search) ||
-      obj.city.toLowerCase().includes(search)
+      obj.city.toLowerCase().includes(search) ||
+      obj.description.toLowerCase().includes(search)
     )
   }
 
@@ -244,15 +268,20 @@ const deleteObject = async (id: number) => {
 
 const getTypeLabel = (type: string) => {
   const types: Record<string, string> = {
-    hotel: 'Гостиница',
+    hotel: '🏨 Гостиница',
-    sanatorium: 'Санаторий',
+    sanatorium: '🏥 Санаторий',
-    guest_house: 'Гостевой дом',
+    guest_house: '🏡 Гостевой дом',
-    tour: 'Тур',
+    tour: '🧳 Тур',
-    excursion: 'Экскурсия'
+    excursion: '🚶 Экскурсия'
   }
   return types[type] || type
 }
 
+const truncateDescription = (description: string, maxLength: number = 100) => {
+  if (description.length <= maxLength) return description
+  return description.substring(0, maxLength) + '...'
+}
+
 const formatPrice = (price: number) => {
   return new Intl.NumberFormat('ru-RU', {
     style: 'currency',
@@ -325,87 +354,107 @@ const formatDate = (dateString: string) => {
   flex-wrap: wrap;
 }
 
-.objects-table {
+/* Сетка карточек */
-  width: 100%;
+.objects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: var(--space-lg);
+  margin-bottom: var(--space-xl);
 }
 
-.card-header {
+/* Карточка добавления */
-  padding: var(--space-xl);
+.add-card {
-  border-bottom: 1px solid var(--border-light);
   background: var(--bg-primary);
+  border: 2px dashed var(--border-medium);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-height: 300px;
 }
 
-.card-title {
+.add-card:hover {
+  border-color: var(--primary-500);
+  background: var(--primary-50);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.add-card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.add-icon {
+  font-size: 3rem;
+  opacity: 0.7;
+  transition: transform 0.3s ease;
+}
+
+.add-card:hover .add-icon {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+.add-title {
   font-family: var(--font-heading);
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
-  margin-bottom: var(--space-xs);
+  margin: 0;
 }
 
-.card-subtitle {
+.add-description {
   color: var(--text-secondary);
+  margin: 0;
   font-size: var(--text-sm);
 }
 
-.table-container {
+/* Карточка объекта */
-  overflow-x: auto;
+.object-card {
-}
+  background: var(--bg-primary);
-
+  border-radius: var(--radius-lg);
-.objects-table {
+  box-shadow: var(--shadow-sm);
-  width: 100%;
+  border: 1px solid var(--border-light);
-  border-collapse: collapse;
+  overflow: hidden;
-}
+  transition: all 0.3s ease;
-
-.table-header {
-  padding: var(--space-md);
-  text-align: left;
-  font-weight: var(--font-semibold);
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-secondary);
-  font-size: var(--text-sm);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
-}
-
-.table-row {
-  border-bottom: 1px solid var(--border-light);
-  transition: background-color 0.3s ease;
-}
-
-.table-row:hover {
-  background: var(--bg-secondary);
-}
-
-.table-cell {
-  padding: var(--space-md);
-  vertical-align: middle;
-}
-
-.object-info {
   display: flex;
   flex-direction: column;
-  gap: var(--space-xs);
 }
 
-.object-title {
+.object-card:hover {
-  font-weight: var(--font-semibold);
+  transform: translateY(-4px);
-  color: var(--text-primary);
+  box-shadow: var(--shadow-lg);
 }
 
-.object-date {
+.card-image {
-  font-size: var(--text-sm);
+  position: relative;
-  color: var(--text-tertiary);
+  height: 200px;
+  overflow: hidden;
 }
 
-.object-price {
+.card-image img {
-  font-weight: var(--font-semibold);
+  width: 100%;
-  color: var(--primary-600);
+  height: 100%;
-  font-size: var(--text-lg);
+  object-fit: cover;
+  transition: transform 0.3s ease;
 }
 
-.status-badge {
+.object-card:hover .card-image img {
+  transform: scale(1.05);
+}
+
+.card-badge {
+  position: absolute;
+  top: var(--space-sm);
+  right: var(--space-sm);
   padding: var(--space-xs) var(--space-sm);
   border-radius: var(--radius-sm);
   font-size: var(--text-xs);
@@ -414,16 +463,98 @@ const formatDate = (dateString: string) => {
   letter-spacing: var(--tracking-wide);
 }
 
-.status-active {
+.badge-success {
   background: var(--success-50);
   color: var(--success-600);
 }
 
-.status-inactive {
+.badge-secondary {
   background: var(--gray-100);
   color: var(--gray-600);
 }
 
+.card-content {
+  padding: var(--space-lg);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.card-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.card-type {
+  font-size: var(--text-sm);
+  color: var(--primary-600);
+  font-weight: var(--font-medium);
+}
+
+.card-location {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.card-description {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+  margin: var(--space-xs) 0;
+  flex: 1;
+}
+
+.card-price {
+  font-family: var(--font-heading);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  color: var(--primary-600);
+  margin-top: auto;
+}
+
+.card-date {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+.card-actions {
+  padding: var(--space-lg);
+  padding-top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.view-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  font-weight: var(--font-medium);
+}
+
+.view-btn:hover {
+  background: var(--primary-500);
+  color: var(--text-inverse);
+  border-color: var(--primary-500);
+}
+
 .action-buttons {
   display: flex;
   gap: var(--space-xs);
@@ -435,9 +566,14 @@ const formatDate = (dateString: string) => {
   color: var(--error-600);
 }
 
+/* Пустой state */
 .empty-state {
   text-align: center;
   padding: var(--space-2xl);
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-light);
+  margin: var(--space-xl) 0;
 }
 
 .empty-icon {
@@ -487,12 +623,23 @@ const formatDate = (dateString: string) => {
     grid-template-columns: 1fr;
   }
 
-  .table-container {
+  .objects-grid {
-    font-size: var(--text-sm);
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+  }
+
+  .card-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .view-btn {
+    order: -1;
+    margin-bottom: var(--space-sm);
   }
 
   .action-buttons {
-    flex-direction: column;
+    justify-content: space-between;
   }
 
   .page-navigation {
@@ -514,16 +661,59 @@ const formatDate = (dateString: string) => {
     font-size: var(--text-2xl);
   }
 
-  .card-header {
+  .objects-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .add-card {
+    min-height: 250px;
     padding: var(--space-lg);
   }
 
-  .table-cell {
+  .card-content {
-    padding: var(--space-sm);
+    padding: var(--space-md);
   }
 
-  .objects-table {
+  .card-actions {
-    font-size: var(--text-xs);
+    padding: var(--space-md);
+    padding-top: 0;
   }
 }
+
+/* Анимации для плавного появления */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.object-card {
+  animation: fadeInUp 0.5s ease forwards;
+}
+
+.object-card:nth-child(1) {
+  animation-delay: 0.1s;
+}
+
+.object-card:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.object-card:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.object-card:nth-child(4) {
+  animation-delay: 0.4s;
+}
+
+.object-card:nth-child(5) {
+  animation-delay: 0.5s;
+}
 </style>