@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -0,0 +1,161 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SyTable from '../../SyTable/SyTable.vue'
+
+describe('Resize columns functionality', () => {
+	describe('with the keyboard', () => {
+		it('should resize the column to the right', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					items: [
+						{ name: 'col1', label: 'Column 1' },
+						{ name: 'col2', label: 'Column 2' },
+					],
+					resizableColumns: true,
+					suffix: 'resize-test',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// mock current width of the columns
+			const col1 = wrapper.find<Element>('.v-data-table-header__content')
+			Object.defineProperty(col1.element, 'offsetWidth', {
+				get: () => 100,
+			})
+
+			const col1Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td')
+			const col2Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td:nth-child(2)')
+
+			await wrapper.vm.$nextTick()
+
+			expect(col1Header.exists()).toBe(true)
+			expect(col2Header.exists()).toBe(true)
+
+			expect(col1Header.element.style.width).toBe('')
+			const separator = wrapper.find('.resizer')
+			expect(separator.exists()).toBe(true)
+			await wrapper.vm.$nextTick()
+
+			await separator.trigger('keydown', { key: 'ArrowRight' })
+
+			expect(col1Header.element.style.width).toBe(`110px`)
+		})
+
+		it('should resize the column to the right', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					items: [
+						{ name: 'col1', label: 'Column 1' },
+						{ name: 'col2', label: 'Column 2' },
+					],
+					resizableColumns: true,
+					suffix: 'resize-test',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// mock current width of the columns
+			const col1 = wrapper.find<Element>('.v-data-table-header__content')
+			Object.defineProperty(col1.element, 'offsetWidth', {
+				get: () => 100,
+			})
+
+			const col1Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td')
+			const col2Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td:nth-child(2)')
+
+			await wrapper.vm.$nextTick()
+
+			expect(col1Header.exists()).toBe(true)
+			expect(col2Header.exists()).toBe(true)
+
+			expect(col1Header.element.style.width).toBe('')
+			const separator = wrapper.find('.resizer')
+			expect(separator.exists()).toBe(true)
+			await wrapper.vm.$nextTick()
+
+			await separator.trigger('keydown', { key: 'ArrowLeft' })
+
+			expect(col1Header.element.style.width).toBe(`90px`)
+		})
+	})
+
+	describe('with the mouse', () => {
+		it('should resize the column to the right', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					items: [
+						{ name: 'col1', label: 'Column 1' },
+						{ name: 'col2', label: 'Column 2' },
+					],
+					resizableColumns: true,
+					suffix: 'resize-test',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// mock current width of the columns
+			const col1 = wrapper.find<Element>('.v-data-table-header__content')
+			Object.defineProperty(col1.element, 'offsetWidth', {
+				get: () => 100,
+			})
+
+			const col1Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td')
+			const col2Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td:nth-child(2)')
+
+			expect(col1Header.exists()).toBe(true)
+			expect(col2Header.exists()).toBe(true)
+
+			expect(col1Header.element.style.width).toBe('')
+			const separator = wrapper.find('.resizer')
+			expect(separator.exists()).toBe(true)
+
+			await separator.trigger('mousedown', { clientX: 150 })
+			document.dispatchEvent(new MouseEvent('mousemove', { clientX: 250 }))
+			document.dispatchEvent(new MouseEvent('mouseup'))
+			await wrapper.vm.$nextTick()
+
+			expect(col1Header.element.style.width).toBe(`232px`)
+		})
+
+		it('should resize the column to the left', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					items: [
+						{ name: 'col1', label: 'Column 1' },
+						{ name: 'col2', label: 'Column 2' },
+					],
+					resizableColumns: true,
+					suffix: 'resize-test',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// mock current width of the columns
+			const col1 = wrapper.find<Element>('.v-data-table-header__content')
+			Object.defineProperty(col1.element, 'offsetWidth', {
+				get: () => 100,
+			})
+
+			const col1Header = wrapper.find<HTMLTableCellElement>('.v-data-table__tr .v-data-table__td')
+			expect(col1Header.element.style.width).toBe('')
+			const separator = wrapper.find('.resizer')
+			expect(separator.exists()).toBe(true)
+
+			await separator.trigger('mousedown', { clientX: 150 })
+			document.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 }))
+			document.dispatchEvent(new MouseEvent('mouseup'))
+			await wrapper.vm.$nextTick()
+
+			expect(col1Header.element.style.width).toBe(`50px`)
+		})
+	})
+})

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

