15466657172

Committed 05 Jun 2025 12:10PM UTC coverage: 91.953% (+0.001%) from 91.952%

Build # 15466657172

Build Type

Pull #7557

github

Committed by

web-flow

Commit Message

Merge 71c6473c1 into 055a2709b

Pull Request Pull Request #7557: Design improvement for student, ta, and instructor tables

Run Details

631 of 1371 branches covered (46.02%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

11 existing lines in 3 files now uncovered.

41944 of 44930 relevant lines covered (93.35%)

117.55 hits per line

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

62.16

/app/javascript/Components/ta_table.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import PropTypes from "prop-types";

import ReactTable from "react-table";
import {selectFilter} from "./Helpers/table_helpers";
import {tableNoDataComponent} from "./table_no_data";

class TATable extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      loading: true,
      counts: {all: 0, active: 0, inactive: 0},
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(Routes.course_tas_path(this.props.course_id), {
      headers: {
        Accept: "application/json",
      },
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
      })
      .then(res => {
        this.setState({data: res.data, counts: res.counts, loading: false});
      });
  }

  removeTA = ta_id => {
    fetch(Routes.course_ta_path(this.props.course_id, ta_id), {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
      },
    })
      .then(response => {
        if (response.ok) {
          this.fetchData();
        }
      })
      .catch(error => {
        console.error("Error removing TA:", error);
      });
  };

  render() {
    const {data} = this.state;
    return (
      <ReactTable
        data={data}
        columns={[
          {
            Header: I18n.t("activerecord.attributes.user.user_name"),
            accessor: "user_name",
          },
          {
            Header: I18n.t("activerecord.attributes.user.first_name"),
            accessor: "first_name",
          },
          {
            Header: I18n.t("activerecord.attributes.user.last_name"),
            accessor: "last_name",
          },
          {
            Header: I18n.t("activerecord.attributes.user.email"),
            accessor: "email",
          },
          {
            Header: I18n.t("roles.active") + "?",
            accessor: "hidden",
            Cell: ({value}) => (value ? I18n.t("roles.inactive") : I18n.t("roles.active")),
            filterMethod: (filter, row) => {
              if (filter.value === "all") {
                return true;
              } else {
                return (
                  (filter.value === "active" && !row[filter.id]) ||
                  (filter.value === "inactive" && row[filter.id])
                );
              }
            },
            Filter: selectFilter,
            filterOptions: [
              {
                value: "active",
                text: `${I18n.t("roles.active")} (${this.state.counts.active})`,
              },
              {
                value: "inactive",
                text: `${I18n.t("roles.inactive")} (${this.state.counts.inactive})`,
              },
            ],
            filterAllOptionText: `${I18n.t("all")} (${this.state.counts.all})`,
          },
          {
            Header: I18n.t("actions"),
            accessor: "id",
            Cell: data => (
              <>
                <span>
                  <a href={Routes.edit_course_ta_path(this.props.course_id, data.value)}>
                    {I18n.t("edit")}
                  </a>
                </span>
                &nbsp;|&nbsp;
                <span>
                  <a href="#" onClick={() => this.removeTA(data.value)}>
                    {I18n.t("remove")}
                  </a>
                </span>
              </>
            ),
            filterable: false,
            sortable: false,
          },
        ]}
        filterable
        loading={this.state.loading}
        NoDataComponent={() => tableNoDataComponent(I18n.t("tas.empty_table"))}
      />
    );
  }
}

TATable.propTypes = {
  course_id: PropTypes.number,
};

function makeTATable(elem, props) {
  const root = createRoot(elem);
  root.render(<TATable {...props} />);
}

export {makeTATable, TATable};

