Convert most of user directory view to vuejs

dashboard/src/components/Index.vue

@@ -6,6 +6,7 @@ import AppsView from './AppsView.vue';
 import AppstoreView from './AppstoreView.vue';
 import ProfileView from './ProfileView.vue';
 import SupportView from './SupportView.vue';
+import UserDirectoryView from './UserDirectoryView.vue';
 import VolumesView from './VolumesView.vue';
 
 import ProfileModel from '../models/ProfileModel.js';
@@ -17,6 +18,7 @@ const VIEWS = {
   APPSTORE: 'appstore',
   PROFILE: 'profile',
   SUPPORT: 'support',
+  USER_DIRECTORY: 'user-directory',
   VOLUMES: 'volumes',
 };
 
@@ -28,6 +30,7 @@ export default {
     Notification,
     ProfileView,
     SupportView,
+    UserDirectoryView,
     VolumesView,
   },
   data() {
@@ -61,6 +64,8 @@ export default {
         that.view = VIEWS.PROFILE;
       } else if (view === VIEWS.SUPPORT) {
         that.view = VIEWS.SUPPORT;
+      }  else if (view === VIEWS.USER_DIRECTORY) {
+        that.view = VIEWS.USER_DIRECTORY;
       } else if (view === VIEWS.VOLUMES) {
         that.view = VIEWS.VOLUMES;
       } else {
@@ -85,6 +90,7 @@ export default {
     <AppstoreView v-if="view === VIEWS.APPSTORE" />
     <ProfileView v-if="view === VIEWS.PROFILE" />
     <SupportView v-if="view === VIEWS.SUPPORT" />
+    <UserDirectoryView v-if="view === VIEWS.USER_DIRECTORY" />
     <VolumesView v-if="view === VIEWS.VOLUMES" />
   </div>
 </template>