Init migration

Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-08-31 09:34:33 +02:00
parent 4a49fc57a3
commit a4b427b45d
2 changed files with 301 additions and 251 deletions

View File

@ -1,293 +1,344 @@
// import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; import React, {
// import { // useCallback,
// BaselineAlignment, useEffect,
// useQuery, // useMemo,
// request, useReducer,
// useRBAC, useRef,
// LoadingIndicatorPage, // useState
// PopUpWarning, } from 'react';
// useNotification, import {
// SettingsPageTitle // BaselineAlignment,
// } from '@strapi/helper-plugin'; // useQuery,
// import { get } from 'lodash'; request,
// import { useHistory, useLocation } from 'react-router-dom'; 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 { Flex, Padded } from '@buffetjs/core';
// import { useSettingsHeaderSearchContext } from '../../../hooks'; // import { useSettingsHeaderSearchContext } from '../../../hooks';
// import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users'; // import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users';
// import adminPermissions from '../../../permissions'; import adminPermissions from '../../../permissions';
// import Header from './Header'; // import Header from './Header';
// import ModalForm from './ModalForm'; // import ModalForm from './ModalForm';
// import getFilters from './utils/getFilters'; // import getFilters from './utils/getFilters';
// import init from './init'; import init from './init';
// import { initialState, reducer } from './reducer'; import { initialState, reducer } from './reducer';
// const ListPage = () => { const ListPage = () => {
// const { const {
// isLoading: isLoadingForPermissions, isLoading: isLoadingForPermissions,
// allowedActions: { canCreate, canDelete, canRead, canUpdate }, allowedActions: {
// } = useRBAC(adminPermissions.settings.users); canCreate,
// const toggleNotification = useNotification(); // canDelete,
// const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpened] = useState(false); canRead,
// const [isModalOpened, setIsModalOpened] = useState(false); // canUpdate
// const { toggleHeaderSearch } = useSettingsHeaderSearchContext(); },
// const query = useQuery(); } = useRBAC(adminPermissions.settings.users);
// const { push } = useHistory(); const toggleNotification = useNotification();
// const { search } = useLocation(); // const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpened] = useState(false);
// const filters = useMemo(() => { // const [isModalOpened, setIsModalOpened] = useState(false);
// return getFilters(search); const { formatMessage } = useIntl();
// }, [search]); // const query = useQuery();
// const { push } = useHistory();
const { search } = useLocation();
// const [ useFocusWhenNavigate();
// {
// 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();
// getDataRef.current = async () => { // const filters = useMemo(() => {
// if (!canRead) { // return getFilters(search);
// dispatch({ // }, [search]);
// type: 'UNSET_IS_LOADING',
// });
// return; const [
// } {
// // Show the loading state and reset the state // data,
// dispatch({ // dataToDelete,
// type: 'GET_DATA', 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 { getDataRef.current = async () => {
// const { if (!canRead) {
// data: { results, pagination }, dispatch({
// } = await request(`/admin/users${search}`, { method: 'GET' }); type: 'UNSET_IS_LOADING',
});
// dispatch({ return;
// type: 'GET_DATA_SUCCEEDED', }
// data: results, // Show the loading state and reset the state
// pagination, dispatch({
// }); type: 'GET_DATA',
// } catch (err) { });
// console.error(err.response);
// toggleNotification({
// type: 'warning',
// message: { id: 'notification.error' },
// });
// }
// };
// useEffect(() => { try {
// if (!isLoadingForPermissions) { const {
// getDataRef.current(); data: { results, pagination },
// } } = await request(`/admin/users${search}`, { method: 'GET' });
// }, [search, isLoadingForPermissions]);
// useEffect(() => { dispatch({
// if (canRead) { type: 'GET_DATA_SUCCEEDED',
// toggleHeaderSearch({ id: 'Settings.permissions.menu.link.users.label' }); data: results,
// } pagination,
});
} catch (err) {
console.error(err.response);
toggleNotification({
type: 'warning',
message: { id: 'notification.error' },
});
}
};
// return () => { useEffect(() => {
// if (canRead) { if (!isLoadingForPermissions) {
// toggleHeaderSearch(); getDataRef.current();
// } }
// }; }, [search, isLoadingForPermissions]);
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [canRead]);
// const handleChangeDataToDelete = ids => { // const handleChangeDataToDelete = ids => {
// dispatch({ // dispatch({
// type: 'ON_CHANGE_DATA_TO_DELETE', // type: 'ON_CHANGE_DATA_TO_DELETE',
// dataToDelete: ids, // dataToDelete: ids,
// }); // });
// }; // };
// const handleChangeFilter = ({ filter, name, value }) => { // const handleChangeFilter = ({ filter, name, value }) => {
// const filterName = `${name}${filter}`; // const filterName = `${name}${filter}`;
// updateSearchParams(filterName, encodeURIComponent(value), true); // updateSearchParams(filterName, encodeURIComponent(value), true);
// }; // };
// const handleChangeFooterParams = ({ target: { name, value } }) => { // const handleChangeFooterParams = ({ target: { name, value } }) => {
// let paramName = name.split('.')[1].replace('_', ''); // let paramName = name.split('.')[1].replace('_', '');
// if (paramName === 'limit') { // if (paramName === 'limit') {
// paramName = 'pageSize'; // paramName = 'pageSize';
// } // }
// updateSearchParams(paramName, value); // updateSearchParams(paramName, value);
// }; // };
// const handleChangeSort = ({ target: { name, value } }) => { // const handleChangeSort = ({ target: { name, value } }) => {
// updateSearchParams(name, value); // updateSearchParams(name, value);
// }; // };
// const handleClickDeleteFilter = ({ target: { name } }) => { // const handleClickDeleteFilter = ({ target: { name } }) => {
// const currentSearch = new URLSearchParams(search); // const currentSearch = new URLSearchParams(search);
// currentSearch.delete(name); // currentSearch.delete(name);
// push({ search: currentSearch.toString() }); // push({ search: currentSearch.toString() });
// }; // };
// const handleClickDelete = useCallback(id => { // const handleClickDelete = useCallback(id => {
// handleToggleModal(); // handleToggleModal();
// dispatch({ // dispatch({
// type: 'ON_CHANGE_DATA_TO_DELETE', // type: 'ON_CHANGE_DATA_TO_DELETE',
// dataToDelete: [id], // dataToDelete: [id],
// }); // });
// }, []); // }, []);
// const handleCloseModal = () => { // const handleCloseModal = () => {
// // Refetch data // // Refetch data
// getDataRef.current(); // getDataRef.current();
// }; // };
// const handleClosedModalDelete = () => { // const handleClosedModalDelete = () => {
// if (shouldRefetchData) { // if (shouldRefetchData) {
// getDataRef.current(); // getDataRef.current();
// } else { // } else {
// // Empty the selected ids when the modal closes // // Empty the selected ids when the modal closes
// dispatch({ // dispatch({
// type: 'RESET_DATA_TO_DELETE', // type: 'RESET_DATA_TO_DELETE',
// }); // });
// // Reset the list's reducer dataToDelete state using a ref so we don't need an effect // // Reset the list's reducer dataToDelete state using a ref so we don't need an effect
// listRef.current.resetDataToDelete(); // listRef.current.resetDataToDelete();
// } // }
// }; // };
// const handleConfirmDeleteData = useCallback(async () => { // const handleConfirmDeleteData = useCallback(async () => {
// dispatch({ // dispatch({
// type: 'ON_DELETE_USERS', // type: 'ON_DELETE_USERS',
// }); // });
// let shouldDispatchSucceededAction = false; // let shouldDispatchSucceededAction = false;
// try { // try {
// await request('/admin/users/batch-delete', { // await request('/admin/users/batch-delete', {
// method: 'POST', // method: 'POST',
// body: { // body: {
// ids: dataToDelete, // ids: dataToDelete,
// }, // },
// }); // });
// shouldDispatchSucceededAction = true; // shouldDispatchSucceededAction = true;
// } catch (err) { // } catch (err) {
// const errorMessage = get(err, 'response.payload.data', 'An error occured'); // const errorMessage = get(err, 'response.payload.data', 'An error occured');
// toggleNotification({ // toggleNotification({
// type: 'warning', // type: 'warning',
// message: errorMessage, // message: errorMessage,
// }); // });
// } // }
// // Only dispatch the action once // // Only dispatch the action once
// if (shouldDispatchSucceededAction) { // if (shouldDispatchSucceededAction) {
// dispatch({ // dispatch({
// type: 'ON_DELETE_USERS_SUCCEEDED', // type: 'ON_DELETE_USERS_SUCCEEDED',
// }); // });
// } // }
// handleToggleModal(); // handleToggleModal();
// }, [dataToDelete, toggleNotification]); // }, [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 updateSearchParams = (name, value, shouldDeleteSearch = false) => {
// const currentSearch = new URLSearchParams(search); // const currentSearch = new URLSearchParams(search);
// // Update the currentSearch // // Update the currentSearch
// currentSearch.set(name, value); // currentSearch.set(name, value);
// if (shouldDeleteSearch) { // if (shouldDeleteSearch) {
// currentSearch.delete('_q'); // currentSearch.delete('_q');
// } // }
// push({ // push({
// search: currentSearch.toString(), // search: currentSearch.toString(),
// }); // });
// }; // };
// if (isLoadingForPermissions) { return (
// return <LoadingIndicatorPage />; <Main labelledBy="title">
// } <SettingsPageTitle name="Users" />
<HeaderLayout
id="title"
primaryAction={
canCreate ? (
<Button onClick={() => 'handleToggleModalForCreatingRole'} startIcon={<Mail />}>
{formatMessage({
id: 'Settings.permissions.users.create',
defaultMessage: 'Create new user',
})}
</Button>
) : (
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 ? <LoadingIndicatorPage /> : undefined}
</Main>
);
// return ( // return (
// <div> // <div>
// <SettingsPageTitle name="Users" /> // <SettingsPageTitle name="Users" />
// <Header // <Header
// canCreate={canCreate} // canCreate={canCreate}
// canDelete={canDelete} // canDelete={canDelete}
// canRead={canRead} // canRead={canRead}
// count={total} // count={total}
// dataToDelete={dataToDelete} // dataToDelete={dataToDelete}
// onClickAddUser={handleToggle} // onClickAddUser={handleToggle}
// onClickDelete={handleToggleModal} // onClickDelete={handleToggleModal}
// isLoading={isLoading} // isLoading={isLoading}
// /> // />
// {canRead && ( // {canRead && (
// <> // <>
// <BaselineAlignment top size="1px"> // <BaselineAlignment top size="1px">
// <Flex flexWrap="wrap"> // <Flex flexWrap="wrap">
// <SortPicker onChange={handleChangeSort} value={sort} /> // <SortPicker onChange={handleChangeSort} value={sort} />
// <Padded right size="10px" /> // <Padded right size="10px" />
// <BaselineAlignment bottom size="6px"> // <BaselineAlignment bottom size="6px">
// <FilterPicker onChange={handleChangeFilter} /> // <FilterPicker onChange={handleChangeFilter} />
// </BaselineAlignment> // </BaselineAlignment>
// <Padded right size="10px" /> // <Padded right size="10px" />
// {filters.map((filter, i) => ( // {filters.map((filter, i) => (
// // eslint-disable-next-line react/no-array-index-key // // eslint-disable-next-line react/no-array-index-key
// <Filter key={i} {...filter} onClick={handleClickDeleteFilter} /> // <Filter key={i} {...filter} onClick={handleClickDeleteFilter} />
// ))} // ))}
// </Flex> // </Flex>
// </BaselineAlignment> // </BaselineAlignment>
// <BaselineAlignment top size="8px" /> // <BaselineAlignment top size="8px" />
// <Padded top size="sm"> // <Padded top size="sm">
// <List // <List
// canDelete={canDelete} // canDelete={canDelete}
// canUpdate={canUpdate} // canUpdate={canUpdate}
// dataToDelete={dataToDelete} // dataToDelete={dataToDelete}
// isLoading={isLoading} // isLoading={isLoading}
// data={data} // data={data}
// onChange={handleChangeDataToDelete} // onChange={handleChangeDataToDelete}
// onClickDelete={handleClickDelete} // onClickDelete={handleClickDelete}
// searchParam={_q} // searchParam={_q}
// filters={filters} // filters={filters}
// ref={listRef} // ref={listRef}
// /> // />
// </Padded> // </Padded>
// <Footer // <Footer
// count={total} // count={total}
// onChange={handleChangeFooterParams} // onChange={handleChangeFooterParams}
// params={{ _limit: pageSize, _page: page }} // params={{ _limit: pageSize, _page: page }}
// /> // />
// </> // </>
// )} // )}
// <ModalForm isOpen={isModalOpened} onClosed={handleCloseModal} onToggle={handleToggle} /> // <ModalForm isOpen={isModalOpened} onClosed={handleCloseModal} onToggle={handleToggle} />
// <PopUpWarning // <PopUpWarning
// isOpen={isWarningDeleteAllOpened} // isOpen={isWarningDeleteAllOpened}
// onClosed={handleClosedModalDelete} // onClosed={handleClosedModalDelete}
// onConfirm={handleConfirmDeleteData} // onConfirm={handleConfirmDeleteData}
// toggleModal={handleToggleModal} // toggleModal={handleToggleModal}
// isConfirmButtonLoading={showModalConfirmButtonLoading} // isConfirmButtonLoading={showModalConfirmButtonLoading}
// /> // />
// </div> // </div>
// ); // );
// }; };
// export default ListPage; export default ListPage;
export default () => 'User - LV'; // export default () => 'User - LV';

View File

@ -109,14 +109,13 @@
"Settings.permissions.menu.link.roles.label": "Roles", "Settings.permissions.menu.link.roles.label": "Roles",
"Settings.permissions.menu.link.users.label": "Users", "Settings.permissions.menu.link.users.label": "Users",
"Settings.permissions.users.add-new": "Add new user", "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.email": "Email",
"Settings.permissions.users.form.firstname": "First name", "Settings.permissions.users.form.firstname": "First name",
"Settings.permissions.users.form.lastname": "Last name", "Settings.permissions.users.form.lastname": "Last name",
"Settings.permissions.users.form.sso": "Connect with SSO", "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.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.subtitle": "{number, plural, =0 {# users} one {# user } other {# users}} found",
"Settings.permissions.users.listview.header.description.singular": "{number} user found",
"Settings.permissions.users.listview.header.title": "Users", "Settings.permissions.users.listview.header.title": "Users",
"Settings.permissions.select-all-by-permission": "Select all {label} permissions", "Settings.permissions.select-all-by-permission": "Select all {label} permissions",
"Settings.permissions.select-by-permission": "Select {label} permission", "Settings.permissions.select-by-permission": "Select {label} permission",