@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/DataList/DataList.vue

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+	import { computed } from 'vue'
+	import type { PropType } from 'vue'
+
+	import { locales } from './locales'
+	import DataListItem from '@/components/DataListItem/DataListItem.vue'
+	import DataListLoading from './DataListLoading/DataListLoading.vue'
+
+	import type { DataListIcons, DataListItem as DataListItemInterface, ItemClass } from './types'
+	import { useWidthable } from '@/composables/widthable'
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<DataListItemInterface[]>,
+			required: true,
+		},
+		icons: {
+			type: Object as PropType<DataListIcons | undefined>,
+			default: undefined,
+		},
+		listTitle: {
+			type: String,
+			default: undefined,
+		},
+		titleClass: {
+			type: String,
+			default: 'text-subtitle-1 font-weight-bold mb-3',
+		},
+		row: {
+			type: Boolean,
+			default: false,
+		},
+		placeholder: {
+			type: String,
+			default: undefined,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		itemsNumberLoading: {
+			type: Number,
+			default: 1,
+		},
+		headingLoading: {
+			type: Boolean,
+			default: false,
+		},
+		renderHtmlValue: {
+			type: Boolean,
+			default: false,
+		},
+		maxWidth: {
+			type: String,
+			default: undefined,
+		},
+		minWidth: {
+			type: String,
+			default: undefined,
+		},
+		width: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const { widthStyles } = useWidthable(props)
+
+	const emit = defineEmits(['click:item-action'])
+
+	const label = computed(() => (props.loading ? locales.loadingLabel : undefined))
+
+	const getIcon = (iconName?: string): string | undefined => {
+		if (!iconName || !props.icons) {
+			return
+		}
+		return props.icons?.[iconName]
+	}
+
+	const getItemClass = (index: number, itemClass?: string): ItemClass => {
+		const margin = {
+			'mb-2': index !== props.items.length - 1,
+		}
+		return [margin, itemClass]
+	}
+</script>
+
+<template>
+	<div
+		:aria-label="label"
+		:style="widthStyles"
+		class="vd-data-list"
+	>
+		<VFadeTransition mode="out-in">
+			<DataListLoading
+				v-if="loading"
+				:items-number="itemsNumberLoading"
+				:heading="headingLoading"
+				:title-class="titleClass"
+				:row="row"
+			/>
+
+			<div v-else>
+				<slot name="title">
+					<h4
+						v-if="listTitle"
+						:class="titleClass"
+					>
+						{{ listTitle }}
+					</h4>
+				</slot>
+
+				<ul v-if="items.length">
+					<DataListItem
+						v-for="(item, index) in items"
+						:key="index"
+						:label="item.key"
+						:value="item.value"
+						:action="item.action"
+						:chip="item.chip"
+						:row="row"
+						:render-html-value="renderHtmlValue"
+						:icon="getIcon(item.icon)"
+						:placeholder="placeholder"
+						:vuetify-options="item.options"
+						:class="getItemClass(index, item.class)"
+						class="vd-data-list-item text-body-1"
+						@click:action="emit('click:item-action', index)"
+					/>
+				</ul>
+			</div>
+		</VFadeTransition>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+:deep(ul) {
+  list-style: none;
+}
+</style>

package/src/components/DataList/DataListLoading/DataListLoading.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+	import { computed } from 'vue'
+	import HeaderLoading from '@/components/HeaderLoading/HeaderLoading.vue'
+
+	// Define props
+	const props = defineProps({
+		itemsNumber: {
+			type: Number,
+			default: 1,
+		},
+		heading: {
+			type: Boolean,
+			default: false,
+		},
+		row: {
+			type: Boolean,
+			default: false,
+		},
+	})
+
+	const itemWidth = computed(() => (props.row ? '150px' : '90px'))
+</script>
+
+<template>
+	<div
+		aria-hidden="true"
+		class="vd-data-list-loading"
+	>
+		<HeaderLoading
+			v-if="heading"
+			width="100px"
+			height="1.5rem"
+			class="mb-4"
+		/>
+
+		<ul>
+			<li
+				v-for="index in itemsNumber"
+				:key="index + '-loading-item'"
+				:class="{ 'mb-4': index !== itemsNumber }"
+				class="vd-data-list-loading-item"
+			>
+				<HeaderLoading
+					v-if="!row"
+					width="60px"
+					height="1rem"
+					class="mb-1"
+				/>
+				<HeaderLoading
+					:width="itemWidth"
+					height="1.5rem"
+				/>
+			</li>
+		</ul>
+	</div>
+</template>

package/src/components/DataList/DataListLoading/tests/DataListLoading.spec.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import DataListLoading from '../DataListLoading.vue'
+
+describe('DataListLoading', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(DataListLoading, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				heading: true,
+				itemsNumber: 3,
+				row: true,
+			},
+		})
+
+		const elExists = wrapper.find('.vd-data-list-loading-item').exists()
+		expect(elExists).toBe(true)
+	})
+})

package/src/components/DataList/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	loadingLabel: 'Le contenu est en cours de chargement.',
+}

package/src/components/DataList/tests/DataList.spec.ts

