| 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 |
} |
| 229 |
|