← All changes | assets/src/js/admin/list-students-enrolled.js +32 -45 4.4.7 → 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 = '';
		@@ -171,9 +169,9 @@
171	169	return;
172	170	}
173	171
174	172	lpUtils.lpSetLoadingEl( btn, isLoading ? 1 : 0 );
175		- btn.disabled = !! isLoading;
	173	+ //btn.disabled = !! isLoading;
176	174	}
177	175
178	176	getAjaxHandle() {
179	177	const ajaxHandle = window.lpAJAXG;
		@@ -235,22 +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		- btn.disabled
244		- ) {
245		- return;
246		- }
247		- } else if ( this.isRequesting ) {
	237	+
	238	+ if ( ! btn ) {
248	239	return;
249	240	}
250	241
251	242	const elForm = btn.closest( ListStudentsEnrolled.selectors.elForm );
252		- const elLPTarget = this.elContainer.querySelector(
	243	+ const elLayout = elForm.closest(
	244	+ ListStudentsEnrolled.selectors.elLayout
	245	+ );
	246	+ const elLPTarget = elLayout.querySelector(
253	247	ListStudentsEnrolled.selectors.elLPTarget
254	248	);
255	249	if ( ! elLPTarget || ! elForm ) {
256	250	return;
		@@ -285,22 +279,18 @@
285	279	}
286	280	const btn = args?.target?.closest(
287	281	ListStudentsEnrolled.selectors.elBtnClear
288	282	);
289		- if ( btn ) {
290		- if (
291		- this.isRequesting ||
292		- btn.classList.contains( 'loading' ) ||
293		- btn.disabled
294		- ) {
295		- return;
296		- }
297		- } else if ( this.isRequesting ) {
	283	+
	284	+ if ( ! btn ) {
298	285	return;
299	286	}
300	287
301	288	const elForm = btn.closest( ListStudentsEnrolled.selectors.elForm );
302		- const elLPTarget = this.elContainer.querySelector(
	289	+ const elLayout = elForm.closest(
	290	+ ListStudentsEnrolled.selectors.elLayout
	291	+ );
	292	+ const elLPTarget = elLayout.querySelector(
303	293	ListStudentsEnrolled.selectors.elLPTarget
304	294	);
305	295	if ( ! elLPTarget || ! elForm ) {
306	296	return;
		@@ -335,14 +325,12 @@
335	325	*/
336	326	reloadContent( elLPTarget, dataSend, btn = null ) {
337	327	const ajaxHandle = this.getAjaxHandle();
338	328	if ( ! ajaxHandle ) {
339		- this.isRequesting = false;
340	329	this.setButtonLoadingState( btn, false );
341	330	return;
342	331	}
343	332
344		- this.isRequesting = true;
345	333	ajaxHandle.showHideLoading( elLPTarget, 1 );
346	334
347	335	const callBack = {
348	336	success: ( response ) => {
		@@ -352,9 +340,8 @@
352	340	}
353	341	},
354	342	error: ( error ) => console.error( error ),
355	343	completed: () => {
356		- this.isRequesting = false;
357	344	ajaxHandle.showHideLoading( elLPTarget, 0 );
358	345	this.setButtonLoadingState( btn, false );
359	346	},
360	347	};