portal/app/resources/js/views/admin/AdminTgView.vue

<script setup lang="ts">
/**
 * SaaS-admin → «Клиентская Telegram-реклама»: тарифная сетка (ступени ₽ за показ).
 * План §Сессия 4, задача 4.4. Лаконичное зеркало AdminSmsView.
 */
import { onMounted, ref } from 'vue';
import { fetchTgTariffs, updateTgTariffs, type AdminTgTariff } from '../../api/admin';

const tariffs = ref<AdminTgTariff[]>([]);

const loadError = ref(false);
const tariffsSaving = ref(false);
const tariffsSaved = ref(false);

async function load(): Promise<void> {
    loadError.value = false;
    try {
        const data = await fetchTgTariffs();
        tariffs.value = data.tariffs;
    } catch {
        loadError.value = true;
    }
}

function addRow(): void {
    tariffs.value.push({ id: 0, min_qty: 1, price_rub: '0.00' });
}

function removeRow(index: number): void {
    tariffs.value.splice(index, 1);
}

async function saveTariffs(): Promise<void> {
    tariffsSaving.value = true;
    tariffsSaved.value = false;
    try {
        const rows = tariffs.value.map((t) => ({
            min_qty: Number(t.min_qty),
            price_rub: String(t.price_rub),
        }));
        const res = await updateTgTariffs(rows);
        tariffs.value = res.tariffs;
        tariffsSaved.value = true;
    } finally {
        tariffsSaving.value = false;
    }
}

onMounted(load);
</script>

<template>
    <div class="admin-tg">
        <h1 class="text-h5 mb-4">Клиентская Telegram-реклама</h1>

        <v-alert
            v-if="loadError"
            type="error"
            variant="tonal"
            class="mb-4"
            data-testid="tg-tariffs-error"
        >
            Не удалось загрузить тарифы. Обновите страницу.
        </v-alert>

        <!-- Тарифная сетка: ступени ₽ за показ по объёму. -->
        <v-card class="mb-6" data-testid="tg-tariffs-card">
            <v-card-title>Ступени тарифа (₽ за показ)</v-card-title>
            <v-card-text>
                <p class="text-body-2 text-medium-emphasis mb-3">
                    Итоговую стоимость показа считает кабинет МТС — эта сетка нужна для сметы
                    в интерфейсе клиента и лимита на объявление.
                </p>
                <div
                    v-for="(row, i) in tariffs"
                    :key="i"
                    class="d-flex align-center ga-3 mb-2"
                    :data-testid="`tg-tariff-row-${i}`"
                >
                    <v-text-field
                        v-model.number="row.min_qty"
                        label="От объёма (шт.)"
                        type="number"
                        density="compact"
                        hide-details
                        style="max-width: 180px"
                    />
                    <v-text-field
                        v-model="row.price_rub"
                        label="₽ за показ"
                        density="compact"
                        hide-details
                        style="max-width: 160px"
                    />
                    <v-btn
                        icon="mdi-delete-outline"
                        variant="text"
                        size="small"
                        :data-testid="`tg-tariff-remove-${i}`"
                        @click="removeRow(i)"
                    />
                </div>
                <v-btn
                    variant="text"
                    prepend-icon="mdi-plus"
                    data-testid="tg-tariff-add"
                    @click="addRow"
                >
                    Добавить ступень
                </v-btn>
            </v-card-text>
            <v-card-actions>
                <v-btn
                    color="primary"
                    :loading="tariffsSaving"
                    data-testid="tg-tariffs-save"
                    @click="saveTariffs"
                >
                    Сохранить тарифы
                </v-btn>
                <span v-if="tariffsSaved" class="text-success text-body-2 ml-3">Сохранено</span>
            </v-card-actions>
        </v-card>
    </div>
</template>