Squashed commit message

frontend/admin/src/components/Settings/ItemTgChatID.vue

@@ -0,0 +1,190 @@
+<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>
+