@cnamts/synapse 1.0.2 → 1.0.3

package/src/components/Tables/SyTable/SyTable.vue

@@ -26,6 +26,8 @@
 		density: 'default',
 		striped: false,
 		showSelect: false,
+		multiSort: false,
+		mustSort: false,
 	})
 
 	const emit = defineEmits<{
@@ -207,6 +209,8 @@
 			:show-select="props.showSelect"
 			:item-selectable="(item) => true"
 			:item-value="getItemValue"
+			:multi-sort="props.multiSort"
+			:must-sort="props.mustSort"
 			@update:options="updateOptions"
 		>
 			<template #top>
@@ -356,6 +360,17 @@
 				</template>
 			</template>
 
+			<!-- Dynamically forward all slots to maintain flexibility -->
+			<template
+				v-for="slotName in Object.keys($slots)"
+				#[slotName]="slotProps"
+			>
+				<slot
+					:name="slotName"
+					v-bind="slotProps ?? {}"
+				/>
+			</template>
+
 			<template #bottom>
 				<div class="d-flex align-center pa-2">
 					<OrganizeColumns

package/src/components/Tables/common/SyTablePagination.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 	import { computed, ref, nextTick, watch, onMounted } from 'vue'
-	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
+	import SyPagination from '@/components/Customs/SyPagination/SyPagination.vue'
 	import { locales } from './locales'
 
-	// Generate unique ID for this pagination instance
-	const uniqueId = ref(`pagination-${Math.random().toString(36).substr(2, 9)}`)
-
 	// Reference to the SySelect component
 	const selectRef = ref<InstanceType<typeof SySelect> | null>(null)
 
@@ -54,70 +52,9 @@
 		(e: 'update:items-per-page', itemsPerPage: number): void
 	}>()
 
-	/**
-	 * Visible page numbers to display
-	 * Shows current page, previous and next 2 pages when available
-	 */
-	const visiblePageNumbers = computed(() => {
-		const pages: (number | string)[] = []
-		const currentPage = props.page
-		const totalPages = props.pageCount
-
-		// Always show first page
-		pages.push(1)
-
-		// Add ellipsis if needed
-		if (currentPage > 4) {
-			pages.push('ellipsis-start')
-		}
-
-		// Show pages around current page
-		for (let i = Math.max(2, currentPage - 2); i <= Math.min(totalPages - 1, currentPage + 2); i++) {
-			pages.push(i)
-		}
-
-		// Add ellipsis if needed
-		if (currentPage < totalPages - 3) {
-			pages.push('ellipsis-end')
-		}
-
-		// Always show last page if more than 1 page
-		if (totalPages > 1) {
-			pages.push(totalPages)
-		}
-
-		return pages
-	})
-
-	/**
-	 * Extract only the numeric middle pages from visiblePageNumbers
-	 */
-	const middlePages = computed(() => {
-		return visiblePageNumbers.value.filter(
-			page => typeof page === 'number' && page !== 1 && page !== props.pageCount,
-		) as number[]
-	})
-
-	/**
-	 * Navigate to previous page
-	 */
-	function previousPage() {
-		if (props.page > 1) {
-			emit('update:page', props.page - 1)
-		}
-	}
-
-	/**
-	 * Navigate to next page
-	 */
-	function nextPage() {
-		if (props.page < props.pageCount) {
-			emit('update:page', props.page + 1)
-		}
-	}
-
 	/**
 	 * Navigate to a specific page
+	 * This function is used as a callback for the SyPagination component
 	 */
 	function goToPage(pageNumber: number) {
 		emit('update:page', pageNumber)
@@ -173,79 +110,25 @@
 			}}
 		</div>
 
-		<nav
+		<SyPagination
 			v-if="pageCount > 1"
+			:model-value="page"
+			:pages="pageCount"
+			:visible="5"
+			:label="locales.pagination.paginationNavAriaLabel"
 			class="pagination"
-			:aria-labelledby="uniqueId"
+			@update:model-value="goToPage"
 		>
