@cnamts/synapse 1.0.6 → 1.0.7

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

@@ -0,0 +1,273 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproAccordionResultList from './AmeliproAccordionResultList.vue'
+import type { IDataListItem } from '../types'
+
+const meta = {
+	argTypes: {
+		'`accordionContent-${accordion.id}`': { description: 'Slot individuel pour le contenu des accordéons' },
+		'`headingContent-${accordion.id}`': { description: 'Slot individuel pour la partie droite du header des accordéons' },
+		'accordionContent': { description: 'Slot générique permettant de donner le même aspect à tout le contenu des accordéons' },
+		'change:pagination-select': {
+			table: { category: 'events' },
+			description: 'Événement émis sur le change du select de nombre de résultat par page',
+		},
+		'change:sort-select': {
+			table: { category: 'events' },
+			description: 'Événement émis sur le change du select de tri de la liste',
+		},
+		'click': {
+			table: { category: 'events' },
+			description: 'Événement émis au click sur la pagination',
+		},
+		'counterLabel': { description: 'Label du compteur de résultats en haut de la liste de résultats' },
+		'defaultItemOpened': { description: 'Index du bloc dépliant ouvert par défaut' },
+		'groupBorderColor': { description: 'Couleur des bordures des blocs dépliants' },
+		'groupBordered': { description: 'Défini des bordure sur les blocs dépliants' },
+		'groupColor': { description: 'Couleur de fond des blocs dépliants' },
+		'headingContent': { description: 'Slot générique permettant de donner le même aspect à toutes les parties droite du header des accordéons' },
+		'hiddenLabels': { description: 'Masque les labels des champs select' },
+		'hideSeparator': { description: 'Masque le séparateur entre le titre et le contenu des panneaux dépliants' },
+		'items': {
+			description: 'Tableau comprenant la liste des résultats',
+			table: {
+				type: {
+					detail: `Array<{
+	accordionTitle: string,
+	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' },
+		'paginationSelectLabel': { description: 'Label du select de pagination' },
+		'paginationSelectPlaceholder': { description: 'Placeholder du select de pagination' },
+		'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: 'Label de la liste' },
+		'uniqueId': { description: 'Identifiant unique de la liste' },
+
+	},
+	component: AmeliproAccordionResultList,
+	title: 'Composants/Amelipro/Listes de résultats/AmeliproAccordionResultList',
+} as Meta<typeof AmeliproAccordionResultList>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproAccordionResultList>
+
+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-accordion-result-list-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproAccordionResultList
+		:items="items"
+		title="Exemple de liste de résultats"
+		unique-id="amelipro-accordion-result-list-unique-id"
+	>
+		<template #headingContent="item">
+			<p class="mb-0">
+				{{ item.firstname }} {{ item.name }}
+			</p>
+		</template>
+
+		<template #accordionContent="item">
+			<p class="mb-0">
+				{{ item.email }}
+			</p>
+		</template>
+	</AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproAccordionResultList } 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: { AmeliproAccordionResultList },
+		setup() {
+			return { args }
+		},
+		template: `
+	<AmeliproAccordionResultList
+		v-bind="args"
+	>
+		<template #headingContent="item">
+			<p class="mb-0">
+				{{ item.firstname }} {{ item.name }}
+			</p>
+		</template>
+
+		<template #accordionContent="item">
+			<p class="mb-0">
+				{{ item.email }}
+			</p>
+		</template>
+	</AmeliproAccordionResultList>`,
+	}),
+}

package/src/components/Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+	import { type PropType, onMounted, onUpdated, ref, watch } from 'vue'
+	import AmeliproAccordionResultTemplate from '../AmeliproAccordionResult/AmeliproAccordionResultTemplate/AmeliproAccordionResultTemplate.vue'
+	import type { IDataListItem } from '../types'
+	import AmeliproPagination from '../AmeliproPagination/AmeliproPagination.vue'
+	import AmeliproSelect from '../AmeliproSelect/AmeliproSelect.vue'
+	import type { SelectItem } from '../AmeliproSelect/types'
+	import { useDisplay } from 'vuetify'
+	import { usePagination } from '../../../composables'
+
+	const props = defineProps({
+		counterLabel: {
+			type: String,
+			default: 'résultat(s)',
+		},
+		defaultItemOpened: {
+			type: [Number, null] as PropType<number | null>,
+			default: null,
+		},
+		groupBorderColor: {
+			type: String,
+			default: 'ap-grey',
+		},
+		groupBordered: {
+			type: Boolean,
+			default: true,
+		},
+		groupColor: {
+			type: String,
+			default: 'ap-white',
+		},
+		hiddenLabels: {
+			type: Boolean,
+			default: false,
+		},
+		hideSeparator: {
+			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,
+		},
+		paginationSelectLabel: {
+			type: String,
+			default: 'Nb lignes/page :',
+		},
+		paginationSelectPlaceholder: {
+			type: String,
+			default: 'Nb lignes/page',
+		},
+		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 openId = ref<string | null>(null)
+	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()
+
+	onMounted(() => {
+		if (props.defaultItemOpened !== null) {
+			openId.value = String(props.items[props.defaultItemOpened].id)
+		}
+		hideSelectLabel()
+		setDefaultItemsPerPage()
+	})
+
+	onUpdated(() => {
+		hideSelectLabel()
+	})
+
+	watch(() => props.items, () => {
+		updatePagination(props.items, paginationSelectModel.value)
+		if (currentPage.value > paginationTable.value.length) {
+			currentPage.value = Math.max(1, paginationTable.value.length)
+		}
+	})
+
+	const openClose = (id: number): void => {
+		openId.value = openId.value === String(id) ? null : String(id)
+	}
+
+	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 emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select', 'open-close'])
+	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
+		}
+	}
+
+	// Rendre publique la méthode openClose permet à un bouton ou à un composant externe de fermer/ouvrir l'accordéon
+	defineExpose({ openClose })
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		class="amelipro-accordion-result-list"
+	>
+		<div
+			v-if="!noResultListInfos"
+			:id="`${uniqueId}-header`"
+			class="amelipro-accordion-result-list__headings d-flex justify-space-between align-end mb-6"
+		>
+			<p
+				:id="`${uniqueId}-result-counter`"
+				class="d-inline-block 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-accordion-result-list__selects">
+				<AmeliproSelect
+					v-if="sortSelectItems.length > 0"
+					v-model="sortSelectModel"
+					class="ml-2 mb-0 pt-0 amelipro-accordion-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"
+					v-model="paginationSelectModel"
+					class="ml-2 mb-0 pt-0 amelipro-accordion-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 class="amelipro-accordion-result-list__list-wrapper">
+			<ul
+				:id="`${uniqueId}-list`"
+				:aria-label="title"
+				class="list-style-none amelipro-accordion-result-list__list"
+			>
+				<li
+					v-for="(accordion, index) in currentPageItems(items)"
+					:key="index"
+					class="amelipro-accordion-result-list__item"
+				>
+					<AmeliproAccordionResultTemplate
+						:border-color="groupBorderColor"
+						:bordered="groupBordered"
+						:card-color="groupColor"
+						:hide-separator="hideSeparator"
+						:is-open="`accordion-result-${accordion.id}` === openId"
+						:unique-id="`accordion-result-${accordion.id}`"
+						@open-close="openClose"
+					>
+						<template #headingContent>
+							<slot
+								:name="`headingContent-${accordion.id}`"
+								v-bind="accordion"
+							>
+								<slot
+									name="headingContent"
+									v-bind="accordion"
+								/>
+							</slot>
+						</template>
+
+						<template #default>
+							<slot
+								:name="`accordionContent-${accordion.id}`"
+								v-bind="accordion"
+							>
+								<slot
+									name="accordionContent"
+									v-bind="accordion"
+								/>
+							</slot>
+						</template>
+					</AmeliproAccordionResultTemplate>
+				</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/AmeliproAccordionResultList/__tests__/AmeliproAccordionResultList.spec.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import AmeliproAccordionResultList from '../AmeliproAccordionResultList.vue'
+
+describe('AmeliproAccordionResultList', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproAccordionResultList, {
+			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-accordion-list-unique-id',
+			},
+			slots: {
+				accordionContent: '<p>Contenu du dépliant</p>',
+				headingContent: '<h3>Titre du dépliant</h3>',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})