@cnamts/synapse 1.0.6 → 1.0.7

package/src/components/SubHeader/SubHeader.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { ref } from 'vue'
+	import { computed, ref } from 'vue'
 	import { mdiKeyboardBackspace } from '@mdi/js'
 
 	import { config } from './config'
@@ -8,26 +8,36 @@
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { useWidthable, type Widthable } from '@/composables/widthable'
 
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import DataListGroup from '../DataListGroup/DataListGroup.vue'
 	import HeaderLoading from '../HeaderLoading/HeaderLoading.vue'
 	import type { DataListActionEvent, DataListGroupItems } from '../DataListGroup/types'
+	import { VThemeProvider } from 'vuetify/components'
 
 	const props = withDefaults(defineProps<CustomizableOptions & Widthable & {
 		hideBackBtn?: boolean
 		backBtnText?: string
+		backBtnAccessibleName?: string
 		titleText?: string
+		titleAccessibleName?: string
 		subTitleText?: string
+		subTitleAccessibleName?: string
 		dataListGroupItems?: DataListGroupItems | undefined
 		loading?: boolean
 		renderHtmlValue?: boolean
+		renderFixedHeight?: boolean
 	}>(), {
 		hideBackBtn: false,
 		backBtnText: locales.backBtnText,
+		backBtnAccessibleName: undefined,
 		titleText: undefined,
+		titleAccessibleName: undefined,
 		subTitleText: undefined,
+		subTitleAccessibleName: undefined,
 		dataListGroupItems: undefined,
 		loading: false,
 		renderHtmlValue: false,
+		renderFixedHeight: false,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -40,6 +50,13 @@
 	function emitItemAction(eventValue: DataListActionEvent) {
 		emit('click:list-item', eventValue)
 	}
+
+	// Add the accessible name of the back button only if the default button label has been filled in.
+	const effectiveBackBtnAccessibleName = computed(() => {
+		return props.backBtnAccessibleName ?? (
+			props.backBtnText === locales.backBtnText ? locales.backBtnAccessibleName : undefined
+		)
+	})
 </script>
 
 <template>
@@ -64,20 +81,29 @@
 					v-else
 					v-bind="options.backBtn"
 					class="vd-sub-header-back-btn mb-1"
+					:aria-label="effectiveBackBtnAccessibleName"
 					@click="$emit('back')"
 				>
 					<slot name="back-btn-icon">
-						<VIcon class="mr-2">
-							{{ backArrowIcon }}
-						</VIcon>
+						<SyIcon
+							class="mr-2"
+							:icon="backArrowIcon"
+							:decorative="true"
+						/>
 					</slot>
 					{{ backBtnText }}
 				</VBtn>
 			</VFadeTransition>
 		</slot>
 
-		<div class="vd-sub-header-content d-flex justify-space-between">
-			<div class="vd-sub-header-informations d-flex flex-column flex-shrink-0 mr-10">
+		<div
+			class="vd-sub-header-content d-flex justify-space-between flex-wrap ga-8"
+			:class="renderFixedHeight ? 'flex-nowrap flex-shrink-0' : 'flex-wrap'"
+		>
+			<div
+				class="vd-sub-header-informations d-flex flex-column mr-10"
+				:class="{ 'flex-shrink-0': renderFixedHeight }"
+			>
 				<slot name="title">
 					<VFadeTransition mode="out-in">
 						<HeaderLoading
@@ -89,6 +115,7 @@
 						<h2
 							v-else-if="titleText"
 							class="text-h5 font-weight-bold"
+							:aria-label="titleAccessibleName"
 						>
 							{{ titleText }}
 						</h2>
@@ -111,6 +138,7 @@
 							v-else
 							class="text-h6 font-weight-bold mt-1 mb-0"
 							:style="{ color: 'rgba(255, 255, 255, .7)' }"
+							:aria-label="subTitleAccessibleName"
 						>
 							{{ subTitleText }}
 						</p>
@@ -121,15 +149,17 @@
 			</div>
 
 			<slot name="right-content">
-				<DataListGroup
-					v-if="dataListGroupItems"
-					:items="dataListGroupItems"
-					:loading="loading"
-					:render-html-value="renderHtmlValue"
-					item-width="auto"
-					class="flex-nowrap flex-shrink-0"
-					@click:list-item="emitItemAction"
-				/>
+				<VThemeProvider theme="dark">
+					<DataListGroup
+						v-if="dataListGroupItems"
+						:items="dataListGroupItems"
+						:loading="loading"
+						:render-html-value="renderHtmlValue"
+						item-width="auto"
+						:class="renderFixedHeight ? 'flex-nowrap flex-shrink-0' : 'flex-wrap'"
+						@click:list-item="emitItemAction"
+					/>
+				</VThemeProvider>
 			</slot>
 		</div>
 	</VSheet>

package/src/components/SubHeader/locales.ts

@@ -1,3 +1,4 @@
 export const locales = {
 	backBtnText: 'Retour',
+	backBtnAccessibleName: 'Retour vers la page précédente',
 }

package/src/components/SyAlert/SyAlert.vue

@@ -129,6 +129,12 @@
 	display: none;
 }
 
+:deep(.v-alert__prepend),
+:deep(.v-alert__close) {
+	grid-row: 1 / span 2;
+	height: 100%;
+}
+
 :deep(.v-alert__close) {
 	align-self: center;
 }

package/src/components/Tables/SyServerTable/SyServerTable.mdx

@@ -31,38 +31,33 @@ Pour gérer individuellement le stockage des options pour différents tableaux,
 ### Tri côté serveur
 
 Le composant permet de trier les données par colonne en déléguant le tri au serveur.
-<Canvas story={{height: '550px'}} of={SyServerTable.ServerSortBy} />
 
 Le multi-tri est également supporté. Vous pouvez activer cette fonctionnalité en utilisant la prop `multi-sort`.
-<Canvas story={{height: '550px'}} of={SyServerTable.ServerMultiSort} />
 
 ### Filtres des colonnes
 
 Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.
-<Canvas story={{height: '550px'}} of={SyServerTable.ServerFilterByText} />
 
 ### Resize des colonnes
 
 Le composant peut permettre de redimensionner les colonnes en utilisant la prop `resizable-columns`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas story={{height: '550px'}} of={SyServerTable.ResizableColumns} />
 
 ### Réorganisation des colonnes
 
 Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant la prop `enable-column-controls`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas story={{height: '550px'}} of={SyServerTable.ColumnControls} />
 
 ### Selection des lignes
 
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
-<Canvas story={{height: '550px'}} of={SyServerTable.RowSelection} />
 
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.
-<Canvas story={{height: '550px'}} of={SyServerTable.SlotItem} />
 
 ### Slot headers
 Le composant permet de personnaliser l'affichage des en-têtes de colonnes en utilisant le slot `headers`. Vous pouvez définir la structure de chaque en-tête en fonction de vos besoins.
-<Canvas story={{height: '550px'}} of={SyServerTable.SlotHeaders} />
+
+### Items par page options
+Le composant permet de personnaliser le nombre possible d'éléments par page en utilisant la prop `items-per-page-options`. Vous pouvez spécifier un tableau d'options pour permettre de choisir le nombre d'éléments affichés par page.
 
 ### Accessibilité
 
@@ -169,8 +164,6 @@ Le composant améliore l'accessibilité en ajoutant automatiquement:
 
 Pour utiliser plusieurs tableaux serveur sur une même page avec des options indépendantes, utilisez la prop `suffix` pour chaque tableau.
 
-<Canvas of={SyServerTable.ManyServerTables} />
-
 ## Bonnes pratiques
 
 - Utilisez la prop `serverItemsLength` pour indiquer le nombre total d'éléments disponibles côté serveur

package/src/components/Tables/SyServerTable/SyServerTable.stories.ts

@@ -74,6 +74,15 @@ const meta = {
 				type: { summary: 'DataOptions', detail: '{ page: number, itemsPerPage: number, sortBy: SortOptions[], groupBy?: SortOptions[], multiSort?: boolean, mustSort?: boolean, filters?: FilterOption[] }' },
 			},
 		},
