@centreon/ui 24.10.12 → 24.10.13

package/src/components/CrudPage/Actions/AddButton.tsx

@@ -1,23 +0,0 @@
-import { Add } from '@mui/icons-material';
-import { useSetAtom } from 'jotai';
-import { useCallback } from 'react';
-import { Button } from '../../Button';
-import { openFormModalAtom } from '../atoms';
-
-interface Props {
-  label: string;
-}
-
-const AddButton = ({ label }: Props): JSX.Element => {
-  const setOpenFormModal = useSetAtom(openFormModalAtom);
-
-  const add = useCallback(() => setOpenFormModal('add'), []);
-
-  return (
-    <Button size="small" icon={<Add />} iconVariant="start" onClick={add}>
-      {label}
-    </Button>
-  );
-};
-
-export default AddButton;

package/src/components/CrudPage/Actions/Filters.tsx

@@ -1,25 +0,0 @@
-import { Tune } from '@mui/icons-material';
-import { isValidElement } from 'react';
-import PopoverMenu from '../../../PopoverMenu';
-import { useActionsStyles } from './Actions.styles';
-
-interface Props {
-  label: string;
-  filters: JSX.Element;
-}
-
-const Filters: React.FC<Props> = ({ label, filters }: Props): JSX.Element => {
-  const { classes } = useActionsStyles();
-
-  return (
-    <PopoverMenu
-      title={label}
-      icon={<Tune />}
-      tooltipClassName={classes.tooltipFilters}
-    >
-      {isValidElement(filters) ? filters : <div />}
-    </PopoverMenu>
-  );
-};
-
-export default Filters;

package/src/components/CrudPage/Actions/Search.tsx

@@ -1,31 +0,0 @@
-import { SearchField } from '@centreon/ui';
-import { useActionsStyles } from './Actions.styles';
-import Filters from './Filters';
-import { useSearch } from './useSearch';
-
-interface Props {
-  label: string;
-  filters: JSX.Element;
-}
-
-const Search = ({ label, filters }: Props): JSX.Element => {
-  const { classes } = useActionsStyles();
-
-  const { change } = useSearch();
-
-  return (
-    <SearchField
-      className={classes.search}
-      debounced
-      fullWidth
-      dataTestId={label}
-      placeholder={label}
-      onChange={change}
-      InputProps={{
-        endAdornment: <Filters label="filters" filters={filters} />
-      }}
-    />
-  );
-};
-
-export default Search;

package/src/components/CrudPage/Actions/useSearch.tsx

@@ -1,24 +0,0 @@
-import { useAtom } from 'jotai';
-import { ChangeEvent, useCallback, useRef } from 'react';
-import { searchAtom } from '../atoms';
-
-interface UseSearchState {
-  search: string;
-  change: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const useSearch = (): UseSearchState => {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const [search, setSearch] = useAtom(searchAtom);
-
-  const change = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    timeoutRef.current = setTimeout(() => setSearch(event.target.value), 500);
-  }, []);
-
-  return { search, change };
-};

package/src/components/CrudPage/Columns/Actions.tsx

@@ -1,88 +0,0 @@
-import { EditOutlined } from '@mui/icons-material';
-import DeleteOutline from '@mui/icons-material/DeleteOutline';
-import { Box } from '@mui/material';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { isNil } from 'ramda';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IconButton } from '../../Button';
-import {
-  canDeleteSubItemsAtom,
-  itemToDeleteAtom,
-  openFormModalAtom
-} from '../atoms';
-
-interface Props<TData> {
-  row: TData & {
-    internalListingParentId?: number;
-    internalListingParentRow: TData;
-  };
-}
-
-const labelDelete = 'Delete';
-const labelUpdate = 'Update';
-
-const Actions = <TData extends { id: number; name: string }>({
-  row
-}: Props<TData>): JSX.Element => {
-  const { t } = useTranslation();
-  const canDeleteSubItems = useAtomValue(canDeleteSubItemsAtom);
-  const setItemToDelete = useSetAtom(itemToDeleteAtom);
-  const setOpenFormModal = useSetAtom(openFormModalAtom);
-
-  const askBeforeDelete = (): void => {
-    setItemToDelete({
-      id: row.id,
-      name: row.name,
-      parent: isNil(row.internalListingParentRow)
-        ? undefined
-        : {
-            id: row.internalListingParentRow.id,
-            name: row.internalListingParentRow.name
-          }
-    });
-  };
-
-  const updateRow = useCallback(() => setOpenFormModal(row.id), [row.id]);
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 1,
-        width: '100%',
-        justifyContent: 'flex-end'
-      }}
-    >
-      {isNil(row.internalListingParentRow) && (
-        <IconButton
-          size="small"
-          icon={<EditOutlined fontSize="small" color="primary" />}
-          onClick={updateRow}
-          title={t(labelUpdate)}
-          data-testid={
-            row.internalListingParentRow
-              ? `edit-${row.internalListingParentRow.id}-${row.id}`
-              : `edit-${row.id}`
-          }
-        />
-      )}
-      {(canDeleteSubItems || isNil(row.internalListingParentRow)) && (
-        <IconButton
-          size="small"
-          icon={<DeleteOutline fontSize="small" color="error" />}
-          onClick={askBeforeDelete}
-          title={t(labelDelete)}
-          data-testid={
-            row.internalListingParentRow
-              ? `delete-${row.internalListingParentRow.id}-${row.id}`
-              : `delete-${row.id}`
-          }
-        />
-      )}
-    </Box>
-  );
-};
-
-export default Actions;