@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RatingPicker/RatingPicker.stories.ts

@@ -0,0 +1,515 @@
+import type { StoryObj, Meta } from '@storybook/vue3'
+import RatingPicker from './RatingPicker.vue'
+import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+import { VBtn, VSpacer } from 'vuetify/components'
+import { fn } from '@storybook/test'
+
+const meta = {
+	title: 'Composants/Feedback/RatingPicker',
+	component: RatingPicker,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		type: {
+			description: 'Le type de notation.',
+			control: {
+				type: 'select',
+				options: ['emotion', 'number', 'stars'],
+			},
+			table: {
+				type: {
+					summary: 'emotion, number, stars',
+				},
+				defaultValue: {
+					summary: 'emotion',
+				},
+			},
+		},
+		label: {
+			description: 'Le libellé du champ.',
+			control: 'text',
+			default: null,
+			table: {
+				type: {
+					summary: 'string | null',
+				},
+			},
+		},
+		readonly: {
+			description: 'Si le champ est en lecture seule.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		itemLabels: {
+			description: 'Les libellés des items.',
+			control: 'object',
+			default: null,
+			table: {
+				type: {
+					summary: 'string[]',
+				},
+			},
+		},
+		twoEmotions: {
+			description: 'Si le champ est en deux émotions.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		hideAlert: {
+			description: 'Si le champ est en alerte.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		modelValue: {
+			description: 'La valeur sélectionnée.',
+			control: 'number',
+			default: -1,
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+	},
+} satisfies Meta<typeof RatingPicker>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Story par défaut
+ */
+export const Default: Story = {
+	args: {
+		'type': 'emotion',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': false,
+		'twoEmotions': false,
+		'hideAlert': false,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker },
+			setup() {
+				return { args }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingEmotion"
+		label="Êtes-vous satisfait de ce service ?"
+		type="emotion"
+	/>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import RatingPicker from '@cnamts/synapse'
+
+const ratingEmotion = ref(-1)
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const TwoEmotions: Story = {
+	args: {
+		'type': 'emotion',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': false,
+		'twoEmotions': true,
+		'hideAlert': false,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker },
+			setup() {
+				return { args }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingEmotion"
+		label="Êtes-vous satisfait de ce service ?"
+		type="emotion"
+		two-emotions
+	/>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import RatingPicker from '@cnamts/synapse'
+
+const ratingEmotion = ref(-1)
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const Numbers: Story = {
+	args: {
+		'type': 'number',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': false,
+		'hideAlert': false,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker },
+			setup() {
+				return { args }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingNumber"
+		label="Êtes-vous satisfait de ce service ?"
+		type="number"
+	/>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import RatingPicker from '@cnamts/synapse'
+
+const ratingNumber = ref(-1)
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const Stars: Story = {
+	args: {
+		'type': 'star',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': false,
+		'hideAlert': false,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker },
+			setup() {
+				return { args }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingStar"
+		label="Êtes-vous satisfait de ce service ?"
+		type="star"
+	/>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import RatingPicker from '@cnamts/synapse'
+
+const ratingStar = ref(-1)
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const ReadOnly: Story = {
+	args: {
+		'type': 'emotion',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': true,
+		'twoEmotions': false,
+		'hideAlert': false,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker },
+			setup() {
+				return { args }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingEmotion"
+		label="Êtes-vous satisfait de ce service ?"
+		type="emotion"
+		read-only
+	/>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import RatingPicker from '@cnamts/synapse'
+
+const ratingEmotion = ref(-1)
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const HideAlert: Story = {
+	args: {
+		'type': 'emotion',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': false,
+		'twoEmotions': false,
+		'hideAlert': true,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker },
+			setup() {
+				return { args }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingEmotion"
+		label="Êtes-vous satisfait de ce service ?"
+		type="emotion"
+		hide-alert
+	/>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import RatingPicker from '@cnamts/synapse'
+
+const ratingEmotion = ref(-1)
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const DefaultSlot: Story = {
+	args: {
+		'type': 'emotion',
+		'label': 'Êtes-vous satisfait de ce service ?',
+		'readonly': false,
+		'twoEmotions': false,
+		'hideAlert': false,
+		'modelValue': -1,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { RatingPicker, SySelect, VBtn, VSpacer },
+			setup() {
+				const items = [
+					{
+						text: 'Via une recherche internet',
+						value: 'internet',
+					},
+					{
+						text: 'Via un professionnel de santé',
+						value: 'professional',
+					},
+					{
+						text: 'Via un ami',
+						value: 'friend',
+					},
+				]
+				return { args, items }
+			},
+			template: `
+                <RatingPicker v-bind="args" v-model="args.modelValue">
+					<SySelect
+						:items="items"
+						label="Comment avez-vous connu ce service ?"
+						class="mt-8"
+					/>
+					<div class="d-flex">
+						<VSpacer/>
+
+						<VBtn
+							right
+							color="primary"
+						>
+							Terminé
+						</VBtn>
+					</div>
+				</RatingPicker>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<RatingPicker
+		v-model="ratingEmotion"
+		label="Êtes-vous satisfait de ce service ?"
+		type="emotion"
+	>
+		<SySelect
+			:items="items"
+			label="Comment avez-vous connu ce service ?"
+			class="mt-8"
+		/>
+		<div class="d-flex">
+			<VSpacer/>
+
+			<VBtn
+				right
+				color="primary"
+			>
+				Terminé
+			</VBtn>
+		</div>
+	</RatingPicker>
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import {RatingPicker, SySelect} from '@cnamts/synapse'
+import { VBtn, VSpacer } from 'vuetify/components'
+
+const ratingEmotion = ref(-1)
+
+const items = [
+	{
+		text: 'Via une recherche internet',
+		value: 'internet'
+	},
+	{
+		text: 'Via un professionnel de santé',
+		value: 'professional'
+	},
+	{
+		text: 'Via un ami',
+		value: 'friend'
+	}
+]
+</script>
+        `,
+			},
+		],
+	},
+}

package/src/components/RatingPicker/RatingPicker.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+	import { type PropType, computed, ref } from 'vue'
+
+	import EmotionPicker from './EmotionPicker/EmotionPicker.vue'
+	import NumberPicker from './NumberPicker/NumberPicker.vue'
+	import StarsPicker from './StarsPicker/StarsPicker.vue'
+	import SyAlert from '@/components/SyAlert/SyAlert.vue'
+
+	import { RATING_ENUM_VALUES, RatingEnum, AlertTypeEnum } from './Rating'
+	import { propValidator } from '@/utils/propValidator'
+	import { locales } from './locales'
+
+	const props = defineProps({
+		type: {
+			type: String,
+			required: true,
+			validator: (value: string) => propValidator('type', RATING_ENUM_VALUES, value),
+		},
+		label: {
+			type: String as PropType<string | null>,
+			default: null,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		itemLabels: {
+			type: Array as PropType<string[]>,
+			default: null,
+		},
+		twoEmotions: {
+			type: Boolean,
+			default: false,
+		},
+		hideAlert: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Number,
+			default: -1,
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+
+	const alertTypeEnumRef = ref(AlertTypeEnum)
+	const internalValue = ref(-1)
+	const displayAdditionalContent = ref(false)
+
+	const ratingComponent = computed(() => {
+		if (props.type === RatingEnum.EMOTION) {
+			return EmotionPicker as unknown as string
+		}
+		else if (props.type === RatingEnum.NUMBER) {
+			return NumberPicker as unknown as string
+		}
+		else {
+			return StarsPicker as unknown as string
+		}
+	})
+
+	const length = computed(() => {
+		if (props.type === RatingEnum.EMOTION) {
+			return props.twoEmotions ? 2 : 3
+		}
+		return undefined
+	})
+
+	const hasAnswered = computed(() => props.modelValue !== -1)
+
+	function showAdditionalContent(value: number): void {
+		const starsUnsatisfied = props.type === RatingEnum.STARS && value <= 3
+		const numberUnsatisfied = props.type === RatingEnum.NUMBER && value <= 7
+		const isEmotion = props.type === RatingEnum.EMOTION
+		const isEmotionLow = props.twoEmotions ? value < 2 : value < 3
+		const emotionUnsatisfied = isEmotion && isEmotionLow
+		if (starsUnsatisfied || numberUnsatisfied || emotionUnsatisfied) {
+			displayAdditionalContent.value = true
+		}
+	}
+
+	function setValue(value: number): void {
+		internalValue.value = value
+		showAdditionalContent(value)
+		emit('update:modelValue', value)
+	}
+</script>
+
+<template>
+	<div class="vd-rating-picker">
+		<component
+			:is="ratingComponent"
+			:model-value="internalValue"
+			:label="props.label"
+			:length="length"
+			:readonly="props.readonly || hasAnswered"
+			:item-labels="props.itemLabels || undefined"
+			@update:model-value="setValue"
+		>
+			<template #label>
+				<slot name="label">
+					{{ props.label }}
+				</slot>
+			</template>
+		</component>
+
+		<template v-if="hasAnswered">
+			<SyAlert
+				v-if="!props.hideAlert"
+				:class="{ 'mb-4': displayAdditionalContent }"
+				outlined
+				:type="alertTypeEnumRef.SUCCESS"
+				class="mt-4"
+			>
+				{{ locales.thanks }}
+			</SyAlert>
+
+			<slot v-if="displayAdditionalContent" />
+		</template>
+	</div>
+</template>