In my Project Management App I want to show an HTML list of users with there Thumbnail avatar image for all users who have edited a Task record.
I am calling this list the participant list just like GitHub does for there Issues. GItHUb shows a lisrt of user thumbnails sorted by date to show the most recent active user who participatedon an Issue in a GitHub repo. I want to reproduce this functionality on my Task records.
So when a user edits a Task record they will be added to a participant list sorted by most recent activity. It will show there thumbnail image. If a user is already in the list and they make another edit, they will not be added 2x to the list. Instead they will be moved to position 1 in the sort order of thumbnails if they are not already at that position!
This flow below explains how it would function in more detail...
if(user is not in participant list){
// Add user to DB for this Task record participant list with there Datetime and UserID of the update.
// Then add there image to the participant list in front of the others at position number 1
}elseif(user is already in participant list){
if(if user is in DOM HTML participant list at position number 1){
// update DB participant list with Datetime for this user but do not update the DOM HTML
}elseif( if user is not in position number 1){
// update DB with Datetime for user in participant list and then also update the participant
// list DOM HTML to remove the users image and then re-add it at position number 1
}
}
I will be processing the edits the user made in the backend with PHP so at that same time would be ideal for me to update there last activity DateTime and add them to the participant list in the DB.
I would then like to handle the functionality of adding, re-ordering, etc of the thumbnail list in the DOM with JavaScript.
So perhaps the PHP could return a JSON string of data to indicate if the user need to be re-ordered in the DOM list or added if they do not even exist yet!
If anyone has any ideas on how to implement the JavaScript side of this, I am open to all input please
More flow theory:
- My PHP JSON could return a flag indicating if the user avatar is already in the previous list or not. If not it will know it needs to add the user as he doesn't exist at all yet.
- The PHP flag would also indicate in the case that use had already been in previous participant list and needs it's sort order updated. This would mean removing previous thumbnail image in the old sort order location in the DOM HTML and re-adding back into position 1
- 1 idea is to simply have the PHP return the full HTML of the whole list with all users in correct sort order each time but this would mean it would be updating even when the user doesn't need to change position or be added. It would also mean more data being transferred however this is the simple route and I might just do it if I can't get a better solution from this question.
- Reconsidering. My PHP could also send back a flag indicating that no new sort order change or new user addition exist so do not make any DOM updates. It would then only send back a new userlist in the event that a new user is added to list or else previous user needs to update sort order.
