alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve update controls styling and error handling

Browse Source 
- Add disabled and loading states for control group buttons with appropriate cursor and opacity styling
- Enhance dropdown toggle active state styling for update filter group
- Improve dropdown toggle layout with flex centering
- Add disabled state styling for dropdown items
- Refactor model update check to use shared helper function, removing redundant success handling and simplifying error flow
- Maintain existing functionality while improving user experience and code maintainability
This commit is contained in:
Will Miao
2025-10-29 14:38:11 +08:00
parent 315ab6f70b
commit e10717dcda
16 changed files with 344 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
locales/de.json
View File

@@ -435,7 +435,10 @@
},
"updates": {
"title": "Nur Modelle mit verfügbaren Updates anzeigen",
"action": "Updates"
"action": "Updates",
"menuLabel": "Weitere Update-Optionen anzeigen",
"check": "Updates prüfen",
"checkTooltip": "Die Aktualisierungssuche kann einige Zeit dauern."
}
},
"bulkOperations": {

5
locales/en.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "Show models with updates available",
"action": "Updates"
"action": "Updates",
"menuLabel": "Show update options",
"check": "Check updates",
"checkTooltip": "Checking updates may take a while."
}
},
"bulkOperations": {

5
locales/es.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "Mostrar solo modelos con actualizaciones disponibles",
"action": "Actualizaciones"
"action": "Actualizaciones",
"menuLabel": "Mostrar opciones de actualización",
"check": "Buscar actualizaciones",
"checkTooltip": "Comprobar actualizaciones puede tardar."
}
},
"bulkOperations": {

5
locales/fr.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "Afficher uniquement les modèles avec des mises à jour disponibles",
"action": "Mises à jour"
"action": "Mises à jour",
"menuLabel": "Afficher les options de mise à jour",
"check": "Rechercher des mises à jour",
"checkTooltip": "La vérification peut prendre du temps."
}
},
"bulkOperations": {

5
locales/he.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "הצג רק דגמים עם עדכונים זמינים",
"action": "עדכונים"
"action": "עדכונים",
"menuLabel": "הצגת אפשרויות עדכון",
"check": "בדוק עדכונים",
"checkTooltip": "בדיקת עדכונים עלולה לקחת זמן."
}
},
"bulkOperations": {

5
locales/ja.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "アップデート可能なモデルのみ表示",
"action": "アップデート"
"action": "アップデート",
"menuLabel": "更新オプションを表示",
"check": "アップデートを確認",
"checkTooltip": "確認には時間がかかる場合があります。"
}
},
"bulkOperations": {

5
locales/ko.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "업데이트 가능한 모델만 표시",
"action": "업데이트"
"action": "업데이트",
"menuLabel": "업데이트 옵션 표시",
"check": "업데이트 확인",
"checkTooltip": "업데이트 확인에는 시간이 걸릴 수 있습니다."
}
},
"bulkOperations": {

5
locales/ru.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "Показывать только модели с доступными обновлениями",
"action": "Обновления"
"action": "Обновления",
"menuLabel": "Показать параметры обновления",
"check": "Проверить обновления",
"checkTooltip": "Проверка может занять время."
}
},
"bulkOperations": {

5
locales/zh-CN.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "仅显示可用更新的模型",
"action": "更新"
"action": "更新",
"menuLabel": "显示更新选项",
"check": "检查更新",
"checkTooltip": "检查更新可能耗时。"
}
},
"bulkOperations": {

5
locales/zh-TW.json
View File

@@ -434,7 +434,10 @@
},
"updates": {
"title": "僅顯示可用更新的模型",
"action": "更新"
"action": "更新",
"menuLabel": "顯示更新選項",
"check": "檢查更新",
"checkTooltip": "檢查更新可能耗時。"
}
},
"bulkOperations": {

32
static/css/layout.css
View File

@@ -104,6 +104,19 @@
opacity: 1;
}
.control-group button:disabled {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.control-group button.loading,
.dropdown-toggle.loading {
cursor: wait;
opacity: 0.7;
pointer-events: none;
}
/* Controls */
.control-group button.favorite-filter,
.control-group button.update-filter {
@@ -135,6 +148,16 @@
color: white;
}
.update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle {
background: var(--lora-accent);
border-color: var(--lora-accent);
color: white;
}
.update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle i {
color: inherit;
}
/* Active state for buttons that can be toggled */
.control-group button.active {
background: var(--lora-accent);
@@ -322,6 +345,9 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-menu {
@@ -354,6 +380,12 @@
transition: background-color 0.2s ease;
}
.dropdown-item.disabled {
cursor: default;
opacity: 0.6;
pointer-events: none;
}
.dropdown-item:hover {
background-color: oklch(var(--lora-accent) / 0.1);
}

67
static/js/components/ContextMenu/GlobalContextMenu.js
View File

@@ -1,9 +1,7 @@
import { BaseContextMenu } from './BaseContextMenu.js';
import { showToast } from '../../utils/uiHelpers.js';
import { state } from '../../state/index.js';
import { translate } from '../../utils/i18nHelpers.js';
import { getCompleteApiConfig, getCurrentModelType } from '../../api/apiConfig.js';
import { resetAndReload } from '../../api/modelApiFactory.js';
import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
export class GlobalContextMenu extends BaseContextMenu {
constructor() {
@@ -116,68 +114,23 @@ export class GlobalContextMenu extends BaseContextMenu {
return;
}
const modelType = getCurrentModelType();
const apiConfig = getCompleteApiConfig(modelType);
if (!apiConfig?.endpoints?.refreshUpdates) {
console.warn('Refresh updates endpoint not configured for model type:', modelType);
return;
}
this._updateCheckInProgress = true;
menuItem?.classList.add('disabled');
const displayName = apiConfig.config?.displayName ?? 'Model';
const loadingMessage = translate(
'globalContextMenu.checkModelUpdates.loading',
{ type: displayName },
`Checking for ${displayName} updates...`
);
state.loadingManager?.showSimpleLoading?.(loadingMessage);
try {
const response = await fetch(apiConfig.endpoints.refreshUpdates, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ force: false })
await performModelUpdateCheck({
onComplete: () => {
menuItem?.classList.remove('disabled');
this._updateCheckInProgress = false;
}
});
let payload = {};
try {
payload = await response.json();
} catch {
payload = {};
}
if (!response.ok || payload.success !== true) {
const errorMessage = payload?.error || response.statusText || 'Unknown error';
throw new Error(errorMessage);
}
const records = Array.isArray(payload.records) ? payload.records : [];
if (records.length > 0) {
showToast('globalContextMenu.checkModelUpdates.success', { count: records.length, type: displayName }, 'success');
} else {
showToast('globalContextMenu.checkModelUpdates.none', { type: displayName }, 'info');
}
await resetAndReload(false);
} catch (error) {
console.error('Error checking model updates:', error);
showToast(
'globalContextMenu.checkModelUpdates.error',
{ message: error?.message ?? 'Unknown error', type: displayName },
'error'
);
console.error('Failed to check model updates:', error);
} finally {
state.loadingManager?.hide?.();
if (typeof state.loadingManager?.restoreProgressBar === 'function') {
state.loadingManager.restoreProgressBar();
if (this._updateCheckInProgress) {
this._updateCheckInProgress = false;
menuItem?.classList.remove('disabled');
}
menuItem?.classList.remove('disabled');
this._updateCheckInProgress = false;
}
}
}

83
static/js/components/controls/PageControls.js
View File

@@ -2,6 +2,7 @@
import { getCurrentPageState, setCurrentPageType } from '../../state/index.js';
import { getStorageItem, setStorageItem, getSessionItem, setSessionItem } from '../../utils/storageHelpers.js';
import { showToast } from '../../utils/uiHelpers.js';
import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
import { sidebarManager } from '../SidebarManager.js';
/**
@@ -26,7 +27,9 @@ export class PageControls {
// Use global sidebar manager
this.sidebarManager = sidebarManager;
this._updateCheckInProgress = false;
// Initialize event listeners
this.initEventListeners();
@@ -156,7 +159,15 @@ export class PageControls {
document.querySelector('.dropdown-group.active')?.classList.remove('active');
});
}
const checkUpdatesOption = document.getElementById('checkUpdatesMenuItem');
if (checkUpdatesOption) {
checkUpdatesOption.addEventListener('click', async (e) => {
e.stopPropagation();
await this.handleCheckModelUpdates(e.currentTarget);
});
}
// Close dropdowns when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('.dropdown-group')) {
@@ -166,7 +177,73 @@ export class PageControls {
}
});
}
async handleCheckModelUpdates(menuItem) {
if (this._updateCheckInProgress) {
return;
}
const updateFilterBtn = document.getElementById('updateFilterBtn');
const dropdownToggle = document.getElementById('updateFilterMenuToggle');
const dropdownGroup = menuItem?.closest('.dropdown-group');
const iconElement = updateFilterBtn?.querySelector('i');
const setLoadingState = (isLoading) => {
if (updateFilterBtn) {
updateFilterBtn.disabled = isLoading;
updateFilterBtn.classList.toggle('loading', isLoading);
updateFilterBtn.setAttribute('aria-busy', isLoading ? 'true' : 'false');
if (iconElement) {
if (isLoading) {
if (!iconElement.dataset.originalClass) {
iconElement.dataset.originalClass = iconElement.className;
}
iconElement.className = 'fas fa-spinner fa-spin';
} else {
const originalClass = iconElement.dataset.originalClass;
if (originalClass) {
iconElement.className = originalClass;
delete iconElement.dataset.originalClass;
} else {
iconElement.classList.remove('fa-spinner', 'fa-spin');
if (!iconElement.classList.contains('fa-exclamation-circle')) {
iconElement.classList.add('fa-exclamation-circle');
}
}
}
}
}
if (dropdownToggle) {
dropdownToggle.disabled = isLoading;
dropdownToggle.classList.toggle('loading', isLoading);
}
if (menuItem) {
menuItem.classList.toggle('disabled', isLoading);
if (isLoading) {
menuItem.setAttribute('aria-disabled', 'true');
} else {
menuItem.removeAttribute('aria-disabled');
}
}
};
this._updateCheckInProgress = true;
setLoadingState(true);
try {
await performModelUpdateCheck();
} catch (error) {
console.error('Failed to check model updates:', error);
} finally {
this._updateCheckInProgress = false;
setLoadingState(false);
dropdownGroup?.classList.remove('active');
}
}
/**
* Initialize page-specific event listeners
*/

85
static/js/utils/updateCheckHelpers.js Normal file
View File

@@ -0,0 +1,85 @@
import { state } from '../state/index.js';
import { translate } from './i18nHelpers.js';
import { showToast } from './uiHelpers.js';
import { getCompleteApiConfig, getCurrentModelType } from '../api/apiConfig.js';
import { resetAndReload } from '../api/modelApiFactory.js';
/**
* Perform a model update check using the shared backend endpoint.
* @param {Object} [options]
* @param {Function} [options.onStart] - Callback invoked before the request is sent.
* @param {Function} [options.onComplete] - Callback invoked after the request settles.
* @returns {Promise<{status: 'success' | 'error' | 'unsupported', displayName: string, records: Array, error: Error | null}>}
*/
export async function performModelUpdateCheck({ onStart, onComplete } = {}) {
const modelType = getCurrentModelType();
const apiConfig = getCompleteApiConfig(modelType);
const displayName = apiConfig?.config?.displayName ?? 'Model';
if (!apiConfig?.endpoints?.refreshUpdates) {
console.warn('Refresh updates endpoint not configured for model type:', modelType);
onComplete?.({ status: 'unsupported', displayName, records: [], error: null });
return { status: 'unsupported', displayName, records: [], error: null };
}
const loadingMessage = translate(
'globalContextMenu.checkModelUpdates.loading',
{ type: displayName },
`Checking for ${displayName} updates...`
);
onStart?.({ displayName, loadingMessage });
state.loadingManager?.showSimpleLoading?.(loadingMessage);
let status = 'success';
let records = [];
let error = null;
try {
const response = await fetch(apiConfig.endpoints.refreshUpdates, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ force: false })
});
let payload = {};
try {
payload = await response.json();
} catch {
payload = {};
}
if (!response.ok || payload.success !== true) {
const errorMessage = payload?.error || response.statusText || 'Unknown error';
throw new Error(errorMessage);
}
records = Array.isArray(payload.records) ? payload.records : [];
if (records.length > 0) {
showToast('globalContextMenu.checkModelUpdates.success', { count: records.length, type: displayName }, 'success');
} else {
showToast('globalContextMenu.checkModelUpdates.none', { type: displayName }, 'info');
}
await resetAndReload(false);
} catch (err) {
status = 'error';
error = err instanceof Error ? err : new Error(String(err));
console.error('Error checking model updates:', error);
showToast(
'globalContextMenu.checkModelUpdates.error',
{ message: error?.message ?? 'Unknown error', type: displayName },
'error'
);
} finally {
state.loadingManager?.hide?.();
if (typeof state.loadingManager?.restoreProgressBar === 'function') {
state.loadingManager.restoreProgressBar();
}
onComplete?.({ status, displayName, records, error });
}
return { status, displayName, records, error };
}

