@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+	import { computed, ref, toRef } from 'vue'
+	import { locales as defaultLocales } from './locales'
+	import { mdiFilterVariant } from '@mdi/js'
+	import ChipList from '../ChipList/ChipList.vue'
+	import type { FilterProp } from '@/composables/useFilterable/useFilterable'
+	import useFilterable from '@/composables/useFilterable/useFilterable'
+
+	const props = withDefaults(defineProps<{
+		modelValue?: FilterProp
+		locales?: typeof defaultLocales
+	}>(), {
+		modelValue: () => [],
+		locales: () => defaultLocales,
+	})
+
+	const emits = defineEmits<{
+		'update:modelValue': (value: FilterProp) => void
+	}>()
+
+	const {
+		filters,
+		updateValue,
+		removeChip,
+		resetFilter,
+		getChips,
+		getFilterCount,
+		formatFilterName,
+		resetAllFilters,
+	} = useFilterable(toRef(props, 'modelValue'), emits)
+
+	const drawer = ref(false)
+
+	const activeFiltersCount = computed(() => {
+		return props.modelValue.reduce((count, filter) => {
+			return count + getFilterCount(filter)
+		}, 0)
+	})
+
+	function toggleDrawer(): void {
+		drawer.value = !drawer.value
+	}
+
+	function applyFilters(): void {
+		updateValue()
+		drawer.value = false
+	}
+
+</script>
+
+<template>
+	<div class="sy-filters-side-bar">
+		<VBtn
+			class="px-8 py-3"
+			:class="{ 'v-btn--active': drawer }"
+			color="primary"
+			variant="text"
+			size="large"
+			@click="toggleDrawer"
+		>
+			<VBadge
+				v-if="activeFiltersCount"
+				:content="activeFiltersCount"
+				:label="locales.badgeLabel(activeFiltersCount)"
+				color="secondary"
+				inline
+				class="ml-n1 mr-1"
+			/>
+
+			{{ locales.filterBtnLabel }}
+
+			<VIcon
+				class="ml-2"
+				size="small"
+			>
+				{{ mdiFilterVariant }}
+			</VIcon>
+		</VBtn>
+
+		<VNavigationDrawer
+			:model-value="drawer"
+			sticky
+			temporary
+			location="right"
+			rounded="0"
+			:scrim="false"
+			rail
+			rail-width="395"
+			disable-resize-watcher
+			class="elevation-6"
+		>
+			<VExpansionPanels variant="accordion">
+				<VExpansionPanel
+					v-for="filter in filters"
+					:key="filter.name"
+					:class="`vd-filter-${filter.name}`"
+					tile
+					elevation="0"
+				>
+					<VExpansionPanelTitle class="text-subtitle-2">
+						{{ filter.title }}
+
+						<span
+							v-if="getFilterCount(filter)"
+							class="ml-1"
+						>
+							({{ getFilterCount(filter) }})
+						</span>
+					</VExpansionPanelTitle>
+
+					<VExpansionPanelText>
+						<ChipList
+							:items="getChips(filter)"
+							:overflow-limit="filter.chipOverflowLimit"
+							class="mb-5"
+							:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
+							@remove="removeChip(filter, $event)"
+							@reset="resetFilter(filter)"
+						/>
+
+						<slot
+							:name="`${formatFilterName(filter.name)}`"
+							:props="{
+								modelValue: filter.value,
+								'onUpdate:modelValue': (value: unknown) =>
+									(filter.value = value),
+							}"
+						/>
+					</VExpansionPanelText>
+				</VExpansionPanel>
+			</VExpansionPanels>
+
+			<VSpacer />
+
+			<div class="px-4 pb-4 pt-10">
+				<VBtn
+					color="primary"
+					block
+					size="large"
+					variant="outlined"
+					class="mb-4"
+					@click="drawer = false"
+				>
+					{{ locales.close }}
+				</VBtn>
+
+				<VBtn
+					color="primary"
+					block
+					size="large"
+					variant="outlined"
+					class="mb-4"
+					@click.stop="resetAllFilters"
+				>
+					{{ locales.reset }}
+				</VBtn>
+
+				<VBtn
+					block
+					size="large"
+					color="primary"
+					@click.stop="applyFilters"
+				>
+					{{ locales.apply }}
+				</VBtn>
+			</div>
+		</VNavigationDrawer>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.sy-filters-side-bar :deep() {
+	.v-navigation-drawer {
+		&__content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		&__border {
+			display: none;
+		}
+	}
+
+	.v-expansion-panel {
+		border-bottom: 1px solid rgb(0 0 0 / 12%);
+	}
+
+	.v-expansion-panel:not(:first-child)::after {
+		display: none;
+	}
+}
+
+</style>

