Merge pull request #746 from SlateFoundation/issue/736-create-enrollment

Fixes #736: Add Enroll Button to New Dashboard

static-webapps/slate-portfolio-manager/.eslintrc.js

@@ -28,5 +28,8 @@ module.exports = {
         varsIgnorePattern: '^_',
       },
     ],
+    // The backend uses PascalCase for many variable names
+    'vue/prop-name-casing': 0,
+    'vue/attribute-hyphenation': 0,
   },
 };

static-webapps/slate-portfolio-manager/src/components/AdvancedPortfolioSidebar.vue

@@ -45,6 +45,16 @@
     </div>
 
     <ol class="list-unstyled">
+      <li
+        v-for="Level in availableLevels"
+        :key="Level"
+      >
+        <new-level-panel
+          :Level="Level"
+          :StudentID="studentCompetencyDetails.Student.ID"
+          :CompetencyID="studentCompetencyDetails.Competency.ID"
+        />
+      </li>
       <li
         v-for="portfolio in studentCompetencyDetails.data"
         :key="portfolio.ID"
@@ -63,6 +73,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { range } from 'lodash';
 
 import Student from '@/models/Student';
 import emitter from '@/store/emitter';
@@ -71,9 +82,11 @@ import useDemonstrationSkill from '@/store/useDemonstrationSkill';
 import useStudentCompetency from '@/store/useStudentCompetency';
 import useDemonstration from '@/store/useDemonstration';
 import LevelPanel from './sidebar/LevelPanel.vue';
+import NewLevelPanel from './sidebar/NewLevelPanel.vue';
 
 export default {
   components: {
+    NewLevelPanel,
     LevelPanel,
   },
 
@@ -91,6 +104,11 @@ export default {
   computed: {
     ...mapStores(useCompetency, useDemonstration, useStudentCompetency, useDemonstrationSkill),
 
+    availableLevels() {
+      const maxLevel = Math.max(this.$site.minLevel - 1, ...this.visibleLevels);
+      return range(maxLevel + 1, this.$site.maxLevel + 1).reverse();
+    },
+
     visibleLevels() {
       const details = this.studentCompetencyDetails;
       return details ? details.data.map((portfolio) => portfolio.Level) : [];

static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue

@@ -13,7 +13,7 @@
             class="btn-unstyled d-flex"
           >
             <h3 class="h6 m-0">
-              Year {{ portfolio.Level }} <!-- TODO global property? -->
+              Year {{ portfolio.Level }}
             </h3>
           </button>
         </b-col>
@@ -100,7 +100,7 @@ export default {
     },
     portfolio: {
       type: Object,
-      default: () => ({}),
+      default: () => null,
     },
     demonstrations: {
       type: Array,

static-webapps/slate-portfolio-manager/src/components/sidebar/NewLevelPanel.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    :class="`level-panel -new mb-2 cbl-level-${Level}`"
+  >
+    <b-container class="bg-cbl-level-25">
+      <b-row class="py-2 align-items-center">
+        <b-col>
+          <h3 class="h6 m-0 text-muted">
+            Year {{ Level }}
+          </h3>
+        </b-col>
+        <b-col cols="4">
+          <button
+            class="btn btn-primary btn-sm float-right"
+            @click="createLevel"
+          >
+            Enroll
+          </button>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+
+<script>
+import client from '@/store/client';
+import emitter from '@/store/emitter';
+
+export default {
+  props: {
+    Level: {
+      type: Number,
+      default: () => null,
+    },
+    StudentID: {
+      type: Number,
+      default: () => null,
+    },
+    CompetencyID: {
+      type: Number,
+      default: () => null,
+    },
+  },
+  methods: {
+    createLevel() {
+      const { StudentID, CompetencyID, Level } = this;
+      const data = [
+        {
+          StudentID,
+          CompetencyID,
+          Level,
+          EnteredVia: 'enrollment',
+          ID: -1,
+          Class: 'Slate\\CBL\\StudentCompetency',
+          BaselineRating: null,
+        },
+      ];
+      const url = 'cbl/student-competencies/save';
+      const refetch = () => emitter.emit('update-store', { StudentID, CompetencyID });
+      client.post(url, { data }).then(refetch);
+    },
+  },
+};
+</script>

static-webapps/slate-portfolio-manager/src/main.js

@@ -39,6 +39,14 @@ Vue.use(BootstrapVue);
 window.Vue = Vue;
 
 Vue.use(PiniaVuePlugin);
+
+Vue.prototype.$site = {
+  // per-site configuration
+  // TODO get this from back end
+  minLevel: 9,
+  maxLevel: 12,
+};
+
 const pinia = createPinia();
 
 new Vue({