Trim profile param flow to AddBlock-only write path

shine-UI/js/pages/profile-view.js

@@ -3,27 +3,21 @@ import { profile } from '../mock-data.js?v=20260405171816';
 import { state } from '../state.js?v=20260405171816';
 import {
   loadProfileSnapshot,
-  profileFieldDefs,
-  saveProfileParams,
+  saveProfileParamBlock,
   saveProfileToggle,
 } from '../services/user-profile-params.js?v=20260405171816';
 
 export const pageMeta = { id: 'profile-view', title: 'Профиль' };
 
-function formatDateTime(timeMs) {
-  if (!timeMs) return 'ещё не заполнено';
-  return new Date(timeMs).toLocaleString('ru-RU');
-}
-
-function getDisplayName(fieldMap) {
-  const firstName = fieldMap.get('first_name')?.value?.trim() || '';
-  const lastName = fieldMap.get('last_name')?.value?.trim() || '';
+function getDisplayName(fields) {
+  const firstName = fields.find((field) => field.key === 'first_name')?.value?.trim() || '';
+  const lastName = fields.find((field) => field.key === 'last_name')?.value?.trim() || '';
   const fullName = `${firstName} ${lastName}`.trim();
   return fullName || profile.name;
 }
 
 function toggleText(enabled) {
-  return enabled ? 'yes' : 'no';
+  return enabled ? 'Yes' : 'No';
 }
 
 export function render({ navigate }) {
@@ -55,21 +49,21 @@ export function render({ navigate }) {
         <p class="meta-muted">${login}</p>
       </div>
     </div>
-    <button class="primary-btn" type="button" data-open-edit="true">Обновить</button>
+    <button class="primary-btn" type="button" data-reload="true">Обновить</button>
   `;
 
   const badgesRow = document.createElement('div');
   badgesRow.className = 'row';
   badgesRow.innerHTML = `
-    <button class="badge profile-toggle-btn" type="button" data-toggle="official">✔ Официальный: no</button>
-    <button class="badge alt profile-toggle-btn" type="button" data-toggle="shine">✨ Сияющий: no</button>
+    <button class="badge profile-toggle-btn is-no" type="button" data-toggle="official">Официальный: No</button>
+    <button class="badge profile-toggle-btn is-no" type="button" data-toggle="shine">Сияющий: No</button>
   `;
 
   const hint = document.createElement('div');
   hint.className = 'card profile-data-help';
   hint.innerHTML = `
     <div class="meta-muted">Личные данные пользователя</div>
-    <p>Поля ниже читаются из реальных пользовательских параметров сервера (ListUserParams). Любое изменение отправляется как блокчейн-запись параметра и требует подпись ключом пользователя.</p>
+    <p>Параметры читаются через API GetUserParam. Изменения записываются в блокчейн и после этого список сразу обновляется.</p>
   `;
 
   const status = document.createElement('div');
@@ -79,65 +73,48 @@ export function render({ navigate }) {
   const listWrap = document.createElement('div');
   listWrap.className = 'stack profile-param-list';
 
-  const editModal = document.createElement('div');
-  editModal.className = 'profile-help-modal';
-  editModal.hidden = true;
-  editModal.innerHTML = `
-    <div class="profile-help-backdrop" data-close="true"></div>
-    <div class="profile-help-dialog card" role="dialog" aria-modal="true" aria-labelledby="profile-edit-title" tabindex="-1">
-      <div class="row" style="align-items:flex-start;">
-        <div>
-          <div class="meta-muted" style="margin-bottom:4px;">Обновление личных данных</div>
-          <h3 id="profile-edit-title" style="font-size:18px;">Редактирование профиля</h3>
-        </div>
-        <button class="icon-btn profile-help-close" type="button" aria-label="Закрыть">✕</button>
-      </div>
-      <p class="profile-help-text">После сохранения по каждому полю отправляется запись параметра в блокчейн. Для подписи используется ключ пользователя на устройстве.</p>
-      <form class="stack" data-profile-form="true"></form>
-      <div class="row">
-        <button class="ghost-btn" type="button" data-cancel-edit="true">Отмена</button>
-        <button class="primary-btn" type="button" data-save-profile="true">Сохранить</button>
-      </div>
-    </div>
-  `;
-
   const profileNameEl = topRow.querySelector('[data-profile-name="true"]');
-  const openEditBtn = topRow.querySelector('[data-open-edit="true"]');
+  const reloadBtn = topRow.querySelector('[data-reload="true"]');
   const officialBtn = badgesRow.querySelector('[data-toggle="official"]');
   const shineBtn = badgesRow.querySelector('[data-toggle="shine"]');
-  const formEl = editModal.querySelector('[data-profile-form="true"]');
-  const dialogEl = editModal.querySelector('.profile-help-dialog');
-  const saveBtn = editModal.querySelector('[data-save-profile="true"]');
 
-  let currentFields = profileFieldDefs.map((field) => ({ ...field, value: '', timeMs: 0 }));
-  let currentToggles = [
-    { key: 'official', enabled: false, timeMs: 0 },
-    { key: 'shine', enabled: false, timeMs: 0 },
-  ];
+  let currentFields = [];
+  let currentToggles = [];
+
+  function updateToggleButton(button, prefix, enabled) {
+    button.textContent = `${prefix}: ${toggleText(enabled)}`;
+    button.classList.remove('is-no', 'is-yes-official', 'is-yes-shine');
+
+    if (!enabled) {
+      button.classList.add('is-no');
+      return;
+    }
+
+    if (prefix === 'Официальный') {
+      button.classList.add('is-yes-official');
+    } else {
+      button.classList.add('is-yes-shine');
+    }
+  }
 
   function updateTogglesUi() {
     const official = currentToggles.find((item) => item.key === 'official') || { enabled: false };
     const shine = currentToggles.find((item) => item.key === 'shine') || { enabled: false };
-
-    officialBtn.textContent = `✔ Официальный: ${toggleText(official.enabled)}`;
-    shineBtn.textContent = `✨ Сияющий: ${toggleText(shine.enabled)}`;
+    updateToggleButton(officialBtn, 'Официальный', official.enabled);
+    updateToggleButton(shineBtn, 'Сияющий', shine.enabled);
   }
 
   function renderFields(fields) {
-    const fieldMap = new Map(fields.map((field) => [field.key, field]));
-    profileNameEl.textContent = getDisplayName(fieldMap);
+    profileNameEl.textContent = getDisplayName(fields);
 
     listWrap.innerHTML = '';
     fields.forEach((field) => {
       const row = document.createElement('div');
-      row.className = 'card profile-param-item';
+      row.className = 'card profile-param-item row';
+      const value = String(field.value || '').trim() || 'не заполнено';
       row.innerHTML = `
-        <div class="profile-param-head">
-          <span class="meta-muted">${field.label}</span>
-          <span class="meta-muted">${field.key}</span>
-        </div>
-        <div class="profile-param-value">${field.value || '—'}</div>
-        <div class="meta-muted profile-param-time">Обновлено: ${formatDateTime(field.timeMs)}</div>
+        <div class="profile-param-value"><b>${field.label}</b>: ${value}</div>
+        <button class="ghost-btn" type="button" data-edit-field="${field.key}">Изменить</button>
       `;
       listWrap.append(row);
     });
@@ -146,7 +123,7 @@ export function render({ navigate }) {
   async function refreshProfileSnapshot() {
     status.className = 'status-line';
     status.textContent = 'Загрузка параметров...';
-    openEditBtn.disabled = true;
+    reloadBtn.disabled = true;
     officialBtn.disabled = true;
     shineBtn.disabled = true;
 
@@ -154,77 +131,35 @@ export function render({ navigate }) {
       const snapshot = await loadProfileSnapshot(login);
       currentFields = snapshot.fields;
       currentToggles = snapshot.toggles;
-      renderFields(snapshot.fields);
-      updateTogglesUi();
-      status.className = 'status-line is-available';
-      status.textContent = 'Актуальные параметры загружены с сервера.';
-    } catch (error) {
+
       renderFields(currentFields);
       updateTogglesUi();
+
+      status.className = 'status-line is-available';
+      status.textContent = 'Актуальные параметры загружены.';
+    } catch (error) {
       status.className = 'status-line is-unavailable';
       status.textContent = `Не удалось загрузить параметры: ${error.message || 'ошибка сети'}`;
     } finally {
-      openEditBtn.disabled = false;
+      reloadBtn.disabled = false;
       officialBtn.disabled = false;
       shineBtn.disabled = false;
     }
   }
 
-  function closeEditModal() {
-    editModal.hidden = true;
-  }
-
-  function openEditModal() {
-    formEl.innerHTML = '';
-
-    currentFields.forEach((field) => {
-      const fieldWrap = document.createElement('label');
-      fieldWrap.className = 'stack';
-      fieldWrap.innerHTML = `
-        <span class="field-label">${field.label}</span>
-        <input class="input" type="text" name="${field.key}" placeholder="${field.placeholder || ''}" value="${field.value || ''}" />
-      `;
-      formEl.append(fieldWrap);
-    });
-
-    editModal.hidden = false;
-    dialogEl.focus();
-  }
-
-  async function saveChanges() {
-    const valuesByKey = {};
-    currentFields.forEach((field) => {
-      const input = formEl.querySelector(`input[name="${field.key}"]`);
-      valuesByKey[field.key] = input instanceof HTMLInputElement ? input.value : '';
-    });
-
-    saveBtn.disabled = true;
-    try {
-      await saveProfileParams(login, valuesByKey);
-      closeEditModal();
-      await refreshProfileSnapshot();
-    } catch (error) {
-      status.className = 'status-line is-unavailable';
-      status.textContent = `Не удалось сохранить: ${error.message || 'ошибка сети'}`;
-    } finally {
-      saveBtn.disabled = false;
-    }
-  }
-
   async function onToggleClick(toggleKey) {
     const toggle = currentToggles.find((item) => item.key === toggleKey) || { enabled: false };
     const nextEnabled = !toggle.enabled;
-    const title = toggleKey === 'official' ? 'Официальный аккаунт' : 'Сияющий аккаунт';
+    const title = toggleKey === 'official' ? 'официальный' : 'сияющий';
 
     const confirmed = window.confirm(
-      `Изменить параметр «${title}» на ${toggleText(nextEnabled)}?\n\n` +
-      'Внимание: изменение будет записано как блокчейн-параметр пользователя и требует подписи ключом блокчейна/пользователя на устройстве.',
+      `Хотите изменить «${title}» на ${toggleText(nextEnabled)}?\n` +
+      'Будет создана запись в блокчейне.',
     );
-
     if (!confirmed) return;
 
     status.className = 'status-line';
-    status.textContent = 'Отправка изменения в блокчейн...';
+    status.textContent = 'Сохранение в блокчейн...';
 
     try {
       await saveProfileToggle(login, toggleKey, nextEnabled);
@@ -235,25 +170,44 @@ export function render({ navigate }) {
     }
   }
 
-  openEditBtn.addEventListener('click', openEditModal);
-  saveBtn.addEventListener('click', saveChanges);
+  async function onEditFieldClick(fieldKey) {
+    const field = currentFields.find((item) => item.key === fieldKey);
+    if (!field) return;
+
+    const entered = window.prompt(`Введите новое значение для «${field.label}»:`, field.value || '');
+    if (entered === null) return;
+
+    const confirmed = window.confirm(
+      `Записать новое значение параметра «${field.label}» в блокчейн?`,
+    );
+    if (!confirmed) return;
+
+    status.className = 'status-line';
+    status.textContent = 'Сохранение в блокчейн...';
+
+    try {
+      await saveProfileParamBlock(login, field.key, entered);
+      await refreshProfileSnapshot();
+    } catch (error) {
+      status.className = 'status-line is-unavailable';
+      status.textContent = `Не удалось изменить ${field.key}: ${error.message || 'ошибка сети'}`;
+    }
+  }
+
+  listWrap.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    const fieldKey = target.dataset.editField;
+    if (!fieldKey) return;
+    onEditFieldClick(fieldKey);
+  });
+
+  reloadBtn.addEventListener('click', refreshProfileSnapshot);
   officialBtn.addEventListener('click', () => onToggleClick('official'));
   shineBtn.addEventListener('click', () => onToggleClick('shine'));
-  editModal.querySelector('[data-cancel-edit="true"]').addEventListener('click', closeEditModal);
-
-  editModal.addEventListener('click', (event) => {
-    const target = event.target;
-    if (target instanceof HTMLElement && (target.dataset.close === 'true' || target.classList.contains('profile-help-close'))) {
-      closeEditModal();
-    }
-  });
-
-  editModal.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') closeEditModal();
-  });
 
   card.append(topRow, badgesRow, hint, status, listWrap);
-  screen.append(card, editModal);
+  screen.append(card);
 
   refreshProfileSnapshot();