19618877601

Committed 23 Nov 2025 11:22PM UTC coverage: 91.542% (+0.02%) from 91.523%

Build # 19618877601

Build Type

Pull #7732

github

Committed by

web-flow

Commit Message

Merge 669f5c390 into a057d964c

Pull Request Pull Request #7732: Migrate Course Summary Table to @tanstack/react-table v8

Run Details

911 of 1801 branches covered (50.58%)

Branch coverage included in aggregate %.

23 of 31 new or added lines in 2 files covered. (74.19%)

2 existing lines in 2 files now uncovered.

43494 of 46707 relevant lines covered (93.12%)

121.0 hits per line

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

82.86

/app/javascript/Components/ta_table.jsx

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

import {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

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

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

    const columnHelper = createColumnHelper();
    this.columns = [
      columnHelper.accessor("user_name", {
        header: () => I18n.t("activerecord.attributes.user.user_name"),
      }),
      columnHelper.accessor("first_name", {
        header: () => I18n.t("activerecord.attributes.user.first_name"),
      }),
      columnHelper.accessor("last_name", {
        header: () => I18n.t("activerecord.attributes.user.last_name"),
      }),
      columnHelper.accessor("email", {
        header: () => I18n.t("activerecord.attributes.user.email"),
      }),
      columnHelper.accessor("hidden", {
        header: () => I18n.t("roles.active") + "?",
        filterFn: "equalsString",
        meta: {
          filterVariant: "select",
        },
      }),
      columnHelper.accessor("id", {
        id: "id",
        enableSorting: false,
        enableColumnFilter: false,
        header: () => I18n.t("actions"),
        cell: props => (
          <span>
            <a
              href={Routes.edit_course_ta_path(this.props.course_id, props.getValue())}
              aria-label={I18n.t("edit")}
              title={I18n.t("edit")}
            >
              <FontAwesomeIcon icon={faPencil} />
            </a>
            &nbsp;|&nbsp;
            <a
              href="#"
              onClick={() => this.removeTA(props.getValue())}
              aria-label={I18n.t("remove")}
              title={I18n.t("remove")}
            >
              <FontAwesomeIcon icon={faTrashCan} />
            </a>
          </span>
        ),
      }),
    ];
  }

  componentDidMount() {
    this.fetchData().then(data => this.setState({data: this.processData(data), loading: false}));
  }

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

  processData(data) {
    data.forEach(row => (row.hidden = I18n.t(row.hidden ? "roles.inactive" : "roles.active")));
    return data;
  }

  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() {
    return (
      <Table
        data={this.state.data}
        columns={this.columns}
        noDataText={I18n.t("tas.empty_table")}
        loading={this.state.loading}
      />
    );
  }
}

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 {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
6	import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
7
8	import Table from "./table/table";
9	import {createColumnHelper} from "@tanstack/react-table";
10
11	class TATable extends React.Component {
12	constructor() {
13	super();	5✔
14	this.state = {	4✔
15	data: [],
16	loading: true,
17	};
18	this.fetchData = this.fetchData.bind(this);	4✔
19
20	const columnHelper = createColumnHelper();	4✔
21	this.columns = [	4✔
22	columnHelper.accessor("user_name", {
23	header: () => I18n.t("activerecord.attributes.user.user_name"),	10✔
24	}),
25	columnHelper.accessor("first_name", {
26	header: () => I18n.t("activerecord.attributes.user.first_name"),	10✔
27	}),
28	columnHelper.accessor("last_name", {
29	header: () => I18n.t("activerecord.attributes.user.last_name"),	10✔
30	}),
31	columnHelper.accessor("email", {
32	header: () => I18n.t("activerecord.attributes.user.email"),	10✔
33	}),
34	columnHelper.accessor("hidden", {
UNCOV 35	header: () => I18n.t("roles.active") + "?",	×
36	filterFn: "equalsString",
37	meta: {
38	filterVariant: "select",
39	},
40	}),
41	columnHelper.accessor("id", {
42	id: "id",
43	enableSorting: false,
44	enableColumnFilter: false,
45	header: () => I18n.t("actions"),	10✔
46	cell: props => (
47	<span>	10✔
48	<a
49	href={Routes.edit_course_ta_path(this.props.course_id, props.getValue())}
50	aria-label={I18n.t("edit")}
51	title={I18n.t("edit")}
52	>
53	<FontAwesomeIcon icon={faPencil} />
54	</a>
55	\|
56	<a
57	href="#"
58	onClick={() => this.removeTA(props.getValue())}	1✔
59	aria-label={I18n.t("remove")}
60	title={I18n.t("remove")}
61	>
62	<FontAwesomeIcon icon={faTrashCan} />
63	</a>
64	</span>
65	),
66	}),
67	];
68	}
69
70	componentDidMount() {
71	this.fetchData().then(data => this.setState({data: this.processData(data), loading: false}));	4✔
72	}
73
74	fetchData() {
75	return fetch(Routes.course_tas_path(this.props.course_id), {	5✔
76	headers: {
77	Accept: "application/json",
78	},
79	})
80	.then(response => {
81	if (response.ok) {	4!
82	return response.json();	4✔
83	}
84	})
85	.then(json => json.data);	4✔
86	}
87
88	processData(data) {
89	data.forEach(row => (row.hidden = I18n.t(row.hidden ? "roles.inactive" : "roles.active")));	5✔
90	return data;	3✔
91	}
92
93	removeTA = ta_id => {	4✔
94	fetch(Routes.course_ta_path(this.props.course_id, ta_id), {	1✔
95	method: "DELETE",
96	headers: {
97	"Content-Type": "application/json",
98	"X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
99	},
100	})
101	.then(response => {
102	if (response.ok) {	1!
103	this.fetchData();	1✔
104	}
105	})
106	.catch(error => {
107	console.error("Error removing TA:", error);	×
108	});
109	};
110
111	render() {
112	return (	7✔
113	<Table
114	data={this.state.data}
115	columns={this.columns}
116	noDataText={I18n.t("tas.empty_table")}
117	loading={this.state.loading}
118	/>
119	);
120	}
121	}
122
123	TATable.propTypes = {	1✔
124	course_id: PropTypes.number,
125	};
126
127	function makeTATable(elem, props) {
128	const root = createRoot(elem);	×
129	root.render(<TATable {...props} />);	×
130	}
131
132	export {makeTATable, TATable};

MarkUsProject / Markus / 19618877601

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