@andrey4emk/npm-app-front-b24 0.1.20 → 0.3.0

package/ConfigLogs.vue

@@ -0,0 +1,402 @@
+<template>
+    <div class="config-logs">
+        <h2 class="config-logs__title">Уровни логирования</h2>
+
+        <div v-if="loading" class="config-logs__loading">Загрузка...</div>
+
+        <div v-else-if="error" class="config-logs__error">
+            <p>{{ error }}</p>
+            <button @click="loadConfig">Повторить</button>
+        </div>
+
+        <div v-else>
+            <table class="config-logs__table">
+                <thead>
+                    <tr>
+                        <th>Уровень</th>
+                        <th>Включён</th>
+                        <th>JSON-формат</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="level in levels" :key="level.key">
+                        <td>
+                            <span class="config-logs__level-name">{{ level.label }}</span>
+                            <span class="config-logs__level-key">{{ level.key }}</span>
+                        </td>
+                        <td>
+                            <label class="config-logs__switch">
+                                <input
+                                    type="checkbox"
+                                    v-model="config[level.key].enabled"
+                                />
+                                <span class="config-logs__slider"></span>
+                            </label>
+                        </td>
+                        <td>
+                            <label class="config-logs__switch">
+                                <input
+                                    type="checkbox"
+                                    v-model="config[level.key].json"
+                                />
+                                <span class="config-logs__slider"></span>
+                            </label>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div class="config-logs__actions">
+                <button @click="saveConfig" :disabled="loading || saving">
+                    {{ saving ? "Сохранение..." : "Сохранить" }}
+                </button>
+                <button @click="loadConfig" :disabled="loading || saving">Обновить</button>
+            </div>
+
+            <div v-if="message" :class="['config-logs__message', messageType === 'ok' ? 'config-logs__message--success' : 'config-logs__message--error']">
+                {{ message }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+
+const props = defineProps({
+    apiBase: {
+        type: String,
+        default: "",
+    },
+    secretKey: {
+        type: String,
+        default: "",
+    },
+    configName: {
+        type: String,
+        default: "log",
+    },
+});
+
+const levels = [
+    { key: "trace", label: "Трассировка" },
+    { key: "debug", label: "Отладка" },
+    { key: "info", label: "Информация" },
+    { key: "warn", label: "Предупреждения" },
+    { key: "error", label: "Ошибки" },
+];
+
+const config = reactive({
+    trace: { enabled: false, json: true, color: "" },
+    debug: { enabled: true, json: true, color: "" },
+    info: { enabled: true, json: true, color: "" },
+    warn: { enabled: true, json: true, color: "" },
+    error: { enabled: true, json: true, color: "" },
+});
+
+const loading = ref(false);
+const saving = ref(false);
+const error = ref("");
+const message = ref("");
+const messageType = ref("ok");
+
+function getHeaders() {
+    const headers = { "Content-Type": "application/json" };
+    if (props.secretKey) {
+        headers.secret = props.secretKey;
+    }
+    return headers;
+}
+
+function getUrl() {
+    const base = props.apiBase.replace(/\/+$/, "");
+    return `${base}/api/config/${props.configName}`;
+}
+
+// Разбирает тело ответа: JSON — объект, любой другой Content-Type — null.
+// Отдельная функция нужна, потому что сервер на неизвестный маршрут отвечает
+// HTML-страницей с кодом 200, и слепой res.json() падает с невнятной ошибкой
+async function parseJsonBody(res) {
+    const contentType = res.headers.get("content-type") || "";
+    if (!contentType.includes("application/json")) {
+        return null;
+    }
+    try {
+        return await res.json();
+    } catch {
+        return null;
+    }
+}
+
+// Текст ошибки по HTTP-статусу. Если сервер прислал message — он попадает в текст
+// при любом коде, включая 401/403 и 5xx: иначе причина отказа теряется
+function httpErrorText(res, json) {
+    if (res.status === 401 || res.status === 403) {
+        return json?.message
+            ? `Нет доступа (${res.status}): ${json.message}`
+            : "Нет доступа, проверьте secretKey";
+    }
+    if (res.status >= 500) {
+        return json?.message
+            ? `Ошибка на сервере (${res.status}): ${json.message}`
+            : `Ошибка на сервере (${res.status})`;
+    }
+    const detail = json?.message ? `: ${json.message}` : "";
+    return `Ошибка запроса (${res.status})${detail}`;
+}
+
+// Раскладывает пришедший конфиг по реактивным уровням
+function applyConfig(data) {
+    for (const level of levels) {
+        if (!data[level.key]) continue;
+        config[level.key].enabled = data[level.key].enabled ?? false;
+        config[level.key].json = data[level.key].json ?? true;
+        config[level.key].color = data[level.key].color ?? "";
+    }
+}
+
+async function loadConfig() {
+    // Пока идёт загрузка или сохранение, повторный запуск запрещён:
+    // иначе ответы двух запросов затирают друг друга
+    if (loading.value || saving.value) return;
+
+    loading.value = true;
+    error.value = "";
+    message.value = "";
+
+    try {
+        const res = await fetch(getUrl(), { headers: getHeaders() });
+        const json = await parseJsonBody(res);
+
+        if (!res.ok) {
+            error.value = httpErrorText(res, json);
+            return;
+        }
+        if (!json) {
+            error.value = "Неожиданный ответ сервера: тело не JSON. Проверьте apiBase";
+            return;
+        }
+        if (json.status !== "ok" || !json.data) {
+            error.value = json.message || "Не удалось загрузить конфиг";
+            return;
+        }
+
+        applyConfig(json.data);
+    } catch (e) {
+        // Сюда попадает только сбой сети: fetch не бросает на 4xx и 5xx
+        error.value = `Сервер недоступен: ${e.message}`;
+    } finally {
+        loading.value = false;
+    }
+}
+
+async function saveConfig() {
+    // Пока идёт загрузка или сохранение, повторный запуск запрещён:
+    // иначе ответы двух запросов затирают друг друга
+    if (loading.value || saving.value) return;
+
+    saving.value = true;
+    message.value = "";
+
+    const payload = {};
+    for (const level of levels) {
+        payload[level.key] = {
+            enabled: config[level.key].enabled,
+            color: config[level.key].color,
+            json: config[level.key].json,
+        };
+    }
+
+    try {
+        const res = await fetch(getUrl(), {
+            method: "POST",
+            headers: getHeaders(),
+            body: JSON.stringify(payload),
+        });
+        const json = await parseJsonBody(res);
+
+        if (!res.ok) {
+            message.value = httpErrorText(res, json);
+            messageType.value = "error";
+            return;
+        }
+        if (!json) {
+            message.value = "Неожиданный ответ сервера: тело не JSON. Проверьте apiBase";
+            messageType.value = "error";
+            return;
+        }
+        if (json.status !== "ok") {
+            message.value = json.message || "Ошибка сохранения";
+            messageType.value = "error";
+            return;
+        }
+
+        message.value = json.message || "Конфиг сохранён";
+        messageType.value = "ok";
+    } catch (e) {
+        message.value = `Сервер недоступен: ${e.message}`;
+        messageType.value = "error";
+    } finally {
+        saving.value = false;
+    }
+}
+
+onMounted(() => {
+    loadConfig();
+});
+</script>
+
+<style>
+.config-logs {
+    margin: 20px 0;
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background: #fafafa;
+}
+
+.config-logs__title {
+    margin: 0 0 16px 0;
+    font-size: 18px;
+}
+
+.config-logs__loading,
+.config-logs__error {
+    padding: 12px;
+    text-align: center;
+}
+
+.config-logs__error {
+    color: #d32f2f;
+}
+
+.config-logs__table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 16px;
+}
+
+.config-logs__table th,
+.config-logs__table td {
+    padding: 10px 12px;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+}
+
+.config-logs__table th {
+    font-weight: 600;
+    color: #555;
+    font-size: 13px;
+    text-transform: uppercase;
+}
+
+.config-logs__level-name {
+    display: block;
+    font-weight: 500;
+}
+
+.config-logs__level-key {
+    display: block;
+    font-size: 12px;
+    color: #888;
+    font-family: monospace;
+}
+
+.config-logs__switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+}
+
+.config-logs__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.config-logs__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.3s;
+    border-radius: 24px;
+}
+
+.config-logs__slider::before {
+    content: "";
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: #fff;
+    transition: 0.3s;
+    border-radius: 50%;
+}
+
+.config-logs__switch input:checked + .config-logs__slider {
+    background-color: #4caf50;
+}
+
+.config-logs__switch input:checked + .config-logs__slider::before {
+    transform: translateX(20px);
+}
+
+.config-logs__actions {
+    display: flex;
+    gap: 8px;
+}
+
+.config-logs__actions button {
+    padding: 8px 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.2s;
+}
+
+.config-logs__actions button:hover:not(:disabled) {
+    background: #f0f0f0;
+}
+
+.config-logs__actions button:first-child {
+    background: #4caf50;
+    color: #fff;
+    border-color: #4caf50;
+}
+
+.config-logs__actions button:first-child:hover:not(:disabled) {
+    background: #43a047;
+}
+
+.config-logs__actions button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.config-logs__message {
+    margin-top: 12px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.config-logs__message--success {
+    background: #e8f5e9;
+    color: #2e7d32;
+    border: 1px solid #a5d6a7;
+}
+
+.config-logs__message--error {
+    background: #ffebee;
+    color: #c62828;
+    border: 1px solid #ef9a9a;
+}
+</style>

package/README.md

@@ -1,27 +1,154 @@
-Установка:
+# @andrey4emk/npm-app-front-b24
+
+Vue 3 компоненты для Bitrix24.
+
+## Установка
 
 ```bash
 npm install @andrey4emk/npm-app-front-b24
 ```
 
-Внимание по стилям: пакет содержит отдельный CSS-файл `dist/style.css`. Есть три варианта подключить стили в проекте-потребителе:
+## Компоненты
 
-1. Явно импортировать CSS вместе с компонентом:
+### Subscriptions
 
-```js
-import "@andrey4emk/npm-app-front-b24/dist/style.css";
-import { Subscriptions } from "@andrey4emk/npm-app-front-b24";
+Управление подписками на события и оффлайн-очередью событий Bitrix24: список подписок,
+подписка и отписка, просмотр и очистка оффлайн-сущностей, повторная запись сущности
+с последующим снятием из очереди.
+
+```vue
+<script setup>
+import Subscriptions from "@andrey4emk/npm-app-front-b24/Subscriptions.vue";
+</script>
+
+<template>
+    <Subscriptions />
+</template>
+```
+
+**Props:**
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|-------------|----------|
+| `b24` | Object | `null` | Клиент Bitrix24 REST API (`B24Frame` из `@bitrix24/b24jssdk`) |
+| `authConnector` | String | `""` | Значение `auth_connector` для методов работы с событиями |
+| `portalDomain` | String | `""` | Адрес портала для ссылок на сущности, `portal.bitrix24.ru` или с `https://` |
+
+Клиент ищется в таком порядке: prop `b24`, затем `inject("$b24")` (если приложение сделало
+`app.provide("$b24", client)`), затем глобальный `window.$b24`. Без клиента компонент показывает
+сообщение «Клиент Bitrix24 не инициализирован» и не падает.
+
+Адрес портала без `portalDomain` берётся из `client.getTargetOrigin()`, а если его нет, из
+`client.auth.getAuthData().domain`.
+
+Состояние вкладок хранится внутри компонента, глобальный миксин с `tabs` и `selectTab` больше
+не нужен.
+
+### ConfigLogs
+
+Управление уровнями логирования через `config/log.json` на сервере.
+
+```vue
+<script setup>
+import ConfigLogs from "@andrey4emk/npm-app-front-b24/ConfigLogs.vue";
+</script>
+
+<template>
+    <ConfigLogs api-base="" :secret-key="secretKey" />
+</template>
 ```
 
-2. Использовать удобный короткий импорт (поддерживается):
+**Props:**
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|-------------|----------|
+| `apiBase` | String | `""` | Базовый URL сервера |
+| `secretKey` | String | `""` | Ключ авторизации (заголовок `secret`) |
+| `configName` | String | `"log"` | Имя конфига (без `.json`) |
+
+Компонент ходит на `GET` и `POST` `${apiBase}/api/config/${configName}` и ждёт JSON вида
+`{ status: "ok", data: {...} }`. Ошибки сети, ответы 401/403 и 5xx и не-JSON тела показываются
+пользователю с кодом и текстом сервера.
+
+## Стили
+
+Стили компонентов глобальные, без `scoped`, классы с префиксами `subscriptions__*` и
+`config-logs__*`. Их можно переопределять из CSS приложения по имени класса.
+
+В `Subscriptions` старые имена классов `tooltip`, `tooltipParent`, `switch`, `slider` остаются
+на элементах вторым классом ради совместимости со стилями потребителей. Они будут сняты
+в следующей minor-версии.
+
+## Типы
+
+Пакет содержит `index.d.ts` с объявлениями props обоих компонентов. Чтобы TypeScript
+потребителя (Vite + vue-tsc) их подхватил, подключите объявления явно, иначе сработает общий
+shim для `*.vue` и props станут `any`:
+
+```ts
+// env.d.ts
+/// <reference types="@andrey4emk/npm-app-front-b24" />
+```
+
+или в `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "types": ["@andrey4emk/npm-app-front-b24"]
+    }
+}
+```
+
+## Требования
+
+- Vue 3 (`^3.0.0`) — peer dependency
+- Проект-потребитель должен поддерживать компиляцию `.vue` файлов (Vite / webpack + vue-loader)
+
+Других зависимостей нет: даты форматируются через `Intl.DateTimeFormat`.
+
+## История версий
+
+### 0.3.0
+
+- `Subscriptions`: состояние вкладок внутри компонента, props `b24`, `authConnector`,
+  `portalDomain`, адрес портала из клиента вместо захардкоженного домена, ссылки на
+  смарт-процессы
+- `Subscriptions`: починены «Изменить» для смарт-процессов и «Удалить все», автообновление
+  останавливается при уходе со страницы, ошибки показываются на экране, подтверждение
+  удаления вторым кликом вместо `confirm()`
+- `ConfigLogs`: разбор ответа сервера с проверкой `res.ok` и Content-Type
+- Классы стилей с префиксами, добавлены стили тумблера
+- Снята зависимость `luxon`
+- Добавлен `index.d.ts` с типами props
+
+### 0.2.0
+
+Пакет поставляет исходные `.vue` файлы вместо скомпилированного бандла. Компиляция
+происходит на стороне проекта-потребителя. При обновлении с `0.1.x` измените импорты:
 
 ```js
-import "@andrey4emk/npm-app-front-b24/style.css";
+// Было (0.1.x)
 import { Subscriptions } from "@andrey4emk/npm-app-front-b24";
+import "@andrey4emk/npm-app-front-b24/style.css";
+
+// Стало (0.2.0+)
+import Subscriptions from "@andrey4emk/npm-app-front-b24/Subscriptions.vue";
 ```
 
-Рекомендация: импортируйте CSS явно. Поскольку библиотека выделяет стили в отдельный файл `dist/style.css`, автоматическое применение стилей при простом импорте JS не гарантируется во всех окружениях. Самые надёжные варианты:
+## Публикация
+
+Версия по semver: `patch` для исправлений, `minor` для новых функций, `major` для ломающих
+изменений.
+
+```bash
+git add .
+git commit -m "upd(client): описание"
+npm version minor          # или patch / major
+git push origin main --follow-tags
+npm publish --access public
+npm info @andrey4emk/npm-app-front-b24 version
+```
 
--   `import '@andrey4emk/npm-app-front-b24/style.css'` — короткий импорт (рекомендую);
--   `import '@andrey4emk/npm-app-front-b24/dist/style.css'` — явный путь к файлу;
--   подключение через `<link>` в `index.html`.
+Если `npm publish` отвечает 403: проверить `npm whoami`, при необходимости `npm login`,
+для scoped-пакета флаг `--access public` обязателен.