@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Amelipro/AmeliproTable/AmeliproTable.stories.ts

@@ -47,6 +47,16 @@ const meta = {
 	width: string;
 	maxWidth: string;
 	descriptionId?: string;
+	sort?: {
+		ascendant?: {
+			label: string,
+			disabled: boolean,
+		},
+		descendant?: {
+			label: string,
+			disabled: boolean,
+		},
+	};
 }>`,
 				},
 			},
@@ -560,7 +570,42 @@ export const PaginationEtTri: Story = {
 	name: 'Pagination et tri',
 	args: {
 		dataList,
-		headers,
+		headers: [
+			{
+				align: 'left',
+				maxWidth: '25%',
+				minWidth: '20%',
+				name: 'name',
+				title: 'Nom',
+				width: '25%',
+				sort: {
+					ascendant: {
+						label: 'tri de A vers Z',
+						disabled: false,
+					},
+					descendant: {
+						label: 'tri de Z vers A',
+						disabled: false,
+					},
+				},
+			},
+			{
+				align: 'left',
+				maxWidth: '25%',
+				minWidth: '20%',
+				name: 'firstname',
+				title: 'Prénom',
+				width: '25%',
+			},
+			{
+				align: 'left',
+				maxWidth: '25%',
+				minWidth: '20%',
+				name: 'email',
+				title: 'E-mail',
+				width: '25%',
+			},
+		],
 		title: 'Tableau avec pagination et tri',
 		uniqueId: 'table-pagination-tri',
 		itemsToDisplayDesktop: 2,
@@ -597,6 +642,8 @@ export const PaginationEtTri: Story = {
         pagination-select-label="Résultats par page"
         pagination-select-placeholder="Sélectionner"
         @change:sort-select="onSortChange"
+		@asc-sort="onSortAsc"
+		@desc-sort="onSortDesc"
     />
 </template>
                 `,
@@ -608,7 +655,7 @@ import { ref, computed } from 'vue'
 import { AmeliproTable } from '@cnamts/synapse'
 
 const headers = [
-    { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'name', title: 'Nom', width: '25%' },
+    { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'name', title: 'Nom', width: '25%', sort: { ascendant: { label: 'Tri de A vers Z', disabled: false }, descedant: {label: 'Tri de Z vers A', disabled: false } } },
     { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'firstname', title: 'Prénom', width: '25%' },
     { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'email', title: 'E-mail', width: '25%' },
 ]
@@ -636,8 +683,19 @@ const sortedDataList = computed(() => {
 function onSortChange(val: string) {
     sortValue.value = val
 }
-</script>
-                `,
+
+function onSortAsc(event: Event, header: string) {
+	if (header === 'name') {
+		sortValue.value = 'name-asc'
+	}
+}
+
+function onSortDesc(event: Event, header: string) {
+	if (header === 'name') {
+		sortValue.value = 'name-desc'
+	}
+}
+</script>`,
 			},
 		],
 	},
@@ -658,7 +716,19 @@ function onSortChange(val: string) {
 			function onSortChange(val: string) {
 				sortValue.value = val
 			}
-			return { args, sortedDataList, onSortChange }
+
+			function onSortAsc(header: string) {
+				if (header === 'name') {
+					sortValue.value = 'name-asc'
+				}
+			}
+
+			function onSortDesc(header: string) {
+				if (header === 'name') {
+					sortValue.value = 'name-desc'
+				}
+			}
+			return { args, sortedDataList, onSortChange, onSortAsc, onSortDesc }
 		},
 		template: `
 <p class="mb-2">Tableau avec pagination personnalisée et options de tri. Le tri est appliqué via l'événement <code>change:sort-select</code>.</p>
@@ -666,6 +736,8 @@ function onSortChange(val: string) {
     v-bind="args"
     :data-list="sortedDataList"
     @change:sort-select="onSortChange"
+	@asc-sort="onSortAsc"
+	@desc-sort="onSortDesc"
 />
         `,
 	}),
