From b6a3c7b58b195cba9bd051b5ae0f1b8dd2716b44 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Wed, 4 Sep 2024 14:27:31 -0700 Subject: [PATCH] Big refactor of layout etc --- ...ustom-fields-query-dropdown.component.html | 70 +++++++------- .../custom-fields-query-dropdown.component.ts | 96 +++++++++---------- src-ui/src/app/data/custom-field-query.ts | 37 ++++++- 3 files changed, 113 insertions(+), 90 deletions(-) diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html index 276b9cc39..e94ba7993 100644 --- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html +++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html @@ -1,20 +1,12 @@ -
+
-
- - -
@for (query of selectionModel.queries; track query; let i = $index) {
@@ -61,36 +53,46 @@ } } -
-
-
- - - - +
+
+
+ + + + +
+
+ @for (subquery of query.value; track subquery; let i = $index) { +
+ @switch (subquery.type) { + @case (CustomFieldQueryComponentType.Atom) { + + } + @case (CustomFieldQueryComponentType.Expression) { + + } + } +
+ } +
-
- @for (subquery of query.value; track subquery; let i = $index) { -
- @switch (subquery.type) { - @case (CustomFieldQueryComponentType.Atom) { - - } - @case (CustomFieldQueryComponentType.Expression) { - - } - } -
- } +
+ + +
- diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts index 942330915..f08260b09 100644 --- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts +++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts @@ -10,11 +10,12 @@ import { CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP, CustomFieldQueryOperatorGroups, CUSTOM_FIELD_QUERY_OPERATOR_LABELS, + CustomFieldQueryElement, } from 'src/app/data/custom-field-query' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' export class CustomFieldQueriesModel { - public queries: Array = [] + public queries: CustomFieldQueryElement[] = [] public readonly changed = new Subject() @@ -25,22 +26,11 @@ export class CustomFieldQueriesModel { } } - public addQuery( - query: CustomFieldQueryAtom = new CustomFieldQueryAtom([ - null, - CustomFieldQueryOperator.Exists, - 'true', - ]) - ) { - if (this.queries.length > 0) { - if (this.queries[0].type === CustomFieldQueryElementType.Expression) { - ;(this.queries[0].value as Array).push(query) - } else { - this.queries.push(query) - } - } else { - this.queries.push(query) + public addQuery(query: CustomFieldQueryAtom) { + if (this.queries.length === 0) { + this.addExpression() } + ;(this.queries[0].value as CustomFieldQueryElement[]).push(query) query.changed.subscribe(() => { if (query.field && query.operator && query.value) { this.changed.next(this) @@ -52,15 +42,10 @@ export class CustomFieldQueriesModel { expression: CustomFieldQueryExpression = new CustomFieldQueryExpression() ) { if (this.queries.length > 0) { - if (this.queries[0].type === CustomFieldQueryElementType.Atom) { - expression.value = this.queries as CustomFieldQueryAtom[] - this.queries = [] - this.queries.push(expression) - } else { - ;((this.queries[0] as CustomFieldQueryExpression).value as any[]).push( - expression - ) - } + ;( + (this.queries[0] as CustomFieldQueryExpression) + .value as CustomFieldQueryElement[] + ).push(expression) } else { this.queries.push(expression) } @@ -69,20 +54,12 @@ export class CustomFieldQueriesModel { }) } - private findComponent( - queryComponent: CustomFieldQueryAtom | CustomFieldQueryExpression, - components: any[] - ) { - for (let i = 0; i < components.length; i++) { - if (components[i] === queryComponent) { - return components.splice(i, 1)[0] - } else if ( - components[i].type === CustomFieldQueryElementType.Expression - ) { - let found = this.findComponent( - queryComponent, - components[i].value as any[] - ) + private findElement(queryElement: CustomFieldQueryElement, elements: any[]) { + for (let i = 0; i < elements.length; i++) { + if (elements[i] === queryElement) { + return elements.splice(i, 1)[0] + } else if (elements[i].type === CustomFieldQueryElementType.Expression) { + let found = this.findElement(queryElement, elements[i].value as any[]) if (found !== undefined) { return found } @@ -91,17 +68,15 @@ export class CustomFieldQueriesModel { return undefined } - public removeComponent( - queryComponent: CustomFieldQueryAtom | CustomFieldQueryExpression - ) { + public removeElement(queryElement: CustomFieldQueryElement) { let foundComponent for (let i = 0; i < this.queries.length; i++) { let query = this.queries[i] - if (query === queryComponent) { + if (query === queryElement) { foundComponent = this.queries.splice(i, 1)[0] break } else if (query.type === CustomFieldQueryElementType.Expression) { - let found = this.findComponent(queryComponent, query.value as any[]) + let found = this.findElement(queryElement, query.value as any[]) if (found !== undefined) { foundComponent = found } @@ -149,10 +124,14 @@ export class CustomFieldsQueryDropdownComponent { @Input() disabled: boolean = false - _selectionModel: CustomFieldQueriesModel = new CustomFieldQueriesModel() + private _selectionModel: CustomFieldQueriesModel = + new CustomFieldQueriesModel() @Input() set selectionModel(model: CustomFieldQueriesModel) { + if (this._selectionModel) { + this._selectionModel.changed.complete() + } model.changed.subscribe((updatedModel) => { this.selectionModelChange.next(updatedModel) }) @@ -172,6 +151,7 @@ export class CustomFieldsQueryDropdownComponent { constructor(protected customFieldsService: CustomFieldsService) { this.getFields() + this.reset() } ngOnDestroy(): void { @@ -179,6 +159,19 @@ export class CustomFieldsQueryDropdownComponent { this.unsubscribeNotifier.complete() } + public onOpenChange(open: boolean) { + if (open && this.selectionModel.queries.length === 0) { + this.selectionModel.addExpression() + } + } + + public get isActive(): boolean { + return ( + (this.selectionModel.queries[0] as CustomFieldQueryExpression)?.value + ?.length > 0 + ) + } + private getFields() { this.customFieldsService .listAll() @@ -188,22 +181,23 @@ export class CustomFieldsQueryDropdownComponent { }) } - public addAtom() { - this.selectionModel.addQuery() + public addAtom(expression: CustomFieldQueryExpression) { + expression.addAtom() } - public addExpression() { - this.selectionModel.addExpression() + public addExpression(expression: CustomFieldQueryExpression) { + expression.addExpression() } public removeComponent( component: CustomFieldQueryAtom | CustomFieldQueryExpression ) { - this.selectionModel.removeComponent(component) + this.selectionModel.removeElement(component) } public reset() { - this.selectionModel.clear() + this.selectionModel.clear(false) + this.selectionModel.changed.next(this.selectionModel) } getOperatorsForField( diff --git a/src-ui/src/app/data/custom-field-query.ts b/src-ui/src/app/data/custom-field-query.ts index b4f87d905..0e3467587 100644 --- a/src-ui/src/app/data/custom-field-query.ts +++ b/src-ui/src/app/data/custom-field-query.ts @@ -44,6 +44,7 @@ export enum CustomFieldQueryOperatorGroups { String = 'string', Arithmetic = 'arithmetic', Containment = 'containment', + Date = 'date', } export const CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP = { @@ -63,11 +64,15 @@ export const CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP = { CustomFieldQueryOperator.GreaterThanOrEqual, CustomFieldQueryOperator.LessThan, CustomFieldQueryOperator.LessThanOrEqual, - CustomFieldQueryOperator.Range, + // CustomFieldQueryOperator.Range, ], [CustomFieldQueryOperatorGroups.Containment]: [ CustomFieldQueryOperator.Contains, ], + [CustomFieldQueryOperatorGroups.Date]: [ + CustomFieldQueryOperator.GreaterThanOrEqual, + CustomFieldQueryOperator.LessThanOrEqual, + ], } // filters.py > SUPPORTED_EXPR_CATEGORIES @@ -82,7 +87,7 @@ export const CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE = { ], [CustomFieldDataType.Date]: [ CustomFieldQueryOperatorGroups.Basic, - CustomFieldQueryOperatorGroups.Arithmetic, + CustomFieldQueryOperatorGroups.Date, ], [CustomFieldDataType.Boolean]: [CustomFieldQueryOperatorGroups.Basic], [CustomFieldDataType.Integer]: [ @@ -232,13 +237,13 @@ export class CustomFieldQueryAtom extends CustomFieldQueryElement { export class CustomFieldQueryExpression extends CustomFieldQueryElement { constructor( expressionArray: [CustomFieldQueryLogicalOperator, any[]] = [ - CustomFieldQueryLogicalOperator.And, + CustomFieldQueryLogicalOperator.Or, null, ] ) { super(CustomFieldQueryElementType.Expression) - ;[this._operator] = expressionArray - let values = expressionArray[1] + let values + ;[this._operator, values] = expressionArray if (!values) { this._value = [] } else if (values?.length > 0 && values[0] instanceof Array) { @@ -279,4 +284,26 @@ export class CustomFieldQueryExpression extends CustomFieldQueryElement { (this._value as any[]).every((v) => v.isValid) ) } + + public addAtom( + atom: CustomFieldQueryAtom = new CustomFieldQueryAtom([ + null, + CustomFieldQueryOperator.Exists, + 'true', + ]) + ) { + ;(this._value as CustomFieldQueryElement[]).push(atom) + atom.changed.subscribe(() => { + this.changed.next(this) + }) + } + + public addExpression( + expression: CustomFieldQueryExpression = new CustomFieldQueryExpression() + ) { + ;(this._value as CustomFieldQueryElement[]).push(expression) + expression.changed.subscribe(() => { + this.changed.next(this) + }) + } }