← All changes | assets/src/js/admin/courses/view-students-modal.js +354 -358 4.3.9 → 4.4.9 View file →

		@@ -1,358 +1,354 @@
1		-import SweetAlert from 'sweetalert2';
2		-import * as lpUtils from 'lpAssetsJsPath/utils.js';
3		-
4		-export class ViewStudentsModal {
5		- constructor() {
6		- this.isRequesting = false;
7		- this.activeCourseId = 0;
8		- this.init();
9		- }
10		-
11		- static selectors = {
12		- wrap: '#lp-modal-enrolled-wrap',
13		- form: '#lp-modal-enrolled-form',
14		- toolbarTemplate: '#lp-tmpl-enrolled-students-toolbar-modal',
15		- targetTemplate: '#lp-tmpl-enrolled-students-target-modal',
16		- toolbar: '.lp-enrolled-students-table-toolbar--modal',
17		- courseTrigger: '.lp-btn-view-students',
18		- searchInput: '#lp-modal-enrolled-search-input',
19		- startDateInput: '#lp-modal-enrolled-filter-start-date',
20		- endDateInput: '#lp-modal-enrolled-filter-end-date',
21		- searchBtn: '.lp-enrolled-btn-search-modal',
22		- clearBtn: '.lp-enrolled-btn-clear-modal',
23		- modalSearchFields:
24		- '#lp-modal-enrolled-search-input, #lp-modal-enrolled-filter-start-date, #lp-modal-enrolled-filter-end-date',
25		- };
26		-
27		- setButtonLoadingState( btn, isLoading ) {
28		- if ( ! btn ) {
29		- return;
30		- }
31		-
32		- lpUtils.lpSetLoadingEl( btn, isLoading ? 1 : 0 );
33		- btn.disabled = !! isLoading;
34		- }
35		-
36		- init() {
37		- if ( ViewStudentsModal._loadedEvents ) {
38		- return;
39		- }
40		-
41		- ViewStudentsModal._loadedEvents = true;
42		-
43		- lpUtils.eventHandlers( 'click', [
44		- {
45		- selector: ViewStudentsModal.selectors.courseTrigger,
46		- class: this,
47		- callBack: this.handleOpenModal.name,
48		- },
49		- {
50		- selector: ViewStudentsModal.selectors.searchBtn,
51		- class: this,
52		- callBack: this.handleModalSearch.name,
53		- },
54		- {
55		- selector: ViewStudentsModal.selectors.clearBtn,
56		- class: this,
57		- callBack: this.handleModalClear.name,
58		- },
59		- ] );
60		-
61		- lpUtils.eventHandlers( 'keydown', [
62		- {
63		- selector: ViewStudentsModal.selectors.modalSearchFields,
64		- class: this,
65		- callBack: this.handleModalSearchOnEnter.name,
66		- checkIsEventEnter: true,
67		- },
68		- ] );
69		-
70		- lpUtils.eventHandlers( 'change', [
71		- {
72		- selector: ViewStudentsModal.selectors.startDateInput,
73		- class: this,
74		- callBack: this.checkDatesRange.name,
75		- },
76		- {
77		- selector: ViewStudentsModal.selectors.endDateInput,
78		- class: this,
79		- callBack: this.checkDatesRange.name,
80		- },
81		- ] );
82		- }
83		-
84		- handleOpenModal( args ) {
85		- const btn = args?.target?.closest(
86		- ViewStudentsModal.selectors.courseTrigger
87		- );
88		- if (
89		- ! btn ||
90		- this.isRequesting ||
91		- btn.classList.contains( 'loading' ) ||
92		- btn.disabled
93		- ) {
94		- return;
95		- }
96		-
97		- const courseId = parseInt( btn.dataset.courseId, 10 ) || 0;
98		- if ( ! courseId ) {
99		- return;
100		- }
101		-
102		- const courseTitle = btn.dataset.courseTitle || '';
103		- this.activeCourseId = courseId;
104		-
105		- this.setButtonLoadingState( btn, true );
106		- this.openModal( courseId, courseTitle, btn );
107		- }
108		-
109		- handleModalSearch( args ) {
110		- const btn = args?.target?.closest(
111		- ViewStudentsModal.selectors.searchBtn
112		- );
113		- if ( ! btn || ! this.activeCourseId ) {
114		- return;
115		- }
116		-
117		- if ( args?.e ) {
118		- args.e.preventDefault();
119		- }
120		-
121		- if (
122		- this.isRequesting ||
123		- btn.classList.contains( 'loading' ) ||
124		- btn.disabled
125		- ) {
126		- return;
127		- }
128		-
129		- this.setButtonLoadingState( btn, true );
130		- this.loadEnrolledStudents(
131		- this.activeCourseId,
132		- 1,
133		- btn
134		- );
135		- }
136		-
137		- handleModalSearchOnEnter( args ) {
138		- if ( args?.e ) {
139		- args.e.preventDefault();
140		- }
141		-
142		- const form = this.getModalForm();
143		- if ( ! form ) {
144		- return;
145		- }
146		-
147		- const btn = form.querySelector( ViewStudentsModal.selectors.searchBtn );
148		- if ( ! btn ) {
149		- return;
150		- }
151		-
152		- this.handleModalSearch( { ...args, target: btn } );
153		- }
154		-
155		- handleModalClear( args ) {
156		- const btn = args?.target?.closest(
157		- ViewStudentsModal.selectors.clearBtn
158		- );
159		- const form = this.getModalForm();
160		- if ( ! btn || ! form || ! this.activeCourseId ) {
161		- return;
162		- }
163		-
164		- if ( args?.e ) {
165		- args.e.preventDefault();
166		- }
167		-
168		- if (
169		- this.isRequesting ||
170		- btn.classList.contains( 'loading' ) ||
171		- btn.disabled
172		- ) {
173		- return;
174		- }
175		-
176		- form.reset();
177		- this.setButtonLoadingState( btn, true );
178		- this.loadEnrolledStudents(
179		- this.activeCourseId,
180		- 1,
181		- btn
182		- );
183		- }
184		-
185		- getModalPopup() {
186		- return SweetAlert.getPopup ? SweetAlert.getPopup() : null;
187		- }
188		-
189		- getModalToolbarHtml() {
190		- const template = document.querySelector(
191		- ViewStudentsModal.selectors.toolbarTemplate
192		- );
193		-
194		- return template ? template.innerHTML : '';
195		- }
196		-
197		- getModalTargetHtml() {
198		- const template = document.querySelector(
199		- ViewStudentsModal.selectors.targetTemplate
200		- );
201		-
202		- return template ? template.innerHTML : '';
203		- }
204		-
205		- getAjaxHandle() {
206		- const ajaxHandle = window.lpAJAXG;
207		- if (
208		- ! ajaxHandle ||
209		- typeof ajaxHandle.getDataSetCurrent !== 'function' ||
210		- typeof ajaxHandle.setDataSetCurrent !== 'function' ||
211		- typeof ajaxHandle.showHideLoading !== 'function' ||
212		- typeof ajaxHandle.fetchAJAX !== 'function'
213		- ) {
214		- return null;
215		- }
216		-
217		- return ajaxHandle;
218		- }
219		-
220		- getModalForm() {
221		- const popup = this.getModalPopup();
222		- if ( ! popup ) {
223		- return null;
224		- }
225		-
226		- return popup.querySelector( ViewStudentsModal.selectors.form );
227		- }
228		-
229		- getModalFilterArgs( dataArgs = {} ) {
230		- const form = this.getModalForm();
231		- if ( ! form ) {
232		- return dataArgs;
233		- }
234		-
235		- return lpUtils.mergeDataWithDatForm( form, dataArgs );
236		- }
237		-
238		- loadEnrolledStudents( courseId, paged, elLoading = null ) {
239		- const wrap = document.querySelector( ViewStudentsModal.selectors.wrap );
240		- const elTarget = wrap?.querySelector( '.lp-target' );
241		- const ajaxHandle = this.getAjaxHandle();
242		- if ( ! wrap || ! elTarget || ! ajaxHandle || this.isRequesting ) {
243		- return;
244		- }
245		-
246		- this.isRequesting = true;
247		- if ( elLoading ) {
248		- this.setButtonLoadingState( elLoading, true );
249		- }
250		-
251		- const dataSend = ajaxHandle.getDataSetCurrent( elTarget );
252		- dataSend.args = this.getModalFilterArgs( dataSend.args || {} );
253		- dataSend.args.course_id = parseInt( courseId, 10 ) || 0;
254		- dataSend.args.paged = paged;
255		- ajaxHandle.setDataSetCurrent( elTarget, dataSend );
256		- ajaxHandle.showHideLoading( elTarget, 1 );
257		-
258		- const callBack = {
259		- success: ( response ) => {
260		- elTarget.innerHTML = response.data.content;
261		- },
262		- error: ( err ) => {
263		- console.error( err );
264		- },
265		- completed: () => {
266		- this.isRequesting = false;
267		- ajaxHandle.showHideLoading( elTarget, 0 );
268		- if ( elLoading ) {
269		- this.setButtonLoadingState( elLoading, false );
270		- }
271		- },
272		- };
273		-
274		- ajaxHandle.fetchAJAX( dataSend, callBack );
275		- }
276		-
277		- openModal( courseId, courseTitle, elTrigger = null ) {
278		- const modalToolbarHtml = this.getModalToolbarHtml();
279		- const modalTargetHtml = this.getModalTargetHtml();
280		-
281		- if ( ! modalToolbarHtml || ! modalTargetHtml ) {
282		- if ( elTrigger ) {
283		- this.setButtonLoadingState( elTrigger, false );
284		- }
285		- return;
286		- }
287		-
288		- this.activeCourseId = parseInt( courseId, 10 ) || 0;
289		-
290		- SweetAlert.fire( {
291		- title: `${ courseTitle }`,
292		- html: modalToolbarHtml + modalTargetHtml,
293		- width: '80%',
294		- showConfirmButton: false,
295		- showCloseButton: true,
296		- didOpen: () => {
297		- this.loadEnrolledStudents(
298		- this.activeCourseId,
299		- 1,
300		- elTrigger
301		- );
302		- },
303		- didClose: () => {
304		- this.activeCourseId = 0;
305		- if ( elTrigger ) {
306		- this.setButtonLoadingState( elTrigger, false );
307		- }
308		- },
309		- } );
310		- }
311		-
312		- // Ensure start date is not after end date and vice versa. If invalid, adjust the other date to match.
313		- checkDatesRange( args ) {
314		- const { e } = args;
315		- const elInput = e?.target;
316		- if ( ! elInput ) {
317		- return;
318		- }
319		-
320		- const elForm = elInput.closest( ViewStudentsModal.selectors.form );
321		- if ( ! elForm ) {
322		- return;
323		- }
324		-
325		- const startDateInput = elForm.querySelector(
326		- ViewStudentsModal.selectors.startDateInput,
327		- );
328		- const endDateInput = elForm.querySelector(
329		- ViewStudentsModal.selectors.endDateInput,
330		- );
331		-
332		- if ( elInput === startDateInput ) {
333		- if ( startDateInput.value ) {
334		- endDateInput.min = startDateInput.value;
335		- if (
336		- endDateInput.value &&
337		- endDateInput.value < startDateInput.value
338		- ) {
339		- endDateInput.value = startDateInput.value;
340		- }
341		- } else {
342		- endDateInput.min = '';
343		- }
344		- } else if ( elInput === endDateInput ) {
345		- if ( endDateInput.value ) {
346		- startDateInput.max = endDateInput.value;
347		- if (
348		- startDateInput.value &&
349		- startDateInput.value > endDateInput.value
350		- ) {
351		- startDateInput.value = endDateInput.value;
352		- }
353		- } else {
354		- startDateInput.max = '';
355		- }
356		- }
357		- }
358		-}
	1	+import SweetAlert from 'sweetalert2';
	2	+import * as lpUtils from 'lpAssetsJsPath/utils.js';
	3	+
	4	+export class ViewStudentsModal {
	5	+ constructor() {
	6	+ this.isRequesting = false;
	7	+ this.activeCourseId = 0;
	8	+ this.init();
	9	+ }
	10	+
	11	+ static selectors = {
	12	+ wrap: '#lp-modal-enrolled-wrap',
	13	+ form: '#lp-modal-enrolled-form',
	14	+ toolbarTemplate: '#lp-tmpl-enrolled-students-toolbar-modal',
	15	+ targetTemplate: '#lp-tmpl-enrolled-students-target-modal',
	16	+ toolbar: '.lp-enrolled-students-table-toolbar--modal',
	17	+ courseTrigger: '.lp-btn-view-students',
	18	+ searchInput: '#lp-modal-enrolled-search-input',
	19	+ startDateInput: '#lp-modal-enrolled-filter-start-date',
	20	+ endDateInput: '#lp-modal-enrolled-filter-end-date',
	21	+ searchBtn: '.lp-enrolled-btn-search-modal',
	22	+ clearBtn: '.lp-enrolled-btn-clear-modal',
	23	+ modalSearchFields:
	24	+ '#lp-modal-enrolled-search-input, #lp-modal-enrolled-filter-start-date, #lp-modal-enrolled-filter-end-date',
	25	+ };
	26	+
	27	+ setButtonLoadingState( btn, isLoading ) {
	28	+ if ( ! btn ) {
	29	+ return;
	30	+ }
	31	+
	32	+ lpUtils.lpSetLoadingEl( btn, isLoading ? 1 : 0 );
	33	+ }
	34	+
	35	+ init() {
	36	+ if ( ViewStudentsModal._loadedEvents ) {
	37	+ return;
	38	+ }
	39	+
	40	+ ViewStudentsModal._loadedEvents = true;
	41	+
	42	+ lpUtils.eventHandlers( 'click', [
	43	+ {
	44	+ selector: ViewStudentsModal.selectors.courseTrigger,
	45	+ class: this,
	46	+ callBack: this.handleOpenModal.name,
	47	+ },
	48	+ {
	49	+ selector: ViewStudentsModal.selectors.searchBtn,
	50	+ class: this,
	51	+ callBack: this.handleModalSearch.name,
	52	+ },
	53	+ {
	54	+ selector: ViewStudentsModal.selectors.clearBtn,
	55	+ class: this,
	56	+ callBack: this.handleModalClear.name,
	57	+ },
	58	+ ] );
	59	+
	60	+ lpUtils.eventHandlers( 'keydown', [
	61	+ {
	62	+ selector: ViewStudentsModal.selectors.modalSearchFields,
	63	+ class: this,
	64	+ callBack: this.handleModalSearchOnEnter.name,
	65	+ checkIsEventEnter: true,
	66	+ },
	67	+ ] );
	68	+
	69	+ lpUtils.eventHandlers( 'change', [
	70	+ {
	71	+ selector: ViewStudentsModal.selectors.startDateInput,
	72	+ class: this,
	73	+ callBack: this.checkDatesRange.name,
	74	+ },
	75	+ {
	76	+ selector: ViewStudentsModal.selectors.endDateInput,
	77	+ class: this,
	78	+ callBack: this.checkDatesRange.name,
	79	+ },
	80	+ ] );
	81	+ }
	82	+
	83	+ handleOpenModal( args ) {
	84	+ const btn = args?.target?.closest(
	85	+ ViewStudentsModal.selectors.courseTrigger
	86	+ );
	87	+ if (
	88	+ ! btn ||
	89	+ this.isRequesting ||
	90	+ btn.classList.contains( 'loading' ) ) {
	91	+ return;
	92	+ }
	93	+
	94	+ const courseId = parseInt( btn.dataset.courseId, 10 ) || 0;
	95	+ if ( ! courseId ) {
	96	+ return;
	97	+ }
	98	+
	99	+ const courseTitle = btn.dataset.courseTitle || '';
	100	+ this.activeCourseId = courseId;
	101	+
	102	+ this.setButtonLoadingState( btn, true );
	103	+ this.openModal( courseId, courseTitle, btn );
	104	+ }
	105	+
	106	+ handleModalSearch( args ) {
	107	+ const btn = args?.target?.closest(
	108	+ ViewStudentsModal.selectors.searchBtn
	109	+ );
	110	+ if ( ! btn || ! this.activeCourseId ) {
	111	+ return;
	112	+ }
	113	+
	114	+ if ( args?.e ) {
	115	+ args.e.preventDefault();
	116	+ }
	117	+
	118	+ if (
	119	+ this.isRequesting ||
	120	+ btn.classList.contains( 'loading' ) ||
	121	+ btn.disabled
	122	+ ) {
	123	+ return;
	124	+ }
	125	+
	126	+ this.setButtonLoadingState( btn, true );
	127	+ this.loadEnrolledStudents(
	128	+ this.activeCourseId,
	129	+ 1,
	130	+ btn
	131	+ );
	132	+ }
	133	+
	134	+ handleModalSearchOnEnter( args ) {
	135	+ if ( args?.e ) {
	136	+ args.e.preventDefault();
	137	+ }
	138	+
	139	+ const form = this.getModalForm();
	140	+ if ( ! form ) {
	141	+ return;
	142	+ }
	143	+
	144	+ const btn = form.querySelector( ViewStudentsModal.selectors.searchBtn );
	145	+ if ( ! btn ) {
	146	+ return;
	147	+ }
	148	+
	149	+ this.handleModalSearch( { ...args, target: btn } );
	150	+ }
	151	+
	152	+ handleModalClear( args ) {
	153	+ const btn = args?.target?.closest(
	154	+ ViewStudentsModal.selectors.clearBtn
	155	+ );
	156	+ const form = this.getModalForm();
	157	+ if ( ! btn || ! form || ! this.activeCourseId ) {
	158	+ return;
	159	+ }
	160	+
	161	+ if ( args?.e ) {
	162	+ args.e.preventDefault();
	163	+ }
	164	+
	165	+ if (
	166	+ this.isRequesting ||
	167	+ btn.classList.contains( 'loading' )
	168	+ ) {
	169	+ return;
	170	+ }
	171	+
	172	+ form.reset();
	173	+ this.setButtonLoadingState( btn, true );
	174	+ this.loadEnrolledStudents(
	175	+ this.activeCourseId,
	176	+ 1,
	177	+ btn
	178	+ );
	179	+ }
	180	+
	181	+ getModalPopup() {
	182	+ return SweetAlert.getPopup ? SweetAlert.getPopup() : null;
	183	+ }
	184	+
	185	+ getModalToolbarHtml() {
	186	+ const template = document.querySelector(
	187	+ ViewStudentsModal.selectors.toolbarTemplate
	188	+ );
	189	+
	190	+ return template ? template.innerHTML : '';
	191	+ }
	192	+
	193	+ getModalTargetHtml() {
	194	+ const template = document.querySelector(
	195	+ ViewStudentsModal.selectors.targetTemplate
	196	+ );
	197	+
	198	+ return template ? template.innerHTML : '';
	199	+ }
	200	+
	201	+ getAjaxHandle() {
	202	+ const ajaxHandle = window.lpAJAXG;
	203	+ if (
	204	+ ! ajaxHandle ||
	205	+ typeof ajaxHandle.getDataSetCurrent !== 'function' ||
	206	+ typeof ajaxHandle.setDataSetCurrent !== 'function' ||
	207	+ typeof ajaxHandle.showHideLoading !== 'function' ||
	208	+ typeof ajaxHandle.fetchAJAX !== 'function'
	209	+ ) {
	210	+ return null;
	211	+ }
	212	+
	213	+ return ajaxHandle;
	214	+ }
	215	+
	216	+ getModalForm() {
	217	+ const popup = this.getModalPopup();
	218	+ if ( ! popup ) {
	219	+ return null;
	220	+ }
	221	+
	222	+ return popup.querySelector( ViewStudentsModal.selectors.form );
	223	+ }
	224	+
	225	+ getModalFilterArgs( dataArgs = {} ) {
	226	+ const form = this.getModalForm();
	227	+ if ( ! form ) {
	228	+ return dataArgs;
	229	+ }
	230	+
	231	+ return lpUtils.mergeDataWithDatForm( form, dataArgs );
	232	+ }
	233	+
	234	+ loadEnrolledStudents( courseId, paged, elLoading = null ) {
	235	+ const wrap = document.querySelector( ViewStudentsModal.selectors.wrap );
	236	+ const elTarget = wrap?.querySelector( '.lp-target' );
	237	+ const ajaxHandle = this.getAjaxHandle();
	238	+ if ( ! wrap || ! elTarget || ! ajaxHandle || this.isRequesting ) {
	239	+ return;
	240	+ }
	241	+
	242	+ this.isRequesting = true;
	243	+ if ( elLoading ) {
	244	+ this.setButtonLoadingState( elLoading, true );
	245	+ }
	246	+
	247	+ const dataSend = ajaxHandle.getDataSetCurrent( elTarget );
	248	+ dataSend.args = this.getModalFilterArgs( dataSend.args || {} );
	249	+ dataSend.args.course_id = parseInt( courseId, 10 ) || 0;
	250	+ dataSend.args.paged = paged;
	251	+ ajaxHandle.setDataSetCurrent( elTarget, dataSend );
	252	+ ajaxHandle.showHideLoading( elTarget, 1 );
	253	+
	254	+ const callBack = {
	255	+ success: ( response ) => {
	256	+ elTarget.innerHTML = response.data.content;
	257	+ },
	258	+ error: ( err ) => {
	259	+ console.error( err );
	260	+ },
	261	+ completed: () => {
	262	+ this.isRequesting = false;
	263	+ ajaxHandle.showHideLoading( elTarget, 0 );
	264	+ if ( elLoading ) {
	265	+ this.setButtonLoadingState( elLoading, false );
	266	+ }
	267	+ },
	268	+ };
	269	+
	270	+ ajaxHandle.fetchAJAX( dataSend, callBack );
	271	+ }
	272	+
	273	+ openModal( courseId, courseTitle, elTrigger = null ) {
	274	+ const modalToolbarHtml = this.getModalToolbarHtml();
	275	+ const modalTargetHtml = this.getModalTargetHtml();
	276	+
	277	+ if ( ! modalToolbarHtml || ! modalTargetHtml ) {
	278	+ if ( elTrigger ) {
	279	+ this.setButtonLoadingState( elTrigger, false );
	280	+ }
	281	+ return;
	282	+ }
	283	+
	284	+ this.activeCourseId = parseInt( courseId, 10 ) || 0;
	285	+
	286	+ SweetAlert.fire( {
	287	+ title: `${ courseTitle }`,
	288	+ html: modalToolbarHtml + modalTargetHtml,
	289	+ width: '80%',
	290	+ showConfirmButton: false,
	291	+ showCloseButton: true,
	292	+ didOpen: () => {
	293	+ this.loadEnrolledStudents(
	294	+ this.activeCourseId,
	295	+ 1,
	296	+ elTrigger
	297	+ );
	298	+ },
	299	+ didClose: () => {
	300	+ this.activeCourseId = 0;
	301	+ if ( elTrigger ) {
	302	+ this.setButtonLoadingState( elTrigger, false );
	303	+ }
	304	+ },
	305	+ } );
	306	+ }
	307	+
	308	+ // Ensure start date is not after end date and vice versa. If invalid, adjust the other date to match.
	309	+ checkDatesRange( args ) {
	310	+ const { e } = args;
	311	+ const elInput = e?.target;
	312	+ if ( ! elInput ) {
	313	+ return;
	314	+ }
	315	+
	316	+ const elForm = elInput.closest( ViewStudentsModal.selectors.form );
	317	+ if ( ! elForm ) {
	318	+ return;
	319	+ }
	320	+
	321	+ const startDateInput = elForm.querySelector(
	322	+ ViewStudentsModal.selectors.startDateInput,
	323	+ );
	324	+ const endDateInput = elForm.querySelector(
	325	+ ViewStudentsModal.selectors.endDateInput,
	326	+ );
	327	+
	328	+ if ( elInput === startDateInput ) {
	329	+ if ( startDateInput.value ) {
	330	+ endDateInput.min = startDateInput.value;
	331	+ if (
	332	+ endDateInput.value &&
	333	+ endDateInput.value < startDateInput.value
	334	+ ) {
	335	+ endDateInput.value = startDateInput.value;
	336	+ }
	337	+ } else {
	338	+ endDateInput.min = '';
	339	+ }
	340	+ } else if ( elInput === endDateInput ) {
	341	+ if ( endDateInput.value ) {
	342	+ startDateInput.max = endDateInput.value;
	343	+ if (
	344	+ startDateInput.value &&
	345	+ startDateInput.value > endDateInput.value
	346	+ ) {
	347	+ startDateInput.value = endDateInput.value;
	348	+ }
	349	+ } else {
	350	+ startDateInput.max = '';
	351	+ }
	352	+ }
	353	+ }
	354	+}