@cnamts/synapse 1.0.14 → 1.0.16

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

@@ -33,14 +33,14 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
-		headers: {
+		'headers': {
 			description: 'Liste des colonnes du tableau (voir : https://vuetifyjs.com/en/api/v-data-table/#props-headers)',
 			control: { type: 'object' },
 			table: {
 				category: 'props',
 			},
 		},
-		items: {
+		'items': {
 			description: 'Liste des éléments à afficher dans le tableau',
 			control: { type: 'object' },
 			table: {
@@ -50,7 +50,7 @@ const meta = {
 				},
 			},
 		},
-		density: {
+		'density': {
 			description: 'Définit la densité du tableau',
 			control: { type: 'select' },
 			options: ['default', 'comfortable', 'compact'],
@@ -59,7 +59,7 @@ const meta = {
 				type: { summary: 'string', detail: `'default' | 'comfortable' | 'compact'` },
 			},
 		},
-		striped: {
+		'striped': {
 			description: 'Affiche les lignes du tableau avec un fond rayé',
 			control: { type: 'boolean' },
 			table: {
@@ -67,7 +67,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		options: {
+		'options': {
 			description: 'Options de configuration du tableau',
 			name: 'v-model:options',
 			control: { type: 'object' },
@@ -76,7 +76,7 @@ const meta = {
 				type: { summary: 'DataOptions', detail: '{ page: number, itemsPerPage: number, sortBy: SortOptions[], groupBy?: SortOptions[], multiSort?: boolean, mustSort?: boolean, filters?: FilterOption[] }' },
 			},
 		},
-		itemsPerPageOptions: {
+		'itemsPerPageOptions': {
 			description: 'Limite les options disponibles dans le sélecteur "itemsPerPage"',
 			control: { type: 'object' },
 			table: {
@@ -85,15 +85,15 @@ const meta = {
 				defaultValue: { summary: 'undefined' },
 			},
 		},
-		serverItemsLength: {
+		'serverItemsLength': {
 			description: 'Nombre total d\'éléments à afficher',
 			control: { type: 'number' },
 		},
-		saveState: {
+		'saveState': {
 			description: 'Permet d\'activer ou non la sauvegarde des options (pagination, tris, ordre des colonnes) du tableau dans le localStorage. Par défaut, cette fonctionnalité est activée.',
 			control: { type: 'boolean' },
 		},
-		suffix: {
+		'suffix': {
 			description: 'Suffixe permettant de gérer individuellement le stockage des options d\'un tableau d\'une page à l\'autre. Ce prop est obligatoire pour garantir un stockage unique pour chaque tableau.',
 			control: { type: 'text' },
 			table: {
@@ -102,18 +102,18 @@ const meta = {
 			},
 			required: true,
 		},
-		caption: {
+		'caption': {
 			description: 'Texte de la légende du tableau',
 			control: { type: 'text' },
 		},
-		showExpand: {
+		'showExpand': {
 			description: 'Affiche une colonne permettant d\'étendre les lignes pour afficher du contenu supplémentaire',
 			control: { type: 'boolean' },
 			table: {
 				category: 'props',
 			},
 		},
-		resizableColumns: {
+		'resizableColumns': {
 			description: 'Permet de redimensionner les colonnes du tableau',
 			control: { type: 'boolean' },
 			table: {
@@ -121,7 +121,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		multiSort: {
+		'multiSort': {
 			description: 'Permet de trier sur plusieurs colonnes simultanément. Lorsque activé, des indicateurs numériques apparaissent à côté des icônes de tri pour montrer l\'ordre de priorité.',
 			control: { type: 'boolean' },
 			table: {
@@ -132,7 +132,7 @@ const meta = {
 				},
 			},
 		},
-		mustSort: {
+		'mustSort': {
 			description: 'Force au moins une colonne à être toujours triée. Si désactivé, toutes les colonnes peuvent être non triées.',
 			control: { type: 'boolean' },
 			table: {
@@ -143,7 +143,7 @@ const meta = {
 				},
 			},
 		},
-		enableColumnControls: {
+		'enableColumnControls': {
 			description: 'Allow the users to re-organize the columns',
 			table: {
 				defaultValue: {
@@ -154,7 +154,7 @@ const meta = {
 			},
 			control: { type: 'boolean' },
 		},
-		showSelect: {
+		'showSelect': {
 			description: 'Affiche des cases à cocher pour sélectionner des lignes',
 			control: { type: 'boolean' },
 			table: {
@@ -162,7 +162,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		showSelectSingle: {
+		'showSelectSingle': {
 			description: 'Affiche des cases à cocher pour sélectionner une seule ligne à la fois',
 			control: { type: 'boolean' },
 			table: {
@@ -170,7 +170,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		selectionKey: {
+		'selectionKey': {
 			description: 'Clé utilisée pour identifier chaque ligne lors de la sélection. Par défaut, utilise "id" si présent, sinon l\'objet complet.',
 			control: { type: 'text' },
 			table: {
@@ -179,6 +179,27 @@ const meta = {
 				defaultValue: { summary: 'undefined (fallback: id | objet complet)' },
 			},
 		},
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore - 'cookie-description-${cookieName}' storybook can't infer dynamic slot name
+		'header.<columnKey>': {
+			description: 'Slot permettant de personnaliser le rendu de l\'en-tête d\'une colonne spécifique. Remplacer `<columnKey>` par la clé de la colonne souhaitée.',
+			control: undefined,
+			table: {
+				category: 'slots',
+				type: {
+					summary: 'slot',
+					detail: `{
+						column: HeaderColumn,
+						headers: HeaderColumn[][],
+						columns: HeaderColumn[],
+						locales: Record<string, string | ((...args: any[]) => string)>,
+						sortBy: DataOptions['sortBy'],
+						someSelected: boolean,
+						allSelected: boolean
+					}`,
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof SyServerTable & typeof VDataTable>
 
@@ -2720,7 +2741,7 @@ export const ServerFilterByPeriod: Story = {
 								if (!value) return true
 
 								else if (type === 'period') {
-									function formatDate(date: string): Date | null {
+									const formatDate = (date: string): Date | null => {
 										if (!date) return null
 										const parsedDate = dayjs(date, 'DD/MM/YYYY')
 										return parsedDate.isValid() ? parsedDate.toDate() : null
@@ -4163,8 +4184,7 @@ export const ResizableColumns: Story = {
 				}, { deep: true })
 
 				const fetchData = async (): Promise<void> => {
-					// @ts-expect-error - fetchData is not defined
-					const { items, total } = await getDataFromApi(options.value)
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
 					users.value = items
 					totalUsers.value = total
 				}
@@ -4985,8 +5005,7 @@ export const ColumnControls: StoryObj<typeof SyServerTable> = {
 				}, { deep: true })
 
 				const fetchData = async (): Promise<void> => {
-					// @ts-expect-error - fetchData is not defined
-					const { items, total } = await getDataFromApi(options.value)
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
 					users.value = items
 					totalUsers.value = total
 				}
@@ -5871,6 +5890,249 @@ export const SlotHeaders: Story = {
 	},
 }
 
+export const SlotHeader: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="server-default"
+						@update:options="fetchData"
+					>
+						<template #header.lastname>
+							<span class="text-primary font-weight-bold">
+								Nom de famille
+							</span>
+						</template>
+					</SyServerTable>
+				</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,
+		},
+		'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"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					v-bind="args"
+					suffix="server-slot-item"
+					@update:options="fetchData"
+				>
+                  <template #header.lastname>
+							<span class="text-primary font-weight-bold">
+								Nom de famille
+							</span>
+                  </template>
+				</SyServerTable>
+			</div>
+			`,
+		}
+	},
+}
+
 export const ItemsPerPageOptions: Story = {
 	parameters: {
 		sourceCode: [
@@ -6103,3 +6365,239 @@ export const ItemsPerPageOptions: Story = {
 		}
 	},
 }
+
+export const ComplexItemsDisplay: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="items"
+						:headers="headers"
+						:server-items-length="totalItems"
+						:loading="state === StateEnum.PENDING"
+						suffix="server-default"
+						@update:options="fetchData"
+					>
+						<template #[\`item.period\`]="{ item }">
+							<span>
+								Depuis le {{ item.period.start }} jusqu'au {{ item.period.end }}
+							</span>
+						</template>
+					</SyServerTable>
+				</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 Item {
+						title: string
+						period: {
+							start: string
+							end: string
+						}
+						status: string
+					}
+				
+					interface DataObj {
+						items: Item[]
+						total: number
+					}
+				
+					const totalItems = ref(0)
+					const items = ref<Item[]>([])
+					const state = ref(StateEnum.IDLE)
+				
+					const options = ref({
+						itemsPerPage: 5,
+						sortBy: [{ key: 'title', order: 'asc' }],
+						page: 1,
+					})
+				
+					const headers = [
+						{ title: 'Titre', key: 'title' },
+						{ title: 'Période', key: 'period' },
+						{ title: 'Statut', key: 'status' },
+					]
+				
+					const fetchData = async (): Promise<void> => {
+						const { items: fetchedItems, total } = await getDataFromApi(options.value)
+						items.value = fetchedItems
+						totalItems.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: Item[] = getItems()
+							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 getItems = (): Item[] => {
+						return [
+							{ title: 'Projet Alpha', period: { start: '2023-01-01', end: '2023-06-30' }, status: 'En cours' },
+							{ title: 'Projet Beta', period: { start: '2022-05-15', end: '2022-12-15' }, status: 'Terminé' },
+							{ title: 'Projet Gamma', period: { start: '2023-03-01', end: '2023-09-30' }, status: 'En cours' },
+							{ title: 'Projet Delta', period: { start: '2021-11-01', end: '2022-04-30' }, status: 'Terminé' },
+							{ title: 'Projet Epsilon', period: { start: '2023-07-01', end: '2023-12-31' }, status: 'À venir' },
+							{ title: 'Projet Zeta', period: { start: '2022-02-01', end: '2022-08-31' }, status: 'Terminé' },
+						]
+					}
+					
+					  // Initialize data
+		  			fetchData()
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'options': {
+			itemsPerPage: 5,
+			sortBy: [{ key: 'title', order: 'asc' }],
+			page: 1,
+		},
+		'headers': [
+			{ title: 'Titre', key: 'title' },
+			{ title: 'Période', key: 'period' },
+			{ title: 'Statut', key: 'status' },
+		],
+		'caption': '',
+		'serverItemsLength': 6,
+		'suffix': 'server-default',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				type Item = {
+					title: string
+					period: {
+						start: string
+						end: string
+					}
+					status: string
+				}
+
+				const totalItems = ref(0)
+				const items = ref<Item[]>([])
+				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: fetchedItems, total } = await getDataFromApi(options.value as DataOptions)
+					items.value = fetchedItems
+					totalItems.value = total
+				}
+
+				const wait = async (ms: number) => {
+					return new Promise(resolve => setTimeout(resolve, ms))
+				}
+
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<{ items: Item[], total: number }> => {
+					state.value = StateEnum.PENDING
+					await wait(1000)
+
+					return new Promise((resolve) => {
+						let items = getItems()
+						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 getItems = () => {
+					return [
+						{ title: 'Projet Alpha', period: { start: '2023-01-01', end: '2023-06-30' }, status: 'En cours' },
+						{ title: 'Projet Beta', period: { start: '2022-05-15', end: '2022-12-15' }, status: 'Terminé' },
+						{ title: 'Projet Gamma', period: { start: '2023-03-01', end: '2023-09-30' }, status: 'En cours' },
+						{ title: 'Projet Delta', period: { start: '2021-11-01', end: '2022-04-30' }, status: 'Terminé' },
+						{ title: 'Projet Epsilon', period: { start: '2023-07-01', end: '2023-12-31' }, status: 'À venir' },
+						{ title: 'Projet Zeta', period: { start: '2022-02-01', end: '2022-08-31' }, status: 'Terminé' },
+					]
+				}
+
+				// Initialize data
+				fetchData()
+
+				return { args, items, state, fetchData, options, totalItems, StateEnum }
+			},
+			template: `
+			<div>
+				<SyServerTable
+					v-model:options="options"
+					:items="items"
+					:server-items-length="totalItems"
+					:loading="state === StateEnum.PENDING"
+					v-bind="args"
+					suffix="server-complex-item"
+					@update:options="fetchData"
+				>
+					<template #[\`item.period\`]="{ item }">
+						<span>
+							Depuis le {{ item.period.start }} jusqu'au {{ item.period.end }}
+						</span>
+					</template>
+				</SyServerTable>
+			</div>
+			`,
+		}
+	},
+}