@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/StructureMenu/types.d.ts

@@ -0,0 +1,35 @@
+import type { IStructureTabs, StructureTab } from './StructureTabs/types'
+
+export interface IStructureMenuValue extends IStructureTabs {
+	dialog: boolean
+}
+
+export interface StructureMenuInfosForHeader {
+	maxStructuresLoadedDefault?: number
+	structuresTabs: StructureTab[]
+	uniqueId: string
+	userAdeli: string
+	userName: string
+	userProfession: string
+	userRpps: string
+	defaultSelected?: IStructureTabs
+	cancel?: CallableFunction
+	change?: CallableFunction
+	input?: CallableFunction
+	validate?: CallableFunction
+}
+
+export interface StructureMenuInfos {
+	maxStructuresLoadedDefault?: number
+	structuresTabs: StructureTab[]
+	uniqueId: string
+	userAdeli: string
+	userName: string
+	userProfession: string
+	userRpps: string
+	value: IStructureMenuValue
+	cancel?: CallableFunction
+	change?: CallableFunction
+	input?: CallableFunction
+	validate?: CallableFunction
+}

package/src/components/Amelipro/UserInformationSummary/UserInformationSummary.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+	import { type PropType } from 'vue'
+	import type { UserInformationSummaryInfos } from './types'
+
+	defineProps({
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+		userInformationSummaryInfos: {
+			type: Object as PropType<UserInformationSummaryInfos>,
+			default: undefined,
+		},
+	})
+</script>
+
+<template>
+	<div
+		v-if="userInformationSummaryInfos !== undefined && userInformationSummaryInfos !== null"
+		:id="uniqueId ? `${uniqueId}-container` : undefined"
+		class="user-information-summary"
+	>
+		<p
+			v-if="userInformationSummaryInfos.userName !== undefined && userInformationSummaryInfos.userName !== null"
+			:id="uniqueId ? `${uniqueId}-user-name` : undefined"
+			class="mb-0 text-body-2 font-weight-bold user-information-summary__name"
+		>
+			{{ userInformationSummaryInfos.userName }}
+		</p>
+		<p
+			v-if="userInformationSummaryInfos.denomination !== undefined && userInformationSummaryInfos.denomination !== null"
+			:id="uniqueId ? `${uniqueId}-denomination` : undefined"
+			class="mb-0 text-body-2 user-information-summary__denomination"
+		>
+			{{ userInformationSummaryInfos.denomination }}
+		</p>
+		<p
+			v-if="userInformationSummaryInfos.categorieSpecialite !== undefined && userInformationSummaryInfos.categorieSpecialite !== null"
+			:id="uniqueId ? `${uniqueId}-specialty` : undefined"
+			class="mb-0 text-body-2 user-information-summary__specialty"
+		>
+			{{ userInformationSummaryInfos.categorieSpecialite }}
+		</p>
+		<p
+			v-if="userInformationSummaryInfos.profil !== undefined && userInformationSummaryInfos.profil !== null"
+			:id="uniqueId ? `${uniqueId}-profil` : undefined"
+			class="mb-0 text-body-2 user-information-summary__profil"
+		>
+			{{ userInformationSummaryInfos.profil }}
+		</p>
+		<p
+			v-if="userInformationSummaryInfos.nomCabinet !== undefined && userInformationSummaryInfos.nomCabinet !== null"
+			:id="uniqueId ? `${uniqueId}-office` : undefined"
+			class="mb-0 text-body-2 user-information-summary__office"
+		>
+			{{ userInformationSummaryInfos.nomCabinet }}
+		</p>
+		<p
+			v-if="userInformationSummaryInfos.adresseLigne1 !== undefined && userInformationSummaryInfos.adresseLigne1 !== null"
+			:id="uniqueId ? `${uniqueId}-address-line-1` : undefined"
+			class="mb-0 text-body-2 user-information-summary__address-1"
+		>
+			{{ userInformationSummaryInfos.adresseLigne1 }}
+		</p>
+		<p
+			v-if="userInformationSummaryInfos.adresseLigne2 !== undefined && userInformationSummaryInfos.adresseLigne2 !== null"
+			:id="uniqueId ? `${uniqueId}-address-line-2` : undefined"
+			class="mb-0 text-body-2 user-information-summary__address-2"
+		>
+			{{ userInformationSummaryInfos.adresseLigne2 }}
+		</p>
+	</div>
+</template>

