@centreon/ui 24.10.12 → 24.10.13

package/src/components/CrudPage/Listing.tsx

@@ -1,63 +0,0 @@
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { ColumnType } from '../../../';
-import { MemoizedListing } from '../../Listing';
-import Actions from './Actions/Actions';
-import ColumnActions from './Columns/Actions';
-import {
-  changeSortAtom,
-  limitAtom,
-  pageAtom,
-  sortFieldAtom,
-  sortOrderAtom
-} from './atoms';
-import { ListingProps } from './models';
-
-const Listing = <TData extends { id: number; name: string }>({
-  rows,
-  total,
-  isLoading,
-  columns,
-  subItems,
-  labels,
-  filters
-}: ListingProps<TData> & {
-  labels: {
-    search: string;
-    add: string;
-  };
-}): JSX.Element => {
-  const [page, setPage] = useAtom(pageAtom);
-  const [limit, setLimit] = useAtom(limitAtom);
-  const sortOrder = useAtomValue(sortOrderAtom);
-  const sortField = useAtomValue(sortFieldAtom);
-  const changeSort = useSetAtom(changeSortAtom);
-
-  const listingColumns = columns.concat({
-    type: ColumnType.component,
-    id: 'actions',
-    label: '',
-    Component: ColumnActions,
-    width: 'min-content',
-    clickable: true
-  });
-
-  return (
-    <MemoizedListing
-      actions={<Actions labels={labels} filters={filters} />}
-      columns={listingColumns}
-      subItems={subItems}
-      loading={isLoading}
-      rows={rows}
-      currentPage={page}
-      onPaginate={setPage}
-      limit={limit}
-      onLimitChange={setLimit}
-      totalRows={total}
-      sortField={sortField}
-      sortOrder={sortOrder}
-      onSort={changeSort}
-    />
-  );
-};
-
-export default Listing;

package/src/components/CrudPage/atoms.ts

@@ -1,30 +0,0 @@
-import { atom } from 'jotai';
-import { ItemToDelete } from './models';
-
-export const pageAtom = atom(0);
-export const limitAtom = atom(10);
-export const searchAtom = atom('');
-export const sortOrderAtom = atom('asc');
-export const sortFieldAtom = atom('name');
-export const openFormModalAtom = atom<number | 'add' | null>(null);
-export const itemToDeleteAtom = atom<ItemToDelete | null>(null);
-export const canDeleteSubItemsAtom = atom<boolean | undefined>(true);
-export const formLabelButtonsAtom = atom({
-  add: {
-    cancel: 'Cancel',
-    confirm: 'Save'
-  },
-  update: {
-    cancel: 'Cancel',
-    confirm: 'Save'
-  }
-});
-export const askBeforeCloseFormModalAtom = atom(false);
-
-export const changeSortAtom = atom(
-  null,
-  (_get, set, { sortOrder, sortField }) => {
-    set(sortOrderAtom, sortOrder);
-    set(sortFieldAtom, sortField);
-  }
-);

package/src/components/CrudPage/hooks/useDeleteItem.ts

@@ -1,53 +0,0 @@
-import {
-  Method,
-  ResponseError,
-  useMutationQuery,
-  useSnackbar
-} from '@centreon/ui';
-import { useQueryClient } from '@tanstack/react-query';
-import { ReactElement } from 'react';
-import { ItemToDelete } from '../models';
-import { isAFunction } from '../utils';
-
-interface UseDeleteItem {
-  isMutating: boolean;
-  deleteItem: (item: ItemToDelete) => Promise<object | ResponseError>;
-}
-
-interface UseDeleteItemProps {
-  deleteEndpoint: (item: ItemToDelete) => string;
-  listingQueryKey: string;
-  successMessage:
-    | ((item: ItemToDelete) => string | ReactElement)
-    | string
-    | ReactElement;
-}
-
-export const useDeleteItem = ({
-  deleteEndpoint,
-  listingQueryKey,
-  successMessage
-}: UseDeleteItemProps): UseDeleteItem => {
-  const queryClient = useQueryClient();
-
-  const { showSuccessMessage } = useSnackbar();
-
-  const { mutateAsync, isMutating } = useMutationQuery<object, ItemToDelete>({
-    getEndpoint: (_meta) => deleteEndpoint(_meta),
-    method: Method.DELETE,
-    onSuccess: (_data, { _meta }) => {
-      queryClient.invalidateQueries({ queryKey: [listingQueryKey] });
-      showSuccessMessage(
-        isAFunction(successMessage) ? successMessage(_meta) : successMessage
-      );
-    }
-  });
-
-  const deleteItem = (item: ItemToDelete): Promise<object | ResponseError> =>
-    mutateAsync({ _meta: item });
-
-  return {
-    isMutating,
-    deleteItem
-  };
-};

