ui: split wizard state and shell logic
This commit is contained in:
a.tolmachev
+13
-239
@@ -1,247 +1,18 @@
|
||||
var currentStep = 1;
|
||||
var TOTAL_STEPS = 5;
|
||||
var wizardProtocol = 'rest'; // 'rest' | 'graphql' | 'grpc' | 'websocket' | 'soap'
|
||||
var wizardMode = 'create'; // 'create' | 'edit'
|
||||
var wizardEditId = null;
|
||||
var wizardWorkspaceId = null;
|
||||
var wizardCurrentOperation = null;
|
||||
var wizardCurrentVersion = null;
|
||||
var wizardProtoUpload = null;
|
||||
var wizardDescriptorSetUpload = null;
|
||||
var wizardSoapWsdlUpload = null;
|
||||
var wizardSoapXsdUpload = null;
|
||||
var wizardTestResponsePreview = null;
|
||||
var grpcDescriptorServices = [];
|
||||
var soapServiceCatalog = [];
|
||||
var wizardProtocolCapabilities = null;
|
||||
function tKey(key) {
|
||||
return typeof t === 'function' ? t(key) : key;
|
||||
}
|
||||
function tfKey(key, vars) {
|
||||
return typeof tf === 'function' ? tf(key, vars) : key;
|
||||
}
|
||||
|
||||
function defaultProtocolCapabilities() {
|
||||
return {
|
||||
rest: {
|
||||
supports_execution_modes: ['unary', 'window', 'session', 'async_job'],
|
||||
supports_transport_behaviors: ['request_response', 'server_stream', 'deferred_result'],
|
||||
},
|
||||
graphql: {
|
||||
supports_execution_modes: ['unary'],
|
||||
supports_transport_behaviors: ['request_response'],
|
||||
},
|
||||
grpc: {
|
||||
supports_execution_modes: ['unary', 'window', 'session', 'async_job'],
|
||||
supports_transport_behaviors: ['request_response', 'server_stream'],
|
||||
},
|
||||
websocket: {
|
||||
supports_execution_modes: ['window', 'session', 'async_job'],
|
||||
supports_transport_behaviors: ['server_stream', 'stateful_session', 'deferred_result'],
|
||||
},
|
||||
soap: {
|
||||
supports_execution_modes: ['unary', 'async_job'],
|
||||
supports_transport_behaviors: ['request_response', 'server_stream', 'deferred_result'],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function currentProtocolCapabilities() {
|
||||
var capabilities = wizardProtocolCapabilities || defaultProtocolCapabilities();
|
||||
return capabilities[wizardProtocol] || capabilities.rest;
|
||||
}
|
||||
|
||||
async function loadProtocolCapabilities() {
|
||||
if (!wizardWorkspaceId || !window.CrankApi || typeof window.CrankApi.getProtocolCapabilities !== 'function') {
|
||||
wizardProtocolCapabilities = defaultProtocolCapabilities();
|
||||
return wizardProtocolCapabilities;
|
||||
}
|
||||
|
||||
try {
|
||||
var response = await window.CrankApi.getProtocolCapabilities(wizardWorkspaceId);
|
||||
var mapped = {};
|
||||
(response.items || []).forEach(function(item) {
|
||||
mapped[item.protocol] = item;
|
||||
});
|
||||
wizardProtocolCapabilities = mapped;
|
||||
} catch (_error) {
|
||||
wizardProtocolCapabilities = defaultProtocolCapabilities();
|
||||
}
|
||||
|
||||
return wizardProtocolCapabilities;
|
||||
}
|
||||
|
||||
/* ── Dynamic step loading ── */
|
||||
function _stepFile(n) {
|
||||
return (n === 3) ? 'step3-' + wizardProtocol + '.html' : 'step' + n + '.html';
|
||||
}
|
||||
|
||||
function loadStep(n, callback) {
|
||||
var panelId = (n === 3) ? step3PanelId() : 'step-panel-' + n;
|
||||
if (document.getElementById(panelId)) { if (callback) callback(); return; }
|
||||
fetch(_stepFile(n))
|
||||
.then(function(r) { return r.text(); })
|
||||
.then(function(html) {
|
||||
var c = document.getElementById('step-panel-container');
|
||||
if (c) c.insertAdjacentHTML('beforeend', html);
|
||||
if (typeof applyLang === 'function') applyLang();
|
||||
if (callback) callback();
|
||||
})
|
||||
.catch(function() { if (callback) callback(); });
|
||||
}
|
||||
|
||||
/* Step 3 panel id by protocol */
|
||||
function step3PanelId() {
|
||||
if (wizardProtocol === 'graphql') return 'step-panel-3-graphql';
|
||||
if (wizardProtocol === 'grpc') return 'step-panel-3-grpc';
|
||||
if (wizardProtocol === 'websocket') return 'step-panel-3-websocket';
|
||||
if (wizardProtocol === 'soap') return 'step-panel-3-soap';
|
||||
return 'step-panel-3-rest';
|
||||
}
|
||||
|
||||
/* Sidebar step-3 label by protocol */
|
||||
var STEP3_LABELS = {
|
||||
rest: tKey('wizard.step3.rest.label'),
|
||||
graphql: tKey('wizard.step3.graphql.label'),
|
||||
grpc: tKey('wizard.step3.grpc.label'),
|
||||
websocket: tKey('wizard.step3.websocket.label'),
|
||||
soap: tKey('wizard.step3.soap.label'),
|
||||
};
|
||||
|
||||
var CHECK_SVG = '<svg width="10" height="10"><use href="' + (window.APP_BASE||'') + 'icons/general/check.svg#icon"/></svg>';
|
||||
var ARROW_SVG = '<svg width="13" height="13"><use href="' + (window.APP_BASE||'') + 'icons/general/arrow-right.svg#icon"/></svg>';
|
||||
var BACK_SVG = '<svg width="13" height="13"><use href="' + (window.APP_BASE||'') + 'icons/general/arrow-left.svg#icon"/></svg>';
|
||||
|
||||
function goToStep(n) {
|
||||
if (n < 1 || n > TOTAL_STEPS) return;
|
||||
loadStep(n, function() { _doGoToStep(n); });
|
||||
}
|
||||
|
||||
function _doGoToStep(n) {
|
||||
document.querySelectorAll('.step-number[data-step]').forEach(function(element) {
|
||||
var step = Number(element.getAttribute('data-step')) || 0;
|
||||
element.textContent = tfKey('wizard.step_short', { step: step });
|
||||
});
|
||||
|
||||
// 1. hide all panes, show target (step 4 is protocol-specific)
|
||||
document.querySelectorAll('.step-pane').forEach(function(p) { p.style.display = 'none'; });
|
||||
var panelId = (n === 3) ? step3PanelId() : 'step-panel-' + n;
|
||||
var pane = document.getElementById(panelId);
|
||||
if (pane) pane.style.display = '';
|
||||
|
||||
// 2. update sidebar step items
|
||||
document.querySelectorAll('.step-item').forEach(function(item, i) {
|
||||
var num = i + 1;
|
||||
item.classList.remove('active', 'done', 'pending');
|
||||
var ind = item.querySelector('.step-indicator');
|
||||
var statusEl = item.querySelector('.step-status-text');
|
||||
if (num < n) {
|
||||
item.classList.add('done');
|
||||
if (ind) ind.innerHTML = CHECK_SVG;
|
||||
if (statusEl) statusEl.textContent = tKey('wizard.status.completed');
|
||||
} else if (num === n) {
|
||||
item.classList.add('active');
|
||||
if (ind) ind.textContent = num;
|
||||
if (statusEl) statusEl.textContent = tKey('wizard.status.in_progress');
|
||||
} else {
|
||||
item.classList.add('pending');
|
||||
if (ind) ind.textContent = num;
|
||||
if (statusEl) statusEl.textContent = tKey('wizard.status.not_started');
|
||||
}
|
||||
});
|
||||
|
||||
// 3. update progress bar
|
||||
var pct = Math.round((n / TOTAL_STEPS) * 100);
|
||||
var fill = document.querySelector('.progress-bar-fill');
|
||||
if (fill) fill.style.width = pct + '%';
|
||||
var pctEl = document.querySelector('.progress-pct');
|
||||
if (pctEl) pctEl.textContent = pct + '%';
|
||||
|
||||
// 4. update step counter
|
||||
var counter = document.querySelector('[data-step-counter]');
|
||||
if (counter) counter.innerHTML = tfKey('wizard.step_of', { step: n, total: TOTAL_STEPS });
|
||||
|
||||
// 5. back button
|
||||
var backBtn = document.querySelector('.btn-back');
|
||||
if (backBtn) {
|
||||
if (n === 1) {
|
||||
backBtn.disabled = true;
|
||||
backBtn.style.opacity = '0.35';
|
||||
backBtn.style.cursor = 'not-allowed';
|
||||
} else {
|
||||
backBtn.disabled = false;
|
||||
backBtn.style.opacity = '';
|
||||
backBtn.style.cursor = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 6. continue button
|
||||
var contBtn = document.querySelector('.btn-continue');
|
||||
if (contBtn) {
|
||||
if (n === TOTAL_STEPS) {
|
||||
var finalLabel = wizardMode === 'edit' ? tKey('wizard.button.save_changes') : tKey('wizard.button.create');
|
||||
contBtn.innerHTML = finalLabel + ' ' + ARROW_SVG;
|
||||
contBtn.style.cssText = 'background:#3fb950;border-color:#2ea043;box-shadow:0 1px 4px rgba(63,185,80,0.4);';
|
||||
} else {
|
||||
contBtn.innerHTML = tKey('wizard.button.continue') + ' ' + ARROW_SVG;
|
||||
contBtn.style.cssText = '';
|
||||
}
|
||||
}
|
||||
|
||||
currentStep = n;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function loadWizardPanels(steps) {
|
||||
return steps.reduce(function(chain, step) {
|
||||
return chain.then(function() {
|
||||
return new Promise(function(resolve) {
|
||||
loadStep(step, resolve);
|
||||
});
|
||||
});
|
||||
}, Promise.resolve());
|
||||
}
|
||||
|
||||
function bindProtocolCards() {
|
||||
document.querySelectorAll('.protocol-card').forEach(function(card) {
|
||||
card.addEventListener('click', function() {
|
||||
document.querySelectorAll('.protocol-card').forEach(function(item) {
|
||||
item.classList.remove('selected');
|
||||
item.setAttribute('aria-checked', 'false');
|
||||
});
|
||||
card.classList.add('selected');
|
||||
card.setAttribute('aria-checked', 'true');
|
||||
|
||||
var proto = card.dataset.protocol
|
||||
|| (card.classList.contains('rest')
|
||||
? 'rest'
|
||||
: card.classList.contains('graphql')
|
||||
? 'graphql'
|
||||
: card.classList.contains('grpc')
|
||||
? 'grpc'
|
||||
: card.classList.contains('websocket')
|
||||
? 'websocket'
|
||||
: card.classList.contains('soap')
|
||||
? 'soap'
|
||||
: 'rest');
|
||||
|
||||
wizardProtocol = proto;
|
||||
var s3name = document.getElementById('sidebar-step-3-name');
|
||||
if (s3name) s3name.textContent = STEP3_LABELS[proto] || tKey('wizard.step3.rest.label');
|
||||
|
||||
if (proto === 'graphql') {
|
||||
var pathInput = document.getElementById('endpoint-path');
|
||||
if (pathInput && pathInput.value === '/v1/leads') pathInput.value = '/graphql';
|
||||
}
|
||||
});
|
||||
card.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
card.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
var TOTAL_STEPS = window.CrankWizardShell.TOTAL_STEPS;
|
||||
var loadProtocolCapabilities = window.CrankWizardState.loadProtocolCapabilities;
|
||||
var currentProtocolCapabilities = window.CrankWizardState.currentProtocolCapabilities;
|
||||
var loadStep = window.CrankWizardShell.loadStep;
|
||||
var goToStep = window.CrankWizardShell.goToStep;
|
||||
var _doGoToStep = window.CrankWizardShell.doGoToStep;
|
||||
var loadWizardPanels = window.CrankWizardShell.loadWizardPanels;
|
||||
var bindProtocolCards = window.CrankWizardShell.bindProtocolCards;
|
||||
var step3PanelId = window.CrankWizardShell.step3PanelId;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
document.querySelector('.btn-continue').addEventListener('click', function() {
|
||||
@@ -2066,7 +1837,10 @@ function selectProtocol(protocol) {
|
||||
card.setAttribute('aria-checked', selected ? 'true' : 'false');
|
||||
});
|
||||
var s3name = document.getElementById('sidebar-step-3-name');
|
||||
if (s3name) s3name.textContent = STEP3_LABELS[wizardProtocol] || tKey('wizard.step3.rest.label');
|
||||
if (s3name) {
|
||||
var step3Labels = window.CrankWizardState.step3Labels();
|
||||
s3name.textContent = step3Labels[wizardProtocol] || tKey('wizard.step3.rest.label');
|
||||
}
|
||||
updateWizardProtocolVisibility();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user