package/src/components/Amelipro/UserInformationSummary/tests/UserInformationSummary.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import UserInformationSummary from '../UserInformationSummary.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('UserInformationSummary', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(UserInformationSummary, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				uniqueId: 'user-information-summary-id',
+				userInformationSummaryInfos: {
+					userName: 'nom utilisateur',
+					denomination: 'dénomination',
+					categorieSpecialite: 'catégorie spécialité',
+					nomCabinet: 'nom cabinet',
+					adresseLigne1: 'adresse ligne 1',
+					adresseLigne2: 'adresse ligne 2',
+					profil: 'profil',
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/UserInformationSummary/tests/__snapshots__/UserInformationSummary.spec.ts.snap

@@ -0,0 +1,80 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UserInformationSummary > render correctly 1`] = `
+<div
+  class="user-information-summary"
+  id="user-information-summary-id-container"
+>
+  <p
+    class="
+      font-weight-bold
+      mb-0
+      text-body-2
+      user-information-summary__name
+    "
+    id="user-information-summary-id-user-name"
+  >
+    nom utilisateur
+  </p>
+  <p
+    class="
+      mb-0
+      text-body-2
+      user-information-summary__denomination
+    "
+    id="user-information-summary-id-denomination"
+  >
+    dénomination
+  </p>
+  <p
+    class="
+      mb-0
+      text-body-2
+      user-information-summary__specialty
+    "
+    id="user-information-summary-id-specialty"
+  >
+    catégorie spécialité
+  </p>
+  <p
+    class="
+      mb-0
+      text-body-2
+      user-information-summary__profil
+    "
+    id="user-information-summary-id-profil"
+  >
+    profil
+  </p>
+  <p
+    class="
+      mb-0
+      text-body-2
+      user-information-summary__office
+    "
+    id="user-information-summary-id-office"
+  >
+    nom cabinet
+  </p>
+  <p
+    class="
+      mb-0
+      text-body-2
+      user-information-summary__address-1
+    "
+    id="user-information-summary-id-address-line-1"
+  >
+    adresse ligne 1
+  </p>
+  <p
+    class="
+      mb-0
+      text-body-2
+      user-information-summary__address-2
+    "
+    id="user-information-summary-id-address-line-2"
+  >
+    adresse ligne 2
+  </p>
+</div>
+`;

package/src/components/Amelipro/UserInformationSummary/types.d.ts

@@ -0,0 +1,9 @@
+export interface UserInformationSummaryInfos {
+	userName?: string
+	denomination?: string
+	categorieSpecialite?: string
+	nomCabinet?: string
+	adresseLigne1?: string
+	adresseLigne2?: string
+	profil?: string
+}

package/src/components/Amelipro/UserMenu/UserMenu.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as UserMenuStories from './UserMenu.stories';
+
+<Meta of={UserMenuStories} />
+
+# UserMenu
+
+L’élément `UserMenu` est utilisé pour afficher le menu de l’utilisateur connecté dans une popover.
+
+<Canvas of={UserMenuStories.Default} />
+
+## API
+
+<Controls of={UserMenuStories.Default} />

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import UserMenu from './UserMenu.vue'
+
+const meta = {
+	argTypes: {
+		'click:account': { description: 'Événement émis lorsque l’utilisateur clique sur le bouton mon compte.', type: 'void' },
+		'click:logout': { description: 'Événement émis lorsque l’utilisateur clique sur le bouton déconnexion.', type: 'void' },
+		'complementaryInfo': { description: 'Slot pour ajouter des informations supplémentaires.' },
+		'default': { description: 'Slot pour le contenu, il surcharge le contenu de `userMenuDetailsInfos`.' },
+		'icon': { description: 'Le nom de l’icône à afficher comme bouton d’ouverture de la popover' },
+		'lastConnexion': { description: '_Non documenté_' },
+		'structureMenu': { description: 'Slot utilisé pour afficher le StructureMenu en mobile' },
+		'uniqueId': { description: 'Identifiant unique du composant' },
+		'userMenuInfos': {
+			description: 'Objet contenant toutes les informations nécessaire au fonctionnement du menu utilisateur',
+			table: {
+				type: {
+					detail: `{
+	lastConnexion?: string;
+	logout?: CallableFunction;
+	account?: CallableFunction;
+	updateSelectionStructure?: CallableFunction;
+	userMenuDetailsInfos?: {
+		userName?: string;
+		profil?: string;
+		denomination?: string;
+		rpps?: string;
+		adeli?: string;
+		am?: string;
+		finess?: string;
+		email?: string;
+		adresse?: {
+			numero?: string;
+			complement?: string;
+			type?: string;
+			nom?: string;
+			codePostal?: string;
+			commune?: string;
+		};
+	};
+};`,
+					summary: 'UserMenuInfos',
+				},
+			},
+		},
+	},
+	component: UserMenu,
+	title: 'Composants/Amelipro/Mise en page/Sous-composants du header/UserMenu',
+} as Meta<typeof UserMenu>
+export default meta
+
+type Story = StoryObj<typeof UserMenu>
+
+const userMenuInfos = {
+	lastConnexion: '01/01/2024',
+	userMenuDetailsInfos: {
+		adeli: 'ADELI',
+		adresse: {
+			codePostal: '35000',
+			commune: 'Rennes',
+			complement: 'bis',
+			nom: 'de la Mayenne',
+			numero: '3',
+			type: 'rue',
+		},
+		denomination: 'denomination',
+		email: 'email',
+		finess: 'FINESS',
+		profil: 'profil',
+		rpps: 'RPPS',
+		userName: 'userName',
+	},
+}
+
+export const Default: Story = {
+	args: {
+		userMenuInfos,
+		uniqueId: 'user-menu-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<UserMenu
+		:user-menu-infos="userMenuInfos"
+		unique-id="user-menu-unique-id"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { UserMenu } from '@cnamts/synapse'
+
+	const userMenuInfos = {
+		lastConnexion: '01/01/2024',
+		userMenuDetailsInfos: {
+			adeli: 'ADELI',
+			adresse: {
+				codePostal: '35000',
+				commune: 'Rennes',
+				complement: 'bis',
+				nom: 'de la Mayenne',
+				numero: '3',
+				type: 'rue',
+			},
+			denomination: 'denomination',
+			email: 'email',
+			finess: 'FINESS',
+			profil: 'profil',
+			rpps: 'RPPS',
+			userName: 'userName',
+		},
+	}
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { UserMenu },
+		setup() {
+			return { args }
+		},
+		template: `
+<UserMenu
+	v-bind="args"
+/>
+		`,
+	}),
+}

package/src/components/Amelipro/UserMenu/UserMenu.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+	import { type PropType, computed, ref } from 'vue'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
+	import UserMenuDetails from './UserMenuDetails/UserMenuDetails.vue'
+	import type { UserMenuInfos } from './types'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		icon: {
+			type: String,
+			default: 'utilisateur',
+		},
+		lastConnexion: {
+			type: String,
+			default: undefined,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+		userMenuInfos: {
+			type: Object as PropType<UserMenuInfos>,
+			default: undefined,
+		},
+	})
+
+	const { mdAndUp, mdAndDown } = useDisplay()
+	const isOpen = ref(false)
+	const currentWidth = computed<string>(() => (mdAndUp.value ? '366px' : '280px'))
+	const lastConnexionValue = computed<string>(() => (props.lastConnexion || props.userMenuInfos?.lastConnexion || ''))
+
+	const emit = defineEmits(['click:account', 'click:logout'])
+
+	const emitEventAccount = (): void => {
+		emit('click:account')
+	}
+
+	const emitEventLogout = (): void => {
+		emit('click:logout')
+	}
+</script>
+
+<template>
+	<div
+		:id="uniqueId"
+		class="user-menu"
+	>
+		<AmeliproIconBtn
+			btn-label="infos utilisateur"
+			:icon="icon"
+			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="`${uniqueId}-open-btn`"
+			@click="isOpen = !isOpen"
+		/>
+		<VMenu
+			v-model="isOpen"
+			:activator="`${uniqueId}-open-btn`"
+			:attach="`#${uniqueId}`"
+			:close-on-content-click="false"
+			:max-width="currentWidth"
+			:min-width="currentWidth"
+			scroll-strategy="reposition"
+			transition="slide-y-transition"
+			:width="currentWidth"
+		>
+			<div
+				:id="`${uniqueId}-content`"
+				class="user-menu-popover bg-ap-white"
+			>
+				<div class="pa-4">
+					<slot>
+						<div v-if="userMenuInfos !== undefined && userMenuInfos !== null && userMenuInfos.userMenuDetailsInfos !== undefined && userMenuInfos.userMenuDetailsInfos !== null">
+							<UserMenuDetails
+								:unique-id="`${uniqueId}-details`"
+								:user-menu-details-infos="userMenuInfos.userMenuDetailsInfos"
+							/>
+						</div>
+					</slot>
+
+					<slot name="complementaryInfo" />
+
+					<slot
+						v-if="mdAndDown"
+						name="structureMenu"
+					/>
+
+					<p
+						v-if="lastConnexionValue !== ''"
+						:id="`${uniqueId}-last-connexion`"
+						class="mt-6 mb-0 user-menu-last-connexion"
+					>
+						Dernière connexion : {{ lastConnexionValue }}
+					</p>
+				</div>
+
+				<div
+					:id="`${uniqueId}-footer`"
+					class="d-flex justify-space-between bg-ap-blue-lighten-3 user-menu__btn-wrapper"
+				>
+					<AmeliproBtn
+						class="text-none font-weight-bold user-menu__btn--account"
+						hover-underline
+						text-color="ap-blue-darken-1"
+						:unique-id="`${uniqueId}-account-btn`"
+						variant="text"
+						@click="emitEventAccount()"
+					>
+						Mon Compte
+					</AmeliproBtn>
+
+					<AmeliproBtn
+						class="text-none font-weight-bold user-menu__btn--logout"
+						hover-underline
+						text-color="ap-blue-darken-1"
+						:unique-id="`${uniqueId}-logout-btn`"
+						variant="text"
+						@click="emitEventLogout()"
+					>
+						Déconnexion
+					</AmeliproBtn>
+				</div>
+			</div>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	@use '@/assets/amelipro/apTokens';
+
+	.v-btn :deep(.v-btn__content) {
+		opacity: 1 !important;
+	}
+
+	:deep(.v-overlay__content) {
+		top: 40px;
+		left: -200px;
+		transform-origin: left top 0;
+		z-index: 8;
+		border-radius: 4px;
+	}
+
+	.user-menu {
+		position: relative;
+	}
+
+	.user-menu-popover {
+		border-radius: 4px;
+	}
+
+	.user-menu-last-connexion {
+		font-size: apTokens.$font-size-xs;
+	}
+
+	.user-menu__btn--account,
+	.user-menu__btn--logout {
+		padding: 1rem 1.5rem !important;
+		border-radius: 0 !important;
+	}
+
+	.user-menu__btn-wrapper {
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
+	}
+</style>

package/src/components/Amelipro/UserMenu/UserMenuDetails/UserMenuDetails.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+	import { type PropType } from 'vue'
+	import type { UserMenuDetailsInfos } from './types'
+
+	defineProps({
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+		userMenuDetailsInfos: {
+			type: Object as PropType<UserMenuDetailsInfos>,
+			default: undefined,
+		},
+	})
+</script>
+
+<template>
+	<div
+		v-if="userMenuDetailsInfos !== undefined && userMenuDetailsInfos !== null"
+		:id="uniqueId ? `${uniqueId}-container` : undefined"
+		class="user-menu-details"
+	>
+		<p
+			v-if="userMenuDetailsInfos.userName !== undefined && userMenuDetailsInfos.userName !== null"
+			:id="uniqueId ? `${uniqueId}-user-name` : undefined"
+			class="mb-0 text-body-2 font-weight-bold text-ap-grey-darken-1 user-menu-details__name"
+		>
+			{{ userMenuDetailsInfos.userName }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.profil !== undefined && userMenuDetailsInfos.profil !== null"
+			:id="uniqueId ? `${uniqueId}-profile` : undefined"
+			class="mb-0 text-body-2 font-weight-bold text-ap-grey-darken-1 user-menu-details__profil"
+		>
+			{{ userMenuDetailsInfos.profil }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.denomination !== undefined && userMenuDetailsInfos.denomination !== null"
+			:id="uniqueId ? `${uniqueId}-denomination` : undefined"
+			class="mb-0 text-body-2 font-weight-bold text-ap-grey-darken-1 user-menu-details__denomination"
+		>
+			{{ userMenuDetailsInfos.denomination }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.rpps !== undefined && userMenuDetailsInfos.rpps !== null"
+			:id="uniqueId ? `${uniqueId}-rpps` : undefined"
+			class="mb-0 text-body-2 text-ap-grey-darken-1 user-menu-details__rpps"
+		>
+			N° RPPS : {{ userMenuDetailsInfos.rpps }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.adeli !== undefined && userMenuDetailsInfos.adeli !== null"
+			:id="uniqueId ? `${uniqueId}-adeli` : undefined"
+			class="mb-0 text-body-2 text-ap-grey-darken-1 user-menu-details__adeli"
+		>
+			N° ADELI : {{ userMenuDetailsInfos.adeli }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.am !== undefined && userMenuDetailsInfos.am !== null"
+			:id="uniqueId ? `${uniqueId}-am` : undefined"
+			class="mb-0 text-body-2 text-ap-grey-darken-1 user-menu-details__am"
+		>
+			N° AM : {{ userMenuDetailsInfos.am }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.finess !== undefined && userMenuDetailsInfos.finess !== null"
+			:id="uniqueId ? `${uniqueId}-finess` : undefined"
+			class="mb-0 text-body-2 text-ap-grey-darken-1 user-menu-details__finess"
+		>
+			N° FINESS : {{ userMenuDetailsInfos.finess }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.email !== undefined && userMenuDetailsInfos.email !== null"
+			:id="uniqueId ? `${uniqueId}-email` : undefined"
+			class="mb-2 text-body-2 text-ap-grey-darken-1 user-menu-details__mail"
+		>
+			{{ userMenuDetailsInfos.email }}
+		</p>
+
+		<p
+			v-if="userMenuDetailsInfos.adresse"
+			:id="uniqueId ? `${uniqueId}-address-line-1` : undefined"
+			class="mb-0"
+		>
+			{{ `${userMenuDetailsInfos.adresse && userMenuDetailsInfos.adresse.numero ? userMenuDetailsInfos.adresse.numero : ''}
+				${userMenuDetailsInfos.adresse && userMenuDetailsInfos.adresse.complement ? userMenuDetailsInfos.adresse.complement : ''}
+				${userMenuDetailsInfos.adresse && userMenuDetailsInfos.adresse.type ? userMenuDetailsInfos.adresse.type : ''}
+				${userMenuDetailsInfos.adresse && userMenuDetailsInfos.adresse.nom ? userMenuDetailsInfos.adresse.nom :''}` }}
+		</p>
+		<p
+			v-if="userMenuDetailsInfos.adresse"
+			:id="uniqueId ? `${uniqueId}-address-line-2` : undefined"
+			class="mb-0"
+		>
+			{{ userMenuDetailsInfos.adresse && userMenuDetailsInfos.adresse.codePostal ? userMenuDetailsInfos.adresse.codePostal : '' }}
+			{{ userMenuDetailsInfos.adresse && userMenuDetailsInfos.adresse.commune ? userMenuDetailsInfos.adresse.commune : '' }}
+		</p>
+	</div>
+</template>

package/src/components/Amelipro/UserMenu/UserMenuDetails/tests/UserMenuDetails.spec.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import UserMenuDetails from '../UserMenuDetails.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('UserMenuDetails', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(UserMenuDetails, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				uniqueId: 'user-information-summary-id',
+				UserMenuDetailsInfos: {
+					userName: 'nom utilisateur',
+					profil: 'profil',
+					denomination: 'dénomination',
+					rpps: 'Numéro RPPS',
+					adeli: 'Numéro Adeli',
+					am: 'Numéro AM',
+					finess: 'Numéro Finess',
+					email: 'email',
+					adresse: {
+						numero: 'numéro',
+						complement: 'complément',
+						type: 'type',
+						nom: 'nom',
+						codePostal: 'code postal',
+						commune: 'commune',
+					},
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/UserMenu/UserMenuDetails/tests/__snapshots__/UserMenuDetails.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UserMenuDetails > render correctly 1`] = `<!-- v-if -->`;