yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-01 18:33:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

ListView

Browse Source
This commit is contained in:
Virginie Ky 2019-12-12 17:11:28 +01:00
parent e3ced837a0
commit 4998ab15ce
14 changed files with 238 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js
View File

@ -102,6 +102,11 @@ function LeftMenuLinkContainer({ plugins, ...rest }) {
label: messages.installNewPlugin.id,
destination: '/marketplace',
},
{
icon: 'cog',
label: messages.settings.id,
destination: '/settings/webhooks',
},
];
return (

4
packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/messages.json
View File

@ -22,5 +22,9 @@
"noPluginsInstalled": {
"id": "app.components.LeftMenuLinkContainer.noPluginsInstalled",
"defaultMessage": "No plugins installed yet"
},
"settings": {
"id": "app.components.LeftMenuLinkContainer.settings",
"defaultMessage": "Settings"
}
}

4
packages/strapi-admin/admin/src/containers/Admin/index.js
View File

@ -32,6 +32,7 @@ import HomePage from '../HomePage';
import Marketplace from '../Marketplace';
import NotFoundPage from '../NotFoundPage';
import Onboarding from '../Onboarding';
import SettingsPage from '../SettingsPage';
import PluginDispatcher from '../PluginDispatcher';
import {
disableGlobalOverlayBlocker,
@ -115,6 +116,8 @@ export class Admin extends React.Component {
renderMarketPlace = props => <Marketplace {...props} {...this.props} />;
renderSettings = props => <SettingsPage {...props} {...this.props} />;
renderPluginDispatcher = props => {
// NOTE: Send the needed props instead of everything...
@ -185,6 +188,7 @@ export class Admin extends React.Component {
render={this.renderMarketPlace}
exact
/>
<Route path="/settings" render={this.renderSettings} />
<Route path="/configuration" component={ComingSoonPage} exact />
<Route key="7" path="" component={NotFoundPage} />
<Route key="8" path="404" component={NotFoundPage} />

20
packages/strapi-admin/admin/src/containers/SettingsPage/Wrapper.js Normal file
View File

@ -0,0 +1,20 @@
/**
*
* Wrapper
*
*/
import styled from 'styled-components';
const Wrapper = styled.div`
.container {
margin: 0;
padding-left: 0;
padding-right: 0;
.col-md-9 {
padding-top: 18px;
}
}
`;
export default Wrapper;

59
packages/strapi-admin/admin/src/containers/SettingsPage/index.js Normal file
View File

@ -0,0 +1,59 @@
/**
*
* SettingsPage
*
*/
import React from 'react';
import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
import { LeftMenu, LeftMenuList } from 'strapi-helper-plugin';
import Webhooks from '../Webhooks';
import Wrapper from './Wrapper';
function SettingsPage() {
let { path } = useRouteMatch();
const renderSettings = props => <Webhooks {...props} />;
const menuItems = [
{
name: 'General',
searchable: false,
links: [
{
title: 'webhooks',
to: '/settings/webhooks',
name: 'webhooks',
},
],
},
];
return (
<Wrapper>
<div className="container">
<div className="row">
<div className="col-md-3">
<LeftMenu>
{menuItems.map(item => {
return <LeftMenuList {...item} key={item.name} />;
})}
</LeftMenu>
</div>
<div className="col-md-9">
<Switch>
<Redirect exact from={`${path}`} to={`${path}/webhooks`} />
<Route
exact
path={`${path}/webhooks`}
render={renderSettings}
></Route>
</Switch>
</div>
</div>
</div>
</Wrapper>
);
}
export default SettingsPage;

18
packages/strapi-admin/admin/src/containers/Webhooks/EditView.js Normal file
View File

@ -0,0 +1,18 @@
/**
*
* EditView
*
*/
import React from 'react';
function EditView() {
console.log('hellooo');
return (
<div>
<p>Edit</p>
</div>
);
}
export default EditView;

43
packages/strapi-admin/admin/src/containers/Webhooks/ListView.js Normal file
View File

@ -0,0 +1,43 @@
/**
*
* ListView
*
*/
import React from 'react';
import { Header } from '@buffetjs/custom';
import { useGlobalContext } from 'strapi-helper-plugin';
function ListView() {
const { formatMessage } = useGlobalContext();
const actions = [
{
title: formatMessage({ id: `Settings.webhook.list.button` }),
onClick: () => {},
color: 'primary',
type: 'button',
icon: true,
style: {
paddingLeft: 15,
paddingRight: 15,
},
},
];
const headerProps = {
title: {
label: formatMessage({ id: `Settings.webhook.list.title` }),
},
content: formatMessage({ id: `Settings.webhook.list.description` }),
actions: actions,
};
return (
<div>
<Header {...headerProps} />
</div>
);
}
export default ListView;

28
packages/strapi-admin/admin/src/containers/Webhooks/index.js Normal file
View File

@ -0,0 +1,28 @@
/**
*
* Webhooks
*
*/
import React from 'react';
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import ListView from './ListView';
import EditView from './EditView';
function Webhooks() {
let { path } = useRouteMatch();
return (
<Switch>
<Route exact path={`${path}`}>
<ListView />
</Route>
<Route path={`${path}/:id`}>
Edit <EditView />
</Route>
</Switch>
);
}
export default Webhooks;

4
packages/strapi-admin/admin/src/translations/en.json
View File

@ -77,6 +77,7 @@
"app.components.LeftMenuLinkContainer.listPlugins": "Plugins",
"app.components.LeftMenuLinkContainer.noPluginsInstalled": "No plugins installed yet",
"app.components.LeftMenuLinkContainer.plugins": "Plugins",
"app.components.LeftMenuLinkContainer.settings": "Settings",
"app.components.ListPluginsPage.description": "List of the installed plugins in the project.",
"app.components.ListPluginsPage.helmet.title": "List plugins",
"app.components.ListPluginsPage.title": "Plugins",
@ -216,6 +217,9 @@
"Auth.header.register.description": "To finish setup and secure your app, please create the first user (root admin) by entering the necessary information below.",
"Auth.link.forgot-password": "Forgot your password?",
"Auth.link.ready": "Ready to sign in?",
"Settings.webhook.list.title": "Webhooks",
"Settings.webhook.list.description": "Get POST changes notifications.",
"Settings.webhook.list.button": "Add new webhook",
"app.containers.App.notification.error.init": "An error occured while requesting the API",
"components.Input.error.password.noMatch": "Passwords do not match",
"form.button.done": "Done",

4
packages/strapi-admin/admin/src/translations/fr.json
View File

@ -78,6 +78,7 @@
"app.components.LeftMenuLinkContainer.listPlugins": "Plugins",
"app.components.LeftMenuLinkContainer.noPluginsInstalled": "Aucun plugin installé",
"app.components.LeftMenuLinkContainer.plugins": "Plugins",
"app.components.LeftMenuLinkContainer.settings": "Paramètres",
"app.components.ListPluginsPage.description": "Liste des plugins installés dans le projet.",
"app.components.ListPluginsPage.helmet.title": "List plugins",
"app.components.Logout.profile": "Profil",
@ -216,6 +217,9 @@
"Auth.header.register.description": "Pour finir le setup et sécuriser votre app, merci de créer le premier utilisateur (root admin) en remplissant le formulaire suivant.",
"Auth.link.forgot-password": "Mot de passe oublié ?",
"Auth.link.ready": "Prêt à vous connecter ?",
"Settings.webhook.list.title": "Webhooks",
"Settings.webhook.list.description": "Get POST changes notifications.",
"Settings.webhook.list.button": "Ajouter nouveau webhook",
"app.containers.App.notification.error.init": "Une erreur est survenue en requêtant l'API",
"components.Input.error.password.noMatch": "Le mot de passe ne correspond pas",
"form.button.done": "Terminer",

24
packages/strapi-helper-plugin/lib/src/components/LeftMenu/index.js Normal file
View File

@ -0,0 +1,24 @@
/**
*
* LeftMenu
*
*/
import styled from 'styled-components';
import colors from '../../assets/styles/colors';
import sizes from '../../assets/styles/sizes';
const LeftMenu = styled.div`
width: 100%;
min-height: calc(100vh - ${sizes.header.height});
background-color: ${colors.leftMenu.mediumGrey};
padding-top: 3.4rem;
padding-left: 2rem;
padding-right: 2rem;
> div {
margin-bottom: 29px;
}
`;
export default LeftMenu;

35
packages/strapi-helper-plugin/lib/src/components/LeftMenuList/index.js
View File

@ -12,7 +12,7 @@ import Search from './Search';
import LeftMenuLink from '../LeftMenuLink';
import LeftMenuSubList from '../LeftMenuSubList';
function LeftMenuList({ customLink, links, title }) {
function LeftMenuList({ customLink, links, name, title }) {
const [search, setSearch] = useState('');
const [showSearch, setShowSearch] = useState(false);
const ref = createRef();
@ -66,8 +66,16 @@ function LeftMenuList({ customLink, links, title }) {
return matchSorter(links, search, { keys: ['title'] });
};
const getTitle = () =>
getCount() > 1 ? `${title.id}plural` : `${title.id}singular`;
const getTitle = () => {
if (title) {
return getCount() > 1 ? (
<FormattedMessage id={`${title.id}plural`} />
) : (
<FormattedMessage id={`${title.id}singular`} />
);
}
return <span>{name}</span>;
};
const renderCompo = (link, i) => {
const { links, name, title, ...rest } = link;
@ -99,15 +107,19 @@ function LeftMenuList({ customLink, links, title }) {
{!showSearch ? (
<div className="title-wrapper">
<h3>
<FormattedMessage id={getTitle()} />
{getTitle()}
&nbsp;&nbsp;
<span className="count-info" datadescr={getCount()}>
{getCount()}
</span>
{!!title && (
<span className="count-info" datadescr={getCount()}>
{getCount()}
</span>
)}
</h3>
<button onClick={toggleSearch}>
<FontAwesomeIcon icon="search" />
</button>
{!!title && (
<button onClick={toggleSearch}>
<FontAwesomeIcon icon="search" />
</button>
)}
</div>
) : (
<div className="search-wrapper">
@ -138,7 +150,7 @@ function LeftMenuList({ customLink, links, title }) {
LeftMenuList.defaultProps = {
customLink: null,
links: [],
title: 'models',
title: null,
};
LeftMenuList.propTypes = {
@ -150,6 +162,7 @@ LeftMenuList.propTypes = {
}),
}),
links: PropTypes.array,
name: PropTypes.string.isRequired,
title: PropTypes.string,
};

107
packages/strapi-helper-plugin/lib/src/components/StyledLeftMenu/index.js
View File

@ -1,107 +0,0 @@
/**
*
* StyledLeftMenu
*
*/
import styled from 'styled-components';
import colors from '../../assets/styles/colors';
import sizes from '../../assets/styles/sizes';
const StyledLeftMenu = styled.div`
width: 100%;
min-height: calc(100vh - ${sizes.header.height});
background-color: ${colors.leftMenu.mediumGrey};
padding-top: 0.5rem;
padding-left: 2rem;
padding-right: 2rem;
h3 {
margin: 0;
padding-left: 1rem;
line-height: 1.3rem;
color: #919bae;
letter-spacing: 0.1rem;
font-family: Lato;
font-size: 1.1rem;
font-weight: bold;
text-transform: uppercase;
}
section {
margin-top: 3.2rem;
font-size: 1.3rem;
ul.menu-list {
margin-top: 1.1rem;
padding: 0;
font-size: 1.3rem;
list-style-type: none;
li {
margin-bottom: 0.2rem;
}
button,
a {
padding: 0.9rem 1rem;
width: 100%;
outline: none;
p {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6rem;
padding-left: ${sizes.margin * 2.2}px;
margin-bottom: 0;
span {
font-style: italic;
&:first-of-type {
text-transform: capitalize;
font-style: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 5px;
}
}
i,
svg {
position: absolute;
left: 0;
margin-right: 1rem;
}
}
}
button {
i,
svg {
top: calc(50% - ${sizes.margin * 0.6}px);
}
}
a {
display: block;
text-decoration: none;
p {
color: ${colors.leftMenu.black};
}
i,
svg {
font-size: 11px;
top: calc(50% - ${sizes.margin * 0.5}px);
color: ${colors.leftMenu.grey};
}
&.active {
background-color: ${colors.leftMenu.lightGrey};
font-weight: 700;
i,
svg {
color: ${colors.leftMenu.black};
}
}
}
}
}
`;
export default StyledLeftMenu;

1
packages/strapi-helper-plugin/lib/src/index.js
View File

@ -73,6 +73,7 @@ export {
} from './components/InputToggleWithErrors';
export { default as Label } from './components/Label';
export { default as LeftMenu } from './components/LeftMenu';
export { default as LeftMenuList } from './components/LeftMenuList';
export { default as LiLink } from './components/LiLink';
export { default as List } from './components/List';