From 7e8d7e09866896196415aca529dca9ea5ada9a28 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 11:07:31 +0300
Subject: [PATCH 01/10] fix: open the one-plus-many popup on click and Enter
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../one-plus-many-table-cell.spec.ts          | 133 ++++++++++++++++++
 .../one-plus-many-table-cell.vue              |  15 +-
 2 files changed, 142 insertions(+), 6 deletions(-)
 create mode 100644 src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts

diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts b/src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts
new file mode 100644
index 000000000..464cff718
--- /dev/null
+++ b/src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts
@@ -0,0 +1,133 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import Cell from '../one-plus-many-table-cell.vue';
+
+/** `wt-*` stay unresolved under @vue/compat, so tests assert plain DOM */
+
+interface Item {
+	id?: string;
+	name?: string;
+}
+
+const cell = (
+	collection: Item[],
+	options: {
+		routeName?: string;
+	} = {},
+) =>
+	mount(Cell, {
+		props: {
+			collection,
+			routeName: options.routeName ?? null,
+		},
+	});
+
+const value = (wrapper: ReturnType<typeof cell>) =>
+	wrapper.find('.one-plus-many-table-cell__value');
+
+const counter = (wrapper: ReturnType<typeof cell>) =>
+	wrapper.find('.one-plus-many-table-cell__chip');
+
+const lookup = (name: string, id?: string): Item => ({
+	id,
+	name,
+});
+
+describe('one plus many table cell', () => {
+	it('renders the first item as the cell value', () => {
+		const wrapper = cell([
+			lookup('First team'),
+			lookup('Second team'),
+		]);
+
+		expect(value(wrapper).text()).toBe('First team');
+	});
+
+	it('counts the items it does not show', () => {
+		const wrapper = cell([
+			lookup('a'),
+			lookup('b'),
+			lookup('c'),
+			lookup('d'),
+		]);
+
+		expect(counter(wrapper).text()).toBe('+3');
+	});
+
+	/** a single item is the whole cell value; the wrapper used to stay clickable */
+	it('draws no counter for a single item', async () => {
+		const wrapper = cell([
+			lookup('Only team'),
+		]);
+
+		expect(counter(wrapper).exists()).toBe(false);
+		expect(value(wrapper).text()).toBe('Only team');
+
+		await value(wrapper).trigger('click');
+
+		expect(wrapper.emitted('input')).toBeUndefined();
+	});
+
+	it('renders nothing at all for an empty collection', () => {
+		expect(cell([]).find('.one-plus-many-table-cell').exists()).toBe(false);
+	});
+
+	/** the handler used to sit on `wt-chip`, where a `@click` never reached the DOM */
+	it('asks to open the list when the counter is clicked', async () => {
+		const wrapper = cell([
+			lookup('a'),
+			lookup('b'),
+		]);
+
+		await counter(wrapper).trigger('click');
+
+		expect(wrapper.emitted('input')).toEqual([
+			[],
+		]);
+	});
+
+	/** `tabindex` and `keydown` used to sit on different elements */
+	it('opens the list from the keyboard too', async () => {
+		const wrapper = cell([
+			lookup('a'),
+			lookup('b'),
+		]);
+
+		expect(counter(wrapper).attributes('tabindex')).toBe('0');
+
+		await counter(wrapper).trigger('keydown.enter');
+
+		expect(wrapper.emitted('input')).toEqual([
+			[],
+		]);
+	});
+
+	it('links the shown item when it has an id and a route', () => {
+		const wrapper = cell(
+			[
+				lookup('First team', '42'),
+				lookup('Second team', '43'),
+			],
+			{
+				routeName: 'teams',
+			},
+		);
+
+		const link = wrapper.find('adm-item-link');
+
+		expect(link.text()).toBe('First team');
+		expect(link.attributes('id')).toBe('42');
+		expect(link.attributes('route-name')).toBe('teams');
+	});
+
+	/** an item without a route is not a link — the other branch of the same v-if */
+	it('renders plain text when no route is given', () => {
+		const wrapper = cell([
+			lookup('First team', '42'),
+		]);
+
+		expect(wrapper.find('adm-item-link').exists()).toBe(false);
+		expect(value(wrapper).find('span').text()).toBe('First team');
+	});
+});
diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
index 913407838..39445c9bc 100644
--- a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
+++ b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="one-plus-many-table-cell">
-    <span
-      v-if="props.collection?.length"
-      tabindex="0"
-    >
+  <div
+    v-if="props.collection?.length"
+    class="one-plus-many-table-cell"
+  >
+    <span class="one-plus-many-table-cell__value">
       <adm-item-link
         v-if="collection[0].id && routeName"
         :id="collection[0].id"
@@ -18,11 +18,14 @@
     </span>
 
     <div
+      v-if="props.collection.length > 1"
       class="one-plus-many-table-cell__chip"
+      role="button"
+      tabindex="0"
       @click.prevent="inputHandler"
       @keydown.enter.prevent="inputHandler"
     >
-      <wt-chip v-if="props.collection?.length > 1">
+      <wt-chip>
         +{{ props.collection.length - 1 }}
       </wt-chip>
     </div>

