From bf47d0c7bbc10bc4da3aa5b9f69bf7e3cc119171 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 4 Sep 2024 15:00:55 -0700
Subject: [PATCH] Depth, fix remove

---
 .../custom-fields-query-dropdown.component.html      | 12 +++++++-----
 .../custom-fields-query-dropdown.component.ts        |  6 ++----
 src-ui/src/app/data/custom-field-query.ts            |  3 +++
 3 files changed, 12 insertions(+), 9 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 e94ba7993..404f094ab 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
@@ -63,9 +63,9 @@
   <div class="d-flex w-100">
     <div class="d-flex flex-grow-1 flex-column">
       <div class="btn-group btn-group-xs" role="group">
-        <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{query.field}}" name="logicalOperatorOr_{{query.field}}" value="OR">
+        <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{query.field}}" name="logicalOperatorOr_{{query.field}}" value="OR" [disabled]="query.value.length < 2">
         <label class="btn btn-outline-primary" for="logicalOperatorOr_{{query.field}}" i18n>Any</label>
-        <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND">
+        <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND" [disabled]="query.value.length < 2">
         <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{query.field}}" i18n>All</label>
       </div>
       <div class="list-group list-group-flush mb-n2">
@@ -90,9 +90,11 @@
       <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add expression" i18n-title (click)="addExpression(query)" [disabled]="disabled">
         <i-bs name="braces"></i-bs>
       </button>
-      <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(query)" [disabled]="disabled">
-        <i-bs name="x-circle"></i-bs>
-      </button>
+      @if (query.depth > 0) {
+        <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(query)" [disabled]="disabled">
+          <i-bs name="x-circle"></i-bs>
+        </button>
+      }
     </div>
   </div>
 </ng-template>
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 f08260b09..bebab5d0f 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
@@ -189,10 +189,8 @@ export class CustomFieldsQueryDropdownComponent {
     expression.addExpression()
   }
 
-  public removeComponent(
-    component: CustomFieldQueryAtom | CustomFieldQueryExpression
-  ) {
-    this.selectionModel.removeElement(component)
+  public removeElement(element: CustomFieldQueryElement) {
+    this.selectionModel.removeElement(element)
   }
 
   public reset() {
diff --git a/src-ui/src/app/data/custom-field-query.ts b/src-ui/src/app/data/custom-field-query.ts
index 0e3467587..e70c5efb2 100644
--- a/src-ui/src/app/data/custom-field-query.ts
+++ b/src-ui/src/app/data/custom-field-query.ts
@@ -135,6 +135,7 @@ export class CustomFieldQueryElement {
   public readonly type: CustomFieldQueryElementType
   public changed: Subject<CustomFieldQueryElement>
   protected valueModelChanged: Subject<string | CustomFieldQueryElement[]>
+  public depth: number = 0
 
   constructor(type: CustomFieldQueryElementType) {
     this.type = type
@@ -292,6 +293,7 @@ export class CustomFieldQueryExpression extends CustomFieldQueryElement {
       'true',
     ])
   ) {
+    atom.depth = this.depth + 1
     ;(this._value as CustomFieldQueryElement[]).push(atom)
     atom.changed.subscribe(() => {
       this.changed.next(this)
@@ -301,6 +303,7 @@ export class CustomFieldQueryExpression extends CustomFieldQueryElement {
   public addExpression(
     expression: CustomFieldQueryExpression = new CustomFieldQueryExpression()
   ) {
+    expression.depth = this.depth + 1
     ;(this._value as CustomFieldQueryElement[]).push(expression)
     expression.changed.subscribe(() => {
       this.changed.next(this)