From a4b427b45d56f67e04464bb5ea8e363834776aaf Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 31 Aug 2021 09:34:33 +0200 Subject: [PATCH] Init migration Signed-off-by: soupette --- .../admin/src/pages/Users/ListPage/index.js | 547 ++++++++++-------- .../core/admin/admin/src/translations/en.json | 5 +- 2 files changed, 301 insertions(+), 251 deletions(-) diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/index.js index d68e842b22..12bb96ba59 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/index.js @@ -1,293 +1,344 @@ -// import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; -// import { -// BaselineAlignment, -// useQuery, -// request, -// useRBAC, -// LoadingIndicatorPage, -// PopUpWarning, -// useNotification, -// SettingsPageTitle -// } from '@strapi/helper-plugin'; -// import { get } from 'lodash'; -// import { useHistory, useLocation } from 'react-router-dom'; +import React, { + // useCallback, + useEffect, + // useMemo, + useReducer, + useRef, + // useState +} from 'react'; +import { + // BaselineAlignment, + // useQuery, + request, + useRBAC, + LoadingIndicatorPage, + // PopUpWarning, + SettingsPageTitle, + useNotification, + useFocusWhenNavigate, +} from '@strapi/helper-plugin'; +import { + Button, + // ContentLayout, + HeaderLayout, + // Table, + // TableLabel, + // Tbody, + // TFooter, + // Th, + // Thead, + // Tr, + // VisuallyHidden, + Main, +} from '@strapi/parts'; +import { Mail } from '@strapi/icons'; +import { + // useHistory, + useLocation, +} from 'react-router-dom'; +import { useIntl } from 'react-intl'; +// import get from 'lodash/get'; // import { Flex, Padded } from '@buffetjs/core'; // import { useSettingsHeaderSearchContext } from '../../../hooks'; // import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users'; -// import adminPermissions from '../../../permissions'; +import adminPermissions from '../../../permissions'; // import Header from './Header'; // import ModalForm from './ModalForm'; // import getFilters from './utils/getFilters'; -// import init from './init'; -// import { initialState, reducer } from './reducer'; +import init from './init'; +import { initialState, reducer } from './reducer'; -// const ListPage = () => { -// const { -// isLoading: isLoadingForPermissions, -// allowedActions: { canCreate, canDelete, canRead, canUpdate }, -// } = useRBAC(adminPermissions.settings.users); -// const toggleNotification = useNotification(); -// const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpened] = useState(false); -// const [isModalOpened, setIsModalOpened] = useState(false); -// const { toggleHeaderSearch } = useSettingsHeaderSearchContext(); -// const query = useQuery(); -// const { push } = useHistory(); -// const { search } = useLocation(); -// const filters = useMemo(() => { -// return getFilters(search); -// }, [search]); +const ListPage = () => { + const { + isLoading: isLoadingForPermissions, + allowedActions: { + canCreate, + // canDelete, + canRead, + // canUpdate + }, + } = useRBAC(adminPermissions.settings.users); + const toggleNotification = useNotification(); + // const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpened] = useState(false); + // const [isModalOpened, setIsModalOpened] = useState(false); + const { formatMessage } = useIntl(); + // const query = useQuery(); + // const { push } = useHistory(); + const { search } = useLocation(); -// const [ -// { -// data, -// dataToDelete, -// isLoading, -// pagination: { total }, -// shouldRefetchData, -// showModalConfirmButtonLoading, -// }, -// dispatch, -// ] = useReducer(reducer, initialState, init); -// const pageSize = parseInt(query.get('pageSize') || 10, 10); -// const page = parseInt(query.get('page') || 0, 10); -// const sort = decodeURIComponent(query.get('sort')); -// const _q = decodeURIComponent(query.get('_q') || ''); -// const getDataRef = useRef(); -// const listRef = useRef(); + useFocusWhenNavigate(); -// getDataRef.current = async () => { -// if (!canRead) { -// dispatch({ -// type: 'UNSET_IS_LOADING', -// }); + // const filters = useMemo(() => { + // return getFilters(search); + // }, [search]); -// return; -// } -// // Show the loading state and reset the state -// dispatch({ -// type: 'GET_DATA', -// }); + const [ + { + // data, + // dataToDelete, + isLoading, + pagination: { total }, + // shouldRefetchData, + // showModalConfirmButtonLoading, + }, + dispatch, + ] = useReducer(reducer, initialState, init); + // const pageSize = parseInt(query.get('pageSize') || 10, 10); + // const page = parseInt(query.get('page') || 0, 10); + // const sort = decodeURIComponent(query.get('sort')); + // const _q = decodeURIComponent(query.get('_q') || ''); + const getDataRef = useRef(); + // const listRef = useRef(); -// try { -// const { -// data: { results, pagination }, -// } = await request(`/admin/users${search}`, { method: 'GET' }); + getDataRef.current = async () => { + if (!canRead) { + dispatch({ + type: 'UNSET_IS_LOADING', + }); -// dispatch({ -// type: 'GET_DATA_SUCCEEDED', -// data: results, -// pagination, -// }); -// } catch (err) { -// console.error(err.response); -// toggleNotification({ -// type: 'warning', -// message: { id: 'notification.error' }, -// }); -// } -// }; + return; + } + // Show the loading state and reset the state + dispatch({ + type: 'GET_DATA', + }); -// useEffect(() => { -// if (!isLoadingForPermissions) { -// getDataRef.current(); -// } -// }, [search, isLoadingForPermissions]); + try { + const { + data: { results, pagination }, + } = await request(`/admin/users${search}`, { method: 'GET' }); -// useEffect(() => { -// if (canRead) { -// toggleHeaderSearch({ id: 'Settings.permissions.menu.link.users.label' }); -// } + dispatch({ + type: 'GET_DATA_SUCCEEDED', + data: results, + pagination, + }); + } catch (err) { + console.error(err.response); + toggleNotification({ + type: 'warning', + message: { id: 'notification.error' }, + }); + } + }; -// return () => { -// if (canRead) { -// toggleHeaderSearch(); -// } -// }; -// // eslint-disable-next-line react-hooks/exhaustive-deps -// }, [canRead]); + useEffect(() => { + if (!isLoadingForPermissions) { + getDataRef.current(); + } + }, [search, isLoadingForPermissions]); -// const handleChangeDataToDelete = ids => { -// dispatch({ -// type: 'ON_CHANGE_DATA_TO_DELETE', -// dataToDelete: ids, -// }); -// }; + // const handleChangeDataToDelete = ids => { + // dispatch({ + // type: 'ON_CHANGE_DATA_TO_DELETE', + // dataToDelete: ids, + // }); + // }; -// const handleChangeFilter = ({ filter, name, value }) => { -// const filterName = `${name}${filter}`; + // const handleChangeFilter = ({ filter, name, value }) => { + // const filterName = `${name}${filter}`; -// updateSearchParams(filterName, encodeURIComponent(value), true); -// }; + // updateSearchParams(filterName, encodeURIComponent(value), true); + // }; -// const handleChangeFooterParams = ({ target: { name, value } }) => { -// let paramName = name.split('.')[1].replace('_', ''); + // const handleChangeFooterParams = ({ target: { name, value } }) => { + // let paramName = name.split('.')[1].replace('_', ''); -// if (paramName === 'limit') { -// paramName = 'pageSize'; -// } + // if (paramName === 'limit') { + // paramName = 'pageSize'; + // } -// updateSearchParams(paramName, value); -// }; + // updateSearchParams(paramName, value); + // }; -// const handleChangeSort = ({ target: { name, value } }) => { -// updateSearchParams(name, value); -// }; + // const handleChangeSort = ({ target: { name, value } }) => { + // updateSearchParams(name, value); + // }; -// const handleClickDeleteFilter = ({ target: { name } }) => { -// const currentSearch = new URLSearchParams(search); + // const handleClickDeleteFilter = ({ target: { name } }) => { + // const currentSearch = new URLSearchParams(search); -// currentSearch.delete(name); + // currentSearch.delete(name); -// push({ search: currentSearch.toString() }); -// }; + // push({ search: currentSearch.toString() }); + // }; -// const handleClickDelete = useCallback(id => { -// handleToggleModal(); + // const handleClickDelete = useCallback(id => { + // handleToggleModal(); -// dispatch({ -// type: 'ON_CHANGE_DATA_TO_DELETE', -// dataToDelete: [id], -// }); -// }, []); + // dispatch({ + // type: 'ON_CHANGE_DATA_TO_DELETE', + // dataToDelete: [id], + // }); + // }, []); -// const handleCloseModal = () => { -// // Refetch data -// getDataRef.current(); -// }; + // const handleCloseModal = () => { + // // Refetch data + // getDataRef.current(); + // }; -// const handleClosedModalDelete = () => { -// if (shouldRefetchData) { -// getDataRef.current(); -// } else { -// // Empty the selected ids when the modal closes -// dispatch({ -// type: 'RESET_DATA_TO_DELETE', -// }); + // const handleClosedModalDelete = () => { + // if (shouldRefetchData) { + // getDataRef.current(); + // } else { + // // Empty the selected ids when the modal closes + // dispatch({ + // type: 'RESET_DATA_TO_DELETE', + // }); -// // Reset the list's reducer dataToDelete state using a ref so we don't need an effect -// listRef.current.resetDataToDelete(); -// } -// }; + // // Reset the list's reducer dataToDelete state using a ref so we don't need an effect + // listRef.current.resetDataToDelete(); + // } + // }; -// const handleConfirmDeleteData = useCallback(async () => { -// dispatch({ -// type: 'ON_DELETE_USERS', -// }); + // const handleConfirmDeleteData = useCallback(async () => { + // dispatch({ + // type: 'ON_DELETE_USERS', + // }); -// let shouldDispatchSucceededAction = false; + // let shouldDispatchSucceededAction = false; -// try { -// await request('/admin/users/batch-delete', { -// method: 'POST', -// body: { -// ids: dataToDelete, -// }, -// }); -// shouldDispatchSucceededAction = true; -// } catch (err) { -// const errorMessage = get(err, 'response.payload.data', 'An error occured'); + // try { + // await request('/admin/users/batch-delete', { + // method: 'POST', + // body: { + // ids: dataToDelete, + // }, + // }); + // shouldDispatchSucceededAction = true; + // } catch (err) { + // const errorMessage = get(err, 'response.payload.data', 'An error occured'); -// toggleNotification({ -// type: 'warning', -// message: errorMessage, -// }); -// } + // toggleNotification({ + // type: 'warning', + // message: errorMessage, + // }); + // } -// // Only dispatch the action once -// if (shouldDispatchSucceededAction) { -// dispatch({ -// type: 'ON_DELETE_USERS_SUCCEEDED', -// }); -// } + // // Only dispatch the action once + // if (shouldDispatchSucceededAction) { + // dispatch({ + // type: 'ON_DELETE_USERS_SUCCEEDED', + // }); + // } -// handleToggleModal(); -// }, [dataToDelete, toggleNotification]); + // handleToggleModal(); + // }, [dataToDelete, toggleNotification]); -// const handleToggle = () => setIsModalOpened(prev => !prev); + // const handleToggle = () => setIsModalOpened(prev => !prev); -// const handleToggleModal = () => setIsWarningDeleteAllOpened(prev => !prev); + // const handleToggleModal = () => setIsWarningDeleteAllOpened(prev => !prev); -// const updateSearchParams = (name, value, shouldDeleteSearch = false) => { -// const currentSearch = new URLSearchParams(search); -// // Update the currentSearch -// currentSearch.set(name, value); + // const updateSearchParams = (name, value, shouldDeleteSearch = false) => { + // const currentSearch = new URLSearchParams(search); + // // Update the currentSearch + // currentSearch.set(name, value); -// if (shouldDeleteSearch) { -// currentSearch.delete('_q'); -// } + // if (shouldDeleteSearch) { + // currentSearch.delete('_q'); + // } -// push({ -// search: currentSearch.toString(), -// }); -// }; + // push({ + // search: currentSearch.toString(), + // }); + // }; -// if (isLoadingForPermissions) { -// return ; -// } + return ( +
+ + 'handleToggleModalForCreatingRole'} startIcon={}> + {formatMessage({ + id: 'Settings.permissions.users.create', + defaultMessage: 'Create new user', + })} + + ) : ( + undefined + ) + } + title={formatMessage({ + id: 'Settings.permissions.users.listview.header.title', + defaultMessage: 'Users', + })} + subtitle={formatMessage( + { + id: 'Settings.permissions.users.listview.header.subtitle', + defaultMessage: '{number, plural, =0 {# users} one {# user} other {# users}} found', + }, + { number: total } + )} + /> + {isLoading ? : undefined} +
+ ); -// return ( -//
-// -//
-// {canRead && ( -// <> -// -// -// -// -// -// -// -// -// {filters.map((filter, i) => ( -// // eslint-disable-next-line react/no-array-index-key -// -// ))} -// -// -// -// -// -// -//
-// -// )} -// -// -//
-// ); -// }; + // return ( + //
+ // + //
+ // {canRead && ( + // <> + // + // + // + // + // + // + // + // + // {filters.map((filter, i) => ( + // // eslint-disable-next-line react/no-array-index-key + // + // ))} + // + // + // + // + // + // + //
+ // ); +}; -// export default ListPage; +export default ListPage; -export default () => 'User - LV'; +// export default () => 'User - LV'; diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 75f7003044..a7bc1facce 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -109,14 +109,13 @@ "Settings.permissions.menu.link.roles.label": "Roles", "Settings.permissions.menu.link.users.label": "Users", "Settings.permissions.users.add-new": "Add new user", - "Settings.permissions.users.create": "Create new User", + "Settings.permissions.users.create": "Create new user", "Settings.permissions.users.form.email": "Email", "Settings.permissions.users.form.firstname": "First name", "Settings.permissions.users.form.lastname": "Last name", "Settings.permissions.users.form.sso": "Connect with SSO", "Settings.permissions.users.form.sso.description": "When enabled (ON), users can login via SSO", - "Settings.permissions.users.listview.header.description.plural": "{number} users found", - "Settings.permissions.users.listview.header.description.singular": "{number} user found", + "Settings.permissions.users.listview.header.subtitle": "{number, plural, =0 {# users} one {# user } other {# users}} found", "Settings.permissions.users.listview.header.title": "Users", "Settings.permissions.select-all-by-permission": "Select all {label} permissions", "Settings.permissions.select-by-permission": "Select {label} permission",