-			<h2
-				:id="uniqueId"
-				class="d-sr-only"
-			>
-				{{ locales.pagination.paginationNavAriaLabel }}
-			</h2>
-			<ul class="list">
-				<!-- Previous link -->
-				<li>
-					<a
-						href="#"
-						:class="{ 'disabled': page <= 1 }"
-						@click.prevent="previousPage"
-					>{{ locales.pagination.previous }}</a>
-				</li>
-
-				<!-- First page -->
-				<li>
-					<a
-						href="#"
-						class="list-first"
-						:aria-current="page === 1 ? 'page' : undefined"
-						@click.prevent="goToPage(1)"
-					>{{ locales.pagination.pageText(1) }}</a>
-				</li>
-
-				<!-- Start ellipsis if needed -->
-				<li v-if="visiblePageNumbers.includes('ellipsis-start')">
-					<a class="ellipsis">&#8230;</a>
-				</li>
-
-				<!-- Middle pages (6, 7, 8, 9, 10) -->
-				<li
-					v-for="pageNum in middlePages"
-					:key="pageNum"
-				>
-					<a
-						href="#"
-						:aria-current="page === pageNum ? 'page' : undefined"
-						@click.prevent="goToPage(pageNum)"
-					>{{ locales.pagination.pageText(pageNum) }}</a>
-				</li>
-
-				<!-- End ellipsis if needed -->
-				<li v-if="visiblePageNumbers.includes('ellipsis-end')">
-					<a class="ellipsis">&#8230;</a>
-				</li>
-
-				<!-- Last page (if not already shown) -->
-				<li v-if="pageCount > 1">
-					<a
-						href="#"
-						class="list-last"
-						:aria-current="page === pageCount ? 'page' : undefined"
-						@click.prevent="goToPage(pageCount)"
-					>{{ locales.pagination.pageText(pageCount) }}</a>
-				</li>
-
-				<!-- Next link -->
-				<li>
-					<a
-						href="#"
-						:class="{ 'disabled': page >= pageCount }"
-						@click.prevent="nextPage"
-					>{{ locales.pagination.next }}</a>
-				</li>
-			</ul>
-		</nav>
+			<template #previous>
+				<span>{{ locales.pagination.previous }}</span>
+			</template>
+			<template #page-number="{ page: pageNum }">
+				{{ locales.pagination.pageText(pageNum) }}
+			</template>
+			<template #next>
+				<span>{{ locales.pagination.next }}</span>
+			</template>
+		</SyPagination>
 
 		<div class="rows-per-page">
 			<span class="rows-per-page-label">{{ locales.pagination.itemsPerPageText }}</span>
@@ -315,61 +198,6 @@
 		flex-wrap: wrap;
 		gap: 0.5rem;
 		align-items: center;
-
-		.list {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0.5rem;
-			list-style: none;
-			padding: 0;
-			margin: 0;
-
-			li {
-				display: inline-block;
-			}
-
-			a {
-				display: inline-block;
-				padding: 0.5rem 0.75rem;
-				text-decoration: none;
-				color: tokens.$primary-base;
-				border: 1px solid tokens.$primary-base;
-				border-radius: 4px;
-				transition: all 0.2s ease;
-				font-size: 0.875rem;
-				line-height: 1;
-
-				&:hover,
-				&:focus {
-					background-color: rgba(tokens.$primary-base, 0.1);
-				}
-
-				&[aria-current='page'] {
-					background-color: tokens.$primary-base;
-					color: white;
-					font-weight: 500;
-				}
-
-				&.disabled {
-					color: rgb(0 0 0 / 60%); /* Increased from 40% to 60% for better contrast */
-					border-color: rgb(0 0 0 / 20%);
-					pointer-events: none;
-				}
-
-				&.ellipsis {
-					border: none;
-					pointer-events: none;
-				}
-			}
-
-			li:first-child a,
-			li:last-child a {
-				background-color: transparent;
-				border: none;
-				padding-left: 0.25rem;
-				padding-right: 0.25rem;
-			}
-		}
 	}
 }
 </style>

package/src/components/Tables/common/TableHeader.vue

@@ -136,6 +136,14 @@
 			return sort.key === props.column.key
 		})
 	})
