refactor(query-builder): text for drop ghost localized

ivanvpetrov · ivanvpetrov · commit 9694aeed3659 · 2025-02-05T17:22:51.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');
     }));
   });
 
@@ -2920,13 +2933,13 @@ describe('IgxQueryBuilder', () => {
     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'));
-      
+
       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++) {
