Feature/wtel 10232/member columns

src/app/components/utils/table-cell/one-plus-many-table-cell/__tests__/one-plus-many-table-cell.spec.ts

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import Cell from '../one-plus-many-table-cell.vue';
+
+/** `wt-chip` and `adm-item-link` stay unresolved under @vue/compat — stubs do
+ * not reach the SFC, so assertions target 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');
+	});
+});

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>

src/app/locale/en/en.js

@@ -894,6 +894,7 @@ export default {
 				allMembers: 'All members',
 				addMember: 'Add member',
 				destination: 'Destination',
+				communications: 'Communications',
 				display: 'Display number',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),

src/app/locale/es/es.js

@@ -903,6 +903,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'),

src/app/locale/kz/kz.js

@@ -895,6 +895,7 @@ export default {
 				allMembers: 'Барлық меншіктер',
 				addMember: 'Меншікті қосу',
 				destination: 'Мақсат',
+				communications: 'Коммуникациялар',
 				display: 'Көрсету нөмірі',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),

src/app/locale/pl/pl.js

@@ -898,6 +898,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'),

src/app/locale/ro/ro.js

@@ -900,6 +900,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'),

src/app/locale/ru/ru.js

@@ -905,6 +905,7 @@ export default {
 				allMembers: 'Все абоненты',
 				addMember: 'добавить абонента',
 				destination: 'Назначение',
+				communications: 'Коммуникации',
 				display: 'Отображение номера',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),

src/app/locale/uk/uk.js

@@ -908,6 +908,7 @@ export default {
 				allMembers: 'Всі абоненти',
 				addMember: 'Додати абонента',
 				destination: 'Призначення',
+				communications: 'Комунікації',
 				display: 'Відображення номера',
 				dtmf: 'DTMF',
 				priority: ({ linked }) => linked('objects.memberPriority'),

src/app/locale/uz/uz.js

@@ -902,6 +902,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'),

src/app/locale/vi/vi.js

@@ -895,6 +895,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'),

src/modules/contact-center/modules/queues/modules/members/components/communications/opened-queue-member-communication-popup.vue

@@ -68,11 +68,11 @@
 </template>
 
 <script lang="ts" setup>
+import { useRegleSchema } from '@regle/schemas';
 import {
 	CommunicationsAPI,
 	OutboundResourcesAPI as ResourcesAPI,
 } from '@webitel/api-services/api';
-import { useRegleSchema } from '@regle/schemas';
 import type { EngineMemberCommunication } from '@webitel/api-services/gen/models';
 import { memberCommunicationSchema } from '@webitel/api-services/validations';
 import { useClose } from '@webitel/ui-sdk/composables';

src/modules/contact-center/modules/queues/modules/members/components/communications/opened-queue-member-destinations-popup.vue → 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'),
 	},
 ]);