@cnamts/synapse 1.0.2 → 1.0.3

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

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+	import type { IStructureTabs, StructureTab } from './StructureTabs/types'
+	import { type PropType, computed, ref } from 'vue'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproCheckbox from '../AmeliproCheckbox/AmeliproCheckbox.vue'
+	import AmeliproDialog from '../AmeliproDialog/AmeliproDialog.vue'
+	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
+	import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
+	import type { IStructureMenuValue } from './types'
+	import StructureTabs from './StructureTabs/StructureTabs.vue'
+	import { locales } from './locales'
+
+	const props = defineProps({
+		maxStructuresLoadedDefault: {
+			type: Number,
+			default: 5,
+		},
+		modelValue: {
+			type: Object as PropType<IStructureMenuValue>,
+			default: () => ({ dialog: false }),
+		},
+		structuresTabs: {
+			type: Array as PropType<StructureTab[]>,
+			default: () => [],
+		},
+		switchValue: {
+			type: String,
+			default: 'Structure par défaut',
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+		userAdeli: {
+			type: String,
+			required: true,
+		},
+		userName: {
+			type: String,
+			required: true,
+		},
+		userProfession: {
+			type: String,
+			required: true,
+		},
+		userRpps: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const switchModel = ref(false)
+
+	const emit = defineEmits(['cancel', 'change', 'update:model-value', 'validate'])
+	const emitChangeEvent = (value: boolean): void => {
+		dialog.value = value
+		emit('change', dialog.value)
+	}
+
+	const emitCancelEvent = (): void => {
+		emit('cancel')
+		emitChangeEvent(false)
+	}
+
+	const emitConfirmEvent = (): void => {
+		emit('validate', {
+			defaultStructure: switchModel.value,
+			selected: selectedStructure.value,
+		})
+		emitChangeEvent(false)
+	}
+
+	const selectedStructure = computed({
+		get() {
+			return { activeTab: props.modelValue.activeTab, activeValue: props.modelValue.activeValue }
+		},
+		set(value: IStructureTabs) {
+			emit('update:model-value', { ...props.modelValue, ...value })
+		},
+	})
+
+	const dialog = computed({
+		get() {
+			return props.modelValue.dialog
+		},
+		set(value: boolean) {
+			emit('update:model-value', { ...props.modelValue, dialog: value })
+		},
+	})
+</script>
+
+<template>
+	<AmeliproDialog
+		v-model="dialog"
+		:labelledby="`${uniqueId}-structure-menu-title`"
+		:unique-id="`${uniqueId}-structure-menu`"
+		width="800"
+		@change="emitChangeEvent(false)"
+		@confirm="emitConfirmEvent"
+	>
+		<template #header>
+			<h2
+				:id="`${uniqueId}-structure-menu-title`"
+				class="ma-0 text-h3"
+			>
+				{{ locales.title }}
+			</h2>
+		</template>
+
+		<template #default>
+			<div
+				:id="`${uniqueId}-structure-menu-content`"
+				class="py-3"
+			>
+				<div
+					:id="`${uniqueId}-structure-menu-first-part`"
+					class="d-flex flex-column flex-md-row justify-md-space-between"
+				>
+					<div>
+						<p
+							:id="`${uniqueId}-structure-menu-user-name`"
+							class="ma-0 body-1 font-weight-bold"
+						>
+							{{ userName }}
+						</p>
+
+						<p
+							:id="`${uniqueId}-structure-menu-user-profession`"
+							class="ma-0 body-2 font-weight-bold"
+						>
+							{{ userProfession }}
+						</p>
+
+						<p
+							:id="`${uniqueId}-structure-menu-user-numbers`"
+							class="ma-0 body-2 mb-5"
+						>
+							{{ locales.labelRPPS }} {{ userRpps }} {{ locales.labelAdeli }} {{ userAdeli }}
+						</p>
+					</div>
+
+					<AmeliproMessage
+						align-start
+						class="message-width mb-4 mb-md-0"
+						text
+						type="info"
+						:unique-id="`${uniqueId}-structure-message`"
+					>
+						<p
+							:id="`${uniqueId}-structure-menu-message-text`"
+							class="mb-0"
+						>
+							{{ locales.infoMessage }}
+						</p>
+					</AmeliproMessage>
+				</div>
+
+				<StructureTabs
+					v-model="selectedStructure"
+					aria-labelledby="structure-menu-title"
+					:max-items-loaded-default="maxStructuresLoadedDefault"
+					:tabs="structuresTabs"
+					:unique-id="`${uniqueId}-structure-menu-tabs`"
+				>
+					<template #searchBar>
+						<slot name="searchBar" />
+					</template>
+				</StructureTabs>
+
+				<div
+					:id="`${uniqueId}-structure-menu-`"
+					class="d-flex justify-end align-start mt-2"
+				>
+					<AmeliproCheckbox
+						v-model="switchModel"
+						:checkbox="{
+							description: 'Default-structure-switch-description',
+							label: locales.switchLabel,
+							value: switchValue,
+						}"
+						is-switch
+						label-left
+						:unique-id="`${uniqueId}-switch-structure-defaut`"
+					/>
+
+					<AmeliproTooltips
+						class="ml-2 mt-1"
+						:tooltip-text="locales.switchDescription"
+						:unique-id="`${uniqueId}-default-structure-switch-description`"
+					/>
+				</div>
+			</div>
+		</template>
+
+		<template #footer>
+			<div
+				:id="`${uniqueId}-default-structure-footer`"
+				class="d-flex flex-column flex-sm-row justify-sm-space-between"
+			>
+				<AmeliproBtn
+					class="order-sm-1"
+					:unique-id="`${uniqueId}-default-structure-confirm-btn`"
+					@click="emitConfirmEvent"
+				>
+					{{ locales.confirmLabel }}
+				</AmeliproBtn>
+
+				<AmeliproBtn
+					bordered
+					class="mt-2 mt-sm-0 order-sm-0"
+					color="ap-white"
+					hover-color="ap-blue-lighten-3"
+					text-color="ap-blue-darken-1"
+					:unique-id="`${uniqueId}-default-structure-cancel-btn`"
+					@click="emitCancelEvent"
+				>
+					{{ locales.cancelLabel }}
+				</AmeliproBtn>
+			</div>
+		</template>
+	</AmeliproDialog>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.v-input.amelipro-switch {
+	margin-top: 0;
+}
+
+.message-width {
+	width: 50% !important;
+	max-width: 50% !important;
+
+	@media #{apTokens.$media-down-md} {
+		width: 100% !important;
+		max-width: 100% !important;
+	}
+}
+</style>

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

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+	import type { IStructureTabs, StructureTab } from './types'
+	import { type PropType, computed, nextTick, ref } from 'vue'
+	import StructureBtn from '../StructureBtn/StructureBtn.vue'
+	import StructureList from '../StructureList/StructureList.vue'
+	import { locales } from './locales'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		ariaLabel: {
+			type: String,
+			default: undefined,
+		},
+		ariaLabelledby: {
+			type: String,
+			default: undefined,
+		},
+		maxStructuresLoadedDefault: {
+			type: Number,
+			default: 5,
+		},
+		modelValue: {
+			type: Object as PropType<IStructureTabs>,
+			default: undefined,
+		},
+		searchBar: {
+			type: Boolean,
+			default: false,
+		},
+		tabs: {
+			type: Array as PropType<StructureTab[]>,
+			default: () => [],
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const structureBtns = ref<typeof StructureBtn[]>()
+	const { xs } = useDisplay()
+	const labelClasses = computed<string | undefined>(() => (xs.value ? 'mb-3' : undefined))
+	const emit = defineEmits(['update:model-value'])
+
+	const selected = computed({
+		get() {
+			return props.modelValue ? props.modelValue.activeTab : 0
+		},
+		set(value: number) {
+			emit('update:model-value', { ...props.modelValue, activeTab: value })
+		},
+	})
+
+	const structureValues = computed({
+		get() {
+			return props.modelValue ? props.modelValue.activeValue : undefined
+		},
+		set(value: string | undefined) {
+			emit('update:model-value', { ...props.modelValue, activeValue: value })
+		},
+	})
+
+	const onClick = async (index: number): Promise<void> => {
+		selected.value = index
+		await nextTick()
+	}
+
+	const pressLeft = async (): Promise<void> => {
+		if (selected.value === 0) {
+			selected.value = props.tabs.length - 1
+		}
+		else {
+			selected.value -= 1
+		}
+		await nextTick()
+		focusChange()
+	}
+
+	const pressRight = async (): Promise<void> => {
+		if (selected.value === (props.tabs.length - 1)) {
+			selected.value = 0
+		}
+		else {
+			selected.value += 1
+		}
+		await nextTick()
+		focusChange()
+	}
+
+	const focusChange = (): void => {
+		if (structureBtns.value && selected.value) {
+			(structureBtns.value[selected.value].$el as HTMLElement).focus()
+		}
+	}
+</script>
+
+<template>
+	<div :id="`${uniqueId}-container`">
+		<div
+			v-if="tabs.length > 1"
+			:ariaLabelledby="`${uniqueId}-label`"
+			class="d-flex flex-column flex-sm-row align-start align-sm-center"
+			role="tablist"
+		>
+			<p
+				:id="`${uniqueId}-label`"
+				class="ma-0 mr-3 font-weight-bold"
+				:class="labelClasses"
+			>
+				{{ locales.label }}
+			</p>
+
+			<div class="d-flex flex-column flex-sm-row">
+				<StructureBtn
+					v-for="(item, index) in tabs"
+					:key="index"
+					ref="structureBtns"
+					:aria-selected="selected === index ? 'true' : 'false'"
+					class="mr-0 mr-sm-3 mb-2 mb-sm-0"
+					:controls="`structure-panel-${index}`"
+					role="tab"
+					:selected="index === selected"
+					:tabindex="selected === index ? 0 : -1"
+					:unique-id="`${uniqueId}-tab-btn-${index}`"
+					@click="onClick(index)"
+					@keyup.left="pressLeft"
+					@keyup.right="pressRight"
+				>
+					{{ item.label }}
+				</StructureBtn>
+			</div>
+		</div>
+
+		<div
+			v-for="(tab, index) in tabs"
+			:id="`structure-panel-${index}`"
+			:key="index"
+			class="mt-4"
+			:role="tabs.length > 1 ? 'tabpanel' : undefined"
+			:tabindex="selected === index && tabs.length > 1 ? 0 : -1"
+		>
+			<slot
+				v-if="index === selected && searchBar"
+				name="searchBar"
+			/>
+
+			<StructureList
+				v-show="index === selected"
+				v-model="structureValues"
+				:label="tab.listLabel || locales.listLabel"
+				:max-items-loaded-default="maxStructuresLoadedDefault"
+				:name="`structures-${index}`"
+				:structures="tab.structures"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.tabs-btn-wrapper {
+	@media #{apTokens.$media-only-xs} {
+		width: 100% !important;
+	}
+}
+</style>

package/src/components/Amelipro/StructureMenu/StructureTabs/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	label: 'Je me connecte sur :',
+	listLabel: 'Je choisis une structure :',
+}

package/src/components/Amelipro/StructureMenu/StructureTabs/tests/StructureTabs.spec.ts

@@ -0,0 +1,64 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import StructureTabs from '../StructureTabs.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('StructureTabs', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(StructureTabs, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				ariaLabel: 'mon label',
+				tabs: [
+					{
+						label: 'onlget 1',
+						structures: [
+							{
+								address: 'address 1',
+								idNumber: '1',
+								value: 'valeur 1',
+							},
+							{
+								address: 'address 2',
+								idNumber: '2',
+								value: 'valeur 2',
+							},
+							{
+								address: 'address 3',
+								idNumber: '3',
+								value: 'valeur 3',
+							},
+						],
+						listLabel: 'liste-structures-1',
+					},
+					{
+						label: 'onlget 2',
+						structures: [
+							{
+								address: 'address 4',
+								idNumber: '4',
+								value: 'valeur 4',
+							},
+							{
+								address: 'address 5',
+								idNumber: '5',
+								value: 'valeur 5',
+							},
+							{
+								address: 'address 6',
+								idNumber: '6',
+								value: 'valeur 6',
+							},
+						],
+						listLabel: 'liste-structures-2',
+					},
+				],
+				uniqueId: 'my-tabs-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})