12
templates/components/controls.html
View File

@@ -56,10 +56,18 @@
<i class="fas fa-star"></i> <span>{{ t('loras.controls.favorites.action') }}</span>
</button>
</div>
<div class="control-group">
<button id="updateFilterBtn" data-action="toggle-updates" class="update-filter" title="{{ t('loras.controls.updates.title') }}">
<div class="control-group dropdown-group update-filter-group">
<button id="updateFilterBtn" data-action="toggle-updates" class="dropdown-main update-filter" title="{{ t('loras.controls.updates.title') }}">
<i class="fas fa-exclamation-circle"></i> <span>{{ t('loras.controls.updates.action') }}</span>
</button>
<button id="updateFilterMenuToggle" class="dropdown-toggle" aria-label="{{ t('loras.controls.updates.menuLabel') }}">
<i class="fas fa-caret-down"></i>
</button>
<div class="dropdown-menu">
<div id="checkUpdatesMenuItem" class="dropdown-item" data-action="check-updates" title="{{ t('loras.controls.updates.checkTooltip') }}">
<i class="fas fa-sync-alt"></i> <span>{{ t('loras.controls.updates.check') }}</span>
</div>
</div>
</div>
<div id="customFilterIndicator" class="control-group hidden">
<div class="filter-active">

89
tests/frontend/components/pageControls.filtering.test.js
View File