+		itemsPerPageOptions: {
+			description: 'Limite les options disponibles dans le sélecteur "itemsPerPage"',
+			control: { type: 'object' },
+			table: {
+				category: 'props',
+				type: { summary: 'number[]' },
+				defaultValue: { summary: 'undefined' },
+			},
+		},
 		serverItemsLength: {
 			description: 'Nombre total d\'éléments à afficher',
 			control: { type: 'number' },
@@ -5219,3 +5228,236 @@ export const SlotHeaders: Story = {
 		}
 	},
 }
+
+export const ItemsPerPageOptions: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:items-per-page-options="[5, 10, 15]"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="server-default"
+						@update:options="fetchData"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref, watch } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+					import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+					
+					interface User {
+						[key: string]: string
+						firstname: string
+						lastname: string
+						email: string
+					}
+				
+					interface DataObj {
+						items: User[]
+						total: number
+					}
+				
+					const totalUsers = ref(0)
+					const users = ref<User[]>([])
+					const state = ref(StateEnum.IDLE)
+				
+					const options = ref({
+						itemsPerPage: 5,
+						sortBy: [{ key: 'lastname', order: 'asc' }],
+						page: 1,
+					})
+				
+					const headers = [
+						{ title: 'Nom', key: 'lastname' },
+						{ title: 'Prénom', key: 'firstname' },
+						{ title: 'Email', key: 'email' },
+					]
+				
+					const fetchData = async (): Promise<void> => {
+						const { items, total } = await getDataFromApi(options.value)
+						users.value = items
+						totalUsers.value = total
+					}
+				
+					const wait = async (ms: number) => {
+						return new Promise(resolve => setTimeout(resolve, ms))
+					}
+				
+					const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+						state.value = StateEnum.PENDING
+						await wait(1000)
+				
+						return new Promise((resolve) => {
+							let items: User[] = getUsers()
+							const total = items.length
+				
+							if (sortBy && sortBy.length > 0) {
+								items = items.sort((a, b) => {
+									const key = sortBy[0].key
+									const order = sortBy[0].order === 'asc' ? 1 : -1
+				
+									return a[key] > b[key] ? order : -order
+								})
+							}
+				
+							if (itemsPerPage > 0) {
+								items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							}
+				
+							resolve({ items, total })
+							state.value = StateEnum.RESOLVED
+						})
+					}
+				
+					const getUsers = (): User[] => {
+						return [
+							{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+							{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+							{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+							{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+							{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+							{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+							{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+							{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+							{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+							{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+							{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+							{ firstname: 'Jacques', lastname: 'Demers', email: 'jacques.demers@example.com' },
+							{ firstname: 'Aimée', lastname: 'Josseaume', email: 'aimee.josseaume@example.com' },
+							{ firstname: 'Delphine', lastname: 'Robillard', email: 'delphine.robillard@example.com' },
+							{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
+						]
+					}
+                    
+                      // Initialize data
+		  			fetchData()
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'options': {
+			itemsPerPage: 5,
+			sortBy: [{ key: 'lastname', order: 'asc' }],
+			page: 1,
+		},
+		'itemsPerPageOptions': [5, 10, 15],
+		'headers': [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		],
+		'caption': '',
+		'serverItemsLength': 15,
+		'suffix': 'server-default',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const state = ref(StateEnum.IDLE)
+
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const fetchData = async (): Promise<void> => {
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
+					users.value = items
+					totalUsers.value = total
+				}
+
+				const wait = async (ms: number) => {
+					return new Promise(resolve => setTimeout(resolve, ms))
+				}
+
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+					state.value = StateEnum.PENDING
+					await wait(1000)
+
+					return new Promise((resolve) => {
+						let items: User[] = getUsers()
+						const total = items.length
+
+						if (sortBy && sortBy.length > 0) {
+							items = items.sort((a, b) => {
+								const key = sortBy[0].key
+								const order = sortBy[0].order === 'asc' ? 1 : -1
+
+								return a[key] > b[key] ? order : -order
+							})
+						}
+
+						if (itemsPerPage > 0) {
+							items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+						}
+
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = (): User[] => {
+					return [
+						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+						{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+						{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+						{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+						{ firstname: 'Jacques', lastname: 'Demers', email: 'jacques.demers@example.com' },
+						{ firstname: 'Aimée', lastname: 'Josseaume', email: 'aimee.josseaume@example.com' },
+						{ firstname: 'Delphine', lastname: 'Robillard', email: 'delphine.robillard@example.com' },
+						{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
+					]
+				}
+
+				// Initialize data
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
+			},
+			template: `
+			<div>
+				<SyServerTable
+					v-model:options="options"
+					:items="users"
+					:items-per-page-options="args.itemsPerPageOptions"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					v-bind="args"
+					@update:options="fetchData"
+				/>
+			</div>
+			`,
+		}
+	},
+}

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -13,7 +13,7 @@
 	import { usePagination } from '../common/usePagination'
 	import { useTableOptions } from '../common/useTableOptions'
 	import { useTableHeaders } from '../common/useTableHeaders'
-	import { useTableItems } from '../common/useTableItems'
+	// import { useTableItems } from '../common/useTableItems'
 	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
 	import { useTableCheckbox } from '../common/useTableCheckbox'
 	import { useTableAria } from '../common/useTableAria'
@@ -30,6 +30,7 @@
 		showSelect: false,
 		multiSort: false,
 		mustSort: false,
+		itemsPerPageOptions: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -92,13 +93,15 @@
 	// For server-side tables, we don't use the filteredItems from useTableItems
 	// Instead, we use the items directly from props as they are already filtered server-side
 	// But we still need the createEmptyItemWithStructure function
-	const { createEmptyItemWithStructure } = useTableItems({
-		items: itemsRef,
-		headers,
-		filters,
-		options,
-		filterItems,
-	})
+
+	// TODO:  A voir avec @David
+	// const { createEmptyItemWithStructure } = useTableItems({
+	// 	items: itemsRef,
+	// 	headers,
+	// 	filters,
+	// 	options,
+	// 	filterItems,
+	// })
 
 	// Use the pagination composable with serverItemsLength
 	const itemsLength = computed(() => props.serverItemsLength)
@@ -250,7 +253,8 @@
 			v-model="model"
 			:headers="displayHeaders"
 			color="primary"
-			:items="processItems(props.items.length > 0 ? props.items : createEmptyItemWithStructure())"
+			hide-no-data
+			:items="processItems(props.items)"
 			:items-length="props.serverItemsLength || 0"
 			:density="props.density"
 			:show-select="props.showSelect"
@@ -354,6 +358,13 @@
 							</VBtn>
 						</td>
 					</tr>
+					<tr v-if="props.items.length === 0 || props.serverItemsLength === 0">
+						<td colspan="100%">
+							<div class="text-center text-grey">
+								{{ locales.noData }}
+							</div>
+						</td>
+					</tr>
 				</template>
 				<!-- Repli lorsque les colonnes ne sont pas définies -->
 				<template v-else>
@@ -391,6 +402,13 @@
 							</SyTableFilter>
 						</th>
 					</tr>
+					<tr v-if="props.items.length === 0 || props.serverItemsLength === 0">
+						<td colspan="100%">
+							<div class="text-center text-grey">
+								{{ locales.noData }}
+							</div>
+						</td>
+					</tr>
 				</template>
 			</template>
 
@@ -412,11 +430,12 @@
 						v-model:headers="headers"
 					/>
 					<SyTablePagination
-						v-if="props.serverItemsLength > 0"
+						v-if="props.items.length > 0 ? props.serverItemsLength : 0"
 						:page="page"
 						:items-per-page="itemsPerPageValue"
 						:page-count="pageCount"
 						:items-length="props.serverItemsLength"
+						:items-per-page-options="props.itemsPerPageOptions"
 						@update:page="page = $event"
 						@update:items-per-page="updateItemsPerPage"
 					/>

package/src/components/Tables/SyTable/SyTable.mdx

@@ -24,38 +24,33 @@ Pour gérer individuellement le stockage des options pour différents tableaux,
 ### Tri des colonnes
 
 Le composant permet de trier les données par colonne en cliquant sur l'en-tête de la colonne.
-<Canvas story={{height: '550px'}} of={SyTable.SortBy} />
 
 Le multi-tri est également supporté. Vous pouvez activer cette fonctionnalité en utilisant la prop `multi-sort`.
-<Canvas story={{height: '550px'}} of={SyTable.MultiSort} />
 
 ### Filtres des colonnes
 
 Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.
-<Canvas story={{height: '550px'}} of={SyTable.FilterByText} />
 
 ### Resize des colonnes
 
 Le composant peut permettre de redimensionner les colonnes en utilisant la prop `resizable-columns`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.ResizableColumns} />
 
 ### Réorganisation des colonnes
 
 Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant la prop `enable-column-controls`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.ColumnControls} />
 
 ### Selection des lignes
 
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
-<Canvas story={{height: '550px'}} of={SyTable.RowSelection} />
 
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.SlotItem} />
 
 ### Slot headers
 Le composant permet de personnaliser l'affichage des en-têtes de colonnes en utilisant le slot `headers`. Vous pouvez définir la structure de chaque en-tête en fonction de vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.SlotHeaders} />
+
+### Items par page options
+Le composant permet de personnaliser le nombre possible d'éléments par page en utilisant la prop `items-per-page-options`. Vous pouvez spécifier un tableau d'options pour permettre de choisir le nombre d'éléments affichés par page.
 
 ### Accessibilité
 
@@ -139,8 +134,6 @@ Le composant améliore l'accessibilité en ajoutant automatiquement :
 
 Pour utiliser plusieurs tableaux sur une même page avec des options indépendantes, utilisez la prop `suffix` pour chaque tableau.
 
-<Canvas of={SyTable.ManyTables} />
-
 ## Bonnes pratiques
 
 - Utilisez des en-têtes clairs et descriptifs pour chaque colonne