From cbe9bc896f7708825af41b71301e3a7ce4f9cb8a Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 11:08:26 +0300
Subject: [PATCH 02/10] feat: add bucket, expire and timezone columns to queue
 members [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../members/components/the-queue-members.vue  |  9 +++
 .../_internals/__tests__/headers.spec.ts      | 65 +++++++++++++++++++
 .../stores/datalist/_internals/headers.ts     | 23 +++++++
 .../_internals/__tests__/headers.spec.ts      | 12 ++--
 4 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts

diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
index c24ba26ee..15a27ebe1 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -219,6 +219,15 @@
                 {{ item.agent.name }}
               </adm-item-link>
             </template>
+            <template #bucket="{ item }">
+              {{ item.bucket?.name }}
+            </template>
+            <template #expireAt="{ item }">
+              {{ asDate(item.expireAt) }}
+            </template>
+            <template #timezone="{ item }">
+              {{ item.timezone?.name }}
+            </template>
 
             <template #column-filter="scope">
               <queue-members-column-filter v-bind="scope" />
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts
new file mode 100644
index 000000000..2248eb65a
--- /dev/null
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+
+import { headers } from '../headers';
+
+const byValue = (value: string) => {
+	const header = headers.find((h) => h.value === value);
+	if (!header) throw new Error(`no header ${value}`);
+	return header;
+};
+
+/** engine has no column to order these two by; see headers.ts */
+const notSortable = [
+	'bucket',
+	'timezone',
+];
+
+const shownValues = () =>
+	headers.filter((h) => h.show).map((h) => h.value as string);
+
+describe('queue members table headers', () => {
+	/** both the set and the order matter, so the whole list is asserted */
+	it('shows exactly the nine default columns, in order', () => {
+		expect(shownValues()).toEqual([
+			'name',
+			'createdAt',
+			'offeringAt',
+			'destination',
+			'priority',
+			'endCause',
+			'attempts',
+			'bucket',
+			'agent',
+		]);
+	});
+
+	it('offers all eleven columns to the column select', () => {
+		expect(headers.map((h) => h.value)).toEqual([
+			'name',
+			'createdAt',
+			'offeringAt',
+			'destination',
+			'priority',
+			'endCause',
+			'attempts',
+			'bucket',
+			'agent',
+			'expireAt',
+			'timezone',
+		]);
+	});
+
+	it('asks the api for the fields the new columns render from', () => {
+		expect(byValue('destination').field).toBe('communications');
+		expect(byValue('bucket').field).toBe('bucket');
+		expect(byValue('expireAt').field).toBe('expire_at');
+		expect(byValue('timezone').field).toBe('timezone');
+	});
+
+	/** only an absent `sort` blocks the click; `SortSymbols.NONE` is still clickable */
+	it('offers no sorting by bucket or timezone', () => {
+		for (const value of notSortable) {
+			expect(byValue(value).sort, `${value} is sortable`).toBeUndefined();
+		}
+	});
+});
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
index 50a27876d..1d31aa9e6 100644
--- a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
@@ -4,6 +4,7 @@ import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
 
 import { filterConfigs } from '../../../configs/filtersOptions';
 
+/** `show: false` hides by default; bucket/timezone have no `sort`, engine 500s */
 export const headers: DatalistTableHeader[] = [
 	{
 		value: 'name',
@@ -60,6 +61,15 @@ export const headers: DatalistTableHeader[] = [
 		show: true,
 		sort: SortSymbols.NONE,
 	},
+	{
+		value: 'bucket',
+		locale: [
+			'objects.lookups.buckets.buckets',
+			1,
+		],
+		field: 'bucket',
+		show: true,
+	},
 	{
 		value: 'agent',
 		locale: [
@@ -71,4 +81,17 @@ export const headers: DatalistTableHeader[] = [
 		sort: SortSymbols.NONE,
 		filter: filterConfigs[FilterOption.Agent],
 	},
+	{
+		value: 'expireAt',
+		locale: 'objects.ccenter.queues.expire',
+		field: 'expire_at',
+		show: false,
+		sort: SortSymbols.NONE,
+	},
+	{
+		value: 'timezone',
+		locale: 'objects.ccenter.queues.timezone',
+		field: 'timezone',
+		show: false,
+	},
 ];
diff --git a/src/modules/contact-center/modules/queues/stores/datalist/_internals/__tests__/headers.spec.ts b/src/modules/contact-center/modules/queues/stores/datalist/_internals/__tests__/headers.spec.ts
index 3e7d5c833..89694dc06 100644
--- a/src/modules/contact-center/modules/queues/stores/datalist/_internals/__tests__/headers.spec.ts
+++ b/src/modules/contact-center/modules/queues/stores/datalist/_internals/__tests__/headers.spec.ts
@@ -21,14 +21,12 @@ const tables = {
 };
 
 describe.each(Object.entries(tables))('%s headers', (_name, headers) => {
-	/**
-	 * `shownHeaders` is `headers.filter(h => h.show)` and `fields` is derived
-	 * from it, so a header without `show` is not merely hidden — its field is
-	 * never requested, and the column can never be switched back on.
-	 */
-	it('marks every column shown', () => {
+	/** an omitted `show` drops the column; `false` only hides it by default */
+	it('declares show on every column', () => {
 		for (const header of headers) {
-			expect(header.show, `${header.value} is not shown`).toBe(true);
+			expect(typeof header.show, `${header.value} does not declare show`).toBe(
+				'boolean',
+			);
 		}
 	});
 

From 2f6ce4e497422dec846cb4744e6e42471d6e8cf3 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 11:08:43 +0300
Subject: [PATCH 03/10] feat: rename the members destinations column and popup
 to communications
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 src/app/locale/en/en.js                        |  1 +
 src/app/locale/es/es.js                        |  1 +
 src/app/locale/kz/kz.js                        |  1 +
 src/app/locale/pl/pl.js                        |  1 +
 src/app/locale/ro/ro.js                        |  1 +
 src/app/locale/ru/ru.js                        |  1 +
 src/app/locale/uk/uk.js                        |  1 +
 src/app/locale/uz/uz.js                        |  1 +
 src/app/locale/vi/vi.js                        |  1 +
 ...e => queue-member-communications-popup.vue} | 18 ++++++++++--------
 .../members/components/the-queue-members.vue   | 16 ++++++++--------
 .../_internals/__tests__/headers.spec.ts       | 18 ++++++++++++++++++
 .../stores/datalist/_internals/headers.ts      |  6 ++----
 13 files changed, 47 insertions(+), 20 deletions(-)
 rename src/modules/contact-center/modules/queues/modules/members/components/communications/{opened-queue-member-destinations-popup.vue => queue-member-communications-popup.vue} (78%)

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index bb37d0bbc..0d268573a 100644
--- a/src/app/locale/en/en.js
+++ b/src/app/locale/en/en.js
@@ -896,6 +896,7 @@ export default {
 				allMembers: 'All members',
 				addMember: 'Add member',
 				destination: 'Destination',
+				communications: 'Communications',
 				display: 'Display number',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/es/es.js b/src/app/locale/es/es.js
index 4d6121e4d..a04213aec 100644
--- a/src/app/locale/es/es.js
+++ b/src/app/locale/es/es.js
@@ -905,6 +905,7 @@ export default {
 				allMembers: 'Todos los miembros',
 				addMember: 'Añadir miembro',
 				destination: 'Destino',
+				communications: 'Comunicaciones',
 				display: 'Número de visualización',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/kz/kz.js b/src/app/locale/kz/kz.js
index 27b1be498..cd2f36eca 100644
--- a/src/app/locale/kz/kz.js
+++ b/src/app/locale/kz/kz.js
@@ -897,6 +897,7 @@ export default {
 				allMembers: 'Барлық меншіктер',
 				addMember: 'Меншікті қосу',
 				destination: 'Мақсат',
+				communications: 'Коммуникациялар',
 				display: 'Көрсету нөмірі',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/pl/pl.js b/src/app/locale/pl/pl.js
index 1ad37277e..b83cc506e 100644
--- a/src/app/locale/pl/pl.js
+++ b/src/app/locale/pl/pl.js
@@ -900,6 +900,7 @@ export default {
 				allMembers: 'Wszystkie członkowie',
 				addMember: 'Dodaj członka',
 				destination: 'Miejsce docelowe',
+				communications: 'Komunikacja',
 				display: 'Numer wyświetlany',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/ro/ro.js b/src/app/locale/ro/ro.js
index 6a5ae4185..28a99c5e4 100644
--- a/src/app/locale/ro/ro.js
+++ b/src/app/locale/ro/ro.js
@@ -902,6 +902,7 @@ export default {
 				allMembers: 'Toți membrii',
 				addMember: 'Adaugă membru',
 				destination: 'Destinație',
+				communications: 'Comunicații',
 				display: 'Număr de afișare',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
index 54803e07a..efecbad0f 100644
--- a/src/app/locale/ru/ru.js
+++ b/src/app/locale/ru/ru.js
@@ -907,6 +907,7 @@ export default {
 				allMembers: 'Все абоненты',
 				addMember: 'добавить абонента',
 				destination: 'Назначение',
+				communications: 'Коммуникации',
 				display: 'Отображение номера',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/uk/uk.js b/src/app/locale/uk/uk.js
index 8b423e410..316c065e6 100644
--- a/src/app/locale/uk/uk.js
+++ b/src/app/locale/uk/uk.js
@@ -910,6 +910,7 @@ export default {
 				allMembers: 'Всі абоненти',
 				addMember: 'Додати абонента',
 				destination: 'Призначення',
+				communications: 'Комунікації',
 				display: 'Відображення номера',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/uz/uz.js b/src/app/locale/uz/uz.js
index a3564c66c..caea45f85 100644
--- a/src/app/locale/uz/uz.js
+++ b/src/app/locale/uz/uz.js
@@ -904,6 +904,7 @@ export default {
 				allMembers: "Barcha a'zolchalar",
 				addMember: "A'zolchaga qo'shish",
 				destination: "Ma'lumotnoma",
+				communications: 'Aloqalar',
 				display: "Ko'rsatish raqami",
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/app/locale/vi/vi.js b/src/app/locale/vi/vi.js
index 7ae293502..4366aa716 100644
--- a/src/app/locale/vi/vi.js
+++ b/src/app/locale/vi/vi.js
@@ -897,6 +897,7 @@ export default {
 				allMembers: 'Tất cả thành viên',
 				addMember: 'Thêm thành viên',
 				destination: 'Đích',
+				communications: 'Liên lạc',
 				display: 'Số hiển thị',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),
diff --git a/src/modules/contact-center/modules/queues/modules/members/components/communications/opened-queue-member-destinations-popup.vue b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
similarity index 78%
rename from src/modules/contact-center/modules/queues/modules/members/components/communications/opened-queue-member-destinations-popup.vue
rename to src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
index 8d81fb083..5ad0201f1 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/communications/opened-queue-member-destinations-popup.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
@@ -1,10 +1,10 @@
 <template>
   <wt-popup @close="emit('close')">
     <template #title>
-      {{ t('objects.ccenter.queues.destination', 2) }}
+      {{ t('objects.ccenter.members.communications') }}
     </template>
     <template #main>
-      <section class="destinations-popup">
+      <section class="communications-popup">
         <wt-table
           :data="communications"
           :grid-actions="false"
@@ -27,9 +27,6 @@
       </section>
     </template>
     <template #actions>
-      <wt-button @click="emit('close')">
-        {{ t('objects.ok') }}
-      </wt-button>
       <wt-button
         color="secondary"
         @click="emit('close')"
@@ -45,8 +42,10 @@ import type { EngineMemberCommunication } from '@webitel/api-services/gen/models
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-/** read-only list; it took a table mixin before and used nothing from it */
-defineProps<{
+/** read-only. No sorting: there is no request here to carry a `sort` — engine
+ * exposes no endpoint returning a member's communications as a list. */
+
+const { communications } = defineProps<{
 	communications: EngineMemberCommunication[];
 }>();
 
@@ -59,14 +58,17 @@ const { t } = useI18n();
 const headers = computed(() => [
 	{
 		value: 'destination',
-		text: t('objects.ccenter.queues.destination', 1),
+		field: 'destination',
+		text: t('objects.name'),
 	},
 	{
 		value: 'type',
+		field: 'type',
 		text: t('objects.ccenter.queues.type'),
 	},
 	{
 		value: 'priority',
+		field: 'priority',
 		text: t('objects.ccenter.queues.priority'),
 	},
 ]);
diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
index 15a27ebe1..b2b8b0c1c 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -49,10 +49,10 @@
     </template>
 
     <template #main>
-      <destinations-popup
-        v-if="destinationsOnPopup"
-        :communications="destinationsOnPopup"
-        @close="destinationsOnPopup = null"
+      <communications-popup
+        v-if="communicationsOnPopup"
+        :communications="communicationsOnPopup"
+        @close="communicationsOnPopup = null"
       />
 
       <upload-popup
@@ -199,8 +199,8 @@
                   v-if="item.communications.length > 1"
                   class="members__destinations-num"
                   tabindex="0"
-                  @click.prevent="destinationsOnPopup = item.communications"
-                  @keydown.enter.prevent="destinationsOnPopup = item.communications"
+                  @click.prevent="communicationsOnPopup = item.communications"
+                  @keydown.enter.prevent="communicationsOnPopup = item.communications"
                 >
                   <wt-chip>+{{ item.communications.length - 1 }}</wt-chip>
                 </div>
@@ -318,7 +318,7 @@ import {
 import { filterConfigs, filtersOptions } from '../configs/filtersOptions';
 import { useQueueMembersDatalistStore } from '../stores/datalist/queueMembersDatalistStore';
 import { ActionOptions } from '../types/ActionOptions';
-import DestinationsPopup from './communications/opened-queue-member-destinations-popup.vue';
+import CommunicationsPopup from './communications/queue-member-communications-popup.vue';
 import ExportPopup from './export-members-popup.vue';
 import QueueMembersColumnFilter from './queue-members-column-filter.vue';
 import ResetPopup from './reset-members-popup.vue';
@@ -387,7 +387,7 @@ const {
 const isFiltersPanelShown = ref(false);
 const isExportPopup = ref(false);
 const csvFile = ref<File | null>(null);
-const destinationsOnPopup = ref<EngineMemberCommunication[] | null>(null);
+const communicationsOnPopup = ref<EngineMemberCommunication[] | null>(null);
 const fileInput = useTemplateRef<HTMLInputElement>('fileInput');
 
 const path = computed(() => {
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts
index 2248eb65a..f34e91356 100644
--- a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/__tests__/headers.spec.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
+import en from '../../../../../../../../../../app/locale/en/en.js';
 import { headers } from '../headers';
 
 const byValue = (value: string) => {
@@ -17,6 +18,15 @@ const notSortable = [
 const shownValues = () =>
 	headers.filter((h) => h.show).map((h) => h.value as string);
 
+/** walks a dotted i18n path; every key used here holds a plain string */
+const localeText = (path: string) =>
+	path
+		.split('.')
+		.reduce<unknown>(
+			(node, key) => (node as Record<string, unknown> | undefined)?.[key],
+			en,
+		);
+
 describe('queue members table headers', () => {
 	/** both the set and the order matter, so the whole list is asserted */
 	it('shows exactly the nine default columns, in order', () => {
@@ -49,6 +59,14 @@ describe('queue members table headers', () => {
 		]);
 	});
 
+	/** the column is labelled Communications while the api field stays as it was */
+	it('labels the communications column Communications', () => {
+		const header = byValue('destination');
+
+		expect(header.locale).toBe('objects.ccenter.members.communications');
+		expect(localeText(header.locale as string)).toBe('Communications');
+	});
+
 	it('asks the api for the fields the new columns render from', () => {
 		expect(byValue('destination').field).toBe('communications');
 		expect(byValue('bucket').field).toBe('bucket');
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
index 1d31aa9e6..fe26cd2a4 100644
--- a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
@@ -29,11 +29,9 @@ export const headers: DatalistTableHeader[] = [
 		sort: SortSymbols.NONE,
 	},
 	{
+		/** the api field stays `communications`; only the column label changed */
 		value: 'destination',
-		locale: [
-			'objects.ccenter.queues.destination',
-			2,
-		],
+		locale: 'objects.ccenter.members.communications',
 		field: 'communications',
 		show: true,
 		sort: SortSymbols.NONE,

From 1d94af72b3db24f18c536fd55abb6856a30eb23e Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 11:08:56 +0300
Subject: [PATCH 04/10] refactor: render member communications with the
 one-plus-many cell
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../members/components/the-queue-members.vue  | 39 +++++++------------
 1 file changed, 14 insertions(+), 25 deletions(-)

diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
index b2b8b0c1c..9e359d1de 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -190,21 +190,11 @@
               </div>
             </template>
             <template #destination="{ item }">
-              <div
-                v-if="item.communications?.length"
-                class="members__destinations-wrapper"
-              >
-                <span>{{ item.communications[0].destination }}</span>
-                <div
-                  v-if="item.communications.length > 1"
-                  class="members__destinations-num"
-                  tabindex="0"
-                  @click.prevent="communicationsOnPopup = item.communications"
-                  @keydown.enter.prevent="communicationsOnPopup = item.communications"
-                >
-                  <wt-chip>+{{ item.communications.length - 1 }}</wt-chip>
-                </div>
-              </div>
+              <one-plus-many
+                :collection="communicationValues(item.communications)"
+                class="members__communications"
+                @input="communicationsOnPopup = item.communications"
+              />
             </template>
             <template #attempts="{ item }">
               {{ item.attempts || 0 }}
@@ -303,6 +293,7 @@ import {
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
+import OnePlusMany from '../../../../../../../app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue';
 import { useUserAccessControl } from '../../../../../../../app/composables/useUserAccessControl';
 import RouteNames from '../../../../../../../app/router/_internals/RouteNames.enum';
 import { useUserinfoStore } from '../../../../../../userinfo/stores/userinfoStore';
@@ -407,6 +398,12 @@ const path = computed(() => {
 	];
 });
 
+/** `one-plus-many` renders `name`; a communication has only `destination` */
+const communicationValues = (communications?: EngineMemberCommunication[]) =>
+	(communications ?? []).map(({ destination }) => ({
+		name: destination,
+	}));
+
 const asDate = (value?: number | string) =>
 	formatDate(value, FormatDateMode.DATETIME);
 
@@ -666,17 +663,9 @@ onMounted(() =>
 >
 @use '@webitel/ui-sdk/src/css/main' as *;
 
-.members__destinations-wrapper {
-  display: flex;
+/** a wrapped destination keeps the chip on its first line (WTEL-10331) */
+.members__communications {
   align-items: flex-start;
-  gap: var(--spacing-xs);
-}
-
-.members__destinations-num {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
 }
 
 .upload-file-input {

From 9414d6a7cacaa1decded7a1aeda71e67ce79e473 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 11:09:02 +0300
Subject: [PATCH 05/10] feat: sort and page the member communications popup
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../queue-member-communications-popup.vue     |  76 ++++++----
 .../members/components/the-queue-members.vue  |  11 +-
 ...eMemberCommunicationsDatalistStore.spec.ts | 138 ++++++++++++++++++
 .../_internals/communicationsHeaders.ts       |  27 ++++
 .../queueMemberCommunicationsDatalistStore.ts |  33 +++++
 5 files changed, 254 insertions(+), 31 deletions(-)
 create mode 100644 src/modules/contact-center/modules/queues/modules/members/stores/datalist/__tests__/queueMemberCommunicationsDatalistStore.spec.ts
 create mode 100644 src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts
 create mode 100644 src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts

diff --git a/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
index 5ad0201f1..bdb3d178e 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
@@ -5,12 +5,18 @@
     </template>
     <template #main>
       <section class="communications-popup">
+        <wt-loader v-if="!dataList.length && isLoading" />
         <wt-table
-          :data="communications"
+          v-else
+          :data="dataList"
           :grid-actions="false"
-          :headers="headers"
+          :headers="shownHeaders"
+          :lazy="true"
+          :on-loading="loadNextPage"
           :selectable="false"
           class="popup-table"
+          sortable
+          @sort="updateSort"
         >
           <template #destination="{ item }">
             {{ item.destination }}
@@ -38,15 +44,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { EngineMemberCommunication } from '@webitel/api-services/gen/models';
-import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-/** read-only. No sorting: there is no request here to carry a `sort` — engine
- * exposes no endpoint returning a member's communications as a list. */
+import { useQueueMemberCommunicationsDatalistStore } from '../../stores/datalist/queueMemberCommunicationsDatalistStore';
 
-const { communications } = defineProps<{
-	communications: EngineMemberCommunication[];
+const { queueId, memberId } = defineProps<{
+	queueId: string | number;
+	memberId: string;
 }>();
 
 const emit = defineEmits<{
@@ -55,23 +61,41 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const headers = computed(() => [
-	{
-		value: 'destination',
-		field: 'destination',
-		text: t('objects.name'),
-	},
-	{
-		value: 'type',
-		field: 'type',
-		text: t('objects.ccenter.queues.type'),
-	},
-	{
-		value: 'priority',
-		field: 'priority',
-		text: t('objects.ccenter.queues.priority'),
-	},
-]);
+const store = useQueueMemberCommunicationsDatalistStore();
+const { dataList, isLoading, next, shownHeaders } = storeToRefs(store);
+const {
+	initialize,
+	appendToDataList,
+	updateSort,
+	hasFilter,
+	addFilter,
+	updateFilter,
+	$reset,
+} = store;
+
+const loadNextPage = () => {
+	if (!next.value || isLoading.value) return;
+	return appendToDataList();
+};
+
+const queueFilter = {
+	name: 'queueId',
+	value: queueId,
+};
+if (hasFilter(queueFilter.name)) updateFilter(queueFilter);
+else addFilter(queueFilter);
+
+initialize({
+	parentId: memberId,
+});
+
+// the store outlives the popup; the next member must not see these rows
+onUnmounted($reset);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/** `lazy` scroller has `contain: strict`, so it needs a fixed height */
+.communications-popup {
+  height: 35vh;
+}
+</style>
diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
index 9e359d1de..fc68df340 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -50,9 +50,10 @@
 
     <template #main>
       <communications-popup
-        v-if="communicationsOnPopup"
-        :communications="communicationsOnPopup"
-        @close="communicationsOnPopup = null"
+        v-if="communicationsMemberId"
+        :member-id="communicationsMemberId"
+        :queue-id="queueId"
+        @close="communicationsMemberId = null"
       />
 
       <upload-popup
@@ -193,7 +194,7 @@
               <one-plus-many
                 :collection="communicationValues(item.communications)"
                 class="members__communications"
-                @input="communicationsOnPopup = item.communications"
+                @input="communicationsMemberId = item.id"
               />
             </template>
             <template #attempts="{ item }">
@@ -378,7 +379,7 @@ const {
 const isFiltersPanelShown = ref(false);
 const isExportPopup = ref(false);
 const csvFile = ref<File | null>(null);
-const communicationsOnPopup = ref<EngineMemberCommunication[] | null>(null);
+const communicationsMemberId = ref<string | null>(null);
 const fileInput = useTemplateRef<HTMLInputElement>('fileInput');
 
 const path = computed(() => {
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/__tests__/queueMemberCommunicationsDatalistStore.spec.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/__tests__/queueMemberCommunicationsDatalistStore.spec.ts
new file mode 100644
index 000000000..3c984611d
--- /dev/null
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/__tests__/queueMemberCommunicationsDatalistStore.spec.ts
@@ -0,0 +1,138 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { unref } from 'vue';
+
+const getCommunications = vi.fn();
+
+vi.mock('@webitel/api-services/api', () => ({
+	QueueMembersAPI: {
+		getCommunications,
+	},
+}));
+
+const {
+	getMemberCommunicationsList,
+	useQueueMemberCommunicationsDatalistStore,
+} = await import('../queueMemberCommunicationsDatalistStore');
+
+const lastRequest = () => getCommunications.mock.lastCall?.[0];
+
+/** what the popup does on open: the queue as a filter, the member as the parent */
+const open = (
+	store: ReturnType<typeof useQueueMemberCommunicationsDatalistStore>,
+	memberId = '42',
+) => {
+	const queueFilter = {
+		name: 'queueId',
+		value: '7',
+	};
+	if (store.hasFilter(queueFilter.name)) store.updateFilter(queueFilter);
+	else store.addFilter(queueFilter);
+	return store.initialize({
+		parentId: memberId,
+	});
+};
+
+describe('queue member communications datalist store', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+		getCommunications.mockReset().mockResolvedValue({
+			items: [
+				{
+					id: '1',
+				},
+			],
+			next: true,
+		});
+	});
+
+	it('requests the member of the queue', async () => {
+		const store = useQueueMemberCommunicationsDatalistStore();
+
+		await open(store);
+
+		expect(lastRequest()).toMatchObject({
+			parentId: '7',
+			memberId: '42',
+			page: 1,
+		});
+		expect(store.dataList).toHaveLength(1);
+	});
+
+	it('passes the sort and the page through to the api', async () => {
+		await getMemberCommunicationsList({
+			parentId: '42',
+			queueId: '7',
+			page: 2,
+			size: 10,
+			sort: '-destination',
+		});
+
+		expect(lastRequest()).toEqual({
+			parentId: '7',
+			memberId: '42',
+			page: 2,
+			size: 10,
+			sort: '-destination',
+		});
+	});
+
+	/** `field` goes out as the sort key; engine sorts by exactly these three */
+	it('sorts by destination, type and priority', () => {
+		const store = useQueueMemberCommunicationsDatalistStore();
+
+		expect(unref(store.headers).map((header) => header.field)).toEqual([
+			'destination',
+			'type',
+			'priority',
+		]);
+	});
+
+	it('appends the next page', async () => {
+		const store = useQueueMemberCommunicationsDatalistStore();
+		await open(store);
+		getCommunications.mockResolvedValue({
+			items: [
+				{
+					id: '2',
+				},
+			],
+			next: false,
+		});
+
+		await store.appendToDataList();
+
+		expect(lastRequest()).toMatchObject({
+			page: 2,
+		});
+		expect(unref(store.dataList).map(({ id }) => id)).toEqual([
+			'1',
+			'2',
+		]);
+		expect(store.next).toBe(false);
+	});
+
+	/** the store outlives the popup, so another member must not see these rows */
+	it('drops the rows on reset', async () => {
+		const store = useQueueMemberCommunicationsDatalistStore();
+		await open(store);
+
+		store.$reset();
+
+		expect(store.dataList).toEqual([]);
+	});
+
+	/** a reopened popup must ask for the new member, still in the same queue */
+	it('requests the next member after a reset', async () => {
+		const store = useQueueMemberCommunicationsDatalistStore();
+		await open(store);
+		store.$reset();
+
+		await open(store, '43');
+
+		expect(lastRequest()).toMatchObject({
+			parentId: '7',
+			memberId: '43',
+		});
+	});
+});
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts
new file mode 100644
index 000000000..4ad653f70
--- /dev/null
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts
@@ -0,0 +1,27 @@
+import type { DatalistTableHeader } from '@webitel/ui-datalist';
+import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+
+/** `field` is also the engine sort key: `destination`, `type`, `priority` */
+export const communicationsHeaders: DatalistTableHeader[] = [
+	{
+		value: 'destination',
+		locale: 'objects.name',
+		field: 'destination',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+	{
+		value: 'type',
+		locale: 'objects.ccenter.queues.type',
+		field: 'type',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+	{
+		value: 'priority',
+		locale: 'objects.ccenter.queues.priority',
+		field: 'priority',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+];
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts
new file mode 100644
index 000000000..fffc0649b
--- /dev/null
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts
@@ -0,0 +1,33 @@
+import { QueueMembersAPI } from '@webitel/api-services/api';
+import type { EngineMemberCommunication } from '@webitel/api-services/gen/models';
+import { createTableStore } from '@webitel/ui-datalist';
+
+import { QueueMembersNamespace } from '../namespace';
+import { communicationsHeaders } from './_internals/communicationsHeaders';
+
+/** `parentId` is the member; the queue comes as a `queueId` filter, as in crm timeline */
+export const getMemberCommunicationsList = ({
+	parentId,
+	queueId,
+	...params
+}: Record<string, unknown>) =>
+	QueueMembersAPI.getCommunications({
+		...params,
+		parentId: queueId as string,
+		memberId: parentId as string,
+	});
+
+/** one member's communications popup; no URL/localStorage persistence */
+export const useQueueMemberCommunicationsDatalistStore =
+	createTableStore<EngineMemberCommunication>(
+		`${QueueMembersNamespace}/communications/datalist`,
+		{
+			apiModule: {
+				getList: getMemberCommunicationsList,
+			},
+			headers: communicationsHeaders,
+			disablePersistence: true,
+			// `lazy` table: a next page is appended, not swapped in
+			isAppendDataList: true,
+		},
+	);

From e1ba8fb3c34ddfc5fe493c2671b9140615253e05 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 16:44:56 +0300
Subject: [PATCH 06/10] fix: address review comments
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../one-plus-many-table-cell.vue              |  1 -
 .../queue-member-communications-popup.vue     | 84 ++++++++++++-------
 .../members/components/the-queue-members.vue  |  6 +-
 .../_internals/communicationsHeaders.ts       |  1 -
 .../stores/datalist/_internals/headers.ts     |  2 -
 .../queueMemberCommunicationsDatalistStore.ts |  3 -
 6 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
index 39445c9bc..581dce291 100644
--- a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
+++ b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
@@ -20,7 +20,6 @@
     <div
       v-if="props.collection.length > 1"
       class="one-plus-many-table-cell__chip"
-      role="button"
       tabindex="0"
       @click.prevent="inputHandler"
       @keydown.enter.prevent="inputHandler"
diff --git a/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
index bdb3d178e..a7b6f31d8 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
@@ -4,32 +4,40 @@
       {{ t('objects.ccenter.members.communications') }}
     </template>
     <template #main>
-      <section class="communications-popup">
-        <wt-loader v-if="!dataList.length && isLoading" />
-        <wt-table
-          v-else
-          :data="dataList"
-          :grid-actions="false"
-          :headers="shownHeaders"
-          :lazy="true"
-          :on-loading="loadNextPage"
-          :selectable="false"
-          class="popup-table"
-          sortable
-          @sort="updateSort"
+      <section class="queue-member-communications-popup table-section">
+        <div
+          class="table-section__table-wrapper queue-member-communications-popup__table-wrapper"
         >
-          <template #destination="{ item }">
-            {{ item.destination }}
-          </template>
-          <template #type="{ item }">
-            <div v-if="item.type">
-              {{ item.type.name }}
-            </div>
-          </template>
-          <template #priority="{ item }">
-            {{ item.priority }}
-          </template>
-        </wt-table>
+          <wt-loader v-if="!dataList.length && isLoading" />
+          <wt-empty
+            v-else-if="showEmpty"
+            :image="imageEmpty"
+            :text="textEmpty"
+          />
+          <wt-table
+            v-else
+            :data="dataList"
+            :grid-actions="false"
+            :headers="shownHeaders"
+            :lazy="true"
+            :on-loading="loadNextPage"
+            :selectable="false"
+            sortable
+            @sort="updateSort"
+          >
+            <template #destination="{ item }">
+              {{ item.destination }}
+            </template>
+            <template #type="{ item }">
+              <div v-if="item.type">
+                {{ item.type.name }}
+              </div>
+            </template>
+            <template #priority="{ item }">
+              {{ item.priority }}
+            </template>
+          </wt-table>
+        </div>
       </section>
     </template>
     <template #actions>
@@ -44,6 +52,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useTableEmpty } from '@webitel/ui-sdk/src/modules/TableComponentModule/composables/useTableEmpty';
 import { storeToRefs } from 'pinia';
 import { onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -61,8 +70,11 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const store = useQueueMemberCommunicationsDatalistStore();
-const { dataList, isLoading, next, shownHeaders } = storeToRefs(store);
+const queueMemberCommunicationsDatalistStore =
+	useQueueMemberCommunicationsDatalistStore();
+const { dataList, error, isLoading, next, shownHeaders } = storeToRefs(
+	queueMemberCommunicationsDatalistStore,
+);
 const {
 	initialize,
 	appendToDataList,
@@ -71,7 +83,17 @@ const {
 	addFilter,
 	updateFilter,
 	$reset,
-} = store;
+} = queueMemberCommunicationsDatalistStore;
+
+const {
+	showEmpty,
+	image: imageEmpty,
+	text: textEmpty,
+} = useTableEmpty({
+	dataList,
+	error,
+	isLoading,
+});
 
 const loadNextPage = () => {
 	if (!next.value || isLoading.value) return;
@@ -89,13 +111,11 @@ initialize({
 	parentId: memberId,
 });
 
-// the store outlives the popup; the next member must not see these rows
 onUnmounted($reset);
 </script>
 
 <style lang="scss" scoped>
-/** `lazy` scroller has `contain: strict`, so it needs a fixed height */
-.communications-popup {
-  height: 35vh;
+.queue-member-communications-popup__table-wrapper {
+  flex: 0 0 440px;
 }
 </style>
diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
index fc68df340..51ec705db 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -193,7 +193,7 @@
             <template #destination="{ item }">
               <one-plus-many
                 :collection="communicationValues(item.communications)"
-                class="members__communications"
+                class="the-queue-members__communications"
                 @input="communicationsMemberId = item.id"
               />
             </template>
@@ -399,7 +399,6 @@ const path = computed(() => {
 	];
 });
 
-/** `one-plus-many` renders `name`; a communication has only `destination` */
 const communicationValues = (communications?: EngineMemberCommunication[]) =>
 	(communications ?? []).map(({ destination }) => ({
 		name: destination,
@@ -664,8 +663,7 @@ onMounted(() =>
 >
 @use '@webitel/ui-sdk/src/css/main' as *;
 
-/** a wrapped destination keeps the chip on its first line (WTEL-10331) */
-.members__communications {
+.the-queue-members__communications {
   align-items: flex-start;
 }
 
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts
index 4ad653f70..e5b3d9190 100644
--- a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/communicationsHeaders.ts
@@ -1,7 +1,6 @@
 import type { DatalistTableHeader } from '@webitel/ui-datalist';
 import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
 
-/** `field` is also the engine sort key: `destination`, `type`, `priority` */
 export const communicationsHeaders: DatalistTableHeader[] = [
 	{
 		value: 'destination',
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
index fe26cd2a4..543b49bab 100644
--- a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/_internals/headers.ts
@@ -4,7 +4,6 @@ import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
 
 import { filterConfigs } from '../../../configs/filtersOptions';
 
-/** `show: false` hides by default; bucket/timezone have no `sort`, engine 500s */
 export const headers: DatalistTableHeader[] = [
 	{
 		value: 'name',
@@ -29,7 +28,6 @@ export const headers: DatalistTableHeader[] = [
 		sort: SortSymbols.NONE,
 	},
 	{
-		/** the api field stays `communications`; only the column label changed */
 		value: 'destination',
 		locale: 'objects.ccenter.members.communications',
 		field: 'communications',
diff --git a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts
index fffc0649b..8861eda18 100644
--- a/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts
+++ b/src/modules/contact-center/modules/queues/modules/members/stores/datalist/queueMemberCommunicationsDatalistStore.ts
@@ -5,7 +5,6 @@ import { createTableStore } from '@webitel/ui-datalist';
 import { QueueMembersNamespace } from '../namespace';
 import { communicationsHeaders } from './_internals/communicationsHeaders';
 
-/** `parentId` is the member; the queue comes as a `queueId` filter, as in crm timeline */
 export const getMemberCommunicationsList = ({
 	parentId,
 	queueId,
@@ -17,7 +16,6 @@ export const getMemberCommunicationsList = ({
 		memberId: parentId as string,
 	});
 
-/** one member's communications popup; no URL/localStorage persistence */
 export const useQueueMemberCommunicationsDatalistStore =
 	createTableStore<EngineMemberCommunication>(
 		`${QueueMembersNamespace}/communications/datalist`,
@@ -27,7 +25,6 @@ export const useQueueMemberCommunicationsDatalistStore =
 			},
 			headers: communicationsHeaders,
 			disablePersistence: true,
-			// `lazy` table: a next page is appended, not swapped in
 			isAppendDataList: true,
 		},
 	);

From edf84ee191cce01ecc313823d6717a216733eb24 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Fri, 2 Oct 2026 16:44:57 +0300
Subject: [PATCH 07/10] chore: bump @webitel/api-services to 26.8.66
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d78b14c39..c10b9ea61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4006,9 +4006,9 @@
 			}
 		},
 		"node_modules/@webitel/api-services": {
-			"version": "26.8.63",
-			"resolved": "https://registry.npmjs.org/@webitel/api-services/-/api-services-26.8.63.tgz",
-			"integrity": "sha512-lF5aKHZ9yfSUpl/S6repmZprR1Pik7Cz63JSPjMhYYIKGwPKm59erC8jNAqd1NfEuTYj/J7h0CT5O7CCyQiLrA==",
+			"version": "26.8.66",
+			"resolved": "https://registry.npmjs.org/@webitel/api-services/-/api-services-26.8.66.tgz",
+			"integrity": "sha512-O8Fl225vB7LI1aJAU6j7D1vjvz4v4nNvzF5mGexkaTmSAB9mZBXKtM+5+GLWjG5Uz2eD5BngE8+qhWIQQgwUfg==",
 			"dependencies": {
 				"date-fns": "^4.1.0",
 				"date-fns-tz": "^3.2.0",

From b6549963cc67d78935e824b53bb98c9d8af1e6da Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Sat, 3 Oct 2026 18:45:42 +0300
Subject: [PATCH 08/10] fix: move the communications popup class onto wt-popup
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../communications/queue-member-communications-popup.vue   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
index a7b6f31d8..65dada236 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/communications/queue-member-communications-popup.vue
@@ -1,10 +1,13 @@
 <template>
-  <wt-popup @close="emit('close')">
+  <wt-popup
+    class="queue-member-communications-popup"
+    @close="emit('close')"
+  >
     <template #title>
       {{ t('objects.ccenter.members.communications') }}
     </template>
     <template #main>
-      <section class="queue-member-communications-popup table-section">
+      <section class="queue-member-communications-popup__wrapper table-section">
         <div
           class="table-section__table-wrapper queue-member-communications-popup__table-wrapper"
         >

From 276fc99ea1dd662c6bb030453a11d94f0d976e11 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Sat, 3 Oct 2026 18:45:43 +0300
Subject: [PATCH 09/10] refactor: render member communications with
 wt-display-chip-items
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 .../one-plus-many-table-cell.spec.ts          | 133 ------------------
 .../one-plus-many-table-cell.vue              |  14 +-
 .../members/components/the-queue-members.vue  |  26 ++--
 3 files changed, 24 insertions(+), 149 deletions(-)
 delete mode 100644 src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts

diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts b/src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts
deleted file mode 100644
index 464cff718..000000000
--- a/src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-
-import Cell from '../one-plus-many-table-cell.vue';
-
-/** `wt-*` stay unresolved under @vue/compat, so tests assert plain DOM */
-
-interface Item {
-	id?: string;
-	name?: string;
-}
-
-const cell = (
-	collection: Item[],
-	options: {
-		routeName?: string;
-	} = {},
-) =>
-	mount(Cell, {
-		props: {
-			collection,
-			routeName: options.routeName ?? null,
-		},
-	});
-
-const value = (wrapper: ReturnType<typeof cell>) =>
-	wrapper.find('.one-plus-many-table-cell__value');
-
-const counter = (wrapper: ReturnType<typeof cell>) =>
-	wrapper.find('.one-plus-many-table-cell__chip');
-
-const lookup = (name: string, id?: string): Item => ({
-	id,
-	name,
-});
-
-describe('one plus many table cell', () => {
-	it('renders the first item as the cell value', () => {
-		const wrapper = cell([
-			lookup('First team'),
-			lookup('Second team'),
-		]);
-
-		expect(value(wrapper).text()).toBe('First team');
-	});
-
-	it('counts the items it does not show', () => {
-		const wrapper = cell([
-			lookup('a'),
-			lookup('b'),
-			lookup('c'),
-			lookup('d'),
-		]);
-
-		expect(counter(wrapper).text()).toBe('+3');
-	});
-
-	/** a single item is the whole cell value; the wrapper used to stay clickable */
-	it('draws no counter for a single item', async () => {
-		const wrapper = cell([
-			lookup('Only team'),
-		]);
-
-		expect(counter(wrapper).exists()).toBe(false);
-		expect(value(wrapper).text()).toBe('Only team');
-
-		await value(wrapper).trigger('click');
-
-		expect(wrapper.emitted('input')).toBeUndefined();
-	});
-
-	it('renders nothing at all for an empty collection', () => {
-		expect(cell([]).find('.one-plus-many-table-cell').exists()).toBe(false);
-	});
-
-	/** the handler used to sit on `wt-chip`, where a `@click` never reached the DOM */
-	it('asks to open the list when the counter is clicked', async () => {
-		const wrapper = cell([
-			lookup('a'),
-			lookup('b'),
-		]);
-
-		await counter(wrapper).trigger('click');
-
-		expect(wrapper.emitted('input')).toEqual([
-			[],
-		]);
-	});
-
-	/** `tabindex` and `keydown` used to sit on different elements */
-	it('opens the list from the keyboard too', async () => {
-		const wrapper = cell([
-			lookup('a'),
-			lookup('b'),
-		]);
-
-		expect(counter(wrapper).attributes('tabindex')).toBe('0');
-
-		await counter(wrapper).trigger('keydown.enter');
-
-		expect(wrapper.emitted('input')).toEqual([
-			[],
-		]);
-	});
-
-	it('links the shown item when it has an id and a route', () => {
-		const wrapper = cell(
-			[
-				lookup('First team', '42'),
-				lookup('Second team', '43'),
-			],
-			{
-				routeName: 'teams',
-			},
-		);
-
-		const link = wrapper.find('adm-item-link');
-
-		expect(link.text()).toBe('First team');
-		expect(link.attributes('id')).toBe('42');
-		expect(link.attributes('route-name')).toBe('teams');
-	});
-
-	/** an item without a route is not a link — the other branch of the same v-if */
-	it('renders plain text when no route is given', () => {
-		const wrapper = cell([
-			lookup('First team', '42'),
-		]);
-
-		expect(wrapper.find('adm-item-link').exists()).toBe(false);
-		expect(value(wrapper).find('span').text()).toBe('First team');
-	});
-});
diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
index 581dce291..913407838 100644
--- a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
+++ b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
@@ -1,9 +1,9 @@
 <template>
-  <div
-    v-if="props.collection?.length"
-    class="one-plus-many-table-cell"
-  >
-    <span class="one-plus-many-table-cell__value">
+  <div class="one-plus-many-table-cell">
+    <span
+      v-if="props.collection?.length"
+      tabindex="0"
+    >
       <adm-item-link
         v-if="collection[0].id && routeName"
         :id="collection[0].id"
@@ -18,13 +18,11 @@
     </span>
 
     <div
-      v-if="props.collection.length > 1"
       class="one-plus-many-table-cell__chip"
-      tabindex="0"
       @click.prevent="inputHandler"
       @keydown.enter.prevent="inputHandler"
     >
-      <wt-chip>
+      <wt-chip v-if="props.collection?.length > 1">
         +{{ props.collection.length - 1 }}
       </wt-chip>
     </div>
diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
index 51ec705db..a80dbad43 100644
--- a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
+++ b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -191,11 +191,21 @@
               </div>
             </template>
             <template #destination="{ item }">
-              <one-plus-many
-                :collection="communicationValues(item.communications)"
-                class="the-queue-members__communications"
-                @input="communicationsMemberId = item.id"
-              />
+              <wt-display-chip-items
+                :items="communicationValues(item.communications)"
+              >
+                <template #activator>
+                  <div
+                    v-if="item.communications?.length > 1"
+                    class="the-queue-members__communications-counter"
+                    tabindex="0"
+                    @click="communicationsMemberId = item.id"
+                    @keydown.enter="communicationsMemberId = item.id"
+                  >
+                    <wt-chip>+{{ item.communications.length - 1 }}</wt-chip>
+                  </div>
+                </template>
+              </wt-display-chip-items>
             </template>
             <template #attempts="{ item }">
               {{ item.attempts || 0 }}
@@ -278,6 +288,7 @@ import {
 	DynamicFilterSearchComponent as DynamicFilterSearch,
 	TableFiltersPanelComponent as TableFiltersPanel,
 } from '@webitel/ui-datalist/filters';
+import { WtDisplayChipItems } from '@webitel/ui-sdk/components';
 import { FormatDateMode, IconAction } from '@webitel/ui-sdk/enums';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
@@ -294,7 +305,6 @@ import {
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import OnePlusMany from '../../../../../../../app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue';
 import { useUserAccessControl } from '../../../../../../../app/composables/useUserAccessControl';
 import RouteNames from '../../../../../../../app/router/_internals/RouteNames.enum';
 import { useUserinfoStore } from '../../../../../../userinfo/stores/userinfoStore';
@@ -663,8 +673,8 @@ onMounted(() =>
 >
 @use '@webitel/ui-sdk/src/css/main' as *;
 
-.the-queue-members__communications {
-  align-items: flex-start;
+.the-queue-members__communications-counter {
+  cursor: pointer;
 }
 
 .upload-file-input {

From 942f0d8a1b221eb3f31f8513d2bf9ceb96ca8289 Mon Sep 17 00:00:00 2001
From: Roman Zaritskyi <r.zaritskyi@steel.mil.ua>
Date: Sat, 3 Oct 2026 19:06:34 +0300
Subject: [PATCH 10/10] chore: bump @webitel/api-services to 26.8.68
 [WTEL-10231](https://webitel.atlassian.net/browse/WTEL-10231)

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 768ca8a9b..29630d587 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4006,9 +4006,9 @@
 			}
 		},
 		"node_modules/@webitel/api-services": {
-			"version": "26.8.67",
-			"resolved": "https://registry.npmjs.org/@webitel/api-services/-/api-services-26.8.67.tgz",
-			"integrity": "sha512-SyslVNA4beyveqSfWySE7yuNPX8k29fX06Sll+5dPoq2kQHhv4lBoBFa7aASoF1EkR83qu2in8843WP50JQhyw==",
+			"version": "26.8.68",
+			"resolved": "https://registry.npmjs.org/@webitel/api-services/-/api-services-26.8.68.tgz",
+			"integrity": "sha512-X86BZSsLBBwnXs65Q4QBFE8414OZL1uysNKFD1KoookDxKHGT3QGgu+l8IOBuX0P3/YBPfGqidcyJGufeRzKOQ==",
 			"dependencies": {
 				"date-fns": "^4.1.0",
 				"date-fns-tz": "^3.2.0",