LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / trunk

LearnPress – WordPress LMS Plugin for Create and Sell Online Courses vtrunk

learnpress / assets / src / js / admin / tools / reset-item-progress.js

reset-item-progress.js in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses trunk, at assets/src/js/admin/tools/reset-item-progress.js

277 lines 6.9 KB

Raw Download Zip

1	/**
2	* Reset item user progress handler.
3	*
4	* @since 4.4.6
5	* @version 1.0.0
6	*/
7	import * as lpUtils from 'lpAssetsJsPath/utils.js';
8	import * as lpToastify from 'lpAssetsJsPath/lpToastify.js';
9	import { LpPopupSelectItemToAdd } from 'lpAssetsJsPath/lpPopupSelectItemToAdd.js';
10	import SweetAlert from "sweetalert2";
11
12	const lpPopupSelectItemToAdd = new LpPopupSelectItemToAdd( {
13	openButtonSelector: '.lp-btn-choose-item-to-reset-progress',
14	} );
15
16	export default class ResetItemProgress {
17	static selectors = {
18	elPopupTemplate: '#lp-tmpl-select-items-to-reset-progress',
19	elFilterField: '.lp-filter-field',
20	elFormFilter: '.lp-form-filter-reset-item-progress',
21	elPopupItemsToSelect: '.lp-popup-select-items-to-reset-progress',
22	elBtnResetAll: '.lp-btn-reset-all-items-progress',
23	};
24
25	constructor() {
26	this.btnChooseItems = null;
27	this.elFormFilter = null;
28	this.elPopupItemsToSelect = null;
29	this.elBtnResetAll = null;
30	this.elBtnAddItemsSelected = null;
31	this.debouncedSearchItems = lpUtils.debounce( ( elForm ) => {
32	this.fetchItems( elForm )
33	}, 800 );
34	}
35
36	init() {
37	this.events();
38	}
39
40	events() {
41	// Check and attach events only once.
42	if ( ResetItemProgress._loadedEvents ) {
43	return;
44	}
45
46	ResetItemProgress._loadedEvents = this;
47
48	// Click events.
49	lpUtils.eventHandlers( 'click', [
50	{
51	selector:
52	LpPopupSelectItemToAdd.selectors
53	.elBtnShowPopupItemsToSelect,
54	class: this,
55	callBack: this.handleShowPopupItemsToSelect.name,
56	},
57	{
58	selector:
59	LpPopupSelectItemToAdd.selectors.elBtnAddItemsSelected,
60	class: lpPopupSelectItemToAdd,
61	callBack: lpPopupSelectItemToAdd.addItemsSelectedToSection.name,
62	callBackHandle: this.addItemsSelectedToSection.bind( this ),
63	conditionBeforeCallBack: ( args ) => {
64	// Only run when the Add button inside this tool's popup is clicked.
65	return !! args.target.closest(
66	ResetItemProgress.selectors.elPopupItemsToSelect
67	);
68	},
69	},
70	{
71	selector:
72	ResetItemProgress.selectors
73	.elBtnResetAll,
74	class: this,
75	callBack: this.resetAllItemsProgress.name,
76	},
77	] );
78
79	// Change events.
80	lpUtils.eventHandlers( 'keyup', [
81	{
82	selector: ResetItemProgress.selectors.elFilterField,
83	class: this,
84	callBack: this.filterItems.name,
85	}
86	] );
87
88	lpUtils.eventHandlers( 'change', [
89	{
90	selector: ResetItemProgress.selectors.elFilterField,
91	class: this,
92	callBack: this.filterItems.name,
93	}
94	] );
95	}
96
97	/**
98	* Called when the picker button is clicked.
99	*
100	* @param {Object} args Event arguments.
101	*/
102	handleShowPopupItemsToSelect( args ) {
103	const { e, target } = args;
104	this.btnChooseItems = target.closest(
105	'.lp-btn-choose-item-to-reset-progress'
106	);
107
108	if ( ! this.btnChooseItems ) {
109	return;
110	}
111
112	this.elPopupItemsToSelect = SweetAlert.getPopup().querySelector(
113	ResetItemProgress.selectors.elPopupItemsToSelect
114	);
115
116	this.elBtnAddItemsSelected = this.elPopupItemsToSelect.querySelector(
117	LpPopupSelectItemToAdd.selectors.elBtnAddItemsSelected
118	);
119	this.elBtnResetAll = this.elPopupItemsToSelect.querySelector(
120	ResetItemProgress.selectors.elBtnResetAll
121	);
122	}
123
124	/**
125	* Called after items are selected in the popup and the action button is clicked.
126	*
127	* @param {Array} itemsSelectedData Selected item data from the popup.
128	*/
129	addItemsSelectedToSection( itemsSelectedData ) {
130	if ( ! this.btnChooseItems ) {
131	return;
132	}
133
134	const messageConfirm = this.elBtnAddItemsSelected.dataset.messageConfirm;
135	if ( ! messageConfirm \|\| confirm( messageConfirm ) === false ) {
136	return;
137	}
138
139	this.btnChooseItems.textContent =
140	this.btnChooseItems.dataset.messageResetting;
141	lpUtils.lpSetLoadingEl( this.btnChooseItems, 1 );
142
143	const userItemIds = itemsSelectedData
144	.map( ( item ) => parseInt( item.id, 10 ) )
145	.filter( ( id ) => ! isNaN( id ) && id > 0 );
146
147	window.lpAJAXG.fetchAJAX(
148	{
149	id_url: 'item-reset-progress-tool',
150	action: 'reset_progress_items_course',
151	user_item_ids: userItemIds,
152	},
153	{
154	success: ( response ) => {
155	const { status, message } = response;
156	lpToastify.show( message, status );
157	},
158	error: ( error ) => {
159	lpToastify.show( error.message, 'error' );
160	},
161	completed: () => {
162	this.btnChooseItems.textContent =
163	this.btnChooseItems.dataset.messageChoose;
164	lpUtils.lpSetLoadingEl( this.btnChooseItems, 0 );
165	},
166	}
167	);
168	}
169
170	/**
171	* Reset all items progress.
172	*
173	* @param {Object} args Event arguments.
174	*/
175	resetAllItemsProgress( args ) {
176	const { e, target } = args;
177
178	const elPopupItemsToSelect = target.closest( ResetItemProgress.selectors.elPopupItemsToSelect );
179	if ( ! elPopupItemsToSelect ) {
180	return;
181	}
182
183	const elFormFilter = elPopupItemsToSelect.querySelector( ResetItemProgress.selectors.elFormFilter );
184	if ( ! elFormFilter ) {
185	return;
186	}
187
188	const messageConfirm = this.elBtnResetAll.dataset.messageConfirm;
189	if ( ! messageConfirm \|\| confirm( messageConfirm ) === false ) {
190	return;
191	}
192
193	// Show loading
194	lpUtils.lpSetLoadingEl( this.btnChooseItems, 1 );
195
196	SweetAlert.close();
197
198	const formData = lpUtils.getDataOfForm( elFormFilter );
199
200	window.lpAJAXG.fetchAJAX(
201	{
202	id_url: 'item-reset-progress-tool',
203	action: 'reset_progress_items_course',
204	reset_all: 1,
205	...formData,
206	},
207	{
208	success: ( response ) => {
209	const { status, message } = response;
210	lpToastify.show( message, status );
211	},
212	error: ( error ) => {
213	lpToastify.show( error.message, 'error' );
214	},
215	completed: () => {
216	this.btnChooseItems.textContent =
217	this.btnChooseItems.dataset.messageChoose;
218	lpUtils.lpSetLoadingEl( this.btnChooseItems, 0 );
219	},
220	}
221	);
222	}
223
224	/**
225	* Fetch items to reset progress.
226	*
227	* @param {HTMLElement} elForm The form element.
228	*/
229	fetchItems( elForm ) {
230	this.elFormFilter = elForm;
231	const elPopup = elForm.closest( ResetItemProgress.selectors.elPopupItemsToSelect );
232	const elLPTarget = elPopup.querySelector( '.lp-target' );
233	let dataSend = window.lpAJAXG.getDataSetCurrent( elLPTarget );
234	dataSend.args = lpUtils.mergeDataWithDatForm( elForm, dataSend.args );
235	dataSend.args.paged = 1;
236	window.lpAJAXG.setDataSetCurrent( elLPTarget, dataSend );
237
238	// Show loading
239	window.lpAJAXG.showHideLoading( elLPTarget, 1 );
240
241	window.lpAJAXG.fetchAJAX( dataSend, {
242	success: ( response ) => {
243	const { data } = response;
244	elLPTarget.innerHTML = data.content \|\| '';
245	},
246	error: ( error ) => {
247	lpToastify.show( error, 'error' );
248	},
249	completed: () => {
250	window.lpAJAXG.showHideLoading( elLPTarget, 0 );
251	},
252	} );
253	}
254
255	/**
256	* Filter items to reset progress.
257	*
258	* @param {Object} args Event arguments.
259	*/
260	filterItems( args ) {
261	const { target } = args;
262	const elFilterField = target.closest(
263	ResetItemProgress.selectors.elFilterField
264	);
265	if ( ! elFilterField ) {
266	return;
267	}
268
269	const elForm = elFilterField.closest( ResetItemProgress.selectors.elFormFilter );
270	if ( ! elForm ) {
271	return;
272	}
273
274	this.debouncedSearchItems( elForm );
275	}
276	}
277