@cnamts/synapse 1.0.15 → 1.0.17

package/src/components/Amelipro/StructureMenu/StructureList/__tests__/StructureList.spec.ts

@@ -0,0 +1,190 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import type { Structure } from '../../StructureItem/types'
+import StructureItem from '../../StructureItem/StructureItem.vue'
+import StructureList from '../StructureList.vue'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof StructureList> = {
+	hiddenLabel: {
+		type: Boolean,
+		default: false,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	maxStructuresLoadedDefault: {
+		type: Number,
+		default: 5,
+	},
+	modelValue: {
+		type: String,
+		default: undefined,
+	},
+	name: {
+		type: String,
+		required: true,
+	},
+	structures: {
+		type: Array as PropType<Structure[]>,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof StructureList> => ({
+	label: 'Required label',
+	name: 'Required name',
+	structures: [
+		{
+			address: 'required-address-1',
+			idNumber: 'required-id-number-1',
+			value: 'required-value-1',
+		},
+		{
+			address: 'required-address-2',
+			idNumber: 'required-id-number-2',
+			value: 'required-value-2',
+		},
+	] as Structure[],
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof StructureList> => ({
+	hiddenLabel: true,
+	label: 'Label liste',
+	maxStructuresLoadedDefault: 3,
+	modelValue: 'valeur',
+	name: 'test-name',
+	structures: [
+		{
+			address: 'modified-address-1',
+			idNumber: 'modified-id-number-1',
+			value: 'modified-value-1',
+		},
+		{
+			address: 'modified-address-2',
+			idNumber: 'modified-id-number-2',
+			value: 'modified-value-2',
+		},
+		{
+			address: 'modified-address-3',
+			idNumber: 'modified-id-number-3',
+			value: 'modified-value-3',
+		},
+		{
+			address: 'modified-address-4',
+			idNumber: 'modified-id-number-4',
+			value: 'modified-value-4',
+		},
+		{
+			address: 'modified-address-5',
+			idNumber: 'modified-id-number-5',
+			value: 'modified-value-5',
+		},
+		{
+			address: 'modified-address-6',
+			idNumber: 'modified-id-number-6',
+			value: 'modified-value-6',
+		},
+	] as Structure[],
+})
+
+const testHelper = new TestHelper(StructureList)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('StructureList', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof StructureList>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(StructureList, { props: requiredPropValues() })
+		})
+
+		it('prop name sets id attribute on root container', async () => {
+			expect(vueWrapper.attributes('id')).toBe(`${testHelper.default('name')}-container`)
+			const { name } = modifiedPropValues()
+			await vueWrapper.setProps({ name })
+			expect(vueWrapper.attributes('id')).toBe(`${testHelper.modified('name')}-container`)
+		})
+
+		it('prop name sets id attribute on VRadioGroup', async () => {
+			expect(vueWrapper.findComponent({ name: 'VRadioGroup' }).attributes('id')).toBe(`${testHelper.default('name')}-radio-group`)
+			const { name } = modifiedPropValues()
+			await vueWrapper.setProps({ name })
+			expect(vueWrapper.findComponent({ name: 'VRadioGroup' }).attributes('id')).toBe(`${testHelper.modified('name')}-radio-group`)
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof StructureList>>
+		beforeEach(() => {
+			// Dans un slot, requiert mount au lieu de shallowMount
+			vueWrapper = mount(StructureList, { props: requiredPropValues() })
+		})
+
+		it('prop structures sets items prop on StructureItem', async () => {
+			expect(vueWrapper.findAllComponents(StructureItem).length).toBe(2)
+			const { structures } = modifiedPropValues()
+			await vueWrapper.setProps({ structures })
+			// Vérifie que chaque StructureItem reçoit bien la prop attendue
+			// maxStructuresLoadedDefault = 3 dans modifiedPropValues MAIS composant non réactif aux changements sur cette prop !
+			const items = vueWrapper.findAllComponents(StructureItem)
+			expect(items.length).toBe(5)
+			items.forEach((item, idx) => {
+				expect(item.props('item')).toStrictEqual(testHelper.modified('structures')[idx])
+			})
+		})
+
+		it('prop name sets group-name prop on StructureItem', async () => {
+			const { structures, name } = modifiedPropValues()
+			await vueWrapper.setProps({ structures, name })
+			const items = vueWrapper.findAllComponents(StructureItem)
+			items.forEach((item) => {
+				expect(item.props('groupName')).toBe(testHelper.modified('name'))
+			})
+		})
+	})
+
+	describe.skip('Events', () => {
+		const vueWrapper = mount(StructureList, {
+			autoAttach: true,
+			props: modifiedPropValues(),
+			stubs: { StructureItem },
+		})
+		it('Test emit input', async () => {
+			expect(vueWrapper.emitted('input')).toBeUndefined()
+			await vueWrapper.findAllComponents(StructureItem).at(2)?.trigger('click')
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.emitted('input')).toStrictEqual([['valeur3']])
+		})
+	})
+
+	describe.skip('functions', () => {
+		const vueWrapper = mount(StructureList, {
+			autoAttach: true,
+			props: modifiedPropValues(),
+			stubs: { StructureItem },
+		})
+
+		it('Test loadMore', async () => {
+			expect(vueWrapper.findAll('input').length).toStrictEqual(3)
+			await vueWrapper.find('button').trigger('click')
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.findAll('input').length).toStrictEqual(6)
+		})
+	})
+})

