@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/Tables/SyTable/FilterRules.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import SyTable from './SyTable.vue'
 import { ref } from 'vue'
 import type { VDataTable } from 'vuetify/components'
+import dayjs from 'dayjs'
 
 const meta = {
 	title: 'Composants/Tableaux/SyTable/Rules',
@@ -233,3 +234,185 @@ export const NumberFilterRules: Story = {
     `,
 	}),
 }
+
+export const SelectFilterRules: Story = {
+	args: {
+		suffix: 'select-filter-rules',
+		showFilters: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Documentation des règles de filtrage par sélection pour le composant SyTable.',
+			},
+		},
+	},
+	render: () => ({
+		components: { SyTable },
+		setup() {
+			const headers = ref([
+				{
+					title: 'Catégorie',
+					key: 'category',
+					filterable: true,
+					filterType: 'select',
+					filterOptions: [
+						{ text: 'Fruits', value: 'Fruits' },
+						{ text: 'Légumes', value: 'Légumes' },
+						{ text: 'Boissons', value: 'Boissons' },
+						{ text: '(vide)', value: '' },
+					],
+				},
+				{ title: 'Description', key: 'description', filterable: false },
+			])
+
+			const items = ref([
+				{ category: 'Fruits', description: 'Catégorie standard avec valeur non vide' },
+				{ category: 'Légumes', description: 'Catégorie standard avec valeur non vide' },
+				{ category: '', description: 'Catégorie avec valeur vide, affichée comme "(vide)" dans la liste' },
+				{ category: 'Fruits', description: 'Valeur dupliquée, apparaît une seule fois dans la liste' },
+				{ category: 'Boissons', description: 'Catégorie standard avec valeur non vide' },
+			])
+
+			const options = ref({
+				itemsPerPage: 10,
+			})
+
+			return {
+				headers,
+				items,
+				options,
+			}
+		},
+		template: `
+      <div>
+        <h2>Règles de filtrage par sélection</h2>
+        <p class="mb-4">Les filtres de sélection permettent de choisir parmi les valeurs uniques présentes dans la colonne.</p>
+        
+        <div class="mb-4">
+          <p>Les filtres de choix sont des listes reprenant les éléments uniques présents dans l'ensemble des colonnes non filtrés. Pour faciliter l'accessibilité de la liste, le premier élément contient la valeur « - choisir - » pour indiquer qu'aucune ligne n'est filtré. Si l'une des cellules de la colonne est vide, l'élément de liste correspondant doit afficher la valeur « (vide) ».</p>
+          <p>L'action de filtrage est effectuée à la sélection d'une option de la liste de choix.</p>
+        </div>
+		  
+        <SyTable
+          v-model:options="options"
+          :headers="headers"
+          :items="items"
+          suffix="select-filter-rules"
+          show-filters
+        />
+      </div>
+    `,
+	}),
+}
+
+export const DateFilterRules: Story = {
+	args: {
+		suffix: 'date-filter-rules',
+		showFilters: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Documentation des règles de filtrage par date pour le composant SyTable.',
+			},
+		},
+	},
+	render: () => ({
+		components: { SyTable },
+		setup() {
+			// Exemple 1: Filtrage par date seule
+			const headersSingleDate = ref([
+				{
+					title: 'Date',
+					key: 'date',
+					filterable: true,
+					filterType: 'date',
+				},
+				{ title: 'Description', key: 'description', filterable: false },
+			])
+
+			const itemsSingleDate = ref([
+				{ date: dayjs('2025-01-15').format('DD/MM/YYYY'), description: 'Date simple' },
+				{ date: dayjs('2025-02-20').format('DD/MM/YYYY'), description: 'Date simple' },
+				{ date: dayjs('2024-12-10').format('DD/MM/YYYY'), description: 'Date simple' },
+				{ date: dayjs('2025-05-05').format('DD/MM/YYYY'), description: 'Date simple' },
+			])
+
+			const optionsSingleDate = ref({
+				itemsPerPage: 10,
+			})
+
+			// Exemple 2: Filtrage par période
+			const headersPeriod = ref([
+				{
+					title: 'Date',
+					key: 'date',
+					filterable: true,
+					filterType: 'period',
+					dateFormat: 'DD/MM/YYYY',
+				},
+				{ title: 'Description', key: 'description', filterable: false },
+			])
+
+			// Définir une période du 01/01/2025 au 31/03/2025 pour l'exemple
+			const periodStart = dayjs('2025-01-01').format('DD/MM/YYYY')
+			const periodEnd = dayjs('2025-03-31').format('DD/MM/YYYY')
+
+			const itemsPeriod = ref([
+				{ date: dayjs('2025-01-15').format('DD/MM/YYYY'), description: `Date incluse dans la période ${periodStart} - ${periodEnd}` },
+				{ date: dayjs('2025-02-20').format('DD/MM/YYYY'), description: `Date incluse dans la période ${periodStart} - ${periodEnd}` },
+				{ date: dayjs('2024-12-10').format('DD/MM/YYYY'), description: `Date avant la période ${periodStart} - ${periodEnd}` },
+				{ date: dayjs('2025-05-05').format('DD/MM/YYYY'), description: `Date après la période ${periodStart} - ${periodEnd}` },
+				{ date: dayjs('2025-01-01').format('DD/MM/YYYY'), description: `Date limite inférieure de la période (${periodStart})` },
+				{ date: dayjs('2025-03-31').format('DD/MM/YYYY'), description: `Date limite supérieure de la période (${periodEnd})` },
+			])
+
+			const optionsPeriod = ref({
+				itemsPerPage: 10,
+			})
+
+			return {
+				headersSingleDate,
+				itemsSingleDate,
+				optionsSingleDate,
+				headersPeriod,
+				itemsPeriod,
+				optionsPeriod,
+			}
+		},
+		template: `
+      <div>
+        <h2>Règles de filtrage par date</h2>
+        <p class="mb-4">Le filtre de date s'applique à une colonne de dates.</p>
+        
+        <div class="mb-4">
+          <p>Le filtre de période comporte deux champs de saisies permettant de saisir une période du … au …</p>
+          <ul class="mb-4 pl-4">
+            <li>Le premier champ de saisie représente la date minimale recherchée (inclue). S'il n'est pas renseigné, il n'y a pas de limite minimale.</li>
+            <li>Le deuxième champ de saisie représente la date maximale recherchée (inclue). S'il n'est pas renseigné, il n'y a pas de limite maximale.</li>
+          </ul>
+          <p>L'action de filtrage s'effectue quand 10 caractères sont présents dans le champ de saisie en cours.</p>
+        </div>
+
+        <h3 class="mb-3">Exemple 1: Filtrage par date seule</h3>
+        <SyTable
+          v-model:options="optionsSingleDate"
+          :headers="headersSingleDate"
+          :items="itemsSingleDate"
+          suffix="date-filter-single"
+          show-filters
+        />
+
+        <h3 class="mt-6 mb-3">Exemple 2: Filtrage par période</h3>
+        <SyTable
+          v-model:options="optionsPeriod"
+          :headers="headersPeriod"
+          :items="itemsPeriod"
+          suffix="date-filter-period"
+          show-filters
+        />
+      </div>
+    `,
+	}),
+}

package/src/components/Tables/SyTable/SyTable.mdx

@@ -7,7 +7,7 @@ import * as SyTable from './SyTable.stories';
 
 Le composant `SyTable` est utilisé pour afficher des données tabulaires côté client. Il s'appuie sur le composant `VDataTable` de Vuetify et offre des fonctionnalités supplémentaires comme le stockage local des options de tableau et des améliorations d'accessibilité.
 
-<Canvas of={SyTable.Default} />
+<Canvas story={{height: '550px'}} of={SyTable.Default} />
 
 ## API
 
@@ -25,17 +25,27 @@ Pour gérer individuellement le stockage des options pour différents tableaux,
 
 Le composant permet de trier les données par colonne en cliquant sur l'en-tête de la colonne.
 
-<Canvas of={SyTable.SortBy} />
+<Canvas story={{height: '550px'}} of={SyTable.SortBy} />
 
 ### Filtres des colonnes
 
 Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.
-<Canvas of={SyTable.FilterByText} />
+<Canvas story={{height: '550px'}} of={SyTable.FilterByText} />
 
 ### Resize des colonnes
 
 Le composant peut permettre de redimensionner les colonnes en utilisant la prop `resizable-columns`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas of={SyTable.ResizableColumns} />
+<Canvas story={{height: '550px'}} of={SyTable.ResizableColumns} />
+
+### Réorganisation des colonnes
+
+Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant la prop `enable-column-controls`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
+<Canvas story={{height: '550px'}} of={SyTable.ColumnControls} />
+
+### Selection des lignes
+
+Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
+<Canvas story={{height: '550px'}} of={SyTable.RowSelection} />
 
 ### Accessibilité