2022-02-13 23:39:27 +08:00
|
|
|
// Copyright 2021 The Casdoor Authors. All Rights Reserved.
|
2021-12-19 10:21:05 +08:00
|
|
|
//
|
|
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
// you may not use this file except in compliance with the License.
|
|
|
|
// You may obtain a copy of the License at
|
|
|
|
//
|
|
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
//
|
|
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
// See the License for the specific language governing permissions and
|
|
|
|
// limitations under the License.
|
|
|
|
|
|
|
|
import React from "react";
|
2022-07-18 20:57:38 +08:00
|
|
|
import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
|
2022-07-10 15:45:55 +08:00
|
|
|
import {Button, Col, Input, Row, Select, Switch, Table, Tooltip} from "antd";
|
2021-12-19 10:21:05 +08:00
|
|
|
import * as Setting from "./Setting";
|
|
|
|
import i18next from "i18next";
|
|
|
|
|
2022-07-10 15:45:55 +08:00
|
|
|
const {Option} = Select;
|
2021-12-19 10:21:05 +08:00
|
|
|
|
|
|
|
class SyncerTableColumnTable extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
classes: props,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
updateTable(table) {
|
|
|
|
this.props.onUpdateTable(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
updateField(table, index, key, value) {
|
|
|
|
table[index][key] = value;
|
|
|
|
this.updateTable(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
addRow(table) {
|
|
|
|
let row = {name: `column${table.length}`, type: "string", values: []};
|
|
|
|
if (table === undefined) {
|
|
|
|
table = [];
|
|
|
|
}
|
|
|
|
table = Setting.addRow(table, row);
|
|
|
|
this.updateTable(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
deleteRow(table, i) {
|
|
|
|
table = Setting.deleteRow(table, i);
|
|
|
|
this.updateTable(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
upRow(table, i) {
|
|
|
|
table = Setting.swapRow(table, i - 1, i);
|
|
|
|
this.updateTable(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
downRow(table, i) {
|
|
|
|
table = Setting.swapRow(table, i, i + 1);
|
|
|
|
this.updateTable(table);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderTable(table) {
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: i18next.t("syncer:Column name"),
|
2022-07-10 15:45:55 +08:00
|
|
|
dataIndex: "name",
|
|
|
|
key: "name",
|
2021-12-19 10:21:05 +08:00
|
|
|
render: (text, record, index) => {
|
|
|
|
return (
|
|
|
|
<Input value={text} onChange={e => {
|
2022-07-10 15:45:55 +08:00
|
|
|
this.updateField(table, index, "name", e.target.value);
|
2021-12-19 10:21:05 +08:00
|
|
|
}} />
|
2022-07-10 15:45:55 +08:00
|
|
|
);
|
2021-12-19 10:21:05 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: i18next.t("syncer:Column type"),
|
2022-07-10 15:45:55 +08:00
|
|
|
dataIndex: "type",
|
|
|
|
key: "type",
|
2021-12-19 10:21:05 +08:00
|
|
|
render: (text, record, index) => {
|
|
|
|
return (
|
2022-07-10 15:45:55 +08:00
|
|
|
<Select virtual={false} style={{width: "100%"}} value={text} onChange={(value => {this.updateField(table, index, "type", value);})}>
|
2021-12-19 10:21:05 +08:00
|
|
|
{
|
2022-07-10 15:45:55 +08:00
|
|
|
["string", "integer", "boolean"]
|
2021-12-19 10:21:05 +08:00
|
|
|
.map((item, index) => <Option key={index} value={item}>{item}</Option>)
|
|
|
|
}
|
|
|
|
</Select>
|
2022-07-10 15:45:55 +08:00
|
|
|
);
|
2021-12-19 10:21:05 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: i18next.t("syncer:Casdoor column"),
|
2022-07-10 15:45:55 +08:00
|
|
|
dataIndex: "casdoorName",
|
|
|
|
key: "casdoorName",
|
2021-12-19 10:21:05 +08:00
|
|
|
render: (text, record, index) => {
|
|
|
|
return (
|
2022-07-10 15:45:55 +08:00
|
|
|
<Select virtual={false} style={{width: "100%"}} value={text} onChange={(value => {this.updateField(table, index, "casdoorName", value);})}>
|
2021-12-19 10:21:05 +08:00
|
|
|
{
|
2022-07-10 15:45:55 +08:00
|
|
|
["Name", "CreatedTime", "UpdatedTime", "Id", "Type", "Password", "PasswordSalt", "DisplayName", "FirstName", "LastName", "Avatar", "PermanentAvatar",
|
|
|
|
"Email", "EmailVerified", "Phone", "Location", "Address", "Affiliation", "Title", "IdCardType", "IdCard", "Homepage", "Bio", "Tag", "Region",
|
|
|
|
"Language", "Gender", "Birthday", "Education", "Score", "Ranking", "IsDefaultAvatar", "IsOnline", "IsAdmin", "IsGlobalAdmin", "IsForbidden", "IsDeleted", "CreatedIp"]
|
2021-12-19 10:21:05 +08:00
|
|
|
.map((item, index) => <Option key={index} value={item}>{item}</Option>)
|
|
|
|
}
|
|
|
|
</Select>
|
2022-07-10 15:45:55 +08:00
|
|
|
);
|
2021-12-19 10:21:05 +08:00
|
|
|
}
|
|
|
|
},
|
2021-12-19 23:32:42 +08:00
|
|
|
{
|
|
|
|
title: i18next.t("syncer:Is hashed"),
|
2022-07-10 15:45:55 +08:00
|
|
|
dataIndex: "isHashed",
|
|
|
|
key: "isHashed",
|
2021-12-19 23:32:42 +08:00
|
|
|
render: (text, record, index) => {
|
|
|
|
return (
|
|
|
|
<Switch checked={text} onChange={checked => {
|
2022-07-10 15:45:55 +08:00
|
|
|
this.updateField(table, index, "isHashed", checked);
|
2021-12-19 23:32:42 +08:00
|
|
|
}} />
|
2022-07-10 15:45:55 +08:00
|
|
|
);
|
2021-12-19 23:32:42 +08:00
|
|
|
}
|
|
|
|
},
|
2021-12-19 10:21:05 +08:00
|
|
|
{
|
|
|
|
title: i18next.t("general:Action"),
|
2022-07-10 15:45:55 +08:00
|
|
|
key: "action",
|
|
|
|
width: "100px",
|
2021-12-19 10:21:05 +08:00
|
|
|
render: (text, record, index) => {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Tooltip placement="bottomLeft" title={i18next.t("general:Up")}>
|
|
|
|
<Button style={{marginRight: "5px"}} disabled={index === 0} icon={<UpOutlined />} size="small" onClick={() => this.upRow(table, index)} />
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip placement="topLeft" title={i18next.t("general:Down")}>
|
|
|
|
<Button style={{marginRight: "5px"}} disabled={index === table.length - 1} icon={<DownOutlined />} size="small" onClick={() => this.downRow(table, index)} />
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip placement="topLeft" title={i18next.t("general:Delete")}>
|
|
|
|
<Button icon={<DeleteOutlined />} size="small" onClick={() => this.deleteRow(table, index)} />
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Table rowKey="index" columns={columns} dataSource={table} size="middle" bordered pagination={false}
|
2022-07-10 15:45:55 +08:00
|
|
|
title={() => (
|
|
|
|
<div>
|
|
|
|
{this.props.title}
|
|
|
|
<Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
|
|
|
|
</div>
|
|
|
|
)}
|
2021-12-19 10:21:05 +08:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div>
|
2022-07-10 15:45:55 +08:00
|
|
|
<Row style={{marginTop: "20px"}} >
|
2021-12-19 10:21:05 +08:00
|
|
|
<Col span={24}>
|
|
|
|
{
|
|
|
|
this.renderTable(this.props.table)
|
|
|
|
}
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
2022-07-10 15:45:55 +08:00
|
|
|
);
|
2021-12-19 10:21:05 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SyncerTableColumnTable;
|