Skip to content

Sort Children: Show loading state on Sort button (closes #22651) #22813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leekelleher merged 3 commits into from
May 12, 2026
Merged

Sort Children: Show loading state on Sort button (closes #22651) #22813

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b08b96
Add submit button state to sort dialog.
AndyButland May 12, 2026
532f6c8
Guard against re-entrant submit in sort-children-of modal.
AndyButland May 12, 2026
62c7c05
Set failed button state when sort-children-of submit throws.
AndyButland May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions ...ackages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
import type {
UmbTableColumn,
UmbTableConfig,
Expand Down Expand Up @@ -46,6 +47,9 @@
@state()
private _sortable = false;

@state()
private _submitButtonState?: UUIButtonState;

protected _sortedUniques = new Set<string>();

#pagination = new UmbPaginationManager();
Expand Down Expand Up @@ -135,21 +139,32 @@
}

async #onSubmit(event: PointerEvent) {
if (this._submitButtonState === 'waiting') return;
event?.stopPropagation();
if (!this.data?.sortChildrenOfRepositoryAlias) throw new Error('sortChildrenOfRepositoryAlias is required');

const sortChildrenOfRepository = await createExtensionApiByAlias<UmbSortChildrenOfRepository>(
this,
this.data.sortChildrenOfRepositoryAlias,
);
this._submitButtonState = 'waiting';

const { error } = await sortChildrenOfRepository.sortChildrenOf({
unique: this.data.unique,
sorting: this.#getSortOrderOfSortedItems(),
});
try {
const sortChildrenOfRepository = await createExtensionApiByAlias<UmbSortChildrenOfRepository>(
this,
this.data.sortChildrenOfRepositoryAlias,
);

if (!error) {
this._submitModal();
const { error } = await sortChildrenOfRepository.sortChildrenOf({
unique: this.data.unique,
sorting: this.#getSortOrderOfSortedItems(),
});

if (!error) {
this._submitButtonState = 'success';
this._submitModal();
} else {
this._submitButtonState = 'failed';
}
} catch (error) {
this._submitButtonState = 'failed';
throw error;

Check warning on line 167 in src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.ts

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (v17/dev)

❌ New issue: Complex Method 

UmbSortChildrenOfModalElement.onSubmit has a cyclomatic complexity of 9, threshold = 9. This function has many conditional statements (e.g. if, for, while), leading to lower code health. Avoid adding more conditionals and code to it without refactoring.
}
}

Expand Down Expand Up @@ -213,7 +228,13 @@
<umb-body-layout headline=${this.localize.term('actions_sort')}>
${this._children.length === 0 ? this.#renderEmptyState() : this.#renderTable()}
<uui-button slot="actions" label=${this.localize.term('general_cancel')} @click="${this._rejectModal}"></uui-button>
<uui-button slot="actions" color="positive" look="primary" label=${this.localize.term('general_sort')} @click=${this.#onSubmit}></uui-button>
<uui-button
slot="actions"
color="positive"
look="primary"
label=${this.localize.term('general_sort')}
.state=${this._submitButtonState}
@click=${this.#onSubmit}></uui-button>
</umb-body-layout>
`;
}
Expand Down
Loading