service_monitoring/front/pages/bx/tg.vue

<script setup lang="ts">
const config = useRuntimeConfig()

interface APIBody {
    data: {
        "id": number,
        "is_bot": boolean,
        "first_name": string,
        "username": string,
    },
    status: 'success' | 'error'
}

const steps = ['get_me', 'get_user_id', 'get_bx', "end_step"]

const { data, pending, error, status } = await useLazyFetch<APIBody>(`${config.public.apiBase}/api/tg/get_me`, { server: false })

const step = ref<typeof steps[number]>('get_me')
const passed_step = ref<typeof steps>([])
const shown_steps = ref<typeof steps>(['get_me'])
const loading = ref<boolean>(false)
const disabled = ref<boolean>(false)

const tg_data = ref<any>()
const bx_data = ref<any>()

const selected_tg = ref()
const selected_bx = ref()

const isShown = (step: typeof steps[number]) => {
    return shown_steps.value.includes(step)
}
const isPassed = (step: typeof steps[number]) => {
    return [{ 'line-through': passed_step.value.includes(step) }]
}

const passToStep = (stepName: typeof steps[number]) => {
    try {
        if (!passed_step.value.includes(step.value)) passed_step.value.push(step.value)
        if (!shown_steps.value.includes(stepName)) shown_steps.value.push(stepName)
        step.value = stepName
    } catch (error) {
        console.log(error)
    }
}

const nextStep = async () => {
    if (step.value == 'get_me') {
        await retryStep('get_user_id')
        passToStep('get_user_id')
    }
    else if (step.value == 'get_user_id') {
        await retryStep('get_bx')
        passToStep('get_bx')
    }
    else if (step.value == 'get_bx') {
        if (!selected_bx.value) {
            return
        }
        await retryStep('end_step')
        passToStep('end_step')
    }
}
const retryStep = async (stepName: typeof steps[number]) => {
    if (stepName == 'get_user_id') {
        loading.value = true
        const tg_res = await $fetch<APIBody>(`${config.public.apiBase}/api/tg/get_updates`)
        tg_data.value = tg_res.data
        loading.value = false
    }
    else if (stepName == 'get_bx') {
        loading.value = true
        selected_tg.value = tg_data.value[0].message.chat.id
        const bx_res = await $fetch<APIBody>(`${config.public.apiBase}/api/bx/get_users`)
        bx_data.value = bx_res.data
        loading.value = false
    }
}

const copyOnClick = (e:Event) => {
    navigator.clipboard.writeText(e.currentTarget.textContent)
}
</script>
<template>
    <UCard v-if="!pending && data">
        <template #header>
            Для получения уведомлений в тг при пинге в битриксе:
        </template>
        <ol class="list-decimal pl-4">
            <li :class="isPassed('get_me')" v-if="isShown('get_me')">
                Напишите боту <ULink :external="true" target="_blank"
                    :to="`https://t.me/${data.data.username}?start=service_monitoring`">@{{
                        data.data.username }}
                </ULink> (это ссылка)
            </li>
            <li :class="isPassed('get_user_id')" v-if="isShown('get_user_id') && tg_data">
                Ваши данные пользователя. Нажмите зеленую кнопку, если все верно:
                <ul>
                    <li v-for="item in tg_data.slice(0, 1)">
                        Имя: {{ [item.message.chat.first_name, item.message.chat.last_name,
                        item.message.chat.username].filter(Boolean).join(' ') }}<br />
                        ID: <code class="code" @click="copyOnClick">{{ item.message.chat.id }}</code>
                    </li>
                </ul>
            </li>
            <li :class="isPassed('get_bx')" v-if="isShown('get_bx') && bx_data">
                Ваши данные в битриксе. Выберите свой профиль :)
                <USelectMenu clear-search-on-close class="w-full lg:w-48" placeholder="Ваш аккаунт" searchable
                    searchable-placeholder="Искать..." :options="bx_data
                        .sort((a: any, b: any) => a.LAST_NAME.localeCompare(b.LAST_NAME))
                        .map((el: any) => { return { id: el.ID, label: [el.NAME, el.LAST_NAME].join(' ') } })"
                    size="lg" v-model="selected_bx" :disabled="passed_step.includes('get_bx')" />
            </li>
            <li :class="isPassed('end_step')" v-if="shown_steps.includes('end_step')">
                <p>
                    Вот ваша ссылка для формирования вебхука
                    <code @click="copyOnClick">https://gi.svs-tech.pro/integration_tg/{{ selected_bx.id }}/{{ selected_tg }}</code>
                </p>
                <p>
                    Теперь вам осталось <ULink to="https://crm.svs-tech.pro/devops/section/standard/" target="_blank">
                        создать исходящий вебхук</ULink> в Битрикс24.
                </p>
                <p>
                    Вставьте туда этот урл и укажите События <i>Добавление комментария к задаче (ONTASKCOMMENTADD)</i>
                </p>
            </li>
        </ol>
        <template #footer>
            <div class="flex gap-4">
                <UButton color="orange" v-if="['get_user_id'].includes(step)" @click="retryStep(step)"
                    :loading="loading" :disabled="disabled">Ошибка в данных
                </UButton>
                
                <UButton v-if="step !== 'end_step'" :loading="loading" :disabled="disabled || (step == 'get_bx' && !selected_bx)"
                    @click="nextStep">
                    Сделано</UButton>

                <p v-if="step=='end_step'">Вот и все!</p>
            </div>
        </template>
    </UCard>
</template>