The race against time continues as I strive to complete the things that I need to do for the project for good by the end of this month. One of the things that I have done for this week was implementing a basic search and sort functionality for the projects as part of the UI. In recent versions of Vuetify, they added a few new components, one of which helps to deal with auto-completion for a search bar which is great for my case. All that is needed to be done is to pass an array of strings to the component and it works as expected. As for sorting, a simple select input would do. Projects can be sorted by name and modified date at the moment, both in ascending and descending order. Here are examples of how I’ve done it for the UI:
Apart from that, I also implemented the drag and drop functionality for downloading a project’s bitstream into a board of the user’s choice. It wasn’t too difficult to implement it. First, I attach an event listener to each of the project component that listens for the start of a drag event. The specific DOM event for that would be the dragstart event. As soon as the event fires the project’s UUID gets written to a global object through its setter method, e.g:
let draggedProject = {
uuid: ” “,
setUUID: function (uuidArg) { this.uuid = uuidArg; }
}
This would be fine since only one project can be dragged to a board. Likewise, each of the board component would be listening for a drop event as well. When the drop event gets triggered on one of the boards, it will retrieve the project UUID from the global object and start the transfer. The project UUID is passed as a query parameter during a PUT request to the firmware endpoint in the backend, so that the correct bitstream file can be retrieved from that particular project’s archive file.
In order for the drop event to actually work, the dragover event needs to have the preventDefault and stopPropagation event modifiers on it. The reason for that is because its default action sets the current drag operation to “none” for some reason, and we would also would not want the event to bubble up or propagate upwards in the DOM tree. Those event modifiers should be called upon the drop event itself as well. Here is the Vuejs way of doing it:
<some-vue-component @dragover.prevent.stop=”” @drop.prevent.stop=”dropEventHandler”>
</some-vue-component>
Note there is no need for an explicit event handler for the dragover event, since it is not the event we want to handle for.
There are other minor things I did for the UI this week as well, like having more snackbar messages for certain user actions, changing the loading indicator when switching storage, etc. That is all for part 4. Be ready for part 5 and part 6.
0 Comments