diff --git a/UPGRADING.md b/UPGRADING.md index 1beb46f1..3fbb1477 100644 --- a/UPGRADING.md +++ b/UPGRADING.md @@ -8,6 +8,12 @@ you can upgrade your Kimai installation to the latest stable release. Check below if there are more version specific steps required, which need to be executed after the normal update process. Perform EACH version specific task between your version and the new one, otherwise you risk data inconsistency or a broken installation. +## [1.3](https://github.com/kevinpapst/kimai2/releases/tag/1.3) + +### Possible BC breaks + +- Refactored toolbars and search, plugins needs to be checked + ## [1.2](https://github.com/kevinpapst/kimai2/releases/tag/1.2) ### Possible BC breaks diff --git a/assets/js/KimaiLoader.js b/assets/js/KimaiLoader.js index d6b99f75..fed34693 100644 --- a/assets/js/KimaiLoader.js +++ b/assets/js/KimaiLoader.js @@ -32,6 +32,7 @@ import KimaiAPILink from "./plugins/KimaiAPILink"; import KimaiAlert from "./plugins/KimaiAlert"; import KimaiAutocomplete from "./plugins/KimaiAutocomplete"; import KimaiToolbarAction from "./plugins/KimaiToolbarAction"; +import KimaiSearchButtons from "./plugins/KimaiSearchButtons"; export default class KimaiLoader { @@ -54,7 +55,8 @@ export default class KimaiLoader { kimai.registerPlugin(new KimaiDateRangePicker('.content-wrapper')); kimai.registerPlugin(new KimaiDateTimePicker('.content-wrapper')); kimai.registerPlugin(new KimaiDatatable('table.dataTable')); - kimai.registerPlugin(new KimaiToolbar()); + kimai.registerPlugin(new KimaiToolbar('form.header-search')); + kimai.registerPlugin(new KimaiSearchButtons('.content-header')); kimai.registerPlugin(new KimaiSelectDataAPI('select[data-related-select]')); kimai.registerPlugin(new KimaiAlternativeLinks('.alternative-link')); kimai.registerPlugin(new KimaiAjaxModalForm('.modal-ajax-form')); diff --git a/assets/js/plugins/KimaiDatatable.js b/assets/js/plugins/KimaiDatatable.js index 6f9a523e..a851443f 100644 --- a/assets/js/plugins/KimaiDatatable.js +++ b/assets/js/plugins/KimaiDatatable.js @@ -44,16 +44,24 @@ export default class KimaiDatatable extends KimaiPlugin { for (let eventName of events.split(' ')) { document.addEventListener(eventName, handle); } + + if (this.getContainer().getConfiguration().get('autoReloadDatatable')) { + document.addEventListener('toolbar-change', handle); + } else { + document.addEventListener('pagination-change', handle); + } } reloadDatatable() { const durations = this.getContainer().getPlugin('timesheet-duration'); - const form = jQuery('.toolbar form'); + const toolbarSelector = this.getContainer().getPlugin('toolbar').getSelector(); + + const form = jQuery(toolbarSelector); let loading = '
'; jQuery('section.content').append(loading); // remove the empty fields to prevent errors - let formData = jQuery('.toolbar form :input') + let formData = jQuery(toolbarSelector + ' :input') .filter(function(index, element) { return jQuery(element).val() != ''; }) diff --git a/assets/js/plugins/KimaiJqueryPluginInitializer.js b/assets/js/plugins/KimaiJqueryPluginInitializer.js index d7657d45..c48d0055 100644 --- a/assets/js/plugins/KimaiJqueryPluginInitializer.js +++ b/assets/js/plugins/KimaiJqueryPluginInitializer.js @@ -19,6 +19,10 @@ export default class KimaiJqueryPluginInitializer extends KimaiPlugin { jQuery('.dropdown-toggle').dropdown(); // activate the tooltip functionality jQuery('[data-toggle="tooltip"]').tooltip(); + // enable all selectpicker in adhoc forms (like invoice and export) + $('.selectpicker').selectpicker({ + container: 'body' + }); } } diff --git a/assets/js/plugins/KimaiSearchButtons.js b/assets/js/plugins/KimaiSearchButtons.js new file mode 100644 index 00000000..6f1662c2 --- /dev/null +++ b/assets/js/plugins/KimaiSearchButtons.js @@ -0,0 +1,49 @@ +/* + * This file is part of the Kimai time-tracking app. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +/*! + * [KIMAI] KimaiSearchButtons: handles events of search buttons and the filter dropdown + */ + +import jQuery from 'jquery'; +import KimaiPlugin from "../KimaiPlugin"; + +/** + * FIXME refactor me and merge with KimaiToolbar + */ +export default class KimaiSearchButtons extends KimaiPlugin { + + constructor(selector) { + super(); + this.selector = selector; + } + + init() { + const self = this; + + $(document).on('click', this.selector + ' .search-toggle', function (e) { + e.stopPropagation(); + jQuery(self.selector).toggleClass('search-open'); + jQuery(self.selector + ' form.header-search').toggleClass('hidden-xs'); + jQuery(self.selector + ' form.header-search .dropdown-toggle').dropdown('toggle'); + jQuery(self.selector + ' form.header-search input#searchTerm').focus(); + }); + + $(document).on('click', this.selector + ' .search-cancel', function (e) { + e.preventDefault(); + jQuery(self.selector).toggleClass('search-open'); + jQuery(self.selector + ' form.header-search .dropdown-toggle').dropdown('toggle'); + jQuery(self.selector + ' form.header-search').toggleClass('hidden-xs'); + }); + + // prevent that the dropdown closes, when a form input is changed - eg. a select option was clicked + $(document).on('click', this.selector + ' .dropdown-menu', function (e) { + e.stopPropagation(); + }); + } + +} diff --git a/assets/js/plugins/KimaiToolbar.js b/assets/js/plugins/KimaiToolbar.js index d8a693ea..d117a2b1 100644 --- a/assets/js/plugins/KimaiToolbar.js +++ b/assets/js/plugins/KimaiToolbar.js @@ -14,12 +14,22 @@ import KimaiPlugin from "../KimaiPlugin"; export default class KimaiToolbar extends KimaiPlugin { - init() { - const datatable = this.getContainer().getPlugin('datatable'); + constructor(selector) { + super(); + this.selector = selector; + } - // This catches all clicks on the pagination and prevents the default action, as we want to relad the page via JS + getId() { + return 'toolbar'; + } + + init() { + const formSelector = this.getSelector(); + const self = this; + + // This catches all clicks on the pagination and prevents the default action, as we want to reload the page via JS jQuery('body').on('click', 'div.navigation ul.pagination li a', function(event) { - let pager = jQuery(".toolbar form input[name='page']"); + let pager = jQuery(formSelector + " input#page"); if (pager.length === 0) { return; } @@ -29,41 +39,59 @@ export default class KimaiToolbar extends KimaiPlugin { let page = urlParts[urlParts.length-1]; pager.val(page); pager.trigger('change'); + self.getContainer().getPlugin('event').trigger('pagination-change'); return false; }); // Reset the page if any other value is changed, otherwise we might end up with a limited set // of data which does not support the given page - and it would be just wrong to stay in the same page - jQuery('.toolbar form input').change(function (event) { + jQuery(this.selector +' input').change(function (event) { switch (event.target.id) { case 'page': break; default: - jQuery('.toolbar form input#page').val(1); + jQuery(formSelector + ' input#page').val(1); } - datatable.reloadDatatable(); + self.triggerChange(); }); - jQuery('.toolbar form select').change(function (event) { + jQuery(formSelector + ' select').change(function (event) { let reload = true; switch (event.target.id) { case 'customer': - if (jQuery('.toolbar form select#project').length > 0) { + if (jQuery(formSelector + ' select#project').length > 0) { reload = false; } break; case 'project': - if (jQuery('.toolbar form select#activity').length > 0) { + if (jQuery(formSelector + ' select#activity').length > 0) { reload = false; } break; } - jQuery('.toolbar form input#page').val(1); + jQuery(formSelector + ' input#page').val(1); + if (reload) { - datatable.reloadDatatable(); + self.triggerChange(); } }); } + /** + * Triggers an event, that everyone can listen for. + */ + triggerChange() { + this.getContainer().getPlugin('event').trigger('toolbar-change'); + } + + /** + * Returns the CSS selector to target the toolbar form. + * + * @returns {string} + */ + getSelector() { + return this.selector; + } + } diff --git a/assets/js/plugins/KimaiToolbarAction.js b/assets/js/plugins/KimaiToolbarAction.js index 74c9fa32..ee88e425 100644 --- a/assets/js/plugins/KimaiToolbarAction.js +++ b/assets/js/plugins/KimaiToolbarAction.js @@ -24,11 +24,13 @@ export default class KimaiToolbarAction extends KimaiPlugin { init() { const self = this; + const toolbarSelector = this.getContainer().getPlugin('toolbar').getSelector(); + document.addEventListener('click', function(event) { let target = event.target; while (target !== null && !target.matches('body')) { if (target.classList.contains(self.selector)) { - const form = document.querySelector('div.toolbar form.navbar-form'); + const form = document.querySelector(toolbarSelector); if (form === null) { return; } diff --git a/assets/sass/app.scss b/assets/sass/app.scss index bb907825..17ba8023 100644 --- a/assets/sass/app.scss +++ b/assets/sass/app.scss @@ -10,6 +10,7 @@ @import 'error-page'; @import 'print'; @import 'content'; +@import 'content-header'; @import 'toolbar'; @import 'sidebar'; @import 'footer'; diff --git a/assets/sass/content-header.scss b/assets/sass/content-header.scss new file mode 100644 index 00000000..c5887889 --- /dev/null +++ b/assets/sass/content-header.scss @@ -0,0 +1,52 @@ +/* + * This file is part of the Kimai time-tracking app. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +.content-header { + height: 50px; + border-top: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; + background-color: #fff !important; + padding: 10px 0 0 10px; + + h1 { + padding-top: 3px; + float: left; + small { + display: none; + } + } +} + +/* Page based action buttons in the upper right corner of the content area */ +.content-header>.breadcrumb { + position: absolute; + float: right; + background: transparent; + top: 0; + right: 0; + padding-left: 10px; +} + +@media (max-width: $screen-md-min) { + .content-header>.breadcrumb { + margin-top: 0; + } +} + +@media (min-width: $screen-sm-min) { + .content-header>.breadcrumb { + right: 10px; + } + + .content-header { + h1 { + small { + display: inline-block; + } + } + } +} diff --git a/assets/sass/content.scss b/assets/sass/content.scss index 45e42b6b..c57ac8dc 100644 --- a/assets/sass/content.scss +++ b/assets/sass/content.scss @@ -8,43 +8,8 @@ .content { padding: 15px 0; } -.content-header { - border-top: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; - background-color: #fff !important; - padding: 15px 0 15px 10px; - - h1 { - small { - display: none; - } - } -} - -.content-header>.breadcrumb { - position: relative; - margin-top: 5px; - top: 0; - right: 0; - float: none; - background: #d2d6de; - padding-left: 10px; -} @media (min-width: $screen-sm-min) { - .content-header>.breadcrumb { - right: 10px; - } -} - -@media (min-width: $screen-sm-min) { - .content-header { - h1 { - small { - display: inline-block; - } - } - } .content { padding: 15px; } diff --git a/assets/sass/toolbar.scss b/assets/sass/toolbar.scss index 2db48a0c..2f30d0f1 100644 --- a/assets/sass/toolbar.scss +++ b/assets/sass/toolbar.scss @@ -5,13 +5,6 @@ * file that was distributed with this source code. */ -/* Page based action buttons in the upper right corner of the content area */ -.content-header > .breadcrumb { - position: absolute; - float: right; - background: transparent; -} - .toolbar-pad { padding: 10px; } @@ -19,6 +12,7 @@ /* The filter form is available on most pages above the datatable */ @media (min-width: $screen-sm-min) { .toolbar { + // @deprecated since 1.2 - using the toolbar is deprecated and will be removed with 2.0 form.navbar-form { font-size: $font-size-base; .form-control { @@ -39,3 +33,58 @@ } } +/* Search form with filter dropdown */ +.content-header { + form { + width: 200px; + float: left; + .container-fluid { + padding-left: 0; + padding-right: 0; + } + .form-group { + margin: 0 0 5px 0; + } + input.search-has-error { + color: $red; + } + .input-group-addon.has-error { + color: $red; + border-color: $red; + } + input.has-error { + border-color: $red; + } + ul.dropdown-menu { + max-height: 100vh; + overflow-y: auto; + padding-top: 10px; + width: 500px; + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + max-width: 90vw; + } + a.search-cancel { + margin-top: 8px; + } + } +} + +@media (max-width: $screen-xs-min) { + .content-header.search-open { + h1 { + display: none; + } + .breadcrumb { + display: none; + } + form.header-search { + padding: 0 10px 0 0; + float: none; + width: 100%; + ul.dropdown-menu { + width: 100%; + max-width: 100%; + } + } + } +} diff --git a/public/build/app.98c93d11.js b/public/build/app.98c93d11.js deleted file mode 100644 index 21c1dd04..00000000 --- a/public/build/app.98c93d11.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([["app"],{"+2oP":function(t,e,n){"use strict";var i=n("I+eb"),o=n("hh1v"),s=n("6LWA"),r=n("I8vh"),a=n("UMSQ"),l=n("/GqU"),c=n("hBjN"),u=n("Hd5f"),d=n("tiKp")("species"),h=[].slice,f=Math.max;i({target:"Array",proto:!0,forced:!u("slice")},{slice:function(t,e){var n,i,u,p=l(this),m=a(p.length),g=r(t,m),v=r(void 0===e?m:e,m);if(s(p)&&("function"!=typeof(n=p.constructor)||n!==Array&&!s(n.prototype)?o(n)&&null===(n=n[d])&&(n=void 0):n=void 0,n===Array||void 0===n))return h.call(p,g,v);for(i=new(void 0===n?Array:n)(f(v-g,0)),u=0;g")}),u=!s(function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2!==n.length||"a"!==n[0]||"b"!==n[1]});t.exports=function(t,e,n,d){var h=r(t),f=!s(function(){var e={};return e[h]=function(){return 7},7!=""[t](e)}),p=f&&!s(function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[l]=function(){return n}),n[h](""),!e});if(!f||!p||"replace"===t&&!c||"split"===t&&!u){var m=/./[h],g=n(h,""[t],function(t,e,n,i,o){return e.exec===a?f&&!o?{done:!0,value:m.call(e,n,i)}:{done:!0,value:t.call(n,e,i)}:{done:!1}}),v=g[0],y=g[1];o(String.prototype,t,v),o(RegExp.prototype,h,2==e?function(t,e){return y.call(t,this,e)}:function(t){return y.call(t,this)}),d&&i(RegExp.prototype[h],"sham",!0)}}},"1E5z":function(t,e,n){var i=n("m/L8").f,o=n("UTVS"),s=n("tiKp")("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,s)&&i(t,s,{configurable:!0,value:e})}},"1Wo5":function(t,e,n){(function(t){var e=n("EVdn");t.$=t.jQuery=e,n("VSY+"),n("Onkx"),n("DPhY");var i=n("wd/R");t.moment=i,n("jnO4"),n("tGlX"),n("iYuL"),n("nyYc"),n("WxRl"),n("bpih"),n("B55N"),n("Ivi+"),n("0tRk"),n("lXzo"),n("e+ae"),n("X709"),n("eHjp"),n("+jAj"),n("Qiut"),n("vh7O"),n("WySY"),t.$.AdminLTE={},t.$.AdminLTE.options={},n("qG+3"),n("NlKh"),n("zcCC"),n("9/yf")}).call(this,n("yLpj"))},"2B1R":function(t,e,n){"use strict";var i=n("I+eb"),o=n("tycR").map;i({target:"Array",proto:!0,forced:!n("Hd5f")("map")},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},"2oRo":function(t,e,n){(function(e){var n="object",i=function(t){return t&&t.Math==Math&&t};t.exports=i(typeof globalThis==n&&globalThis)||i(typeof window==n&&window)||i(typeof self==n&&self)||i(typeof e==n&&e)||Function("return this")()}).call(this,n("yLpj"))},"33Wh":function(t,e,n){var i=n("yoRg"),o=n("eDl+");t.exports=Object.keys||function(t){return i(t,o)}},"3UD+":function(t,e){t.exports=function(t){if(!t.webpackPolyfill){var e=Object.create(t);e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),Object.defineProperty(e,"exports",{enumerable:!0}),e.webpackPolyfill=1}return e}},"3bBZ":function(t,e,n){var i=n("2oRo"),o=n("/byt"),s=n("4mDm"),r=n("X2U+"),a=n("tiKp"),l=a("iterator"),c=a("toStringTag"),u=s.values;for(var d in o){var h=i[d],f=h&&h.prototype;if(f){if(f[l]!==u)try{r(f,l,u)}catch(t){f[l]=u}if(f[c]||r(f,c,d),o[d])for(var p in s)if(f[p]!==s[p])try{r(f,p,s[p])}catch(t){f[p]=s[p]}}}},"4Brf":function(t,e,n){"use strict";var i=n("I+eb"),o=n("g6v/"),s=n("2oRo"),r=n("UTVS"),a=n("hh1v"),l=n("m/L8").f,c=n("6JNq"),u=s.Symbol;if(o&&"function"==typeof u&&(!("description"in u.prototype)||void 0!==u().description)){var d={},h=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),e=this instanceof h?new u(t):void 0===t?u():u(t);return""===t&&(d[e]=!0),e};c(h,u);var f=h.prototype=u.prototype;f.constructor=h;var p=f.toString,m="Symbol(test)"==String(u("test")),g=/^Symbol\((.*)\)[^)]+$/;l(f,"description",{configurable:!0,get:function(){var t=a(this)?this.valueOf():this,e=p.call(t);if(r(d,t))return"";var n=m?e.slice(7,-1):e.replace(g,"$1");return""===n?void 0:n}}),i({global:!0,forced:!0},{Symbol:h})}},"4WOD":function(t,e,n){var i=n("UTVS"),o=n("ewvW"),s=n("93I0"),r=n("4Xet"),a=s("IE_PROTO"),l=Object.prototype;t.exports=r?Object.getPrototypeOf:function(t){return t=o(t),i(t,a)?t[a]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?l:null}},"4Xet":function(t,e,n){var i=n("0Dky");t.exports=!i(function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype})},"4l63":function(t,e,n){var i=n("I+eb"),o=n("5YOQ");i({global:!0,forced:parseInt!=o},{parseInt:o})},"4mDm":function(t,e,n){"use strict";var i=n("/GqU"),o=n("RNIs"),s=n("P4y1"),r=n("afO8"),a=n("fdAy"),l=r.set,c=r.getterFor("Array Iterator");t.exports=a(Array,"Array",function(t,e){l(this,{type:"Array Iterator",target:i(t),index:0,kind:e})},function(){var t=c(this),e=t.target,n=t.kind,i=t.index++;return!e||i>=e.length?(t.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:i,done:!1}:"values"==n?{value:e[i],done:!1}:{value:[i,e[i]],done:!1}},"values"),s.Arguments=s.Array,o("keys"),o("values"),o("entries")},"5YOQ":function(t,e,n){var i=n("2oRo"),o=n("WKiH").trim,s=n("WJkJ"),r=i.parseInt,a=/^[+-]?0[Xx]/,l=8!==r(s+"08")||22!==r(s+"0x16");t.exports=l?function(t,e){var n=o(String(t));return r(n,e>>>0||(a.test(n)?16:10))}:r},"6JNq":function(t,e,n){var i=n("UTVS"),o=n("Vu81"),s=n("Bs8V"),r=n("m/L8");t.exports=function(t,e){for(var n=o(e),a=r.f,l=s.f,c=0;c",options:{appendTo:null,autoFocus:!1,delay:300,minLength:1,position:{my:"left top",at:"left bottom",collision:"none"},source:null,change:null,close:null,focus:null,open:null,response:null,search:null,select:null},requestIndex:0,pending:0,_create:function(){var e,n,i,o=this.element[0].nodeName.toLowerCase(),s="textarea"===o,r="input"===o;this.isMultiLine=s||!r&&this._isContentEditable(this.element),this.valueMethod=this.element[s||r?"val":"text"],this.isNewMenu=!0,this._addClass("ui-autocomplete-input"),this.element.attr("autocomplete","off"),this._on(this.element,{keydown:function(o){if(this.element.prop("readOnly"))return e=!0,i=!0,void(n=!0);e=!1,i=!1,n=!1;var s=t.ui.keyCode;switch(o.keyCode){case s.PAGE_UP:e=!0,this._move("previousPage",o);break;case s.PAGE_DOWN:e=!0,this._move("nextPage",o);break;case s.UP:e=!0,this._keyEvent("previous",o);break;case s.DOWN:e=!0,this._keyEvent("next",o);break;case s.ENTER:this.menu.active&&(e=!0,o.preventDefault(),this.menu.select(o));break;case s.TAB:this.menu.active&&this.menu.select(o);break;case s.ESCAPE:this.menu.element.is(":visible")&&(this.isMultiLine||this._value(this.term),this.close(o),o.preventDefault());break;default:n=!0,this._searchTimeout(o)}},keypress:function(i){if(e)return e=!1,void(this.isMultiLine&&!this.menu.element.is(":visible")||i.preventDefault());if(!n){var o=t.ui.keyCode;switch(i.keyCode){case o.PAGE_UP:this._move("previousPage",i);break;case o.PAGE_DOWN:this._move("nextPage",i);break;case o.UP:this._keyEvent("previous",i);break;case o.DOWN:this._keyEvent("next",i)}}},input:function(t){if(i)return i=!1,void t.preventDefault();this._searchTimeout(t)},focus:function(){this.selectedItem=null,this.previous=this._value()},blur:function(t){this.cancelBlur?delete this.cancelBlur:(clearTimeout(this.searching),this.close(t),this._change(t))}}),this._initSource(),this.menu=t("