@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/Amelipro/AmeliproResultList/AmeliproResultList.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproResultListStories from './AmeliproResultList.stories';
+
+<Meta of={AmeliproResultListStories} />
+
+# AmeliproResultList
+
+L’élément `AmeliproResultList` est utilisé pour afficher des listes de résultats dans l’application Amelipro 
+
+<Canvas of={AmeliproResultListStories.Default} />
+
+## API
+
+<Controls of={AmeliproResultListStories.Default} />

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

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproCard from '../AmeliproCard/AmeliproCard.vue'
+import AmeliproResultList from './AmeliproResultList.vue'
+import type { IDataListItem } from '../types'
+
+const meta = {
+	argTypes: {
+		'`result-${item.id}`': { description: 'Slot individuel si tous vos résultats ne sont pas basés sur le même gabarit' },
+		'change:pagination-select': { description: 'Événement émis à la sélection d’un nombre de résultats par page. Émet le nombre de résultat par page sélectionné', type: 'number' },
+		'change:sort-select': { description: 'Événement émis à la sélection d’un tri. Émet le choix de tri sélectionné', type: '' },
+		'click': { description: 'Événement émis au click sur un bouton de pagination', type: 'void' },
+		'counterLabel': { description: 'Label du compteur de résultats en haut de la liste de résultats' },
+		'hiddenLabels': { description: 'Masque les labels des champs select' },
+		'items': {
+			description: 'Tableau comprenant la liste des résultats',
+			table: {
+				type: {
+					detail: `Array<{
+	id: number,
+	[key: string]: string,
+}>`,
+					summary: 'IDataListItem[]',
+				},
+			},
+		},
+		'itemsToDisplayDesktop': { description: 'Nombre d’éléments affichés par page en desktop par défaut' },
+		'itemsToDisplayMobile': { description: 'Nombre d’éléments affichés par page en mobile par défaut' },
+		'noResultListInfos': { description: 'Masques les informations et les filtres au-dessus de la liste de résultats' },
+		'paginationSelect': { description: 'Affiche le select nombre de résultat par page' },
+		'paginationSelectLabel': { description: 'Label du select de pagination' },
+		'paginationSelectPlaceholder': { description: 'Placeholder du select de pagination' },
+		'result': { description: 'Slot générique permettant de donner le même aspect à tout les items de votre liste' },
+		'sortSelect': { description: 'Affiche le select de tri' },
+		'sortSelectItems': { description: 'Items du select dédié aux tris' },
+		'sortSelectLabel': { description: 'Label du select de tri' },
+		'sortSelectPlaceholder': { description: 'Placeholder du select de tri' },
+		'title': { description: 'Titre de la liste' },
+		'uniqueId': { description: 'Identifiant unique de la liste' },
+	},
+	component: AmeliproResultList,
+	title: 'Composants/Amelipro/Listes de résultats/AmeliproResultList',
+} as Meta<typeof AmeliproResultList>
+export default meta
+
+type Story = StoryObj<typeof AmeliproResultList>
+
+const items: IDataListItem[] = [
+	{
+		email: 'jean.bernard@gmail.com',
+		firstname: 'Jean',
+		id: 0,
+		name: 'Bernard',
+	},
+	{
+		email: 'simon.pierre@gmail.com',
+		firstname: 'Simon',
+		id: 1,
+		name: 'Pierre',
+	},
+	{
+		email: 'michel.souris@gmail.com',
+		firstname: 'Michel',
+		id: 2,
+		name: 'Souris',
+	},
+	{
+		email: 'amandine.jabot@gmail.com',
+		firstname: 'Amandine',
+		id: 3,
+		name: 'Jabot',
+	},
+	{
+		email: 'jean.bernard@gmail.com',
+		firstname: 'Jean',
+		id: 4,
+		name: 'Bernard',
+	},
+	{
+		email: 'simon.pierre@gmail.com',
+		firstname: 'Simon',
+		id: 5,
+		name: 'Pierre',
+	},
+	{
+		email: 'michel.souris@gmail.com',
+		firstname: 'Michel',
+		id: 6,
+		name: 'Souris',
+	},
+	{
+		email: 'amandine.jabot@gmail.com',
+		firstname: 'Amandine',
+		id: 7,
+		name: 'Jabot',
+	},
+	{
+		email: 'jean.bernard@gmail.com',
+		firstname: 'Jean',
+		id: 8,
+		name: 'Bernard',
+	},
+	{
+		email: 'simon.pierre@gmail.com',
+		firstname: 'Simon',
+		id: 9,
+		name: 'Pierre',
+	},
+	{
+		email: 'michel.souris@gmail.com',
+		firstname: 'Michel',
+		id: 10,
+		name: 'Souris',
+	},
+	{
+		email: 'amandine.jabot@gmail.com',
+		firstname: 'Amandine',
+		id: 11,
+		name: 'Jabot',
+	},
+]
+
+export const Default: Story = {
+	args: {
+		items,
+		title: 'Exemple de liste de résultats',
+		uniqueId: 'amelipro-result-list-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproResultList
+		:items="items"
+		title="Exemple de liste de résultats"
+		unique-id="amelipro-result-list-id"
+	>
+		<template #result="item">
+			<AmeliproCard
+				:card-title="[\`Titre de carte \${item.id + 1}\`]"
+				class="mb-2"
+				:unique-id="[\`result-list-card-\${item.id}\`]"
+			>
+				<p>{{ item.firstname }} {{ item.name }}</p>
+
+				<p>{{ item.email }}</p>
+			</AmeliproCard>
+		</template>
+	</AmeliproResultList>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproResultList } from '@cnamts/synapse'
+
+	const items = [
+		{
+			email: 'jean.bernard@gmail.com',
+			firstname: 'Jean',
+			id: 0,
+			name: 'Bernard',
+		},
+		{
+			email: 'simon.pierre@gmail.com',
+			firstname: 'Simon',
+			id: 1,
+			name: 'Pierre',
+		},
+		{
+			email: 'michel.souris@gmail.com',
+			firstname: 'Michel',
+			id: 2,
+			name: 'Souris',
+		},
+		{
+			email: 'amandine.jabot@gmail.com',
+			firstname: 'Amandine',
+			id: 3,
+			name: 'Jabot',
+		},
+		{
+			email: 'jean.bernard@gmail.com',
+			firstname: 'Jean',
+			id: 4,
+			name: 'Bernard',
+		},
+		{
+			email: 'simon.pierre@gmail.com',
+			firstname: 'Simon',
+			id: 5,
+			name: 'Pierre',
+		},
+		{
+			email: 'michel.souris@gmail.com',
+			firstname: 'Michel',
+			id: 6,
+			name: 'Souris',
+		},
+		{
+			email: 'amandine.jabot@gmail.com',
+			firstname: 'Amandine',
+			id: 7,
+			name: 'Jabot',
+		},
+		{
+			email: 'jean.bernard@gmail.com',
+			firstname: 'Jean',
+			id: 8,
+			name: 'Bernard',
+		},
+		{
+			email: 'simon.pierre@gmail.com',
+			firstname: 'Simon',
+			id: 9,
+			name: 'Pierre',
+		},
+		{
+			email: 'michel.souris@gmail.com',
+			firstname: 'Michel',
+			id: 10,
+			name: 'Souris',
+		},
+		{
+			email: 'amandine.jabot@gmail.com',
+			firstname: 'Amandine',
+			id: 11,
+			name: 'Jabot',
+		},
+	]
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproResultList, AmeliproCard },
+		setup() {
+			return { args }
+		},
+		template: `
+<div>
+<AmeliproResultList
+	v-bind="args"
+>
+	<template #result="item">
+		<AmeliproCard
+			:card-title="\`Titre de carte \${item.id + 1}\`"
+			class="mb-2"
+			:unique-id="[\`result-list-card-\${item.id}\`]"
+		>
+			<p>{{ item.firstname }} {{ item.name }}</p>
+
+			<p>{{ item.email }}</p>
+		</AmeliproCard>
+	</template>
+</AmeliproResultList>
+<button @click="toto()"
+</div>
+		`,
+	}),
+
+}