package/src/components/CrudPage/hooks/useGetItem.ts

@@ -1,36 +0,0 @@
-import { equals, isNotNil } from 'ramda';
-import { useFetchQuery } from '../../..';
-import { GetItem } from '../models';
-
-interface UseGetItem<TItemForm> {
-  initialValues?: TItemForm;
-  isLoading: boolean;
-}
-
-export const useGetItem = <
-  TItem extends { id: number; name: string },
-  TItemForm
->({
-  id,
-  decoder,
-  baseEndpoint,
-  itemQueryKey,
-  adapter
-}: GetItem<TItem, TItemForm> & {
-  id: number | 'add' | null;
-}): UseGetItem<TItemForm> => {
-  const { data, isLoading } = useFetchQuery<TItem>({
-    getEndpoint: () => baseEndpoint(id),
-    getQueryKey: () => [itemQueryKey, id],
-    decoder,
-    queryOptions: {
-      enabled: isNotNil(id) && !equals('add', id),
-      suspense: false
-    }
-  });
-
-  return {
-    initialValues: data ? adapter(data) : undefined,
-    isLoading
-  };
-};

package/src/components/CrudPage/hooks/useGetItems.ts

@@ -1,67 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { isEmpty } from 'ramda';
-import { ListingModel, buildListingEndpoint } from '../../..';
-import useFetchQuery from '../../../api/useFetchQuery';
-import {
-  limitAtom,
-  pageAtom,
-  searchAtom,
-  sortFieldAtom,
-  sortOrderAtom
-} from '../atoms';
-import { UseGetItemsProps, UseGetItemsState } from '../models';
-import { useListingQueryKey } from './useListingQueryKey';
-
-export const useGetItems = <TData, TFilters>({
-  queryKeyName,
-  filtersAtom,
-  decoder,
-  getSearchParameters,
-  baseEndpoint
-}: UseGetItemsProps<TData, TFilters>): UseGetItemsState<TData> => {
-  const queryKey = useListingQueryKey({ queryKeyName, filtersAtom });
-
-  const page = useAtomValue(pageAtom);
-  const limit = useAtomValue(limitAtom);
-  const search = useAtomValue(searchAtom);
-  const sortOrder = useAtomValue(sortOrderAtom);
-  const sortField = useAtomValue(sortFieldAtom);
-  const filters = useAtomValue(filtersAtom);
-
-  const { data, isLoading } = useFetchQuery<ListingModel<TData>>({
-    decoder,
-    getQueryKey: () => queryKey,
-    getEndpoint: () =>
-      buildListingEndpoint({
-        baseEndpoint,
-        parameters: {
-          page: page + 1,
-          limit,
-          sort: {
-            [sortField]: sortOrder
-          },
-          search: {
-            regex: {
-              fields: ['name'],
-              value: search
-            },
-            ...getSearchParameters({ filters, search })
-          }
-        }
-      }),
-    queryOptions: {
-      suspense: false
-    }
-  });
-
-  const items = data?.result || [];
-  const hasItems = !!data;
-
-  return {
-    items,
-    isDataEmpty: isEmpty(items),
-    hasItems,
-    isLoading,
-    total: data?.meta.total || 0
-  };
-};

package/src/components/CrudPage/hooks/useListingQueryKey.ts

@@ -1,31 +0,0 @@
-import { useAtomValue } from 'jotai';
-import {
-  limitAtom,
-  pageAtom,
-  searchAtom,
-  sortFieldAtom,
-  sortOrderAtom
-} from '../atoms';
-import { UseListingQueryKeyProps } from '../models';
-
-export const useListingQueryKey = <TFilter>({
-  filtersAtom,
-  queryKeyName
-}: UseListingQueryKeyProps<TFilter>): Array<string | number> => {
-  const page = useAtomValue(pageAtom);
-  const limit = useAtomValue(limitAtom);
-  const search = useAtomValue(searchAtom);
-  const sortOrder = useAtomValue(sortOrderAtom);
-  const sortField = useAtomValue(sortFieldAtom);
-  const filters = useAtomValue(filtersAtom);
-
-  return [
-    queryKeyName,
-    limit,
-    page,
-    search,
-    sortField,
-    sortOrder,
-    JSON.stringify(filters)
-  ];
-};

