@addev-be/ui 0.2.11 → 0.2.13

package/assets/icons/sort-calendar-ascending.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 8 16 L 11 16 L 11 13 L 8 13 L 8 16 Z M 13 5 L 12 5 L 12 3 L 10 3 L 10 5 L 6 5 L 6 3 L 4 3 L 4 5 L 3 5 C 1.89 5 1 5.89 1 7 L 1 18 C 1 19.11 1.89 20 3 20 L 13 20 C 14.11 20 15 19.11 15 18 L 15 7 C 15 5.89 14.11 5 13 5 M 3 18 L 3 11 L 13 11 L 13 18 L 3 18 Z" style=""/>
+  <path d="M 18.5 7.5 L 15.5 7.5 L 15.5 18 C 15.478 18.657 15.194 19.345 14.77 19.77 C 14.345 20.194 13.657 20.478 13 20.5 L 3 20.5 C 2.343 20.478 1.655 20.194 1.23 19.77 C 0.806 19.345 0.522 18.657 0.5 18 L 0.5 7 C 0.522 6.343 0.806 5.655 1.23 5.23 C 1.655 4.806 2.343 4.522 3 4.5 L 3.5 4.5 L 3.5 2.5 L 6.5 2.5 L 6.5 4.5 L 9.5 4.5 L 9.5 2.5 L 12.5 2.5 L 12.5 4.5 L 13 4.5 C 13.657 4.522 14.345 4.806 14.77 5.23 C 15.153 5.613 15.422 6.211 15.486 6.807 L 20 2.293 L 25.207 7.5 L 21.5 7.5 L 21.5 21.5 L 18.5 21.5 Z M 19.5 6.5 L 19.5 20.5 L 20.5 20.5 L 20.5 6.5 L 22.793 6.5 L 20 3.707 L 17.207 6.5 Z M 11.5 12.5 L 11.5 16.5 L 7.5 16.5 L 7.5 12.5 Z M 8.5 15.5 L 10.5 15.5 L 10.5 13.5 L 8.5 13.5 Z M 11.5 5.5 L 11.5 3.5 L 10.5 3.5 L 10.5 5.5 L 5.5 5.5 L 5.5 3.5 L 4.5 3.5 L 4.5 5.5 L 3 5.5 C 2.547 5.478 2.235 5.639 1.937 5.937 C 1.639 6.235 1.478 6.547 1.5 7 L 1.5 18 C 1.478 18.453 1.639 18.765 1.937 19.063 C 2.235 19.361 2.547 19.522 3 19.5 L 13 19.5 C 13.453 19.522 13.765 19.361 14.063 19.063 C 14.361 18.765 14.522 18.453 14.5 18 L 14.5 7 C 14.522 6.547 14.361 6.235 14.063 5.937 C 13.765 5.639 13.453 5.478 13 5.5 Z M 2.5 10.5 L 13.5 10.5 L 13.5 18.5 L 2.5 18.5 Z M 12.5 17.5 L 12.5 11.5 L 3.5 11.5 L 3.5 17.5 Z" style="fill: none;"/>
+  <path d="M 19 17 L 16 17 L 20 21 L 24 17 L 21 17 L 21 3 L 19 3 L 19 17 Z" style=""/>
+</svg>

package/assets/icons/sort-calendar-descending.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19 7h-3l4-4 4 4h-3v14h-2zm-11 9h3v-3h-3zm5-11h-1v-2h-2v2h-4v-2h-2v2h-1c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2v-11c0-1.11-.89-2-2-2m-10 13v-7h10v7z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/Icons.tsx

@@ -24,6 +24,8 @@ import PhoneIcon from '../assets/icons/phone.svg?react';
 import PlusIcon from '../assets/icons/plus.svg?react';
 import RightIcon from '../assets/icons/right.svg?react';
 import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
+import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
 import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
 import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
 import TableFooterIcon from '../assets/icons/table-footer.svg?react';