package/src/components/Amelipro/StructureMenu/StructureList/__tests__/__snapshots__/StructureList.spec.ts.snap

@@ -0,0 +1,109 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StructureList > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="structure-list"
+  id="test-name-container"
+>
+  <v-radio-group-stub
+    centeraffix="true"
+    class="w-100"
+    column=""
+    density="default"
+    direction="horizontal"
+    error="false"
+    errormessages=""
+    falseicon="$radioOff"
+    focused="false"
+    glow="false"
+    height="auto"
+    hidedetails="true"
+    hidespinbuttons="false"
+    iconcolor="false"
+    id="test-name-radio-group"
+    inline="false"
+    label="Label liste"
+    maxerrors="1"
+    messages=""
+    modelvalue="valeur"
+    name="test-name"
+    persistenthint="false"
+    ripple="true"
+    rules=""
+    trueicon="$radioOn"
+    type="radio"
+    valuecomparator="[Function]"
+  ></v-radio-group-stub>
+  <div class="
+    d-flex
+    justify-center
+  ">
+    <amelipro-btn-stub
+      badge="false"
+      badgebgcolor="ap-pink"
+      badgecolor="ap-white"
+      bordered="false"
+      class="text-none"
+      color="ap-blue-darken-1"
+      disabled="false"
+      hovercolor="ap-blue-darken-2"
+      hoverunderline="true"
+      iconbgcolor="transparent"
+      iconbordered="false"
+      iconleft="false"
+      infoblock="false"
+      minheight="2.5rem"
+      size="60px"
+      text="true"
+      textcolor="ap-white"
+      type="button"
+      underline="false"
+      uniqueid="test-name-load-more-btn"
+    ></amelipro-btn-stub>
+    <!-- v-if -->
+  </div>
+</div>
+`;
+
+exports[`StructureList > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="structure-list"
+  id="Required name-container"
+>
+  <v-radio-group-stub
+    centeraffix="true"
+    class="w-100"
+    column=""
+    density="default"
+    direction="horizontal"
+    error="false"
+    errormessages=""
+    falseicon="$radioOff"
+    focused="false"
+    glow="false"
+    height="auto"
+    hidedetails="true"
+    hidespinbuttons="false"
+    iconcolor="false"
+    id="Required name-radio-group"
+    inline="false"
+    label="Required label"
+    maxerrors="1"
+    messages=""
+    name="Required name"
+    persistenthint="false"
+    ripple="true"
+    rules=""
+    trueicon="$radioOn"
+    type="radio"
+    valuecomparator="[Function]"
+  ></v-radio-group-stub>
+  <div class="
+    d-flex
+    justify-center
+  ">
+    <!-- v-if -->
+    <!-- v-if -->
+  </div>
+</div>
+`;

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

@@ -8,6 +8,7 @@ const meta = {
 		'cancel': { description: 'event émis à la fermeture de la modale par le bouton annuler' },
 		'change': { description: 'event émis à la fermeture de la modale par un autre moyen que le bouton de confirmation' },
 		'maxStructuresLoadedDefault': { description: 'Le nombre de structures affichées par défaut dans les onglets' },
+		'hasStructureAccess': { description: 'Donne accès à l\'onglet \'Mes structures\'' },
 		'modelValue': {
 			description: 'Objet contenant la valeur d’affichage de la modale ainsi que la structure sélectionnée',
 			table: {
@@ -96,27 +97,31 @@ const structuresTabs = [
 	{
 		structures: [
 			{
+				name: 'Dr Jean Martin',
 				address: '39 rue de Rennes',
 				idNumber: 'XXXXXXXXXX',
 				value: 'e',
 			},
 			{
+				name: 'Pharmacie de la gare',
 				address: '40 rue de Vannes',
 				idNumber: 'XXXXXXXXXX',
 				value: 'f',
 			},
 			{
+				name: 'Cabinet d\'analayse medicale',
 				address: '50 Avenue de Marseille',
 				idNumber: 'XXXXXXXXXX',
 				value: 'g',
 			},
 			{
+				name: 'Pharmacie du quai',
 				address: '62 Boulevard de Lille',
 				idNumber: 'XXXXXXXXXX',
 				value: 'h',
 			},
 		],
-		label: 'Mes délégués',
+		label: 'Mes délégations',
 	},
 ]
 
@@ -167,68 +172,6 @@ export const Default: Story = {
 	import { ref } from 'vue'
 
 	const model = ref({ dialog: false, activeTab: 0 })
-	const structuresTabs = [
-		{
-			structures: [
-				{
-					address: '70 rue de Lyon',
-					idNumber: 'XXXXXXXXXX',
-					value: 'titu',
-				},
-				{
-					address: '34 avenue de Bordeaux',
-					idNumber: 'XXXXXXXXXX',
-					value: 'titi',
-				},
-				{
-					address: '47 boulevard du Mans',
-					idNumber: 'XXXXXXXXXX',
-					value: 'a',
-				},
-				{
-					address: '84 bis rue de Toulouse',
-					idNumber: 'XXXXXXXXXX',
-					value: 'b',
-				},
-				{
-					address: '103 rue de Paris',
-					idNumber: 'XXXXXXXXXX',
-					value: 'c',
-				},
-				{
-					address: '21 rue de Nantes',
-					idNumber: 'XXXXXXXXXX',
-					value: 'd',
-				},
-			],
-			label: 'Mes structures',
-		},
-		{
-			structures: [
-				{
-					address: '39 rue de Rennes',
-					idNumber: 'XXXXXXXXXX',
-					value: 'e',
-				},
-				{
-					address: '40 rue de Vannes',
-					idNumber: 'XXXXXXXXXX',
-					value: 'f',
-				},
-				{
-					address: '50 Avenue de Marseille',
-					idNumber: 'XXXXXXXXXX',
-					value: 'g',
-				},
-				{
-					address: '62 Boulevard de Lille',
-					idNumber: 'XXXXXXXXXX',
-					value: 'h',
-				},
-			],
-			label: 'Mes délégués',
-		},
-	]
 </script>
 				`,
 			},
