1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-25 16:19:46 +02:00

reworked smart section UX

This commit is contained in:
Harvey Kandola 2017-12-08 17:42:54 +00:00
parent 57b3801f87
commit 0eef10e586
6 changed files with 67 additions and 92 deletions

View file

@ -10,15 +10,12 @@
// https://documize.com // https://documize.com
import { set } from '@ember/object'; import { set } from '@ember/object';
import { schedule } from '@ember/runloop'; import { schedule } from '@ember/runloop';
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 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, {
sectionService: service('section'), sectionService: service('section'),
isDirty: false, isDirty: false,
waiting: false, waiting: false,
@ -69,10 +66,6 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
}); });
}, },
willDestroyElement() {
this.destroyTooltips();
},
getWorkspaces() { getWorkspaces() {
let page = this.get('page'); let page = this.get('page');
let self = this; let self = this;
@ -155,15 +148,15 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
auth() { auth() {
// missing data? // missing data?
if (is.empty(this.get('config.url'))) { if (is.empty(this.get('config.url'))) {
$("#gemini-url").addClass("error").focus(); $("#gemini-url").addClass("is-invalid").focus();
return; return;
} }
if (is.empty(this.get('config.username'))) { if (is.empty(this.get('config.username'))) {
$("#gemini-username").addClass("error").focus(); $("#gemini-username").addClass("is-invalid").focus();
return; return;
} }
if (is.empty(this.get('config.APIKey'))) { if (is.empty(this.get('config.APIKey'))) {
$("#gemini-apikey").addClass("error").focus(); $("#gemini-apikey").addClass("is-invalid").focus();
return; return;
} }
@ -195,17 +188,6 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
self.set('user', null); self.set('user', null);
self.set('config.userId', 0); self.set('config.userId', 0);
self.set('waiting', false); self.set('waiting', false);
switch (reason.status) {
case 400:
self.showNotification(`Unable to connect to Gemini URL`);
break;
case 403:
self.showNotification(`Unable to authenticate`);
break;
default:
self.showNotification(`Something went wrong, try again!`);
}
}); });
}, },

View file

@ -10,15 +10,13 @@
// https://documize.com // https://documize.com
import { set } from '@ember/object'; import { set } from '@ember/object';
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';
import netUtil from '../../../utils/net'; import netUtil from '../../../utils/net';
export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, { export default Component.extend(SectionMixin, NotifierMixin, {
sectionService: service('section'), sectionService: service('section'),
isDirty: false, isDirty: false,
waiting: false, waiting: false,
@ -48,10 +46,6 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
this.send('auth'); this.send('auth');
}, },
willDestroyElement() {
this.destroyTooltips();
},
displayError(reason) { displayError(reason) {
if (netUtil.isAjaxAccessError(reason)) { if (netUtil.isAjaxAccessError(reason)) {
this.showNotification(`Unable to authenticate`); this.showNotification(`Unable to authenticate`);
@ -93,17 +87,17 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
if (is.not.undefined(group)) { if (is.not.undefined(group)) {
set(config, 'group', group); set(config, 'group', group);
} }
}, function (reason) { }, function (reason) {
self.set('authenticated', false); self.set('authenticated', false);
self.set('waiting', false); self.set('waiting', false);
self.set('config.APIToken', ''); // clear the api token self.set('config.APIToken', ''); // clear the api token
self.displayError(reason); self.displayError(reason);
console.log("get options call failed"); // eslint-disable-line no-console console.log("get options call failed"); // eslint-disable-line no-console
}); });
}, function (reason) { }, function (reason) {
self.set('authenticated', false); self.set('authenticated', false);
self.set('waiting', false); self.set('waiting', false);
self.set('config.APIToken', ''); // clear the api token self.set('config.APIToken', ''); // clear the api token
self.displayError(reason); self.displayError(reason);
console.log("auth token invalid"); // eslint-disable-line no-console console.log("auth token invalid"); // eslint-disable-line no-console
}); });
@ -186,4 +180,4 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
}); });
} }
} }
}); });

View file

