llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-24 08:20:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Put application's providers to 2 columns.

Browse Source
This commit is contained in:
Gucheng Wang 2021-12-12 19:06:40 +08:00
parent 1762d19787
commit e0b7286882
1 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/ApplicationListPage.js
View File

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, List, Popconfirm, Table, Tooltip} from 'antd'; import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from 'antd';
import {EditOutlined} from "@ant-design/icons"; import {EditOutlined} from "@ant-design/icons";
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
@ -171,32 +171,54 @@ class ApplicationListPage extends React.Component {
title: i18next.t("general:Providers"), title: i18next.t("general:Providers"),
dataIndex: 'providers', dataIndex: 'providers',
key: 'providers', key: 'providers',
width: '300px', // width: '600px',
render: (text, record, index) => { render: (text, record, index) => {
const providers = text; const providers = text;
if (providers.length === 0) { if (providers.length === 0) {
return "(empty)"; return "(empty)";
} }
const half = Math.floor((providers.length + 1) / 2);
const getList = (providers) => {
return (
<List
size="small"
locale={{emptyText: " "}}
dataSource={providers}
renderItem={(providerItem, i) => {
return (
<List.Item>
<div style={{display: "inline"}}>
<Tooltip placement="topLeft" title="Edit">
<Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/providers/${providerItem.name}`)} />
</Tooltip>
<Link to={`/providers/${providerItem.name}`}>
{providerItem.name}
</Link>
</div>
</List.Item>
)
}}
/>
)
}
return ( return (
<List <div>
size="small" <Row>
dataSource={providers} <Col span={12}>
renderItem={(providerItem, i) => { {
return ( getList(providers.slice(0, half))
<List.Item> }
<div style={{display: "inline"}}> </Col>
<Tooltip placement="topLeft" title="Edit"> <Col span={12}>
<Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/providers/${providerItem.name}`)} /> {
</Tooltip> getList(providers.slice(half))
<Link to={`/providers/${providerItem.name}`}> }
{providerItem.name} </Col>
</Link> </Row>
</div> </div>
</List.Item>
)
}}
/>
) )
}, },
}, },