Make it clear audit classes can be dragged and clicked

src/components/Audit.vue

@@ -26,26 +26,33 @@
       open-on-click
       :activatable="false"
     >
-      <template slot="prepend" slot-scope="{ item }">
-        <v-icon
-          v-if="!('reqs' in item)"
-          :style="fulfilledIcon(item)"
-          @click="clickRequirement(item)"
-        >
-          {{ item['plain-string'] ?
-            (item["list-id"] in progressOverrides ?
-              (item.fulfilled ? "assignment_turned_in" : "assignment") :
-              "assignment_late" ) :
-            item.fulfilled ? "done" : "remove" }}
-        </v-icon>
-      </template>
       <template slot="label" slot-scope="{ item, leaf}">
-        <requirement
-          :req="item"
-          :is-leaf="leaf"
-          @click.native="clickRequirement(item)"
-          @click-info="reqInfo($event, item)"
-        />
+        <v-hover :disabled="!leaf || !canDrag(item)">
+          <div
+            slot-scope="{ hover }"
+            :class="{ 'elevation-3 grey lighten-3': hover }"
+            :style="(leaf && canDrag(item) ? 'cursor: grab' : 'cursor: pointer')"
+          >
+            <v-icon
+              v-if="!('reqs' in item)"
+              class="appendLeft"
+              :style="fulfilledIcon(item)"
+              @click="clickRequirement(item)"
+            >
+              {{ item['plain-string'] ?
+                (item["list-id"] in progressOverrides ?
+                  (item.fulfilled ? "assignment_turned_in" : "assignment") :
+                  "assignment_late" ) :
+                item.fulfilled ? "done" : "remove" }}
+            </v-icon>
+            <requirement
+              :req="item"
+              :is-leaf="leaf"
+              @click.native="clickRequirement(item)"
+              @click-info="reqInfo($event, item)"
+            />
+          </div>
+        </v-hover>
       </template>
     </v-treeview>
 
@@ -138,11 +145,13 @@
 
 <script>
 import Requirement from './Requirement.vue';
+import classInfoMixin from './../mixins/classInfo.js';
 export default {
   name: 'Audit',
   components: {
     requirement: Requirement
   },
+  mixins: [classInfoMixin],
   props: {
     selectedReqs: {
       type: Array,
@@ -320,6 +329,11 @@ export default {
 </script>
 
 <style scoped>
+.appendLeft {
+  float: left;
+  position: relative;
+  bottom: 3px;
+}
 .percentage-bar {
   background: linear-gradient(
     90deg,

src/components/Requirement.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="requirement"
-    :draggable="canDrag"
+    :draggable="canDrag(req)"
     @dragstart="dragStart"
     @mouseover="hoveringOver = true"
     @mouseleave="hoveringOver = false"
@@ -20,7 +20,7 @@
           <span style="font-style:italic">{{ req['threshold-desc'] }}</span>
         </div>
         <span v-else>
-          <span v-if="'title' in req">{{ req.title }}</span>
+          <span v-if="'title' in req"> {{ req.title }} </span>
         </span>
         <span v-if="!req['plain-string']">
           <span v-if="!('title' in req) && 'req' in req">
@@ -64,8 +64,11 @@
 </template>
 
 <script>
+import classInfoMixin from './../mixins/classInfo.js';
+
 export default {
   name: 'Requirement',
+  mixins: [classInfoMixin],
   props: {
     req: {
       type: Object,
@@ -84,28 +87,9 @@ export default {
     };
   },
   computed: {
-    classInfo: function () {
-      if ('req' in this.req) {
-        if (this.req.req in this.$store.state.subjectsIndex) {
-          return this.$store.state.subjectsInfo[this.$store.state.subjectsIndex[this.req.req]];
-        }
-        let attributeReq = this.req.req;
-        if (attributeReq.indexOf('GIR:') === 0) {
-          attributeReq = attributeReq.substring(4);
-        }
-        if (attributeReq in this.$store.state.genericIndex) {
-          return this.$store.state.genericCourses[this.$store.state.genericIndex[attributeReq]];
-        }
-      }
-      return undefined;
-    },
     iconColor: function () {
       return this.iconHover ? 'info' : 'grey';
     },
-    canDrag: function () {
-      return this.classInfo !== undefined ||
-        ('req' in this.req && (Object.keys(this.$store.state.subjectsIndex).length === 0));
-    },
     reqFulfilled: function () {
       return {
         fulfilled: !!this.req.fulfilled
@@ -135,7 +119,7 @@ export default {
   },
   methods: {
     dragStart: function (event) {
-      let usedInfo = this.classInfo;
+      let usedInfo = this.classInfo(this.req);
       if (usedInfo === undefined) {
         usedInfo = { id: this.req.req };
       }

src/mixins/classInfo.js

@@ -0,0 +1,24 @@
+export default {
+  methods: {
+    classInfo: function (req) {
+      if ('req' in req) {
+        if (req.req in this.$store.state.subjectsIndex) {
+          return this.$store.state.subjectsInfo[this.$store.state.subjectsIndex[req.req]];
+        }
+        let attributeReq = req.req;
+        if (attributeReq.indexOf('GIR:') === 0) {
+          attributeReq = attributeReq.substring(4);
+        }
+        if (attributeReq in this.$store.state.genericIndex) {
+          return this.$store.state.genericCourses[this.$store.state.genericIndex[attributeReq]];
+        }
+      }
+      return undefined;
+    },
+    canDrag: function (req) {
+      return this.classInfo(req) !== undefined ||
+              ('req' in req && (Object.keys(this.$store.state.subjectsIndex).length === 0));
+    }
+  }
+
+};