Nesting stuff, styling

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -17,7 +17,7 @@
     </div>
     <div class="list-group list-group-flush">
       @for (query of selectionModel.queries; track query; let i = $index) {
-        <div class="list-group-item px-0 d-flex">
+        <div class="list-group-item px-0 d-flex flex-nowrap">
           @switch (query.type) {
             @case (CustomFieldQueryComponentType.Atom) {
               <ng-container *ngTemplateOutlet="queryAtom; context: { query: query }"></ng-container>
@@ -36,9 +36,9 @@
 </div>
 
 <ng-template #queryAtom let-query="query">
-  <div class="input-group input-group-sm flex-shrink-1 flex-nowrap">
+  <div class="input-group input-group-sm">
     <ng-select
-      class="w-50"
+      class="w-40"
       [items]="customFields"
       [(ngModel)]="query.field"
       [disabled]="disabled"
@@ -63,8 +63,8 @@
 </ng-template>
 
 <ng-template #queryExpression let-query="query">
-  <div class="d-flex flex-column w-100 border border-primary rounded p-2 mt-2">
+  <div class="d-flex flex-column border border-primary rounded p-2 mt-2">
-    <div class="btn-group btn-group-xs flex-fill" role="group">
+    <div class="btn-group btn-group-xs" role="group">
       <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND">
       <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{query.field}}" i18n>And</label>
       <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{query.field}}" name="logicalOperatorOr_{{query.field}}" value="OR">
@@ -72,7 +72,7 @@
     </div>
     <div class="list-group list-group-flush">
       @for (subquery of query.value; track subquery; let i = $index) {
-        <div class="list-group-item px-0 d-flex">
+        <div class="list-group-item px-0 d-flex flex-nowrap">
           @switch (subquery.type) {
             @case (CustomFieldQueryComponentType.Atom) {
               <ng-container *ngTemplateOutlet="queryAtom; context: { query: subquery }"></ng-container>

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss

@@ -1,8 +1,12 @@
 .dropdown-menu {
-  width: 450px;
+  width: 500px;
 }
 
 ::ng-deep .ng-select-container {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
+
+.w-40 {
+  width: 40%;
+}

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -34,14 +34,17 @@ export class CustomFieldQueryComponent {
     return this._operator
   }
 
-  protected _value: string | CustomFieldQueryAtom[] | CustomFieldQueryExpression
+  protected _value:
+    | string
+    | CustomFieldQueryAtom[]
+    | CustomFieldQueryExpression[]
   set value(
-    value: string | CustomFieldQueryAtom[] | CustomFieldQueryExpression
+    value: string | CustomFieldQueryAtom[] | CustomFieldQueryExpression[]
   ) {
     this._value = value
     this.changed.next(this)
   }
-  get value(): string | CustomFieldQueryAtom[] | CustomFieldQueryExpression {
+  get value(): string | CustomFieldQueryAtom[] | CustomFieldQueryExpression[] {
     return this._value
   }
 }
@@ -68,13 +71,10 @@ export class CustomFieldQueryAtom extends CustomFieldQueryComponent {
 
 export class CustomFieldQueryExpression extends CustomFieldQueryComponent {
   constructor(
-    expressionArray: [
+    expressionArray: [CustomFieldQueryLogicalOperator, any[]] = [
-      CustomFieldQueryLogicalOperator,
+      CustomFieldQueryLogicalOperator.And,
-      (
+      null,
-        | [string, string, string][]
+    ]
-        | [CustomFieldQueryLogicalOperator, [string, string, string][]]
-      ),
-    ] = [CustomFieldQueryLogicalOperator.And, null]
   ) {
     super(CustomFieldQueryComponentType.Expression)
     ;[this._operator] = expressionArray
@@ -83,14 +83,22 @@ export class CustomFieldQueryExpression extends CustomFieldQueryComponent {
       this._value = []
     } else if (values?.length > 0 && values[0] instanceof Array) {
       this._value = values.map((value) => {
-        const atom = new CustomFieldQueryAtom(value)
+        if (value.length === 3) {
-        atom.changed.subscribe(() => {
+          const atom = new CustomFieldQueryAtom(value)
-          this.changed.next(this)
+          atom.changed.subscribe(() => {
-        })
+            this.changed.next(this)
-        return atom
+          })
+          return atom
+        } else {
+          const expression = new CustomFieldQueryExpression(value)
+          expression.changed.subscribe(() => {
+            this.changed.next(this)
+          })
+          return expression
+        }
       })
     } else {
-      this._value = new CustomFieldQueryExpression(values as any)
+      this._value = [new CustomFieldQueryExpression(values as any)]
     }
   }