package/src/components/Amelipro/AmeliproResultList/AmeliproResultList.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+	import { type PropType, computed, onMounted, onUpdated, ref, watch } from 'vue'
+	import AmeliproPagination from '../AmeliproPagination/AmeliproPagination.vue'
+	import AmeliproSelect from '../AmeliproSelect/AmeliproSelect.vue'
+	import type { IDataListItem } from '../types'
+	import type { SelectItem } from '../AmeliproSelect/types'
+	import { useDisplay } from 'vuetify'
+	import { usePagination } from '../../../composables/usePagination'
+
+	const props = defineProps({
+		counterLabel: {
+			type: String,
+			default: 'résultat(s)',
+		},
+		hiddenLabels: {
+			type: Boolean,
+			default: false,
+		},
+		items: {
+			type: Array as PropType<IDataListItem[]>,
+			default: () => [],
+		},
+		itemsToDisplayDesktop: {
+			type: Number,
+			default: 10,
+		},
+		itemsToDisplayMobile: {
+			type: Number,
+			default: 10,
+		},
+		noResultListInfos: {
+			type: Boolean,
+			default: false,
+		},
+		paginationSelect: {
+			type: Boolean,
+			default: true,
+		},
+		paginationSelectLabel: {
+			type: String,
+			default: 'Nb lignes/page :',
+		},
+		paginationSelectPlaceholder: {
+			type: String,
+			default: 'Nb lignes/page',
+		},
+		sortSelect: {
+			type: Boolean,
+			default: true,
+		},
+		sortSelectItems: {
+			type: Array as PropType<SelectItem[]>,
+			default: () => [],
+		},
+		sortSelectLabel: {
+			type: String,
+			default: 'Trier par :',
+		},
+		sortSelectPlaceholder: {
+			type: String,
+			default: 'Trier par',
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const { mdAndUp } = useDisplay()
+
+	const {
+		currentPage,
+		currentPageItems,
+		itemToDisplay,
+		paginationSelectItems,
+		paginationTable,
+		setDefaultItemsPerPage,
+		updatePagination,
+	} = usePagination(props.items, props.itemsToDisplayDesktop, props.itemsToDisplayMobile)
+
+	const paginationSelectModel = ref(itemToDisplay.value)
+	const sortSelectModel = ref()
+
+	watch(() => props.items, () => {
+		updatePagination(props.items, paginationSelectModel.value)
+		if (currentPage.value > paginationTable.value.length) {
+			currentPage.value = Math.max(1, paginationTable.value.length)
+		}
+	})
+
+	onMounted(() => {
+		hideSelectLabel()
+		setDefaultItemsPerPage()
+	})
+
+	onUpdated(() => {
+		hideSelectLabel()
+	})
+
+	const hideSelectLabel = (): void => {
+		if (props.hiddenLabels) {
+			document.getElementById(`${props.uniqueId}-sort-select-label`)?.setAttribute('class', 'd-sr-only')
+			document.getElementById(`${props.uniqueId}-pagination-select-label`)?.setAttribute('class', 'd-sr-only')
+		}
+	}
+
+	const currentItems = computed<IDataListItem[]>(() => currentPageItems(props.items))
+
+	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select'])
+
+	const emitClickEvent = (newCurrentPage: number): void => {
+		emit('click')
+		if (newCurrentPage !== null && newCurrentPage !== undefined) {
+			currentPage.value = newCurrentPage
+		}
+	}
+
+	const emitSortSelectChange = (): void => {
+		emit('change:sort-select', sortSelectModel.value)
+	}
+
+	const emitPaginationSelectChange = (): void => {
+		emit('change:pagination-select')
+		updatePagination(props.items, paginationSelectModel.value)
+
+		if ((currentPage.value !== null && currentPage.value !== undefined) && currentPage.value > paginationTable.value.length) {
+			currentPage.value = paginationTable.value.length
+		}
+
+		if (currentPage.value === 0) {
+			currentPage.value = 1
+		}
+	}
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		class="amelipro-result-list"
+	>
+		<div
+			v-if="!noResultListInfos"
+			:id="`${uniqueId}-header`"
+			class="d-flex justify-space-between align-end mb-6 amelipro-result-list__infos"
+		>
+			<p
+				:id="`${uniqueId}-result-counter`"
+				class="d-inline-block align-center mb-0 total-counter font-weight-semibold"
+			>
+				<span class="d-sr-only">Nombre de lignes dans la liste ci-après :</span>
+				{{ items.length }} {{ counterLabel }}
+			</p>
+
+			<div class="d-inline-flex align-center amelipro-result-list__select__wrapper">
+				<AmeliproSelect
+					v-if="sortSelectItems.length > 0 && sortSelect"
+					v-model="sortSelectModel"
+					class="ml-2 mb-0 pt-0 amelipro-result-list__sort-select"
+					global-max-width="170px"
+					:hide-error-message="true"
+					:items="sortSelectItems"
+					:label="sortSelectLabel"
+					:placeholder="sortSelectPlaceholder"
+					:unique-id="`${uniqueId}-sort-select`"
+					@update:model-value="emitSortSelectChange()"
+				/>
+
+				<AmeliproSelect
+					v-if="mdAndUp && paginationSelect"
+					v-model="paginationSelectModel"
+					class="ml-2 mb-0 pt-0 amelipro-result-list__pagination-select"
+					global-max-width="170px"
+					:hide-error-message="true"
+					:items="paginationSelectItems"
+					:label="paginationSelectLabel"
+					:placeholder="paginationSelectPlaceholder"
+					:unique-id="`${uniqueId}-pagination-select`"
+					@update:model-value="emitPaginationSelectChange()"
+				/>
+			</div>
+		</div>
+		<div>
+			<ul
+				:id="`${uniqueId}-list`"
+				:aria-label="title"
+				class="list-style-none amelipro-result-list__list"
+			>
+				<li
+					v-for="(item, index) in currentItems"
+					:id="`${uniqueId}-item-${index}`"
+					:key="index"
+					class="amelipro-result-list__item"
+				>
+					<slot
+						:name="`result-${item.id}`"
+						v-bind="item"
+					>
+						<slot
+							name="result"
+							v-bind="item"
+						/>
+					</slot>
+				</li>
+			</ul>
+		</div>
+
+		<AmeliproPagination
+			v-if="paginationTable !== undefined && paginationTable.length > 0"
+			:active-page-default="1"
+			class="mt-2"
+			:items="paginationTable"
+			:unique-id="`${uniqueId}-pagination`"
+			@click="emitClickEvent"
+		/>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.total-counter {
+	background-color: apTokens.$ap-grey-lighten2;
+	border: 1px solid apTokens.$ap-grey-darken1;
+	border-radius: apTokens.$btn-radius;
+	padding: 0.75rem 1rem;
+}
+</style>

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import AmeliproResultList from '../AmeliproResultList.vue'
+
+describe('AmeliproResultList', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproResultList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{ id: 0 },
+					{ id: 1 },
+					{ id: 2 },
+					{ id: 3 },
+					{ id: 4 },
+					{ id: 5 },
+					{ id: 6 },
+					{ id: 7 },
+					{ id: 8 },
+					{ id: 9 },
+					{ id: 10 },
+					{ id: 11 },
+				],
+				title: 'Exemple de liste de résultats',
+				uniqueId: 'amelipro-result-unique-id',
+			},
+			slots: {
+				result: '<p>Exemple de résultat</p>',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})