GrResponseErrorBanner

<script setup lang="ts">
import { GrButton, GrResponseErrorBanner, useResponseError } from '@feugene/granularity'

const { currentError, setRaw, dismiss } = useResponseError()

async function loadReport() {
  try {
    // На месте этой строки был бы `await fetch('/api/reports/42')`; ответ собран
    // здесь, чтобы демо работало на витрине без бэкенда.
    const response = new Response('{"message":"Отчёт ещё не готов: расчёт закончится через 2 минуты"}', {
      status: 409,
      headers: { 'content-type': 'application/json' },
    })

    if (!response.ok)
      throw response
  }
  catch (error) {
    await setRaw(error)
  }
}
</script>

<template>
  <div class="grid gap-3">
    <GrButton size="sm" class="justify-self-start" @click="loadReport">
      Загрузить отчёт
    </GrButton>

    <GrResponseErrorBanner
      :error="currentError"
      can-retry
      @retry="loadReport"
      @dismiss="dismiss"
    />
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

import {
  GrButton,
  GrCard,
  GrUploadErrorBanner,
  type ResponseErrorInfo,
  useResponseError,
} from '@feugene/granularity'

class FakeHttpError extends Error {
  isAxiosError = true
  response: { status: number, data: unknown, headers?: Record<string, string> }

  constructor(status: number, data: unknown, headers?: Record<string, string>) {
    super(`Request failed with status ${status}`)
    this.name = 'AxiosError'
    this.response = { status, data, headers }
  }
}

const uploadClassifier = useResponseError({ texts: () => ({ retryLabel: 'Upload again' }) })
const fakeUploadError = shallowRef<ResponseErrorInfo | null>(null)
const events = shallowRef<string[]>([])
const uploadFiles = typeof File !== 'undefined' ? [new File([], 'photo.heic')] : []

function log(msg: string) {
  events.value = [`[${new Date().toLocaleTimeString()}] ${msg}`, ...events.value].slice(0, 8)
}

async function triggerUploadDemo() {
  const info = await uploadClassifier.classify(
    new FakeHttpError(413, {
      message: 'File is too large',
      errors: { file: ['Maximum 5 MB'] },
    }),
  )
  fakeUploadError.value = info
  log(`upload-wrapper classify -> kind=${info.kind}`)
}
</script>

<template>
  <GrCard class="grid gap-3 p-4">
    <p class="text-[12px] text-[var(--gr-muted-fg)]">
      Thin wrapper: text preset for "upload", canRetry=true, optional `files` prop in the retry payload.
    </p>

    <div class="flex flex-wrap gap-2">
      <GrButton size="sm" @click="triggerUploadDemo">
        Simulate 413 upload error
      </GrButton>
      <GrButton size="sm" variant="outline" @click="fakeUploadError = null">
        Hide
      </GrButton>
    </div>

    <GrUploadErrorBanner
      :error="fakeUploadError"
      :files="uploadFiles"
      @retry="({ files }) => log(`upload-retry payload files=${files.length}`)"
      @dismiss="fakeUploadError = null"
    />

    <div class="grid gap-1">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Event log
      </div>
      <pre class="max-h-[120px] overflow-auto rounded bg-[var(--gr-muted)] p-3 text-[12px]">{{ events.join('\n') || '—' }}</pre>
    </div>
  </GrCard>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'

import {
  GrButton,
  GrResponseErrorBanner,
  type ResponseErrorInfo,
  useResponseError,
} from '@feugene/granularity'

const { currentError, setRaw, dismiss } = useResponseError()
const source = ref('—')

// Русские тексты вместо английских дефолтов: на них и видно, что подменяется,
// а что нет.
const texts = {
  networkMessage: 'Нет связи с сервером — проверьте интернет.',
  serverMessage: 'Сервер не справился, попробуйте ещё раз.',
}

class FakeHttpError extends Error {
  isAxiosError = true
  response: { status: number, data: unknown }

  constructor(status: number, data: unknown) {
    super(`Request failed with status ${status}`)
    this.name = 'AxiosError'
    this.response = { status, data }
  }
}

async function showServerMessage() {
  source.value = 'Сообщение сервера'
  // Сервер вернул текст, дословно совпадающий с английским дефолтом пакета.
  await setRaw(new FakeHttpError(500, { message: 'A server error occurred. Please try again.' }))
}

async function showFallback() {
  source.value = 'Фолбэк классификатора'
  // Тела нет — сообщение подставит классификатор и пометит флагом.
  await setRaw(new FakeHttpError(500, null))
}

const lastInfo = shallowRef<ResponseErrorInfo | null>(null)
function onRetry(info: ResponseErrorInfo) {
  lastInfo.value = info
}
</script>

<template>
  <div class="grid gap-3">
    <div class="flex flex-wrap gap-3">
      <GrButton variant="outline" @click="showServerMessage">
        Ответ с сообщением
      </GrButton>
      <GrButton variant="outline" @click="showFallback">
        Ответ без сообщения
      </GrButton>
      <GrButton variant="ghost" @click="dismiss">
        Скрыть
      </GrButton>
    </div>

    <div class="text-xs text-[var(--gr-muted-fg)]">
      Источник текста: <span class="font-medium text-[var(--gr-fg)]">{{ source }}</span>
      <template v-if="currentError">
        · isFallbackMessage: {{ String(currentError.isFallbackMessage) }}
      </template>
    </div>

    <GrResponseErrorBanner
      :error="currentError"
      :texts="texts"
      can-retry
      @retry="onRetry"
      @dismiss="dismiss"
    />

    <div v-if="lastInfo" class="text-xs text-[var(--gr-muted-fg)]">
      Повтор запрошен для kind={{ lastInfo.kind }}
    </div>
  </div>
</template>