@ -1,42 +1,42 @@
{{#section/base-editor document=document folder=folder page=page busy=waiting tip="Gemini enterprise issue and ticketing software (https://www.countersoft.com)" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}} {{#section/base-editor document=document folder=folder page=page busy=waiting tip="Gemini enterprise issue and ticketing software (https://www.countersoft.com)" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
<div class="pull-left width-45"> <div class="row">
<div class="input-control"> <div class="col-6">
<label>Gemini URL</label> <div class="form-group">
<div class="tip">e.g. http://helpdesk.countersoft.com</div> <label for="gemini-url">Gemini URL</label>
{{focus-input id="gemini-url" type="text" value=config.url readonly=isReadonly}} {{focus-input id="gemini-url" type="text" value=config.url class="form-control"}}
</div> <small class="form-text text-muted">e.g. http://helpdesk.countersoft.com</small>
<div class="input-control">
<label>Username</label>
<div class="tip">Gemini username</div>
{{input id="gemini-username" type="text" value=config.username readonly=isReadonly}}
</div>
<div class="input-control">
<label>API Key</label>
<div class="tip">Gemini user API key (from user profile)</div>
{{input id="gemini-apikey" type="password" value=config.APIKey readonly=isReadonly}}
</div>
<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
</div>
<div class="pull-left margin-left-40 width-45">
{{#if authenticated}}
<div class="input-control">
<label>Workspace</label>
<div class="tip">Select Gemini workspace for source of items to be displayed</div>
<ul class="section-gemini-workspaces">
{{#each workspaces as |card|}}
<li class="section-gemini-workspace" data-tooltip="{{card.Title}}" data-tooltip-position="bottom center" id="gemini-workspace-{{card.Id}}">
<div class="section-gemini-card" style="background-color:{{card.Color}};" {{action 'onWorkspaceChange' card.Id}}>{{card.Key}}</div>
{{#if card.selected}}
<div class="section-gemini-selected-card">&#10003;</div>
{{/if}}
</li>
{{/each}}
</ul>
</div> </div>
<div class="clearfix" /> <div class="form-group">
{{/if}} <label>Username</label>
<div class="tip">Gemini Username</div>
{{input id="gemini-username" type="text" value=config.username class="form-control"}}
</div>
<div class="form-group">
<label for="gemini-apikey">API Key</label>
{{input id="gemini-apikey" type="password" value=config.APIKey class="form-control"}}
<small class="form-text text-muted">Gemini user API key (from user profile)</small>
</div>
<div class="btn btn-primary" {{action 'auth'}}>Authenticate</div>
</div>
<div class="col-6">
{{#if authenticated}}
<div class="form-group">
<label>Select Gemini workspace</label>
<ul class="section-gemini-workspaces">
{{#each workspaces as |card|}}
<li class="section-gemini-workspace" data-tooltip="{{card.Title}}" data-tooltip-position="bottom center" id="gemini-workspace-{{card.Id}}">
<div class="section-gemini-card" style="background-color:{{card.Color}};" {{action 'onWorkspaceChange' card.Id}}>{{card.Key}}</div>
{{#if card.selected}}
<div class="section-gemini-selected-card">&#10003;</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
</div> </div>
{{/section/base-editor}} {{/section/base-editor}}

View file

@ -1,13 +1,14 @@
{{#section/base-editor document=document folder=folder page=page busy=waiting tip="Papertrail cloud logging service (https://papertrailapp.com)" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}} {{#section/base-editor document=document folder=folder page=page busy=waiting tip="Papertrail cloud logging service (https://papertrailapp.com)" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
<div class="pull-left width-45"> <div class="row">
<div class="col-6">
<form {{ action 'auth' on="submit" }} > <form {{ action 'auth' on="submit" }} >
<div class="input-control"> <div class="form-group">
<label>Papertrail API Key</label> <label>Papertrail API Key</label>
<div class="tip">API Token (from your profile)</div> {{focus-input id="papertrail-apitoken" type="password" value=config.APIToken class="form-control"}}
{{focus-input id="papertrail-apitoken" type="password" value=config.APIToken }} <small class="form-text text-muted">API Token (from your profile)</small>
</div> </div>
<div class="regular-button button-blue" {{ action 'auth' }} > <div class="btn btn-primary" {{ action 'auth' }} >
{{#if authenticated}} {{#if authenticated}}
Re-Authenticate Re-Authenticate
{{else}} {{else}}
@ -18,28 +19,26 @@
</div> </div>
{{#if authenticated}} {{#if authenticated}}
<div class="pull-left width-10">&nbsp;</div> <div class="col-6">
<div class="pull-left width-45">
<form {{action 'onAction' on="submit"}}> <form {{action 'onAction' on="submit"}}>
<div class="input-control"> <div class="form-group">
<label>Search query</label> <label for="papertrail-query">Search query</label>
<div class="tip">Determine which log entries you want to display e.g. bob OR ("some phrase" AND sally)</div> {{input id="papertrail-query" type="text" class="form-control mousetrap" value=config.query}}
{{input id="papertrail-query" type="text" class="mousetrap" value=config.query}} <small class="form-text text-muted">Determine which log entries you want to display e.g. bob OR ("some phrase" AND sally)</small>
</div> </div>
<div class="input-control"> <div class="form-group">
<label>Maximum results</label> <label for="papertrail-max">Maximum results</label>
<div class="tip">How many log entries do you want?</div> {{input id="papertrail-max" type="number" class="form-control mousetrap" value=config.max}}
{{input id="papertrail-max" type="number" class="mousetrap" value=config.max}} <small class="form-text text-muted">How many log entries do you want?</small>
</div> </div>
<div class="input-control"> <div class="form-group">
<label>Group</label> <label for="group-dropdown">Group</label>
<div class="tip">Optional Papertrail group</div>
{{ui-select id="group-dropdown" prompt="<group>" content=options.groups action=(action 'onGroupsChange') optionValuePath="id" optionLabelPath="name" selection=config.group}} {{ui-select id="group-dropdown" prompt="<group>" content=options.groups action=(action 'onGroupsChange') optionValuePath="id" optionLabelPath="name" selection=config.group}}
<small class="form-text text-muted">Optional Papertrail group</small>
</div> </div>
</form> </form>
</div> </div>
{{/if}} {{/if}}
</div>
<div class="clearfix" />
{{/section/base-editor}} {{/section/base-editor}}

View file

@ -29,7 +29,7 @@
</div> </div>
{{/if}} {{/if}}
{{else}} {{else}}
<div class="btn btn-success" {{action 'auth'}}>Authenticate</div> <div class="btn btn-primary" {{action 'auth'}}>Authenticate</div>
{{/if}} {{/if}}
{{/section/base-editor}} {{/section/base-editor}}

View file

@ -1,4 +1,4 @@
<select {{action 'change' on='change'}} class={{cssClass}} readonly={{readonly}}> <select {{action 'change' on='change'}} class="form-control {{cssClass}}" readonly={{readonly}}>
{{#if prompt}} {{#if prompt}}
<option disabled selected={{is-not selection}}> <option disabled selected={{is-not selection}}>
{{prompt}} {{prompt}}