@cnamts/synapse 0.0.9-alpha → 0.0.10-alpha

package/src/components/TableToolbar/TableToolbar.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { mdiMagnify, mdiPlus } from '@mdi/js'
+	import { computed } from 'vue'
+	import { useDisplay, useTheme } from 'vuetify'
+	import { config } from './config'
+	import { locales as defaultLocales } from './locales'
+
+	const props = withDefaults(defineProps<{
+		nbTotal: number
+		nbFiltered?: number
+		search?: string
+		searchLabel?: string
+		showAddButton?: boolean
+		addButtonLabel?: string
+		loading?: boolean
+		locales?: typeof defaultLocales
+	} & CustomizableOptions>(), {
+		nbFiltered: undefined,
+		search: undefined,
+		searchLabel: defaultLocales.search,
+		showAddButton: false,
+		addButtonLabel: defaultLocales.addBtnLabel,
+		loading: false,
+		locales: () => defaultLocales,
+	})
+
+	defineEmits<{
+		(e: 'update:search', value: string): void
+		(e: 'add'): void
+	}>()
+
+	const options = useCustomizableOptions(config, props)
+	const display = useDisplay()
+	const theme = useTheme()
+
+	const textFieldClasses = computed(() => ({
+		'sy-form-input--s': display.xs.value,
+		'flex-grow-0': display.xs.value,
+		'flex-grow-1': !display.xs.value,
+		'mr-6': props.showAddButton,
+		'loading': props.loading,
+	}))
+
+	const displayNbRows = computed(() => {
+		const lines = props.nbFiltered ? `${props.nbFiltered}/${props.nbTotal}` : String(props.nbTotal)
+		return props.locales.rowText(
+			lines,
+			props.nbTotal > 1,
+		)
+	})
+</script>
+
+<template>
+	<VToolbar
+		v-bind="options.toolbar"
+		:class="{ 'v-theme-dark': theme.current.value.dark}"
+		class="sy-table-toolbar px-4 py-2 d-flex flex-wrap align-center justify-space-between"
+	>
+		<p
+			v-if="nbTotal > 0"
+			class="mb-0 font-weight-bold mr-4 my-3"
+			data-test-id="nb-rows"
+		>
+			{{ displayNbRows }}
+		</p>
+
+		<div class="sy-table-toolbar__search">
+			<slot name="search-left" />
+			<VTextField
+				v-bind="options.textField"
+				color="primary"
+				:model-value="search"
+				class="sy-form-input"
+				:class="textFieldClasses"
+				:disabled="loading"
+				:append-inner-icon="mdiMagnify"
+				:label="searchLabel"
+				data-test-id="search-input"
+				@update:model-value="$emit('update:search', $event)"
+			/>
+			<VBtn
+				v-if="showAddButton"
+				v-bind="options.addBtn"
+				:disabled="loading"
+				class="ml-3 mb-0"
+				data-test-id="add-btn"
+				@click="$emit('add')"
+			>
+				<VIcon v-bind="options.addIcon">
+					{{ mdiPlus }}
+				</VIcon>
+
+				<span
+					v-show="!display.xs.value"
+					v-bind="options.addIconLabel"
+				>
+					{{ addButtonLabel }}
+				</span>
+			</VBtn>
+
+			<slot name="search-right" />
+		</div>
+	</VToolbar>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.sy-table-toolbar {
+	min-height: 56px;
+}
+
+.loading :deep(.v-field__append-inner) {
+	opacity: 0.6 !important;
+}
+
+:deep(.v-field--disabled) {
+	opacity: 0.7 !important;
+}
+
+.sy-table-toolbar__search {
+	display: grid;
+	grid-auto-columns: auto;
+	grid-auto-flow: column;
+	margin-left: auto;
+	align-items: end;
+}
+
+.sy-form-input {
+	width: 328px;
+}
+
+.sy-form-input--s {
+	z-index: 1; // Display content above the table on mobile
+	contain: none; // Allow fixed elements to be displayed properly
+
+	:deep(.v-toolbar__content) {
+		width: 100%;
+		flex-wrap: wrap;
+	}
+}
+
+.sy-table-toolbar.v-theme--dark :deep() {
+	background-color: tokens.$grey-darken-20 !important;
+
+	p,
+	.text-primary {
+		color: rgba(tokens.$colors-text-ondark, 0.6) !important;
+	}
+
+	svg {
+		fill: tokens.$colors-text-ondark !important;
+	}
+
+	.v-label {
+		color: rgba(tokens.$colors-text-ondark, 0.6) !important;
+	}
+
+	.v-field__input {
+		color: tokens.$colors-text-ondark !important;
+	}
+}
+
+.v-theme--dark button.v-btn:hover :deep() {
+	background: rgba(tokens.$colors-text-ondark, 0.1);
+}
+</style>