+
+	// Get the sort order index (for multi-sort)
+	const sortOrderIndex = computed(() => {
+		if (!props.headerParams.sortBy || props.headerParams.sortBy.length <= 1) return null
+
+		const index = props.headerParams.sortBy.findIndex(sort => sort.key === props.column.key)
+		return index !== -1 ? index + 1 : null
+	})
 </script>
 
 <template>
@@ -146,15 +154,30 @@
 		<div class="col-title">
 			{{ column.title }}
 		</div>
-		<VIcon
+		<div
 			v-if="header!.sortable"
-			class="v-data-table-header__sort-icon mr-2"
-			:class="{ 'text-primary opacity-100' : isColumnSorted }"
-			:icon="headerParams.getSortIcon(column)"
-			:title="locales.columnOrder(column.title!)"
-			:aria-label="locales.columnOrder(column.title!)"
-			@click="headerParams.toggleSort(column)"
-		/>
+			class="sort-container d-flex align-center"
+		>
+			<VIcon
+				class="v-data-table-header__sort-icon"
+				:class="{ 'text-primary opacity-100' : isColumnSorted }"
+				:icon="headerParams.getSortIcon(column)"
+				:title="locales.columnOrder(column.title!)"
+				:aria-label="locales.columnOrder(column.title!)"
+				@click="headerParams.toggleSort(column)"
+			/>
+			<div
+				v-if="sortOrderIndex"
+				class="sort-order-indicator text-primary ml-0 mr-2"
+				:title="`Sort order: ${sortOrderIndex}`"
+			>
+				{{ sortOrderIndex }}
+			</div>
+			<div
+				v-else-if="isColumnSorted"
+				class="mr-2"
+			/>
+		</div>
 		<button
 			v-if="props.resizableColumns && !isLastColumn"
 			type="button"
@@ -174,6 +197,12 @@
 </template>
 
 <style lang="scss" scoped>
+.sort-order-indicator {
+	font-size: 0.75rem;
+	font-weight: bold;
+	line-height: 1;
+}
+
 .resizer {
 	margin-left: auto;
 	flex: 0 0 auto;

package/src/components/Tables/common/filters/SelectFilter.vue

@@ -2,7 +2,7 @@
 	// SySelect a été modifié pour accepter null comme valeur valide
 	import { computed, ref } from 'vue'
 	import type { FilterOption, TableColumnHeader } from '../types'
-	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 	import { locales } from './locales'
 
 	const props = defineProps({

package/src/components/Tables/common/filters/tests/SelectFilter.spec.ts

@@ -5,7 +5,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import SelectFilter from '../SelectFilter.vue'
-import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import type { FilterType } from '../../types'
 
 const vuetify = createVuetify({

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

@@ -130,7 +130,7 @@ describe('SyTablePagination.vue', () => {
 		expect(infoText).toContain('1-42')
 	})
 
-	it('emits update:page event when nextPage method is called', async () => {
+	it('emits update:page event when SyPagination emits update:modelValue', async () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
 				page: 1,
@@ -143,8 +143,11 @@ describe('SyTablePagination.vue', () => {
 			},
 		})
 
-		await (wrapper.vm as unknown as { nextPage: () => Promise<void> }).nextPage()
+		// Find the SyPagination component and simulate a page change
+		const pagination = wrapper.findComponent({ name: 'SyPagination' })
+		await pagination.vm.$emit('update:modelValue', 2)
 
+		// Verify the SyTablePagination emits the correct event
 		expect(wrapper.emitted('update:page')).toBeTruthy()
 		expect(wrapper.emitted('update:page')![0]).toEqual([2])
 	})

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/types.ts

@@ -74,6 +74,8 @@ export type SyTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	multiSort?: boolean
+	mustSort?: boolean
 }
 
 export type SyServerTableProps = {
@@ -89,4 +91,6 @@ export type SyServerTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	multiSort?: boolean
+	mustSort?: boolean
 }

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 	import { computed } from 'vue'
-	import SyBtnSelect from '../Customs/SyBtnSelect/SyBtnSelect.vue'
+	import SyBtnSelect from '@/components/Customs/Selects/SyBtnSelect/SyBtnSelect.vue'
 	import { useDisplay } from 'vuetify'
 	import { mdiAccount, mdiLoginVariant } from '@mdi/js'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'