@@ -92,6 +94,8 @@ export {
   PlusIcon,
   RightIcon,
   SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
   SpinnerIcon,
   TableColumnsIcon,
   TableFooterIcon,

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -15,6 +15,8 @@ import {
   IconFC,
   MagnifierIcon,
   SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
   TableFooterIcon,
   TableFooterSlashIcon,
   TallyIcon,
@@ -56,12 +58,12 @@ type FilterValuesProps<R> = {
 const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
   number: ['Trier du plus petit au plus grand', ArrowDown19Icon],
   text: ['Trier de A à Z', ArrowDownAZIcon],
-  // date: 'Trier du plus ancien au plus récent',
+  date: ['Trier du plus ancien au plus récent', SortCalendarAscendingIcon],
 };
 const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
   number: ['Trier du plus grand au plus petit', ArrowUp91Icon],
   text: ['Trier de Z à A', ArrowUpZAIcon],
-  // date: 'Trier du plus récent au plus ancien',
+  date: ['Trier du plus récent au plus ancien', SortCalendarDescendingIcon],
 };
 
 const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {

package/src/components/data/DataGrid/FilterModalContent/index.tsx

@@ -19,6 +19,13 @@ const filterOperators: {
     [K2 in DataGridFilterOperator<K>]: string;
   }>;
 } = {
+  date: {
+    after: 'Après',
+    before: 'Avant',
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    inRange: "Dans l'intervalle",
+  },
   number: {
     equals: 'Égal à',
     notEquals: 'Différent de',
@@ -100,21 +107,26 @@ export const FilterModalContent = ({
       {operator === 'inRange' && (
         <label htmlFor="filterValue2">
           <span>et</span>
-          <input
+          <Input
             name="filterValue2"
             type={filter.type}
             value={values[1] ?? ''}
-            // className="text-sm w-24"
             onChange={(e) => {
-              const newValues = [...values];
-              newValues[0] =
-                type === 'number'
-                  ? Number(e.target.value)
-                  : (String(e.target.value) as any);
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
+              if (type === 'number') {
+                const newValues = [...values];
+                newValues[1] = Number(e.target.value);
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              } else {
+                const newValues = [...values];
+                newValues[1] = String(e.target.value) as any;
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              }
             }}
           />
         </label>

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
+import { dateFilter, numberFilter, textFilter } from './filters';
 import {
   formatMoney,
   formatNumber,
   formatNumberInvariant,
   formatPercentage,
 } from '../../../../helpers/numbers';
-import { numberFilter, textFilter } from './filters';
 
 import moment from 'moment';
 import { repeat } from 'lodash';
@@ -94,7 +94,7 @@ export const dateColumn = <R extends Record<string, any>>(
     sortGetter: (row) => row[key] ?? '',
     footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: {
-      ...textFilter(key),
+      ...dateFilter(key),
       renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
     },
     ...options,

package/src/components/data/DataGrid/helpers/filters.ts

@@ -95,7 +95,55 @@ const numberInArrayPredicate: DataGridFilterPredicateBuilder<number> = (
   return (valueToVerify: number) => filterValues.includes(valueToVerify);
 };
 
+const dateBeforePredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const limitDate = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isBefore(limitDate);
+};
+const dateAfterPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const limitDate = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isAfter(limitDate);
+};
+const dateEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isSame(date);
+};
+const dateNotEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date = moment(filterValues[0]);
+  return (valueToVerify) => !moment(valueToVerify).isSame(date);
+};
+const dateInRangePredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date1 = moment(filterValues[0]);
+  const date2 = moment(filterValues[1]);
+  const startDate = date1.isBefore(date2) ? date1 : date2;
+  const endDate = date1.isBefore(date2) ? date2 : date1;
+  return (valueToVerify) =>
+    moment(valueToVerify).isBetween(startDate, endDate, 'days', '[]');
+};
+const dateInArrayPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  return (valueToVerify) => filterValues.includes(valueToVerify);
+};
+
 export const filtersPredicates: DataGridFilterPredicates = {
+  date: {
+    before: dateBeforePredicate,
+    after: dateAfterPredicate,
+    equals: dateEqualsPredicate,
+    notEquals: dateNotEqualsPredicate,
+    inRange: dateInRangePredicate,
+    inArray: dateInArrayPredicate,
+  },
   text: {
     contains: textContainsPredicate,
     notContains: textNotContainsPredicate,
@@ -139,6 +187,7 @@ export const defaultFilterGetter = (row: any, columnKey: string) =>
 export const defaultFilterValues: {
   [K in DataGridFilterType]: DataGridFilterDataType<K>;
 } = {
+  date: '',
   text: '',
   number: 0,
 };
@@ -146,6 +195,7 @@ export const defaultFilterValues: {
 export const defaultValueParsers: {
   [K in DataGridFilterType]: (value: string) => DataGridFilterDataType<K>;
 } = {
+  date: (value) => moment(value).format('YYYY-MM-DD'),
   text: (value) => value,
   number: (value) => parseFloat(value),
 };
@@ -215,6 +265,13 @@ export const getCheckboxes = (
         level,
       }));
 
+export const dateFilter = (key: string): DataGridFilter<'date'> => ({
+  type: 'date',
+  operator: 'before',
+  values: [''],
+  getter: (row) => row[key] ?? '',
+});
+
 export const textFilter = (key: string): DataGridFilter<'text'> => ({
   type: 'text',
   operator: 'contains',

package/src/components/data/DataGrid/types.ts

@@ -194,6 +194,10 @@ export type DataGridFilterOperators<K extends string, T> = {
 };
 
 export type DataGridFilterPredicates = {
+  date: DataGridFilterOperators<
+    'before' | 'after' | 'equals' | 'notEquals' | 'inRange' | 'inArray',
+    string
+  >;
   text: DataGridFilterOperators<
     | 'contains'
     | 'notContains'

package/src/services/globalSearch.ts

@@ -0,0 +1,27 @@
+import { SqlRequestRow } from './sqlRequests';
+import { useWebSocketRequestHandler } from './hooks';
+
+export type GlobalSearchRequestDTO = {
+  types: string[];
+  searchTerm: string;
+  limit?: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type GlobalSearchResponseDTO<T = any> = {
+  data: Record<string, SqlRequestRow<T>[]>;
+  count?: number;
+};
+
+type GlobalSearchRequestHandler<T> = (
+  request: GlobalSearchRequestDTO
+) => Promise<GlobalSearchResponseDTO<T>>;
+
+export const useGlobalSearchRequestHandler = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T = any
+>(): GlobalSearchRequestHandler<T> =>
+  useWebSocketRequestHandler<
+    GlobalSearchRequestDTO,
+    GlobalSearchResponseDTO<T>
+  >('GlobalSearch');