@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

package/src/components/FilterInline/FilterInline.stories.ts

@@ -1,10 +1,12 @@
 import { fn } from '@storybook/test'
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { VSelect, VTextField } from 'vuetify/components'
+import { ref } from 'vue'
+import { VDivider, VSelect, VTextField } from 'vuetify/components'
+import FilterSideBar from '../FilterSideBar/FilterSideBar.vue'
 import PeriodField from '../PeriodField/PeriodField.vue'
+import RangeField from '../RangeField/RangeField.vue'
 import SearchListField from '../SearchListField/SearchListField.vue'
 import FilterInline from './FilterInline.vue'
-import RangeField from '../RangeField/RangeField.vue'
 
 const meta = {
 	title: 'Composants/Filtres/FilterInline',
@@ -258,10 +260,11 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `
+import { ref } from 'vue'
 import { FilterInline, PeriodField, SearchListField } from '@cnamts/synapse'
 import { VTextField, VSelect } from 'vuetify/components'
 
-const filters = [
+const filters = ref([
 	{
 		name: 'name',
 		title: 'Identité',
@@ -278,7 +281,7 @@ const filters = [
 		name: 'profession',
 		title: 'Profession',
 	},
-]
+])
 
 const folderTypes = [
 	{ title: 'Arrêt de Travail (AT)', value: 'AT' },
@@ -378,10 +381,11 @@ export const ChipFormat: Story = {
 			{
 				name: 'Script',
 				code: `
+import { ref } from 'vue'
 import { FilterInline, RangeField } from '@cnamts/synapse'
 import { VSelect } from 'vuetify/components'
 
-const filters = [
+const filters = ref([
 	{
 		name: 'range-slider',
 		title: 'Intervalle',
@@ -392,7 +396,7 @@ const filters = [
 			},
 		],
 	},
-]
+])
 
 const folderTypes = [
 	'AT',
@@ -404,3 +408,356 @@ const folderTypes = [
 		],
 	},
 }
