@cnamts/synapse 1.0.9 → 1.0.11

package/src/components/Amelipro/AmeliproDentalChart/AmeliproDentalChart.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+	import type { AmeliproDentalChartLine, IAmeliproTooth } from './types'
+	import { type PropType, computed, ref } from 'vue'
+	import AmeliproRadioGroup from '../AmeliproRadioGroup/AmeliproRadioGroup.vue'
+	import type { AmeliproRadioGroupItem } from '../AmeliproRadioGroup/types'
+	import AmeliproTooth from './AmeliproTooth/AmeliproTooth.vue'
+
+	const props = defineProps({
+		modelValue: {
+			type: Array as PropType<AmeliproDentalChartLine[]>,
+			required: true,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const emit = defineEmits(['change', 'change:filter', 'update:model-value'])
+	const currentValue = computed({
+		get: () => props.modelValue,
+		set: (newValue: AmeliproDentalChartLine[]) => {
+			emit('update:model-value', newValue)
+		},
+	})
+
+	const previousState = (tooth: IAmeliproTooth): boolean => Boolean(tooth.previousState && (tooth.previousState.decayed || tooth.previousState.filled || tooth.previousState.missing))
+
+	const modifiedStatus = (tooth: IAmeliproTooth): boolean => (tooth.previousState !== undefined && ((tooth.previousState.decayed !== tooth.currentState.decayed)
+		|| (tooth.previousState.filled !== tooth.currentState.filled)
+		|| (tooth.previousState.missing !== tooth.currentState.missing)))
+
+	const filterItems = ref([
+		{
+			isChecked: true,
+			label: 'Dent cariée',
+			value: 'decayed',
+		},
+		{
+			isChecked: false,
+			label: 'Dent absente',
+			value: 'missing',
+		},
+		{
+			isChecked: false,
+			label: 'Dent obturée',
+			value: 'filled',
+		},
+	])
+
+	const filterValue = ref('decayed')
+	const changeFilterValue = (value: AmeliproRadioGroupItem[]) => {
+		const selected = value.filter((e: AmeliproRadioGroupItem) => e.isChecked).at(0)?.value
+		if (selected) {
+			filterValue.value = selected
+			emit('change:filter', selected)
+		}
+	}
+
+	const changeToothStatus = (toothNumber: string) => {
+		let toothToUpdate: IAmeliproTooth = { currentState: { decayed: false, filled: false, missing: false }, toothNumber }
+		currentValue.value = currentValue.value.map((line: AmeliproDentalChartLine) => {
+			line.map((tooth: IAmeliproTooth) => {
+				if (tooth.toothNumber === toothNumber) {
+					if (filterValue.value === 'decayed' && !tooth.currentState.missing) {
+						tooth.currentState.decayed = !tooth.currentState.decayed
+					}
+					else if (filterValue.value === 'missing') {
+						tooth.currentState.missing = !tooth.currentState.missing
+					}
+					else if (filterValue.value === 'filled' && !tooth.currentState.missing) {
+						tooth.currentState.filled = !tooth.currentState.filled
+					}
+					toothToUpdate = tooth
+				}
+				return tooth
+			})
+
+			return line
+		})
+		emit('change', toothToUpdate)
+	}
+</script>
+
+<template>
+	<div
+		:id="uniqueId"
+		class="amelipro-dental-chart"
+	>
+		<div class="d-flex justify-center">
+			<AmeliproRadioGroup
+				v-if="!readonly"
+				v-model="filterItems"
+				group-label="Choisissez le statut à modifier"
+				hidden-label
+				pills
+				:unique-id="`${uniqueId}-filters`"
+				@update:model-value="changeFilterValue"
+			/>
+		</div>
+
+		<slot name="information" />
+
+		<ul
+			:id="`${uniqueId}-list`"
+			class="list-style-none w-100"
+		>
+			<li
+				v-for="(line, index) in currentValue"
+				:id="`${uniqueId}-item-${index}`"
+				:key="index"
+				class="w-100"
+			>
+				<ul
+					:id="`${uniqueId}-sublist-${index}`"
+					class="list-style-none w-100 d-flex flex-wrap justify-center"
+				>
+					<li
+						v-for="(tooth, toothIndex) in line"
+						:id="`${uniqueId}-subitem-${index}-${toothIndex}`"
+						:key="toothIndex"
+						class="mb-4 tooth-item"
+					>
+						<AmeliproTooth
+							:decayed="tooth.currentState.decayed"
+							:disabled="readonly || ( filterValue === 'missing' && (index === 1 || index === 2))"
+							:filled="tooth.currentState.filled"
+							:has-saved-state="previousState(tooth)"
+							:milk-tooth="(index === 0 || index === (currentValue.length - 1)) ? true : false"
+							:missing="tooth.currentState.missing"
+							:modified="modifiedStatus(tooth)"
+							:tooth-number="tooth.toothNumber"
+							:unique-id="`${uniqueId}-tooth-${index}-${toothIndex}`"
+							@click="changeToothStatus(tooth.toothNumber)"
+						/>
+					</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.tooth-item {
+	min-width: 2.5rem;
+	margin-left: 4px;
+	margin-right: 4px;
+
+	@media (width <= 1239.999px) {
+		width: 2.5rem;
+	}
+
+	@media (width >= 1240px) {
+		width: 3.125rem;
+		margin-left: 8px;
+		margin-right: 8px;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproDentalChart/AmeliproTooth/AmeliproTooth.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+	import { computed, onMounted, ref } from 'vue'
+	import type { IndexedObject } from '../../types'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+
+	const props = defineProps({
+		decayed: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		filled: {
+			type: Boolean,
+			default: false,
+		},
+		hasSavedState: {
+			type: Boolean,
+			default: false,
+		},
+		milkTooth: {
+			type: Boolean,
+			default: false,
+		},
+		missing: {
+			type: Boolean,
+			default: false,
+		},
+		modified: {
+			type: Boolean,
+			default: false,
+		},
+		toothNumber: {
+			type: String,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const btnTitle = computed(() => {
+		let title = `dent ${props.toothNumber}`
+
+		if (props.missing) {
+			title += ' absente'
+		}
+		else {
+			if (props.decayed) {
+				title += ' cariée'
+			}
+
+			if (props.filled) {
+				title += ' obturée'
+			}
+		}
+		return title
+	})
+
+	const computedStyles = computed(() => {
+		const styles: IndexedObject = {}
+		if (((props.decayed || props.filled || props.missing) && !props.modified) || (!props.hasSavedState && props.modified)) {
+			styles.border = `1px solid ${convertToHex('ap-blue-darken-1')}`
+		}
+		else if (props.modified && props.hasSavedState) {
+			styles.border = `1px dashed ${convertToHex('ap-pink')}`
+		}
+		return styles
+	})
+
+	const emit = defineEmits(['click'])
+	const emitClickEvent = (): void => {
+		emit('click')
+	}
+
+	const svgUrl = ref('')
+
+	onMounted(async () => {
+		const module = await import(`@/assets/amelipro/img/dental-chart-img/tooth-${props.toothNumber}.svg`)
+		if (module.default !== null && module.default !== undefined) {
+			svgUrl.value = module.default
+		}
+	})
+</script>
+
+<template>
+	<button
+		:id="uniqueId"
+		class="d-inline-flex py-2 flex-column align-center tooth-btn"
+		:disabled="disabled"
+		:style="computedStyles"
+		:title="btnTitle"
+		@click="emitClickEvent"
+	>
+		<span class="d-sr-only">
+			{{ btnTitle }}
+		</span>
+
+		<span
+			:id="`${uniqueId}-number`"
+			aria-hidden="true"
+			class="font-weight-semibold"
+		>
+			{{ toothNumber }}
+		</span>
+
+		<img
+			:id="`${uniqueId}-img`"
+			alt=""
+			:src="svgUrl"
+		>
+
+		<span
+			:id="`${uniqueId}-status`"
+			:class="milkTooth ? 'text-uppercase' : undefined"
+		>
+			<span
+				v-if="decayed && !missing"
+				aria-hidden="true"
+				class="text-body-1"
+				:class="milkTooth ? 'text-uppercase' : undefined"
+			>
+				c
+			</span>
+
+			<span
+				v-if="missing"
+				aria-hidden="true"
+				class="text-body-1"
+				:class="milkTooth ? 'text-uppercase' : undefined"
+			>
+				a
+			</span>
+
+			<span
+				v-if="filled && !missing"
+				aria-hidden="true"
+				class="text-body-1"
+				:class="milkTooth ? 'text-uppercase' : undefined"
+			>
+				o
+			</span>
+		</span>
+	</button>
+</template>
+
+<style lang="scss" scoped>
+	@use '@/assets/amelipro/apTokens';
+
+	.tooth-btn {
+		border-radius: 8px;
+		max-width: 100%;
+		min-height: 100%;
+
+		&:hover {
+			background-color: apTokens.$ap-blue-lighten4;
+		}
+
+		& img {
+			max-width: 90%;
+			margin: 8px 0;
+
+			@media (width <= 1239.999px) {
+				width: 2.5rem;
+			}
+
+			@media (width >= 1240px) {
+				width: 3.125rem;
+			}
+		}
+
+		&:disabled {
+			&:hover {
+				background-color: transparent;
+			}
+
+			cursor: default;
+		}
+	}
+</style>

package/src/components/Amelipro/AmeliproDentalChart/AmeliproTooth/tests/AmeliproTooth.spec.ts

@@ -0,0 +1,16 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproTooth from '../AmeliproTooth.vue'
+
+describe('AmeliproTooth', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproTooth, {
+			props: {
+				toothNumber: '36',
+				uniqueId: 'my-tooth-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproDentalChart/AmeliproTooth/tests/__snapshots__/AmeliproTooth.spec.ts.snap

@@ -0,0 +1,39 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTooth > render correctly 1`] = `
+<button
+  class="
+    align-center
+    d-inline-flex
+    flex-column
+    py-2
+    tooth-btn
+  "
+  id="my-tooth-id"
+  title="dent 36"
+>
+  <span class="d-sr-only">
+    dent 36
+  </span>
+  <span
+    aria-hidden="true"
+    class="font-weight-semibold"
+    id="my-tooth-id-number"
+  >
+    36
+  </span>
+  <img
+    alt=""
+    id="my-tooth-id-img"
+    src=""
+  />
+  <span
+    class=""
+    id="my-tooth-id-status"
+  >
+    <!-- v-if -->
+    <!-- v-if -->
+    <!-- v-if -->
+  </span>
+</button>
+`;