From fd1e591da803422ae1904162ededf1f1e407f987 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:40:48 -0700
Subject: [PATCH] Use uuid for query elements, also fixes trackby

---
 .../custom-fields-query-dropdown.component.html      | 12 ++++++------
 src-ui/src/app/data/custom-field-query.ts            |  2 ++
 2 files changed, 8 insertions(+), 6 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 834754cc8..a36afa2b3 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
@@ -8,7 +8,7 @@
   </button>
   <div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
     <div class="list-group list-group-flush">
-      @for (element of selectionModel.queries; track element; let i = $index) {
+      @for (element of selectionModel.queries; track element.id; let i = $index) {
         <div class="list-group-item px-0 d-flex flex-nowrap">
           @switch (element.type) {
             @case (CustomFieldQueryComponentType.Atom) {
@@ -84,13 +84,13 @@
   <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)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{expression.field}}" name="logicalOperatorOr_{{expression.field}}" value="OR" [disabled]="expression.value.length < 2">
-        <label class="btn btn-outline-primary" for="logicalOperatorOr_{{expression.field}}" i18n>Any</label>
-        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{expression.field}}" name="logicalOperatorAnd_{{expression.field}}" value="AND" [disabled]="expression.value.length < 2">
-        <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.field}}" i18n>All</label>
+        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{expression.id}}" name="logicalOperatorOr_{{expression.id}}" value="OR" [disabled]="expression.value.length < 2">
+        <label class="btn btn-outline-primary" for="logicalOperatorOr_{{expression.id}}" i18n>Any</label>
+        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{expression.id}}" name="logicalOperatorAnd_{{expression.id}}" value="AND" [disabled]="expression.value.length < 2">
+        <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.id}}" i18n>All</label>
       </div>
       <div class="list-group list-group-flush mb-n2">
-        @for (element of expression.value; track element; let i = $index) {
+        @for (element of expression.value; track element.id; let i = $index) {
           <div class="list-group-item px-0 d-flex flex-nowrap">
             @switch (element.type) {
               @case (CustomFieldQueryComponentType.Atom) {
diff --git a/src-ui/src/app/data/custom-field-query.ts b/src-ui/src/app/data/custom-field-query.ts
index 7e273a1bf..bdd896466 100644
--- a/src-ui/src/app/data/custom-field-query.ts
+++ b/src-ui/src/app/data/custom-field-query.ts
@@ -1,5 +1,6 @@
 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs'
 import { CustomFieldDataType } from './custom-field'
+import { v4 as uuidv4 } from 'uuid'
 
 export enum CustomFieldQueryLogicalOperator {
   And = 'AND',
@@ -135,6 +136,7 @@ export class CustomFieldQueryElement {
   public changed: Subject<CustomFieldQueryElement>
   protected valueModelChanged: Subject<string | CustomFieldQueryElement[]>
   public depth: number = 0
+  public id: string = uuidv4()
 
   constructor(type: CustomFieldQueryElementType) {
     this.type = type