Merge branch 'dmdimitrov/query-builder-improvements' of https://github.com/IgniteUI/igniteui-angular into dmdimitrov/query-builder-improvements

igdmdimitrov · igdmdimitrov · commit f930e1d0b99c · 2025-02-05T17:32:21.000+02:00
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsBG = {
     igx_query_builder_dialog_checkbox_text: 'Не показвай този диалогов прозорец отново',
     igx_query_builder_dialog_cancel: 'Отказ',
     igx_query_builder_dialog_confirm: 'Потвърди',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsCS = {
     igx_query_builder_dialog_checkbox_text: 'Tento dialog již příště nezobrazovat',
     igx_query_builder_dialog_cancel: 'Zrušení',
     igx_query_builder_dialog_confirm: 'Potvrdit',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsDA = {
     igx_query_builder_dialog_checkbox_text: 'Vis ikke denne dialogboks igen',
     igx_query_builder_dialog_cancel: 'Annuller',
     igx_query_builder_dialog_confirm: 'Bekræft',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsDE = {
     igx_query_builder_dialog_checkbox_text: 'Dieses Dialogfeld nicht mehr anzeigen',
     igx_query_builder_dialog_cancel: 'Abbrechen',
     igx_query_builder_dialog_confirm: 'Bestätigen',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsES = {
     igx_query_builder_dialog_checkbox_text: 'No volver a mostrar este cuadro de diálogo',
     igx_query_builder_dialog_cancel: 'Cancelar',
     igx_query_builder_dialog_confirm: 'Confirmar',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsFR = {
     igx_query_builder_dialog_checkbox_text: 'Ne plus afficher cette boîte de dialogue',
     igx_query_builder_dialog_cancel: 'Annuler',
     igx_query_builder_dialog_confirm: 'Confirmer',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsHU = {
     igx_query_builder_dialog_checkbox_text: 'Ne jelenjen meg többet ez a párbeszédpanel',
     igx_query_builder_dialog_cancel: 'Mégse',
     igx_query_builder_dialog_confirm: 'Megerősítés',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsIT = {
     igx_query_builder_dialog_checkbox_text: 'Non visualizzare più questo messaggio',
     igx_query_builder_dialog_cancel: 'Annulla',
     igx_query_builder_dialog_confirm: 'Conferma',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsJA = {
     igx_query_builder_dialog_checkbox_text: '今後このダイアログを表示しない',
     igx_query_builder_dialog_cancel: 'キャンセル',
     igx_query_builder_dialog_confirm: '確認',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsKO = {
     igx_query_builder_dialog_checkbox_text: '이 대화 상자를 다시 표시하지 않기',
     igx_query_builder_dialog_cancel: '취소',
     igx_query_builder_dialog_confirm: '확인',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsNB = {
     igx_query_builder_dialog_checkbox_text: 'Ikke vis denne dialogboksen igjen',
     igx_query_builder_dialog_cancel: 'Avbryt',
     igx_query_builder_dialog_confirm: 'Bekreft',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsNL = {
     igx_query_builder_dialog_checkbox_text: 'Deze dialoog niet meer weergeven',
     igx_query_builder_dialog_cancel: 'Annuleren',
     igx_query_builder_dialog_confirm: 'Bevestigen',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsPL = {
     igx_query_builder_dialog_checkbox_text: 'Nie pokazuj tego okna dialogowego ponownie',
     igx_query_builder_dialog_cancel: 'Anuluj',
     igx_query_builder_dialog_confirm: 'Potwierdź',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsPT = {
     igx_query_builder_dialog_checkbox_text: 'Não voltar a mostrar esta caixa de diálogo',
     igx_query_builder_dialog_cancel: 'Cancelar',
     igx_query_builder_dialog_confirm: 'Confirmar',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsRO = {
     igx_query_builder_dialog_checkbox_text: 'Nu se mai afișează această casetă de dialog',
     igx_query_builder_dialog_cancel: 'Anulare',
     igx_query_builder_dialog_confirm: 'Confirmare',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsSV = {
     igx_query_builder_dialog_checkbox_text: 'Visa inte den här dialogrutan igen',
     igx_query_builder_dialog_cancel: 'Avbryt',
     igx_query_builder_dialog_confirm: 'Bekräfta',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsTR = {
     igx_query_builder_dialog_checkbox_text: 'Bu iletişim kutusunu bir daha gösterme',
     igx_query_builder_dialog_cancel: 'İptal',
     igx_query_builder_dialog_confirm: 'Onayla',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsZHHANS = {
     igx_query_builder_dialog_checkbox_text: '不再显示此对话框',
     igx_query_builder_dialog_cancel: '取消',
     igx_query_builder_dialog_confirm: '确认',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/query-builder-resources.ts
@@ -76,4 +76,5 @@ export const QueryBuilderResourceStringsZHHANT = {
     igx_query_builder_dialog_checkbox_text: '不要再顯示這個對話方塊',
     igx_query_builder_dialog_cancel: '取消',
     igx_query_builder_dialog_confirm: '確認',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 } satisfies MakeRequired<IQueryBuilderResourceStrings>;
diff --git a/projects/igniteui-angular/src/lib/core/i18n/query-builder-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/query-builder-resources.ts
@@ -71,6 +71,7 @@ export interface IQueryBuilderResourceStrings {
     igx_query_builder_dialog_checkbox_text?: string;
     igx_query_builder_dialog_cancel?: string;
     igx_query_builder_dialog_confirm?: string;
+    igx_query_builder_drop_ghost_text?: string;
 }
 
 export const QueryBuilderResourceStringsEN: IQueryBuilderResourceStrings = {
@@ -146,4 +147,5 @@ export const QueryBuilderResourceStringsEN: IQueryBuilderResourceStrings = {
     igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
     igx_query_builder_dialog_cancel: 'Cancel',
     igx_query_builder_dialog_confirm: 'Confirm',
+    igx_query_builder_drop_ghost_text: 'Drop here to insert'
 };
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts
@@ -240,8 +240,7 @@ export class IgxQueryBuilderDragService {
 
         if (!keyboardMode) {
             var span = document.createElement('span')
-            //TODO Localize string
-            span.innerHTML = "Drop here to insert";
+            span.innerHTML = this._queryBuilderTreeComponent.resourceStrings.igx_query_builder_drop_ghost_text;
 
             dragCopy.firstChild.firstChild.removeChild(dragCopy.firstChild.firstChild.childNodes[1]);
             dragCopy.firstChild.firstChild.removeChild(dragCopy.firstChild.firstChild.childNodes[1]);
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts
@@ -2380,7 +2380,8 @@ describe('IgxQueryBuilder', () => {
         igx_query_builder_dialog_message: 'My changing entity message',
         igx_query_builder_dialog_checkbox_text: 'My do not show this dialog again',
         igx_query_builder_dialog_cancel: 'My Cancel',
-        igx_query_builder_dialog_confirm: 'My Confirm'
+        igx_query_builder_dialog_confirm: 'My Confirm',
+        igx_query_builder_drop_ghost_text: 'My Drop here to insert'
       });
       fix.detectChanges();
 
@@ -2415,6 +2416,18 @@ describe('IgxQueryBuilder', () => {
       expect(dialogOutlet.querySelector('.igx-query-builder-dialog').children[1].textContent.trim()).toBe('My do not show this dialog again');
       expect(dialogOutlet.querySelector('.igx-dialog__window-actions').children[0].textContent.trim()).toBe('My Cancel');
       expect(dialogOutlet.querySelector('.igx-dialog__window-actions').children[1].textContent.trim()).toBe('My Confirm');
+
+      //Drag ghost text check
+      queryBuilder.expressionTree = QueryBuilderFunctions.generateExpressionTree();
+      fix.detectChanges();
+      tick(100);
+      fix.detectChanges();
+      const draggedChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[3].componentInstance;
+      UIInteractions.moveDragDirective(fix, draggedChip.dragDirective, 10, 10, false);
+      const dropGhost = QueryBuilderFunctions.getDropGhost(fix) as HTMLElement;
+      expect(draggedChip.dragDirective.ghostElement).toBeTruthy();
+      expect(dropGhost).toBeDefined();
+      expect(dropGhost.innerText).toBe('My Drop here to insert');
     }));
   });
 
@@ -2917,64 +2930,144 @@ describe('IgxQueryBuilder', () => {
       expect(QueryBuilderFunctions.getChipContent(newGroupConditions[0])).toBe("OrderDate  Today");
     });
 
-    it('should render drop ghost properly when keyboard dragged.', async () => {
+    it('should render drop ghost properly when keyboard dragged.', () => {
       const draggedIndicator = fix.debugElement.queryAll(By.css('.igx-drag-indicator'))[1];
       const tree = fix.debugElement.query(By.css('.igx-filter-tree'));
-      let keyPress = new KeyboardEvent('keydown', { code: 'ArrowDown' });
 
       draggedIndicator.triggerEventHandler('focus', {});
       draggedIndicator.nativeElement.focus();
 
       spyOn(tree.nativeElement, 'dispatchEvent').and.callThrough();
       const dropGhostContent = QueryBuilderFunctions.GetChipsContentAsArray(fix)[1];
 
+      //pass 1 down to bottom
+      let keyPress = new KeyboardEvent('keydown', { code: 'ArrowDown' });
       for (let i = 0; i <= 5; i++) {
         tree.nativeElement.dispatchEvent(keyPress);
-        await wait();
+        wait();
         fix.detectChanges();
 
+        const dropGhost = QueryBuilderFunctions.getDropGhost(fix);
+        const prevElement = dropGhost && dropGhost.previousElementSibling ? QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling) : null;
+        const nextElement = dropGhost && dropGhost.nextElementSibling ? QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling) : null;
         const newChipContents = QueryBuilderFunctions.GetChipsContentAsArray(fix);
 
         switch (true) {
           case i === 0:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toBeNull();
+            expect(nextElement).toEqual("OrderName  Ends With  a");
             expect(newChipContents[4]).toBe(dropGhostContent);
             break;
           case i === 1:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("OrderName  Ends With  a");
+            expect(nextElement).toBeUndefined();
             expect(newChipContents[5]).toBe(dropGhostContent);
             break;
-          case i >= 2:
+          case i === 2:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("OrderDate  Today");
+            expect(nextElement).toBeUndefined();
+            expect(newChipContents[6]).toBe(dropGhostContent);
+            break;
+          case i >= 3:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("or  OrderName  Ends With  a  OrderDate  Today");
+            expect(nextElement).toBeNull();
             expect(newChipContents[6]).toBe(dropGhostContent);
             break;
         }
       }
 
+      //pass 2 up to top
       keyPress = new KeyboardEvent('keydown', { code: 'ArrowUp' });
-
       for (let i = 0; i <= 10; i++) {
         tree.nativeElement.dispatchEvent(keyPress);
-        await wait();
+        wait();
         fix.detectChanges();
 
+        const dropGhost = QueryBuilderFunctions.getDropGhost(fix);
+        const prevElement = dropGhost && dropGhost.previousElementSibling ? QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling) : null;
+        const nextElement = dropGhost && dropGhost.nextElementSibling ? QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling) : null;
         const newChipContents = QueryBuilderFunctions.GetChipsContentAsArray(fix);
 
         switch (true) {
           case i === 0:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("OrderDate  Today");
+            expect(nextElement).toBeUndefined();
             expect(newChipContents[6]).toBe(dropGhostContent);
             break;
           case i === 1:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toBeUndefined();
+            expect(nextElement).toEqual("OrderDate  Today");
             expect(newChipContents[5]).toBe(dropGhostContent);
             break;
           case i === 2:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toBeNull();
+            expect(nextElement).toEqual("OrderName  Ends With  a");
             expect(newChipContents[4]).toBe(dropGhostContent);
             break;
           case i === 3:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toBeUndefined();
+            expect(nextElement).toEqual("or  OrderName  Ends With  a  OrderDate  Today");
             expect(newChipContents[4]).toBe(dropGhostContent);
             break;
-          case i === 4:
+          case i >= 4:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toBeNull();
+            expect(nextElement).toEqual("OrderName  Equals  foo");
             expect(newChipContents[0]).toBe(dropGhostContent);
             break;
-          case i >= 5:
-            expect(newChipContents[0]).toBe(dropGhostContent);
+        }
+      }
+
+      //pass 3 down to bottom again
+      keyPress = new KeyboardEvent('keydown', { code: 'ArrowDown' });
+      for (let i = 0; i <= 10; i++) {
+        tree.nativeElement.dispatchEvent(keyPress);
+        wait();
+        fix.detectChanges();
+
+        const dropGhost = QueryBuilderFunctions.getDropGhost(fix);
+        const prevElement = dropGhost && dropGhost.previousElementSibling ? QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling) : null;
+        const nextElement = dropGhost && dropGhost.nextElementSibling ? QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling) : null;
+        const newChipContents = QueryBuilderFunctions.GetChipsContentAsArray(fix);
+
+        switch (true) {
+          case i === 0:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("OrderName  Equals  foo");
+            expect(nextElement).toBeUndefined();
+            expect(newChipContents[1]).toBe(dropGhostContent);
+            break;
+          case i === 1:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toBeNull();
+            expect(nextElement).toEqual("OrderName  Ends With  a");
+            expect(newChipContents[4]).toBe(dropGhostContent);
+            break;
+          case i === 2:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("OrderName  Ends With  a");
+            expect(nextElement).toBeUndefined();
+            expect(newChipContents[5]).toBe(dropGhostContent);
+            break;
+          case i === 3:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("OrderDate  Today");
+            expect(nextElement).toBeUndefined();
+            expect(newChipContents[6]).toBe(dropGhostContent);
+            break;
+          case i >= 4:
+            expect(dropGhost).toBeDefined();
+            expect(prevElement).toEqual("or  OrderName  Ends With  a  OrderDate  Today");
+            expect(nextElement).toBeNull();
+            expect(newChipContents[6]).toBe(dropGhostContent);
             break;
         }
       }
