mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
simplified Trello integration to display visual board
This commit is contained in:
Harvey Kandola
parent
17b01c2de4
commit
ea209e387d
15 changed files with 205 additions and 1104 deletions
|
|
@ -50,8 +50,7 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
|
|||
token: "",
|
||||
user: null,
|
||||
board: null,
|
||||
lists: [],
|
||||
boards: []
|
||||
lists: []
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -102,12 +101,6 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
|
|||
|
||||
this.set('noBoards', false);
|
||||
|
||||
if (is.undefined(self.get('initDateTimePicker'))) {
|
||||
$.datetimepicker.setLocale('en');
|
||||
$('#trello-since').datetimepicker();
|
||||
self.set('initDateTimePicker', "Done");
|
||||
}
|
||||
|
||||
if (is.null(board) || is.undefined(board)) {
|
||||
if (boards.length) {
|
||||
board = boards[0];
|
||||
|
|
@ -117,34 +110,30 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
|
|||
this.set('config.board', boards.findBy('id', board.id));
|
||||
}
|
||||
|
||||
if (is.null(board.id) || is.undefined(board.id)) {
|
||||
self.set('busy', false);
|
||||
} else {
|
||||
this.get('sectionService').fetch(page, "lists", self.get('config'))
|
||||
.then(function (lists) {
|
||||
let savedLists = self.get('config.lists');
|
||||
if (savedLists === null) {
|
||||
savedLists = [];
|
||||
this.get('sectionService').fetch(page, "lists", self.get('config'))
|
||||
.then(function (lists) {
|
||||
let savedLists = self.get('config.lists');
|
||||
if (savedLists === null) {
|
||||
savedLists = [];
|
||||
}
|
||||
|
||||
lists.forEach(function (list) {
|
||||
let saved = savedLists.findBy("id", list.id);
|
||||
let included = true;
|
||||
if (is.not.undefined(saved)) {
|
||||
included = saved.included;
|
||||
}
|
||||
|
||||
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('busy', false);
|
||||
}, function (error) { //jshint ignore: line
|
||||
self.set('busy', false);
|
||||
self.set('authenticated', false);
|
||||
self.showNotification("Unable to fetch board lists");
|
||||
console.log(error);
|
||||
list.included = included;
|
||||
});
|
||||
}
|
||||
|
||||
self.set('config.lists', lists);
|
||||
self.set('busy', false);
|
||||
}, function (error) { //jshint ignore: line
|
||||
self.set('busy', false);
|
||||
self.set('authenticated', false);
|
||||
self.showNotification("Unable to fetch board lists");
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
|
@ -161,15 +150,6 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
|
|||
}
|
||||
},
|
||||
|
||||
onBoardCheckbox(id) {
|
||||
let boards = this.get('config.boards');
|
||||
let board = boards.findBy('id', id);
|
||||
|
||||
if (board !== null) {
|
||||
Ember.set(board, 'included', !board.included);
|
||||
}
|
||||
},
|
||||
|
||||
auth() {
|
||||
if (this.get('appKey') === "") {
|
||||
$("#trello-appkey").addClass('error').focus();
|
||||
|
|
@ -207,8 +187,6 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
|
|||
self.get('sectionService').fetch(page, "boards", self.get('config'))
|
||||
.then(function (boards) {
|
||||
self.set('busy', false);
|
||||
boards.unshift({ id: null, namePath: "< do not show >", backgroundColor: "white" }); // add the non-selection to the front
|
||||
self.set('config.boards', boards); // save the boards in the config too
|
||||
self.set('boards', boards);
|
||||
self.getBoardLists();
|
||||
}, function (error) { //jshint ignore: line
|
||||
|
|
|
|||
|
|
@ -1,103 +1,89 @@
|
|||
.section-trello-editor {
|
||||
.section-trello-board {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.section-trello-board-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-trello-list {
|
||||
background-color: #e2e4e6;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 10px 0 0;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.section-trello-list-title {
|
||||
font-weight: bold;
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.section-trello-list-checkbox {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.trello-list {
|
||||
margin-bottom: 10px;
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.trello-label {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-trello-board {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.section-trello-board-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-trello-list {
|
||||
background-color: #e2e4e6;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 10px 0 0;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.section-trello-list-title {
|
||||
font-weight: bold;
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.section-trello-list-checkbox {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
|
||||
.section-trello-render {
|
||||
> .trello-board {
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
font-family: "open_sanslight";
|
||||
> a {
|
||||
> .trello-board-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
> .trello-list {
|
||||
background-color: #e2e4e6;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 10px 0 0;
|
||||
width: 300px;
|
||||
max-height: 500px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
|
||||
table.trello-single-board {
|
||||
border: none!important;
|
||||
text-align: left;
|
||||
margin:0!important;
|
||||
}
|
||||
|
||||
.trello-single-board thead tr th {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
color:#838d94;
|
||||
> .trello-list-title {
|
||||
font-weight: bold;
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
> a {
|
||||
> .trello-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;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.trello-single-board tbody tr td {
|
||||
border: none!important;
|
||||
padding: 5px 20px 5px 20px !important;
|
||||
}
|
||||
|
||||
.trello-label {
|
||||
color:white;
|
||||
font-size: 11px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,89 +2,52 @@
|
|||
tip="Trello is the visual way to manage your projects and organize anything (https://trello.com)"
|
||||
isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
|
||||
<div class="section-trello-editor">
|
||||
|
||||
{{#if authenticated}}
|
||||
{{#if noBoards}}
|
||||
|
||||
<div class="pull-left width-50">
|
||||
{{#if noBoards}}
|
||||
<div class="input-control">
|
||||
<div class="color-error">You have no team boards to share - personal boards are never shown.</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<!--
|
||||
<div class="pull-left width-45">
|
||||
<div class="input-form">
|
||||
<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>Show summary from (default 7 days ago)</label>
|
||||
{{input id="trello-since" value=config.since type="text" }}<br>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input-control">
|
||||
<label>Select which boards you want to see</label>
|
||||
<div class="tip">All boards are selectd by default</div>
|
||||
<div class="trello-board">
|
||||
{{#each config.boards as |board|}}
|
||||
{{#if board.id}}
|
||||
<div class="trello-list" {{action 'onBoardCheckbox' board.id}}>
|
||||
{{#if board.included}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray trello-list-checkbox">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray trello-list-checkbox">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
<span class="trello-label" style="background-color: {{board.prefs.backgroundColor}}">{{board.orgName}} / {{board.name}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<div class="clearfix" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-left width-10"> </div>
|
||||
-->
|
||||
<div class="pull-left width-45">
|
||||
{{else}}
|
||||
<div class="input-control">
|
||||
<label>Individual Board</label>
|
||||
<div class="tip">Select board</div>
|
||||
{{ui-select id="boards-dropdown" content=boards action=(action 'onBoardChange') optionValuePath="id" optionLabelPath="namePath" selection=config.board}}
|
||||
<label>Select Board</label>
|
||||
<div class="tip">Choose lists to include from board</div>
|
||||
{{ui-select id="boards-dropdown" content=boards action=(action 'onBoardChange') optionValuePath="id" optionLabelPath="name" selection=config.board}}
|
||||
</div>
|
||||
{{#if config.board.id}}
|
||||
<div class="input-control">
|
||||
<label>Lists</label>
|
||||
<div class="tip">Select lists to include</div>
|
||||
<div class="section-trello-board" style= {{boardStyle}}>
|
||||
<div class="section-trello-board-title">{{config.board.name}}</div>
|
||||
{{#each config.lists as |list|}}
|
||||
<div class="section-trello-list" {{action 'onListCheckbox' list.id}}>
|
||||
{{#if list.included}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
<span class="trello-list-title">{{list.name}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Lists</label>
|
||||
<div class="tip">Select lists to include</div>
|
||||
<div class="section-trello-board" style= {{boardStyle}}>
|
||||
<div class="section-trello-board-title">{{config.board.name}}</div>
|
||||
{{#each config.lists as |list|}}
|
||||
<div class="section-trello-list" {{action 'onListCheckbox' list.id}}>
|
||||
{{#if list.included}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
<span class="trello-list-title">{{list.name}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="clearfix" />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<div class="pull-left width-50">
|
||||
<div class="input-control">
|
||||
<label>Authentication</label>
|
||||
<div class="tip">Click to authenticate with Trello</div>
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{/section/base-editor}}
|
||||
{{else}}
|
||||
|
||||
<div class="pull-left width-50">
|
||||
<form>
|
||||
<div class="form-header">
|
||||
<div class="title">Authentication</div>
|
||||
<div class="tip">Click to authenticate with Trello</div>
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{/section/base-editor}}
|
||||
|
|
@ -1 +1,3 @@
|
|||
{{{page.body}}}
|
||||
<div class="non-printable">
|
||||
{{{page.body}}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue