← All changes | assets/src/js/admin/list-students-enrolled.js +31 -42 4.4.9 → 4.4.10 View file →

		@@ -12,13 +12,13 @@
12	12	export class ListStudentsEnrolled {
13	13	constructor() {
14	14	this.instructorId = null;
15	15	this.elContainer = null;
16		- this.isRequesting = false;
17	16	}
18	17
19	18	static selectors = {
20	19	elContainer: '.lp-enrolled-students',
	20	+ elLayout: '.lp-students-enrolled-layout',
21	21	elForm: '.lp-enrolled-students-form',
22	22	elLPTarget: '.lp-target',
23	23	elCourseNameInput: '.lp-enrolled-filter-course-name',
24	24	elCourseIdInput: '#lp-enrolled-filter-course-id',
		@@ -62,15 +62,13 @@
62	62	// Search/Clear button click.
63	63	lpUtils.eventHandlers( 'click', [
64	64	{
65	65	selector: ListStudentsEnrolled.selectors.elBtnSearch,
66		- class: this,
67		- callBack: this.searchStudents.name,
	66	+ callBack: this.searchStudents.bind( this ),
68	67	},
69	68	{
70	69	selector: ListStudentsEnrolled.selectors.elBtnClear,
71		- class: this,
72		- callBack: this.clearFilters.name,
	70	+ callBack: this.clearFilters.bind( this ),
73	71	},
74	72	] );
75	73
76	74	// Search on Enter key.
		@@ -76,28 +74,24 @@
76	74	// Search on Enter key.
77	75	lpUtils.eventHandlers( 'keydown', [
78	76	{
79	77	selector: ListStudentsEnrolled.selectors.elSearchInput,
80		- class: this,
81		- callBack: this.triggerBtnSearch.name,
	78	+ callBack: this.triggerBtnSearch.bind( this ),
82	79	checkIsEventEnter: true,
83	80	},
84	81	{
85	82	selector: ListStudentsEnrolled.selectors.elCourseNameInput,
86		- class: this,
87		- callBack: this.triggerBtnSearch.name,
	83	+ callBack: this.triggerBtnSearch.bind( this ),
88	84	checkIsEventEnter: true,
89	85	},
90	86	{
91	87	selector: ListStudentsEnrolled.selectors.elStartDateInput,
92		- class: this,
93		- callBack: this.triggerBtnSearch.name,
	88	+ callBack: this.triggerBtnSearch.bind( this ),
94	89	checkIsEventEnter: true,
95	90	},
96	91	{
97	92	selector: ListStudentsEnrolled.selectors.elEndDateInput,
98		- class: this,
99		- callBack: this.triggerBtnSearch.name,
	93	+ callBack: this.triggerBtnSearch.bind( this ),
100	94	checkIsEventEnter: true,
101	95	},
102	96	] );
103	97
		@@ -103,15 +97,13 @@
103	97
104	98	lpUtils.eventHandlers( 'change', [
105	99	{
106	100	selector: ListStudentsEnrolled.selectors.elStartDateInput,
107		- class: this,
108		- callBack: this.checkDatesRange.name,
	101	+ callBack: this.checkDatesRange.bind( this ),
109	102	},
110	103	{
111	104	selector: ListStudentsEnrolled.selectors.elEndDateInput,
112		- class: this,
113		- callBack: this.checkDatesRange.name,
	105	+ callBack: this.checkDatesRange.bind( this ),
114	106	},
115	107	] );
116	108	}
117	109
		@@ -138,18 +130,21 @@
138	130	return;
139	131	}
140	132
141	133	const startDateInput = elForm.querySelector(
142		- ListStudentsEnrolled.selectors.elStartDateInput,
	134	+ ListStudentsEnrolled.selectors.elStartDateInput
143	135	);
144	136	const endDateInput = elForm.querySelector(
145		- ListStudentsEnrolled.selectors.elEndDateInput,
	137	+ ListStudentsEnrolled.selectors.elEndDateInput
146	138	);
147	139
148	140	if ( elInput === startDateInput ) {
149	141	if ( startDateInput.value ) {
150	142	endDateInput.min = startDateInput.value;
151		- if ( endDateInput.value && endDateInput.value < startDateInput.value ) {
	143	+ if (
	144	+ endDateInput.value &&
	145	+ endDateInput.value < startDateInput.value
	146	+ ) {
152	147	endDateInput.value = startDateInput.value;
153	148	}
154	149	} else {
155	150	endDateInput.min = '';
		@@ -156,9 +151,12 @@
156	151	}
157	152	} else if ( elInput === endDateInput ) {
158	153	if ( endDateInput.value ) {
159	154	startDateInput.max = endDateInput.value;
160		- if ( startDateInput.value && startDateInput.value > endDateInput.value ) {
	155	+ if (
	156	+ startDateInput.value &&
	157	+ startDateInput.value > endDateInput.value
	158	+ ) {
161	159	startDateInput.value = endDateInput.value;
162	160	}
163	161	} else {
164	162	startDateInput.max = '';
		@@ -235,21 +233,18 @@
235	233	}
236	234	const btn = args?.target?.closest(
237	235	ListStudentsEnrolled.selectors.elBtnSearch
238	236	);
239		- if ( btn ) {
240		- if (
241		- this.isRequesting ||
242		- btn.classList.contains( 'loading' )
243		- ) {
244		- return;
245		- }
246		- } else if ( this.isRequesting ) {
	237	+
	238	+ if ( ! btn ) {
247	239	return;
248	240	}
249	241
250	242	const elForm = btn.closest( ListStudentsEnrolled.selectors.elForm );
251		- const elLPTarget = this.elContainer.querySelector(
	243	+ const elLayout = elForm.closest(
	244	+ ListStudentsEnrolled.selectors.elLayout
	245	+ );
	246	+ const elLPTarget = elLayout.querySelector(
252	247	ListStudentsEnrolled.selectors.elLPTarget
253	248	);
254	249	if ( ! elLPTarget || ! elForm ) {
255	250	return;
		@@ -284,21 +279,18 @@
284	279	}
285	280	const btn = args?.target?.closest(
286	281	ListStudentsEnrolled.selectors.elBtnClear
287	282	);
288		- if ( btn ) {
289		- if (
290		- this.isRequesting ||
291		- btn.classList.contains( 'loading' )
292		- ) {
293		- return;
294		- }
295		- } else if ( this.isRequesting ) {
	283	+
	284	+ if ( ! btn ) {
296	285	return;
297	286	}
298	287
299	288	const elForm = btn.closest( ListStudentsEnrolled.selectors.elForm );
300		- const elLPTarget = this.elContainer.querySelector(
	289	+ const elLayout = elForm.closest(
	290	+ ListStudentsEnrolled.selectors.elLayout
	291	+ );
	292	+ const elLPTarget = elLayout.querySelector(
301	293	ListStudentsEnrolled.selectors.elLPTarget
302	294	);
303	295	if ( ! elLPTarget || ! elForm ) {
304	296	return;
		@@ -333,14 +325,12 @@
333	325	*/
334	326	reloadContent( elLPTarget, dataSend, btn = null ) {
335	327	const ajaxHandle = this.getAjaxHandle();
336	328	if ( ! ajaxHandle ) {
337		- this.isRequesting = false;
338	329	this.setButtonLoadingState( btn, false );
339	330	return;
340	331	}
341	332
342		- this.isRequesting = true;
343	333	ajaxHandle.showHideLoading( elLPTarget, 1 );
344	334
345	335	const callBack = {
346	336	success: ( response ) => {
		@@ -350,9 +340,8 @@
350	340	}
351	341	},
352	342	error: ( error ) => console.error( error ),
353	343	completed: () => {
354		- this.isRequesting = false;
355	344	ajaxHandle.showHideLoading( elLPTarget, 0 );
356	345	this.setButtonLoadingState( btn, false );
357	346	},
358	347	};