UI for creating pathways

[chadwhitacre]

Closes #201.

To-do

Based on https://github.com/saxifrage/cityasacampus/pull/364#issuecomment-162681923.

WIP on #377

• [x] add topics grids under "All Topics Grids"
• [x] load a topic grid by clicking on it under "All Topics Grids"
• [x] add pathways under "$Topic" "$Grid"
• [x] load a pathway by clicking on it under "$Pathway"

  WIP on #384

• [x] remove topics grids under "All Topics Grids" (drag to garbage can? little clicky x or trashcan when loaded?)
• [x] rename a topic grid
• [x] remove pathways under "$Topic" "$Grid"
• [x] rename a pathway
• [x] keep "All Topics Grids" and "$Topic" "$Grid" alphabetized

  WIP on #385

• [ ] constrain "Library" list by organizer and not-already-on-a-pathway-for-the-given-workflow-state
• [ ] add/remove resources from $Pathway

  Bumped (https://github.com/saxifrage/cityasacampus/pull/364#issuecomment-166408512)

• add a [ Preview ] button that hits caac-map.net and stores the SVG
• add a [ Publish ] button that copies the preview map to the published map (overwriting any previous published map)
• show the published map at /:organizer/map
• show the preview map at /:organizer/map/preview (admin-only)

[chadwhitacre]

Alright, so where is our client-side routing implemented?

[chadwhitacre]

client/index.js, looks like ...

[chadwhitacre]

I made a client/dashboard/PathwaysView.html file, and wired it up in index.js, but it's not available through the web. Our Gulp asset pipeline is not copying it over into public/dashboard/ as I would expect. How do I tell Gulp to do that?

[chadwhitacre]

Looks like templates is the task responsible for copying the file over.

[chadwhitacre]

Why isn't it?

[chadwhitacre]

Hrm, it's there now. :-/

[chadwhitacre]

:shrug:

[chadwhitacre]

Alright, there's a start, anyway. I plan to pick up with this on Monday, hopefully at the Sprout office! :-)

[MatthewVita]

Lookin' good, @whit537. Adding a couple commits for housekeeping.

[chadwhitacre]

Cool, thanks @MatthewVita. :-)

[chadwhitacre]

Rebased on master now that #357 has landed. Previous head was d4458add7a311982b4200903705de039782aa460.

[chadwhitacre]

https://github.com/marceljuenemann/angular-drag-and-drop-lists

[chadwhitacre]

http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

Looks about right:

[chadwhitacre]

I am working on installing angular-drag-and-drop-lists into our application.

[chadwhitacre]

My first step is to get the code into our public/vendors.min.js.

[chadwhitacre]

I've added the following to our package.json:

    "angular-drag-and-drop-lists": "marceljuenemann/angular-drag-and-drop-lists#822552b2b6fe28fa7675ec434c769fa96ba5e154",

[chadwhitacre]

I've run npm install and npm ls shows angular-drag-and-drop-lists to be installed:

$ npm ls|grep angular
├── angular@1.3.14
├── angular-cookie@1.0.0 (git+https://github.com/ivpusic/angular-cookie.git#67eb8455445dfbf38d23f17e3a0b9af773b03d77)
├── angular-drag-and-drop-lists@1.3.0 (git+https://github.com/marceljuenemann/angular-drag-and-drop-lists.git#822552b2b6fe28fa7675ec434c769fa96ba5e154)
├── angular-filter@0.5.4
├── angular-route@1.3.14
$

[chadwhitacre]

From angular-drag-and-drop-lists' package.json, I expect the angular-drag-and-drop-lists.js file to end up in our node_modules, and for gulp to include it from there when creating vendors.min.js.

[chadwhitacre]

Looks like I have to add it to the gulpfile ...

[chadwhitacre]

Yay! :-)

I had to rerun gulp. The gulp watcher wasn't apparently smart enough?

[chadwhitacre]

Now I'm working on getting the simple demo installed into the stub pathways page.

[chadwhitacre]

29a6a676df4709c0b61cdd1ecfd4ea75084e82b3 is giving me the pre with the computed dummy data, but I'm not getting the ul items.

[chadwhitacre]

So Angular has some kinda scopes, right? And the DOM has to match or be scoped or whatever with the controller?

[chadwhitacre]

modelAsJson appears to be in scope in the DOM.

[chadwhitacre]

Where does list come from in https://github.com/marceljuenemann/angular-drag-and-drop-lists/blob/822552b2b6fe28fa7675ec434c769fa96ba5e154/demo/simple/simple.html#L8?

[chadwhitacre]

Looks like it comes from https://github.com/marceljuenemann/angular-drag-and-drop-lists/blob/822552b2b6fe28fa7675ec434c769fa96ba5e154/demo/simple/simple-frame.html#L13.

[chadwhitacre]

Boom!

[chadwhitacre]

Okay! Ready to start getting the drag/drop itself actually working. :-)

[chadwhitacre]

Alright! Where the heck is the drag-n-drop?

[chadwhitacre]

What is click supposed to do and why isn't it doing it in my case?

[chadwhitacre]

https://github.com/marceljuenemann/angular-drag-and-drop-lists/pull/186 :hamburger:

[chadwhitacre]

The demo has a click event listed in the DOM inspector:

Ours doesn't:

[chadwhitacre]

Alright, how the heck do I debug this?

[chadwhitacre]

Let's read the docs ...

[chadwhitacre]

BTW, what's our browser support target, @MatthewVita @dmtroyer @timothyfcook? I'm not seeing an answer on http://cityasacampus.org/ ...

[chadwhitacre]

dnd-draggable Required attribute. The value has to be an object that represents the data of the element. In case of a drag and drop operation the object will be serialized and unserialized on the receiving end.

https://github.com/marceljuenemann/angular-drag-and-drop-lists#dnd-draggable-directive

[chadwhitacre]

The value has to be an object that represents the data of the element.

Why is this item in the demo? Do I have some plumbing wrong?

[chadwhitacre]

Why is this item in the demo?

Probably from the item in list ng-repeat?

[chadwhitacre]

... which I believe is working because {{item.label}} appears to be working.

[chadwhitacre]

More to the point: the demo has drag{start,end} events, and we don't:

[chadwhitacre]

The (program):34 links are unhelpful. They go to:

chrome-devtools://devtools/bundled/inspector.html?&remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@deadbeef/&can_dock=true&dockSide=undocked

[chadwhitacre]

And that's an empty page:

<!--
 * Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
-->
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
    <link rel="stylesheet" type="text/css" href="inspector.css">
    <script type="text/javascript" src="inspector.js"></script>
</head>
<body class="undocked" id="-blink-dev-tools"></body>
</html>

[chadwhitacre]

Is Angular not running properly on this page?

[chadwhitacre]

I don't see any Angular-y events on the html element (I'm now using the Firefox web inspector since Chrome's events helper was unhelpful):

[chadwhitacre]

I do see some on the demo:

[chadwhitacre]

Well, I guess we bundle Angular into vendors.min.js.

[chadwhitacre]

My hunch is that @MatthewVita and/or @dmtroyer could point me in the right direction pretty quickly here.

[chadwhitacre]

Barring that, I suppose it's time to go spelunking in Angular ...

[chadwhitacre]

I'm trying to get unminified Angular into vendors.min.js. I modified our gulpfile.js to reference the angular.js instead of angular.min.js. I double-checked that angular.js contains the unminified source. I terminated gulp default and ran it again. I removed vendors.min.js and reran gulp default. I'm still seeing minified Angular in vendors.min.js. Ooh ... I guess we are minifying it ourselves even if we're not using their pre-minified version as input ...

[chadwhitacre]

Yeah, there we go ...