@@ -0,0 +1,92 @@
+import { describe, it, expect } from 'vitest'
+import { filterItems } from '../tableFilterUtils'
+import type { FilterOption } from '../types'
+
+describe('tableFilterUtils', () => {
+	describe('filterItems', () => {
+		const testItems = [
+			{ id: 1, name: 'John Doe', age: 25, department: 'IT', status: 'Active', hireDate: '01/05/2020', vacationPeriod: { from: '01/07/2023', to: '15/07/2023' } },
+			{ id: 2, name: 'Jane Smith', age: 30, department: 'HR', status: 'On leave', hireDate: '10/03/2019', vacationPeriod: { from: '01/08/2023', to: '20/08/2023' } },
+			{ id: 3, name: 'Bob Johnson', age: 45, department: 'Finance', status: 'Active', hireDate: '22/11/2015', vacationPeriod: { from: '15/06/2023', to: '05/07/2023' } },
+			{ id: 4, name: 'Alice Brown', age: 36, department: 'Marketing', status: 'Active', hireDate: '08/01/2021', vacationPeriod: { from: '20/12/2023', to: '05/01/2024' } },
+			{ id: 5, name: 'Tom Wilson', age: 41, department: 'IT', status: 'Inactive', hireDate: '30/07/2018', vacationPeriod: { from: '10/09/2023', to: '25/09/2023' } },
+		]
+
+		it('should return all items when no filters are provided', () => {
+			const result = filterItems(testItems, [])
+			expect(result).toEqual(testItems)
+		})
+
+		it('should return empty array when items is empty', () => {
+			const result = filterItems([], [{ key: 'name', value: 'John', type: 'text' }])
+			expect(result).toEqual([])
+		})
+
+		it('should filter by text correctly', () => {
+			const filters: FilterOption[] = [
+				{ key: 'name', value: 'John Doe', type: 'text' },
+			]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(1)
+		})
+
+		it('should filter by number correctly', () => {
+			const filters: FilterOption[] = [
+				{ key: 'age', value: 30, type: 'number' },
+			]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(2)
+		})
+
+		it('should filter by select correctly', () => {
+			const filters: FilterOption[] = [
+				{ key: 'department', value: 'IT', type: 'select' },
+			]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(2)
+			expect(result.map(item => item.id)).toContain(1)
+			expect(result.map(item => item.id)).toContain(5)
+		})
+
+		it('should filter by date correctly', () => {
+			const filters: FilterOption[] = [
+				{ key: 'hireDate', value: '10/03/2019', type: 'date' },
+			]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(2)
+		})
+
+		it('should apply multiple filters correctly', () => {
+			const filters: FilterOption[] = [
+				{ key: 'department', value: 'IT', type: 'select' },
+				{ key: 'status', value: 'Active', type: 'select' },
+			]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(1)
+		})
+
+		it('should handle case insensitivity for text filters', () => {
+			const filters: FilterOption[] = [
+				{ key: 'name', value: 'john doe', type: 'text' },
+			]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(1)
+		})
+
+		it('should handle partial matches for text filters', () => {
+			const filters: FilterOption[] = [
+				{ key: 'name', value: 'oh', type: 'text' },
+			]
+			const result = filterItems(testItems, filters)
+			// This should match both John Doe and Bob Johnson
+			expect(result.length).toBeGreaterThanOrEqual(2)
+			expect(result.map(item => item.id)).toContain(1) // John Doe
+			expect(result.map(item => item.id)).toContain(3) // Bob Johnson
+		})
+	})
+})

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

