Overview
Jatheon dashboard use case is meant for managing users, emails, user actions, storage space for every individual user etc. Jatheon dashboard is a proof of concept. Exact reason why only "audit" page was built. Audit page displays user logs. Priority on this page was to convert each component from design (Invision) to front-end (VueJS). Main focus was set on three dropdown elements. First dropdown, which is a user based, includes search functionality for users to search through dropdown elements. Second dropdown is meant to select user action, while third dropdown is simple for filtering results with keywords.
Functionality is seeded. Meaning, functionality works only for these three main dropdown elements. Majority of dashboard is built using modern principles combined with powerful flexbox technology. Every separate element on the project is it's own component, including side navigation, top navigation with a search input and user initials with dropdown, bottom navigation with dropdown elements and search button, main dashboard view displaying search results.
Stack
VueJS -
SFC, Vuex, Vue routerSASS/SCSS -
Mixins, Nesting, Variables, much more readable codeInVision -
UI, UXFeatures
Dashboard View & States
As mentioned in the overview section of the project, priority was put on three dashboard navigation input elements. First two dropdowns are the same component, though their content is changed using vue props and emitters for method calls. Third element is a simple input element. Dropdowns have their own state, in translation, user is able to select one or multiple users in the first element, directly affecting the state of the second dropdown. Second dropdown is disabled if user didn't select any of the users from the first dropdown. Search functionality is built using simple 'filter()' method that returns filtered elements. Aside of search functionality, select all and clear all is also implemented for better UX. Search func. was not required on second dropdown. 'Search' button also has it's own state, where it gets disabled after click event is initiated.
Conclusion
Even if project is on a smaller scale, functionality of dropdown elements and their states is pretty advanced. Bunch of JavaScript code relies on newer syntax (JSNext - ES6+) combined with lightweight VueJS framework. Reusability was one of the parameters set for this proof of concept project. That's where VueJS comes into the play with Single File Components, getting most out of it and improving performance with lightweight / minimal amount of the code.