@@ -28,6 +28,8 @@ const sidebarManagerMock = {
const createAlphabetBarMock = vi.fn(() => ({ destroy: vi.fn() }));
const performModelUpdateCheckMock = vi.fn();
getModelApiClientMock.mockReturnValue(apiClientMock);
vi.mock('../../../static/js/api/modelApiFactory.js', () => ({
@@ -52,6 +54,10 @@ vi.mock('../../../static/js/components/alphabet/index.js', () => ({
createAlphabetBar: createAlphabetBarMock,
}));
vi.mock('../../../static/js/utils/updateCheckHelpers.js', () => ({
performModelUpdateCheck: performModelUpdateCheckMock,
}));
beforeEach(() => {
vi.resetModules();
vi.clearAllMocks();
@@ -61,6 +67,7 @@ beforeEach(() => {
fetchCivitaiMetadataMock.mockResolvedValue(undefined);
resetAndReloadMock.mockResolvedValue(undefined);
getModelApiClientMock.mockReturnValue(apiClientMock);
performModelUpdateCheckMock.mockResolvedValue({ status: 'success', displayName: 'LoRA', records: [] });
sidebarManagerMock.isInitialized = false;
sidebarManagerMock.initialize.mockImplementation(async () => {
@@ -135,8 +142,20 @@ function renderControlsDom(pageKey) {
<div class="control-group">
<button id="favoriteFilterBtn" class="favorite-filter"></button>
</div>
<div class="control-group">
<button id="updateFilterBtn" class="update-filter"></button>
<div class="control-group dropdown-group update-filter-group">
<button id="updateFilterBtn" class="dropdown-main update-filter" aria-busy="false">
<i class="fas fa-exclamation-circle"></i>
<span>Updates</span>
</button>
<button id="updateFilterMenuToggle" class="dropdown-toggle">
<i class="fas fa-caret-down"></i>
</button>
<div class="dropdown-menu">
<div id="checkUpdatesMenuItem" class="dropdown-item" data-action="check-updates">
<i class="fas fa-sync-alt"></i>
<span>Check updates</span>
</div>
</div>
</div>
</div>
</div>
@@ -149,6 +168,15 @@ function renderControlsDom(pageKey) {
`;
}
function createDeferred() {
let resolve;
const promise = new Promise((res) => {
resolve = res;
});
return { promise, resolve };
}
describe('SearchManager filtering scenarios', () => {
it.each([
['loras'],
@@ -390,6 +418,63 @@ describe('PageControls favorites, sorting, and duplicates scenarios', () => {
expect(resetAndReloadMock).toHaveBeenCalledWith(true);
});
it('disables update controls while checking for model updates and restores them afterwards', async () => {
const deferred = createDeferred();
performModelUpdateCheckMock.mockImplementation(async () => {
await deferred.promise;
return { status: 'success', displayName: 'LoRA', records: [] };
});
renderControlsDom('loras');
const stateModule = await import('../../../static/js/state/index.js');
stateModule.initPageState('loras');
const { LorasControls } = await import('../../../static/js/components/controls/LorasControls.js');
new LorasControls();
const updateButton = document.getElementById('updateFilterBtn');
const toggleButton = document.getElementById('updateFilterMenuToggle');
const menuItem = document.getElementById('checkUpdatesMenuItem');
const dropdownGroup = menuItem.closest('.dropdown-group');
const icon = updateButton.querySelector('i');
expect(updateButton.disabled).toBe(false);
expect(toggleButton.disabled).toBe(false);
expect(menuItem.classList.contains('disabled')).toBe(false);
menuItem.dispatchEvent(new Event('click', { bubbles: true }));
expect(performModelUpdateCheckMock).toHaveBeenCalledTimes(1);
expect(updateButton.disabled).toBe(true);
expect(updateButton.classList.contains('loading')).toBe(true);
expect(updateButton.getAttribute('aria-busy')).toBe('true');
expect(toggleButton.disabled).toBe(true);
expect(toggleButton.classList.contains('loading')).toBe(true);
expect(menuItem.classList.contains('disabled')).toBe(true);
expect(menuItem.getAttribute('aria-disabled')).toBe('true');
expect(icon.classList.contains('fa-spinner')).toBe(true);
expect(icon.classList.contains('fa-spin')).toBe(true);
deferred.resolve();
await performModelUpdateCheckMock.mock.results[0].value;
await Promise.resolve();
await vi.waitFor(() => {
expect(updateButton.disabled).toBe(false);
expect(updateButton.classList.contains('loading')).toBe(false);
expect(toggleButton.disabled).toBe(false);
expect(toggleButton.classList.contains('loading')).toBe(false);
expect(menuItem.classList.contains('disabled')).toBe(false);
});
expect(updateButton.getAttribute('aria-busy')).toBe('false');
expect(menuItem.hasAttribute('aria-disabled')).toBe(false);
expect(icon.classList.contains('fa-spinner')).toBe(false);
expect(icon.classList.contains('fa-spin')).toBe(false);
expect(icon.classList.contains('fa-exclamation-circle')).toBe(true);
expect(dropdownGroup.classList.contains('active')).toBe(false);
});
it('saves sort selection and reloads models', async () => {
renderControlsDom('loras');
const stateModule = await import('../../../static/js/state/index.js');