From fc0768ef89ff5ed0ed8e7924f22718bcd524ee8e Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Thu, 29 Jun 2023 18:04:57 +0200
Subject: [PATCH] set up sort order

---
 .../query-builder-filter.element.ts           | 11 +--
 .../query-builder/query-builder.element.ts    | 72 ++++++++++++++++---
 2 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts
index 717f5aadf9..c1397c065f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts
@@ -83,7 +83,7 @@ export class UmbQueryBuilderFilterElement extends UmbLitElement {
     }
 
 	private _renderOperatorsDropdown() {
-		return html`<umb-button-with-dropdown look="outline" id="operator-dropdown">
+		return html`<umb-button-with-dropdown look="outline" id="operator-dropdown" label="choose operator">
 			${this.filter?.operator ?? ''}
 			<uui-combobox-list slot="dropdown" @change=${this.#setOperator} class="options-list">
 				${this.settings?.operators
@@ -103,13 +103,13 @@ export class UmbQueryBuilderFilterElement extends UmbLitElement {
 	private _renderConstraintValueInput() {
 		switch (this.currentPropertyType) {
 			case TemplateQueryPropertyTypeModel.INTEGER:
-				return html`<uui-input type="number" @change=${this.#setConstrainValue}></uui-input>`;
+				return html`<uui-input type="number" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
 			case TemplateQueryPropertyTypeModel.STRING:
-				return html`<uui-input type="text" @change=${this.#setConstrainValue}></uui-input>`;
+				return html`<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
 			case TemplateQueryPropertyTypeModel.DATE_TIME:
-				return html`<uui-input type="datetime-local" @change=${this.#setConstrainValue}></uui-input>`;
+				return html`<uui-input type="datetime-local" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
 			default:
-				return html`<input type="text" @change=${this.#setConstrainValue} />`;
+				return html`<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
 		}
 	}
 
@@ -117,6 +117,7 @@ export class UmbQueryBuilderFilterElement extends UmbLitElement {
 		return html`
 			<span>${this.unremovable ? 'where' : 'and'}</span>
 			<umb-button-with-dropdown look="outline" id="property-alias-dropdown"
+            label="Property alias"
 				>${this.filter?.propertyAlias ?? ''}
 				<uui-combobox-list slot="dropdown" @change=${this.#setPropertyAlias} class="options-list">
 					${this.settings?.properties?.map(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
index 712a18ab8e..1253fdeb8d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
@@ -10,6 +10,7 @@ import {
 import {
 	TemplateQueryExecuteFilterPresentationModel,
 	TemplateQueryExecuteModel,
+	TemplateQueryExecuteSortModel,
 	TemplateQueryResultResponseModel,
 	TemplateQuerySettingsResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
@@ -26,6 +27,11 @@ export interface TemplateQueryBuilderModalResult {
 	value: string;
 }
 
+enum SortOrder {
+	Ascending = 'ascending',
+	Descending = 'descending',
+}
+
 @customElement('umb-templating-query-builder-modal')
 export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement<
 	TemplateQueryBuilderModalData,
@@ -34,6 +40,9 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	@query('#content-type-dropdown')
 	private _contentTypeDropdown?: UmbButtonWithDropdownElement;
 
+	@query('#sort-dropdown')
+	private _sortDropdown?: UmbButtonWithDropdownElement;
+
 	@query('#filter-container')
 	private _filterContainer?: HTMLElement;
 
@@ -67,6 +76,9 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	@state()
 	private _selectedRootContentName = 'all pages';
 
+	@state()
+	private _defaultSortDirection: SortOrder = SortOrder.Ascending;
+
 	#documentRepository: UmbDocumentRepository;
 	#modalManagerContext?: UmbModalManagerContext;
 	#templateRepository: UmbTemplateRepository;
@@ -142,12 +154,36 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 		this._contentTypeDropdown!.closePopover();
 	}
 
+	#setSortProperty(event: Event) {
+		const target = event.target as UUIComboboxListElement;
+		this.#updateQueryRequest({
+			sort: { ...this._queryRequest.sort, propertyAlias: (target.value as string) ?? '' },
+		});
+		this._sortDropdown!.closePopover();
+	}
+
+	#setSortDirection() {
+		if (!this._queryRequest.sort?.direction) {
+			this.#updateQueryRequest({
+				sort: { ...this._queryRequest.sort, direction: this._defaultSortDirection },
+			});
+			return;
+		}
+
+		this.#updateQueryRequest({
+			sort: {
+				...this._queryRequest.sort,
+				direction:
+					this._queryRequest.sort?.direction === SortOrder.Ascending ? SortOrder.Descending : SortOrder.Ascending,
+			},
+		});
+	}
+
 	#addFilterElement = () => {
 		this._filterContainer?.appendChild(this.#createFilterElement());
 	};
 
 	#updateFilters = () => {
-		
 		this.#updateQueryRequest({ filters: Array.from(this._filterElements)?.map((filter) => filter.filter) ?? [] });
 	};
 
@@ -164,9 +200,9 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 					<uui-box>
 						<div class="row">
 							I want
-							<umb-button-with-dropdown look="outline" id="content-type-dropdown"
+							<umb-button-with-dropdown look="outline" id="content-type-dropdown" label="Choose content type"
 								>${this._queryRequest?.contentTypeAlias ?? 'all content'}
-								<uui-combobox-list slot="dropdown" @change=${this.#setContentType} id="content-type-list">
+								<uui-combobox-list slot="dropdown" @change=${this.#setContentType} class="options-list">
 									<uui-combobox-list-option value="">all content</uui-combobox-list-option>
 									${this._queryBuilderSettings?.contentTypeAliases?.map(
 										(alias) =>
@@ -177,7 +213,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 								</uui-combobox-list></umb-button-with-dropdown
 							>
 							from
-							<uui-button look="outline" @click=${this.#openDocumentPicker}
+							<uui-button look="outline" @click=${this.#openDocumentPicker} label="Choose root content"
 								>${this._selectedRootContentName}
 							</uui-button>
 						</div>
@@ -191,8 +227,24 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 								@remove-filter=${this.#removeFilter}></umb-query-builder-filter>
 						</div>
 						<div class="row">
-							ordered by <uui-button look="outline">(allowed properties)</uui-button>
-							<uui-button look="outline">ascending/descending</uui-button>
+							ordered by
+							<umb-button-with-dropdown look="outline" id="sort-dropdown" label="Property alias"
+								>${this._queryRequest.sort?.propertyAlias ?? ''}
+								<uui-combobox-list slot="dropdown" @change=${this.#setSortProperty} class="options-list">
+									${this._queryBuilderSettings?.properties?.map(
+										(property) =>
+											html`<uui-combobox-list-option .value=${property.alias ?? ''}
+												>${property.alias}</uui-combobox-list-option
+											>`
+									)}
+								</uui-combobox-list></umb-button-with-dropdown
+							>
+
+							${this._queryRequest.sort?.propertyAlias
+								? html`<uui-button look="outline" @click=${this.#setSortDirection}
+										>${this._queryRequest.sort.direction ?? this._defaultSortDirection}</uui-button
+								  >`
+								: ''}
 						</div>
 						<div class="row">N items returned, in 0 ms</div>
 						<code> ${this._templateQuery?.queryExpression ?? ''} </code>
@@ -200,8 +252,8 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 				</div>
 
 				<div slot="actions">
-					<uui-button @click=${this.#close} look="secondary">Close</uui-button>
-					<uui-button @click=${this.#submit} look="primary" color="positive">Submit</uui-button>
+					<uui-button @click=${this.#close} look="secondary" label="Close">Close</uui-button>
+					<uui-button @click=${this.#submit} look="primary" color="positive" label="Submit">Submit</uui-button>
 				</div>
 			</umb-body-layout>
 		`;
@@ -223,8 +275,8 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 				);
 			}
 
-			#content-type-list {
-				width: 250%;
+			.options-list {
+				min-width: 25ch;
 				background-color: var(--uui-color-surface);
 				box-shadow: var(--uui-shadow-depth-3);
 			}