mirror of
https://github.com/documize/community.git
synced 2025-08-08 06:55:28 +02:00
trello smart section config handling
This commit is contained in:
Harvey Kandola
parent
b5569be15e
commit
20e70f52d0
4 changed files with 190 additions and 105 deletions
|
|
@ -8,21 +8,34 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
|
|||
isDirty: false,
|
||||
waiting: false,
|
||||
authenticated: false,
|
||||
config: {
|
||||
appKey: "",
|
||||
board: null,
|
||||
list: null,
|
||||
cards: null
|
||||
},
|
||||
config: {},
|
||||
boards: null,
|
||||
lists: null,
|
||||
|
||||
hasAppKey: function() {
|
||||
console.log(is.not.empty(this.get('config.appKey')));
|
||||
return is.empty(this.get('config.appKey')) ? false : true;
|
||||
}.property('config'),
|
||||
didReceiveAttrs() {
|
||||
let 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);
|
||||
|
||||
if (lists.length) {
|
||||
self.set('config.list', lists[0]);
|
||||
let savedLists = self.get('config.lists');
|
||||
if (savedLists === null) {
|
||||
savedLists = [];
|
||||
}
|
||||
|
||||
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() {
|
||||
let self = this;
|
||||
let list = this.get('config.list');
|
||||
// getListCards() {
|
||||
// let self = this;
|
||||
// let list = this.get('config.list');
|
||||
|
||||
Trello.get(`lists/${list.id}/cards`,
|
||||
function(cards) {
|
||||
self.set('config.cards', cards);
|
||||
console.log(cards);
|
||||
});
|
||||
},
|
||||
// Trello.get(`lists/${list.id}/cards`,
|
||||
// function(cards) {
|
||||
// self.set('config.cards', 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() {
|
||||
let appKey = this.get('config.appKey');
|
||||
let self = this;
|
||||
onListCheckbox(id) {
|
||||
let lists = this.get('config.lists');
|
||||
let list = lists.findBy('id', id);
|
||||
|
||||
if (is.empty(appKey)) {
|
||||
$("#trello-appkey").addClass("error").focus();
|
||||
if (list !== null) {
|
||||
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) {
|
||||
this.set('config.list', list);
|
||||
this.getListCards();
|
||||
},
|
||||
// onListChange(list) {
|
||||
// this.set('config.list', list);
|
||||
// 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -186,3 +186,13 @@
|
|||
.form-divider {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
.widget-checkbox {
|
||||
color: $color-link;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-gray {
|
||||
color: $color-gray !important;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
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;
|
||||
.list-checkbox {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
</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,63 +38,60 @@
|
|||
<div class="input-form">
|
||||
<form>
|
||||
<div class="heading">
|
||||
<div class="title">Trello Authentication</div>
|
||||
<div class="tip">Provide your Trello App Key</div>
|
||||
<div class="title">Authentication</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>
|
||||
{{focus-input id="trello-appkey" type="text" value=config.appKey}}
|
||||
<label>Trello App Key</label>
|
||||
<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="title">Trello Boards / Lists</div>
|
||||
<div class="tip">Select board and list to display</div>
|
||||
</div>
|
||||
<div class="pull-left width-45">
|
||||
<div class="input-control">
|
||||
<label>Board</label>
|
||||
<div class="tip">Select board for display</div>
|
||||
{{ui-select id="boards-dropdown"
|
||||
content=boards
|
||||
action=(action 'onBoardChange')
|
||||
optionValuePath="id"
|
||||
optionLabelPath="name"
|
||||
selection=config.board}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-right width-45">
|
||||
<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="heading">
|
||||
<div class="title">Select Board & Lists</div>
|
||||
<div class="tip">Choose lists to include from board</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Board</label>
|
||||
<div class="tip">Select board</div>
|
||||
{{ui-select id="boards-dropdown"
|
||||
content=boards
|
||||
action=(action 'onBoardChange')
|
||||
optionValuePath="id"
|
||||
optionLabelPath="name"
|
||||
selection=config.board}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Lists</label>
|
||||
<div class="tip">Select lists to include</div>
|
||||
<div class="board" style="background-color:{{config.board.prefs.backgroundColor}};">
|
||||
<div class="board-title">{{config.board.name}}</div>
|
||||
<div class="list">
|
||||
<div class="list-title">{{config.list.name}}</div>
|
||||
{{#each config.cards as |card|}}
|
||||
<div class="card">{{card.name}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#each config.lists as |list|}}
|
||||
<div class="list" {{action 'onListCheckbox' list.id}}>
|
||||
{{#if list.included}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray list-checkbox" >check_box</i>
|
||||
{{else}}
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/section/base-editor}}
|
||||
|
|
@ -1,4 +1,45 @@
|
|||
<style>
|
||||
<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}}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue