16458073714

Committed 22 Jul 2025 11:55PM UTC coverage: 91.883% (+0.02%) from 91.863%

Build # 16458073714

Build Type

Pull #7598

github

Committed by

web-flow

Commit Message

Merge a18cbfe62 into 20a08c895

Pull Request Pull Request #7598: Users table refactor

Run Details

658 of 1419 branches covered (46.37%)

Branch coverage included in aggregate %.

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

3 existing lines in 1 file now uncovered.

42038 of 45049 relevant lines covered (93.32%)

118.7 hits per line

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

86.11

/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 {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,
      counts: {all: 0, active: 0, inactive: 0},
    };
    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)}));
  }

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

MarkUsProject / Markus / 16458073714

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