I’m quite satisfied with my progress this week since there is one more thing left for the attendance screen to complete which is authorization. For this week, I managed to build functionality for filter buttons which are the select venue and select event, not to forget refresh icon button.
So the flow of the user which is attendance taker are like this. The attendance screen consists of select venue filter drop-down button, select event drop-down button, and refresh icon button on the first attendance screen. The attendance taker which is I will call it as a user now needs to select the venue of the competition first. After user select venue of the competition, for example, Kuala Lumpur then only select events filter button can be used. It will show the list of player name with their piece name after the user selects the select event filter button. I’m using drop-down filter button for both select venue and select event because it helps the user to really see the things that they selected. Maybe you can’t imagine it now but no worries I will show you few photos of attendance screen in my next post after I completed the authorization part. Next, the user can take the attendance of the player of the competition according to the venue and event that they are already selected.
To avoid human error which is accidentally hitting the checkbox button for attendance taken, I decided to add dialog box on the screen after the user hit checkbox button. The dialog box asking for confirmation before user submit the attendance. The attendance will be taken after the user confirms their action in the dialog box and if they are accidentally hit it they can always click cancel in the dialog box.
After I’ve completed all the functionality, Dr. Shawn asked to do some changes on the screen as he wants the player name are all in capital letters. For this case, I’m using Vue.filter method in order to make it works.
Previous: Current:
Benjamin Sia Hun Xua BENJAMIN SIA HUN XUA
Dr.Shawn made a number of changes to my code using a different technique as he used Vue watchers to perform the asynchronous update when any value changes because this technique is the recommended way by Vue.js. He also added a new library which is LoDash for advanced filtering and debounce() function for the refresh button.
On Saturday, we had a great talk with Dr.Shawn as we went lunch together at Sunway Velocity. We were discussing the current issues in Malaysia and it was really fun. It was a great week indeed as you can see me smiling now haha.
0 Comments