trello smart section config handling

app/app/components/section/trello/type-editor.js

@@ -8,21 +8,34 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
     isDirty: false,
     waiting: false,
     authenticated: false,
-    config: {
+    config: {},
-        appKey: "",
-        board: null,
-        list: null,
-        cards: null
-    },
     boards: null,
     lists: null,
 
-    hasAppKey: function() {
+    didReceiveAttrs() {
-        console.log(is.not.empty(this.get('config.appKey')));
+        let config = {};
-        return is.empty(this.get('config.appKey')) ? false : true;
-    }.property('config'),
 
-    didReceiveAttrs() {},
+        try {
+            config = JSON.parse(this.get('meta.config'));
+        } catch (e) {}
+
+        if (is.empty(config)) {
+            config = {
+                appKey: "",
+                token: "",
+                board: null,
+                list: null,
+                cards: null
+            };
+        }
+
+        this.set('config', config);
+
+        if (this.get('config.appKey') !== "" &&
+            this.get('config.token') !== "") {
+            this.send('auth');
+        }
+    },
 
     willDestroyElement() {
         this.destroyTooltips();
@@ -30,30 +43,52 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
     getBoardLists() {
         let self = this;
+        let boards = this.get('boards');
         let board = this.get('config.board');
+        this.set('waiting', true);
+
+        if (board === null) {
+            if (boards.length) {
+                board = boards[0];
+                this.set('config.board', board);
+            }
+        } else {
+            this.set('config.board', boards.findBy('id', board.id));
+        }
 
         Trello.get(`boards/${board.id}/lists/open`,
             function(lists) {
-                self.set('lists', lists);
+                let savedLists = self.get('config.lists');
-
+                if (savedLists === null) {
-                if (lists.length) {
+                    savedLists = [];
-                    self.set('config.list', lists[0]);
                 }
 
-                self.getListCards();
+                lists.forEach(function(list) {
+                    let saved = savedLists.findBy("id", list.id);
+                    let included = true;
+                    if (is.not.undefined(saved)) {
+                        included = saved.included;
+                    }
+                    list.included = included;
+                });
+
+                self.set('config.lists', lists);
+                self.set('waiting', false);
+
+                // self.getListCards();
             });
     },
 
-    getListCards() {
+    // getListCards() {
-        let self = this;
+    //     let self = this;
-        let list = this.get('config.list');
+    //     let list = this.get('config.list');
 
-        Trello.get(`lists/${list.id}/cards`,
+    //     Trello.get(`lists/${list.id}/cards`,
-            function(cards) {
+    //         function(cards) {
-                self.set('config.cards', cards);
+    //             self.set('config.cards', cards);
-                console.log(cards);
+    //             console.log(cards);
-            });
+    //         });
-    },
+    // },
 
     actions: {
         isDirty() {
@@ -64,18 +99,29 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
             window.open("https://trello.com/app-key", "Trello App Key", "");
         },
 
-        getAuthToken() {
+        onListCheckbox(id) {
-            let appKey = this.get('config.appKey');
+            let lists = this.get('config.lists');
-            let self = this;
+            let list = lists.findBy('id', id);
 
-            if (is.empty(appKey)) {
+            if (list !== null) {
-                $("#trello-appkey").addClass("error").focus();
+                Ember.set(list, 'included', !list.included);
+            }
+        },
+
+        auth() {
+            if (this.get('config.appKey') === "") {
+                $("#trello-appkey").addClass('error').focus();
+                this.set('authenticated', false);
                 return;
             }
 
-            Ember.$.getScript("https://api.trello.com/1/client.js?key=" + appKey, function() {
+            let self = this;
+            self.set('waiting', true);
+
+            Ember.$.getScript("https://api.trello.com/1/client.js?key=" + this.get('config.appKey'), function() {
                 Trello.authorize({
                     type: "popup",
+                    // interactive: false,
                     name: "Documize",
                     scope: {
                         read: true,
@@ -85,22 +131,16 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
                     persist: true,
                     success: function() {
                         self.set('authenticated', true);
+                        self.set('config.token', Trello.token());
                         Trello.get("members/me/boards?fields=id,name,url,closed,prefs,idOrganization",
                             function(boards) {
+                                self.set('waiting', false);
                                 self.set('boards', boards.filterBy("closed", false));
-                                let board = boards.length ? boards[0] : null;
-                                self.set('config.board', board);
                                 self.getBoardLists();
                             });
-
-                        Trello.get("members/me/organizations",
-                            function(orgs) {
-                                self.set('orgs', orgs);
-                                console.log(orgs);
-                            });
-
                     },
                     error: function(error) {
+                        self.set('waiting', false);
                         self.showNotification("Unable to authenticate");
                         console.log(error);
                     }
@@ -109,14 +149,16 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
         },
 
         onBoardChange(board) {
+            this.set('isDirty', true);
             this.set('config.board', board);
+            this.set('config.lists', []);
             this.getBoardLists();
         },
 
-        onListChange(list) {
+        // onListChange(list) {
-            this.set('config.list', list);
+        //     this.set('config.list', list);
-            this.getListCards();
+        //     this.getListCards();
-        },
+        // },
 
         onCancel() {
             this.attrs.onCancel();
@@ -126,6 +168,10 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
             let page = this.get('page');
             let meta = this.get('meta');
             page.set('title', title);
+            // meta.set('rawBody', JSON.stringify(this.get("items")));
+            meta.set('rawBody', '');
+            meta.set('config', JSON.stringify(this.get('config')));
+            meta.set('externalSource', true);
 
             this.attrs.onAction(page, meta);
         }

app/app/styles/widget/widget-input.scss

@@ -186,3 +186,13 @@
 .form-divider {
 	margin-top: 30px;
 }
+
+
+.widget-checkbox {
+	color: $color-link;
+	cursor: pointer;
+}
+
+.checkbox-gray {
+	color: $color-gray !important;
+}

app/app/templates/components/section/trello/type-editor.hbs

@@ -2,6 +2,8 @@
 .board {
 	width: 100%;
 	padding: 10px;
+	white-space: nowrap;
+	overflow: auto
 }
 
 .board-title {
@@ -14,7 +16,7 @@
 	background-color: #e2e4e6;
 	padding: 10px;
 	border-radius: 3px;
-	margin-top: 10px;
+	margin: 10px 10px 0 0;
 	max-width: 300px;
 }
 
@@ -22,23 +24,12 @@
 	font-weight: bold;
 	color: #4c4c4c;
 	font-size: 14px;
-	margin-bottom: 10px;
+	margin: 5px;
 }
 
-.card {
+.list-checkbox {
-	color: #4c4c4c;
+	vertical-align: text-bottom;
-	border-bottom: 1px solid #CDD2D4;
-	background-color: #fff;
-	border-radius: 3px;
-	padding: 7px 7px;
-	margin: 5px 0;
-	font-size: 14px;
-    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
-    line-height: 18px;	
-	overflow: hidden;
-    word-wrap: break-word;
 }
-
 </style>
 
 {{#section/base-editor document=document folder=folder page=page busy=waiting tip="Trello, yellow, mellow" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
@@ -47,61 +38,58 @@
 	<div class="input-form">
 		<form>
 			<div class="heading">
-				<div class="title">Trello Authentication</div>
+				<div class="title">Authentication</div>
-				<div class="tip">Provide your Trello App Key</div>
+				<div class="tip">Provide Trello App Key and then authenticate</div>
 			</div>
 			<div class="input-control">
-				<div class="flat-button flat-blue" {{ action 'getAppKey' }}>Get App Key</div>
+				<label>Trello App Key</label>
-				{{focus-input id="trello-appkey" type="text" value=config.appKey}}
+				<div class="tip">Use plain old button below to grab the magic key -- you might need to log into Trello</div>
+				{{focus-input id="trello-appkey" type="password" value=config.appKey}}
 			</div>
-			<div class="regular-button button-blue" {{ action 'getAuthToken' }}>Authenticate</div>
+			<div class="regular-button button-gray" {{ action 'getAppKey' }}>Get App Key</div>
+			<div class="button-gap" />
+			<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
 		</form>
 	</div>
 </div>
 
 {{#if authenticated}}
-<div class="pull-left margin-left-40 width-45">
+<div class="pull-right width-45">
 	<div class="input-form">
-		<form>
+		<div class="heading">
-			<div class="heading">
+			<div class="title">Select Board & Lists</div>
-				<div class="title">Trello Boards / Lists</div>
+			<div class="tip">Choose lists to include from board</div>
-				<div class="tip">Select board and list to display</div>
+		</div>
-			</div>
+		<div class="input-control">
-			<div class="pull-left width-45">
+			<label>Board</label>
-				<div class="input-control">
+			<div class="tip">Select board</div>
-					<label>Board</label>
+			{{ui-select id="boards-dropdown"
-					<div class="tip">Select board for display</div>
+				content=boards
-					{{ui-select id="boards-dropdown"
+				action=(action 'onBoardChange')
-						content=boards
+				optionValuePath="id"
-						action=(action 'onBoardChange')
+				optionLabelPath="name"
-						optionValuePath="id"
+				selection=config.board}}
-						optionLabelPath="name"
+		</div>
-						selection=config.board}}
+		<div class="input-control">
-				</div>
+			<label>Lists</label>
-			</div>	
+			<div class="tip">Select lists to include</div>
-			<div class="pull-right width-45">
+			<div class="board" style="background-color:{{config.board.prefs.backgroundColor}};">
-				<div class="input-control">
-					<label>List</label>
-					<div class="tip">Select list for display</div>
-					{{ui-select id="lists-dropdown"
-						content=lists
-						action=(action 'onListChange')
-						optionValuePath="id"
-						optionLabelPath="name"
-						selection=config.list}}
-				</div>
-			</div>	
-			<div class="clearfix" />
-			<div class="board margin-top-20" style="background-color:{{config.board.prefs.backgroundColor}};">
 				<div class="board-title">{{config.board.name}}</div>
-				<div class="list">
+				{{#each config.lists as |list|}}
-					<div class="list-title">{{config.list.name}}</div>
+					<div class="list" {{action 'onListCheckbox' list.id}}>
-					{{#each config.cards as |card|}}
+                        {{#if list.included}}
-						<div class="card">{{card.name}}</div>
+                            <i class="material-icons widget-checkbox checkbox-gray list-checkbox" >check_box</i>
-					{{/each}}
+                        {{else}}
-				</div>
+                            <i class="material-icons widget-checkbox checkbox-gray list-checkbox">check_box_outline_blank</i>
+                        {{/if}}
+						<span class="list-title">{{list.name}}</span>
+						{{!--<input type="checkbox" id="trello-list-{{list.id}}" checked={{list.included}} />--}}
+						{{!--<label class="list-title" for="trello-list-{{list.id}}">{{list.name}}</label>--}}
+					</div>
+				{{/each}}
+				<div class="clearfix" />
 			</div>
-		</form>
+		</div>
 	</div>
 </div>
 {{/if}}	

app/app/templates/components/section/trello/type-renderer.hbs

@@ -1,4 +1,45 @@
 <style>	
+.board {
+	width: 100%;
+	max-height: 600px;
+	padding: 10px;
+	white-space: nowrap;
+	overflow: auto
+}
+
+.list {
+	background-color: #e2e4e6;
+	padding: 10px;
+	border-radius: 3px;
+	margin: 10px 10px 0 0;
+	max-width: 300px;
+	max-height: 500px;
+	display: inline-block;
+	white-space: nowrap;
+	overflow: auto
+}
+
+.list-title {
+	font-weight: bold;
+	color: #4c4c4c;
+	font-size: 14px;
+	margin: 0 10px 10px 0;
+}
+
+.card {
+	color: #4c4c4c;
+	border-bottom: 1px solid #CDD2D4;
+	background-color: #fff;
+	border-radius: 3px;
+	padding: 7px 7px;
+	margin: 5px 0;
+	font-size: 14px;
+    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
+    line-height: 18px;	
+	overflow: hidden;
+    word-wrap: break-word;
+	white-space: normal;
+}
 </style>
 
 {{{page.body}}}