29673204013

Committed 19 Jul 2026 04:21AM UTC coverage: 90.37% (-0.04%) from 90.411%

Build # 29673204013

Build Type

Pull #8068

github

Committed by

web-flow

Commit Message

Merge 4d12c52ca into 59d4c37c6

Pull Request Pull Request #8068: Groups tab tables refactor

Coverage Stats

1219 of 2484 branches covered (49.07%)

Branch coverage included in aggregate %.

38 of 78 new or added lines in 3 files covered. (48.72%)

18 existing lines in 1 file now uncovered.

47355 of 51266 relevant lines covered (92.37%)

127.93 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

51.17

/app/javascript/Components/groups_manager.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

import consumer from "../channels/consumer";
import {renderFlashMessages} from "../common/flash";
import ExtensionModal from "./Modals/extension_modal";
import {
  caseSensitiveStringFilterMethod,
  durationSort,
  getTimeExtension,
} from "./Helpers/table_helpers";
import AutoMatchModal from "./Modals/auto_match_modal";
import CreateGroupModal from "./Modals/create_group_modal";
import RenameGroupModal from "./Modals/rename_group_modal";
import AssignmentGroupUseModal from "./Modals/assignment_group_use_modal";

import Table from "./table/table";
import {createColumnHelper} from "@tanstack/react-table";

