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

<template>
  <div class="edit-object">
    <section class="page-hero">
      <div class="container">
        <h1>Редактировать объект</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div v-if="loading" class="edit-object__loading">
          <div class="skeleton" style="height: 48px; width: 100%; margin-bottom: 16px" />
          <div class="skeleton" style="height: 200px; width: 100%" />
        </div>

        <form v-else-if="form" @submit.prevent="handleUpdate" class="edit-object__form">
          <div class="form-group">
            <label class="form-label">Название</label>
            <input
              v-model="form.title"
              type="text"
              class="form-input"
              required
            />
          </div>

          <div class="form-group">
            <label class="form-label">Краткое описание</label>
            <input
              v-model="form.short_description"
              type="text"
              class="form-input"
            />
          </div>

          <div class="form-group">
            <label class="form-label">Описание</label>
            <textarea
              v-model="form.description"
              class="form-input"
              rows="6"
              required
            ></textarea>
          </div>

          <div class="form-group">
            <label class="form-label">Местоположение</label>
            <input
              v-model="form.location"
              type="text"
              class="form-input"
            />
          </div>

          <div class="edit-object__actions">
            <button type="submit" class="btn btn--primary btn--lg" :disabled="saving">
              {{ saving ? 'Сохранение...' : 'Сохранить' }}
            </button>
            <button type="button" class="btn btn--danger btn--lg" @click="handleDelete">
              Удалить
            </button>
          </div>

          <p v-if="error" class="edit-object__error">{{ error }}</p>
        </form>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'Редактировать объект',
  middleware: 'auth',
})

const route = useRoute()
const objectsStore = useObjectsStore()

const id = computed(() => Number(route.params.id))
const form = reactive({
  title: '',
  short_description: '',
  description: '',
  location: '',
})
const loading = ref(true)
const saving = ref(false)
const error = ref('')

onMounted(async () => {
  try {
    await objectsStore.fetchObject(id.value)
    if (objectsStore.currentObject) {
      form.title = objectsStore.currentObject.title
      form.short_description = objectsStore.currentObject.short_description || ''
      form.description = objectsStore.currentObject.description
      form.location = objectsStore.currentObject.location || ''
    }
  } catch {
    error.value = 'Объект не найден'
  } finally {
    loading.value = false
  }
})

async function handleUpdate() {
  saving.value = true
  error.value = ''
  try {
    await objectsStore.updateObject(id.value, { ...form })
    navigateTo(`/objects/${id.value}`)
  } catch (e: any) {
    error.value = e.message || 'Ошибка обновления'
  } finally {
    saving.value = false
  }
}

async function handleDelete() {
  if (!confirm('Вы уверены, что хотите удалить объект?')) return
  error.value = ''
  try {
    await objectsStore.deleteObject(id.value)
    navigateTo('/objects/my')
  } catch (e: any) {
    error.value = e.message || 'Ошибка удаления'
  }
}
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
}

.edit-object__form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.edit-object__actions {
  display: flex;
  gap: 12px;
}

.edit-object__error {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-red);
  padding: 8px;
  background: var(--color-bg-error);
  border-radius: var(--radius-sm);
}
</style>