1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-22 14:49:42 +02:00

github smart section UX

This commit is contained in:
Harvey Kandola 2017-12-08 18:03:25 +00:00
parent 0eef10e586
commit c12d66643c
3 changed files with 67 additions and 81 deletions

View file

@ -9,15 +9,14 @@
// //
// https://documize.com // https://documize.com
import { set } from '@ember/object'; import EmberObject from '@ember/object';
import { A } from '@ember/array';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import Component from '@ember/component'; import Component from '@ember/component';
import NotifierMixin from '../../../mixins/notifier'; import NotifierMixin from '../../../mixins/notifier';
import TooltipMixin from '../../../mixins/tooltip';
import SectionMixin from '../../../mixins/section'; import SectionMixin from '../../../mixins/section';
export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, { export default Component.extend(SectionMixin, NotifierMixin, {
sectionService: service('section'), sectionService: service('section'),
isDirty: false, isDirty: false,
busy: false, busy: false,
@ -90,21 +89,17 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
self.get('sectionService').fetch(page, "checkAuth", self.get('config')) self.get('sectionService').fetch(page, "checkAuth", self.get('config'))
.then(function () { .then(function () {
self.send('authStage2'); self.send('authStage2');
}, function (error) { }, function (error) {
console.log(error); // eslint-disable-line no-console console.log(error); // eslint-disable-line no-console
self.send('auth'); // require auth if the db token is invalid self.send('auth'); // require auth if the db token is invalid
}); });
} }
}, function (error) { }, function (error) {
console.log(error); // eslint-disable-line no-console console.log(error); // eslint-disable-line no-console
}); });
} }
}, },
willDestroyElement() {
this.destroyTooltips();
},
getOwnerLists() { getOwnerLists() {
this.set('busy', true); this.set('busy', true);
@ -138,41 +133,48 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
let page = this.get('page'); let page = this.get('page');
this.get('sectionService').fetch(page, "orgrepos", self.get('config')) this.get('sectionService').fetch(page, "orgrepos", self.get('config'))
.then(function (lists) { .then(function (lists) {
let savedLists = self.get('config.lists');
if (savedLists === null) {
savedLists = [];
}
if (lists.length > 0) { let lists2 = A([]);
let noIncluded = true;
lists.forEach(function (list) { lists.forEach((i) => {
let included = false; lists2.pushObject(EmberObject.create(i));
var saved;
if (is.not.undefined(savedLists)) {
saved = savedLists.findBy("id", list.id);
}
if (is.not.undefined(saved)) {
included = saved.included;
noIncluded = false;
}
list.included = included;
}); });
if (noIncluded) { let savedLists = self.get('config.lists');
lists[0].included = true; // make the first entry the default if (savedLists === null) {
savedLists = [];
} }
}
self.set('config.lists', lists); if (lists2.length > 0) {
self.set('busy', false); let noIncluded = true;
}, function (error) {
self.set('busy', false); lists2.forEach(function (list) {
self.set('authenticated', false); let included = false;
self.showNotification("Unable to fetch repositories"); var saved;
console.log(error); // eslint-disable-line no-console if (is.not.undefined(savedLists)) {
}); saved = savedLists.findBy("id", list.id);
}
if (is.not.undefined(saved)) {
included = saved.selected;
noIncluded = false;
}
list.selected = included;
});
if (noIncluded) {
lists2[0].selected = true; // make the first entry the default
}
}
self.set('config.lists', lists2);
self.set('busy', false);
}, function (error) {
self.set('busy', false);
self.set('authenticated', false);
self.showNotification("Unable to fetch repositories");
console.log(error); // eslint-disable-line no-console
});
}, },
actions: { actions: {
@ -180,19 +182,6 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
return this.get('isDirty'); return this.get('isDirty');
}, },
onListCheckbox(id) { // select one repository only
let lists = this.get('config.lists');
let list = lists.findBy('id', id);
lists.forEach(function (entry) {
set(entry, 'included', false);
});
if (list !== null) {
set(list, 'included', true);
}
},
authStage2() { authStage2() {
let self = this; let self = this;
self.set('config.userId', self.get("session.session.authenticated.user.id")); self.set('config.userId', self.get("session.session.authenticated.user.id"));
@ -205,7 +194,7 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
self.set('busy', false); self.set('busy', false);
self.set('owners', owners); self.set('owners', owners);
self.getOwnerLists(); self.getOwnerLists();
}, function (error) { }, function (error) {
self.set('busy', false); self.set('busy', false);
self.set('authenticated', false); self.set('authenticated', false);
self.showNotification("Unable to fetch owners"); self.showNotification("Unable to fetch owners");

View file

@ -23,11 +23,12 @@
.github-list-title { .github-list-title {
color: #4c4c4c; color: #4c4c4c;
font-size: 14px; font-size: 14px;
margin: 5px; vertical-align: text-top;
} }
.github-list-checkbox { .github-list-checkbox {
vertical-align: text-bottom; vertical-align: text-top;
margin-right: 10px;
} }
.github-issue-label { .github-issue-label {

View file

@ -1,20 +1,20 @@
{{#section/base-editor document=document folder=folder page=page busy=busy tip="GitHub is how people build software. (https://github.com)" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}} {{#section/base-editor document=document folder=folder page=page busy=busy tip="GitHub is how people build software. (https://github.com)" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
<div class="section-github-editor">
<div class="row section-github-editor">
{{#if authenticated}} {{#if authenticated}}
<div class="pull-left width-45"> <div class="col-6">
<div class="input-control"> <div class="form-group">
<label>Select repository</label> <label>Select Organization</label>
<div class="tip">Select organization or user whose repository you want to show</div> {{ui-select id="owners-dropdown" content=owners action=(action 'onOwnerChange') optionValuePath="id" optionLabelPath="name" selection=config.owner}}
{{ui-select id="owners-dropdown" content=owners action=(action 'onOwnerChange') optionValuePath="id" optionLabelPath="name" selection=config.owner}} <small class="form-text text-muted">Select organization or user whose repository you want to show</small>
</div> </div>
<div class="input-control"> <div class="form-group">
<label>Show items since</label> <label>Show items since</label>
<div class="tip">default is 7 days ago</div> {{input id="branch-since" value=config.branchSince type="text" class="form-control"}}
{{input id="branch-since" value=config.branchSince type="text" }}<br> <small class="form-text text-muted">default is 7 days ago</small>
</div> </div>
<div class="input-control"> <div class="form-group">
<label>GitHub Views</label> <label>GitHub Views</label>
<div class="tip">Select the views you want to show</div>
<div class="github-view"> <div class="github-view">
{{input id="show-milestone" checked=config.showMilestones type="checkbox"}} {{input id="show-milestone" checked=config.showMilestones type="checkbox"}}
<label>Show Milestones</label> <label>Show Milestones</label>
@ -25,17 +25,17 @@
{{input id="show-commits" checked=config.showCommits type="checkbox" }} {{input id="show-commits" checked=config.showCommits type="checkbox" }}
<label>Show Commits</label> <label>Show Commits</label>
</div> </div>
<small class="form-text text-muted">Select the views you want to show</small>
</div> </div>
</div> </div>
<div class="pull-left width-10">&nbsp;</div> <div class="col-6">
<div class="pull-left width-45">
<div class="input-form"> <div class="input-form">
<div class="input-control"> <div class="form-group">
<label>Repositories</label> <label>Select Repository</label>
<div class="tip">Select the repository to show</div> {{ui/ui-list-picker items=config.lists nameField='repo' singleSelect=true}}
<div class="github-board">
{{!-- <div class="github-board">
{{#each config.lists as |list|}} {{#each config.lists as |list|}}
<div class="github-list" {{action 'onListCheckbox' list.id}}> <div class="github-list" {{action 'onListCheckbox' list.id}}>
{{#if list.included}} {{#if list.included}}
@ -46,19 +46,15 @@
<span class="github-list-title">{{list.repo}} {{#if list.private}}(private){{/if}}</span> <span class="github-list-title">{{list.repo}} {{#if list.private}}(private){{/if}}</span>
</div> </div>
{{/each}} {{/each}}
</div> </div> --}}
<div class="clearfix" />
</div> </div>
</div> </div>
</div> </div>
{{else}} {{else}}
<div class="pull-left width-45"> <div class="col-6">
<div class="input-control"> <div class="btn btn-primary" {{action 'auth'}}>Authenticate</div>
<label>Authentication</label>
<div class="tip">Click to authenticate with Github</div>
</div>
<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
</div> </div>
{{/if}} {{/if}}
</div> </div>
{{/section/base-editor}} {{/section/base-editor}}