Merge pull request #3439 from NationalSecurityAgency/t#3367/slide_deck

T#3367/slide deck

Author: rmmayo

dashboard/package.json

@@ -36,6 +36,7 @@
     "material-icons": "1.13.14",
     "node-emoji": "2.2.0",
     "number-format.js": "2.0.9",
+    "pdfjs-dist": "5.3.93",
     "pdfkit": "0.17.1",
     "pinia": "3.0.3",
     "pluralize": "8.0.0",

dashboard/public/static/videos/test-slides-1.pdf

@@ -135,7 +135,9 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
   const projectMetricsTagCharts = computed(() => config.value.projectMetricsTagCharts)
   const maxDailyUserEvents = computed(() => config.value.maxDailyUserEvents)
   const allowedVideoUploadMimeTypes = computed(() => config.value.allowedVideoUploadMimeTypes)
+  const allowedSlidesUploadMimeTypes = computed(() => config.value.allowedSlidesUploadMimeTypes)
   const videoUploadWarningMessage = computed(() => config.value.videoUploadWarningMessage)
+  const slidesUploadWarningMessage = computed(() => config.value.slidesUploadWarningMessage)
   const maxVideoCaptionsLength = computed(() => config.value.maxVideoCaptionsLength)
   const maxVideoTranscriptLength = computed(() => config.value.maxVideoTranscriptLength)
   const userPageTagsToDisplay = computed(() => config.value.userPageTagsToDisplay)
@@ -236,8 +238,10 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
     approvalConfUserTagLabel,
     projectMetricsTagCharts,
     maxDailyUserEvents,
+    allowedSlidesUploadMimeTypes,
     allowedVideoUploadMimeTypes,
     videoUploadWarningMessage,
+    slidesUploadWarningMessage,
     maxVideoCaptionsLength,
     maxVideoTranscriptLength,
     userPageTagsToDisplay,

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

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {onMounted, onUnmounted, ref, computed} from "vue";
+
+export const useElementSizeUtil = (elementRef) => {
+  const width = ref(null)
+  const height = ref(null)
+
+  const handleWindowResize = () => {
+    const elementRect = elementRef.value?.getBoundingClientRect()
+    if (elementRect) {
+      width.value = Math.trunc(elementRect.width)
+      height.value = Math.trunc(elementRect.height)
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', handleWindowResize);
+    handleWindowResize()
+  })
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleWindowResize);
+  })
+
+
+  return {
+    width,
+    height
+  }
+}

dashboard/src/common-components/utilities/UseElementSizeUtil.js

@@ -20,6 +20,7 @@ import { useSkillsState } from '@/stores/UseSkillsState.js'
 import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue';
 import LoadingContainer from '@/components/utils/LoadingContainer.vue';
 import ChildRowSkillsDisplay from '@/components/skills/ChildRowSkillsDisplay.vue';
+import SlideDeck from "@/components/slides/SlideDeck.vue";
 
 const route = useRoute();
 const skillsState = useSkillsState();
@@ -31,7 +32,7 @@ const skillsState = useSkillsState();
     <loading-container :is-loading="skillsState.loadingSkill">
       <Card>
         <template #content>
-          <child-row-skills-display 
+          <child-row-skills-display
             v-if="skillsState.skill && skillsState.skill.skillId" 
             :skill="skillsState.skill" />
         </template>

dashboard/src/components/skills/SkillOverview.vue

@@ -82,6 +82,7 @@ const navItems = ref([])
 const buildNavItems = () => {
   const items = []
   items.push({ name: 'Overview', iconClass: 'fa-info-circle skills-color-overview', page: 'SkillOverview' })
+  items.push({ name: 'Slides', iconClass: 'fa-solid fa-file-pdf', page: 'ConfigureSlides' })
   items.push({ name: 'Audio/Video', iconClass: 'fa-play-circle skills-color-video', page: 'ConfigureVideo' })
   items.push({
     name: 'Expiration',

dashboard/src/components/skills/SkillPage.vue

@@ -0,0 +1,61 @@
+/*
+Copyright 2025 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+<script setup lang="ts">
+import {computed} from "vue";
+
+const props = defineProps({
+  currentPage: Number,
+  totalPages: Number,
+})
+const emit = defineEmits(['prevPage', 'nextPage'])
+
+const prevPage = () => {
+  emit('prevPage')
+}
+const nextPage = () => {
+  emit('nextPage')
+}
+
+const progressPercent = computed(() => (props.currentPage / props.totalPages) * 100)
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <SkillsButton
+        aria-label="Previous Slide"
+        icon="fa-solid fa-circle-chevron-left"
+        class="shadow-md"
+        data-cy="prevSlideBtn"
+        @click="prevPage"
+        :disabled="currentPage <= 1"/>
+    <div>
+      <div data-cy="currentSlideMsg">Slide {{ currentPage }} of {{ totalPages }}</div>
+      <ProgressBar :value="progressPercent" :show-value="false" style="height: 5px" aria-label="Slides Progress"></ProgressBar>
+    </div>
+    <SkillsButton
+        aria-label="Next Slide"
+        icon="fa-solid fa-circle-chevron-right"
+        class="shadow-md"
+        data-cy="nextSlideBtn"
+        @click="nextPage"
+        :disabled="currentPage >= totalPages"/>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>