@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Tables/common/tests/TableHeader.spec.ts

@@ -0,0 +1,272 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import TableHeader from '../TableHeader.vue'
+import type { SortOptions } from '../types'
+import type { VDataTable } from 'vuetify/components'
+
+describe('TableHeader', () => {
+	// Test for basic rendering
+	it('renders correctly with basic props', () => {
+		const column = {
+			title: 'Test Column',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'Test Column',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => false,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Test Column')
+		expect(wrapper.find('.v-data-table-header__sort-icon').exists()).toBe(true)
+	})
+
+	// Test for multi-sort priority indicators
+	it('displays sort order indicator when multi-sort is active', async () => {
+		const column = {
+			title: 'Test Column',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [
+						{ key: 'other', order: 'asc' } as SortOptions,
+						{ key: 'test', order: 'asc' } as SortOptions,
+					],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'Test Column',
+							sortable: true,
+						},
+						{
+							key: 'other',
+							value: 'other',
+							title: 'Other Column',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check if the sort order indicator is displayed
+		expect(wrapper.find('.sort-order-indicator').exists()).toBe(true)
+		// Check if the sort order indicator shows the correct number (2 in this case)
+		expect(wrapper.find('.sort-order-indicator').text()).toBe('2')
+	})
+
+	// Test for no sort order indicator when only one column is sorted
+	it('does not display sort order indicator when only one column is sorted', async () => {
+		const column = {
+			title: 'Test Column',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [
+						{ key: 'test', order: 'asc' } as SortOptions,
+					],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'Test Column',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check that the sort order indicator is not displayed
+		expect(wrapper.find('.sort-order-indicator').exists()).toBe(false)
+	})
+
+	// Test for correct sort order when multiple columns are sorted
+	it('displays correct sort order numbers for multiple sorted columns', async () => {
+		const columns = [
+			{
+				key: 'first',
+				value: 'first',
+				title: 'First Column',
+				sortable: true,
+			},
+			{
+				key: 'second',
+				value: 'second',
+				title: 'Second Column',
+				sortable: true,
+			},
+			{
+				key: 'third',
+				value: 'third',
+				title: 'Third Column',
+				sortable: true,
+			},
+		]
+
+		const sortBy: SortOptions[] = [
+			{ key: 'first', order: 'asc' },
+			{ key: 'second', order: 'desc' },
+			{ key: 'third', order: 'asc' },
+		]
+
+		// First column (sort order 1)
+		const firstColumn = {
+			title: 'First Column',
+			key: 'first',
+			value: 'first',
+			sortable: true,
+		}
+
+		const firstWrapper = mount(TableHeader, {
+			props: {
+				column: firstColumn,
+				headerParams: {
+					sortBy,
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns,
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Second column (sort order 2)
+		const secondColumn = {
+			title: 'Second Column',
+			key: 'second',
+			value: 'second',
+			sortable: true,
+		}
+
+		const secondWrapper = mount(TableHeader, {
+			props: {
+				column: secondColumn,
+				headerParams: {
+					sortBy,
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns,
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Third column (sort order 3)
+		const thirdColumn = {
+			title: 'Third Column',
+			key: 'third',
+			value: 'third',
+			sortable: true,
+		}
+
+		const thirdWrapper = mount(TableHeader, {
+			props: {
+				column: thirdColumn,
+				headerParams: {
+					sortBy,
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns,
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check that each column shows the correct sort order number
+		expect(firstWrapper.find('.sort-order-indicator').text()).toBe('1')
+		expect(secondWrapper.find('.sort-order-indicator').text()).toBe('2')
+		expect(thirdWrapper.find('.sort-order-indicator').text()).toBe('3')
+	})
+})

package/src/components/Tables/common/tests/filterByRange.spec.ts

@@ -0,0 +1,215 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import SyTable from '../../SyTable/SyTable.vue'
+import DateFilter from '../filters/DateFilter.vue'
+import NumberFilter from '../filters/NumberFilter.vue'
+import PeriodFilter from '../filters/PeriodFilter.vue'
+import SelectFilter from '../filters/SelectFilter.vue'
+import TextFilter from '../filters/TextFilter.vue'
+
+const headers = [
+	{
+		title: 'Nom',
+		key: 'name',
+		filterable: true,
+		filterType: 'text' as const,
+	},
+	{
+		title: 'Date de naissance',
+		key: 'birthdate',
+		filterable: true,
+		filterType: 'period' as const,
+	},
+]
+
+const items = [
+	{
+		name: 'Alice',
+		birthdate: '1990-01-01',
+	},
+	{
+		name: 'Bob',
+		birthdate: '1985-05-15',
+	},
+	{
+		name: 'Charlie',
+		birthdate: '2000-12-31',
+	},
+	{
+		name: 'David',
+		birthdate: '1995-07-20',
+	},
+]
+
+describe('SyTable - filterByRange', () => {
+	vi.mock('../../common/filters/getFilterComponent', () => {
+		return {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			default: (filterType?: string, filterOptions?: unknown) => {
+				if (filterType === 'select') {
+					return SelectFilter
+				}
+				else if (filterType === 'date') {
+					return DateFilter
+				}
+				else if (filterType === 'period') {
+					return PeriodFilter
+				}
+				else if (filterType === 'number') {
+					return NumberFilter
+				}
+				else {
+					return TextFilter
+				}
+			},
+		}
+	})
+	afterAll(() => {
+		vi.resetModules()
+	})
+
+	it('filter by max date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Alice', 'Bob', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Charlie']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('filter by min date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1995')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Charlie', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Alice', 'Bob']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('filter by min and max date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1989')
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Alice', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Charlie', 'Bob']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('updates the items when date changes', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1990')
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		let filteredNames = ['Alice', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		let notFilteredNames = ['Bob', 'Charlie']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+
+		await endDate.setValue('01/01/1995')
+
+		filteredNames = ['Alice']
+		filteredNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+		notFilteredNames = ['Bob', 'Charlie', 'David']
+		notFilteredNames.forEach((element) => {
+			expect(wrapper.text()).not.toContain(element)
+		})
+	})
+})

package/src/components/Tables/common/tests/tableFilterUtils.spec.ts

@@ -59,20 +59,6 @@ describe('tableFilterUtils', () => {
 			expect(result[0].id).toBe(2)
 		})
 
-		it('should filter by period correctly', () => {
-			const filters: FilterOption[] = [
-				{
-					key: 'vacationPeriod',
-					value: { from: '01/07/2023', to: '31/07/2023' },
-					type: 'period',
-				},
-			]
-			const result = filterItems(testItems, filters)
-			expect(result).toHaveLength(2)
-			expect(result.map(item => item.id)).toContain(1)
-			expect(result.map(item => item.id)).toContain(3)
-		})
-
 		it('should apply multiple filters correctly', () => {
 			const filters: FilterOption[] = [
 				{ key: 'department', value: 'IT', type: 'select' },

package/src/components/Tables/common/tests/tableUtils.spec.ts

@@ -48,49 +48,6 @@ describe('tableUtils', () => {
 		expect(storageKey.value).toBe('table')
 	})
 
-	it('should transform headers correctly', () => {
-		const options = ref<Partial<DataOptions>>({})
-		const componentAttributes = {
-			headers: [
-				{
-					text: 'ID',
-					key: 'id',
-				},
-				{
-					title: 'Name',
-					key: 'name',
-				},
-				{
-					key: 'age',
-				},
-			],
-		}
-
-		const { headers } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
-			componentAttributes,
-			options,
-		})
-
-		expect(headers.value).toEqual([
-			{
-				text: 'ID',
-				key: 'id',
-				title: 'ID',
-			},
-			{
-				title: 'Name',
-				key: 'name',
-			},
-			{
-				key: 'age',
-				title: undefined,
-			},
-		])
-	})
-
 	it('should handle undefined headers', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {}
@@ -118,7 +75,6 @@ describe('tableUtils', () => {
 		const { optionsFacade } = useTableUtils({
 			tableId: 'test-table',
 			prefix: 'table',
-			itemsPerPage: 10,
 			caption: 'Test Table',
 			componentAttributes,
 			options,
@@ -126,8 +82,8 @@ describe('tableUtils', () => {
 
 		expect(optionsFacade.value).toEqual({
 			page: 2,
-			itemsPerPage: 10,
 			sortBy: [{ key: 'name', order: 'asc' }],
+			itemsPerPage: 10,
 			groupBy: undefined,
 			multiSort: undefined,
 			mustSort: undefined,
@@ -137,7 +93,6 @@ describe('tableUtils', () => {
 	it('should create propsFacade correctly for client table', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {
-			'headers': [{ title: 'ID', key: 'id' }],
 			'items': [{ id: 1 }],
 			'onUpdate:options': vi.fn(),
 		}
@@ -151,7 +106,6 @@ describe('tableUtils', () => {
 		})
 
 		expect(propsFacade.value).toMatchObject({
-			headers: [{ title: 'ID', key: 'id' }],
 			items: [{ id: 1 }],
 		})
 		expect(propsFacade.value['onUpdate:options']).toBeUndefined()
@@ -160,7 +114,6 @@ describe('tableUtils', () => {
 	it('should create propsFacade correctly for server table', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {
-			headers: [{ title: 'ID', key: 'id' }],
 			items: [{ id: 1 }],
 		}
 
@@ -174,7 +127,6 @@ describe('tableUtils', () => {
 		})
 
 		expect(propsFacade.value).toMatchObject({
-			headers: [{ title: 'ID', key: 'id' }],
 			items: [{ id: 1 }],
 			itemsLength: 100,
 		})
@@ -208,7 +160,9 @@ describe('tableUtils', () => {
 	it('should setup local storage correctly', () => {
 		mockLocalStorageUtility.getItem.mockReturnValue({
 			page: 2,
-			itemsPerPage: 20,
+			options: {
+				itemsPerPage: 20,
+			},
 		})
 
 		const options = ref<Partial<DataOptions>>({})
@@ -228,7 +182,9 @@ describe('tableUtils', () => {
 		expect(mockLocalStorageUtility.getItem).toHaveBeenCalledWith('table-test')
 		expect(localOptions.value).toEqual({
 			page: 2,
-			itemsPerPage: 20,
+			options: {
+				itemsPerPage: 20,
+			},
 		})
 
 		// Test watchOptions

package/src/components/Tables/common/types.ts

@@ -25,13 +25,20 @@ export interface DataOptions {
 
 export type DataTableHeaders = {
 	title?: string
+	text?: string
 	value?: string
 	key?: string
 	filterable?: boolean
 	filterType?: FilterType
 	filterOptions?: Array<{ text: string, value: unknown }>
+	multiple?: boolean
+	chips?: boolean
+	sortable?: boolean
 	hideMessages?: boolean
 	dateFormat?: string
+	align?: 'start' | 'end' | 'center'
+	order?: number
+	hidden?: boolean
 }
 
 // Type to handle both Vuetify internal headers and our custom headers
@@ -42,6 +49,8 @@ export type TableColumnHeader = {
 	filterable?: boolean
 	filterType?: FilterType
 	filterOptions?: Array<{ text: string, value: unknown }>
+	multiple?: boolean
+	chips?: boolean
 	hideMessages?: boolean
 	dateFormat?: string
 	sort?: unknown
@@ -53,29 +62,35 @@ export type TableColumnHeader = {
 }
 
 // Component-specific props interfaces
-export interface SyTableProps {
+export type SyTableProps = {
 	items?: Record<string, unknown>[]
 	suffix: string
-	itemsPerPage?: number
 	caption?: string
 	showFilters?: boolean
-	headers?: DataTableHeaders[]
 	filterInputConfig?: Record<string, unknown>
 	density?: TableDensityType
 	striped?: boolean
 	resizableColumns?: boolean
+	enableColumnControls?: boolean
+	headers?: DataTableHeaders[]
+	showSelect?: boolean
+	multiSort?: boolean
+	mustSort?: boolean
 }
 
-export interface SyServerTableProps {
+export type SyServerTableProps = {
 	serverItemsLength: number
 	items?: Record<string, unknown>[]
 	suffix: string
-	itemsPerPage?: number
 	caption?: string
 	showFilters?: boolean
-	headers?: DataTableHeaders[]
 	resizableColumns?: boolean
 	filterInputConfig?: Record<string, unknown>
 	density?: TableDensityType
 	striped?: boolean
+	enableColumnControls?: boolean
+	headers?: DataTableHeaders[]
+	showSelect?: boolean
+	multiSort?: boolean
+	mustSort?: boolean
 }