@@ -0,0 +1,228 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { ref } from 'vue'
+import { useTableUtils } from '../tableUtils'
+import { LocalStorageUtility } from '@/utils/localStorageUtility'
+import type { DataOptions } from '../types'
+
+vi.mock('@/utils/localStorageUtility')
+
+describe('tableUtils', () => {
+	const mockLocalStorageUtility = {
+		getItem: vi.fn(),
+		setItem: vi.fn(),
+	}
+
+	beforeEach(() => {
+		vi.spyOn(LocalStorageUtility.prototype, 'getItem').mockImplementation(mockLocalStorageUtility.getItem)
+		vi.spyOn(LocalStorageUtility.prototype, 'setItem').mockImplementation(mockLocalStorageUtility.setItem)
+	})
+
+	afterEach(() => {
+		vi.resetAllMocks()
+	})
+
+	it('should create storage key correctly with suffix', () => {
+		const options = ref<Partial<DataOptions>>({})
+		const { storageKey } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			suffix: 'test-suffix',
+			caption: 'Test Table',
+			componentAttributes: {},
+			options,
+		})
+
+		expect(storageKey.value).toBe('table-test-suffix')
+	})
+
+	it('should create storage key correctly without suffix', () => {
+		const options = ref<Partial<DataOptions>>({})
+		const { storageKey } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			caption: 'Test Table',
+			componentAttributes: {},
+			options,
+		})
+
+		expect(storageKey.value).toBe('table')
+	})
+
+	it('should handle undefined headers', () => {
+		const options = ref<Partial<DataOptions>>({})
+		const componentAttributes = {}
+
+		const { headers } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			caption: 'Test Table',
+			componentAttributes,
+			options,
+		})
+
+		expect(headers.value).toBeUndefined()
+	})
+
+	it('should create optionsFacade correctly', () => {
+		const options = ref<Partial<DataOptions>>({
+			page: 2,
+			sortBy: [{ key: 'name', order: 'asc' }],
+		})
+		const componentAttributes = {
+			page: 1,
+		}
+
+		const { optionsFacade } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			caption: 'Test Table',
+			componentAttributes,
+			options,
+		})
+
+		expect(optionsFacade.value).toEqual({
+			page: 2,
+			sortBy: [{ key: 'name', order: 'asc' }],
+			itemsPerPage: 10,
+			groupBy: undefined,
+			multiSort: undefined,
+			mustSort: undefined,
+		})
+	})
+
+	it('should create propsFacade correctly for client table', () => {
+		const options = ref<Partial<DataOptions>>({})
+		const componentAttributes = {
+			'items': [{ id: 1 }],
+			'onUpdate:options': vi.fn(),
+		}
+
+		const { propsFacade } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			caption: 'Test Table',
+			componentAttributes,
+			options,
+		})
+
+		expect(propsFacade.value).toMatchObject({
+			items: [{ id: 1 }],
+		})
+		expect(propsFacade.value['onUpdate:options']).toBeUndefined()
+	})
+
+	it('should create propsFacade correctly for server table', () => {
+		const options = ref<Partial<DataOptions>>({})
+		const componentAttributes = {
+			items: [{ id: 1 }],
+		}
+
+		const { propsFacade } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			caption: 'Test Table',
+			serverItemsLength: 100,
+			componentAttributes,
+			options,
+		})
+
+		expect(propsFacade.value).toMatchObject({
+			items: [{ id: 1 }],
+			itemsLength: 100,
+		})
+	})
+
+	it('should update options correctly', () => {
+		const options = ref<Partial<DataOptions>>({
+			page: 1,
+			sortBy: [{ key: 'id', order: 'asc' }],
+		})
+		const componentAttributes = {}
+
+		const { updateOptions } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			caption: 'Test Table',
+			componentAttributes,
+			options,
+		})
+
+		updateOptions({
+			sortBy: [{ key: 'name', order: 'desc' }],
+		})
+
+		expect(options.value).toEqual({
+			page: 1,
+			sortBy: [{ key: 'name', order: 'desc' }],
+		})
+	})
+
+	it('should setup local storage correctly', () => {
+		mockLocalStorageUtility.getItem.mockReturnValue({
+			page: 2,
+			options: {
+				itemsPerPage: 20,
+			},
+		})
+
+		const options = ref<Partial<DataOptions>>({})
+		const componentAttributes = {}
+
+		const { localOptions, setupLocalStorage } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'table',
+			suffix: 'test',
+			caption: 'Test Table',
+			componentAttributes,
+			options,
+		})
+
+		const { watchOptions } = setupLocalStorage()
+
+		expect(mockLocalStorageUtility.getItem).toHaveBeenCalledWith('table-test')
+		expect(localOptions.value).toEqual({
+			page: 2,
+			options: {
+				itemsPerPage: 20,
+			},
+		})
+
+		// Test watchOptions
+		options.value = {
+			page: 3,
+			sortBy: [{ key: 'name', order: 'asc' }],
+		}
+		watchOptions()
+
+		expect(mockLocalStorageUtility.setItem).toHaveBeenCalledWith('table-test', expect.objectContaining({
+			page: 3,
+			sortBy: [{ key: 'name', order: 'asc' }],
+		}))
+	})
+
+	it('should handle server table local storage correctly', () => {
+		mockLocalStorageUtility.getItem.mockReturnValue(null)
+
+		const options = ref<Partial<DataOptions>>({
+			page: 1,
+		})
+		const componentAttributes = {}
+
+		const { setupLocalStorage } = useTableUtils({
+			tableId: 'test-table',
+			prefix: 'server-table',
+			caption: 'Test Table',
+			serverItemsLength: 100,
+			componentAttributes,
+			options,
+		})
+
+		const { watchOptions } = setupLocalStorage()
+		watchOptions()
+
+		expect(mockLocalStorageUtility.setItem).toHaveBeenCalledWith('server-table', expect.objectContaining({
+			page: 1,
+			itemsLength: 100,
+		}))
+	})
+})

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

