codecombat · mrfinch · Jul 31, 2024 · Jul 10, 2024 · Jul 18, 2024 · Jul 18, 2024
diff --git a/app/assets/images/common/modal/curriculum-guide-screenshot.webp b/app/assets/images/common/modal/curriculum-guide-screenshot.webp
diff --git a/app/assets/images/common/modal/right-arrow.webp b/app/assets/images/common/modal/right-arrow.webp
diff --git a/app/core/Router.js b/app/core/Router.js
@@ -484,6 +484,7 @@ module.exports = (CocoRouter = (function () {
         'teachers/resources_old': go('teachers/ResourceHubView', { redirectStudents: true }),
         'teachers/resources': utils.isCodeCombat && me.useChinaHomeView() ? go('teachers/ResourceHubView', { redirectStudents: true }) : go('core/SingletonAppVueComponentView', { redirectStudents: true }),
         'teachers/resources_new': go('core/SingletonAppVueComponentView'),
+        'teachers/curriculum': teacherProxyRoute(go('teachers/curriculum', { redirectStudents: true })),
         'teachers/resources/ap-cs-principles': go('teachers/ApCsPrinciplesView', { redirectStudents: true }),
         'teachers/resources/:name': go('teachers/MarkdownResourceView', { redirectStudents: true }),
         'teachers/professional-development': teacherProxyRoute(go('pd/PDView', { redirectStudents: true })),

diff --git a/app/core/store/modules/teacherDashboard.js b/app/core/store/modules/teacherDashboard.js
@@ -213,6 +213,9 @@ export default {
         } else if (componentName === COMPONENT_NAMES.PD) {
           // PD page
           await dispatch('fetchDataPDAsync', options)
+        } else if (componentName === COMPONENT_NAMES.CURRICULUM_GUIDE) {
+          // Curriculum page
+          await dispatch('fetchDataCurriculumGuideAsync', options) // does not block loading indicator
         } else if (componentName === COMPONENT_NAMES.STUDENT_ASSESSMENTS) {
           // Assessments page
           await dispatch('fetchDataStudentAssessments', options)
@@ -361,6 +364,13 @@ export default {
       await Promise.all(fetchPromises)
     },
 
+    async fetchDataCurriculumGuideAsync ({ state, dispatch, rootGetters }, options = {}) {
+      const fetchPromises = []
+      fetchPromises.push(dispatch('prepaids/fetchPrepaidsForTeacher', { teacherId: state.teacherId }, { root: true }))
+      fetchPromises.push(dispatch('teacherDashboard/fetchDataCurriculumGuide', undefined, { root: true }))
+      await Promise.all(fetchPromises)
+    },
+
     // Resource Hub Page
     async fetchDataResourceHubAsync ({ state, dispatch }, options = {}) {
       const fetchPromises = []

diff --git a/app/core/vueRouter.js b/app/core/vueRouter.js
@@ -271,6 +271,7 @@ export default function getVueRouter () {
               }
             },
             { path: 'professional-development', component: () => import(/* webpackChunkName: "pd" */ '../views/pd/PDView.vue') },
+            { path: 'curriculum', component: () => import(/* webpackChunkName: "curriculum" */ '../../ozaria/site/components/teacher-dashboard/BaseCurriculumGuide/index.vue') },
             {
               path: 'ai-league',
               component: () => import(/* webpackChunkName: "ai-league" */ '../views/ai-league/AILeagueView.vue'),

diff --git a/app/locale/en.js b/app/locale/en.js
@@ -1780,7 +1780,9 @@ module.exports = {
       start_teaching_ai_today: 'Start Teaching AI Today!',
       hackstack_beta_release: 'HackStack Beta Release',
       introducing_ai_hackstack: 'Introducing AI HackStack, a generative AI teaching tool for beginners. It provides safe access to top AI models like ChatGPT, Claude, and DALL-E.',
-      our_curriculum_empowers_students: 'Our curriculum empowers students to use AI to create websites, games, art, and more. Currently in beta.'
+      our_curriculum_empowers_students: 'Our curriculum empowers students to use AI to create websites, games, art, and more. Currently in beta.',
+      dashboard_update: 'Dashboard Update',
+      dashboard_update_message: 'We are currently optimizing the dashboard for your convenience. You can now find the Curriculum Guide in the left sidebar.'
     },
 
     no_licenses_page: {

diff --git a/app/schemas/models/user.js b/app/schemas/models/user.js
@@ -406,7 +406,8 @@ _.extend(UserSchema.properties, {
   seenPromotions: {
     type: 'object',
     properties: {
-      'hackstack-beta-release-modal': { type: 'boolean' }
+      'hackstack-beta-release-modal': { type: 'boolean' },
+      'curriculum-sidebar-promotion-modal': { type: 'boolean' }
     }
   },
 

diff --git a/ozaria/site/components/teacher-dashboard/BaseCurriculumGuide/index.vue b/ozaria/site/components/teacher-dashboard/BaseCurriculumGuide/index.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
 
+import { COMPONENT_NAMES, PAGE_TITLES } from '../common/constants.js'
 import utils from 'core/utils'
 
 import ChapterNav from './components/ChapterNav'
@@ -10,6 +11,7 @@ import CstaStandards from './components/CstaStandards'
 import ModuleContent from './components/ModuleContent'
 
 export default {
+  name: COMPONENT_NAMES.CURRICULUM_GUIDE,
   components: {
     ChapterNav,
     ChapterInfo,
@@ -54,13 +56,21 @@ export default {
     }
   },
 
+  mounted () {
+    this.setTeacherId(me.get('_id'))
+    this.setPageTitle(PAGE_TITLES[this.$options.name])
+    this.fetchData({ componentName: this.$options.name, options: { loadedEventName: 'Curriculum Guide: Loaded' } })
+  },
+
   methods: {
     ...mapActions({
-      toggleCurriculumGuide: 'baseCurriculumGuide/toggleCurriculumGuide'
+      fetchData: 'teacherDashboard/fetchData'
     }),
     ...mapMutations({
       setSelectedLanguage: 'baseCurriculumGuide/setSelectedLanguage',
-      closeCurriculumGuide: 'baseCurriculumGuide/closeCurriculumGuide'
+      resetLoadingState: 'teacherDashboard/resetLoadingState',
+      setTeacherId: 'teacherDashboard/setTeacherId',
+      setPageTitle: 'teacherDashboard/setPageTitle'
     }),
     changeLanguage (e) {
       window.tracker?.trackEvent('Curriculum Guide: Language Changed from dropdown', { category: this.getTrackCategory, label: this.courseName })
@@ -86,71 +96,55 @@ export default {
 
 <template>
   <div>
-    <transition name="slide">
-      <div
-        v-if="isVisible"
-        id="curriculum-guide"
-      >
-        <div class="header">
-          <div class="header-icon">
-            <img src="/images/ozaria/teachers/dashboard/svg_icons/IconCurriculumGuide.svg">
-            <h2>{{ $t('teacher_dashboard.curriculum_guide') }}</h2>
-          </div>
-          <div
-            class="header-right"
-          >
-            <div class="code-language-dropdown">
-              <span class="select-language">{{ $t('courses.select_language') }}</span>
-              <select @change="changeLanguage">
-                <option
-                  value="python"
-                  :selected="getSelectedLanguage === 'python'"
-                >
-                  Python
-                </option>
-                <option
-                  value="javascript"
-                  :selected="getSelectedLanguage === 'javascript'"
-                >
-                  JavaScript
-                </option>
-              </select>
-            </div>
-            <img
-              class="close-btn"
-              src="/images/ozaria/teachers/dashboard/svg_icons/Icon_Exit.svg"
-              @click="toggleCurriculumGuide"
-            >
+    <div id="curriculum-guide">
+      <div class="header">
+        <div class="header-icon">
+          <img src="/images/ozaria/teachers/dashboard/svg_icons/IconCurriculumGuide.svg">
+          <h2>{{ $t('teacher_dashboard.curriculum_guide') }}</h2>
+        </div>
+        <div
+          class="header-right"
+        >
+          <div class="code-language-dropdown">
+            <span class="select-language">{{ $t('courses.select_language') }}</span>
+            <select @change="changeLanguage">
+              <option
+                value="python"
+                :selected="getSelectedLanguage === 'python'"
+              >
+                Python
+              </option>
+              <option
+                value="javascript"
+                :selected="getSelectedLanguage === 'javascript'"
+              >
+                JavaScript
+              </option>
+            </select>
           </div>
         </div>
+      </div>
 
-        <chapter-nav />
-        <chapter-info />
-
-        <div class="fluid-container">
-          <div class="row">
-            <div class="col-md-9">
-              <module-content
-                v-for="num in moduleNumbers"
-                :key="num"
-                :module-num="num"
-                :is-capstone="isCapstoneModule(num)"
-              />
-            </div>
-            <div class="col-md-3">
-              <concepts-covered :concept-list="conceptsCovered" />
-              <csta-standards :csta-list="cstaStandards" />
-            </div>
+      <chapter-nav />
+      <chapter-info />
+
+      <div class="fluid-container">
+        <div class="row">
+          <div class="col-md-9">
+            <module-content
+              v-for="num in moduleNumbers"
+              :key="num"
+              :module-num="num"
+              :is-capstone="isCapstoneModule(num)"
+            />
+          </div>
+          <div class="col-md-3">
+            <concepts-covered :concept-list="conceptsCovered" />
+            <csta-standards :csta-list="cstaStandards" />
           </div>
         </div>
       </div>
-    </transition>
-    <div
-      v-if="isVisible"
-      class="clickable-hide-area"
-
-      @click="closeCurriculumGuide"
-    />
+    </div>
   </div>
 </template>
 
@@ -161,37 +155,7 @@ export default {
 
 /* TODO: use app/styles/common/transition? */
   #curriculum-guide {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-
-    max-width: 1116px;
-    width: 90vw;
-    width: 1116px;
-    z-index: 1200;
-
-    max-height: 100vh;
-    overflow-y: scroll;
-
     background-color: white;
-    box-shadow: -8px 4px 20px rgba(0, 0, 0, 0.25);
-
-     /* For animating the panel sliding in and out. */
-    &.slide-enter-active, &.slide-leave-active {
-      -webkit-transition: right 0.7s ease;
-      -moz-transition: right 0.7s ease;
-      -o-transition: right 0.7s ease;
-      -ms-transition: right 0.7s ease;
-      transition: right 0.7s ease;
-    }
-
-    &.slide-enter, &.slide-leave-to {
-      right: -1116px;
-    }
-
-    &.slide-enter-to, &.slide-leave {
-      right: 0;
-    }
   }
 
   .fluid-container {
@@ -200,8 +164,13 @@ export default {
 
   .header {
     height: 60px;
-    border: 1px solid rgba(0, 0, 0, 0.13);
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
+
+    background-color: #f2f2f2;
+    border: 1px solid #d8d8d8;
+    /* Drop shadow bottom ref: https://css-tricks.com/snippets/css/css-box-shadow/ */
+    -webkit-box-shadow: 0 8px 6px -6px #D2D2D2;
+      -moz-box-shadow: 0 8px 6px -6px #D2D2D2;
+          box-shadow: 0 8px 6px -6px #D2D2D2;
 
     display: flex;
     flex-direction: row;
@@ -229,6 +198,7 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      margin-right: 12px;
     }
 
     .code-language-dropdown {

diff --git a/ozaria/site/components/teacher-dashboard/BaseTeacherDashboard/index.vue b/ozaria/site/components/teacher-dashboard/BaseTeacherDashboard/index.vue
@@ -6,8 +6,6 @@ import ModalRemoveStudents from '../modals/ModalRemoveStudents'
 import ModalOnboardingVideo from '../modals/ModalOnboardingVideo'
 import ModalEditClass from '../modals/ModalEditClass'
 
-import BaseCurriculumGuide from '../BaseCurriculumGuide'
-
 import SecondaryTeacherNavigation from '../common/SecondaryTeacherNavigation'
 import TitleBar from '../common/TitleBar'
 import LoadingBar from 'ozaria/site/components/common/LoadingBar'
@@ -37,7 +35,6 @@ export default {
     ModalAssignContent,
     ModalAddStudents,
     ModalRemoveStudents,
-    BaseCurriculumGuide,
     ModalOnboardingVideo,
     SecondaryTeacherNavigation,
     TitleBar,
@@ -159,17 +156,13 @@ export default {
   },
 
   beforeRouteUpdate (to, from, next) {
-    // Ensures we close curriculum guide when navigating between pages in the
-    // teacher dashboard.
-    this.closeCurriculumGuide()
     next()
   },
 
   methods: {
     ...mapMutations({
       setClassroomId: 'teacherDashboard/setClassroomId',
       setTeacherId: 'teacherDashboard/setTeacherId',
-      closeCurriculumGuide: 'baseCurriculumGuide/closeCurriculumGuide',
       setSelectedCourseId: 'teacherDashboard/setSelectedCourseIdCurrentClassroom',
       setTeacherPagesTrackCategory: 'teacherDashboard/setTrackCategory'
     }),
@@ -358,7 +351,6 @@ export default {
     <p> {{ $t('teacher.teacher_account_required') }} </p>
   </div>
   <div v-else>
-    <base-curriculum-guide :default-language="getLanguage" />
     <panel />
     <div class="teacher-dashboard">
       <div