valitovgaziz
a35373a7e3
new file: main_dc/yalarba/api_tp/internal/models/contacts.go new file: main_dc/yalarba/easySite/easySite/app/assets/images/itFestOren.jpg modified: main_dc/yalarba/easySite/easySite/app/pages/objects/index.vue easysite102.ru add new page contacts valitovgaziz.ru add text about motivation
104 lines
3.3 KiB
Vue
104 lines
3.3 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-gray-50 py-8">
|
||
<div class="container">
|
||
<!-- Заголовок и кнопка добавления -->
|
||
<div class="flex justify-between items-center mb-8">
|
||
<div>
|
||
<h1 class="text-3xl font-bold">Все объекты</h1>
|
||
<p class="text-gray-600 mt-2">База объектов для путешествий</p>
|
||
</div>
|
||
<NuxtLink to="/objects/create" class="btn btn-primary">
|
||
Добавить объект
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<!-- Простой поиск -->
|
||
<div class="search-filters mb-8">
|
||
<div class="flex gap-4">
|
||
<div class="form-group flex-1">
|
||
<input
|
||
v-model="searchQuery"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="Поиск по названию, городу или описанию..."
|
||
@keyup.enter="searchObjects"
|
||
>
|
||
</div>
|
||
<button class="btn btn-primary" @click="searchObjects">
|
||
Найти
|
||
</button>
|
||
<button class="btn btn-outline" @click="resetSearch">
|
||
Сброс
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Быстрые ссылки -->
|
||
<div class="flex gap-4 mb-6">
|
||
<NuxtLink to="/objects/my-objects" class="btn btn-outline">
|
||
📝 Мои объекты
|
||
</NuxtLink>
|
||
<NuxtLink to="/objects/create" class="btn btn-outline">
|
||
➕ Добавить объект
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<!-- Результаты поиска -->
|
||
<div v-if="loading" class="text-center py-12">
|
||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
|
||
<p class="mt-4 text-gray-600">Загрузка объектов...</p>
|
||
</div>
|
||
|
||
<div v-else-if="objects.length === 0" class="text-center py-12">
|
||
<div class="text-gray-400 text-6xl mb-4">🏢</div>
|
||
<h3 class="text-xl font-semibold mb-2">Объекты не найдены</h3>
|
||
<p class="text-gray-600 mb-6">Попробуйте изменить поисковый запрос или добавьте первый объект</p>
|
||
<NuxtLink to="/objects/create" class="btn btn-primary">
|
||
Добавить первый объект
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<ObjectCard
|
||
v-for="object in objects"
|
||
:key="object.id"
|
||
:object="object"
|
||
@click="navigateToObject(object.id)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ObjectItem } from '~/composables/useObjects'
|
||
|
||
const route = useRoute()
|
||
const { objects, loading, fetchObjects } = useObjects()
|
||
|
||
const searchQuery = ref(route.query.search as string || '')
|
||
|
||
// Загрузка объектов при монтировании
|
||
onMounted(() => {
|
||
if (searchQuery.value) {
|
||
searchObjects()
|
||
} else {
|
||
fetchObjects()
|
||
}
|
||
})
|
||
|
||
const searchObjects = async () => {
|
||
await fetchObjects({
|
||
search: searchQuery.value
|
||
})
|
||
}
|
||
|
||
const resetSearch = async () => {
|
||
searchQuery.value = ''
|
||
await fetchObjects()
|
||
}
|
||
|
||
const navigateToObject = (id: number) => {
|
||
navigateTo(`/objects/${id}`)
|
||
}
|
||
</script> |