DO NOT MERGE spike of card drag ui

app/components/task-card.js

@@ -8,12 +8,20 @@ const {
 } = Ember;
 
 export default Component.extend({
+  attributeBindings: ['data-model-id', 'data-model-type'],
   classNames: ['task-card'],
   classNameBindings: ['taskTypeClass'],
   tagName: 'div',
 
+  'data-model-id': alias('task.id'),
+  'data-model-type': 'task',
+
   taskTypeClass: computed('taskType', function() {
     return `task-card--${get(this, 'taskType')}`;
   }),
-  taskType: alias('task.taskType')
+  taskType: alias('task.taskType'),
+
+  drop() {
+    console.log('hello');
+  }
 });

app/components/task-list.js

@@ -0,0 +1,16 @@
+import EmberDragulaContainer from 'ember-dragula/components/ember-dragula-container';
+
+const {
+  computed: { alias, sort }
+} = Ember;
+
+export default EmberDragulaContainer.extend({
+  attributeBindings: ['data-model-id', 'data-model-type'],
+  classNames: ['task-list'],
+  sorting: ['order:asc'],
+
+  orderedTasks: sort('taskList.tasks' , 'sorting'),
+
+  'data-model-id': alias('taskList.id'),
+  'data-model-type': 'task-list',
+});

app/controllers/index.js

@@ -1,6 +1,11 @@
 import Ember from 'ember';
+import moment from 'moment';
 
-const { Controller } = Ember;
+const {
+  $,
+  Controller,
+  Object
+} = Ember;
 
 export default Controller.extend({
   typedStrings: [
@@ -17,5 +22,59 @@ export default Controller.extend({
     'ending climate change.',
     'families.',
     'government.'
-  ]
+  ],
+  taskLists: [
+    Object.create({
+      id: 1,
+      tasks: [
+        Object.create({
+          id: 1,
+          insertedAt: moment().subtract(10, 'weeks'),
+          number: 1,
+          order: 2,
+          taskType: 'idea',
+          title: 'Implement drag and drop'
+        }),
+        Object.create({
+          id: 2,
+          insertedAt: moment().subtract(1, 'days'),
+          number: 2,
+          order: 1,
+          taskType: 'issue',
+          title: 'Fix the way we handle positioning'
+        })
+      ]
+    }),
+    Object.create({
+      id: 2,
+      tasks: [
+        Object.create({
+          id: 3,
+          insertedAt: moment().subtract(3, 'days'),
+          number: 3,
+          order: 1,
+          taskType: 'task',
+          title: 'Figure out the best Ember library for drag and drop'
+        })
+      ],
+    })
+  ],
+  dragulaconfig: {
+    options: {
+      copy: false,
+      revertOnSpill: false,
+      removeOnSpill: false
+      // Other options from the dragula source page.
+    },
+    enabledEvents: ['drag', 'drop']
+  },
+
+  actions: {
+    onDrop(el, target) {
+      let listId = target.dataset.modelId;
+      let position = $(el).index();
+      let taskId = el.dataset.modelId;
+      console.log(taskId, position, listId);
+    }
+  }
 });

app/styles/components/task-card.scss

@@ -1,5 +1,6 @@
 .task-card {
-  border: 1px solid $border-light;
+  background-color: white;
+  border: 1px solid #CCCCCC;
   border-radius: 0 0 4px 4px;
   display: flex;
   flex-direction: column;
@@ -37,18 +38,22 @@
     border-top: 2px solid $idea-color;
     &:hover { background-color: $idea-background; }
     .task-card__icon { @include taskBoardIcon($idea-small); }
+
+    &.gu-mirror { background-color: $idea-background; }
   }
 
   &--issue {
     border-top: 2px solid $issue-color;
     &:hover { background-color: $issue-background; }
     .task-card__icon { @include taskBoardIcon($issue-small); }
+    &.gu-mirror { background-color: $issue-background; }
   }
 
   &--task {
     border-top: 2px solid $task-color;
     &:hover { background-color: $task-background; }
     .task-card__icon { @include taskBoardIcon($task-small); }
+    &.gu-mirror { background-color: $task-background; }
   }
 
   a {

app/styles/main.scss

@@ -185,3 +185,20 @@ p.subtext {
   margin: auto;
   max-width: 600px;
 }
+
+.task-list {
+  position: relative;
+  height: 100%;
+  width: 280px;
+  margin-right: 10px;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px;
+  padding: 10px 7px;
+  background: #FAFAFA;
+  float: left;
+}
+
+.code--theme-light {
+  display: flex;
+  flex-grow: 1;
+}

app/templates/components/task-list.hbs

@@ -0,0 +1,3 @@
+{{#each orderedTasks as |task|}}
+  {{task-card task=task}}
+{{/each}}

app/templates/index.hbs

@@ -1,4 +1,11 @@
-<div class="landing">
+<div class="task-board-container">
+  {{#ember-dragula config=dragulaconfig class="task-board" drop="onDrop"}}
+    {{#each taskLists as |taskList|}}
+      {{task-list class="task-list" taskList=taskList}}
+    {{/each}}
+  {{/ember-dragula}}
+</div>
+{{!-- <div class="landing">
   <div class="landing-section">
     <h2>Build a better future.</h2>
     <h3>Contribute to software projects for {{typed-string strings=typedStrings typeSpeed=70 backDelay=1500 loop=true loopCount=false}}</h3>
@@ -29,4 +36,4 @@
       </div>
     </div>
   </div>
-</div>
+</div> --}}

bower.json

@@ -11,7 +11,8 @@
     "typed.js": "^1.1.1",
     "bourbon": "^4.2.7",
     "neat": "^1.8.0",
-    "raven-js": "~3.3"
+    "raven-js": "~3.3",
+    "dragula": "^3.5.4"
   },
   "resolutions": {
     "route-recognizer": "^0.2.7"

package.json

@@ -69,6 +69,7 @@
     "ember-data": "^2.9.0",
     "ember-deferred-content": "0.2.0",
     "ember-disable-proxy-controllers": "^1.0.1",
+    "ember-dragula": "1.9.3",
     "ember-exam": "0.6.0",
     "ember-export-application-global": "^1.0.5",
     "ember-keyboard": "^2.1.9",