package/src/components/CrudPage/index.tsx

@@ -1,7 +0,0 @@
-import { CrudPageRoot } from './CrudPageRoot';
-import { askBeforeCloseFormModalAtom, openFormModalAtom } from './atoms';
-
-export const CrudPage = Object.assign(CrudPageRoot, {
-  openFormModalAtom,
-  askBeforeCloseFormModalAtom
-});

package/src/components/CrudPage/models.ts

@@ -1,118 +0,0 @@
-import { PrimitiveAtom } from 'jotai';
-import { ReactElement } from 'react';
-import { JsonDecoder } from 'ts.data.json';
-import { Column, ListingModel, SearchParameter } from '../../..';
-import { ListingSubItems } from '../../Listing/models';
-
-interface CrudPageRootLabels {
-  title: string;
-  welcome: {
-    title: string;
-    description?: string;
-  };
-  actions: {
-    create: string;
-  };
-  listing: {
-    search: string;
-  };
-}
-
-export interface UseListingQueryKeyProps<TFilters> {
-  queryKeyName: string;
-  filtersAtom: PrimitiveAtom<TFilters>;
-}
-
-export interface UseGetItemsProps<TData, TFilters> {
-  queryKeyName: string;
-  filtersAtom: PrimitiveAtom<TFilters>;
-  decoder?: JsonDecoder.Decoder<ListingModel<TData>>;
-  baseEndpoint: string;
-  getSearchParameters: ({
-    search,
-    filters
-  }: { search: string; filters: TFilters }) => SearchParameter;
-}
-
-export interface UseGetItemsState<TData> {
-  items: Array<TData>;
-  hasItems: boolean;
-  isDataEmpty: boolean;
-  isLoading: boolean;
-  total: number;
-}
-
-export interface DeleteItem {
-  deleteEndpoint: (item: ItemToDelete) => string;
-  modalSize?: 'small' | 'medium' | 'large' | 'xlarge';
-  labels: {
-    successMessage:
-      | ((item: ItemToDelete) => string | ReactElement)
-      | string
-      | ReactElement;
-    title:
-      | ((item: ItemToDelete) => string | ReactElement)
-      | string
-      | ReactElement;
-    description:
-      | ((item: ItemToDelete) => string | ReactElement)
-      | string
-      | ReactElement;
-    cancel: string;
-    confirm: string;
-  };
-}
-
-export interface GetItem<TItem, TItemForm> {
-  baseEndpoint: (id: number) => string;
-  decoder?: JsonDecoder.Decoder<TItem>;
-  adapter: (item: TItem) => TItemForm;
-  itemQueryKey: string;
-}
-
-export interface Form<TItem, TItemForm> {
-  Form: (props: {
-    Buttons: () => JSX.Element;
-    initialValues?: TItemForm;
-    isLoading?: boolean;
-  }) => JSX.Element;
-  getItem: GetItem<TItem, TItemForm>;
-  modalSize?: 'small' | 'medium' | 'large' | 'xlarge';
-  labels: {
-    add: {
-      title: string;
-      cancel: string;
-      confirm: string;
-    };
-    update: {
-      title: string;
-      cancel: string;
-      confirm: string;
-    };
-  };
-}
-
-export interface ListingProps<TData> {
-  rows: Array<TData>;
-  total: number;
-  isLoading: boolean;
-  columns: Array<Column>;
-  subItems?: ListingSubItems & {
-    canDeleteSubItems?: boolean;
-  };
-  filters: JSX.Element;
-}
-
-export interface ItemToDelete {
-  id: number;
-  name: string;
-  parent?: { id: number; name: string };
-}
-
-export interface CrudPageRootProps<TData, TFilters, TItem, TItemForm>
-  extends UseGetItemsProps<TData, TFilters>,
-    Omit<ListingProps<TData>, 'rows' | 'total' | 'isLoading'> {
-  form: Form<TItem, TItemForm>;
-  labels: CrudPageRootLabels;
-  deleteItem: DeleteItem;
-}

package/src/components/CrudPage/utils.ts

@@ -1,4 +0,0 @@
-import { equals, type } from 'ramda';
-
-export const isAFunction = (property): boolean =>
-  equals('Function', type(property));