@addev-be/ui 0.6.23 → 0.6.25

package/package.json

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

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

@@ -193,7 +193,7 @@ export const advancedCheckboxColumn = <R extends Record<string, any>>(
     name: title,
     render: (row) => (
       <>
-        <input type="checkbox" checked={row[key]} />
+        <input type="checkbox" checked={row[key]} readOnly />
         <span>{row[key] ? ' Oui' : ' Non'}</span>
       </>
     ),

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

@@ -282,7 +282,7 @@ export const checkboxColumn = <R extends Record<string, any>>(
     name: title,
     render: (row) => (
       <>
-        <input type="checkbox" checked={row[key]} />
+        <input type="checkbox" checked={row[key]} readOnly />
         <span>{row[key] ? ' Oui' : ' Non'}</span>
       </>
     ),

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

@@ -248,15 +248,18 @@ export const sqlCheckboxColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (row) => (
-      <>
-        <input type="checkbox" checked={row[key]} />
-        <span>{row[key] ? ' Oui' : ' Non'}</span>
-      </>
-    ),
+    render: (row) => {
+      const value = !!+(row[key] ?? 0);
+      return (
+        <>
+          <input type="checkbox" checked={value} readOnly />
+          <span>{value ? ' Oui' : ' Non'}</span>
+        </>
+      );
+    },
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    filter: { ...numberFilter(key), getter: (value) => +(value[key] ?? 0) },
     footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },

package/src/providers/AuthenticationProvider/helpers.ts

@@ -0,0 +1,3 @@
+export const basePermissions: Record<string, string> = {
+  'users.manage': 'Gérer les utilisateurs',
+};

package/src/providers/AuthenticationProvider/index.tsx

@@ -18,6 +18,8 @@ import {
   useSendRecoveryKeyRequestHandler,
 } from '../../services';
 
+import { basePermissions } from './helpers';
+
 export type AuthenticationContextProps = {
   token?: string;
   user?: UserDTO;
@@ -28,6 +30,8 @@ export type AuthenticationContextProps = {
   sendRecoveryKey: (email: string) => Promise<number>;
   checkRecoveryKey: (key: string) => Promise<number>;
   resetPassword: (key: string, password: string) => Promise<number>;
+  permissions: Record<string, string>;
+  hasPermission: (permission: string) => boolean;
 };
 
 export const AuthenticationContext = createContext<AuthenticationContextProps>({
@@ -38,18 +42,26 @@ export const AuthenticationContext = createContext<AuthenticationContextProps>({
   sendRecoveryKey: async () => -1,
   checkRecoveryKey: async () => -1,
   resetPassword: async () => -1,
+  permissions: {},
+  hasPermission: () => false,
 });
 
 export type AuthenticationProviderProps = PropsWithChildren<{
+  permissions?: Record<string, string>;
   loginComponent?: FC;
   requestHandlerName?: string;
 }>;
 
 export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
+  permissions,
   loginComponent: LoginComponent,
   children,
   requestHandlerName,
 }) => {
+  const allPermissions = useMemo(
+    () => ({ ...basePermissions, ...permissions }),
+    [permissions]
+  );
   const [, setWebSocketStatus] = useState<boolean | undefined>(false);
   const [token, setToken] = useState<string | undefined>(
     sessionStorage.getItem('authToken') || undefined
@@ -148,6 +160,14 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
     [sendCheckRecoveryKeyRequest]
   );
 
+  const hasPermission = useCallback(
+    (permission: string) =>
+      permission in allPermissions &&
+      !!allPermissions[permission] &&
+      (user?.isAdmin || (user?.permissions?.includes(permission) ?? false)),
+    [allPermissions, user?.isAdmin, user?.permissions]
+  );
+
   const contextValue = useMemo(
     () => ({
       token,
@@ -159,10 +179,14 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
       sendRecoveryKey,
       checkRecoveryKey,
       resetPassword,
+      permissions: allPermissions,
+      hasPermission,
     }),
     [
+      allPermissions,
       authenticate,
       checkRecoveryKey,
+      hasPermission,
       login,
       logout,
       resetPassword,

package/src/services/index.ts

@@ -11,4 +11,3 @@ export * from './types/auth';
 export * from './types/base';
 export * from './types/users';
 export * from './types/userProfiles';
-export * from './types/userPermissions';

package/src/services/types/userProfiles.ts

@@ -7,7 +7,7 @@ export const userProfileDtoCodec = t.type(
     ...baseModelDtoCodec.props,
     name: t.string,
     permissions: t.array(t.string),
-    isAdmin: t.string,
+    isAdmin: t.boolean,
   },
   'UserProfileDTO'
 );
@@ -25,6 +25,7 @@ export const getUserProfileRequestDtoCodec = t.type(
 
 export const getUserProfileResponseDtoCodec = t.type(
   {
+    status: t.number,
     data: userProfileDtoCodec,
   },
   'GetUserProfileResponseDTO'
@@ -62,7 +63,7 @@ export type GetAllUserProfilesResponseDTO = t.TypeOf<
 
 export const saveUserProfileRequestDtoCodec = t.type(
   {
-    id: t.string,
+    data: userProfileDtoCodec,
   },
   'SaveUserProfileRequestDTO'
 );

package/src/services/types/users.ts

@@ -1,6 +1,7 @@
 import * as t from 'io-ts';
 
 import { baseModelDtoCodec } from './base';
+import { userProfileDtoCodec } from './userProfiles';
 
 export const userDtoCodec = t.intersection(
   [
@@ -9,6 +10,7 @@ export const userDtoCodec = t.intersection(
       username: t.string,
       permissions: t.array(t.string),
       isAdmin: t.boolean,
+      profile: t.union([userProfileDtoCodec, t.null]),
     }),
     t.partial({
       name: t.string,
@@ -60,7 +62,13 @@ export type GetAllUsersResponseDTO = t.TypeOf<
 
 export const saveUserRequestDtoCodec = t.type(
   {
-    id: t.string,
+    data: t.intersection([
+      userDtoCodec,
+      t.partial({
+        password: t.string,
+      }),
+    ]),
+    password: t.string,
   },
   'SaveUserRequestDTO'
 );

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

@@ -1,277 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
-import {
-  buildExcelFormat,
-  numberFilter,
-  textFilter,
-} from '../../DataGrid/helpers';
-import {
-  formatMoney,
-  formatNumber,
-  formatNumberInvariant,
-  formatPercentage,
-} from '../../../../helpers/numbers';
-
-import { formatDate } from '../../../../helpers/dates';
-
-export const sqlTextColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    ...options,
-    footer: (rows) => `${rows[0][key]} éléments`,
-  },
-});
-
-/**
- * Creates a column with a composed value from multiple fields,
- * and filtered by a text filter on the first field
- */
-export const sqlComposedColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  fields: string[],
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    field: {
-      fieldAlias: key,
-      operator: 'jsonObject',
-      operands: fields.flatMap((field) => [
-        { constantValue: field },
-        { fieldName: field },
-      ]),
-    },
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...textFilter(fields[0]),
-      getter: (value) => value[fields[0]] ?? 0,
-    },
-    filterField: fields[0],
-    sortField: fields[0],
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
-
-export const sqlMailColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
-
-export const sqlPhoneColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
-
-export const sqlDateColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'date',
-    render: (row) => formatDate(row[key]),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    excelFormatter: () => 'dd/mm/yyyy',
-    excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
-    filter: {
-      ...textFilter(key),
-      getter: (value) => value[key] ?? '',
-      formatter: (value) => formatDate(value),
-      renderer: (value) => formatDate(value),
-    },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
-
-export const sqlMonthColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
-
-export const sqlNumberColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...numberFilter(key),
-      getter: (value) => value[key] ?? 0,
-      renderer: (value) => formatNumber(value, decimals) ?? '',
-    },
-    footer: {
-      sum: null,
-      avg: null,
-      count: null,
-      max: null,
-      min: null,
-    },
-    ...options,
-  },
-});
-
-export const sqlMoneyColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'number',
-    render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals, ' €'),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...numberFilter(key),
-      getter: (value) => value[key] ?? 0,
-      renderer: (value) => formatMoney(value, decimals) ?? '',
-    },
-    footer: {
-      sum: null,
-      avg: null,
-      count: null,
-      max: null,
-      min: null,
-    },
-    ...options,
-  },
-});
-
-export const sqlPercentageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals, '%'),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...numberFilter(key),
-      getter: (value) => value[key] ?? 0,
-      renderer: (value) => formatPercentage(value, decimals) ?? '',
-    },
-    ...options,
-  },
-});
-
-export const sqlCheckboxColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <>
-        <input type="checkbox" checked={row[key]} />
-        <span>{row[key] ? ' Oui' : ' Non'}</span>
-      </>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
-
-export const sqlColorColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <div
-        style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
-      >
-        &nbsp;
-      </div>
-    ),
-    excelValue: () => '',
-    excelBackgroundColor: (value) => value,
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...textFilter(key),
-      getter: (value) => value[key] ?? '',
-      renderer: (value) => (
-        <div
-          style={{
-            backgroundColor: value,
-            width: 'var(--space-16)',
-            height: '1em',
-          }}
-        >
-          &nbsp;
-        </div>
-      ),
-    },
-    ...options,
-  },
-});

package/src/services/types/userPermissions.ts

@@ -1,3 +0,0 @@
-export const userPermissions: Record<string, string> = {
-  'users:manage': 'Gérer les utilisateurs',
-};