tp/main_dc/yalarba/easySite/app/pages/objects/[id]/edit.vue

<template>
  <div class="page-wrapper">

    <main class="edit-object-page">
      <div class="container max-w-4xl">
        <div class="page-header">
          <div class="header-content">
            <div class="header-main">
              <NuxtLink :to="`/objects/${$route.params.id}`" class="btn btn-outline btn-sm btn-with-icon">
                ← Назад к объекту
              </NuxtLink>
              <h1 class="page-title">Редактировать объект</h1>
            </div>
            <p class="page-subtitle">Обновите информацию о вашем объекте</p>
          </div>
        </div>

        <div v-if="loading" class="loading-state">
          <div class="loading-spinner"/>
          <p class="loading-text">Загрузка данных объекта...</p>
        </div>

        <ObjectForm
        v-else-if="object"
        :object="object"
        :loading="updating"
        @submit="handleSubmit"
        @cancel="handleCancel" />

        <div v-else class="error-state">
          <div class="error-icon">❌</div>
          <h3 class="error-title">Объект не найден</h3>
          <p class="error-description">Возможно, объект был удален или у вас нет к нему доступа</p>
          <div class="error-actions">
            <NuxtLink to="/objects/my-objects" class="btn btn-primary">
              Вернуться к моим объектам
            </NuxtLink>
            <NuxtLink to="/objects" class="btn btn-outline">
              Все объекты
            </NuxtLink>
          </div>
        </div>
      </div>
    </main>

  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { getById, update } = useObjects()

const object = ref<Record<string, unknown> | null>(null)
const loading = ref(true)
const updating = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const id = parseInt(route.params.id as string)
    const data = await getById(id)
    object.value = {
      short_name: data.short_name,
      long_name: data.long_name,
      type: data.type,
      description: data.description,
      short_description: data.short_description,
      address: data.address,
      price: data.price,
      price_period: data.price_period,
      phone: data.phone,
      email: data.email,
      site: data.site,
      status: data.status
    }
  } catch (error) {
    console.error('Error loading object:', error)
    object.value = null
  } finally {
    loading.value = false
  }
})

const handleSubmit = async (formData: Record<string, unknown>) => {
  updating.value = true
  try {
    const id = parseInt(route.params.id as string)
    await update(id, formData as Parameters<typeof update>[1])
    await navigateTo(`/objects/${id}`)
  } catch (error) {
    console.error('Error updating object:', error)
    alert('Ошибка при обновлении объекта')
  } finally {
    updating.value = false
  }
}

const handleCancel = () => {
  navigateTo(`/objects/${route.params.id}`)
}
</script>

<style scoped>
.edit-object-page {
  padding: var(--space-xl) 0;
  min-height: calc(100vh - 160px);
  background: var(--bg-secondary);
}

.page-header {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.header-main {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.page-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin: 0;
}

.loading-state {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.loading-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--border-light);
  border-top: 3px solid var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

.loading-text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.error-state {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.error-icon {
  font-size: 4rem;
  margin-bottom: var(--space-lg);
  opacity: 0.7;
}

.error-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.error-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.error-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .header-main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .page-title {
    font-size: var(--text-2xl);
  }

  .error-actions {
    flex-direction: column;
    align-items: center;
  }
}
</style>