1	import React from "react";
2	import {createRoot} from "react-dom/client";
3	import PropTypes from "prop-types";
4
5	import ReactTable from "react-table";
6	import {selectFilter} from "./Helpers/table_helpers";
7	import {tableNoDataComponent} from "./table_no_data";
8
9	class TATable extends React.Component {
10	constructor() {
11	super();	4✔
12	this.state = {	3✔
13	data: [],
14	loading: true,
15	counts: {all: 0, active: 0, inactive: 0},
16	};
17	this.fetchData = this.fetchData.bind(this);	3✔
18	}
19
20	componentDidMount() {
21	this.fetchData();	3✔
22	}
23
24	fetchData() {
25	fetch(Routes.course_tas_path(this.props.course_id), {	4✔
26	headers: {
27	Accept: "application/json",
28	},
29	})
30	.then(response => {
31	if (response.ok) {	4!
32	return response.json();	4✔
33	}
34	})
35	.then(res => {
36	this.setState({data: res.data, counts: res.counts, loading: false});	4✔
37	});
38	}
39
40	removeTA = ta_id => {	3✔
41	fetch(Routes.course_ta_path(this.props.course_id, ta_id), {	1✔
42	method: "DELETE",
43	headers: {
44	"Content-Type": "application/json",
45	"X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
46	},
47	})
48	.then(response => {
49	if (response.ok) {	1!
50	this.fetchData();	1✔
51	}
52	})
53	.catch(error => {
UNCOV 54	console.error("Error removing TA:", error);	×
55	});
56	};
57
58	render() {
59	const {data} = this.state;	6✔
60	return (	6✔
61	<ReactTable
62	data={data}
63	columns={[
64	{
65	Header: I18n.t("activerecord.attributes.user.user_name"),
66	accessor: "user_name",
67	},
68	{
69	Header: I18n.t("activerecord.attributes.user.first_name"),
70	accessor: "first_name",
71	},
72	{
73	Header: I18n.t("activerecord.attributes.user.last_name"),
74	accessor: "last_name",
75	},
76	{
77	Header: I18n.t("activerecord.attributes.user.email"),
78	accessor: "email",
79	},
80	{
81	Header: I18n.t("roles.active") + "?",
82	accessor: "hidden",
83	Cell: ({value}) => (value ? I18n.t("roles.inactive") : I18n.t("roles.active")),	5✔
84	filterMethod: (filter, row) => {
85	if (filter.value === "all") {	×
UNCOV 86	return true;	×
87	} else {
UNCOV 88	return (	×
89	(filter.value === "active" && !row[filter.id]) \|\|	×
90	(filter.value === "inactive" && row[filter.id])
91	);
92	}
93	},
94	Filter: selectFilter,
95	filterOptions: [
96	{
97	value: "active",
98	text: `${I18n.t("roles.active")} (${this.state.counts.active})`,
99	},
100	{
101	value: "inactive",
102	text: `${I18n.t("roles.inactive")} (${this.state.counts.inactive})`,
103	},
104	],
105	filterAllOptionText: `${I18n.t("all")} (${this.state.counts.all})`,
106	},
107	{
108	Header: I18n.t("actions"),
109	accessor: "id",
110	Cell: data => (
111	<>	5✔
112	<span>
113	<a href={Routes.edit_course_ta_path(this.props.course_id, data.value)}>
114	{I18n.t("edit")}
115	</a>
116	</span>
117	\|
118	<span>
119	<a href="#" onClick={() => this.removeTA(data.value)}>	1✔
120	{I18n.t("remove")}
121	</a>
122	</span>
123	</>
124	),
125	filterable: false,
126	sortable: false,
127	},
128	]}
129	filterable
130	loading={this.state.loading}
131	NoDataComponent={() => tableNoDataComponent(I18n.t("tas.empty_table"))}	7✔
132	/>
133	);
134	}
135	}
136
137	TATable.propTypes = {	1✔
138	course_id: PropTypes.number,
139	};
140
141	function makeTATable(elem, props) {
142	const root = createRoot(elem);	×
UNCOV 143	root.render(<TATable {...props} />);	×
144	}
145
146	export {makeTATable, TATable};

MarkUsProject / Markus / 15466657172

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