+
+export const FilterCombination: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	decorators: [
+		() => ({
+			template: `
+			<VApp style="height: 500px; overflow-y: hidden;">
+				<div class="pa-4">
+					<story />
+				</div>
+			</VApp>
+		`,
+		}),
+	],
+	render: args => ({
+		components: { FilterSideBar, FilterInline, VTextField, VSelect, PeriodField, SearchListField, VDivider },
+		setup() {
+			const filters = ref([
+				{
+					name: 'name',
+					title: 'Identité',
+				},
+				{
+					name: 'folder',
+					title: 'Type de dossier',
+				},
+				{
+					name: 'period',
+					title: 'Période',
+				},
+				{
+					name: 'profession',
+					title: 'Profession',
+				},
+			])
+
+			const folderTypes = [
+				{
+					title: 'AT',
+					value: 'at',
+				},
+				{
+					title: 'MP',
+					value: 'mp',
+				},
+				{
+					title: 'Autre',
+					value: 'other',
+				},
+			]
+
+			const professionList = [
+				{
+					label: 'Chirurgien-dentiste',
+					value: 'chirurgien-dentiste',
+				},
+				{
+					label: 'Infirmier',
+					value: 'infirmier',
+				},
+				{
+					label: 'Orthophoniste',
+					value: 'orthophoniste',
+				},
+				{
+					label: 'Orthoptiste',
+					value: 'orthoptiste',
+				},
+				{
+					label: 'Pédicure-podologue',
+					value: 'pedicure-podologue',
+				},
+				{
+					label: 'Pharmacien',
+					value: 'pharmacien',
+				},
+			]
+
+			return { args, filters, folderTypes, professionList }
+		},
+		template: `
+		<div>
+			<FilterSideBar
+				v-model="filters"
+				v-bind="args"
+			>
+				<template #name="{ props }">
+					<VTextField
+						v-bind="props"
+						label="Nom"
+						variant="outlined"
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #folder="{ props }">
+					<p class="text-secondary mb-4">
+						Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+					</p>
+
+					<VSelect
+						v-bind="props"
+						:items="folderTypes"
+						label="Type de dossier"
+						multiple
+						variant="outlined"
+						return-object
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #period="{ props }">
+					<PeriodField
+						v-bind="props"
+						variant="outlined"
+					/>
+				</template>
+
+				<template #profession="{ props }">
+					<SearchListField
+						v-bind="props"
+						:items="professionList"
+					/>
+				</template>
+			</FilterSideBar>
+			<VDivider class="my-4" />
+			<FilterInline
+				v-model="filters"
+				v-bind="args"
+			>
+				<template #name="{ props }">
+					<VTextField
+						v-bind="props"
+						label="Nom"
+						variant="outlined"
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #folder="{ props }">
+					<p class="text-secondary mb-4">
+						Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+					</p>
+
+					<VSelect
+						v-bind="props"
+						:items="folderTypes"
+						label="Type de dossier"
+						multiple
+						variant="outlined"
+						return-object
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #period="{ props }">
+					<PeriodField
+						v-bind="props"
+						variant="outlined"
+					/>
+				</template>
+
+				<template #profession="{ props }">
+					<SearchListField
+						v-bind="props"
+						:items="professionList"
+						color="primary"
+					/>
+				</template>
+			</FilterInline>
+		</div>
+		`,
+	}),
+	parameters: {
+		layout: 'fullscreen',
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+		<div>
+			<FilterSideBar
+				v-model="filters"
+			>
+				<template #name="{ props }">
+					<VTextField
+						v-bind="props"
+						label="Nom"
+						variant="outlined"
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #folder="{ props }">
+					<p class="text-secondary mb-4">
+						Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+					</p>
+
+					<VSelect
+						v-bind="props"
+						:items="folderTypes"
+						label="Type de dossier"
+						multiple
+						variant="outlined"
+						return-object
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #period="{ props }">
+					<PeriodField
+						v-bind="props"
+						variant="outlined"
+					/>
+				</template>
+
+				<template #profession="{ props }">
+					<SearchListField
+						v-bind="props"
+						:items="professionList"
+					/>
+				</template>
+			</FilterSideBar>
+			<VDivider class="my-4" />
+			<FilterInline
+				v-model="filters"
+			>
+				<template #name="{ props }">
+					<VTextField
+						v-bind="props"
+						label="Nom"
+						variant="outlined"
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #folder="{ props }">
+					<p class="text-secondary mb-4">
+						Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+					</p>
+
+					<VSelect
+						v-bind="props"
+						:items="folderTypes"
+						label="Type de dossier"
+						multiple
+						variant="outlined"
+						return-object
+						hide-details
+						color="primary"
+					/>
+				</template>
+
+				<template #period="{ props }">
+					<PeriodField
+						v-bind="props"
+						variant="outlined"
+					/>
+				</template>
+
+				<template #profession="{ props }">
+					<SearchListField
+						v-bind="props"
+						:items="professionList"
+						color="primary"
+					/>
+				</template>
+			</FilterInline>
+		</div>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FilterSideBar, filterInline, SearchListField, PeriodField } from '@cnamts/synapse'
+import { VDivider, VSelect, VTextField } from 'vuetify/components'
+
+const filters = ref([
+	{
+		name: 'name',
+		title: 'Identité',
+	},
+	{
+		name: 'folder',
+		title: 'Type de dossier',
+	},
+	{
+		name: 'period',
+		title: 'Période',
+	},
+	{
+		name: 'profession',
+		title: 'Profession',
+	},
+])
+
+const folderTypes = [
+	{
+		title: 'AT',
+		value: 'at',
+	},
+	{
+		title: 'MP',
+		value: 'mp',
+	},
+	{
+		title: 'Autre',
+		value: 'other',
+	},
+]
+
+const professionList = [
+	{
+		label: 'Chirurgien-dentiste',
+		value: 'chirurgien-dentiste',
+	},
+	{
+		label: 'Infirmier',
+		value: 'infirmier',
+	},
+	{
+		label: 'Orthophoniste',
+		value: 'orthophoniste',
+	},
+	{
+		label: 'Orthoptiste',
+		value: 'orthoptiste',
+	},
+	{
+		label: 'Pédicure-podologue',
+		value: 'pedicure-podologue',
+	},
+	{
+		label: 'Pharmacien',
+		value: 'pharmacien',
+	},
+]
+	
+</script>`,
+			},
+		],
+	},
+}

package/src/components/FilterSideBar/FilterSideBar.mdx

@@ -0,0 +1,237 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as FilterSideBarStories from './FilterSideBar.stories.ts';
+
+<Meta of={FilterSideBarStories} />
+
+# FilterSideBar
+
+Le composant `FilterSideBar` est utilisé pour permettre à l’utilisateur de sélectionner des filtres dans un panel dédié.
+
+<Canvas of={FilterSideBarStories.Default} />
+
+# API
+
+<Controls of={FilterSideBarStories.Default} />
+
+# Exemples
+
+## Formatage des puces
+
+Vous pouvez modifier le formatage des puces en utilisant la propriété de filtre `chipFormat`.
+
+<Canvas
+	of={FilterSideBarStories.ChipFormat}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { FilterSideBar, RangeField } from '@cnamts/synapse'
+			import { VSelect } from 'vuetify/components'
+
+			const filters = [
+				{
+					name: 'range-slider',
+					title: 'Intervalle',
+					formatChip: ([min, max]: [number, number]) => [
+						{
+							text: \`De \${min} à \${max}\`,
+							value: [min, max],
+						},
+					],
+				},
+			]
+		</script>
+
+		<template>
+			<FilterSideBar v-model="filters">
+				<template #range-slider="{ props }">
+					<RangeField
+						v-bind="props"
+						label="Intervalle"
+						max="50"
+						min="0"
+					/>
+				</template>
+			</FilterSideBar>
+		</template>
+		`
+	}}
+/>
+
+## Combinaison de composants filtres
+
+Vous pouvez utiliser plusieurs composants de filtres pour un seul et même filtre afin de pouvoir modifier un filtre à différents endroits sur une page.
+
+
+<Canvas
+	of={FilterSideBarStories.FilterCombination}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FilterSideBar, filterInline, SearchListField, PeriodField } from '@cnamts/synapse'
+import { VDivider, VSelect, VTextField } from 'vuetify/components'
+
+const filters = ref([
+	{
+		name: 'name',
+		title: 'Identité',
+	},
+	{
+		name: 'folder',
+		title: 'Type de dossier',
+	},
+	{
+		name: 'period',
+		title: 'Période',
+	},
+	{
+		name: 'profession',
+		title: 'Profession',
+	},
+])
+
+const folderTypes = [
+	{
+		title: 'AT',
+		value: 'at',
+	},
+	{
+		title: 'MP',
+		value: 'mp',
+	},
+	{
+		title: 'Autre',
+		value: 'other',
+	},
+]
+
+const professionList = [
+	{
+		label: 'Chirurgien-dentiste',
+		value: 'chirurgien-dentiste',
+	},
+	{
+		label: 'Infirmier',
+		value: 'infirmier',
+	},
+	{
+		label: 'Orthophoniste',
+		value: 'orthophoniste',
+	},
+	{
+		label: 'Orthoptiste',
+		value: 'orthoptiste',
+	},
+	{
+		label: 'Pédicure-podologue',
+		value: 'pedicure-podologue',
+	},
+	{
+		label: 'Pharmacien',
+		value: 'pharmacien',
+	},
+]
+	
+</script>
+
+<template>
+	<div>
+		<FilterSideBar
+			v-model="filters"
+		>
+			<template #name="{ props }">
+				<VTextField
+					v-bind="props"
+					label="Nom"
+					variant="outlined"
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #folder="{ props }">
+				<p class="text-secondary mb-4">
+					Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+				</p>
+
+				<VSelect
+					v-bind="props"
+					:items="folderTypes"
+					label="Type de dossier"
+					multiple
+					variant="outlined"
+					return-object
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #period="{ props }">
+				<PeriodField
+					v-bind="props"
+					variant="outlined"
+				/>
+			</template>
+
+			<template #profession="{ props }">
+				<SearchListField
+					v-bind="props"
+					:items="professionList"
+				/>
+			</template>
+		</FilterSideBar>
+		<VDivider class="my-4" />
+		<FilterInline
+			v-model="filters"
+		>
+			<template #name="{ props }">
+				<VTextField
+					v-bind="props"
+					label="Nom"
+					variant="outlined"
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #folder="{ props }">
+				<p class="text-secondary mb-4">
+					Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+				</p>
+
+				<VSelect
+					v-bind="props"
+					:items="folderTypes"
+					label="Type de dossier"
+					multiple
+					variant="outlined"
+					return-object
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #period="{ props }">
+				<PeriodField
+					v-bind="props"
+					variant="outlined"
+				/>
+			</template>
+
+			<template #profession="{ props }">
+				<SearchListField
+					v-bind="props"
+					:items="professionList"
+					color="primary"
+				/>
+			</template>
+		</FilterInline>
+	</div>
+</template>
+		`
+	}}
+/>