Evol/log api

templates/admin/assets/scss/features/_index.scss

@@ -1 +1,2 @@
 @forward 'login';
+@forward 'log-api';

templates/admin/assets/scss/features/_log-api.scss

@@ -0,0 +1,48 @@
+@use 'assets/scss/variables' as *;
+
+$log-api-ok: #49cc90;
+$log-api-warning: #fca130;
+$log-api-error: #f93e3e;
+
+.log-api-tile {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  cursor: pointer;
+
+  * {
+    flex-shrink: 0;
+  }
+
+  .log-api-data {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-size: $font-size-normal;
+
+    .data {
+      display: flex;
+      width: 15%;
+      height: 40px;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 0 $spacer-2;
+      margin-left: $spacer-3;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &--large {
+        width: 40%;
+      }
+      &--small {
+        width: 30px;
+      }
+    }
+  }
+}

templates/admin/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/roboto": "^4.5.0",
+    "@mui/lab": "5.0.0-alpha.49",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
     "@mui/system": "^5.0.6",
@@ -83,7 +84,8 @@
     "eslint": "eslint src --ext .ts,.tsx",
     "typescript": "tsc --project tsconfig.json --noEmit",
     "test": "jest --config jest.config.js",
-    "coverage": "jest --config jest.config.js --coverage --watchAll=false"
+    "coverage": "jest --config jest.config.js --coverage --watchAll=false",
+    "lint": "yarn typescript && yarn eslint"
   },
   "packageManager": "[email protected]"
 }

templates/admin/src/components/Routes.ts

@@ -1,4 +1,5 @@
 export const HOME = '/home';
 export const USERS = '/users';
+export const LOG_API = '/log-api';
 
 export const LOGIN = '/login';

templates/admin/src/components/layout/Router.tsx

@@ -6,19 +6,24 @@ import {
 } from 'react-router-dom';
 import { getGlobalInstance } from 'plume-ts-di';
 import Home from '../features/Home';
+import LogApi from '../../lib/plume-admin-log-api/pages/LogApi';
 import Users from '../../lib/plume-admin-users/pages/Users';
 import PermissionRoute from '../theme/routes/PermissionRoute';
 import Permission from '../../services/session/Permission';
-import { HOME, USERS } from '../Routes';
+import { HOME, LOG_API, USERS } from '../Routes';
 
 export default function Router() {
   const users = getGlobalInstance(Users);
+  const logApi = getGlobalInstance(LogApi);
 
   return (
     <Switch>
       <PermissionRoute permission={Permission.MANAGE_USERS} path={USERS}>
         <users.render />
       </PermissionRoute>
+      <PermissionRoute permission={Permission.MANAGE_API_LOGS} path={LOG_API}>
+        <logApi.render />
+      </PermissionRoute>
       <Route path={HOME}>
         <Home />
       </Route>

templates/admin/src/components/navigation/Navigation.tsx

@@ -6,7 +6,7 @@ import MessageService from '../../i18n/messages/MessageService';
 import useToggle from '../../lib/react-hook-toggle/ReactHookToggle';
 import Permission from '../../services/session/Permission';
 import SessionService from '../../services/session/SessionService';
-import { HOME, USERS } from '../Routes';
+import { HOME, LOG_API, USERS } from '../Routes';
 import LinkListItem from './LinkListItem';
 import NestedListItem from './NestedListItem';
 import plumeLogo from '../../../assets/icons/plume_logo.png';
@@ -56,6 +56,19 @@ export default function Navigation() {
             </NestedListItem>
           )
         }
+        {
+          sessionService.hasPermission(Permission.MANAGE_SYSTEM)
+          && (
+            <NestedListItem icon="settings" label={messages.nav.settings} drawerOpen={isDrawerOpened}>
+              <LinkListItem
+                icon="http"
+                route={LOG_API}
+                label={messages.nav.log_api}
+                drawerOpen={isDrawerOpened}
+              />
+            </NestedListItem>
+          )
+        }
       </List>
     </nav>
   );

