Squashed commit message

frontend/admin/src/views/CustomersView.vue

@@ -0,0 +1,706 @@
+<template>
+  <div>
+    <DataTable
+      :value="customers"
+      :loading="loading"
+      paginator
+      :rows="20"
+      :rowsPerPageOptions="[10, 20, 50, 100]"
+      :sortField="lazyParams.sortField"
+      :sortOrder="lazyParams.sortOrder"
+      showGridlines
+      stripedRows
+      size="small"
+      removableSort
+      :globalFilterFields="['telegram_user_id', 'username', 'first_name', 'last_name', 'language_code']"
+      v-model:filters="filters"
+      filterDisplay="menu"
+      :lazy="true"
+      :totalRecords="totalRecords"
+      @page="onPage"
+      @sort="onSort"
+      @filter="onFilter"
+      paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+      :currentPageReportTemplate="`Показано {first} - {last} из {totalRecords} записей`"
+    >
+      <template #header>
+        <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2">
+          <div class="tw:flex tw:items-center tw:gap-2">
+            <Button
+              icon="fa fa-columns"
+              :label="`Колонки (${selectedColumns.length}/${columns.length})`"
+              @click="toggleColumnsPanel"
+              size="small"
+            />
+            <OverlayPanel ref="columnsPanel">
+              <div class="tw:flex tw:flex-col tw:gap-2 tw:min-w-[200px]">
+                <div class="tw:flex tw:gap-2 tw:mb-2">
+                  <Button
+                    label="Выбрать все"
+                    size="small"
+                    severity="secondary"
+                    outlined
+                    @click="selectAllColumns"
+                    class="tw:flex-1"
+                  />
+                  <Button
+                    label="Снять все"
+                    size="small"
+                    severity="secondary"
+                    outlined
+                    @click="deselectAllColumns"
+                    class="tw:flex-1"
+                  />
+                </div>
+                <div
+                  v-for="col in columns"
+                  :key="col.field"
+                  class="tw:flex tw:items-center tw:gap-2"
+                >
+                  <Checkbox
+                    :inputId="col.field"
+                    :modelValue="selectedColumns.some(c => c.field === col.field)"
+                    @update:modelValue="(val) => toggleColumn(col, val)"
+                    :binary="true"
+                  />
+                  <label :for="col.field" class="tw:cursor-pointer">{{ col.header }}</label>
+                </div>
+              </div>
+            </OverlayPanel>
+            <Button icon="fa fa-refresh" @click="loadCustomers" v-tooltip.top="'Обновить таблицу'"
+                    size="small"/>
+            <Button icon="fa fa-times-circle" label="Сбросить фильтры" @click="resetFilters"
+                    v-tooltip.top="'Сбросить все фильтры'" size="small"/>
+          </div>
+
+          <IconField>
+            <InputIcon class="fa fa-search"/>
+            <InputText v-model="globalSearchValue" placeholder="Поиск по таблице..."
+                       @input="onGlobalSearch"/>
+          </IconField>
+        </div>
+      </template>
+
+      <Column header="Действия" :exportable="false" headerStyle="width: 5rem">
+        <template #body="{ data }">
+          <Button
+            icon="fa fa-paper-plane"
+            severity="secondary"
+            text
+            rounded
+            @click="openMessageDialog(data)"
+            v-tooltip.top="'Отправить сообщение пользователю в Telegram'"
+          />
+        </template>
+      </Column>
+
+      <Column v-for="col in selectedColumns" :key="col.field" :field="col.field"
+              :sortable="col.sortable" :dataType="col.dataType"
+              :showFilterMenu="col.filterable !== false">
+        <template #header>
+          <div class="tw:flex tw:items-center tw:gap-1">
+            <span>{{ col.header }}</span>
+            <i
+              v-if="col.help"
+              class="fa fa-question-circle tw:text-gray-400 tw:cursor-help"
+              v-tooltip.top="col.help"
+            ></i>
+          </div>
+        </template>
+        <template #body="{ data }">
+          <template v-if="col.field === 'id'">{{ data.id }}</template>
+          <template v-else-if="col.field === 'telegram_user_id'">
+            {{ data.telegram_user_id }}
+          </template>
+          <template v-else-if="col.field === 'tracking_id'">
+            <code>{{ data.tracking_id }}</code>
+          </template>
+          <template v-else-if="col.field === 'username'">
+            <div class="tw:flex tw:items-center tw:gap-2">
+              <div v-if="data.photo_url" class="tw:relative">
+                <img
+                  :src="data.photo_url"
+                  :alt="data.username || 'Avatar'"
+                  class="tw:w-6 tw:h-6 tw:rounded-full tw:object-cover"
+                  @error="handleImageError"
+                />
+              </div>
+              <i v-else class="fa fa-user tw:text-gray-400"></i>
+              <span v-if="data.username">@{{ data.username }}</span>
+              <span v-else>—</span>
+            </div>
+          </template>
+          <template v-else-if="col.field === 'first_name'">{{ data.first_name || '—' }}</template>
+          <template v-else-if="col.field === 'last_name'">{{ data.last_name || '—' }}</template>
+          <template v-else-if="col.field === 'language_code'">
+            <span v-if="data.language_code">
+              <i class="fa fa-globe"></i> {{ data.language_code.toUpperCase() }}
+            </span>
+            <span v-else>—</span>
+          </template>
+          <template v-else-if="col.field === 'is_premium'">
+            <i v-if="data.is_premium" class="fa fa-star" v-tooltip.top="'Премиум пользователь'"></i>
+            <span v-else>—</span>
+          </template>
+          <template v-else-if="col.field === 'orders_count'">
+            <span>{{ data.orders_count }}</span>
+          </template>
+          <template v-else-if="col.field === 'oc_customer_id'">
+            <span v-if="data.oc_customer_id">{{ data.oc_customer_id }}</span>
+            <span v-else>—</span>
+          </template>
+          <template v-else-if="col.field === 'last_seen_at'">
+            <span v-if="data.last_seen_at">
+              <i class="fa fa-clock-o"></i> {{ formatDate(data.last_seen_at) }}
+            </span>
+            <span v-else>—</span>
+          </template>
+          <template v-else-if="col.field === 'privacy_consented_at'">
+            <span v-if="data.privacy_consented_at">
+              <i class="fa fa-clock-o"></i> {{ formatDate(data.privacy_consented_at) }}
+            </span>
+            <span v-else>—</span>
+          </template>
+          <template v-else-if="col.field === 'created_at'">
+            <i class="fa fa-calendar"></i> {{ formatDate(data.created_at) }}
+          </template>
+        </template>
+        <template #filter="{ filterModel }">
+          <template v-if="col.field === 'telegram_user_id'">
+            <InputText v-model="filterModel.value" type="text" placeholder="Поиск по ID"
+                       class="p-column-filter"/>
+          </template>
+          <template v-else-if="col.field === 'username'">
+            <InputText v-model="filterModel.value" type="text"
+                       placeholder="Поиск по имени пользователя" class="p-column-filter"/>
+          </template>
+          <template v-else-if="col.field === 'first_name'">
+            <InputText v-model="filterModel.value" type="text" placeholder="Поиск по имени"
+                       class="p-column-filter"/>
+          </template>
+          <template v-else-if="col.field === 'last_name'">
+            <InputText v-model="filterModel.value" type="text" placeholder="Поиск по фамилии"
+                       class="p-column-filter"/>
+          </template>
+          <template
+            v-else-if="['last_seen_at', 'created_at', 'privacy_consented_at'].includes(col.field)">
+            <DatePicker v-model="filterModel.value" dateFormat="dd.mm.yy" placeholder="dd.mm.yyyy"/>
+          </template>
+          <template v-else-if="col.field === 'orders_count'">
+            <InputNumber v-model="filterModel.value"/>
+          </template>
+          <template v-else-if="col.field === 'is_premium'">
+            <Dropdown
+              v-model="filterModel.value"
+              :options="premiumFilterOptions"
+              optionLabel="label"
+              optionValue="value"
+              placeholder="Любой"
+              class="p-column-filter"
+            />
+          </template>
+        </template>
+      </Column>
+
+      <template #empty>
+        <div style="text-align: center; padding: 2rem;">
+          <i class="fa fa-users" style="font-size: 3rem; color: #ccc; margin-bottom: 1rem;"></i>
+          <div>Нет данных о кастомерах</div>
+          <div style="font-size: 0.9rem; color: #999; margin-top: 0.5rem;">
+            Пользователи появятся здесь после первого входа в Telegram Mini App
+          </div>
+        </div>
+      </template>
+
+      <template #loading>
+        <div style="text-align: center; padding: 2rem;">
+          <i class="fa fa-spinner fa-spin" style="font-size: 2rem;"></i>
+          <div style="margin-top: 1rem;">Загрузка данных...</div>
+        </div>
+      </template>
+    </DataTable>
+
+    <Dialog
+      v-model:visible="showMessageDialog"
+      modal
+      header="Отправить сообщение"
+      :style="{ width: '500px' }"
+      :closable="true"
+    >
+      <div style="margin-bottom: 1rem;">
+        <div style="margin-bottom: 0.5rem; font-weight: 600;">
+          Получатель:
+        </div>
+        <div v-if="selectedCustomer">
+          <div v-if="selectedCustomer.username">
+            <i class="fa fa-user"></i> @{{ selectedCustomer.username }}
+          </div>
+          <div v-if="selectedCustomer.first_name || selectedCustomer.last_name">
+            {{ selectedCustomer.first_name }} {{ selectedCustomer.last_name }}
+          </div>
+          <div style="font-size: 0.9rem; color: #666;">
+            ID: {{ selectedCustomer.telegram_user_id }}
+          </div>
+          <div v-if="!selectedCustomer.allows_write_to_pm"
+               style="color: #f59e0b; margin-top: 0.5rem;">
+            <i class="fa fa-exclamation-triangle"></i> Пользователь не разрешил писать ему в PM
+          </div>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 1rem;">
+        <label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+          Сообщение:
+        </label>
+        <Textarea
+          id="message"
+          v-model="messageText"
+          :rows="5"
+          :disabled="!selectedCustomer || !selectedCustomer.allows_write_to_pm"
+          placeholder="Введите текст сообщения..."
+          style="width: 100%;"
+        />
+      </div>
+
+      <template #footer>
+        <Button
+          label="Отмена"
+          icon="fa fa-times"
+          severity="secondary"
+          @click="closeMessageDialog"
+          :disabled="sendingMessage"
+        />
+        <Button
+          label="Отправить"
+          icon="fa fa-paper-plane"
+          @click="sendMessage"
+          :loading="sendingMessage"
+          :disabled="!messageText || !selectedCustomer || !selectedCustomer.allows_write_to_pm"
+        />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from 'vue';
+import {FilterMatchMode, FilterOperator} from '@primevue/core/api';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import DatePicker from 'primevue/datepicker';
+import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Dialog from 'primevue/dialog';
+import Textarea from 'primevue/textarea';
+import OverlayPanel from 'primevue/overlaypanel';
+import Checkbox from 'primevue/checkbox';
+import Button from 'primevue/button';
+import InputNumber from 'primevue/inputnumber';
+import {apiPost} from '@/utils/http.js';
+import {IconField, InputIcon, useToast} from 'primevue';
+
+const toast = useToast();
+const customers = ref([]);
+const loading = ref(false);
+const totalRecords = ref(0);
+const showMessageDialog = ref(false);
+const selectedCustomer = ref(null);
+const messageText = ref('');
+const sendingMessage = ref(false);
+
+const columns = ref([
+  {field: 'id', header: '№', sortable: true, filterable: false, visible: true},
+  {
+    field: 'telegram_user_id',
+    header: 'ID в Telegram',
+    sortable: true,
+    filterable: true,
+    visible: false
+  },
+  {
+    field: 'tracking_id',
+    header: 'Tracking ID',
+    sortable: false,
+    filterable: true,
+    visible: false,
+    help: 'Tracking ID это публичный уникальный идентификатор покупателя, используется в рекламных кампаниях для отслеживания активности.',
+  },
+  {field: 'username', header: 'Имя пользователя', sortable: true, filterable: true, visible: true},
+  {field: 'first_name', header: 'Имя', sortable: true, filterable: true, visible: true},
+  {field: 'last_name', header: 'Фамилия', sortable: true, filterable: true, visible: true},
+  {
+    field: 'language_code',
+    header: 'Язык интерфейса',
+    sortable: true,
+    filterable: false,
+    visible: false
+  },
+  {
+    field: 'orders_count',
+    header: 'Кол-во заказов',
+    sortable: true,
+    filterable: true,
+    dataType: 'numeric',
+    visible: true,
+    help: 'Общее количество Telegram заказов за всё время',
+  },
+  {field: 'is_premium', header: 'Премиум статус', sortable: true, filterable: true, visible: true},
+  {
+    field: 'oc_customer_id',
+    header: 'ID покупателя',
+    sortable: true,
+    filterable: false,
+    visible: false
+  },
+  {
+    field: 'last_seen_at',
+    header: 'Последний визит',
+    sortable: true,
+    dataType: 'date',
+    filterable: true,
+    visible: true,
+    help: 'Показывает, когда пользователь последний раз открывал Telegram магазин.',
+  },
+  {
+    field: 'privacy_consented_at',
+    header: 'Согласие ПД',
+    sortable: true,
+    dataType: 'date',
+    filterable: true,
+    visible: true,
+    help: 'Показывает, когда пользователь дал согласие на обработку персональных данных.',
+  },
+  {
+    field: 'created_at',
+    header: 'Дата регистрации',
+    sortable: true,
+    dataType: 'date',
+    filterable: true,
+    visible: true,
+    help: 'Показывает, когда пользователь впервые открыл Telegram магазин.',
+  },
+]);
+
+const selectedColumns = ref(columns.value.filter(col => col.visible !== false));
+const columnsPanel = ref(null);
+const globalSearchValue = ref('');
+let searchTimeout = null;
+
+function toggleColumnsPanel(event) {
+  columnsPanel.value.toggle(event);
+}
+
+function toggleColumn(col, checked) {
+  // Сохраняем порядок колонок из исходного массива columns
+  const selectedFields = new Set(selectedColumns.value.map(c => c.field));
+
+  if (checked) {
+    selectedFields.add(col.field);
+  } else {
+    selectedFields.delete(col.field);
+  }
+
+  // Пересоздаем массив, сохраняя исходный порядок из columns
+  selectedColumns.value = columns.value.filter(c => selectedFields.has(c.field));
+}
+
+function selectAllColumns() {
+  selectedColumns.value = [...columns.value];
+}
+
+function deselectAllColumns() {
+  selectedColumns.value = [];
+}
+
+const premiumFilterOptions = [
+  {label: 'Любой', value: null},
+  {label: 'Нет', value: false},
+  {label: 'Да', value: true},
+];
+
+const lazyParams = ref({
+  first: 0,
+  rows: 20,
+  page: 1,
+  sortField: 'last_seen_at',
+  sortOrder: -1,
+  filters: {},
+});
+
+const filters = ref({
+  global: {value: null, matchMode: FilterMatchMode.CONTAINS},
+  telegram_user_id: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]
+  },
+  username: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
+  },
+  first_name: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
+  },
+  last_name: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
+  },
+  orders_count: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}],
+  },
+  is_premium: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]
+  },
+  created_at: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
+  },
+  last_seen_at: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
+  },
+  privacy_consented_at: {
+    operator: FilterOperator.AND,
+    constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
+  },
+});
+
+function processFiltersForBackend(filtersObj) {
+  const processed = JSON.parse(JSON.stringify(filtersObj));
+
+  // Обрабатываем фильтры по датам
+  const dateFields = ['created_at', 'last_seen_at', 'privacy_consented_at'];
+  dateFields.forEach(field => {
+    if (processed[field] && processed[field].constraints) {
+      processed[field].constraints.forEach(constraint => {
+        if (constraint.value && ['dateIs', 'dateIsNot', 'dateBefore', 'dateAfter'].includes(constraint.matchMode)) {
+          // Преобразуем дату в формат YYYY-MM-DD, используя локальное время
+          const date = new Date(constraint.value);
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, '0');
+          const day = String(date.getDate()).padStart(2, '0');
+          constraint.value = `${year}-${month}-${day}`;
+        }
+      });
+    }
+  });
+
+  return processed;
+}
+
+async function loadCustomers(event = null) {
+  loading.value = true;
+  try {
+    const processedFilters = processFiltersForBackend(filters.value);
+
+    const params = {
+      page: lazyParams.value.page,
+      rows: lazyParams.value.rows,
+      sortField: lazyParams.value.sortField,
+      sortOrder: lazyParams.value.sortOrder === -1 ? 'DESC' : 'ASC',
+      filters: processedFilters,
+    };
+
+    const result = await apiPost('getTelegramCustomers', params);
+    if (result.success && result.data) {
+      // apiPost возвращает полный ответ сервера, а apiGet возвращает response.data.data
+      // Поэтому здесь нужно проверить, есть ли вложенный data
+      const responseData = result.data.data ? result.data.data : result.data;
+      customers.value = Array.isArray(responseData) ? responseData : (responseData.data || []);
+      totalRecords.value = responseData.totalRecords || 0;
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: 'Ошибка',
+        detail: result.error || 'Не удалось загрузить данные',
+        life: 3000,
+      });
+    }
+  } catch (error) {
+    console.error('Ошибка при загрузке кастомеров:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка',
+      detail: 'Произошла ошибка при загрузке данных',
+      life: 3000,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onPage(event) {
+  lazyParams.value.first = event.first;
+  lazyParams.value.rows = event.rows;
+  lazyParams.value.page = event.page + 1;
+  loadCustomers(event);
+}
+
+function onSort(event) {
+  lazyParams.value.sortField = event.sortField;
+  lazyParams.value.sortOrder = event.sortOrder;
+  lazyParams.value.page = 1;
+  lazyParams.value.first = 0;
+  loadCustomers(event);
+}
+
+function onFilter(event) {
+  filters.value = event.filters;
+  lazyParams.value.page = 1;
+  lazyParams.value.first = 0;
+  loadCustomers(event);
+}
+
+function onGlobalSearch() {
+  // Обновляем глобальный фильтр
+  filters.value.global.value = globalSearchValue.value || null;
+
+  // Сбрасываем на первую страницу
+  lazyParams.value.page = 1;
+  lazyParams.value.first = 0;
+
+  // Debounce: очищаем предыдущий таймер
+  if (searchTimeout) {
+    clearTimeout(searchTimeout);
+  }
+
+  // Устанавливаем новый таймер для отправки запроса через 300ms после последнего ввода
+  searchTimeout = setTimeout(() => {
+    loadCustomers();
+  }, 800);
+}
+
+function resetFilters() {
+  globalSearchValue.value = '';
+  filters.value = {
+    global: {value: null, matchMode: FilterMatchMode.CONTAINS},
+    telegram_user_id: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]
+    },
+    username: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
+    },
+    first_name: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
+    },
+    last_name: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
+    },
+    orders_count: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]
+    },
+    is_premium: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]
+    },
+    created_at: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
+    },
+    last_seen_at: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
+    },
+    privacy_consented_at: {
+      operator: FilterOperator.AND,
+      constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
+    },
+  };
+  lazyParams.value.page = 1;
+  lazyParams.value.first = 0;
+  loadCustomers();
+}
+
+function handleImageError(event) {
+  // Скрываем изображение при ошибке загрузки
+  event.target.style.display = 'none';
+}
+
+function formatDate(dateString) {
+  if (!dateString) return '—';
+  const date = new Date(dateString);
+  return date.toLocaleString('ru-RU', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function openMessageDialog(customer) {
+  selectedCustomer.value = customer;
+  messageText.value = '';
+  showMessageDialog.value = true;
+}
+
+function closeMessageDialog() {
+  showMessageDialog.value = false;
+  selectedCustomer.value = null;
+  messageText.value = '';
+}
+
+async function sendMessage() {
+  if (!selectedCustomer.value || !messageText.value.trim()) {
+    return;
+  }
+
+  if (!selectedCustomer.value.allows_write_to_pm) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Предупреждение',
+      detail: 'Пользователь не разрешил писать ему в PM',
+      life: 3000,
+    });
+    return;
+  }
+
+  sendingMessage.value = true;
+  try {
+    const result = await apiPost('sendMessageToCustomer', {
+      id: selectedCustomer.value.id,
+      message: messageText.value.trim(),
+    });
+
+    if (result.success && result.data?.success) {
+      toast.add({
+        severity: 'success',
+        summary: 'Успешно',
+        detail: result.data?.message || 'Сообщение отправлено',
+        life: 3000,
+      });
+      closeMessageDialog();
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: 'Ошибка',
+        detail: result.data?.error || result.error || 'Не удалось отправить сообщение',
+        life: 3000,
+      });
+    }
+  } catch (error) {
+    console.error('Ошибка при отправке сообщения:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка',
+      detail: 'Произошла ошибка при отправке сообщения',
+      life: 3000,
+    });
+  } finally {
+    sendingMessage.value = false;
+  }
+}
+
+onMounted(() => {
+  loadCustomers();
+});
+</script>
+
+