+ {
+ this.state.group !== null ? this.renderGroup() : null
+ }
+
+
+
+ {this.state.mode === "add" ? : null}
+
+
+ );
+ }
+}
+
+export default GroupEditPage;
diff --git a/web/src/GroupList.js b/web/src/GroupList.js
new file mode 100644
index 00000000..2b331507
--- /dev/null
+++ b/web/src/GroupList.js
@@ -0,0 +1,284 @@
+// Copyright 2023 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, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as GroupBackend from "./backend/GroupBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class GroupListPage extends BaseListPage {
+ constructor(props) {
+ super(props);
+ this.state = {
+ ...this.state,
+ owner: Setting.isAdminUser(this.props.account) ? "" : this.props.account.owner,
+ groups: [],
+ };
+ }
+ UNSAFE_componentWillMount() {
+ super.UNSAFE_componentWillMount();
+ this.getGroups(this.state.owner);
+ }
+
+ getGroups(organizationName) {
+ GroupBackend.getGroups(organizationName)
+ .then((res) => {
+ if (res.status === "ok") {
+ this.setState({
+ groups: res.data,
+ });
+ }
+ });
+ }
+
+ newGroup() {
+ const randomName = Setting.getRandomName();
+ return {
+ owner: this.props.account.owner,
+ name: `group_${randomName}`,
+ createdTime: moment().format(),
+ updatedTime: moment().format(),
+ displayName: `New Group - ${randomName}`,
+ type: "Virtual",
+ parentGroupId: this.props.account.owner,
+ isTopGroup: true,
+ isEnabled: true,
+ };
+ }
+
+ addGroup() {
+ const newGroup = this.newGroup();
+ GroupBackend.addGroup(newGroup)
+ .then((res) => {
+ if (res.status === "ok") {
+ this.props.history.push({pathname: `/groups/${newGroup.owner}/${newGroup.name}`, mode: "add"});
+ Setting.showMessage("success", i18next.t("general:Successfully added"));
+ } else {
+ Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+ }
+ })
+ .catch(error => {
+ Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+ });
+ }
+
+ deleteGroup(i) {
+ GroupBackend.deleteGroup(this.state.data[i])
+ .then((res) => {
+ if (res.status === "ok") {
+ Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+ this.setState({
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
+ });
+ } else {
+ Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+ }
+ })
+ .catch(error => {
+ Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+ });
+ }
+
+ renderTable(groups) {
+ const columns = [
+ {
+ title: i18next.t("general:Name"),
+ dataIndex: "name",
+ key: "name",
+ width: "120px",
+ fixed: "left",
+ sorter: true,
+ ...this.getColumnSearchProps("name"),
+ render: (text, record, index) => {
+ return (
+