@@ -0,0 +1,92 @@
+export type SortOptions = {
+	key: string
+	order: 'desc' | 'asc'
+}
+
+export type FilterType = 'text' | 'number' | 'date' | 'period' | 'select' | 'custom'
+
+export type TableDensityType = 'default' | 'comfortable' | 'compact'
+
+export interface FilterOption {
+	key: string
+	value: string | number | Date | Array<string | number | Date> | { from: string | null, to: string | null } | Record<string, unknown> | null | undefined
+	type: FilterType
+}
+
+export interface DataOptions {
+	page: number
+	itemsPerPage: number
+	sortBy: SortOptions[]
+	groupBy?: SortOptions[]
+	multiSort?: boolean
+	mustSort?: boolean
+	filters?: FilterOption[]
+}
+
+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
+export type TableColumnHeader = {
+	title?: string
+	value?: unknown
+	key?: string | null
+	filterable?: boolean
+	filterType?: FilterType
+	filterOptions?: Array<{ text: string, value: unknown }>
+	multiple?: boolean
+	chips?: boolean
+	hideMessages?: boolean
+	dateFormat?: string
+	sort?: unknown
+	filter?: unknown
+	width?: string | number
+	align?: string
+	children?: unknown[]
+	[key: string]: unknown // Allow for any additional properties from Vuetify
+}
+
+// Component-specific props interfaces
+export type SyTableProps = {
+	items?: Record<string, unknown>[]
+	suffix: string
+	caption?: string
+	showFilters?: boolean
+	filterInputConfig?: Record<string, unknown>
+	density?: TableDensityType
+	striped?: boolean
+	resizableColumns?: boolean
+	enableColumnControls?: boolean
+	headers?: DataTableHeaders[]
+	showSelect?: boolean
+}
+
+export type SyServerTableProps = {
+	serverItemsLength: number
+	items?: Record<string, unknown>[]
+	suffix: string
+	caption?: string
+	showFilters?: boolean
+	resizableColumns?: boolean
+	filterInputConfig?: Record<string, unknown>
+	density?: TableDensityType
+	striped?: boolean
+	enableColumnControls?: boolean
+	headers?: DataTableHeaders[]
+	showSelect?: boolean
+}

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

@@ -0,0 +1,83 @@
+import { computed, nextTick, type Ref } from 'vue'
+import type { DataOptions } from './types'
+
+/**
+ * Composable for managing table pagination
+ *
+ * @param options - Reactive reference to table options
+ * @param itemsLength - Total number of items (for client-side) or serverItemsLength (for server-side)
+ * @param table - Reference to the table component
+ * @param emit - Emit function for update:options event
+ * @returns Pagination utilities and computed properties
+ */
+export function usePagination({
+	options,
+	itemsLength,
+	table,
+	emit,
+}: {
+	options: Ref<Partial<DataOptions>>
+	itemsLength: Ref<number>
+	table: Ref<unknown>
+	emit: (event: 'update:options', options: Partial<DataOptions>) => void
+}) {
+	// Current page with getter/setter
+	const page = computed({
+		get: () => options.value.page || 1,
+		set: (newPage: number) => {
+			options.value = {
+				...options.value,
+				page: newPage,
+			}
+		},
+	})
+
+	// Items per page with fallback to default
+	const itemsPerPageValue = computed(() => {
+		const value = options.value.itemsPerPage || 10
+		// If value is -1, it means "Tous" (all items)
+		return value
+	})
+
+	// Calculate total number of pages
+	const pageCount = computed(() => {
+		if (!itemsLength.value) return 0
+		// If itemsPerPageValue is -1 ("Tous"), return 1 page
+		if (itemsPerPageValue.value === -1) return 1
+		return Math.ceil(itemsLength.value / itemsPerPageValue.value)
+	})
+
+	/**
+   * Update items per page from pagination component
+   */
+	function updateItemsPerPage(newItemsPerPage: number) {
+		// Create a completely new options object to force reactivity
+		const newOptions = {
+			...options.value,
+			itemsPerPage: newItemsPerPage,
+			page: 1, // Reset to first page when changing items per page
+		}
+
+		// Update options with the new object
+		options.value = newOptions
+
+		// Force a refresh of the table
+		nextTick(() => {
+			// Try to force update if the table has that method
+			const tableValue = table.value as { $forceUpdate?: () => void }
+			if (tableValue && typeof tableValue.$forceUpdate === 'function') {
+				tableValue.$forceUpdate()
+			}
+
+			// Emit an event to notify parent components
+			emit('update:options', newOptions)
+		})
+	}
+
+	return {
+		page,
+		pageCount,
+		itemsPerPageValue,
+		updateItemsPerPage,
+	}
+}