@cnamts/synapse 1.0.10 → 1.0.12

package/src/components/TableToolbar/tests/__snapshots__/TableToolbar.spec.ts.snap

@@ -79,11 +79,17 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -97,10 +103,12 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
+                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
+                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -120,7 +128,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
               >
                 <!---->
                 Rechercher
@@ -128,7 +136,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
               <!---->
               <input
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -304,11 +312,17 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -322,10 +336,12 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
+                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
+                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -345,7 +361,7 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
               >
                 <!---->
                 Rechercher
@@ -354,7 +370,7 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
               <input
                 class="v-field__input"
                 disabled=""
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -501,11 +517,17 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -519,10 +541,12 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
+                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
+                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -542,7 +566,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
               >
                 <!---->
                 Rechercher
@@ -550,7 +574,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
               <!---->
               <input
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -723,11 +747,17 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -741,10 +771,12 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
+                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
+                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -764,7 +796,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
               >
                 <!---->
                 Rechercher
@@ -772,7 +804,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
               <!---->
               <input
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -937,11 +969,17 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -955,10 +993,12 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
+                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
+                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -978,7 +1018,7 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
               >
                 <!---->
                 Rechercher
@@ -986,7 +1026,7 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
               <!---->
               <input
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -1160,11 +1200,17 @@ exports[`TableToolbar > should render 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -1178,10 +1224,12 @@ exports[`TableToolbar > should render 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
+                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
+                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -1201,7 +1249,7 @@ exports[`TableToolbar > should render 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
               >
                 <!---->
                 Rechercher
@@ -1209,7 +1257,7 @@ exports[`TableToolbar > should render 1`] = `
               <!---->
               <input
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />

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

@@ -51,6 +51,21 @@ Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant
 
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
 
+Par défaut, la clé utilisée pour identifier chaque ligne lors de la sélection est `id`. Si vos éléments ne possèdent pas de propriété `id`, la valeur sélectionnée correspondra à l'objet complet de la ligne.
+
+Vous pouvez personnaliser cette clé avec la prop `selection-key` pour indiquer quel champ utiliser (ex: `userId`).
+
+Exemple d'utilisation :
+<Source dark code={`
+<SyServerTable
+  v-model="selected"
+  :items="users"
+  :headers="headers"
+  show-select
+  selection-key="userId"
+/>
+`}/>
+
 ### 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.
 

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

@@ -7,6 +7,8 @@ import type { VDataTable } from 'vuetify/components'
 import dayjs from 'dayjs'
 import { fn } from '@storybook/test'
 
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+
 interface User {
 	[key: string]: string
 	firstname: string
@@ -104,6 +106,13 @@ const meta = {
 			description: 'Texte de la légende du tableau',
 			control: { type: 'text' },
 		},
+		showExpand: {
+			description: 'Affiche une colonne permettant d\'étendre les lignes pour afficher du contenu supplémentaire',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+			},
+		},
 		resizableColumns: {
 			description: 'Permet de redimensionner les colonnes du tableau',
 			control: { type: 'boolean' },
@@ -153,6 +162,15 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
+		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: {
+				category: 'props',
+				type: { summary: 'string' },
+				defaultValue: { summary: 'undefined (fallback: id | objet complet)' },
+			},
+		},
 	},
 } satisfies Meta<typeof SyServerTable & typeof VDataTable>
 
@@ -4740,6 +4758,297 @@ export const ColumnControls: StoryObj<typeof SyServerTable> = {
 	},
 }
 
+export const ExpandableRows: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						show-expand
+						caption="Tableau complexe"
+						suffix="server-expandable"
+						@update:options="fetchData"
+					>
+					    <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+                          <v-btn
+                            :append-icon="isExpanded(internalItem) ? mdiChevronUp : mdiChevronDown"
+                            :text="isExpanded(internalItem) ? 'Fermer' : \`Plus d'info\`"
+                            class="text-none"
+                            color="medium-emphasis"
+                            size="small"
+                            variant="text"
+                            width="105"
+                            border
+                            slim
+                            @click="toggleExpand(internalItem)"
+                          />
+                      </template>
+                
+                      <template #expanded-row="{ columns, item }">
+                        <tr>
+                          <td
+                            :colspan="columns.length"
+                            class="py-2"
+                          >
+                            <strong>Informations complémentaires :</strong>
+                             <p>Plus de détails pour {{ item.firstname }} {{ item.lastname }}.</p>
+                          </td>
+                        </tr>
+                      </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'
+					import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+					
+					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,
+		'showExpand': true,
+		'suffix': 'server-expandable',
+		'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, mdiChevronDown, mdiChevronUp }
+			},
+			template: `
+			<div>
+				<SyServerTable
+					v-model:options="options"
+					:items="users"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					v-bind="args"
+                    show-expand
+                    caption="Tableau complexe"
+                    suffix="server-expandable"
+					@update:options="fetchData"
+				>
+                  <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+                    <v-btn
+                        :append-icon="isExpanded(internalItem) ? mdiChevronUp : mdiChevronDown"
+                        :text="isExpanded(internalItem) ? 'Fermer' : \`Plus d'info\`"
+                        class="text-none"
+                        color="medium-emphasis"
+                        size="small"
+                        variant="text"
+                        width="105"
+                        border
+                        slim
+                        @click="toggleExpand(internalItem)"
+                    />
+                  </template>
+
+                  <template #expanded-row="{ columns, item }">
+                    <tr>
+                      <td
+                          :colspan="columns.length"
+                          class="py-2"
+                      >
+                        <strong>Informations complémentaires :</strong>
+                        <p>Plus de détails pour {{ item.firstname }} {{ item.lastname }}.</p>
+                      </td>
+                    </tr>
+                  </template>
+                </SyServerTable>
+			</div>
+			`,
+		}
+	},
+}
+
 export const SlotItem: Story = {
 	parameters: {
 		sourceCode: [