From f3dce82217675cca0c3e3a77af968dd146527f30 Mon Sep 17 00:00:00 2001
From: chriscauley <379151+chriscauley@users.noreply.github.com>
Date: Mon, 28 Nov 2022 13:31:29 -0500
Subject: [PATCH 1/3] skill demos can be dragged between levels in the sidebar

---
 .../src/assets/app.scss                       | 12 +++++++++
 .../src/components/sidebar/LevelPanel.vue     | 25 ++++++++++++++++++-
 .../src/components/sidebar/SkillDemoCard.vue  | 17 ++++++++++++-
 .../src/store/useUi.js                        | 10 +++++++-
 4 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/static-webapps/slate-portfolio-manager/src/assets/app.scss b/static-webapps/slate-portfolio-manager/src/assets/app.scss
index c2ec8d9ea..f8c31c719 100644
--- a/static-webapps/slate-portfolio-manager/src/assets/app.scss
+++ b/static-webapps/slate-portfolio-manager/src/assets/app.scss
@@ -36,4 +36,16 @@ body {
     position: absolute;
     z-index: 99999;
   }
+}
+
+.level-panel.-drop-zone {
+  position: relative;
+  &:before {
+    background: green;
+    content: "";
+    display: block;
+    inset: 0;
+    position: absolute;
+    z-index: 1;
+  }
 }
\ No newline at end of file
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
index 5adc717b9..83bbfa6a7 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
+++ b/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"
@@ -115,6 +120,13 @@ export default {
   computed: {
     ...mapStores(useStudentCompetency, useUi),
 
+    wrapperClass() {
+      return [
+        `level-panel mb-2 cbl-level-${this.portfolio.Level}`,
+        this.isDroppable && '-drop-zone',
+      ];
+    },
+
     stats() {
       const { BaselineRating, demonstrationsAverage, growth } = this.portfolio;
       const format = (value) => {
@@ -168,6 +180,11 @@ export default {
       const nextLevel = this.visibleLevels.find((level) => level > this.portfolio.Level);
       return this.preppedSkillDemos.length === 0 && !nextLevel;
     },
+
+    isDroppable() {
+      const { dragging } = this.uiStore;
+      return dragging && dragging.type === 'skill-demo';
+    },
   },
 
   methods: {
@@ -192,6 +209,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>
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
index 9b95c811a..a4c701f1f 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
+++ b/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"
@@ -102,6 +106,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 +157,7 @@ export default {
 
     &__grabber {
       background-color: #eee;
+      cursor: pointer;
       flex: 1 1 0;
     }
 
diff --git a/static-webapps/slate-portfolio-manager/src/store/useUi.js b/static-webapps/slate-portfolio-manager/src/store/useUi.js
index 821b13e43..cdf756551 100644
--- a/static-webapps/slate-portfolio-manager/src/store/useUi.js
+++ b/static-webapps/slate-portfolio-manager/src/store/useUi.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 export default defineStore('ui', {
-  state: () => ({ alert: null, confirm: null }),
+  state: () => ({ alert: null, confirm: null, dragging: null }),
   actions: {
     alert(options) {
       if (options && !options.actions) {
@@ -36,5 +36,13 @@ export default defineStore('ui', {
         ],
       });
     },
+    startDragging(options) {
+      this.$state.dragging = options;
+      document.addEventListener(
+        'dragend',
+        () => { this.$state.dragging = null; },
+        { once: true },
+      );
+    },
   },
 });

From 176440a59ff3730332e26bc11ead2480a2940854 Mon Sep 17 00:00:00 2001
From: chriscauley <379151+chriscauley@users.noreply.github.com>
Date: Mon, 28 Nov 2022 13:49:45 -0500
Subject: [PATCH 2/3] hide child elements while dragging

---
 .../slate-portfolio-manager/src/assets/app.scss        | 10 ++--------
 .../src/components/sidebar/LevelPanel.vue              |  2 +-
 .../src/components/sidebar/SkillDemoCard.vue           |  4 ++++
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/static-webapps/slate-portfolio-manager/src/assets/app.scss b/static-webapps/slate-portfolio-manager/src/assets/app.scss
index f8c31c719..8d0af2b3d 100644
--- a/static-webapps/slate-portfolio-manager/src/assets/app.scss
+++ b/static-webapps/slate-portfolio-manager/src/assets/app.scss
@@ -39,13 +39,7 @@ body {
 }
 
 .level-panel.-drop-zone {
-  position: relative;
-  &:before {
-    background: green;
-    content: "";
-    display: block;
-    inset: 0;
-    position: absolute;
-    z-index: 1;
+  .btn-danger, .skill-demos {
+    display: none;
   }
 }
\ No newline at end of file
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
index 83bbfa6a7..dce2d3136 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
+++ b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
@@ -183,7 +183,7 @@ export default {
 
     isDroppable() {
       const { dragging } = this.uiStore;
-      return dragging && dragging.type === 'skill-demo';
+      return dragging && dragging.type === 'move-skill-demo';
     },
   },
 
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
index a4c701f1f..36b1faec7 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
+++ b/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
@@ -96,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}?`;

From 11b80642555465281459d0c0c7a1d2846982af96 Mon Sep 17 00:00:00 2001
From: chriscauley <379151+chriscauley@users.noreply.github.com>
Date: Tue, 29 Nov 2022 16:25:19 -0500
Subject: [PATCH 3/3] adding a -drag-source and -drag-target class

---
 .../slate-portfolio-manager/src/assets/app.scss |  6 +++++-
 .../src/components/sidebar/LevelPanel.vue       | 17 +++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/static-webapps/slate-portfolio-manager/src/assets/app.scss b/static-webapps/slate-portfolio-manager/src/assets/app.scss
index 8d0af2b3d..9e16b613a 100644
--- a/static-webapps/slate-portfolio-manager/src/assets/app.scss
+++ b/static-webapps/slate-portfolio-manager/src/assets/app.scss
@@ -39,7 +39,11 @@ body {
 }
 
 .level-panel.-drop-zone {
-  .btn-danger, .skill-demos {
+  .level-panel__delete, .skill-demos {
     display: none;
   }
+  &.-drag-source {
+    filter: grayscale(0.75);
+    opacity: 0.5;
+  }
 }
\ No newline at end of file
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
index dce2d3136..2375696f1 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
+++ b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
@@ -64,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"
@@ -121,9 +121,15 @@ export default {
     ...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-${this.portfolio.Level}`,
-        this.isDroppable && '-drop-zone',
+        `level-panel mb-2 cbl-level-${Level}`,
+        isDroppable && [
+          '-drop-zone',
+          dragging.Level === Level ? '-drag-source' : '-drag-target',
+        ],
       ];
     },
 
@@ -180,11 +186,6 @@ export default {
       const nextLevel = this.visibleLevels.find((level) => level > this.portfolio.Level);
       return this.preppedSkillDemos.length === 0 && !nextLevel;
     },
-
-    isDroppable() {
-      const { dragging } = this.uiStore;
-      return dragging && dragging.type === 'move-skill-demo';
-    },
   },
 
   methods: {