← All changes | assets/src/js/admin/tools/assign-user-course.js +228 -228 4.3.8 → 4.4.9 View file →

		@@ -1,228 +1,228 @@
1		-/**
2		- * Assign user to course
3		- *
4		- * @since 4.2.5.6
5		- * @version 1.0.1
6		- */
7		-import * as AdminUtils from '../utils-admin.js';
8		-
9		-export default function assignUserCourse() {
10		- let elFormAssignUserCourse;
11		- let elFormUnAssignUserCourse;
12		- let elUserUnAssign, elCourseUnAssign, elUserAssign, elCourseAssign;
13		- const limitHandle = 5;
14		-
15		- const getAllElements = () => {
16		- elFormAssignUserCourse = document.querySelector( '#lp-assign-user-course-form' );
17		- elFormUnAssignUserCourse = document.querySelector( '#lp-unassign-user-course-form' );
18		-
19		- if ( elFormAssignUserCourse ) {
20		- elUserUnAssign = elFormUnAssignUserCourse.querySelector( '[name=user_ids]' );
21		- elCourseUnAssign = elFormUnAssignUserCourse.querySelector( '[name=course_ids]' );
22		- }
23		-
24		- if ( elFormUnAssignUserCourse ) {
25		- elUserAssign = elFormAssignUserCourse.querySelector( '[name=user_ids]' );
26		- elCourseAssign = elFormAssignUserCourse.querySelector( '[name=course_ids]' );
27		- }
28		- };
29		-
30		- const events = () => {
31		- const elForm = document.querySelector( 'form' );
32		- if ( ! elForm ) {
33		- return;
34		- }
35		-
36		- document.addEventListener( 'submit', ( e ) => {
37		- const elForm = e.target;
38		- const formData = new FormData( e.target ); // Create a FormData object from the form
39		-
40		- // get values of form.
41		- const obj = Object.fromEntries( Array.from( formData.keys(), ( key ) => {
42		- const val = formData.getAll( key );
43		- return [ key, val.length > 1 ? val : val.pop() ];
44		- } ) );
45		-
46		- if ( elForm.id === 'lp-assign-user-course-form' ) {
47		- e.preventDefault();
48		-
49		- if ( ! confirm( 'Are you sure you want to Assign?' ) ) {
50		- return;
51		- }
52		-
53		- const { packages, data, totalPage } = handleDataBeforeSend( obj );
54		- fetchAPIAssignCourse( packages, data, 1, totalPage );
55		- } else if ( elForm.id === 'lp-unassign-user-course-form' ) {
56		- e.preventDefault();
57		-
58		- if ( ! confirm( 'Are you sure you want to Unassign?' ) ) {
59		- return;
60		- }
61		-
62		- const { packages, data, totalPage } = handleDataBeforeSend( obj );
63		- fetchAPIUnAssignCourse( packages, data, 1, totalPage );
64		- }
65		- } );
66		- };
67		-
68		- const handleDataBeforeSend = ( dataRaw ) => {
69		- // Cut to packages to send, 1 packages has 5 items.
70		- let arrCourseIds = [];
71		- let arrUserIds = [];
72		- if ( typeof dataRaw.course_ids === 'string' ) {
73		- arrCourseIds.push( dataRaw.course_ids );
74		- } else if ( typeof dataRaw.course_ids === 'object' ) {
75		- arrCourseIds = dataRaw.course_ids;
76		- }
77		-
78		- if ( typeof dataRaw.user_ids === 'string' ) {
79		- arrUserIds.push( dataRaw.user_ids );
80		- } else if ( typeof dataRaw.user_ids === 'object' ) {
81		- arrUserIds = dataRaw.user_ids;
82		- }
83		-
84		- const packages = [];
85		- arrCourseIds.map( ( courseId, indexCourse ) => {
86		- const item = {};
87		-
88		- item.course_id = courseId;
89		- arrUserIds.map( ( userID, indexUser ) => {
90		- const newItem = { ...item, user_id: userID };
91		- packages.push( newItem );
92		- } );
93		- } );
94		-
95		- const data = packages.slice( 0, limitHandle );
96		- const totalPage = Math.ceil( packages.length / limitHandle );
97		-
98		- return { packages, data, totalPage };
99		- };
100		-
101		- const fetchAPIAssignCourse = ( packages, data, page, totalPage ) => {
102		- const url = AdminUtils.Api.admin.apiAssignUserCourse;
103		- const params = {
104		- headers: {
105		- 'Content-Type': 'application/json',
106		- 'X-WP-Nonce': lpDataAdmin.nonce,
107		- },
108		- method: 'POST',
109		- body: JSON.stringify( { data, page, totalPage } ),
110		- };
111		- const elProgress = elFormAssignUserCourse.querySelector( '.percent' );
112		- const elButtonAssign = elFormAssignUserCourse.querySelector( '.lp-button-assign-course' );
113		- const elMessage = elFormAssignUserCourse.querySelector( '.message' );
114		- elButtonAssign.disabled = true;
115		-
116		- AdminUtils.Utils.lpFetchAPI( url, params, {
117		- success: ( response ) => {
118		- const { status, message } = response;
119		- if ( status === 'success' ) {
120		- let page = parseInt( response.data.page );
121		- const begin = page * limitHandle;
122		- const end = begin + limitHandle;
123		- data = packages.slice( begin, end );
124		- elProgress.innerHTML = response.data.percent;
125		- fetchAPIAssignCourse( packages, data, ++page, totalPage );
126		- } else if ( status === 'finished' ) {
127		- elProgress.innerHTML = '';
128		- elMessage.style.color = 'green';
129		- elMessage.innerHTML = message;
130		- setTimeout( () => {
131		- elMessage.innerHTML = '';
132		- }, 2000 );
133		- elButtonAssign.disabled = false;
134		- // Clear data selected on Tom Select.
135		- if ( ! elUserAssign.tomselect || ! elCourseAssign.tomselect ) {
136		- return;
137		- }
138		-
139		- elUserAssign.tomselect.clear();
140		- elCourseAssign.tomselect.clear();
141		- } else if ( status === 'error' ) {
142		- elButtonAssign.disabled = false;
143		- elMessage.style.color = 'red';
144		- elMessage.innerHTML = message;
145		- setTimeout( () => {
146		- elMessage.innerHTML = '';
147		- }, 2000 );
148		- }
149		- },
150		- error: ( err ) => {
151		- elButtonAssign.disabled = false;
152		- elMessage.innerHTML = err.message;
153		- },
154		- completed: () => {
155		-
156		- },
157		- } );
158		- };
159		-
160		- const fetchAPIUnAssignCourse = ( packages, data, page, totalPage ) => {
161		- const url = AdminUtils.Api.admin.apiUnAssignUserCourse;
162		- const params = {
163		- headers: {
164		- 'Content-Type': 'application/json',
165		- 'X-WP-Nonce': lpDataAdmin.nonce,
166		- },
167		- method: 'POST',
168		- body: JSON.stringify( { data, page, totalPage } ),
169		- };
170		- const elProgress = elFormUnAssignUserCourse.querySelector( '.percent' );
171		- const elButtonAssign = elFormUnAssignUserCourse.querySelector( '.lp-button-unassign-course' );
172		- const elMessage = elFormUnAssignUserCourse.querySelector( '.message' );
173		- elButtonAssign.disabled = true;
174		-
175		- AdminUtils.Utils.lpFetchAPI( url, params, {
176		- success: ( response ) => {
177		- const { status, message } = response;
178		- if ( status === 'success' ) {
179		- let page = parseInt( response.data.page );
180		- const begin = page * limitHandle;
181		- const end = begin + limitHandle;
182		- data = packages.slice( begin, end );
183		- elProgress.innerHTML = response.data.percent;
184		- fetchAPIUnAssignCourse( packages, data, ++page, totalPage );
185		- } else if ( status === 'finished' ) {
186		- elProgress.innerHTML = '';
187		- elMessage.style.color = 'green';
188		- elMessage.innerHTML = message;
189		- setTimeout( () => {
190		- elMessage.innerHTML = '';
191		- }, 2000 );
192		- elButtonAssign.disabled = false;
193		- // Clear data selected on Tom Select.
194		- if ( ! elUserUnAssign.tomselect || ! elCourseUnAssign.tomselect ) {
195		- return;
196		- }
197		-
198		- elUserUnAssign.tomselect.clear();
199		- elCourseUnAssign.tomselect.clear();
200		- } else if ( status === 'error' ) {
201		- elButtonAssign.disabled = false;
202		- elMessage.style.color = 'red';
203		- elMessage.innerHTML = message;
204		- setTimeout( () => {
205		- elMessage.innerHTML = '';
206		- }, 2000 );
207		- }
208		- },
209		- error: ( err ) => {
210		- elButtonAssign.disabled = false;
211		- elMessage.innerHTML = err.message;
212		- },
213		- completed: () => {
214		-
215		- },
216		- } );
217		- };
218		-
219		- // DOMContentLoaded.
220		- document.addEventListener( 'DOMContentLoaded', () => {
221		- getAllElements();
222		- if ( ! elFormAssignUserCourse ) {
223		- return;
224		- }
225		-
226		- events();
227		- } );
228		-}
	1	+/**
	2	+ * Assign user to course
	3	+ *
	4	+ * @since 4.2.5.6
	5	+ * @version 1.0.1
	6	+ */
	7	+import * as AdminUtils from '../utils-admin.js';
	8	+
	9	+export default function assignUserCourse() {
	10	+ let elFormAssignUserCourse;
	11	+ let elFormUnAssignUserCourse;
	12	+ let elUserUnAssign, elCourseUnAssign, elUserAssign, elCourseAssign;
	13	+ const limitHandle = 5;
	14	+
	15	+ const getAllElements = () => {
	16	+ elFormAssignUserCourse = document.querySelector( '#lp-assign-user-course-form' );
	17	+ elFormUnAssignUserCourse = document.querySelector( '#lp-unassign-user-course-form' );
	18	+
	19	+ if ( elFormAssignUserCourse ) {
	20	+ elUserUnAssign = elFormUnAssignUserCourse.querySelector( '[name=user_ids]' );
	21	+ elCourseUnAssign = elFormUnAssignUserCourse.querySelector( '[name=course_ids]' );
	22	+ }
	23	+
	24	+ if ( elFormUnAssignUserCourse ) {
	25	+ elUserAssign = elFormAssignUserCourse.querySelector( '[name=user_ids]' );
	26	+ elCourseAssign = elFormAssignUserCourse.querySelector( '[name=course_ids]' );
	27	+ }
	28	+ };
	29	+
	30	+ const events = () => {
	31	+ const elForm = document.querySelector( 'form' );
	32	+ if ( ! elForm ) {
	33	+ return;
	34	+ }
	35	+
	36	+ document.addEventListener( 'submit', ( e ) => {
	37	+ const elForm = e.target;
	38	+ const formData = new FormData( e.target ); // Create a FormData object from the form
	39	+
	40	+ // get values of form.
	41	+ const obj = Object.fromEntries( Array.from( formData.keys(), ( key ) => {
	42	+ const val = formData.getAll( key );
	43	+ return [ key, val.length > 1 ? val : val.pop() ];
	44	+ } ) );
	45	+
	46	+ if ( elForm.id === 'lp-assign-user-course-form' ) {
	47	+ e.preventDefault();
	48	+
	49	+ if ( ! confirm( 'Are you sure you want to Assign?' ) ) {
	50	+ return;
	51	+ }
	52	+
	53	+ const { packages, data, totalPage } = handleDataBeforeSend( obj );
	54	+ fetchAPIAssignCourse( packages, data, 1, totalPage );
	55	+ } else if ( elForm.id === 'lp-unassign-user-course-form' ) {
	56	+ e.preventDefault();
	57	+
	58	+ if ( ! confirm( 'Are you sure you want to Unassign?' ) ) {
	59	+ return;
	60	+ }
	61	+
	62	+ const { packages, data, totalPage } = handleDataBeforeSend( obj );
	63	+ fetchAPIUnAssignCourse( packages, data, 1, totalPage );
	64	+ }
	65	+ } );
	66	+ };
	67	+
	68	+ const handleDataBeforeSend = ( dataRaw ) => {
	69	+ // Cut to packages to send, 1 packages has 5 items.
	70	+ let arrCourseIds = [];
	71	+ let arrUserIds = [];
	72	+ if ( typeof dataRaw.course_ids === 'string' ) {
	73	+ arrCourseIds.push( dataRaw.course_ids );
	74	+ } else if ( typeof dataRaw.course_ids === 'object' ) {
	75	+ arrCourseIds = dataRaw.course_ids;
	76	+ }
	77	+
	78	+ if ( typeof dataRaw.user_ids === 'string' ) {
	79	+ arrUserIds.push( dataRaw.user_ids );
	80	+ } else if ( typeof dataRaw.user_ids === 'object' ) {
	81	+ arrUserIds = dataRaw.user_ids;
	82	+ }
	83	+
	84	+ const packages = [];
	85	+ arrCourseIds.map( ( courseId, indexCourse ) => {
	86	+ const item = {};
	87	+
	88	+ item.course_id = courseId;
	89	+ arrUserIds.map( ( userID, indexUser ) => {
	90	+ const newItem = { ...item, user_id: userID };
	91	+ packages.push( newItem );
	92	+ } );
	93	+ } );
	94	+
	95	+ const data = packages.slice( 0, limitHandle );
	96	+ const totalPage = Math.ceil( packages.length / limitHandle );
	97	+
	98	+ return { packages, data, totalPage };
	99	+ };
	100	+
	101	+ const fetchAPIAssignCourse = ( packages, data, page, totalPage ) => {
	102	+ const url = AdminUtils.Api.admin.apiAssignUserCourse;
	103	+ const params = {
	104	+ headers: {
	105	+ 'Content-Type': 'application/json',
	106	+ 'X-WP-Nonce': lpDataAdmin.nonce,
	107	+ },
	108	+ method: 'POST',
	109	+ body: JSON.stringify( { data, page, totalPage } ),
	110	+ };
	111	+ const elProgress = elFormAssignUserCourse.querySelector( '.percent' );
	112	+ const elButtonAssign = elFormAssignUserCourse.querySelector( '.lp-button-assign-course' );
	113	+ const elMessage = elFormAssignUserCourse.querySelector( '.message' );
	114	+ elButtonAssign.disabled = true;
	115	+
	116	+ AdminUtils.Utils.lpFetchAPI( url, params, {
	117	+ success: ( response ) => {
	118	+ const { status, message } = response;
	119	+ if ( status === 'success' ) {
	120	+ let page = parseInt( response.data.page );
	121	+ const begin = page * limitHandle;
	122	+ const end = begin + limitHandle;
	123	+ data = packages.slice( begin, end );
	124	+ elProgress.innerHTML = response.data.percent;
	125	+ fetchAPIAssignCourse( packages, data, ++page, totalPage );
	126	+ } else if ( status === 'finished' ) {
	127	+ elProgress.innerHTML = '';
	128	+ elMessage.style.color = 'green';
	129	+ elMessage.innerHTML = message;
	130	+ setTimeout( () => {
	131	+ elMessage.innerHTML = '';
	132	+ }, 2000 );
	133	+ elButtonAssign.disabled = false;
	134	+ // Clear data selected on Tom Select.
	135	+ if ( ! elUserAssign.tomselect || ! elCourseAssign.tomselect ) {
	136	+ return;
	137	+ }
	138	+
	139	+ elUserAssign.tomselect.clear();
	140	+ elCourseAssign.tomselect.clear();
	141	+ } else if ( status === 'error' ) {
	142	+ elButtonAssign.disabled = false;
	143	+ elMessage.style.color = 'red';
	144	+ elMessage.innerHTML = message;
	145	+ setTimeout( () => {
	146	+ elMessage.innerHTML = '';
	147	+ }, 2000 );
	148	+ }
	149	+ },
	150	+ error: ( err ) => {
	151	+ elButtonAssign.disabled = false;
	152	+ elMessage.innerHTML = err.message;
	153	+ },
	154	+ completed: () => {
	155	+
	156	+ },
	157	+ } );
	158	+ };
	159	+
	160	+ const fetchAPIUnAssignCourse = ( packages, data, page, totalPage ) => {
	161	+ const url = AdminUtils.Api.admin.apiUnAssignUserCourse;
	162	+ const params = {
	163	+ headers: {
	164	+ 'Content-Type': 'application/json',
	165	+ 'X-WP-Nonce': lpDataAdmin.nonce,
	166	+ },
	167	+ method: 'POST',
	168	+ body: JSON.stringify( { data, page, totalPage } ),
	169	+ };
	170	+ const elProgress = elFormUnAssignUserCourse.querySelector( '.percent' );
	171	+ const elButtonAssign = elFormUnAssignUserCourse.querySelector( '.lp-button-unassign-course' );
	172	+ const elMessage = elFormUnAssignUserCourse.querySelector( '.message' );
	173	+ elButtonAssign.disabled = true;
	174	+
	175	+ AdminUtils.Utils.lpFetchAPI( url, params, {
	176	+ success: ( response ) => {
	177	+ const { status, message } = response;
	178	+ if ( status === 'success' ) {
	179	+ let page = parseInt( response.data.page );
	180	+ const begin = page * limitHandle;
	181	+ const end = begin + limitHandle;
	182	+ data = packages.slice( begin, end );
	183	+ elProgress.innerHTML = response.data.percent;
	184	+ fetchAPIUnAssignCourse( packages, data, ++page, totalPage );
	185	+ } else if ( status === 'finished' ) {
	186	+ elProgress.innerHTML = '';
	187	+ elMessage.style.color = 'green';
	188	+ elMessage.innerHTML = message;
	189	+ setTimeout( () => {
	190	+ elMessage.innerHTML = '';
	191	+ }, 2000 );
	192	+ elButtonAssign.disabled = false;
	193	+ // Clear data selected on Tom Select.
	194	+ if ( ! elUserUnAssign.tomselect || ! elCourseUnAssign.tomselect ) {
	195	+ return;
	196	+ }
	197	+
	198	+ elUserUnAssign.tomselect.clear();
	199	+ elCourseUnAssign.tomselect.clear();
	200	+ } else if ( status === 'error' ) {
	201	+ elButtonAssign.disabled = false;
	202	+ elMessage.style.color = 'red';
	203	+ elMessage.innerHTML = message;
	204	+ setTimeout( () => {
	205	+ elMessage.innerHTML = '';
	206	+ }, 2000 );
	207	+ }
	208	+ },
	209	+ error: ( err ) => {
	210	+ elButtonAssign.disabled = false;
	211	+ elMessage.innerHTML = err.message;
	212	+ },
	213	+ completed: () => {
	214	+
	215	+ },
	216	+ } );
	217	+ };
	218	+
	219	+ // DOMContentLoaded.
	220	+ document.addEventListener( 'DOMContentLoaded', () => {
	221	+ getAllElements();
	222	+ if ( ! elFormAssignUserCourse ) {
	223	+ return;
	224	+ }
	225	+
	226	+ events();
	227	+ } );
	228	+}