class GroupsManager extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groups: [],
      students: [],
      show_hidden: false,
      hidden_students_count: 0,
      inactive_groups_count: 0,
      renameGroupingId: null,
      renameGroupName: "",
      show_modal: false,
      selected_extension_data: {},
      updating_extension: false,
      isAutoMatchModalOpen: false,
      isAssignmentGroupUseModalOpen: false,
      isCreateGroupModalOpen: false,
      isRenameGroupDialogOpen: false,
      examTemplates: [],
      loading: true,
      cloneAssignments: [],
    };
  }

  componentDidMount() {
    this.fetchData();
    this.createChannelSubscriptions();
  }

  fetchData = () => {
    fetch(Routes.course_assignment_groups_path(this.props.course_id, this.props.assignment_id), {
      headers: {
        Accept: "application/json",
      },
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
      })
      .then(res => {
        this.studentsTable.resetSelection();
        this.groupsTable.resetSelection();
        var inactive_groups_count = 0;
        res.groups.forEach(group => {
          if (group.members.length && group.members.every(member => member[2])) {
            group.inactive = true;
            inactive_groups_count += 1;
          } else {
            group.inactive = false;
          }
          group.members.forEach(member => {
            member.display_label = `(${member[1]}${
              member[2] ? `, ${I18n.t("activerecord.attributes.user.hidden")}` : ""
            })`;
          });
        });
        this.setState({
          groups: res.groups,
          students: res.students || [],
          loading: false,
          hidden_students_count: res.students.filter(student => student.hidden).length,
          inactive_groups_count: inactive_groups_count,
          examTemplates: res.exam_templates,
          cloneAssignments: res.clone_assignments || [],
        });
      });
  };

  updateShowHidden = event => {
    let show_hidden = event.target.checked;
    this.setState({show_hidden});
  };

  createGroup = () => {
    if (this.props.group_name_autogenerated) {
      fetch(
        Routes.new_course_assignment_group_path(this.props.course_id, this.props.assignment_id)
      ).then(this.fetchData);
    } else {
      this.setState({isCreateGroupModalOpen: true});
    }
  };

  createAllGroups = () => {
    $.get({
      url: Routes.create_groups_when_students_work_alone_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
    });
  };

  createChannelSubscriptions = () => {
    consumer.subscriptions.create(
      {
        channel: "GroupsChannel",
        course_id: this.props.course_id,
        assignment_id: this.props.assignment_id,
      },
      {
        connected: () => {},
        disconnected: () => {},
        received: data => {
          if (data["status"] != null) {
            renderFlashMessages(generateMessage(data));
          }
          if (data["update_table"] != null) {
            this.fetchData();
          }
        },
      }
    );
  };

  deleteGroups = () => {
    let groupings = this.groupsTable.getSelectedRows();
    if (groupings.length === 0) {
      alert(I18n.t("groups.select_a_group"));
      return;
    } else if (!confirm(I18n.t("groups.delete_confirm"))) {
      return;
    }

    $.ajax(
      Routes.remove_group_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      {
        method: "DELETE",
        data: {
          // TODO: change param to grouping_ids
          grouping_id: groupings,
        },
      }
    ).then(this.fetchData);
  };

  renameGroup = (grouping_id, group_name) => {
    this.setState({
      isRenameGroupDialogOpen: true,
      renameGroupingId: grouping_id,
      renameGroupName: group_name,
    });
  };

  handleRenameGroupDialog = newGroupName => {
    $.post({
      url: Routes.rename_group_course_group_path(this.props.course_id, this.state.renameGroupingId),
      data: {
        new_groupname: newGroupName,
      },
    }).then(() => {
      this.setState({isRenameGroupDialogOpen: false});
      this.fetchData();
    });
  };

  handleCloseRenameGroupDialog = () => {
    this.setState({
      isRenameGroupDialogOpen: false,
      renameGroupingId: null,
      renameGroupName: "",
    });
  };

  unassign = (grouping_id, student_user_name) => {
    $.post({
      url: Routes.global_actions_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        global_actions: "unassign",
        groupings: [grouping_id],
        students: [], // Not necessary for 'unassign'
        students_to_remove: [student_user_name],
      },
    }).then(this.fetchData);
  };

  assign = () => {
    if (this.studentsTable.getSelectedRows().length === 0) {
      alert(I18n.t("groups.select_a_student"));
      return;
    } else if (this.groupsTable.getSelectedRows().length === 0) {
      alert(I18n.t("groups.select_a_group"));
      return;
    } else if (this.groupsTable.getSelectedRows().length > 1) {
      alert(I18n.t("groups.select_only_one_group"));
      return;
    }

    let students = this.studentsTable.getSelectedRows();
    let grouping_id = this.groupsTable.getSelectedRows()[0];

    $.post({
      url: Routes.global_actions_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        global_actions: "assign",
        groupings: [grouping_id],
        students: students,
      },
    }).then(this.fetchData);
  };

  handleCloseCreateGroupModal = () => {
    this.setState({
      isCreateGroupModalOpen: false,
    });
  };

  handleSubmitCreateGroup = groupName => {
    $.get({
      url: Routes.new_course_assignment_group_path(this.props.course_id, this.props.assignment_id),
      data: {new_group_name: groupName},
    }).then(() => {
      this.setState({isCreateGroupModalOpen: false});
      this.fetchData();
    });
  };

  handleShowAssignmentGroupUseModal = () => {
    this.setState({
      isAssignmentGroupUseModalOpen: true,
    });
  };

  handleCloseAssignmentGroupUseModal = () => {
    this.setState({
      isAssignmentGroupUseModalOpen: false,
    });
  };

  handleSubmitAssignmentGroupUseModal = selectedAssignmentId => {
    $.post({
      url: Routes.use_another_assignment_groups_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        clone_assignment_id: selectedAssignmentId,
      },
    }).then(() => {
      this.setState({isAssignmentGroupUseModalOpen: false});
      this.fetchData();
    });
  };

  handleShowAutoMatchModal = () => {
    if (this.groupsTable.getSelectedRows().length === 0) {
      alert(I18n.t("groups.select_a_group"));
      return;
    }

    this.setState({
      isAutoMatchModalOpen: true,
    });
  };

  handleCloseAutoMatchModal = () => {
    this.setState({
      isAutoMatchModalOpen: false,
    });
  };

  autoMatch = examTemplate => {
    $.post({
      url: Routes.auto_match_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        groupings: this.groupsTable.getSelectedRows(),
        exam_template_id: examTemplate,
      },
    });
  };

  validate = grouping_id => {
    if (!confirm(I18n.t("groups.validate_confirm"))) {
      return;
    }

    const url = Routes.valid_grouping_course_assignment_groups_path(
      this.props.course_id,
      this.props.assignment_id,
      {grouping_id: grouping_id}
    );

    fetch(url).then(this.fetchData);
  };

  invalidate = grouping_id => {
    if (!confirm(I18n.t("groups.invalidate_confirm"))) {
      return;
    }

    const url = Routes.invalid_grouping_course_assignment_groups_path(
      this.props.course_id,
      this.props.assignment_id,
      {grouping_id: grouping_id}
    );
    fetch(url).then(this.fetchData);
  };

  handleShowModal = (extension_data, updating) => {
    this.setState({
      show_modal: true,
      selected_extension_data: extension_data,
      updating_extension: updating,
    });
  };

  handleCloseModal = updated => {
    this.setState({show_modal: false}, () => {
      if (updated) {
        this.fetchData();
      }
    });
  };

  extraModalInfo = () => {
    // Render extra modal info for timed assignments only
    if (this.props.timed) {
      return I18n.t("assignments.timed.modal_current_duration", {
        duration: this.props.current_duration,
      });
    }
  };

  render() {
    const times = !!this.props.timed ? ["hours", "minutes"] : ["weeks", "days", "hours", "minutes"];
    const title = !!this.props.timed
      ? I18n.t("groups.duration_extension")
      : I18n.t("groups.due_date_extension");
    return (
      <div>
        <GroupsActionBox
          assign={this.assign}
          can_create_all_groups={this.props.can_create_all_groups}
          createAllGroups={this.createAllGroups}
          createGroup={this.createGroup}
          deleteGroups={this.deleteGroups}
          handleShowAutoMatchModal={this.handleShowAutoMatchModal}
          handleShowAssignmentGroupUseModal={this.handleShowAssignmentGroupUseModal}
          hiddenStudentsCount={this.state.loading ? null : this.state.hidden_students_count}
          hiddenGroupsCount={this.state.loading ? null : this.state.inactive_groups_count}
          scanned_exam={this.props.scanned_exam}
          showHidden={this.state.show_hidden}
          updateShowHidden={this.updateShowHidden}
          vcs_submit={this.props.vcs_submit}
        />
        <div className="mapping-tables">
          <div className="mapping-table">
            <StudentsTable
              ref={r => (this.studentsTable = r)}
              students={this.state.students}
              loading={this.state.loading}
              showHidden={this.state.show_hidden}
            />
          </div>
          <div className="mapping-table">
            <GroupsTable
              ref={r => (this.groupsTable = r)}
              course_id={this.props.course_id}
              groups={this.state.groups}
              loading={this.state.loading}
              unassign={this.unassign}
              renameGroup={this.renameGroup}
              groupMin={this.props.groupMin}
              validate={this.validate}
              invalidate={this.invalidate}
              scanned_exam={this.props.scanned_exam}
              assignment_id={this.props.assignment_id}
              onExtensionModal={this.handleShowModal}
              extensionColumnHeader={title}
              times={times}
              showInactive={this.state.show_hidden}
            />
          </div>
        </div>
        <ExtensionModal
          course_id={this.props.course_id}
          isOpen={this.state.show_modal}
          onRequestClose={this.handleCloseModal}
          weeks={this.state.selected_extension_data.weeks}
          days={this.state.selected_extension_data.days}
          hours={this.state.selected_extension_data.hours}
          minutes={this.state.selected_extension_data.minutes}
          note={this.state.selected_extension_data.note}
          penalty={this.state.selected_extension_data.apply_penalty}
          grouping_id={this.state.selected_extension_data.grouping_id}
          extension_id={this.state.selected_extension_data.id}
          updating={this.state.updating_extension}
          times={times}
          title={title}
          extra_info={this.extraModalInfo()}
          key={this.state.selected_extension_data.id} // this causes the ExtensionModal to be recreated if this value changes
        />
        <AutoMatchModal
          isOpen={this.state.isAutoMatchModalOpen}
          onRequestClose={this.handleCloseAutoMatchModal}
          examTemplates={this.state.examTemplates}
          onSubmit={this.autoMatch}
        />
        <CreateGroupModal
          isOpen={this.state.isCreateGroupModalOpen}
          onRequestClose={this.handleCloseCreateGroupModal}
          onSubmit={this.handleSubmitCreateGroup}
        />
        <RenameGroupModal
          isOpen={this.state.isRenameGroupDialogOpen}
          onRequestClose={this.handleCloseRenameGroupDialog}
          onSubmit={this.handleRenameGroupDialog}
          initialGroupName={this.state.renameGroupName}
        />
        <AssignmentGroupUseModal
          isOpen={this.state.isAssignmentGroupUseModalOpen}
          onRequestClose={this.handleCloseAssignmentGroupUseModal}
          onSubmit={this.handleSubmitAssignmentGroupUseModal}
          cloneAssignments={this.state.cloneAssignments}
        />
      </div>
    );
  }
}