package/src/components/FilterSideBar/locales.ts

@@ -0,0 +1,8 @@
+export const locales = {
+	filterBtnLabel: 'Filtres',
+	badgeLabel: (count: number): string =>
+		`${count} filtre${count > 1 ? 's' : ''}`,
+	reset: 'Réinitialiser',
+	close: 'Fermer',
+	apply: 'Appliquer',
+} as const

package/src/components/FilterSideBar/tests/FilterSideBar.spec.ts

@@ -0,0 +1,305 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import FilterSideBar from '../FilterSideBar.vue'
+import { defineComponent } from 'vue'
+import { VApp } from 'vuetify/components'
+
+describe('FilterSideBar', () => {
+	const EventSenderComponent = defineComponent({
+		emits: ['update:modelValue'],
+		methods: {
+			sentEvent() {
+				this.$emit('update:modelValue', 'Jane Doe')
+			},
+		},
+		template: '<div>lorem</div>',
+	})
+
+	const TestComponent = defineComponent({
+		components: { VApp, FiltersSideBar: FilterSideBar, EventSenderComponent },
+		props: {
+			modelValue: {
+				type: Array,
+				required: true,
+			},
+		},
+		data() {
+			return {
+				localModelValue: this.modelValue,
+			}
+		},
+		watch: {
+			localModelValue(newValue) {
+				this.$emit('update:modelValue', newValue)
+			},
+		},
+		template: `
+			<VApp>
+				<FiltersSideBar v-model="localModelValue">
+					<template v-slot:name="{ attrs }">
+						<EventSenderComponent
+							v-bind="attrs"
+						/>
+					</template>
+				</FiltersSideBar>
+			</VApp>
+		`,
+	})
+
+	it('renders correctly', () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with an active filter', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						title: 'Nom',
+						value: 'John Doe',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-btn__content').trigger('click')
+
+		await wrapper.find('.v-expansion-panel-title').trigger('click')
+
+		expect(wrapper.find('.v-chip').text()).toBe('John Doe')
+	})
+
+	it('renders correctly with multiple active filters', () => {
+		const wrapper = mount(TestComponent, {
+			propsData: {
+				modelValue: [
+					{
+						name: 'name',
+						label: 'Nom',
+						value: 'John Doe',
+					},
+					{
+						name: 'age',
+						label: 'Âge',
+						value: '18',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.findAll('.v-expansion-panel').length).toBe(2)
+	})
+
+	it('emits "update:modelValue" event when a filter is removed', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						label: 'Nom',
+						value: 'John Doe',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-btn__content').trigger('click')
+
+		await wrapper.find('.v-expansion-panel-title').trigger('click')
+
+		await wrapper.find('.remove-chip').trigger('click')
+
+		await wrapper.find('button:nth-child(3)').trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toEqual([
+			{
+				name: 'name',
+				label: 'Nom',
+				value: undefined,
+			},
+		])
+	})
+
+	it('renders the template corresponding to the filter name', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						title: 'Nom',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.v-expansion-panel-title').text()).toBe('Nom')
+	})
+
+	it('emits "update:modelValue" event when a filter is added', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						title: 'Nom',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-btn__content').trigger('click')
+		await wrapper.find('.v-expansion-panel-title').trigger('click')
+
+		const EventSender = wrapper.findComponent(EventSenderComponent)
+		await wrapper.find('button:nth-child(3)').trigger('click')
+
+		EventSender.vm.sentEvent()
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+	})
+
+	it('reset one filter when the reset button of the filter is clicked', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						title: 'Nom',
+						value: 'John Doe',
+					},
+					{
+						name: 'age',
+						title: 'Âge',
+						value: '18',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-btn__content').trigger('click')
+
+		await wrapper.find('.v-expansion-panel-title').trigger('click')
+
+		await wrapper.find('[data-test-id="reset-btn"]').trigger('click')
+
+		await wrapper.find('button:nth-child(3)').trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toEqual([
+			{
+				name: 'name',
+				title: 'Nom',
+				value: undefined,
+			},
+			{
+				name: 'age',
+				title: 'Âge',
+				value: '18',
+			},
+		])
+	})
+
+	it('resets all the filters when the reset button is clicked', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						title: 'Nom',
+						value: 'John Doe',
+					},
+					{
+						name: 'age',
+						title: 'Âge',
+						value: '18',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-btn__content').trigger('click')
+
+		await wrapper
+			.find(
+				'.v-navigation-drawer__content>div:last-child button:nth-child(2)',
+			)
+			.trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toEqual([
+			{
+				name: 'name',
+				title: 'Nom',
+				value: undefined,
+			},
+			{
+				name: 'age',
+				title: 'Âge',
+				value: undefined,
+			},
+		])
+	})
+
+	it('open and close the drawer without changing the filters', async () => {
+		const wrapper = mount(TestComponent, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						title: 'Nom',
+						value: 'John Doe',
+					},
+					{
+						name: 'age',
+						title: 'Âge',
+						value: '18',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-btn__content').trigger('click')
+		await wrapper
+			.find(
+				'.v-navigation-drawer__content>div:last-child button:nth-child(1)',
+			)
+			.trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+	})
+})

