Use uuid for query elements, also fixes trackby

This commit is contained in:
shamoon 2024-09-05 16:40:48 -07:00
parent d552bedb8e
commit fd1e591da8
2 changed files with 8 additions and 6 deletions

View File

@ -8,7 +8,7 @@
</button> </button>
<div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}"> <div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
<div class="list-group list-group-flush"> <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"> <div class="list-group-item px-0 d-flex flex-nowrap">
@switch (element.type) { @switch (element.type) {
@case (CustomFieldQueryComponentType.Atom) { @case (CustomFieldQueryComponentType.Atom) {
@ -84,13 +84,13 @@
<div class="d-flex w-100"> <div class="d-flex w-100">
<div class="d-flex flex-grow-1 flex-column"> <div class="d-flex flex-grow-1 flex-column">
<div class="btn-group btn-group-xs" role="group"> <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"> <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.field}}" i18n>Any</label> <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.field}}" name="logicalOperatorAnd_{{expression.field}}" value="AND" [disabled]="expression.value.length < 2"> <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.field}}" i18n>All</label> <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.id}}" i18n>All</label>
</div> </div>
<div class="list-group list-group-flush mb-n2"> <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"> <div class="list-group-item px-0 d-flex flex-nowrap">
@switch (element.type) { @switch (element.type) {
@case (CustomFieldQueryComponentType.Atom) { @case (CustomFieldQueryComponentType.Atom) {

View File

@ -1,5 +1,6 @@
import { debounceTime, distinctUntilChanged, Subject } from 'rxjs' import { debounceTime, distinctUntilChanged, Subject } from 'rxjs'
import { CustomFieldDataType } from './custom-field' import { CustomFieldDataType } from './custom-field'
import { v4 as uuidv4 } from 'uuid'
export enum CustomFieldQueryLogicalOperator { export enum CustomFieldQueryLogicalOperator {
And = 'AND', And = 'AND',
@ -135,6 +136,7 @@ export class CustomFieldQueryElement {
public changed: Subject<CustomFieldQueryElement> public changed: Subject<CustomFieldQueryElement>
protected valueModelChanged: Subject<string | CustomFieldQueryElement[]> protected valueModelChanged: Subject<string | CustomFieldQueryElement[]>
public depth: number = 0 public depth: number = 0
public id: string = uuidv4()
constructor(type: CustomFieldQueryElementType) { constructor(type: CustomFieldQueryElementType) {
this.type = type this.type = type