@@ -678,9 +750,9 @@ export const LargeurPersonnalisee: Story = {
 		headers,
 		title: 'Tableau largeur personnalisée',
 		uniqueId: 'table-largeur',
-		tableMinWidth: '600px',
+		tableMinWidth: '1200px',
 		tableMaxWidth: '900px',
-		tableWidth: '80%',
+		tableWidth: '100%',
 	},
 	parameters: {
 		sourceCode: [
@@ -692,9 +764,9 @@ export const LargeurPersonnalisee: Story = {
         :headers="headers"
         title="Tableau largeur personnalisée"
         unique-id="table-largeur"
-        table-min-width="600px"
+        table-min-width="1200px"
         table-max-width="900px"
-        table-width="80%"
+        table-width="100%"
     />
 </template>
                 `,

package/src/components/Amelipro/AmeliproTable/AmeliproTable.vue

@@ -2,6 +2,7 @@
 	import type { AmeliproTableCell, AmeliproTableHeader } from './types'
 	import type { IDataListItem, IndexedObject } from '../types'
 	import { type PropType, computed, onMounted, onUpdated, ref, watch } from 'vue'
+	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
 	import AmeliproPagination from '../AmeliproPagination/AmeliproPagination.vue'
 	import AmeliproSelect from '../AmeliproSelect/AmeliproSelect.vue'
 	import type { SelectItem } from '../AmeliproSelect/types'
@@ -133,6 +134,16 @@
 
 	const currentDataList = computed<IDataListItem[]>(() => currentPageItems(props.dataList))
 
+	const hasHeaderSorting = computed<boolean>(() => {
+		const hasSorting = ref(false)
+		props.headers.forEach((header: AmeliproTableHeader) => {
+			if (header.sort) {
+				hasSorting.value = true
+			}
+		})
+		return hasSorting.value
+	})
+
 	const tableWidthStyles = computed<IndexedObject>(() => {
 		const tableStyle: IndexedObject = {
 			maxWidth: props.tableMaxWidth,
@@ -146,7 +157,7 @@
 		return tableStyle
 	})
 
-	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select'])
+	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select', 'asc-sort', 'desc-sort'])
 	const emitClickEvent = (newCurrentPage: number): void => {
 		emit('click')
 		if (newCurrentPage !== null && newCurrentPage !== undefined) {
@@ -158,6 +169,16 @@
 		emit('change:sort-select', sortSelectModel.value)
 	}
 
+	const emitHeaderSortEvent = (order: string, header: string): void => {
+		if (order.toLowerCase() === 'ascendant') {
+			emit('asc-sort', header)
+		}
+
+		if (order.toLowerCase() === 'descendant') {
+			emit('desc-sort', header)
+		}
+	}
+
 	const emitPaginationSelectChange = (): void => {
 		emit('change:pagination-select')
 		updatePagination(props.dataList, paginationSelectModel.value)
@@ -223,76 +244,113 @@
 			</div>
 		</div>
 		<div
-			v-if="mdAndUp"
+			v-if="mdAndUp || hasHeaderSorting"
 			:id="`${uniqueId}-desktop`"
-			class="amelipro-table__wrapper--desktop"
 			style="overflow-x: auto;"
-			:style="tableWidthStyles"
 		>
-			<table
-				:id="`${uniqueId}-table`"
-				:aria-label="title"
-				class="amelipro-table__table--desktop"
-				:class="{
-					'vertical-border': verticalBorder
-				}"
+			<div
+				class="amelipro-table__wrapper--desktop"
+				:style="tableWidthStyles"
 			>
-				<thead>
-					<tr :id="`${uniqueId}-table-header`">
-						<th
-							v-for="(header, index) in headers"
-							:id="`${uniqueId}-table-header-cell-${index}`"
-							:key="index"
-							class="bg-ap-grey-lighten-4 font-weight-semibold"
-							:class="header.headerClasses"
-							scope="col"
-							:style="`min-width: ${header.minWidth};
-							width: ${header.width};
-							max-width: ${header.maxWidth};
-							text-align: ${header.align};`"
-						>
-							<p
-								:aria-describedby="header.descriptionId"
-								class="mb-0"
+				<table
+					:id="`${uniqueId}-table`"
+					:aria-label="title"
+					class="amelipro-table__table--desktop"
+					:class="{
+						'vertical-border': verticalBorder
+					}"
+				>
+					<thead>
+						<tr :id="`${uniqueId}-table-header`">
+							<th
+								v-for="(header, index) in headers"
+								:id="`${uniqueId}-table-header-cell-${index}`"
+								:key="index"
+								class="bg-ap-grey-lighten-4 font-weight-semibold"
+								:class="header.headerClasses"
+								scope="col"
+								:style="`min-width: ${header.minWidth};
+								width: ${header.width};
+								max-width: ${header.maxWidth};
+								text-align: ${header.align};`"
 							>
-								{{ header.title }}
-							</p>
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr
-						v-for="(row, rowIndex) in currentDataList"
-						:id="`${uniqueId}-table-row-${rowIndex}`"
-						:key="rowIndex"
-					>
-						<td
-							v-for="(cell, cellIndex) in datas(row)"
-							:id="`${uniqueId}-table-row-${rowIndex}-cell-${cellIndex}`"
-							:key="cellIndex"
-							:class="cell.value !== undefined ? cell.columnClasses : undefined"
-							:style="cell !== undefined ? `text-align: ${cell.columnAlign};` : undefined"
+								<p
+									:aria-describedby="header.descriptionId"
+									class="mb-0"
+									:class="{ 'd-flex' : header.sort }"
+								>
+									{{ header.title }}
+
+									<AmeliproIconBtn
+										v-if="header.sort?.ascendant"
+										class="ml-2 sort-btn"
+										:btn-label="header.sort?.ascendant.label"
+										:btn-title="header.sort?.ascendant.label"
+										:disabled="header.sort.ascendant.disabled"
+										icon="triangleUp"
+										icon-bg-color="transparent"
+										:icon-color="header.sort.ascendant.disabled ? 'ap-grey-lighten-2' :'ap-grey-darken-1'"
+										icon-hover-bg-color="transparent"
+										:icon-hover-color="header.sort.ascendant.disabled ? 'ap-grey-lighten-2' :'ap-grey-darken-1'"
+										:unique-id="`${uniqueId}-table-header-cell-${index}-asc-sort-btn`"
+										size="9px"
+										@click="emitHeaderSortEvent('ascendant', header.name)"
+									/>
+
+									<AmeliproIconBtn
+										v-if="header.sort?.descendant"
+										class="sort-btn"
+										:class="{ 'ml-2': !header.sort.ascendant }"
+										:btn-label="header.sort.descendant.label"
+										:btn-title="header.sort.descendant.label"
+										:disabled="header.sort.descendant.disabled"
+										icon="triangleDown"
+										icon-bg-color="transparent"
+										:icon-color="header.sort.descendant.disabled ? 'ap-grey-lighten-2' :'ap-grey-darken-1'"
+										icon-hover-bg-color="transparent"
+										:icon-hover-color="header.sort.descendant.disabled ? 'ap-grey-lighten-2' :'ap-grey-darken-1'"
+										:unique-id="`${uniqueId}-table-header-cell-${index}-desc-sort-btn`"
+										size="9px"
+										@click="emitHeaderSortEvent('descendant', header.name)"
+									/>
+								</p>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="(row, rowIndex) in currentDataList"
+							:id="`${uniqueId}-table-row-${rowIndex}`"
+							:key="rowIndex"
 						>
-							<p
-								v-if="cell.value !== undefined"
-								class="mb-0"
+							<td
+								v-for="(cell, cellIndex) in datas(row)"
+								:id="`${uniqueId}-table-row-${rowIndex}-cell-${cellIndex}`"
+								:key="cellIndex"
+								:class="cell.value !== undefined ? cell.columnClasses : undefined"
+								:style="cell !== undefined ? `text-align: ${cell.columnAlign};` : undefined"
 							>
-								{{ cell.value }}
-							</p>
-
-							<slot
-								v-else
-								:name="`item-${headers[cellIndex].name}`"
-								v-bind="row"
-							/>
-						</td>
-					</tr>
-				</tbody>
-			</table>
+								<p
+									v-if="cell.value !== undefined"
+									class="mb-0"
+								>
+									{{ cell.value }}
+								</p>
+
+								<slot
+									v-else
+									:name="`item-${headers[cellIndex].name}`"
+									v-bind="row"
+								/>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div
-			v-if="!mdAndUp"
+			v-if="!mdAndUp && !hasHeaderSorting"
 			:id="`${uniqueId}-mobile`"
 			class="amelipro-table__wrapper--mobile"
 		>
@@ -396,6 +454,16 @@ td {
 	}
 }
 
+.amelipro-table__wrapper--desktop {
+	& th:first-child {
+		border-top-left-radius: 8px;
+	}
+
+	& th:last-child {
+		border-top-right-radius: 8px;
+	}
+}
+
 .vertical-border {
 	td,
 	th {
@@ -424,4 +492,14 @@ tr:last-child td {
 	border-radius: apTokens.$btn-radius;
 	padding: 0.5rem 0.75rem;
 }
+
+.sort-btn {
+	margin-top: -4px;
+	width: 24px !important;
+	height: 24px !important;
+
+	& :deep(.amelipro-custom-icon) {
+		vertical-align: unset !important;
+	}
+}
 </style>

package/src/components/Amelipro/AmeliproTable/__tests__/AmeliproTable.spec.ts

@@ -14,6 +14,16 @@ describe('AmeliproTable', () => {
 						name: 'name',
 						title: 'Nom',
 						width: '25%',
+						sort: {
+							ascendant: {
+								label: 'tri asc',
+								disabled: false,
+							},
+							descendant: {
+								label: 'tri desc',
+								disabled: true,
+							},
+						},
 					},
 					{
 						align: 'left',