package/src/components/FilterSideBar/tests/__snapshots__/FilterSideBar.spec.ts.snap

@@ -0,0 +1,39 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FilterSideBar > renders correctly 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div data-v-6c7d1f34="" class="sy-filters-side-bar"><button data-v-6c7d1f34="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-large v-btn--variant-text px-8 py-3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><!--v-if--> Filtres <i data-v-6c7d1f34="" class="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-2" aria-hidden="true"></i></span>
+        <!---->
+        <!---->
+      </button>
+      <nav class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--rail v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile rounded-0 elevation-6" style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;" data-v-6c7d1f34="">
+        <!---->
+        <!---->
+        <div class="v-navigation-drawer__content">
+          <div data-v-6c7d1f34="" class="v-expansion-panels v-theme--light v-expansion-panels--variant-accordion"></div>
+          <div data-v-6c7d1f34="" class="v-spacer"></div>
+          <div data-v-6c7d1f34="" class="px-4 pb-4 pt-10"><button data-v-6c7d1f34="" type="button" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-large v-btn--variant-outlined mb-4"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">Fermer</span>
+              <!---->
+              <!---->
+            </button><button data-v-6c7d1f34="" type="button" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-large v-btn--variant-outlined mb-4"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">Réinitialiser</span>
+              <!---->
+              <!---->
+            </button><button data-v-6c7d1f34="" type="button" class="v-btn v-btn--block v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-large v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">Appliquer</span>
+              <!---->
+              <!---->
+            </button></div>
+        </div>
+        <!---->
+      </nav>
+      <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+        <!---->
+      </transition-stub>
+    </div>
+  </div>
+</div>"
+`;

package/src/components/HeaderBar/Usages.mdx

@@ -1,10 +1,15 @@
-import { Meta } from "@storybook/blocks";
-import * as HeaderBarStories from "./HeaderBar.stories";
+import { Meta, Story} from "@storybook/blocks";
+import * as HeaderBarStories from "./HeaderBar.stories.ts";
+import * as UsagesStories from "./Usages.stories.ts";
 
 <Meta of={HeaderBarStories} />
 
 # Usages
 
+<Story of={UsagesStories.UsagePage} />
+
+<br />
+
 <br />
 
 <img alt="HeaderBar1" src={'/HeaderBar1.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/components/HeaderBar/Usages.stories.ts

@@ -0,0 +1,39 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Structure/HeaderBar/Usages',
+}
+
+const itemsToDo = [
+	'Utiliser une largeur maximale de 1712px (container max de 1600px + left-margin (56px) et right-margin (56px)), le header restant centré dans la page.',
+	'Utiliser le type de menu le plus adapté au produit : un burger menu pour les produits complexes et le menu en onglet pour les produits à l\'arborescence restreinte.',
+]
+
+const itemsNotToDo = [
+	'Utiliser le menu en onglet si il existe plus de 6 entrées différentes.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}