templates/admin/src/components/theme/AdminTheme.ts

@@ -2,15 +2,19 @@ import PlumeAdminTheme from '../../lib/plume-admin-theme/PlumeAdminTheme';
 import { ActionButton, ActionLink, ActionsContainer } from './action/Actions';
 import Drawer from './drawer/Drawer';
 import UncontrolledDrawer from './drawer/UncontrolledDrawer';
+import InputDatePicker from './form/fields/InputDatePicker';
+import InputDateRangePicker from './form/fields/InputDateRangePicker';
+import InputDateTimePicker from './form/fields/InputDateTimePicker';
 import InputSelect from './form/fields/InputSelect';
 import InputText from './form/fields/InputText';
 import FormField from './form/FormField';
 import { PageBloc, PageBlocColumn } from './layout/PageBloc';
 import PageTitle from './layout/PageTitle';
 import { Panel, PanelSeparator } from './layout/Panel';
 import StatusDot from './layout/StatusDot';
-import { ListElements, ListSingleElement } from './list/ListElements';
 import MultipleChoiceFilterMenu, { MultipleChoiceObjectFilterMenu } from './list/filter/MultipleChoiceFilterMenu';
+import SingleChoiceFilterMenu, { SingleObjectChoiceFilterMenu } from './list/filter/SingleChoiceFilterMenu';
+import { ListElements, ListSingleElement } from './list/ListElements';
 import ListHeader from './list/ListHeader';
 import SearchBar from './list/search/SearchBar';
 import SortMenu from './list/sort/SortMenu';