const columnHelper = createColumnHelper();
class GroupsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columnFilters: [{id: "inactive", value: false}],
      rowSelection: {},
      columns: [
        columnHelper.accessor("inactive", {
          id: "inactive",
          size: 0,
          meta: {
            className: "rt-hidden",
            headerClassName: "rt-hidden",
          },
          enableResizing: false,
        }),
        columnHelper.accessor("_id", {
          id: "_id",
        }),
        columnHelper.accessor("group_name", {
          header: I18n.t("activerecord.models.group.one"),
          id: "group_name",
          cell: props => {
            return (
              <span>
                <span>{props.getValue()}</span>
                <a
                  href="#"
                  onClick={() => this.props.renameGroup(props.row.original._id, props.getValue())}
                  title={I18n.t("groups.rename_group")}
                >
                  <FontAwesomeIcon icon="fa-solid fa-pen" className="icon-right" />
                </a>
              </span>
            );
          },
          meta: {
            filterVariant: "case-sensitive-text",
          },
          filterFn: caseSensitiveStringFilterMethod,
        }),
        columnHelper.accessor("members", {
          header: I18n.t("activerecord.attributes.group.student_memberships"),
          cell: props => {
            if (props.getValue().length > 0 || !this.props.scanned_exam) {
              return props.getValue().map(member => {
                let status;
                if (member[1] === "pending") {
                  status = <strong>({member[1]})</strong>;
                } else {
                  status = member.display_label;
                }
                return (
                  <div key={`${props.row.original._id}-${member[0]}`}>
                    {member[0]} {status}
                    <a
                      href="#"
                      onClick={() => this.props.unassign(props.row.original._id, member[0])}
                      title={I18n.t("delete")}
                    >
                      <FontAwesomeIcon icon="fa-solid fa-trash" className="icon-right" />
                    </a>
                  </div>
                );
              });
            } else {
              // Link to assigning a student to this scanned exam
              const assign_url = Routes.assign_scans_course_assignment_groups_path(
                this.props.course_id,
                this.props.assignment_id,
                {grouping_id: props.row.original._id}
              );
              return <a href={assign_url}>{I18n.t("exam_templates.assign_scans.title")}</a>;
            }
          },
          filterFn: (row, columnId, filterValue) => {
            if (filterValue) {
              return row.original.members.some(member => member[0].includes(filterValue));
            } else {
              return true;
            }
          },
          enableSorting: false,
        }),
        columnHelper.accessor(
          row =>
            row.instructor_approved || row.members.length >= this.props.groupMin
              ? I18n.t("groups.is_valid")
              : I18n.t("groups.is_not_valid"),
          {
            id: "valid",
            header: I18n.t("groups.valid"),
            cell: props => {
              let isValid =
                props.row.original.instructor_approved ||
                props.row.original.members.length >= this.props.groupMin;
              if (isValid) {
                return (
                  <a
                    href="#"
                    title={I18n.t("groups.is_valid")}
                    onClick={() => this.props.invalidate(props.row.original._id)}
                  >
                    ✔
                  </a>
                );
              } else {
                return (
                  <a
                    href="#"
                    title={I18n.t("groups.is_not_valid")}
                    onClick={() => this.props.validate(props.row.original._id)}
                  >
                    <FontAwesomeIcon icon="fa-solid fa-close" />
                  </a>
                );
              }
            },
            filterFn: "equals",
            meta: {
              filterVariant: "select",
            },
            minSize: 30,
            enableSorting: false,
          }
        ),
        ...(!props.scanned_exam
          ? [
              columnHelper.accessor(
                row => {
                  const hasExtension = Object.hasOwn(row.extension, "hours");
                  if (!hasExtension) return I18n.t("groups.groups_without_extension");
                  if (row.extension.apply_penalty) {
                    return I18n.t("groups.groups_with_extension.with_late_submission");
                  }
                  return I18n.t("groups.groups_with_extension.without_late_submission");
                },
                {
                  id: "extension",
                  header: props.extensionColumnHeader,
                  cell: props => {
                    const timeExtension = getTimeExtension(
                      props.row.original.extension,
                      this.props.times
                    );
                    const lateSubmissionText = props.row.original.extension.apply_penalty
                      ? `(${I18n.t("groups.late_submissions_accepted")})`
                      : "";
                    const extension = `${timeExtension} ${lateSubmissionText}`;

                    if (!!timeExtension) {
                      return (
                        <div>
                          <a
                            href={"#"}
                            onClick={() =>
                              this.props.onExtensionModal(props.row.original.extension, true)
                            }
                          >
                            {extension}
                          </a>
                        </div>
                      );
                    } else {
                      return (
                        <a
                          href="#"
                          onClick={() =>
                            this.props.onExtensionModal(props.row.original.extension, false)
                          }
                          title={I18n.t("add")}
                        >
                          <FontAwesomeIcon icon="fa-solid fa-add" />
                        </a>
                      );
                    }
                  },
                  sortingFn: (rowA, rowB) =>
                    durationSort(rowA.original.extension, rowB.original.extension),
                  filterFn: "equals",
                  meta: {filterVariant: "select"},
                }
              ),
            ]
          : []),
      ],
    };
  }

  resetSelection = () => {
    this.setState({rowSelection: {}});
  };

  getSelectedRows = () => {
    return Object.keys(this.state.rowSelection).map(id => Number(id));
  };

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.showInactive !== this.props.showInactive) {
      this.setState(prevState => {
        let newFilters = prevState.columnFilters;

        if (this.props.showInactive) {
          newFilters = newFilters.filter(f => f.id !== "inactive");
        } else {
          if (!newFilters.some(f => f.id === "inactive")) {
            newFilters = [...newFilters, {id: "inactive", value: false}];
          }
        }
        return {columnFilters: newFilters};
      });
    }
  }

  render() {
    return (
      <Table
        loading={this.props.loading}
        data={this.props.groups}
        columns={this.state.columns}
        initialState={{
          sorting: [{id: "group_name"}],
          columnVisibility: {
            _id: false,
            inactive: false,
          },
        }}
        columnFilters={this.state.columnFilters}
        onColumnFiltersChange={updaterOrValue => {
          this.setState(prevState => {
            let newFilters =
              typeof updaterOrValue === "function"
                ? updaterOrValue(prevState.columnFilters)
                : updaterOrValue;
            return {columnFilters: newFilters};
          });
        }}
        enableRowSelection={true}
        rowSelection={this.state.rowSelection}
        onRowSelectionChange={updater => {
          this.setState(prevState => ({
            rowSelection: typeof updater === "function" ? updater(prevState.rowSelection) : updater,
          }));
        }}
        getRowId={row => row._id}
      />
    );
  }
}

class StudentsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columnFilters: [{id: "hidden", value: false}],
      rowSelection: {},
      columns: [
        columnHelper.accessor("hidden", {
          id: "hidden",
          size: 0,
          meta: {
            className: "rt-hidden",
            headerClassName: "rt-hidden",
          },
          enableResizing: false,
        }),
        columnHelper.accessor("_id", {
          id: "_id",
        }),
        columnHelper.accessor("user_name", {
          header: I18n.t("activerecord.attributes.user.user_name"),
          id: "user_name",
          cell: props =>
            props.row.original.hidden
              ? `${props.getValue()} (${I18n.t("activerecord.attributes.user.hidden")})`
              : props.getValue(),
          filterFn: (row, columnID, filterValue) => {
            if (filterValue) {
              return `${row.original.user_name}${
                row.original.hidden ? `, ${I18n.t("activerecord.attributes.user.hidden")}` : ""
              }`.includes(filterValue);
            } else {
              return true;
            }
          },
          enableSorting: true,
          minSize: 90,
        }),
        columnHelper.accessor("last_name", {
          header: I18n.t("activerecord.attributes.user.last_name"),
          id: "last_name",
        }),
        columnHelper.accessor("first_name", {
          header: I18n.t("activerecord.attributes.user.first_name"),
          id: "first_name",
        }),
        columnHelper.accessor(
          row =>
            row.assigned
              ? I18n.t("groups.assigned_students")
              : I18n.t("groups.unassigned_students"),
          {
            id: "assigned",
            header: I18n.t("groups.assigned_students") + "?",
            cell: ({row}) => (row.original.assigned ? "✔" : ""),
            enableSorting: false,
            minSize: 60,
            filterFn: "equals",
            meta: {filterVariant: "select"},
          }
        ),
      ],
    };
  }

  resetSelection = () => {
    this.setState({rowSelection: {}});
  };

  getSelectedRows = () => {
    return Object.keys(this.state.rowSelection).map(id => Number(id));
  };

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.showHidden !== this.props.showHidden) {
      this.setState(prevState => {
        let newFilters = prevState.columnFilters;

        if (this.props.showHidden) {
          newFilters = newFilters.filter(f => f.id !== "hidden");
        } else {
          if (!newFilters.some(f => f.id === "hidden")) {
            newFilters = [...newFilters, {id: "hidden", value: false}];
          }
        }
        return {columnFilters: newFilters};
      });
    }
  }

  render() {
    return (
      <Table
        loading={this.props.loading}
        data={this.props.students}
        columns={this.state.columns}
        initialState={{
          sorting: [{id: "user_name"}],
          columnVisibility: {
            hidden: false,
            _id: false,
          },
        }}
        columnFilters={this.state.columnFilters}
        onColumnFiltersChange={updaterOrValue => {
          this.setState(prevState => {
            let newFilters =
              typeof updaterOrValue === "function"
                ? updaterOrValue(prevState.columnFilters)
                : updaterOrValue;
            return {columnFilters: newFilters};
          });
        }}
        enableRowSelection={true}
        rowSelection={this.state.rowSelection}
        onRowSelectionChange={updater => {
          this.setState(prevState => ({
            rowSelection: typeof updater === "function" ? updater(prevState.rowSelection) : updater,
          }));
        }}
        getRowId={row => row._id}
      />
    );
  }
}

