interview-demo-code/frontend/admin/src/components/Settings/ItemTgChatID.vue

<template>
  <SettingsItem :label="label">
    <template #default>
      <template v-if="settings.items.telegram.bot_token">
        <div class="tw:flex tw:w-full">
          <span class="tw:flex">
            <button
              class="btn btn-primary tw:whitespace-nowrap"
              type="button"
              @click="getChatId"
              :disabled="isLoading || !settings.items.telegram.bot_token"
              :class="{
                'tw:opacity-60 tw:cursor-not-allowed': isLoading
              }"
            >
              <i
                :class="isLoading ? 'fa fa-spinner fa-spin tw:mr-1' : 'fa fa-refresh tw:mr-1'"
              ></i>
              {{ isLoading ? 'Получаю...' : 'Получить Chat ID' }}
            </button>
          </span>
          <input
            type="text"
            v-model="model"
            @input="handleInput"
            :placeholder="placeholder"
            class="form-control"
            :readonly="isLoading"
          />
        </div>

        <div
          v-if="statusMessage"
          class="alert"
          :class="statusMessageClass"
        >
          {{ statusMessage }}
        </div>

        <button
          class="btn btn-link btn-xs"
          type="button"
          data-toggle="collapse"
          :data-target="`#${collapseId}`"
          aria-expanded="false"
          :aria-controls="collapseId"
        >
          Инструкция как получить ChatID.
        </button>
        <div class="collapse" :id="collapseId">
          <div class="well">
            <p class="text-primary">Как получить Chat ID</p>
            <ol>
              <li>Убедитесь, что Telegram Bot Token введён выше.</li>
              <li>Откройте вашего бота в Telegram и отправьте ему кодовое слово: <code>ecommerce_get_chatid</code>. Важно отправить именно такое сообщение, иначе не сработает.</li>
              <li>Вернитесь сюда и нажмите кнопку «Получить Chat ID» — скрипт автоматически подставит его в поле ниже.</li>
            </ol>
          </div>
        </div>
      </template>

      <div v-else class="alert alert-warning">
        <strong>BotToken</strong> не указан. Пожалуйста, введите корректный BotToken. После этого здесь станет доступна настройка ChatID.
      </div>
    </template>

    <template #help>
      Идентификатор Telegram-чата, куда будут отправляться уведомления о новых заказах. Если оставить поле пустым, уведомления отправляться не будут.
    </template>
  </SettingsItem>
</template>

<script setup>
import {useSettingsStore} from "@/stores/settings.js";
import {ref, computed, useId} from "vue";
import SettingsItem from "@/components/SettingsItem.vue";
import {apiGet} from "@/utils/http.js";

const model = defineModel();
const settings = useSettingsStore();
const statusMessage = ref(null);
const isLoading = ref(false);
const collapseId = useId();
const parseChatId = (value) => {
  if (value === '' || value === null || value === undefined) return null;
  const normalized = String(value).trim();
  if (!/^-?\d+$/.test(normalized)) return null;
  const parsed = Number.parseInt(normalized, 10);
  return Number.isFinite(parsed) ? parsed : null;
};

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: 'Chat ID будет получен автоматически',
  },
});

if (typeof model.value === 'string') {
  model.value = parseChatId(model.value);
}

const statusMessageClass = computed(() => {
  if (!statusMessage.value) return '';

  if (statusMessage.value.startsWith('✅')) {
    return 'alert-success';
  }

  if (statusMessage.value.startsWith('❌')) {
    return 'alert-danger';
  }

  return 'alert-info';
});

function handleInput(event) {
  model.value = parseChatId(event.target.value);
  // Сбрасываем статус сообщения при изменении значения
  if (statusMessage.value) {
    statusMessage.value = null;
  }
}

async function getChatId() {
  // Проверка наличия bot_token
  if (!settings.items.telegram.bot_token?.trim()) {
    alert('Сначала введите Telegram Bot Token!');
    return;
  }

  // Сбрасываем предыдущее сообщение
  statusMessage.value = null;
  isLoading.value = true;

  try {
    const response = await apiGet('getChatId');

    if (!response.success) {
      // Обработка ошибок
      const errorMessage = response.data?.message || response.error || 'Неизвестная ошибка';

      if (response.status === 422) {
        statusMessage.value = `❌ ${errorMessage}`;
      } else {
        statusMessage.value = `❌ Ошибка получения Chat ID: ${errorMessage}`;
      }
      return;
    }

    // Проверка наличия chat_id в ответе
    if (!response.data?.chat_id) {
      statusMessage.value = '❌ Ошибка: Chat ID не найден в ответе сервера.';
      console.error('Неожиданный формат ответа:', response);
      return;
    }

    const parsedChatId = parseChatId(response.data.chat_id);

    if (parsedChatId === null) {
      statusMessage.value = '❌ Ошибка: Chat ID вернулся в некорректном формате.';
      console.error('Некорректный Chat ID в ответе:', response);
      return;
    }

    model.value = parsedChatId;
    statusMessage.value = '✅ ChatID успешно получен и подставлен в поле. Не забудьте сохранить настройки!';
  } catch (error) {
    console.error('Ошибка при получении Chat ID:', error);
    statusMessage.value = '❌ Ошибка получения Chat ID. Проверьте подключение к серверу.';
  } finally {
    isLoading.value = false;
  }
}
</script>

<style scoped>
code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}
</style>