@@ -41,6 +45,10 @@ export default class AdminTheme implements PlumeAdminTheme {
 
   multipleChoiceObjectFilterMenu = MultipleChoiceObjectFilterMenu;
 
+  singleChoiceFilterMenu = SingleChoiceFilterMenu;
+
+  singleChoiceObjectFilterMenu = SingleObjectChoiceFilterMenu;
+
   listHeader = ListHeader;
 
   listElements = ListElements;
@@ -62,4 +70,10 @@ export default class AdminTheme implements PlumeAdminTheme {
   inputText = InputText;
 
   inputSelect = InputSelect;
+
+  inputDate = InputDatePicker;
+
+  inputDateTime = InputDateTimePicker;
+
+  inputDateRange = InputDateRangePicker;
 }

templates/admin/src/components/theme/form/fields/InputDatePicker.tsx

@@ -0,0 +1,90 @@
+import { Dayjs } from 'dayjs';
+import React from 'react';
+import { DatePicker, LocalizationProvider } from '@mui/lab';
+import DateAdapter from '@mui/lab/AdapterDayjs';
+import { MuiTextFieldProps } from '@mui/lab/internal/pickers/PureDateInput';
+import { TextField } from '@mui/material';
+import { useController } from 'react-hook-form';
+import en from '../../../../i18n/translations/en';
+import fr from '../../../../i18n/translations/fr';
+import { Translations } from '../../../../i18n/translations/Translations';
+import {
+  InputDateProps,
+} from '../../../../lib/plume-admin-theme/form/FormInputProps';
+
+function InputDatePicker(
+  {
+    placeholder,
+    label,
+    name,
+    id,
+    useNameAsId,
+    control,
+    rules,
+    disabled,
+    defaultValue,
+    onDateChange,
+    autoComplete,
+    showTodayButton,
+    disableFuture,
+    disableOpenPicker,
+    locale,
+  }: InputDateProps) {
+  const fieldId: string = (useNameAsId ? name : (id ?? name)) || '';
+
+  const localeMap = {
+    en,
+    fr,
+  };
+
+  const { field } = useController({
+    name: fieldId,
+    control,
+    rules,
+    defaultValue: defaultValue || null,
+  });
+
+  const onChangeCombined = (value: Dayjs | null) => {
+    field.onChange(value);
+    if (value && onDateChange) {
+      onDateChange(value);
+    }
+  };
+
+  const currentLocale: Translations = localeMap[locale as 'fr' | 'en'];
+
+  return (
+    <LocalizationProvider dateAdapter={DateAdapter} locale={currentLocale}>
+      <DatePicker
+        onChange={onChangeCombined}
+        value={field.value}
+        disableOpenPicker={disableOpenPicker}
+        showTodayButton={showTodayButton ?? false}
+        disableFuture={disableFuture ?? false}
+        inputFormat={currentLocale.format.date}
+        mask={currentLocale.format.date_mask}
+        renderInput={(params: MuiTextFieldProps) => (
+          <TextField
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...params}
+            ref={params.inputRef}
+            inputRef={field.ref}
+            id={fieldId}
+            name={name}
+            label={label}
+            inputProps={{
+              ...params.inputProps,
+              placeholder: placeholder || currentLocale.format.date,
+            }}
+            autoComplete={autoComplete}
+            disabled={disabled ?? false}
+            onBlur={field.onBlur}
+            required
+          />
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default (InputDatePicker);

templates/admin/src/components/theme/form/fields/InputDateRangePicker.tsx

@@ -0,0 +1,94 @@
+import { DateRangePicker, LocalizationProvider } from '@mui/lab';
+import DateAdapter from '@mui/lab/AdapterDayjs';
+import { DateRange } from '@mui/lab/DateRangePicker/RangeTypes';
+import { MuiTextFieldProps } from '@mui/lab/internal/pickers/PureDateInput';
+import { Icon, TextField } from '@mui/material';
+import { Dayjs } from 'dayjs';
+import React from 'react';
+import { useController } from 'react-hook-form';
+import en from '../../../../i18n/translations/en';
+import fr from '../../../../i18n/translations/fr';
+import { Translations } from '../../../../i18n/translations/Translations';
+import { InputDateRangeProps } from '../../../../lib/plume-admin-theme/form/FormInputProps';
+
+function InputDateRangePicker(
+  {
+    name,
+    id,
+    useNameAsId,
+    control,
+    rules,
+    disabled,
+    defaultValue,
+    locale,
+    onDateChange,
+    showTodayButton,
+    disableFuture,
+  }: InputDateRangeProps,
+) {
+  const fieldId: string = (useNameAsId ? name : (id ?? name)) || '';
+
+  const { field } = useController({
+    name: fieldId,
+    control,
+    rules,
+    defaultValue: defaultValue || [],
+  });
+
+  const onCustomChange = (val: DateRange<Dayjs>, keyboardInputValue?: string) => {
+    // Update the date when it has been updated using the datepicker and not the text fields
+    if (!keyboardInputValue) {
+      field.onChange(val);
+      if (onDateChange) {
+        onDateChange(val);
+      }
+    }
+  };
+
+  const localeMap = {
+    en,
+    fr,
+  };
+
+  const currentLocale: Translations = localeMap[locale as 'fr' | 'en'];
+
+  return (
+    <LocalizationProvider dateAdapter={DateAdapter} locale={currentLocale}>
+      <DateRangePicker
+        startText="Debut"
+        endText="Fin"
+        value={field.value}
+        mask={currentLocale.format.date_mask}
+        inputFormat={currentLocale.format.date}
+        showTodayButton={showTodayButton ?? false}
+        disableFuture={disableFuture ?? false}
+        onChange={(date: DateRange<Dayjs>, keyboardInputValue?: string) => {
+          onCustomChange(date, keyboardInputValue);
+        }}
+        renderInput={(startProps: MuiTextFieldProps, endProps: MuiTextFieldProps) => (
+          <>
+            <TextField
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...startProps}
+              type="date"
+              name={name}
+              id={fieldId}
+              disabled={disabled ?? false}
+            />
+            <Icon>arrow_forward</Icon>
+            <TextField
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...endProps}
+              type="date"
+              name={name}
+              id={fieldId}
+              disabled={disabled ?? false}
+            />
+          </>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default (InputDateRangePicker);