package/src/components/TableToolbar/config.ts

@@ -0,0 +1,24 @@
+export const config = {
+	toolbar: {
+		flat: true,
+		color: '#FFFFFF',
+		height: 'auto',
+		minHeight: '56px',
+	},
+	addBtn: {
+		variant: 'outlined',
+		color: 'primary',
+		class: 'my-1 px-2 px-md-4',
+		minWidth: '44px',
+	},
+	addIconLabel: {
+		class: 'mr-1',
+	},
+	textField: {
+		variant: 'underlined',
+		clearable: true,
+		singleLine: true,
+		hideDetails: true,
+		density: 'compact',
+	},
+} as const

package/src/components/TableToolbar/locales.ts

@@ -0,0 +1,6 @@
+export const locales = {
+	rowText: (lignes: string, plural: boolean): string =>
+		`${lignes} ligne${plural ? 's' : ''}`,
+	search: 'Rechercher',
+	addBtnLabel: 'Ajouter',
+}

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

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import TableToolbar from '../TableToolbar.vue'
+
+describe('TableToolbar', () => {
+	it('should render', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 1,
+				nbTotal: 2,
+				showAddBtn: true,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.find('[data-test-id="nb-rows"]').text()).toContain('1/2')
+	})
+
+	it('renders correctly when all the item are displayed', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 5,
+				nbTotal: 5,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.find('[data-test-id="nb-rows"]').text()).toContain('5/5')
+	})
+
+	it('renders correctly when loading', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				loading: true,
+				nbFiltered: 0,
+				nbTotal: 1,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.find('.v-progress-linear').exists()).toBe(true)
+	})
+
+	it('renders correctly when the screen width <= 600px', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(600)
+
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 0,
+				nbTotal: 1,
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with content slot', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 0,
+				nbTotal: 1,
+			},
+			slots: {
+				searchLeft: '<p>search-left</p>',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with no items', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 0,
+				nbTotal: 0,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.find('[data-test-id="nb-rows"]').exists()).toBe(false)
+	})
+
+	it('renders correctly with no nbFilters', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				nbFiltered: undefined,
+				nbTotal: 50,
+			},
+		})
+		expect(wrapper.find('[data-test-id="nb-rows"]').text()).not.toContain('/')
+		expect(wrapper.find('[data-test-id="nb-rows"]').text()).toContain('50')
+	})
+
+	it('render correctly with the button add', () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 0,
+				nbTotal: 1,
+				showAddButton: true,
+			},
+		})
+
+		expect(wrapper.find('[data-test-id="add-btn"]').exists()).toBe(true)
+	})
+
+	it('emit an update:search event when the search input is updated', async () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 0,
+				nbTotal: 1,
+			},
+		})
+
+		await wrapper.find('[data-test-id="search-input"] input').setValue('search')
+
+		expect(wrapper.emitted('update:search')).toEqual([['search']])
+	})
+
+	it('emit an add event when the add button is clicked', async () => {
+		const wrapper = mount(TableToolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nbFiltered: 0,
+				nbTotal: 1,
+				showAddButton: true,
+			},
+		})
+
+		await wrapper.find('[data-test-id="add-btn"]').trigger('click')
+
+		expect(wrapper.emitted('add')).toBeTruthy()
+	})
+})