class GroupsActionBox extends React.Component {
  render = () => {
    var showHiddenTooltip = null;
    if (this.props.hiddenStudentsCount !== null && this.props.hiddenGroupsCount !== null) {
      showHiddenTooltip = `${I18n.t("activerecord.attributes.grouping.inactive_students", {
        count: this.props.hiddenStudentsCount,
      })}, ${I18n.t("activerecord.attributes.grouping.inactive_groups", {
        count: this.props.hiddenGroupsCount,
      })}`;
    }

    return (
      <div className="rt-action-box">
        <span>
          <input
            id="show_hidden"
            name="show_hidden"
            type="checkbox"
            checked={this.props.showHidden}
            onChange={this.props.updateShowHidden}
            style={{marginLeft: "5px", marginRight: "5px"}}
          />
          <label title={showHiddenTooltip} htmlFor="show_hidden">
            {I18n.t("students.display_inactive")}
          </label>
        </span>
        {this.props.vcs_submit && (
          <button onClick={this.props.handleShowAssignmentGroupUseModal}>
            <FontAwesomeIcon icon="fa-solid fa-recycle" />
            {I18n.t("groups.reuse_groups")}
          </button>
        )}
        <button className="" onClick={this.props.assign}>
          <FontAwesomeIcon icon="fa-solid fa-user-plus" />
          {I18n.t("groups.add_to_group")}
        </button>
        {this.props.scanned_exam && (
          <button onClick={this.props.handleShowAutoMatchModal}>
            <FontAwesomeIcon icon="fa-solid fa-file-import" />
            {I18n.t("groups.auto_match")}
          </button>
        )}
        {this.props.can_create_all_groups ? (
          <button className="" onClick={this.props.createAllGroups}>
            <FontAwesomeIcon icon="fa-solid fa-people-group" />
            {I18n.t("groups.add_all_groups")}
          </button>
        ) : undefined}
        <button className="" onClick={this.props.createGroup}>
          <FontAwesomeIcon icon="fa-solid fa-circle-plus" />
          {I18n.t("helpers.submit.create", {
            model: I18n.t("activerecord.models.group.one"),
          })}
        </button>
        <button className="" onClick={this.props.deleteGroups}>
          <FontAwesomeIcon icon="fa-solid fa-trash" />
          {I18n.t("groups.delete")}
        </button>
      </div>
    );
  };
}

export function makeGroupsManager(elem, props) {
  const root = createRoot(elem);
  const component = React.createRef();
  root.render(<GroupsManager {...props} ref={component} />);
  return component;
}

function generateMessage(status_data) {
  let message_data = {};
  switch (status_data["status"]) {
    case "failed":
      if (!status_data["exception"] || !status_data["exception"]["message"]) {
        message_data["error"] = I18n.t("job.status.failed.no_message");
      } else {
        message_data["error"] = I18n.t("job.status.failed.message", {
          error: status_data["exception"]["message"],
        });
      }
      break;
    case "completed":
      message_data["success"] = I18n.t("job.status.completed");
      break;
    case "queued":
      message_data["notice"] = I18n.t("job.status.queued");
      break;
    default: {
      let progress = status_data["progress"];
      let total = status_data["total"];
      message_data["notice"] = I18n.t("poll_job.create_groups_job", {progress, total});
    }
  }
  if (status_data["warning_message"]) {
    message_data["warning"] = status_data["warning_message"];
  }
  return message_data;
}

export {GroupsManager};

MarkUsProject / Markus / 29673204013

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous