#2490: skills display preview for a project user; tests - WIP

dashboard-prime/src/common-components/stores/UseAppConfig.js

@@ -113,7 +113,7 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
   const approvalConfUserTagLabel = computed(() => config.value.approvalConfUserTagLabel)
   const projectMetricsTagCharts = computed(() => config.value.projectMetricsTagCharts)
   const maxDailyUserEvents = computed(() => config.value.maxDailyUserEvents)
-
+  const userPageTagsToDisplay = computed(() => config.value.userPageTagsToDisplay)
   return {
     loadConfigState,
     refreshConfig,
@@ -184,6 +184,7 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
     approvalConfUserTagKey,
     approvalConfUserTagLabel,
     projectMetricsTagCharts,
-    maxDailyUserEvents
+    maxDailyUserEvents,
+    userPageTagsToDisplay
   }
 })

dashboard-prime/src/components/header/SkillsBreadcrumb.vue

@@ -122,7 +122,6 @@ const buildBreadcrumb = () => {
 
         if (key) {
           if (!shouldExcludeKey(key)) {
-            console.log(`key: ${key}, value: ${value}`)
             if (key?.toLowerCase() === 'skills' && value?.toLowerCase() === 'inception') {
               newItems.push(buildResItem(null, 'Dashboard Skills', res, index))
             } else {

dashboard-prime/src/components/metrics/ProjectMetrics.vue

@@ -13,7 +13,6 @@ onMounted(() => {
 });
 
 const buildTagCharts = () => {
-  console.log(appConfig.projectMetricsTagCharts);
   if (appConfig.projectMetricsTagCharts) {
     const json = appConfig.projectMetricsTagCharts;
     tagCharts.value = JSON.parse(json);

dashboard-prime/src/components/metrics/common/UserTagChart.vue

@@ -55,7 +55,6 @@ const loadData = () => {
 
   MetricsService.loadChart(route.params.projectId, 'numUsersPerTagBuilder', params)
       .then((dataFromServer) => {
-        console.log(dataFromServer);
         if (dataFromServer) {
           const localSeries = [];
           const labels = [];

dashboard-prime/src/components/metrics/skill/PostAchievementUsersTable.vue

@@ -56,7 +56,6 @@ const loadData = () => {
     sortBy: sortField.value ? sortField.value : 'userId',
     sortDesc: sortOrder.value !== 1,
   };
-  console.log(queryParams);
   MetricsService.loadChart(route.params.projectId, chartToLoad.value, queryParams).then((dataFromServer) => {
         if (dataFromServer) {
           hasData.value = true;

dashboard-prime/src/components/users/SkillsDisplayPreview.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue'
+import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue'
+import { useProjConfig } from '@/stores/UseProjConfig.js'
+import UsersService from '@/components/users/UsersService.js'
+import SkillsDisplayHome from '@/skills-display/components/SkillsDisplayHome.vue'
+import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
+import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js'
+import { useRoute } from 'vue-router'
+
+const projConfig = useProjConfig()
+
+const skillsDisplayAttributes = useSkillsDisplayAttributesState()
+const themeState = useSkillsDisplayThemeState()
+const route = useRoute()
+
+skillsDisplayAttributes.projectId = route.params.projectId
+skillsDisplayAttributes.userId = route.params.userId
+skillsDisplayAttributes.serviceUrl = ''
+skillsDisplayAttributes.loadingConfig = false
+skillsDisplayAttributes.internalBackButton = false
+
+themeState.theme.landingPageTitle = 'User\'s Skills Preview'
+themeState.theme.disableSkillTreeBrand = true
+themeState.theme.disableBreadcrumb = true
+skillsDisplayAttributes.loadConfigStateIfNeeded()
+
+const checkingAccess = ref(true)
+const canAccess = ref(true)
+
+onMounted(() => {
+  projConfig.afterProjConfigStateLoaded().then((projConfigRes) => {
+    if (projConfigRes.invite_only === 'true') {
+      canAccess.value = false;
+      UsersService.canAccess(route.params.projectId, route.params.userId).then((res) => {
+        canAccess.value = res === true;
+      }).finally(() => {
+        checkingAccess.value = false;
+      });
+    } else {
+      checkingAccess.value = false;
+    }
+  })
+})
+
+const isLoading = computed(() => checkingAccess.value || skillsDisplayAttributes.loadingConfig)
+</script>
+
+<template>
+<div>
+  <sub-page-header title="User's Display">
+  </sub-page-header>
+
+  <skills-spinner :is-loading="isLoading" />
+  <div v-if="!isLoading">
+    <Message v-if="!canAccess" icon="fas fa-user-slash" severity="error" :closable="false">
+      Access Revoked! This user's access was previously revoked, their Client Display is disabled until they are granted access.
+    </Message>
+    <skills-display-home v-if="canAccess" class="my-3" />
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

dashboard-prime/src/components/users/UserPage.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import PageHeader from '@/components/utils/pages/PageHeader.vue'
+import Navigation from '@/components/utils/Navigation.vue'
+import { useRoute } from 'vue-router'
+import { useProjectUserState } from '@/stores/UseProjectUserState.js'
+import UsersService from '@/components/users/UsersService.js'
+import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+
+const route = useRoute()
+const projectUserState = useProjectUserState()
+const appConfig = useAppConfig()
+
+const isLoading = ref(true)
+const userTitle = ref( '')
+const userIdForDisplay = ref( '')
+const tags = ref( '')
+
+const headerOptions = computed(() => {
+  return {
+    icon: 'fas fa-user skills-color-users',
+    title: `USER: ${userTitle.value}`,
+    subTitle: `ID: ${userIdForDisplay.value}`,
+    stats: [{
+      label: 'Skills',
+      count: projectUserState.numSkills,
+      icon: 'fas fa-graduation-cap skills-color-skills',
+    }, {
+      label: 'Points',
+      count: projectUserState.userTotalPoints,
+      icon: 'far fa-arrow-alt-circle-up skills-color-points',
+    }],
+  }
+})
+
+const navItems = computed(() => {
+  return [
+    { name: 'Client Display', iconClass: 'fa-user skills-color-skills', page: 'ClientDisplayPreview' },
+    { name: 'Performed Skills', iconClass: 'fa-award skills-color-events', page: 'UserSkillEvents' },
+  ];
+})
+
+onMounted(() => {
+  projectUserState.loadUserDetailsState(route.params.projectId, route.params.userId)
+  loadUserInfo()
+})
+
+
+const loadUserInfo = () => {
+  userTitle.value = route.params.userId;
+  userIdForDisplay.value =route.params.userId;
+  let userTags;
+
+  if (appConfig.userPageTagsToDisplay) {
+    userTags = UsersService.getUserTags(route.params.userId).then((response) => {
+      tags.value = processUserTags(response);
+    });
+  }
+
+  const userDetails = () => {
+    return UsersService.getUserInfo(route.params.projectId, route.params.userId)
+      .then((result) => {
+        userIdForDisplay.value = result.userIdForDisplay;
+        userTitle.value = result.first && result.last ? `${result.first} ${result.last}` : result.userIdForDisplay;
+        return projectUserState.loadUserDetailsState(route.params.projectId, route.params.userId)
+      });
+  }
+
+  Promise.all([userTags, userDetails]).finally(() => {
+    isLoading.value = false;
+  });
+}
+
+const processUserTags = (userTags) =>{
+  const userPageTags = appConfig.userPageTagsToDisplay;
+  const tags = [];
+  if (userPageTags) {
+    const tagSections = userPageTags.split('|');
+    tagSections.forEach((section) => {
+      const [key, label] = section.split('/');
+      tags.push({
+        key, label,
+      });
+    });
+  }
+
+  const processedTags = [];
+  tags.forEach((tag) => {
+    const userTag = userTags.filter((ut) => ut.key === tag.key);
+    if (userTag) {
+      const values = userTag.map((ut) => ut.value);
+      if (values.length > 0) {
+        processedTags.push({ label: tag.label, key: tag.key, value: values });
+      }
+    }
+  });
+  return processedTags;
+}
+
+</script>
+
+<template>
+<div>
+  <page-header :loading="isLoading" :options="headerOptions">
+  </page-header>
+
+  <navigation v-if="!isLoading" :nav-items="navItems">
+  </navigation>
+</div>
+</template>
+
+<style scoped>
+
+</style>

dashboard-prime/src/components/users/UserSkillsPerformed.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  Skills Performed
+</div>
+</template>
+
+<style scoped>
+
+</style>

dashboard-prime/src/components/users/Users.vue

@@ -6,7 +6,7 @@ import UsersTable from './UsersTable.vue';
 <template>
   <div class="usersTable">
     <sub-page-header title="Users"/>
-    <Card>
+    <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
       <template #content>
         <UsersTable />
       </template>