mirror of
https://github.com/strapi/strapi.git
synced 2025-11-02 02:44:55 +00:00
coming soon page for marketplace - plugins - medialib
This commit is contained in:
ronronscelestes
parent
8245603a5d
commit
99bec3ca94
@ -80,12 +80,40 @@
|
||||
// };
|
||||
|
||||
// export default InstalledPluginsPage;
|
||||
|
||||
import React from 'react';
|
||||
import { CheckPagePermissions } from '@strapi/helper-plugin';
|
||||
import { CheckPagePermissions, NoContent } from '@strapi/helper-plugin';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
|
||||
import { Main } from '@strapi/parts/Main';
|
||||
import adminPermissions from '../../permissions';
|
||||
|
||||
export default () => (
|
||||
<CheckPagePermissions permissions={adminPermissions.marketplace.main}>
|
||||
InstalledPluginsPage
|
||||
</CheckPagePermissions>
|
||||
);
|
||||
const InstalledPluginsPage = () => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<CheckPagePermissions permissions={adminPermissions.marketplace.main}>
|
||||
<Layout>
|
||||
<Main>
|
||||
<HeaderLayout
|
||||
title={formatMessage({
|
||||
id: 'app.components.ListPluginsPage.helmet.title',
|
||||
defaultMessage: 'List plugins',
|
||||
})}
|
||||
/>
|
||||
<ContentLayout>
|
||||
<NoContent
|
||||
content={{
|
||||
id: 'coming soon',
|
||||
defaultMessage:
|
||||
'This content is currently under construction and will be back in a few weeks!',
|
||||
}}
|
||||
/>
|
||||
</ContentLayout>
|
||||
</Main>
|
||||
</Layout>
|
||||
</CheckPagePermissions>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstalledPluginsPage;
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
// useTracking,
|
||||
// useStrapiApp,
|
||||
CheckPagePermissions,
|
||||
NoContent,
|
||||
} from '@strapi/helper-plugin';
|
||||
// import { Header } from '@buffetjs/custom';
|
||||
// import { useIntl } from 'react-intl';
|
||||
@ -17,7 +18,6 @@ import {
|
||||
// import PluginCard from './PluginCard';
|
||||
// import Wrapper from './Wrapper';
|
||||
// import MarketplaceBanner from './MarketplaceBanner';
|
||||
import adminPermissions from '../../permissions';
|
||||
|
||||
// const MarketPlacePage = () => {
|
||||
// const toggleNotification = useNotification();
|
||||
@ -115,8 +115,37 @@ import adminPermissions from '../../permissions';
|
||||
// );
|
||||
// };
|
||||
|
||||
export default () => (
|
||||
<CheckPagePermissions permissions={adminPermissions.marketplace.main}>
|
||||
MarketplacePage
|
||||
</CheckPagePermissions>
|
||||
);
|
||||
import { useIntl } from 'react-intl';
|
||||
import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
|
||||
import { Main } from '@strapi/parts/Main';
|
||||
import adminPermissions from '../../permissions';
|
||||
|
||||
const MarketPlacePage = () => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<CheckPagePermissions permissions={adminPermissions.marketplace.main}>
|
||||
<Layout>
|
||||
<Main>
|
||||
<HeaderLayout
|
||||
title={formatMessage({
|
||||
id: 'app.components.InstallPluginPage.helmet',
|
||||
defaultMessage: 'Marketplace - Plugins',
|
||||
})}
|
||||
/>
|
||||
<ContentLayout>
|
||||
<NoContent
|
||||
content={{
|
||||
id: 'coming soon',
|
||||
defaultMessage:
|
||||
'This content is currently under construction and will be back in a few weeks!',
|
||||
}}
|
||||
/>
|
||||
</ContentLayout>
|
||||
</Main>
|
||||
</Layout>
|
||||
</CheckPagePermissions>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketPlacePage;
|
||||
|
||||
@ -1,146 +1,175 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
import React from // useState
|
||||
'react';
|
||||
// import { Redirect } from 'react-router-dom';
|
||||
import { useIntl } from 'react-intl';
|
||||
import styled from 'styled-components';
|
||||
// import styled from 'styled-components';
|
||||
import {
|
||||
LoadingIndicatorPage,
|
||||
useRBAC,
|
||||
useFocusWhenNavigate,
|
||||
NoPermissions,
|
||||
NoMedia,
|
||||
AnErrorOccurred,
|
||||
Search,
|
||||
// LoadingIndicatorPage,
|
||||
// useRBAC,
|
||||
// useFocusWhenNavigate,
|
||||
// NoPermissions,
|
||||
// NoMedia,
|
||||
// AnErrorOccurred,
|
||||
// Search,
|
||||
NoContent,
|
||||
} from '@strapi/helper-plugin';
|
||||
import { Layout, HeaderLayout, ContentLayout, ActionLayout } from '@strapi/parts/Layout';
|
||||
import {
|
||||
Layout,
|
||||
HeaderLayout,
|
||||
ContentLayout,
|
||||
// ActionLayout
|
||||
} from '@strapi/parts/Layout';
|
||||
import { Main } from '@strapi/parts/Main';
|
||||
import { Button } from '@strapi/parts/Button';
|
||||
import AddIcon from '@strapi/icons/AddIcon';
|
||||
import { Box } from '@strapi/parts/Box';
|
||||
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
|
||||
import { UploadAssetDialog } from '../../components/UploadAssetDialog/UploadAssetDialog';
|
||||
import { ListView } from './components/ListView';
|
||||
import { useAssets } from '../../hooks/useAssets';
|
||||
// import { Button } from '@strapi/parts/Button';
|
||||
// import AddIcon from '@strapi/icons/AddIcon';
|
||||
// import { Box } from '@strapi/parts/Box';
|
||||
// import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
|
||||
// import { UploadAssetDialog } from '../../components/UploadAssetDialog/UploadAssetDialog';
|
||||
// import { ListView } from './components/ListView';
|
||||
// import { useAssets } from '../../hooks/useAssets';
|
||||
import { getTrad } from '../../utils';
|
||||
import pluginPermissions from '../../permissions';
|
||||
import { Filters } from './components/Filters';
|
||||
// import pluginPermissions from '../../permissions';
|
||||
// import { Filters } from './components/Filters';
|
||||
|
||||
const BoxWithHeight = styled(Box)`
|
||||
height: ${32 / 16}rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
// const BoxWithHeight = styled(Box)`
|
||||
// height: ${32 / 16}rem;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// `;
|
||||
|
||||
const App = () => {
|
||||
const state = useRBAC(pluginPermissions);
|
||||
// const state = useRBAC(pluginPermissions);
|
||||
const { formatMessage } = useIntl();
|
||||
const { data, isLoading, error } = useAssets({
|
||||
skipWhen: !state.allowedActions.canMain,
|
||||
});
|
||||
// const { data, isLoading, error } = useAssets({
|
||||
// skipWhen: !state.allowedActions.canMain,
|
||||
// });
|
||||
|
||||
const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
|
||||
const toggleUploadAssetDialog = () => setShowUploadAssetDialog(prev => !prev);
|
||||
// const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
|
||||
// const toggleUploadAssetDialog = () => setShowUploadAssetDialog(prev => !prev);
|
||||
|
||||
useFocusWhenNavigate();
|
||||
// useFocusWhenNavigate();
|
||||
|
||||
const canRead = state.allowedActions.canMain;
|
||||
const loading = state.isLoading || isLoading;
|
||||
// const canRead = state.allowedActions.canMain;
|
||||
// const loading = state.isLoading || isLoading;
|
||||
|
||||
if (!loading && !canRead) {
|
||||
return <Redirect to="/" />;
|
||||
}
|
||||
// if (!loading && !canRead) {
|
||||
// return <Redirect to="/" />;
|
||||
// }
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Main aria-busy={loading}>
|
||||
<Main>
|
||||
<HeaderLayout
|
||||
title={formatMessage({
|
||||
id: getTrad('plugin.name'),
|
||||
defaultMessage: 'Media Library',
|
||||
})}
|
||||
subtitle={formatMessage(
|
||||
{
|
||||
id: getTrad(
|
||||
data?.length > 0
|
||||
? 'header.content.assets-multiple'
|
||||
: 'header.content.assets.assets-single'
|
||||
),
|
||||
defaultMessage: '0 assets',
|
||||
},
|
||||
{ number: data?.length || 0 }
|
||||
)}
|
||||
primaryAction={
|
||||
<Button startIcon={<AddIcon />} onClick={toggleUploadAssetDialog}>
|
||||
{formatMessage({
|
||||
id: getTrad('header.actions.upload-assets'),
|
||||
defaultMessage: 'Upload new assets',
|
||||
})}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<ActionLayout
|
||||
startActions={
|
||||
<>
|
||||
<BoxWithHeight
|
||||
paddingLeft={2}
|
||||
paddingRight={2}
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
borderColor="neutral200"
|
||||
>
|
||||
<BaseCheckbox
|
||||
aria-label={formatMessage({
|
||||
id: getTrad('bulk.select.label'),
|
||||
defaultMessage: 'Select all assets',
|
||||
})}
|
||||
/>
|
||||
</BoxWithHeight>
|
||||
<Filters />
|
||||
</>
|
||||
}
|
||||
endActions={
|
||||
<Search
|
||||
label={formatMessage({
|
||||
id: getTrad('search.label'),
|
||||
defaultMessage: 'Search for an asset',
|
||||
})}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<ContentLayout>
|
||||
{loading && <LoadingIndicatorPage />}
|
||||
{error && <AnErrorOccurred />}
|
||||
{!canRead && <NoPermissions />}
|
||||
{canRead && data && data.length === 0 && (
|
||||
<NoMedia
|
||||
action={
|
||||
<Button
|
||||
variant="secondary"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={toggleUploadAssetDialog}
|
||||
>
|
||||
{formatMessage({
|
||||
id: getTrad('modal.header.browse'),
|
||||
defaultMessage: 'Upload assets',
|
||||
})}
|
||||
</Button>
|
||||
}
|
||||
content={formatMessage({
|
||||
id: getTrad('list.assets.empty'),
|
||||
defaultMessage: 'Upload your first assets...',
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
{canRead && data && data.length > 0 && <ListView assets={data} />}
|
||||
<NoContent
|
||||
content={{
|
||||
id: 'coming soon',
|
||||
defaultMessage:
|
||||
'This content is currently under construction and will be back in a few weeks!',
|
||||
}}
|
||||
/>
|
||||
</ContentLayout>
|
||||
</Main>
|
||||
|
||||
{showUploadAssetDialog && (
|
||||
<UploadAssetDialog onClose={toggleUploadAssetDialog} onSuccess={() => {}} />
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <Layout>
|
||||
// <Main aria-busy={loading}>
|
||||
// <HeaderLayout
|
||||
// title={formatMessage({
|
||||
// id: getTrad('plugin.name'),
|
||||
// defaultMessage: 'Media Library',
|
||||
// })}
|
||||
// subtitle={formatMessage(
|
||||
// {
|
||||
// id: getTrad(
|
||||
// data?.length > 0
|
||||
// ? 'header.content.assets-multiple'
|
||||
// : 'header.content.assets.assets-single'
|
||||
// ),
|
||||
// defaultMessage: '0 assets',
|
||||
// },
|
||||
// { number: data?.length || 0 }
|
||||
// )}
|
||||
// primaryAction={
|
||||
// <Button startIcon={<AddIcon />} onClick={toggleUploadAssetDialog}>
|
||||
// {formatMessage({
|
||||
// id: getTrad('header.actions.upload-assets'),
|
||||
// defaultMessage: 'Upload new assets',
|
||||
// })}
|
||||
// </Button>
|
||||
// }
|
||||
// />
|
||||
|
||||
// <ActionLayout
|
||||
// startActions={
|
||||
// <>
|
||||
// <BoxWithHeight
|
||||
// paddingLeft={2}
|
||||
// paddingRight={2}
|
||||
// background="neutral0"
|
||||
// hasRadius
|
||||
// borderColor="neutral200"
|
||||
// >
|
||||
// <BaseCheckbox
|
||||
// aria-label={formatMessage({
|
||||
// id: getTrad('bulk.select.label'),
|
||||
// defaultMessage: 'Select all assets',
|
||||
// })}
|
||||
// />
|
||||
// </BoxWithHeight>
|
||||
// <Filters />
|
||||
// </>
|
||||
// }
|
||||
// endActions={
|
||||
// <Search
|
||||
// label={formatMessage({
|
||||
// id: getTrad('search.label'),
|
||||
// defaultMessage: 'Search for an asset',
|
||||
// })}
|
||||
// />
|
||||
// }
|
||||
// />
|
||||
|
||||
// <ContentLayout>
|
||||
// {loading && <LoadingIndicatorPage />}
|
||||
// {error && <AnErrorOccurred />}
|
||||
// {!canRead && <NoPermissions />}
|
||||
// {canRead && data && data.length === 0 && (
|
||||
// <NoMedia
|
||||
// action={
|
||||
// <Button
|
||||
// variant="secondary"
|
||||
// startIcon={<AddIcon />}
|
||||
// onClick={toggleUploadAssetDialog}
|
||||
// >
|
||||
// {formatMessage({
|
||||
// id: getTrad('modal.header.browse'),
|
||||
// defaultMessage: 'Upload assets',
|
||||
// })}
|
||||
// </Button>
|
||||
// }
|
||||
// content={formatMessage({
|
||||
// id: getTrad('list.assets.empty'),
|
||||
// defaultMessage: 'Upload your first assets...',
|
||||
// })}
|
||||
// />
|
||||
// )}
|
||||
// {canRead && data && data.length > 0 && <ListView assets={data} />}
|
||||
// </ContentLayout>
|
||||
// </Main>
|
||||
|
||||
// {showUploadAssetDialog && (
|
||||
// <UploadAssetDialog onClose={toggleUploadAssetDialog} onSuccess={() => {}} />
|
||||
// )}
|
||||
// </Layout>
|
||||
// );
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user