@@ -0,0 +1,194 @@
+import { describe, it, expect } from 'vitest'
+import { type DOMWrapper, mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import DataList from '../DataList.vue'
+import type { DataListItem } from '../types'
+
+const items = [
+	{
+		key: 'Civility',
+		value: '',
+	},
+	{
+		key: 'Name',
+		value: 'Dupont',
+	},
+	{
+		key: 'First name',
+		value: 'Paul',
+	},
+] as DataListItem[]
+
+describe('DataList', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: items,
+			},
+		})
+
+		const elExists = wrapper.find('.vd-data-list').exists()
+		expect(elExists).toBe(true)
+
+		// Check items exists
+		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		expect(itemsExists).toBe(true)
+
+		const titleExists = wrapper.find('h4').exists()
+		expect(titleExists).toBe(false)
+	})
+
+	it('renders correctly with a title', () => {
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: items,
+				listTitle: 'Informations',
+			},
+		})
+
+		const elExists = wrapper.find('h4').exists()
+		expect(elExists).toBe(true)
+	})
+
+	it('renders correctly with an empty list', () => {
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [],
+			},
+		})
+
+		// Check items does not exist
+		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		expect(itemsExists).toBe(false)
+	})
+
+	it('renders correctly with an icon', () => {
+		const listWithIcon = items
+
+		// Add an action to the second item
+		listWithIcon[1].icon = 'mdiTest'
+
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: listWithIcon,
+				icons: {
+					mdiTest: 'test',
+				},
+			},
+		})
+
+		// Check items does not exist
+		const itemsExists = wrapper.find('.vd-data-list-item .v-icon').exists()
+		expect(itemsExists).toBe(true)
+	})
+
+	it('renders correctly with a class', async () => {
+		const listWithClass = items
+
+		// Add a class to the second item
+		listWithClass[1].class = 'custom-class'
+
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: listWithClass,
+			},
+		})
+
+		// Check that items now exist
+		const itemsExists = wrapper
+			.find('.vd-data-list-item.custom-class')
+			.exists()
+
+		expect(itemsExists).toBe(true)
+	})
+
+	it('renders loading state correctly', async () => {
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: items,
+				loading: true,
+				itemsNumberLoading: 3,
+				headingLoading: true,
+			},
+		})
+
+		// Check that items does not exist
+		let itemsExists = wrapper.find('.vd-data-list-item').exists()
+		expect(itemsExists).toBe(false)
+
+		await wrapper.setProps({
+			loading: false,
+		})
+
+		// Check that items now exist
+		itemsExists = wrapper.find('.vd-data-list-item').exists()
+		expect(itemsExists).toBe(true)
+	})
+
+	it('renders correctly with an action', async () => {
+		const listWithAction = items
+
+		// Add an action to the second item
+		listWithAction[1].action = 'Edit'
+
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: listWithAction,
+			},
+		})
+
+		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(1)
+		expect(itemWithAction?.exists()).toBe(true)
+	})
+
+	it('emits action event', async () => {
+		const listWithAction = items
+
+		// Add an action to the second item
+		listWithAction[2].action = 'Edit'
+
+		const wrapper = mount(DataList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: listWithAction,
+			},
+		})
+
+		// Find the second item element
+		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(2)
+		expect(itemWithAction?.exists()).toBe(true)
+
+		const actionBtn = (itemWithAction as DOMWrapper<Element>).find(
+			'.vd-data-list-item-action-btn',
+		)
+		expect(actionBtn.exists()).toBe(true)
+
+		await actionBtn.trigger('click')
+
+		expect(wrapper.emitted('click:item-action')).toEqual([[2]])
+	})
+})

package/src/components/DataList/types.d.ts

@@ -0,0 +1,23 @@
+import { useCustomizableOptions } from '@/composables/useCustomizableOptions'
+
+export interface IndexedObject<Type = string> {
+	[key: string]: Type
+}
+
+export interface DataListItem {
+	key: string
+	value?: string | number
+	action?: string
+	chip?: boolean
+	icon?: string
+	options?: useCustomizableOptions
+	class?: string
+}
+
+export type DataList = DataListItem[]
+
+export interface DataListIcons {
+	[iconName: string]: string
+}
+
+export type ItemClass = (string | undefined | IndexedObject<boolean>)[]

package/src/components/DataListGroup/DataListGroup.mdx

@@ -0,0 +1,77 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as DataListGroup from './DataListGroup.stories';
+
+<Meta of={DataListGroup} />
+
+# DataListGroup
+
+L’élément `DataListGroup` est utilisé pour afficher une liste de DataList.
+
+<Canvas of={DataListGroup.Default} />
+
+# API
+
+<Controls of={DataListGroup.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import DataListGroup from '@cnamts/synapse'
+
+	const items = [
+		{
+			title: 'Informations patient',
+			items: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+					icon: 'accountIcon',
+					chip: true,
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+					icon: 'accountIcon',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+					icon: 'calendarIcon',
+					action: 'Modifier',
+				},
+			],
+		},
+		{
+			title: 'Médecin traitant',
+			items: [
+				{
+					key: 'Nom du praticien',
+					value: 'Gérard Leblanc',
+					icon: 'doctorIcon',
+				},
+
+				{
+					key: 'N° RPPS',
+					value: 'XXXXX',
+					icon: 'cardAccountIcon',
+				},
+			],
+		},
+		{
+			title: 'Autres informations',
+			items: [
+				{
+					key: 'Dernière modification',
+					value: '04/06/2020',
+					icon: 'editIcon',
+				},
+			],
+		},
+	]
+</script>
+
+<template>
+	<DataListGroup :items="items" />
+</template>
+`} />