'
50 | ]
51 | }, {
52 | text: 'Headcount',
53 | dataIndex: 'headcount',
54 | flex: 1,
55 | cell: {
56 | encodeHtml: false
57 | },
58 | tpl: [
59 | '
',
60 | '{headcount:plural("employee")}',
61 | ''
62 | ]
63 | }],
64 |
65 | listeners: {
66 | childdoubletap: 'onChildActivate'
67 | }
68 | }]
69 | });
70 |
--------------------------------------------------------------------------------
/client/app/view/phone/main/Main.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.phone.main.Main', {
2 | extend: 'Ext.Container',
3 | // xtype: 'main', -- set by profile
4 |
5 | controller: 'phone-main',
6 |
7 | cls: 'phone-profile',
8 | layout: 'card',
9 |
10 | items: [{
11 | xtype: 'panel',
12 | layout: 'card',
13 | reference: 'views',
14 | defaults: {
15 | header: {
16 | ui: 'dark',
17 | defaults: {
18 | ui: 'flat dark large',
19 | },
20 | items: {
21 | menu: {
22 | xtype: 'button',
23 | iconCls: 'x-fa fa-bars',
24 | weight: -10,
25 | handler: function () {
26 | Ext.fireEvent('togglemainmenu');
27 | }
28 | }
29 | }
30 | }
31 | },
32 | lbar: {
33 | xtype: 'mainmenu',
34 | reference: 'mainmenu',
35 | ui: 'dark slide',
36 | zIndex: 4,
37 | items: {
38 | trigger: false
39 | }
40 | }
41 | }, {
42 | xtype: 'container',
43 | reference: 'navigation',
44 | layout: 'card',
45 | defaults: {
46 | header: {
47 | ui: 'dark',
48 | defaults: {
49 | ui: 'flat dark large',
50 | },
51 | items: {
52 | back: {
53 | xtype: 'button',
54 | iconCls: 'x-fa fa-chevron-left',
55 | weight: -10,
56 | handler: function () {
57 | Ext.fireEvent('navigationback');
58 | }
59 | }
60 | }
61 | }
62 | }
63 | }]
64 | });
65 |
--------------------------------------------------------------------------------
/server/bin/www:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /**
4 | * Module dependencies.
5 | */
6 |
7 | var app = require('../app');
8 | var debug = require('debug')('server:server');
9 | var http = require('http');
10 |
11 | /**
12 | * Get port from environment and store in Express.
13 | */
14 |
15 | var port = normalizePort(process.env.PORT || '3000');
16 | app.set('port', port);
17 |
18 | /**
19 | * Create HTTP server.
20 | */
21 |
22 | var server = http.createServer(app);
23 |
24 | /**
25 | * Listen on provided port, on all network interfaces.
26 | */
27 |
28 | server.listen(port);
29 | server.on('error', onError);
30 | server.on('listening', onListening);
31 |
32 | /**
33 | * Normalize a port into a number, string, or false.
34 | */
35 |
36 | function normalizePort(val) {
37 | var port = parseInt(val, 10);
38 |
39 | if (isNaN(port)) {
40 | // named pipe
41 | return val;
42 | }
43 |
44 | if (port >= 0) {
45 | // port number
46 | return port;
47 | }
48 |
49 | return false;
50 | }
51 |
52 | /**
53 | * Event listener for HTTP server "error" event.
54 | */
55 |
56 | function onError(error) {
57 | if (error.syscall !== 'listen') {
58 | throw error;
59 | }
60 |
61 | var bind = typeof port === 'string'
62 | ? 'Pipe ' + port
63 | : 'Port ' + port;
64 |
65 | // handle specific listen errors with friendly messages
66 | switch (error.code) {
67 | case 'EACCES':
68 | console.error(bind + ' requires elevated privileges');
69 | process.exit(1);
70 | break;
71 | case 'EADDRINUSE':
72 | console.error(bind + ' is already in use');
73 | process.exit(1);
74 | break;
75 | default:
76 | throw error;
77 | }
78 | }
79 |
80 | /**
81 | * Event listener for HTTP server "listening" event.
82 | */
83 |
84 | function onListening() {
85 | var addr = server.address();
86 | var bind = typeof addr === 'string'
87 | ? 'pipe ' + addr
88 | : 'port ' + addr.port;
89 | debug('Listening on ' + bind);
90 | }
91 |
--------------------------------------------------------------------------------
/client/app/view/main/Menu.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.main.Menu', {
2 | extend: 'App.view.widgets.Sidebar',
3 | xtype: 'mainmenu',
4 |
5 | config: {
6 | selection: null
7 | },
8 |
9 | controller: 'mainmenu',
10 |
11 | cls: 'main-menu',
12 | layout: 'vbox',
13 | weighted: true,
14 |
15 | items: {
16 | trigger: {
17 | xtype: 'button',
18 | handler: 'onTriggerTap',
19 | iconCls: 'x-fa fa-bars',
20 | ui: 'large flat dark',
21 | docked: 'top'
22 | },
23 | navigator: {
24 | xtype: 'dataview',
25 | scrollable: 'y',
26 | store: 'Menu',
27 | weight: 0,
28 | flex: 1,
29 | ui: 'dark large',
30 | selectable: {
31 | deselectable: false
32 | },
33 | itemTpl: [
34 | '
',
35 | '
{text}'
36 | ],
37 | listeners: {
38 | childtap: 'onMenuChildTap'
39 | }
40 | },
41 | profile: {
42 | xtype: 'button',
43 | handler: 'onProfileTap',
44 | ui: 'large flat dark picture',
45 | iconCls: 'picture',
46 | textAlign: 'left',
47 | weight: 10,
48 | bind: {
49 | icon: '{user.picture}',
50 | text: '
{user.firstname}
'+
51 | '
{user.username}
'
52 | }
53 | },
54 | logout: {
55 | xtype: 'button',
56 | handler: 'onLogoutTap',
57 | iconCls: 'x-fa fa-power-off',
58 | text: 'Log out',
59 | textAlign: 'left',
60 | ui: 'large flat dark',
61 | weight: 20
62 | }
63 | },
64 |
65 | updateSelection: function(value) {
66 | this.child('#navigator').setSelection(value);
67 | }
68 | });
69 |
--------------------------------------------------------------------------------
/server/models/action.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | module.exports = function (sequelize, DataTypes) {
4 | var Model = sequelize.define("Action", {
5 | id: {
6 | type: DataTypes.UUID,
7 | defaultValue: DataTypes.UUIDV4,
8 | allowNull: false,
9 | primaryKey: true,
10 | validate: {
11 | isUUID: 4
12 | }
13 | },
14 | type: {
15 | type: DataTypes.STRING,
16 | allowNull: false,
17 | searchable: true,
18 | validate: {
19 | notEmpty: true
20 | }
21 | },
22 | subject: {
23 | type: DataTypes.STRING,
24 | searchable: true,
25 | validate: {
26 | notEmpty: true
27 | }
28 | }
29 | });
30 |
31 | Model.associate = function (models) {
32 | Model.belongsTo(models.Person, { as: 'recipient', constraints: false });
33 | Model.belongsTo(models.Person, {as: 'actions' });
34 | Model.addScope('nested', {
35 | include: [{
36 | model: models.Person,
37 | as: 'recipient',
38 | include: [{
39 | model: models.Office,
40 | as: 'office'
41 | }, {
42 | model: models.Organization,
43 | as: 'organization'
44 | }]
45 | }]
46 | });
47 | };
48 |
49 | Model.subject = function (action, recipient) {
50 | switch (action) {
51 | case 'phone':
52 | var extension = recipient.get('extension');
53 | return recipient.get('phone') + (extension ? ':' + extension : '');
54 | case 'profile':
55 | return recipient.get('username');
56 | case 'email':
57 | case 'linkedin':
58 | case 'skype':
59 | return recipient.get(action);
60 | default:
61 | return null;
62 | }
63 | };
64 |
65 | return Model;
66 | };
67 |
--------------------------------------------------------------------------------
/client/app/view/widgets/HistoryView.scss:
--------------------------------------------------------------------------------
1 | $historyitem-badge-size: dynamic(22px);
2 |
3 | @include dataview-ui(
4 | $ui: 'history',
5 | $background-color: $neutral-light-color,
6 | $item-background-color: $neutral-light-color,
7 | $item-padding: 5px 15px,
8 | $item-padding-big: 5px 15px
9 | );
10 |
11 | .history-visual {
12 | white-space: nowrap;
13 |
14 | .action, .picture {
15 | display: inline-block;
16 | position: relative;
17 | vertical-align: middle;
18 | }
19 |
20 | .action {
21 | border-radius: 50%;
22 | font-size: 14px;
23 | height: $historyitem-badge-size;
24 | width: $historyitem-badge-size;
25 | line-height: $historyitem-badge-size;
26 | text-align: center;
27 | z-index: 1;
28 | }
29 |
30 | .picture {
31 | margin-left: -$historyitem-badge-size*0.4;
32 | z-index: 0;
33 | }
34 | }
35 |
36 | .historyview {
37 | .history-item {
38 | cursor: pointer;
39 |
40 | .tablet-profile & {
41 | width: 100%;
42 |
43 | @media screen and (max-width: 600px) {
44 | width: 50%;
45 | }
46 | @media screen and (max-width: 400px) {
47 | width: 100%;
48 | }
49 | }
50 |
51 | .phone-profile.x-portrait & {
52 | width: 100%;
53 | }
54 |
55 | .phone-profile.x-landscape & {
56 | width: 50%;
57 | }
58 | }
59 |
60 | .history-item-wrapper {
61 | align-items: center;
62 | display: flex;
63 | flex-direction: row;
64 | }
65 |
66 | .history-details {
67 | padding: 8px;
68 | line-height: 1.4;
69 | flex: 1;
70 | width: 0;
71 |
72 | > * {
73 | @include ellipsis;
74 | }
75 |
76 | .display {
77 | display: block;
78 | font-size: 15px;
79 | font-weight: 600;
80 | }
81 |
82 | .date {
83 | font-size: 13px;
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/client/packages/local/coworkee/sass/src/dataview/DataView.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains Ext.dataview.DataView visual themes (ui)
3 | * http://docs.sencha.com/extjs/latest/modern/Ext.dataview.DataView.html#sass-mixins
4 | */
5 |
6 | @include dataview-ui(
7 | $ui: 'light',
8 | $item-color: $neutral-dark-color,
9 | $item-hovered-color: contrasted($neutral-dark-color, -5%),
10 | $item-selected-color: contrasted($neutral-dark-color, -20%),
11 | $item-pressed-color: contrasted($neutral-dark-color, -10%),
12 | $item-background-color: $neutral-light-color,
13 | $item-alt-background-color: contrasted($neutral-light-color, -5%),
14 | $item-hovered-background-color: contrasted($neutral-light-color, 5%),
15 | $item-selected-background-color: $base-color,
16 | $item-pressed-background-color: contrasted($neutral-light-color, 10%)
17 | );
18 |
19 | @include dataview-ui(
20 | $ui: 'dark',
21 | $background-color: $neutral-dark-color,
22 | $item-color: $neutral-light-color,
23 | $item-hovered-color: contrasted($neutral-light-color, -5%),
24 | $item-selected-color: contrasted($neutral-light-color, -20%),
25 | $item-pressed-color: contrasted($neutral-light-color, -10%),
26 | $item-background-color: $neutral-dark-color,
27 | $item-alt-background-color: contrasted($neutral-dark-color, -5%),
28 | $item-hovered-background-color: contrasted($neutral-dark-color, 5%),
29 | $item-selected-background-color: $base-color,
30 | $item-pressed-background-color: contrasted($neutral-dark-color, 15%)
31 | );
32 |
33 | @include dataview-ui(
34 | $ui: 'large',
35 | $item-font-weight: 400,
36 | $item-font-size: 14px,
37 | $item-font-size-big: 14px,
38 | $item-padding: 16px,
39 | $item-padding-big: 18px
40 | );
41 |
42 | @include dataview-ui(
43 | $ui: 'thumbnails',
44 | $background-color: $neutral-light-color
45 | );
46 |
47 | .x-dataview-thumbnails {
48 | .x-dataview-item {
49 | .thumbnail {
50 | @include background-size('cover');
51 | cursor: pointer;
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/client/app/view/person/ShowTools.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.person.ShowTools', {
2 | extend: 'Ext.Container',
3 | xtype: 'personshowtools',
4 |
5 | mixins: [
6 | 'Ext.mixin.Responsive'
7 | ],
8 |
9 | cls: 'person-tools',
10 |
11 | layout: {
12 | type: 'box',
13 | align: 'center'
14 | },
15 |
16 | responsiveConfig: {
17 | 'width < 600': {
18 | layout: {
19 | vertical: true
20 | }
21 | },
22 | 'width > 599': {
23 | layout: {
24 | vertical: false
25 | }
26 | }
27 | },
28 |
29 | items: [{
30 | xtype: 'toolbar',
31 | flex: 1,
32 |
33 | items: [{
34 | iconCls: 'x-fa fa-phone',
35 | handler: 'onCallTap',
36 | ui: 'action-phone',
37 | bind: {
38 | tooltip: 'Call
{record.phone}'
39 | }
40 | }, {
41 | iconCls: 'x-fab fa-skype',
42 | handler: 'onSkypeTap',
43 | ui: 'action-skype',
44 | bind: {
45 | tooltip: 'Skype with
{record.skype}'
46 | }
47 | }, {
48 | iconCls: 'x-fa fa-envelope',
49 | handler: 'onEmailTap',
50 | ui: 'action-email',
51 | bind: {
52 | tooltip: 'Send email to
{record.email}'
53 | }
54 | }, {
55 | iconCls: 'x-fab fa-linkedin',
56 | handler: 'onLinkedInTap',
57 | ui: 'action-linkedin',
58 | bind: {
59 | tooltip: 'See
{record.linkedin} LinkedIn profile'
60 | }
61 | }]
62 | }, {
63 | xtype: 'component',
64 | cls: 'location',
65 | tpl: [
66 | '
{office.city}
'
67 | //'
11:00 pm
'
68 | ],
69 | bind: {
70 | record: '{record}'
71 | }
72 | }]
73 | });
74 |
--------------------------------------------------------------------------------
/server/models/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file collects all the models from the models directory and associates them if needed.
3 | */
4 |
5 | "use strict";
6 |
7 | var fs = require("fs");
8 | var path = require("path");
9 | var Sequelize = require("sequelize");
10 | var Op = Sequelize.Op;
11 | var env = process.env.NODE_ENV || "development";
12 | var config = require(path.join(__dirname, '..', 'utils', 'config')).database;
13 | config = config || {};
14 |
15 | config.operatorsAliases = {
16 | $eq: Op.eq,
17 | $ne: Op.ne,
18 | $gte: Op.gte,
19 | $gt: Op.gt,
20 | $lte: Op.lte,
21 | $lt: Op.lt,
22 | $not: Op.not,
23 | $in: Op.in,
24 | $notIn: Op.notIn,
25 | $is: Op.is,
26 | $like: Op.like,
27 | $notLike: Op.notLike,
28 | $iLike: Op.iLike,
29 | $notILike: Op.notILike,
30 | $regexp: Op.regexp,
31 | $notRegexp: Op.notRegexp,
32 | $iRegexp: Op.iRegexp,
33 | $notIRegexp: Op.notIRegexp,
34 | $between: Op.between,
35 | $notBetween: Op.notBetween,
36 | $overlap: Op.overlap,
37 | $contains: Op.contains,
38 | $contained: Op.contained,
39 | $adjacent: Op.adjacent,
40 | $strictLeft: Op.strictLeft,
41 | $strictRight: Op.strictRight,
42 | $noExtendRight: Op.noExtendRight,
43 | $noExtendLeft: Op.noExtendLeft,
44 | $and: Op.and,
45 | $or: Op.or,
46 | $any: Op.any,
47 | $all: Op.all,
48 | $values: Op.values,
49 | $col: Op.col
50 | };
51 | var sequelize = new Sequelize(config.database, config.username, config.password, config);
52 | var db = {};
53 |
54 | fs.readdirSync(__dirname)
55 | .filter(function(file) {
56 | return (file.indexOf(".") !== 0) && (file !== "index.js");
57 | })
58 | .forEach(function(file) {
59 | var model = sequelize.import(path.join(__dirname, file));
60 | db[model.name] = model;
61 | });
62 |
63 | Object.keys(db).forEach(function(modelName) {
64 | if ("associate" in db[modelName]) {
65 | db[modelName].associate(db);
66 | }
67 | });
68 |
69 | db.sequelize = sequelize;
70 | db.Sequelize = Sequelize;
71 |
72 | module.exports = db;
73 |
--------------------------------------------------------------------------------
/client/packages/local/coworkee/sass/src/Panel.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains Ext.Panel/Header/Title visual themes (ui)
3 | * http://docs.sencha.com/extjs/latest/modern/Ext.Panel.html#sass-mixins
4 | */
5 |
6 | @include panel-ui(
7 | $ui: 'block',
8 | $body-background-color: $neutral-light-color,
9 | $header-background-color: $neutral-light-color,
10 | $header-color: $neutral-medium-dark-color,
11 | $header-icon-size: 34px,
12 | $header-icon-size-big: 38px,
13 | $header-icon-font-size: 18px,
14 | $header-icon-font-size-big: 20px,
15 | $header-font-size: 18px,
16 | $header-font-size-big: 20px,
17 | $header-line-height: 1.2,
18 | $header-line-height-big: 1.2
19 | );
20 |
21 | .x-paneltitle-block {
22 | .x-icon-el {
23 | background-color: $base-color;
24 | color: contrasted($base-light-color, -25%);
25 | border-radius: 50%;
26 | }
27 | }
28 |
29 | @include panel-ui(
30 | $ui: 'dialog',
31 | $body-background-color: $background-color,
32 | $header-background-color: $background-color,
33 | $header-border-width: 0,
34 | $header-icon-size: 24px,
35 | $header-icon-size-big: 24px,
36 | $header-font-size: 18px,
37 | $header-font-size-big: 18px,
38 | $header-line-height: 2,
39 | $header-line-height-big: 2,
40 | $header-title-padding: 16px 20px,
41 | $header-title-padding-big: 20px 24px
42 | );
43 |
44 | @include panel-ui(
45 | $ui: 'invalid',
46 | $anchor-margin: 0,
47 | $anchor-height: 8px,
48 | $anchor-width: 12px,
49 | $border-color: $invalid-base-color,
50 | $border-width: 1px,
51 | $border-style: none,
52 | $body-background-color: $invalid-base-color,
53 | $body-border-style: none,
54 | $body-border-width: 0,
55 | $body-color: $invalid-text-color
56 | );
57 |
58 | @include panel-ui(
59 | $ui: 'flat',
60 | $body-background-color: transparent,
61 | $header-background-color: transparent
62 | );
63 |
64 | @include panel-ui(
65 | $ui: 'dark',
66 | $header-background-color: $neutral-dark-color,
67 | $header-color: $neutral-light-color
68 | );
69 |
70 |
--------------------------------------------------------------------------------
/client/app/util/Errors.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.util.Errors', {
2 | requires: ['Ext.Toast'],
3 |
4 | statics: {
5 | toForm: function(errors) {
6 | var values = {};
7 |
8 | if (Ext.isObject(errors)) {
9 | errors = errors.errors;
10 | };
11 |
12 | if (Ext.isArray(errors)) {
13 | errors.forEach(function(error) {
14 | var name = error.id || error.field || error.path;
15 | var value = error.msg || error.message;
16 | if (name && value) {
17 | values[name] = value;
18 | }
19 | });
20 | } else {
21 | values = errors;
22 | }
23 |
24 | return values;
25 | },
26 |
27 | process: function(error, form) {
28 | if (!error) {
29 | return false;
30 | }
31 |
32 | if (Ext.isFunction(error.hasException)) {
33 | // The given error is an Ext.data.operation.Operation
34 | if (!error.hasException()) {
35 | return false;
36 | }
37 |
38 | error = error.getError() || 'An unknown error has occurred';
39 | }
40 |
41 | if (Ext.isObject(error)) {
42 | if (error.code === -32096) { // READONLY_SESSION
43 | // The session is read-only (demo version), let's display a temporary message
44 | // and return false since this exception should not be considered as an error.
45 | Ext.toast(error.message, 2000);
46 | return false;
47 | }
48 | if (error.code === -32001 && form) {
49 | form.setErrors(this.toForm(error));
50 | } else {
51 | Ext.Msg.alert(error.name + ' Error', error.message);
52 | }
53 | } else if (Ext.isString(error)) {
54 | Ext.Msg.alert('Error', error);
55 | }
56 |
57 | return true;
58 | }
59 | }
60 | });
61 |
--------------------------------------------------------------------------------
/client/packages/local/coworkee/sass/src/Button.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains Ext.Button visual themes (ui)
3 | * http://docs.sencha.com/extjs/latest/modern/Ext.Button.html#sass-mixins
4 | */
5 |
6 | .x-button .x-text-el {
7 | .title {
8 | text-transform: uppercase;
9 | }
10 | .value {
11 | opacity: 0.5;
12 | font-size: 13px;
13 | }
14 | }
15 |
16 | @include button-ui(
17 | $ui: 'block',
18 | $border-radius: 0,
19 | $border-width: 0,
20 | $icon-size: 28px,
21 | $icon-size-big: 28px,
22 | $icon-font-size: 20px,
23 | $icon-font-size-big: 20px,
24 | $font-size: 18px,
25 | $font-size-big: 18px,
26 | $font-weight: bold,
27 | $line-height: 1.4,
28 | $line-height-big: 1.4,
29 | $icon-only-padding: 16px,
30 | $icon-only-padding-big: 16px,
31 | $padding: 16px,
32 | $padding-big: 16px
33 | );
34 |
35 | @include button-ui(
36 | $ui: 'action',
37 | $border-radius: 0,
38 | $border-width: 0
39 | );
40 |
41 | @include button-ui(
42 | $ui: 'large',
43 | $font-size: 14px,
44 | $font-size-big: 14px,
45 | $icon-size: 21px,
46 | $icon-size-big: 21px,
47 | $icon-font-size: 21px,
48 | $icon-font-size-big: 21px,
49 | $icon-only-padding: 16px,
50 | $icon-only-padding-big: 18px,
51 | $padding: 16px,
52 | $padding-big: 18px
53 | );
54 |
55 | @include button-ui(
56 | $ui: 'flat',
57 | $background-color: rgba(white, 0),
58 | $color: $neutral-medium-dark-color,
59 | $pressed-color: $base-color
60 | );
61 |
62 | @include button-ui(
63 | $ui: 'dark',
64 | $color: $neutral-light-color,
65 | $pressed-color: $neutral-light-color,
66 | $background-color: $neutral-dark-color,
67 | $pressed-background-color: $base-color
68 | );
69 |
70 | @include button-ui(
71 | $ui: 'segmented',
72 | $border-color: transparent,
73 | $border-style: solid,
74 | $border-width: 0 0 2px 0,
75 | $hovered-border-color: $neutral-light-color,
76 | $pressed-border-color: $base-color,
77 | $icon-only-padding: $tab-padding,
78 | $icon-only-padding-big: $tab-padding-big,
79 | $padding: $tab-padding,
80 | $padding-big: $tab-padding-big
81 | );
82 |
--------------------------------------------------------------------------------
/client/app/view/auth/Login.scss:
--------------------------------------------------------------------------------
1 | // Note: image from https://pixabay.com (Creative Commons CC0)
2 | $auth-color: white;
3 | $auth-background-color: #123d40;
4 | $auth-background-image: url(get-resource-path('images/auth-background.jpg'));
5 |
6 | @include panel-ui(
7 | $ui: 'auth',
8 | $background-color: transparent,
9 | $body-background-color: transparentize($auth-background-color, 0.75),
10 | $body-color: $auth-color,
11 | $body-padding: 24px
12 | );
13 |
14 | .auth-login {
15 | @include background-size(cover);
16 | background-image: $auth-background-image;
17 | background-position: center;
18 |
19 | > .x-body-el {
20 | background-color: rgba(black, 0.25);
21 | }
22 |
23 | .x-formpanel {
24 | width: 256px;
25 |
26 | .x-button {
27 | // Balance button vertical spacing with form fields
28 | margin: $field-vertical-spacing/2 0;
29 |
30 | .x-big {
31 | margin: $field-vertical-spacing-big/2 0;
32 | }
33 | }
34 | }
35 |
36 | .auth-header,
37 | .auth-footer {
38 | color: $auth-color;
39 | text-align: center;
40 | padding: 16px;
41 |
42 | a {
43 | color: $auth-color;
44 | text-decoration: none;
45 | }
46 | }
47 |
48 | .auth-header {
49 | .logo {
50 | @include single-text-shadow;
51 | color: $auth-color;
52 | font-size: 40px;
53 | line-height: 1;
54 | }
55 |
56 | .title, .caption {
57 | white-space: nowrap;
58 | }
59 |
60 | .title {
61 | font-size: 31px;
62 | font-weight: bold;
63 | }
64 |
65 | .caption {
66 | font-size: 15px;
67 | text-transform: uppercase;
68 | }
69 | }
70 |
71 | .auth-footer {
72 | .logo {
73 | font-size: 18px;
74 | margin-right: 2px;
75 | margin-left: -4px;
76 |
77 | &::before {
78 | vertical-align: middle;
79 | }
80 | }
81 |
82 | .label {
83 | font-weight: bold;
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/client/app/view/person/WizardController.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.person.WizardController', {
2 | extend: 'App.view.widgets.WizardController',
3 | alias: 'controller.personwizard',
4 |
5 | control: {
6 | '#': {
7 | reset: 'refresh'
8 | }
9 | },
10 |
11 | refresh: function() {
12 | var vm = this.getViewModel();
13 | vm.getStore('offices').reload();
14 | vm.getStore('organizations').reload();
15 | },
16 |
17 | onNameFieldsBlur: function() {
18 | var me = this,
19 | vm = me.getViewModel(),
20 | record = vm.get('record'),
21 | firstname = record.get('firstname'),
22 | lastname = record.get('lastname'),
23 | username = record.get('username');
24 |
25 | // Don't try to generate a username if the user manually entered a value in
26 | // the username field or if the firstname and/or lastname fields are empty.
27 | if (Ext.isEmpty(firstname) || Ext.isEmpty(lastname) ||
28 | (!Ext.isEmpty(username) && me._generatedUsername !== username)) {
29 | return;
30 | }
31 |
32 | me._generatedUsername = true;
33 | Server.people.generateUsername({
34 | firstname: firstname,
35 | lastname: lastname
36 | }, function(result, response, success) {
37 | if (success && me._generatedUsername === true) {
38 | me._generatedUsername = result;
39 | record.set('username', result);
40 | }
41 | });
42 | },
43 |
44 | onUsernameChange: function(field, value) {
45 | // If the username field changed and is different from the last generated value, then
46 | // the user has manually entered a value that we don't want to overwrite, so let's
47 | // cancel the current generating process (if any) and reset the generated value.
48 | if (value !== this._generatedUsername) {
49 | this._generatedUsername = false;
50 | }
51 | },
52 |
53 | doPasswordMatch: function(value) {
54 | return this.lookup('password').getValue() !== value?
55 | 'Passwords do not match' :
56 | true;
57 | }
58 | });
59 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ext JS Employee Directory
2 | Ext JS Sample Application - Employee Directory (Coworkee)
3 |
4 | ## Getting started
5 | ### Prerequisite
6 | - Install [Node.js](https://nodejs.org/) (^6.9.2)
7 | - Install [Sencha Ext-Gen](https://docs.sencha.com/extjs/7.5.1/guides/getting_started/getting_started_with_npm.html) (npm install -g @sencha/ext-gen)
8 |
9 | ### Install the server
10 | Install the server node.js dependencies:
11 |
12 | $ cd server
13 | $ npm install
14 |
15 | ### Build the client
16 | Install the Ext JS framework dependencies:
17 |
18 | $ cd client
19 | $ npm install
20 |
21 | Upgrade App [ExtMoveToLatest](https://docs.sencha.com/extjs/7.5.1/guides/using_systems/using_npm/extmovetolatest.html)
22 |
23 | $ npm install -g @sencha/ext-movetolatest
24 | $ ext-movetolatest
25 | $ npm install
26 |
27 | Development build:
28 |
29 | $ npm start
30 |
31 | Production build:
32 |
33 | $ npm run build
34 |
35 | ### Run the app
36 |
37 | $ cd server
38 | $ npm start
39 |
40 | Note: by default, `npm start` will use the **development** build. To run the production
41 | build, use the following command instead:
42 |
43 | $ npm start -- --client-environment=production
44 |
45 | Open your browser on http://localhost:3000
46 |
47 | #### Network access
48 |
49 | By default, the server is setup to expose the Ext.Direct API through `localhost`. This
50 | address can be changed via the [`direct.server`](server/config.json#L16) option (e.g.
51 | `192.168.1.2`), in which case the client must be launched using the same address (e.g.
52 | `https://192.168.1.2:3000`). If the client needs to be accessed with a different address,
53 | you first need to enable CORS using [`cors.enabled: true`](server/config.json#L3).
54 |
55 | #### Cordova / PhoneGap
56 | If the app is ran inside
57 | [Cordova (or PhoneGap)](https://docs.sencha.com/cmd/guides/cordova_phonegap.html), it's
58 | required to change the following configs:
59 |
60 | - change the Ext.Direct API endpoint in the client app ([`app.json#js`](client/app.json#L254)) by the absolute URL
61 | - change the server IP/hostname ([`direct.server` option](server/config.json#L16)) by an accessible endpoint
62 | - enable CORS ([`cors.enabled: true`](server/config.json#L3))
63 |
--------------------------------------------------------------------------------
/client/app/view/tablet/organization/Browse.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.tablet.organization.Browse', {
2 | extend: 'App.view.organization.Browse',
3 | // xtype: 'organizationbrowse', -- set by profile
4 |
5 | requires: [
6 | 'Ext.plugin.ListPaging'
7 | ],
8 |
9 | controller: 'tablet-organizationbrowse',
10 |
11 | tbar: {
12 | xtype: 'organizationbrowsetoolbar'
13 | },
14 |
15 | items: [{
16 | xtype: 'grid',
17 | emptyText: 'No organization was found to match your search',
18 | bind: '{organizations}',
19 | ui: 'listing',
20 | collapsible: false,
21 | variableHeights: true,
22 |
23 | selectable: {
24 | disabled: true
25 | },
26 |
27 | plugins: [{
28 | type: 'listpaging',
29 | autoPaging: true
30 | }],
31 |
32 | columns: [{
33 | text: 'Name',
34 | dataIndex: 'name',
35 | flex: 2,
36 | cell: {
37 | encodeHtml: false
38 | },
39 | tpl: '
{name}'
40 | }, {
41 | text: 'Manager',
42 | dataIndex: 'manager.lastname',
43 | flex: 2,
44 | cell: {
45 | encodeHtml: false
46 | },
47 | tpl: [
48 | '
',
49 | '',
52 | '',
53 | '
{office.name}, ',
54 | '{office.city} ({office.country})',
55 | '
'
57 | ]
58 | }, {
59 | text: 'Headcount',
60 | dataIndex: 'headcount',
61 | flex: 1,
62 | cell: {
63 | encodeHtml: false
64 | },
65 | tpl: [
66 | '
',
67 | '{headcount:plural("employee")}',
68 | ''
69 | ]
70 | }],
71 |
72 | listeners: {
73 | childdoubletap: 'onChildActivate'
74 | }
75 | }]
76 | });
77 |
--------------------------------------------------------------------------------
/client/app/view/home/HomeEvents.scss:
--------------------------------------------------------------------------------
1 | .home-events {
2 | .x-dataview-item {
3 | cursor: pointer;
4 | margin: 0 0 $blocks-spacing 0;
5 | width: calc(50% - #{$blocks-spacing/2});
6 |
7 | &:nth-child(odd) {
8 | margin-right: $blocks-spacing;
9 | }
10 |
11 | .phone-profile & {
12 | @media screen and (max-width: 400px) {
13 | margin-right: 0;
14 | width: 100%;
15 | }
16 | }
17 |
18 | .tablet-profile & {
19 | @media screen and (max-width: 400px), (min-width: 600px) and (max-width: 800px) {
20 | margin-right: 0;
21 | width: 100%;
22 | }
23 | }
24 | }
25 |
26 | .event-header {
27 | background-color: $neutral-highlight-color;
28 | color: $neutral-dark-color;
29 | display: inline-block;
30 | font-size: 12px;
31 | padding: 6px 16px;
32 |
33 | .date, .title {
34 | display: inline-block;
35 | }
36 |
37 | .date {
38 | font-weight: bold;
39 | }
40 |
41 | .title {
42 | &:before {
43 | content: '|';
44 | margin: 0 4px;
45 | }
46 | }
47 |
48 | &.type-birthday {
49 | background-color: $base-light-color;
50 | color: $base-dark-color;
51 | }
52 |
53 | &.type-ended {
54 | background-color: $neutral-light-color;
55 | border: 1px solid $neutral-color;
56 | color: $neutral-dark-color;
57 | }
58 | }
59 |
60 | .event-content {
61 | display: flex;
62 | flex-direction: row;
63 | align-items: center;
64 | padding: 10px;
65 |
66 | > .picture {
67 | flex: 0 0 auto;
68 | margin-right: 12px;
69 | }
70 |
71 | > .details {
72 | display: flex;
73 | flex-direction: column;
74 | align-items: stretch;
75 | overflow: hidden;
76 | line-height: 1.4;
77 |
78 | > * {
79 | @include ellipsis;
80 | }
81 | }
82 |
83 | .person-name {
84 | font-size: 16px;
85 | font-weight: bold;
86 | }
87 |
88 | .person-title,
89 | .person-years {
90 | font-size: 13px;
91 | }
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/server/data/Offices.json:
--------------------------------------------------------------------------------
1 | [{"id":"2725949a-a1a5-45f8-ab29-4605629f9b49","name":"Fairfield","address":"200 Manufacturers Plaza","postcode":null,"city":"Energodar","region":null,"country":"Ukraine","location":{"latitude":47.49865,"longitude":34.6574}},
2 | {"id":"74190840-82d6-4c0c-9e3e-715c389fc66d","name":"Lukken","address":"66855 Bashford Lane","postcode":null,"city":"Novogireyevo","region":null,"country":"Russia","location":{"latitude":55.75378,"longitude":37.81885}},
3 | {"id":"73954bfa-4c30-4c3f-8ac7-cc1e4fd99266","name":"Pepper Wood","address":"98510 Rutledge Court","postcode":null,"city":"Pamiątkowo","region":null,"country":"Poland","location":{"latitude":52.55334,"longitude":16.68094}},
4 | {"id":"38905470-accb-4905-8091-8418f6ea8ed9","name":"Dryden","address":"26241 Mosinee Terrace","postcode":"87090 CEDEX 9","city":"Limoges","region":"Limousin","country":"France","location":{"latitude":45.8315,"longitude":1.2578}},
5 | {"id":"96edb1c4-04fe-463b-b8d0-346226a7b60e","name":"Welch","address":"3 Corscot Drive","postcode":null,"city":"Marystown","region":"Newfoundland and Labrador","country":"Canada","location":{"latitude":47.16663,"longitude":-55.14829}},
6 | {"id":"f9a3451b-39ce-4d23-84c6-2dce8e18e84b","name":"Northfield","address":"39149 Carberry Avenue","postcode":null,"city":"Achanizo","region":null,"country":"Peru","location":{"latitude":-15.80611,"longitude":-73.96694}},
7 | {"id":"fcab7f8d-0d89-43b0-a11a-12415a4bb9c1","name":"Dottie","address":"714 Armistice Alley","postcode":null,"city":"El Mida","region":null,"country":"Tunisia","location":{"latitude":36.72556,"longitude":10.85528}},
8 | {"id":"dbcc6a21-5563-4792-95c3-bfdc446bc17f","name":"Little Fleur","address":"6739 Veith Junction","postcode":null,"city":"Sidomukti","region":null,"country":"Indonesia","location":{"latitude":-8.2051,"longitude":113.8279}},
9 | {"id":"716f14d9-268b-4c3b-8d45-37b22971179e","name":"Prairieview","address":"5 3rd Court","postcode":"0162","city":"Oslo","region":"Oslo","country":"Norway","location":{"latitude":59.9127,"longitude":10.7461}},
10 | {"id":"1f5e2af7-d959-4ff1-8a97-b88bbd51a40f","name":"Forest Dale","address":"4057 Miller Road","postcode":"85732","city":"Tucson","region":"Arizona","country":"United States","location":{"latitude":32.0848,"longitude":-110.7122}},
11 | {"id": "3f06f7a7-dc80-4987-81dd-9cd807008ee5","name":"Manitowish","address":"9 Grim Center","postcode":"987-2224","city":"Yokosuka","region":null,"country":"Japan","location":{"latitude":35.28361,"longitude":139.66722}}]
12 |
--------------------------------------------------------------------------------
/client/app/view/widgets/Show.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.widgets.Show', {
2 | extend: 'Ext.Panel',
3 |
4 | controller: {
5 | type: 'wizard'
6 | },
7 |
8 | viewModel: {
9 | data: {
10 | record: null
11 | }
12 | },
13 |
14 | eventedConfig: {
15 | /**
16 | * Make the config trigger an event on change to allow the controller to monitor it.
17 | * https://www.sencha.com/blog/using-sencha-ext-config/
18 | */
19 | record: null
20 | },
21 |
22 | platformConfig: {
23 | phone: {
24 | header: {
25 | items: {
26 | edit: {
27 | xtype: 'button',
28 | iconCls: 'far fa-pen',
29 | handler: 'onEditTap',
30 | weight: 10
31 | }
32 | }
33 | }
34 | },
35 |
36 | '!phone': {
37 | header: {
38 | hidden: true
39 | }
40 | }
41 | },
42 |
43 | scrollable: {
44 | y: 'scroll'
45 | },
46 |
47 | weighted: true,
48 |
49 | defaults: {
50 | userCls: 'page-constrained'
51 | },
52 |
53 | items: {
54 | header: {
55 | xtype: 'showheader',
56 | weight: -10
57 | },
58 |
59 | content: {
60 | weighted: true,
61 | userCls: [
62 | 'page-constrained',
63 | 'blocks'
64 | ],
65 |
66 | defaults: {
67 | userCls: 'blocks-column',
68 | weighted: true,
69 |
70 | defaults: {
71 | ui: 'block'
72 | }
73 | },
74 |
75 | items: {
76 | left: {
77 | weighted: true
78 | },
79 |
80 | right: {
81 | weighted: true,
82 |
83 | items: {
84 | history: {
85 | xtype: 'historypanel',
86 | bind: '{history}',
87 | ui: 'block',
88 | listeners: {
89 | 'childtap': 'onHistoryChildTap'
90 | }
91 | }
92 | }
93 | }
94 | }
95 | }
96 | }
97 | });
98 |
--------------------------------------------------------------------------------
/client/app/view/home/HomeEvents.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.home.HomeEvents', {
2 | extend: 'Ext.Panel',
3 | xtype: 'homeevents',
4 |
5 | cls: 'home-events',
6 |
7 | tbar: {
8 | layout: {
9 | pack: 'center'
10 | },
11 |
12 | items: [{
13 | xtype: 'segmentedbutton',
14 | defaultUI: 'segmented flat',
15 | bind: '{range}',
16 | items: [{
17 | text: 'Upcoming',
18 | value: 'upcoming'
19 | }, {
20 | text: 'Recent',
21 | value: 'recent'
22 | }, {
23 | text: 'Past',
24 | value: 'past'
25 | }]
26 | }]
27 | },
28 |
29 | items: [{
30 | xtype: 'dataview',
31 | bind: '{events}',
32 | minHeight: 80,
33 | inline: true,
34 | ui: 'light',
35 |
36 | selectable: {
37 | disabled: true
38 | },
39 |
40 | itemTpl: [
41 | '',
52 | '
',
53 | '
',
54 | '
',
55 | '
{person.fullname}
',
56 | '
{person.title}
',
57 | '
',
58 | '',
59 | '{person.birthday:dateDiff(values.date, "y")} old',
60 | '{person.started:dateDiff(values.date, "y")} ',
61 | ' ',
62 | '',
63 | '
',
64 | '
',
65 | '
'
66 | ],
67 |
68 | listeners: {
69 | childtap: 'onEventChildTap'
70 | }
71 | }]
72 | });
73 |
--------------------------------------------------------------------------------
/server/models/office.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | module.exports = function(sequelize, DataTypes) {
4 | var Model = sequelize.define("Office", {
5 | id: {
6 | type: DataTypes.UUID,
7 | defaultValue: DataTypes.UUIDV4,
8 | allowNull: false,
9 | primaryKey: true,
10 | validate: {
11 | isUUID: 4
12 | }
13 | },
14 | name: {
15 | type: DataTypes.STRING,
16 | allowNull: false,
17 | searchable: true,
18 | unique: {
19 | msg: 'An office with this name already exists.'
20 | },
21 | validate: {
22 | notEmpty: true
23 | }
24 | },
25 | address: {
26 | type: DataTypes.STRING,
27 | allowNull: false,
28 | searchable: true,
29 | validate: {
30 | notEmpty: true
31 | }
32 | },
33 | postcode: {
34 | type: DataTypes.STRING,
35 | allowNull: true,
36 | searchable: true
37 | },
38 | region: {
39 | type: DataTypes.STRING,
40 | allowNull: true,
41 | searchable: true
42 | },
43 | city: {
44 | type: DataTypes.STRING,
45 | allowNull: false,
46 | searchable: true,
47 | validate: {
48 | notEmpty: true
49 | }
50 | },
51 | country: {
52 | type: DataTypes.STRING,
53 | allowNull: false,
54 | searchable: true,
55 | validate: {
56 | notEmpty: true
57 | }
58 | },
59 | location: {
60 | type: DataTypes.TEXT,
61 | allowNull: false,
62 | get: function () {
63 | return JSON.parse(this.getDataValue('location'));
64 | },
65 | set: function (value) {
66 | return this.setDataValue('location', JSON.stringify(value));
67 | }
68 | }
69 | });
70 |
71 | Model.associate = function(models) {
72 | Model.hasMany(models.Person, { as: 'members' });
73 |
74 | // http://stackoverflow.com/a/37817966
75 | Model.addScope('nested', {
76 | attributes: {
77 | include: [[sequelize.literal('(SELECT COUNT(*) FROM People WHERE People.office_id = Office.id)'), 'headcount']]
78 | }
79 | });
80 | };
81 |
82 | return Model;
83 | };
84 |
--------------------------------------------------------------------------------
/client/app/view/home/HomeHeader.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.home.HomeHeader', {
2 | extend: 'Ext.Container',
3 | xtype: 'homeheader',
4 |
5 | cls: 'home-header',
6 | layout: 'vbox',
7 |
8 | items: [{
9 | xtype: 'component',
10 | cls: 'header-message',
11 | tpl: [
12 | '
',
13 | '
{greeting}
',
14 | '
{firstname}
',
15 | '
'
16 | ],
17 | bind: {
18 | data: {
19 | firstname: '{user.firstname}',
20 | greeting: '{greeting}'
21 | }
22 | }
23 | }, {
24 | xtype: 'container',
25 | layout: 'hbox',
26 | userCls: [
27 | 'page-constrained',
28 | 'header-info'
29 | ],
30 | items: [{
31 | xtype: 'component',
32 | cls: 'header-links',
33 | flex: 1,
34 | tpl: [
35 | '
',
36 | '',
37 | '
',
38 | '
Manager
',
39 | '
{fullname}',
40 | '
',
42 | '
',
43 | '',
44 | '
',
45 | '
Organization
',
46 | '
{name}',
47 | '
',
49 | '
',
50 | '',
51 | '
',
52 | '
Office
',
53 | '
{name}',
54 | '
'
56 | ],
57 | bind: {
58 | record: '{user}'
59 | }
60 | }, {
61 | xtype: 'component',
62 | cls: 'header-clock',
63 | tpl: [
64 | '
{time:date("l, F d")}
',
65 | '
{time:date("G:ia")}
'
66 | ],
67 | bind: {
68 | data: {
69 | time: '{time}'
70 | }
71 | }
72 | }]
73 | }]
74 | });
75 |
--------------------------------------------------------------------------------
/client/app/view/phone/person/Browse.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.phone.person.Browse', {
2 | extend: 'App.view.person.Browse',
3 | // xtype: 'personbrowse', -- set by profile
4 |
5 | requires: [
6 | 'Ext.dataview.listswiper.ListSwiper',
7 | 'Ext.dataview.plugin.ListPaging'
8 | ],
9 |
10 | controller: 'phone-personbrowse',
11 |
12 | layout: 'fit',
13 |
14 | header: {
15 | items: {
16 | create: {
17 | xtype: 'button',
18 | iconCls: 'x-fa fa-plus',
19 | handler: 'onCreate',
20 | weight: 10
21 | }
22 | }
23 | },
24 |
25 | items: [{
26 | xtype: 'list',
27 | reference: 'list',
28 | bind: '{people}',
29 | striped: true,
30 | grouped: true,
31 | ui: 'listing',
32 | selectable: {
33 | disabled: true
34 | },
35 | plugins: [{
36 | type: 'listpaging',
37 | autoPaging: true
38 | }, {
39 | type: 'listswiper',
40 | left: [{
41 | iconCls: 'x-fab fa-skype',
42 | commit: 'onSkypeAction',
43 | text: 'Skype',
44 | ui: 'skype',
45 | data: {
46 | subject: 'skype'
47 | }
48 | }, {
49 | iconCls: 'far fa-envelope',
50 | commit: 'onEmailAction',
51 | text: 'Email',
52 | ui: 'email',
53 | data: {
54 | subject: 'email'
55 | }
56 | }],
57 | right: [{
58 | iconCls: 'far fa-pen',
59 | commit: 'onEditAction',
60 | text: 'Edit',
61 | ui: 'edit'
62 | }],
63 | widget: {
64 | xtype: 'personlistswiperitem'
65 | }
66 | }],
67 | itemConfig: {
68 | xtype: 'listitem',
69 | items: [{
70 | xtype: 'button',
71 | handler: 'onPhoneTap',
72 | iconCls: 'x-fa fa-phone',
73 | userCls: 'x-item-no-tap',
74 | docked: 'right',
75 | ui: 'flat'
76 | }]
77 | },
78 | itemTpl: [
79 | '
',
80 | '
',
81 | '
{fullname}
',
82 | '
{title}
',
83 | '
'
84 | ],
85 | listeners: {
86 | childtap: 'onChildActivate'
87 | }
88 | }]
89 | });
90 |
--------------------------------------------------------------------------------
/client/app/view/tablet/history/Browse.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.tablet.history.Browse', {
2 | extend: 'App.view.history.Browse',
3 | // xtype: 'historybrowse', -- set by profile
4 |
5 | requires: [
6 | 'Ext.plugin.ListPaging'
7 | ],
8 |
9 | tbar: {
10 | xtype: 'historybrowsetoolbar'
11 | },
12 |
13 | items: [{
14 | xtype: 'grid',
15 | emptyText: 'No activity was found to match your search',
16 | bind: '{history}',
17 | ui: 'listing',
18 | collapsible: false,
19 | variableHeights: true,
20 |
21 | selectable: {
22 | disabled: true
23 | },
24 |
25 | plugins: [{
26 | type: 'listpaging',
27 | autoPaging: true
28 | }],
29 |
30 | columns: [{
31 | dataIndex: 'type',
32 | align: 'center',
33 | width: 75,
34 | cell: {
35 | cls: 'history-visual',
36 | encodeHtml: false
37 | },
38 | tpl: [
39 | '
',
40 | '
'
41 | ]
42 | }, {
43 | text: 'Name / Title',
44 | dataIndex: 'recipient.lastname',
45 | flex: 1,
46 | cell: {
47 | encodeHtml: false
48 | },
49 | tpl: [
50 | '
',
51 | '{fullname}',
52 | '{title}
',
53 | ''
54 | ]
55 | }, {
56 | text: 'Organization',
57 | dataIndex: 'recipient.organization.name',
58 | flex: 1,
59 | cell: {
60 | encodeHtml: false
61 | },
62 | tpl: [
63 | '
',
64 | '{name}',
65 | ''
66 | ]
67 | }, {
68 | text: 'Office',
69 | dataIndex: 'recipient.office.name',
70 | flex: 1,
71 | cell: {
72 | encodeHtml: false
73 | },
74 | tpl: [
75 | '
',
76 | '{name}',
77 | '{city}, {country}
',
78 | ''
79 | ]
80 | }, {
81 | xtype: 'datecolumn',
82 | dataIndex: 'created',
83 | format: 'Y-m-d H:i',
84 | text: 'Date',
85 | flex: 1
86 | }]
87 | }]
88 | });
89 |
--------------------------------------------------------------------------------
/client/app/view/person/ShowDetails.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.person.ShowDetails', {
2 | extend: 'Ext.Panel',
3 | xtype: 'personshowdetails',
4 |
5 | cls: 'person-details',
6 | title: 'Details',
7 |
8 | bind: {
9 | record: '{record}'
10 | },
11 |
12 | tpl: [
13 | '
',
14 | '
',
15 | '
Username
',
16 | '
{username}
',
17 | '
',
18 | '
',
19 | '',
20 | '
Phone
',
21 | '
{phone}
',
22 | '
',
24 | '
',
25 | '',
26 | '
Extension
',
27 | '
{extension}
',
28 | '
',
30 | '
',
31 | '
',
32 | '
',
33 | '
Email
',
34 | '
{email}
',
35 | '
',
36 | '
',
37 | '',
38 | '
Skype
',
39 | '
{skype}
',
40 | '
',
42 | '
',
43 | '',
44 | '
LinkedIn
',
45 | '
{linkedin}
',
46 | '
',
48 | '
',
49 | '
',
50 | '
',
51 | '
Birthday
',
52 | '
{birthday:date("F jS, Y")}
',
53 | '',
54 | '
',
55 | '
',
56 | '
Entry Date
',
57 | '
{started:date("F jS, Y")}
',
58 | '
',
59 | '',
60 | '',
61 | '
',
62 | '
',
63 | '',
64 | '
Exit Date
',
65 | '
{ended:date("F jS, Y")}
',
66 | '',
67 | '
',
69 | '
'
70 | ]
71 | });
72 |
--------------------------------------------------------------------------------
/server/utils/session.js:
--------------------------------------------------------------------------------
1 | /**
2 | * https://jwt.io/introduction/
3 | */
4 |
5 | "use strict";
6 |
7 | var errors = require('./errors');
8 | var config = require('./config');
9 | var models = require('../models');
10 | var jwt = require('jsonwebtoken');
11 | var Op = models.Sequelize.Op;
12 |
13 |
14 | module.exports = {
15 |
16 | readonly: config.session.readonly,
17 |
18 | initiate: function(username, password, res) {
19 | return models.Person.scope('nested').findOne({
20 | where: {
21 | password: password,
22 | $or: [
23 | { username: username },
24 | { email: username }
25 | ]
26 | }
27 | }).then(function(user) {
28 | if (!user) {
29 | throw errors.types.invalidParams({
30 | path: 'username', message: 'Invalid username and/or password'
31 | });
32 | }
33 |
34 | var duration = config.session.duration;
35 | var expires = new Date(Date.now() + duration*1000);
36 | var token = jwt.sign(
37 | { user_id: user.get('id') },
38 | config.session.secret,
39 | { expiresIn: duration });
40 |
41 | return {
42 | user: user,
43 | token: token,
44 | expires: expires
45 | };
46 | });
47 | },
48 |
49 | verify: function(request) {
50 | return new Promise(function(resolve, reject) {
51 | // https://jwt.io/introduction/#how-do-json-web-tokens-work-
52 | var header = request.headers && request.headers.authorization;
53 | var matches = header? /^Bearer (\S+)$/.exec(header) : null;
54 | var token = matches && matches[1];
55 |
56 | if (!token) {
57 | return reject(errors.types.unauthorized('No authorization token was found'));
58 | }
59 |
60 | jwt.verify(token, config.session.secret, function(err, decoded) {
61 | if (err) {
62 | return reject(errors.fromJwtError(err));
63 | }
64 |
65 | models.Person.scope('nested').findOne({
66 | where: {
67 | id: decoded.user_id
68 | }
69 | }).then(function(user) {
70 | if (!user) {
71 | throw errors.types.authTokenInvalid();
72 | }
73 |
74 | resolve({
75 | user: user,
76 | token: token,
77 | expires: new Date(decoded.exp)
78 | });
79 | }).catch(function(err) {
80 | reject(err);
81 | });
82 | });
83 | });
84 | }
85 | };
86 |
--------------------------------------------------------------------------------
/client/app/view/widgets/MapView.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.widgets.MapView', {
2 | extend: 'Ext.ux.google.Map',
3 | xtype: 'mapview',
4 |
5 | cls: 'mapview',
6 |
7 | markerTemplate: {
8 | title: '{name}',
9 | animation: 'DROP',
10 | position: {
11 | lat: '{location.latitude}',
12 | lng: '{location.longitude}'
13 | }
14 | },
15 |
16 | // https://developers.google.com/maps/documentation/javascript/reference#MapOptions
17 | mapOptions: {
18 | disableDoubleClickZoom: true,
19 | disableDefaultUI: true,
20 | scrollwheel: false,
21 | zoom: 8,
22 |
23 | styles: [{
24 | featureType: "all",
25 | elementType: "all",
26 | stylers: [
27 | { visibility: "simplified" }
28 | ]
29 | }, {
30 | featureType: "administrative",
31 | elementType: "all",
32 | stylers: [
33 | { visibility: "on"},
34 | { lightness: 33 }
35 | ]
36 | }, {
37 | featureType: "landscape",
38 | elementType: "all",
39 | stylers: [
40 | { color: "#eaeaea" }
41 | ]
42 | }, {
43 | featureType: "poi.park",
44 | elementType: "geometry",
45 | stylers: [
46 | { color: "#c5dac6" }
47 | ]
48 | }, {
49 | featureType: "poi.park",
50 | elementType: "labels",
51 | stylers: [
52 | { visibility: "off" }
53 | ]
54 | }, {
55 | featureType: "road",
56 | elementType: "geometry",
57 | stylers: [
58 | { hue: "#bbc0c4" },
59 | { saturation: -93 },
60 | { lightness: 20 }
61 | ]
62 | }, {
63 | featureType: "water",
64 | elementType: "all",
65 | stylers: [
66 | { visibility: "on" },
67 | { color: "#acbcc9" }
68 | ]
69 | }]
70 | },
71 |
72 | updateMarkers: function(current, previous) {
73 | var me = this,
74 | listeners = {
75 | refresh: 'onStoreRefresh',
76 | scope: me
77 | };
78 |
79 | me.callParent(arguments);
80 |
81 | if (previous) {
82 | previous.un(listeners);
83 | }
84 |
85 | if (current) {
86 | current.on(listeners);
87 | me.onStoreRefresh(current);
88 | }
89 | },
90 |
91 | onStoreRefresh: function(store) {
92 | var records = store.getRange();
93 | if (records.length === 1) {
94 | this.setMapCenter(records[0]);
95 | } else {
96 | this.fitMarkersInView(records);
97 | }
98 | }
99 | });
100 |
--------------------------------------------------------------------------------
/client/app/view/widgets/WizardController.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.widgets.WizardController', {
2 | extend: 'Ext.app.ViewController',
3 | alias: 'controller.wizard',
4 |
5 | requires: [
6 | 'Ext.History'
7 | ],
8 |
9 | getItemCount: function(tabs) {
10 | return tabs.getInnerItems().length;
11 | },
12 |
13 | getActiveIndex: function(tabs) {
14 | return tabs.getInnerItems().indexOf(tabs.getActiveItem());
15 | },
16 |
17 | advance: function(increment) {
18 | var me = this,
19 | tabs = me.lookup('tabs'),
20 | index = me.getActiveIndex(tabs),
21 | count = me.getItemCount(tabs),
22 | next = index + increment;
23 |
24 | tabs.setActiveItem(Math.max(0, Math.min(count-1, next)));
25 | },
26 |
27 | resync: function() {
28 | var me = this,
29 | vm = me.getViewModel(),
30 | tabs = me.lookup('tabs'),
31 | prev = me.lookup('prev'),
32 | next = me.lookup('next'),
33 | index = me.getActiveIndex(tabs),
34 | count = me.getItemCount(tabs),
35 | single = count < 2;
36 |
37 | tabs.getTabBar().setHidden(single);
38 | prev.setDisabled(index <= 0).setHidden(single);
39 | next.setDisabled(index == -1 || index >= count-1).setHidden(single);
40 | },
41 |
42 | finalize: function() {
43 | var view = this.getView();
44 | if (view.getFloated()) {
45 | view.close();
46 | } else {
47 | Ext.History.back();
48 | }
49 | },
50 |
51 | onSubmitTap: function() {
52 | var me = this,
53 | form = me.getView(),
54 | record = me.getViewModel().get('record');
55 |
56 | if (!form.validate()) {
57 | return;
58 | }
59 |
60 | if (!record.isDirty()) {
61 | me.finalize();
62 | return;
63 | }
64 |
65 | form.setMasked({ xtype: 'loadmask' });
66 | form.clearErrors();
67 | record.save({
68 | callback: function(result, operation) {
69 | form.setMasked(false);
70 | if (!App.util.Errors.process(operation, form)) {
71 | me.finalize();
72 | }
73 | }
74 | });
75 | },
76 |
77 | onCancelTap: function() {
78 | this.finalize();
79 | },
80 |
81 | onPrevTap: function() {
82 | this.advance(-1);
83 | },
84 |
85 | onNextTap: function() {
86 | this.advance(1);
87 | },
88 |
89 | onScreenAdd: function() {
90 | this.resync();
91 | },
92 |
93 | onScreenRemove: function(tabs) {
94 | if (!tabs.destroying) {
95 | this.resync();
96 | }
97 | },
98 |
99 | onScreenActivate: function(tabs) {
100 | // This event is triggered when the view is being destroyed!
101 | if (!tabs.destroying) {
102 | this.resync();
103 | }
104 | }
105 | });
106 |
--------------------------------------------------------------------------------
/client/app/view/home/HomeHeader.scss:
--------------------------------------------------------------------------------
1 | .home-header {
2 | .header-message {
3 | color: $base-color;
4 | font-size: 32px;
5 | padding: 8vh 16px 6vh 16px;
6 | text-align: center;
7 |
8 | .greeting, .person-name {
9 | display: inline-block;
10 | margin: 5px;
11 | }
12 |
13 | .greeting {
14 | white-space: nowrap;
15 | }
16 |
17 | .person-name {
18 | @include border-radius;
19 | border: 3px solid;
20 | font-weight: 600;
21 | padding: 4px 16px 8px;
22 | }
23 |
24 | .x-big & {
25 | font-size: 22px;
26 |
27 | .person-name {
28 | border-width: 2px;
29 | }
30 | }
31 | }
32 |
33 | .header-info {
34 | line-height: 1.65;
35 | padding: 0 16px;
36 |
37 | &::before {
38 | @include single-box-shadow;
39 | position: absolute;
40 | display: block;
41 | height: 32px;
42 | content: '';
43 | left: 0;
44 | right: 0;
45 | top: 0;
46 | }
47 | }
48 |
49 | .header-links {
50 | > .x-innerhtml {
51 | display: flex;
52 | }
53 |
54 | .item {
55 | font-size: 14px;
56 | padding: 8px;
57 | overflow: hidden;
58 | text-align: center;
59 | }
60 |
61 | .icon, .picture {
62 | border: 4px solid white;
63 | display: block;
64 | margin: 0 auto 4px auto;
65 | height: 54px;
66 | width: 54px
67 | }
68 |
69 | .icon {
70 | @include border-radius(50%);
71 | background-color: $base-color;
72 | color: contrasted($base-light-color, -25%);
73 |
74 | &::before {
75 | font-size: 28px;
76 | }
77 | }
78 |
79 | .title, .link {
80 | @include ellipsis;
81 | }
82 |
83 | .title {
84 | color: $neutral-medium-dark-color;
85 | font-size: 12px;
86 | text-transform: uppercase;
87 | }
88 |
89 | .link {
90 | display: block;
91 | font-size: 13px;
92 | font-weight: normal;
93 | }
94 | }
95 |
96 | .header-clock {
97 | align-items: flex-end;
98 | display: flex;
99 | font-weight: normal;
100 | padding-bottom: 16px;
101 | text-align: right;
102 |
103 | .date {
104 | color: $base-color;
105 | }
106 |
107 | .time {
108 | background-color: $base-color;
109 | color: white;
110 | font-size: 12px;
111 | padding: 2px 4px;
112 | text-align: center;
113 | }
114 | }
115 |
116 | @media screen and (max-width: 600px) {
117 | .header-clock {
118 | display: none;
119 | }
120 |
121 | .header-links .item {
122 | padding: 8px;
123 | flex: 1;
124 | width: 0;
125 | }
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/client/app/view/widgets/Sidebar.scss:
--------------------------------------------------------------------------------
1 | $sidebar-background-color: dynamic($neutral-dark-color);
2 | $sidebar-color: dynamic($neutral-light-color);
3 | $sidebar-font-size: dynamic(14px);
4 | $sidebar-font-size-big: dynamic(14px);
5 | $sidebar-item-padding: dynamic(16px);
6 | $sidebar-item-padding-big: dynamic(18px);
7 | $sidebar-icon-size: dynamic(21px);
8 | $sidebar-icon-size-big: dynamic(21px);
9 | $sidebar-icon-horizontal-spacing: dynamic($sidebar-item-padding);
10 | $sidebar-icon-horizontal-spacing-big: dynamic($sidebar-item-padding-big);
11 | $sidebar-slide-width: dynamic(75vw);
12 | $sidebar-micro-width: dynamic($sidebar-icon-size + $sidebar-item-padding*2);
13 | $sidebar-micro-expanded-width: dynamic(256px);
14 |
15 | .sidebar {
16 | $sidebar-picture-size: $sidebar-icon-size*1.6;
17 | $sidebar-picture-size-big: $sidebar-icon-size-big*1.8;
18 | $sidebar-picture-spacing: (2*$sidebar-item-padding + $sidebar-icon-size - $sidebar-picture-size)/2;
19 | $sidebar-picture-spacing-big: (2*$sidebar-item-padding-big + $sidebar-icon-size-big - $sidebar-picture-size-big)/2;
20 |
21 | background-color: $sidebar-background-color;
22 | color: $sidebar-color;
23 | overflow: visible;
24 |
25 | > .x-dock {
26 | overflow: visible;
27 | }
28 |
29 | @include button-ui(
30 | $ui: 'large',
31 | $icon-horizontal-spacing: $sidebar-icon-horizontal-spacing,
32 | $icon-horizontal-spacing-big: $sidebar-icon-horizontal-spacing-big
33 | );
34 |
35 | @include button-ui(
36 | $ui: 'picture',
37 | $icon-horizontal-spacing: $sidebar-picture-spacing,
38 | $icon-horizontal-spacing-big: $sidebar-picture-spacing-big,
39 | $icon-size: $sidebar-picture-size,
40 | $icon-size-big: $sidebar-picture-size-big,
41 | $icon-font-size: $sidebar-picture-size,
42 | $icon-font-size-big: $sidebar-picture-size-big,
43 | $padding: $sidebar-picture-spacing,
44 | $padding-big: $sidebar-picture-spacing-big
45 | );
46 | }
47 |
48 | .sidebar-body-el {
49 | z-index: 2;
50 | }
51 |
52 | .sidebar-micro {
53 | width: $sidebar-micro-width;
54 | }
55 |
56 | .sidebar-micro-body-el {
57 | @include transition-property(width);
58 | @include transition-duration(0.25s);
59 | width: $sidebar-micro-width;
60 |
61 | > div {
62 | width: $sidebar-micro-expanded-width;
63 | }
64 |
65 | .expanded > .x-dock > & {
66 | width: $sidebar-micro-expanded-width;
67 | }
68 | }
69 |
70 | .sidebar-slide {
71 | width: 0;
72 | }
73 |
74 | .sidebar-slide-body-el {
75 | @include transition-property(margin-left);
76 | @include transition-duration(0.25s);
77 | margin-top: $sidebar-icon-size-big + $sidebar-item-padding-big * 2;
78 | margin-left: -$sidebar-slide-width;
79 | width: $sidebar-slide-width;
80 |
81 | .expanded > & {
82 | margin-left: 0;
83 | }
84 | }
85 |
86 | .sidebar-mask {
87 | background: black;
88 | display: none;
89 | opacity: .005;
90 | position: fixed;
91 | top: 0;
92 | left: 0;
93 | bottom: 0;
94 | right: 0;
95 | z-index: 1;
96 |
97 | .sidebar.expanded > & {
98 | display: block;
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/client/app/view/tablet/person/Browse.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.tablet.person.Browse', {
2 | extend: 'App.view.person.Browse',
3 | // xtype: 'personbrowse', -- set by profile
4 |
5 | requires: [
6 | 'Ext.plugin.ListPaging'
7 | ],
8 |
9 | controller: 'tablet-personbrowse',
10 |
11 | tbar: {
12 | xtype: 'personbrowsetoolbar'
13 | },
14 |
15 | items: [{
16 | xtype: 'grid',
17 | emptyText: 'No employee was found to match your search',
18 | bind: '{people}',
19 | ui: 'listing',
20 | collapsible: false,
21 | variableHeights: true,
22 |
23 | selectable: {
24 | disabled: true
25 | },
26 |
27 | plugins: [{
28 | type: 'listpaging',
29 | autoPaging: true
30 | }],
31 |
32 | columnMenu: {
33 | items: {
34 | groupByThis: false,
35 | showInGroups: false
36 | }
37 | },
38 |
39 | columns: [{
40 | dataIndex: 'picture',
41 | menuDisabled: true,
42 | hideable: false,
43 | sortable: false,
44 | align: 'center',
45 | width: 58,
46 | cell: {
47 | encodeHtml: false
48 | },
49 | tpl: '
'
50 | }, {
51 | text: 'Name / Title',
52 | dataIndex: 'lastname',
53 | flex: 1,
54 | cell: {
55 | encodeHtml: false
56 | },
57 | tpl: [
58 | '
{fullname}',
59 | '
{title}
'
60 | ]
61 | }, {
62 | text: 'Organization',
63 | dataIndex: 'organization.name',
64 | flex: 1,
65 | cell: {
66 | encodeHtml: false
67 | },
68 | tpl: [
69 | '
',
70 | '{name}',
71 | '',
74 | ''
75 | ]
76 | }, {
77 | text: 'Office',
78 | dataIndex: 'office.name',
79 | flex: 1,
80 | cell: {
81 | encodeHtml: false
82 | },
83 | tpl: [
84 | '
',
85 | '{name}',
86 | '{city}, {country}
',
87 | ''
88 | ]
89 | }, {
90 | sortable: false,
91 | dataIndex: 'email',
92 | text: 'Email/Phone',
93 | flex: 1,
94 | cell: {
95 | encodeHtml: false
96 | },
97 | tpl: [
98 | '
{email}
',
99 | '
{phone}
'
100 | ]
101 | }],
102 |
103 | listeners: {
104 | childdoubletap: 'onChildActivate'
105 | }
106 | }]
107 | });
108 |
--------------------------------------------------------------------------------
/server/utils/errors.js:
--------------------------------------------------------------------------------
1 | /**
2 | * http://www.jsonrpc.org/specification#error_object
3 | */
4 |
5 | "use strict";
6 |
7 | var extend = require('util')._extend;
8 |
9 | var codes = {
10 | INVALID_REQUEST: -32600,
11 | UNAUTHORIZED: -32099,
12 | AUTH_TOKEN_EXPIRED: -32098,
13 | AUTH_TOKEN_INVALID: -32097,
14 | READONLY_SESSION: -32096,
15 | INVALID_PARAMS: -32001,
16 | NOT_IMPLEMENTED: -32000
17 | };
18 |
19 | function generate(message, error, code, data) {
20 | return {
21 | // Ext.Direct expects the error (object or string) to be store in data.message
22 | message: extend(extend({}, data), {
23 | message: message || 'Invalid Request',
24 | name: error || 'InvalidRequest',
25 | code: code == null? codes.INVALID_REQUEST : code
26 | })
27 | };
28 | };
29 |
30 | var types = {
31 | unauthorized: function(data) {
32 | return generate(
33 | 'User is not authorized to perform this action',
34 | 'Unauthorized',
35 | codes.UNAUTHORIZED,
36 | data
37 | );
38 | },
39 |
40 | authTokenExpired: function(data) {
41 | return generate(
42 | 'Your session has expired, please login again',
43 | 'AuthTokenExpired',
44 | codes.AUTH_TOKEN_EXPIRED,
45 | data
46 | );
47 | },
48 |
49 | authTokenInvalid: function(data) {
50 | return generate(
51 | 'Your session is no longer valid, please login again',
52 | 'AuthTokenInvalid',
53 | codes.AUTH_TOKEN_INVALID,
54 | data
55 | );
56 | },
57 |
58 | notImplemented: function(data) {
59 | return generate(
60 | 'Not implemented',
61 | 'NotImplemented',
62 | codes.NOT_IMPLEMENTED,
63 | data
64 | );
65 | },
66 |
67 | invalidParams: function(data) {
68 | if (!Array.isArray(data)) {
69 | data = [data];
70 | }
71 |
72 | return generate(
73 | 'Invalid parameters',
74 | 'InvalidParameters',
75 | codes.INVALID_PARAMS,
76 | { errors: data }
77 | );
78 | },
79 |
80 | readonly: function(data) {
81 | return generate(
82 | 'Read-only session, data not updated',
83 | 'ReadOnlySession',
84 | codes.READONLY_SESSION,
85 | data
86 | );
87 | }
88 | };
89 |
90 | module.exports = {
91 | codes: codes,
92 |
93 | types: types,
94 |
95 | generate: generate,
96 |
97 | parse: function(error) {
98 | switch (error.name) {
99 | case 'SequelizeValidationError':
100 | case 'SequelizeUniqueConstraintError':
101 | return types.invalidParams(error.errors.map(function(error) {
102 | return { message: error.message, path: error.path };
103 | }));
104 | default:
105 | return error;
106 | }
107 | },
108 |
109 | fromJwtError: function(data) {
110 | // https://github.com/auth0/node-jsonwebtoken#errors--codes
111 | if (data.name === 'TokenExpiredError') {
112 | return types.authTokenExpired(data);
113 | } else if (data.name === 'JsonWebTokenError') {
114 | return types.authTokenInvalid(data);
115 | } else {
116 | return types.unauthorized(data);
117 | }
118 | }
119 | };
120 |
--------------------------------------------------------------------------------
/client/app/view/widgets/BrowseController.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.view.widgets.BrowseController', {
2 | extend: 'Ext.app.ViewController',
3 | alias: 'controller.browse',
4 |
5 | control: {
6 | '#': {
7 | routechange: 'onRouteChange',
8 | storechange: 'onStoreChange'
9 | }
10 | },
11 |
12 | initViewModel: function(vm) {
13 | vm.bind(
14 | { bindTo: '{filters}', deep: true },
15 | Ext.Function.createBuffered(function() {
16 | if (!this.destroyed) {
17 | // The view might have been destroyed (e.g. user deauthentication)
18 | this.updateFilters()
19 | }
20 | }, 500, this, {}));
21 | },
22 |
23 | updateFilters: function(reload) {
24 | var view = this.getView(),
25 | store = view.getStore(),
26 | collection = store && store.getFilters(),
27 | filters = this.getViewModel().get('filters'),
28 | fields = view.getFields(),
29 | dirty = !!reload,
30 | item, value;
31 |
32 | if (!collection) {
33 | return;
34 | }
35 |
36 | Ext.Object.each(fields, function(key, field) {
37 | value = filters[key];
38 | if (value && value.isModel) {
39 | value = value.get('value');
40 | }
41 |
42 | key = field.property || key;
43 | item = collection.get(key);
44 | if ((item && item.getValue()) == value) {
45 | return;
46 | }
47 |
48 | dirty = true;
49 | if (Ext.isEmpty(value)) {
50 | store.removeFilter(key, true);
51 | } else {
52 | store.filter(key, value, true);
53 | }
54 | });
55 |
56 | if (dirty) {
57 | store.removeAll();
58 | store.load();
59 | }
60 | },
61 |
62 | onRouteChange: function(view, route) {
63 | var me = this,
64 | vm = me.getViewModel(),
65 | regex = /([^\/]+)\/([^\/]+)/g,
66 | fields = me.getView().getFields() || {},
67 | filters = {},
68 | field, value;
69 |
70 | Ext.Object.each(fields, function(key, value) {
71 | filters[key] = value.defaultValue || null
72 | });
73 |
74 | while (match = regex.exec(route)) {
75 | field = match[1];
76 | value = match[2];
77 | if (Ext.isDefined(filters[field])) {
78 | filters[field] = field !== 'search'?
79 | Ext.create(App.model.Filter, { value: value }) :
80 | value;
81 | }
82 | }
83 |
84 | vm.set('filters', filters);
85 | me.updateFilters();
86 | },
87 |
88 | onStoreChange: function() {
89 | this.updateFilters(true);
90 | },
91 |
92 | onChildActivate: function(dataview, location) {
93 | var record = location.record;
94 | if (record) {
95 | this.redirectTo(record);
96 | }
97 | },
98 |
99 | onEditAction: function(list, data) {
100 | this.redirectTo(data.record.toEditUrl());
101 | },
102 |
103 | onRefreshTap: function() {
104 | var store = this.getView().getStore();
105 | if (store) {
106 | store.reload();
107 | }
108 | },
109 |
110 | onClearFiltersTap: function() {
111 | this.getViewModel().set('filters', {});
112 | }
113 | });
114 |
--------------------------------------------------------------------------------
/server/utils/data.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var models = require("../models");
4 | var sequelize = models.sequelize;
5 | var Promise = models.Sequelize.Promise;
6 |
7 | function pick(items, index) {
8 | var count = items.length;
9 | if (index === undefined) {
10 | index = Math.floor(Math.random() * count);
11 | }
12 |
13 | return items[index % count];
14 | }
15 |
16 | module.exports = {
17 | reset: function() {
18 | console.info('Populating database with example data...');
19 | return sequelize.transaction(function(t) {
20 | return sequelize.sync({ force: true, transaction: t }).then(function () {
21 | return Promise.all([
22 | models.Action.destroy({ truncate: true, transaction: t }),
23 | models.Office.destroy({ truncate: true, transaction: t }),
24 | models.Organization.destroy({ truncate: true, transaction: t }),
25 | models.Person.destroy({ truncate: true, transaction: t })
26 | ]);
27 | }).then(function() {
28 | return Promise.all([
29 | models.Office.bulkCreate(require('../data/Offices.json'), { transaction: t }),
30 | models.Organization.bulkCreate(require('../data/Organizations.json'), { transaction: t }),
31 | Promise.map(require('../data/People.json'), function(data) {
32 | return models.Person.create(data, { include: [{ model: models.Action, as: 'actions' }], transaction: t });
33 | })
34 | ]);
35 | });
36 | }).then(function() {
37 | return sequelize.transaction(function(t) {
38 | return Promise.all([
39 | models.Action.findAll(),
40 | models.Person.findAll(),
41 | models.Office.findAll(),
42 | models.Organization.findAll()
43 | ]).spread(function(actions, persons, offices, organizations) {
44 | return Promise.all([
45 | // associate Person (manager) -> Organization
46 | Promise.map(organizations, function(organization) {
47 | return organization.setManager(pick(persons), { transaction: t });
48 | }),
49 | // associate Person -> Organization
50 | Promise.map(persons, function(person, index) {
51 | return person.setOrganization(pick(organizations), { transaction: t });
52 | }),
53 | // associate Person -> Office
54 | Promise.map(persons, function(person, index) {
55 | return person.setOffice(pick(offices), { transaction: t });
56 | }),
57 | // associate Action -> Person (recipient)
58 | Promise.map(actions, function(action) {
59 | var recipient = pick(persons);
60 | action.subject = models.Action.subject(action.type, recipient);
61 | return Promise.all([
62 | action.setRecipient(recipient, { transaction: t }),
63 | action.save({ transaction: t })
64 | ]);
65 | })
66 | ]);
67 | });
68 | });
69 | }).then(function() {
70 | console.info('Populating database: DONE');
71 | });
72 | }
73 | };
74 |
--------------------------------------------------------------------------------
/client/app/model/Person.js:
--------------------------------------------------------------------------------
1 | Ext.define('App.model.Person', {
2 | extend: 'App.model.Base',
3 |
4 | fields: [
5 | { name: 'username', type: 'string' },
6 | { name: 'firstname', type: 'string' },
7 | { name: 'lastname', type: 'string' },
8 | { name: 'email', type: 'string' },
9 | { name: 'skype', type: 'string' },
10 | { name: 'linkedin', type: 'string' },
11 | { name: 'phone', type: 'string' },
12 | { name: 'extension', type: 'string' },
13 | { name: 'birthday', type: 'date', dateFormat: 'Y-m-d' },
14 | { name: 'title', type: 'string' },
15 | { name: 'picture', type: 'string' },
16 | { name: 'started', type: 'date', dateFormat: 'Y-m-d' },
17 | { name: 'ended', type: 'date', dateFormat: 'Y-m-d' },
18 | { name: 'office_id', reference: 'Office' },
19 | { name: 'organization_id', reference: 'Organization' },
20 |
21 | // Calculated fields
22 | { name: 'fullname', calculate: function (data) {
23 | return data.firstname + ' ' + data.lastname;
24 | }}
25 | ],
26 |
27 | proxy: {
28 | api: {
29 | prefix: 'Server.people'
30 | }
31 | },
32 |
33 | statics: {
34 | /**
35 | * The server people.list() API treats differently a request containing a specific id,
36 | * in which case it will lookup for the id (GUID), username and email. That means the
37 | * returned id may be different from the requested one. Since the static Model.load()
38 | * method perfoms a check on the returned id, we need first to create a phantom record,
39 | * then request the server with the desired id.
40 | */
41 | load: function(id, options, session) {
42 | var record = Ext.create('App.model.Person');
43 | record.setSession(session),
44 | record.load(
45 | Ext.apply({ params: { id: id } }, options)
46 | );
47 | }
48 | },
49 |
50 | // @see https://tools.ietf.org/html/rfc3966
51 | phoneCall: function() {
52 | var me = this,
53 | num = me.get('phone'),
54 | ext, url;
55 |
56 | if (Ext.isEmpty(num)) {
57 | return false;
58 | }
59 |
60 | url = 'tel:' + num;
61 | ext = me.get('extension');
62 | if (!Ext.isEmpty(ext)) {
63 | url += ';ext=' + ext;
64 | }
65 |
66 | return me.openUrl(url);
67 | },
68 |
69 | // @see https://msdn.microsoft.com/en-us/library/office/dn745882.aspx
70 | skypeCall: function(username) {
71 | var username = this.get('username');
72 | if (Ext.isEmpty(username)) {
73 | return false;
74 | }
75 |
76 | return this.openUrl('skype:' + username + '?call');
77 | },
78 |
79 | // Android 4.4.2 issue: https://code.google.com/p/android/issues/detail?id=63538
80 | // @see https://tools.ietf.org/html/rfc6068
81 | mailTo: function(emails) {
82 | var email = this.get('email');
83 | if (Ext.isEmpty(email)) {
84 | return false;
85 | }
86 |
87 | return this.openUrl('mailto:' + email);
88 | },
89 |
90 | linkedIn: function(username) {
91 | var username = this.get('username');
92 | if (Ext.isEmpty(username)) {
93 | return false;
94 | }
95 |
96 | return this.openUrl('http://www.linkedin.com/in/' + username, true);
97 | },
98 |
99 | openUrl: function(url, browser) {
100 | return !!window.open(url, browser? '_system' : '_self');
101 | }
102 | });
103 |
--------------------------------------------------------------------------------