@@ -266,3 +209,90 @@ export const Default: Story = {
 </div>`,
 	}),
 }
+
+export const HasStructureAccess: Story = {
+	args: {
+		modelValue: { dialog: false, activeTab: 0 },
+		structuresTabs,
+		uniqueId: 'structure-menu-unique-id',
+		userAdeli: 'n° Adeli',
+		userName: 'Jean Martin',
+		userProfession: 'Médecin génraliste',
+		userRpps: 'n° RPPS',
+		hasStructureAccess: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div>
+				<AmeliproIconBtn
+					btn-label="Sélection de structure"
+					icon="localisation"
+					icon-bg-color="ap-blue-darken-1"
+					icon-color="ap-white"
+					icon-hover-bg-color="ap-blue-darken-2"
+					icon-hover-color="ap-white"
+					size="2rem"
+					unique-id="structure-menu-unique-id-open-btn"
+					@click="model.dialog = true"
+				/>
+				<StructureMenu
+					v-model="model"
+					:structures-tabs="structuresTabs"
+					unique-id="structure-menu-unique-id"
+					user-adeli="n° Adeli"
+					user-name="Jean Martin"
+					user-profession="Médecin génraliste"
+					user-rpps="n° RPPS"
+					:hasStructureAccess="true"
+				/>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproIconBtn, StructureMenu } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref({ dialog: false, activeTab: 0 })
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIconBtn, StructureMenu },
+		setup() {
+			const model = ref(args.modelValue)
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+
+			return { args, model }
+		},
+		template: `
+          <div>
+            <AmeliproIconBtn
+                btn-label="Sélection de structure"
+                icon="localisation"
+                icon-bg-color="ap-blue-darken-1"
+                icon-color="ap-white"
+                icon-hover-bg-color="ap-blue-darken-2"
+                icon-hover-color="ap-white"
+                size="2rem"
+                :unique-id="\`\${args.uniqueId}-open-btn\`"
+                @click="model.dialog = true"
+            />
+            <StructureMenu
+                v-bind="args"
+                v-model="model"
+            />
+          </div>`,
+	}),
+}

package/src/components/Amelipro/StructureMenu/StructureMenu.vue

@@ -11,6 +11,10 @@
 	import { locales } from './locales'
 
 	const props = defineProps({
+		hasStructureAccess: {
+			type: Boolean,
+			default: true,
+		},
 		maxStructuresLoadedDefault: {
 			type: Number,
 			default: 5,
@@ -161,6 +165,7 @@
 					:max-items-loaded-default="maxStructuresLoadedDefault"
 					:tabs="structuresTabs"
 					:unique-id="`${uniqueId}-structure-menu-tabs`"
+					:has-structure-access="hasStructureAccess"
 				>
 					<template #searchBar>
 						<slot name="searchBar" />

package/src/components/Amelipro/StructureMenu/StructureTabs/StructureTabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import type { IStructureTabs, StructureTab } from './types'
-	import { computed, nextTick, type PropType, ref } from 'vue'
+	import { computed, nextTick, type PropType, ref, watch } from 'vue'
 	import StructureBtn from '../StructureBtn/StructureBtn.vue'
 	import StructureList from '../StructureList/StructureList.vue'
 	import { locales } from './locales'
@@ -15,6 +15,10 @@
 			type: String,
 			default: undefined,
 		},
+		hasStructureAccess: {
+			type: Boolean,
+			default: true,
+		},
 		maxStructuresLoadedDefault: {
 			type: Number,
 			default: 5,
@@ -60,6 +64,8 @@
 		},
 	})
 
+	const isFirstTabDisabled = computed(() => !props.hasStructureAccess)
+
 	const onClick = async (index: number): Promise<void> => {
 		selected.value = index
 		await nextTick()
@@ -92,6 +98,20 @@
 			(structureBtns.value[selected.value].$el as HTMLElement).focus()
 		}
 	}
+
+	watch(
+		() => props.hasStructureAccess,
+		(hasAccess) => {
+			if (hasAccess && selected.value === 1) {
+				selected.value = 0
+			}
+
+			if (!hasAccess && selected.value === 0) {
+				selected.value = 1
+			}
+		},
+		{ immediate: true },
+	)
 </script>
 
 <template>
@@ -115,6 +135,7 @@
 					:key="index"
 					ref="structureBtns"
 					:aria-selected="selected === index ? 'true' : 'false'"
+					:disabled="index === 0 && isFirstTabDisabled"
 					class="mr-0 mr-sm-3 mb-2 mb-sm-1"
 					:controls="`structure-panel-${index}`"
 					role="tab"