Merge pull request #749 from SlateFoundation/develop

Release: v3.8.6

docs/legacy-docs/data/tasks.md

@@ -19,7 +19,6 @@ Task : Title
 Task : DueDate
 Task : ExpirationDate
 Task : Instructions
-Task : Shared [course/school/public]
 Task : Status [private/shared/deleted]
 
 StudentTask : ExperienceType

php-classes/Slate/CBL/Tasks/Task.php

@@ -45,11 +45,6 @@ class Task extends \VersionedRecord
             'type' => 'uint',
             'default' => null,
         ],
-        'Shared' => [
-            'type' => 'enum',
-            'values' => ['course', 'school', 'public'],
-            'default' => null
-        ],
         'Status' => [
             'type' => 'enum',
             'notnull' => true,

php-migrations/Slate/CBL/Tasks/20221128000000_purge-task-shared.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace Slate\CBL\Tasks;
+
+use DB;
+
+$tableName = Task::$tableName;
+$historyTableName = 'history_'.$tableName;
+
+$columnName = 'Shared';
+
+
+// skip conditions
+if (!static::tableExists($tableName) || !static::getColumn($tableName, $columnName)) {
+    return static::STATUS_SKIPPED;
+}
+
+// update table
+printf("Removing column `%s`.`%s`", $tableName, $columnName);
+DB::nonQuery(
+    'ALTER TABLE `%1$s` DROP COLUMN `%2$s`',
+    [
+        $tableName,
+        $columnName
+    ]
+);
+
+// update history table
+printf("Removing column `%s`.`%s`", $historyTableName, $columnName);
+DB::nonQuery(
+    'ALTER TABLE `%1$s` DROP COLUMN `%2$s`',
+    [
+        $historyTableName,
+        $columnName
+    ]
+);
+
+return static::STATUS_EXECUTED;

sencha-workspace/packages/slate-cbl/src/model/tasks/Task.js

@@ -103,11 +103,6 @@ Ext.define('Slate.cbl.model.tasks.Task', {
 
             clonable: true
         },
-        {
-            name: 'Shared',
-            type: 'string',
-            allowNull: true
-        },
         {
             name: 'Status',
             type: 'string'

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/assets/app.scss

@@ -36,4 +36,14 @@ body {
     position: absolute;
     z-index: 99999;
   }
+}
+
+.level-panel.-drop-zone {
+  .level-panel__delete, .skill-demos {
+    display: none;
+  }
+  &.-drag-source {
+    filter: grayscale(0.75);
+    opacity: 0.5;
+  }
 }

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

@@ -1,5 +1,10 @@
 <template>
-  <div :class="`level-panel mb-2 cbl-level-${portfolio.Level}`">
+  <div
+    :class="wrapperClass"
+    @drop="drop"
+    @dragover.prevent
+    @dragenter.prevent
+  >
     <b-container
       v-b-toggle="collapseId"
       class="bg-cbl-level-50"
@@ -13,7 +18,7 @@
             class="btn-unstyled d-flex"
           >
             <h3 class="h6 m-0">
-              Year {{ portfolio.Level }} <!-- TODO global property? -->
+              Year {{ portfolio.Level }}
             </h3>
           </button>
         </b-col>
@@ -59,7 +64,7 @@
       />
       <div
         v-if="canDelete"
-        class="p-3 bg-cbl-level-10"
+        class="p-3 bg-cbl-level-10 level-panel__delete"
       >
         <button
           class="btn btn-danger"
@@ -100,7 +105,7 @@ export default {
     },
     portfolio: {
       type: Object,
-      default: () => ({}),
+      default: () => null,
     },
     demonstrations: {
       type: Array,
@@ -115,6 +120,19 @@ export default {
   computed: {
     ...mapStores(useStudentCompetency, useUi),
 
+    wrapperClass() {
+      const { Level } = this.portfolio;
+      const { dragging } = this.uiStore;
+      const isDroppable = dragging && dragging.type === 'move-skill-demo';
+      return [
+        `level-panel mb-2 cbl-level-${Level}`,
+        isDroppable && [
+          '-drop-zone',
+          dragging.Level === Level ? '-drag-source' : '-drag-target',
+        ],
+      ];
+    },
+
     stats() {
       const { BaselineRating, demonstrationsAverage, growth } = this.portfolio;
       const format = (value) => {
@@ -192,6 +210,12 @@ export default {
         });
       this.uiStore.confirm(body, action);
     },
+    drop() {
+      const { type, action } = this.uiStore.$state.dragging || {};
+      if (type === 'move-skill-demo') {
+        action(this.portfolio.Level);
+      }
+    },
   },
 };
 </script>

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/components/sidebar/SkillDemoCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="wrapperClass">
+  <div
+    :class="wrapperClass"
+    draggable="true"
+    @drag="drag"
+  >
     <div class="skill-demo__rating py-1 bg-cbl-level">
       <font-awesome-icon
         v-if="demo.Override"
@@ -92,6 +96,10 @@ export default {
 
   methods: {
     setTargetLevel(TargetLevel) {
+      if (TargetLevel === this.level) {
+        // skill demo-card was dropped on current portfolio level
+        return;
+      }
       const { ID } = this.demo;
       const data = [{ ID, TargetLevel }];
       const body = `Are you sure you want to move this to level ${TargetLevel}?`;
@@ -102,6 +110,16 @@ export default {
       };
       this.uiStore.confirm(body, action);
     },
+    drag() {
+      const { ID } = this.demo;
+      const { level } = this;
+      this.uiStore.startDragging({
+        ID,
+        Level: level,
+        type: 'move-skill-demo',
+        action: this.setTargetLevel,
+      });
+    },
   },
 };
 </script>
@@ -143,6 +161,7 @@ export default {
 
     &__grabber {
       background-color: #eee;
+      cursor: pointer;
       flex: 1 1 0;
     }
 

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({