+ {
+ this.state.product !== null ? this.renderProduct() : null
+ }
+
+ );
+ }
+}
+
+export default ProductEditPage;
diff --git a/web/src/ProductListPage.js b/web/src/ProductListPage.js
new file mode 100644
index 00000000..c01564f2
--- /dev/null
+++ b/web/src/ProductListPage.js
@@ -0,0 +1,295 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// 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";
+import {Link} from "react-router-dom";
+import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from 'antd';
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as ProductBackend from "./backend/ProductBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import {EditOutlined} from "@ant-design/icons";
+
+class ProductListPage extends BaseListPage {
+ newProduct() {
+ const randomName = Setting.getRandomName();
+ return {
+ owner: "admin",
+ name: `product_${randomName}`,
+ createdTime: moment().format(),
+ displayName: `New Product - ${randomName}`,
+ image: "https://cdn.casdoor.com/logo/casdoor-logo_1185x256.png",
+ tag: "Casdoor Summit 2022",
+ currency: "USD",
+ price: 300,
+ quantity: 99,
+ sold: 10,
+ providers: [],
+ state: "Published",
+ }
+ }
+
+ addProduct() {
+ const newProduct = this.newProduct();
+ ProductBackend.addProduct(newProduct)
+ .then((res) => {
+ this.props.history.push({pathname: `/products/${newProduct.name}`, mode: "add"});
+ }
+ )
+ .catch(error => {
+ Setting.showMessage("error", `Product failed to add: ${error}`);
+ });
+ }
+
+ deleteProduct(i) {
+ ProductBackend.deleteProduct(this.state.data[i])
+ .then((res) => {
+ Setting.showMessage("success", `Product deleted successfully`);
+ this.setState({
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
+ });
+ }
+ )
+ .catch(error => {
+ Setting.showMessage("error", `Product failed to delete: ${error}`);
+ });
+ }
+
+ renderTable(products) {
+ const columns = [
+ {
+ title: i18next.t("general:Name"),
+ dataIndex: 'name',
+ key: 'name',
+ width: '140px',
+ fixed: 'left',
+ sorter: true,
+ ...this.getColumnSearchProps('name'),
+ render: (text, record, index) => {
+ return (
+
+ {text}
+
+ )
+ }
+ },
+ {
+ title: i18next.t("general:Created time"),
+ dataIndex: 'createdTime',
+ key: 'createdTime',
+ width: '160px',
+ sorter: true,
+ render: (text, record, index) => {
+ return Setting.getFormattedDate(text);
+ }
+ },
+ {
+ title: i18next.t("general:Display name"),
+ dataIndex: 'displayName',
+ key: 'displayName',
+ width: '170px',
+ sorter: true,
+ ...this.getColumnSearchProps('displayName'),
+ },
+ {
+ title: i18next.t("product:Image"),
+ dataIndex: 'image',
+ key: 'image',
+ width: '170px',
+ render: (text, record, index) => {
+ return (
+
+
+
+
+ {this.state.mode === "add" ? : null}
+
+ - {
+ return (
+
+
+ } size="small" onClick={() => Setting.goToLinkSoft(this, `/providers/${providerName}`)} />
+
+
+ {providerName}
+
+
+
+
+
+
+ )
+ },
+ },
+ {
+ title: i18next.t("general:Action"),
+ dataIndex: '',
+ key: 'op',
+ width: '170px',
+ fixed: (Setting.isMobile()) ? "false" : "right",
+ render: (text, record, index) => {
+ return (
+
+
+ this.deleteProduct(index)}
+ >
+
+
+
+ )
+ }
+ },
+ ];
+
+ const paginationProps = {
+ total: this.state.pagination.total,
+ showQuickJumper: true,
+ showSizeChanger: true,
+ showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
+ };
+
+ return (
+
+ (
+