detail pages for customers and projects (#1371)

assets/app.js

@@ -74,6 +74,7 @@ require('./sass/app.scss');
 // ------ Kimai itself ------
 require('./js/KimaiWebLoader.js');
 global.KimaiPaginatedBoxWidget = require('./js/widgets/KimaiPaginatedBoxWidget').default;
+global.KimaiReloadPageWidget = require('./js/widgets/KimaiReloadPageWidget').default;
 
 // ------ Autocomplete for tags only ------
 require('jquery-ui/ui/widgets/autocomplete');

assets/js/widgets/KimaiReloadPageWidget.js

@@ -0,0 +1,72 @@
+/*
+ * 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] KimaiReloadPageWidget: a simple helper to reload the page on events
+ */
+
+import jQuery from "jquery";
+
+export default class KimaiReloadPageWidget {
+
+    constructor(events, fullReload) {
+        this.overlay = jQuery('<div class="overlay-wrapper"><div class="overlay"><div class="fa fa-refresh fa-spin"></div></div></div>');
+        this.widget = jQuery('div.content-wrapper');
+
+        const self = this;
+
+        const reloadPage = function (event) {
+            if (fullReload) {
+                document.location.reload(true);
+            } else {
+                self.loadPage(document.location);
+            }
+        };
+
+        for (const eventName of events.split(' ')) {
+            document.addEventListener(eventName, reloadPage);
+        }
+    }
+    
+    static create(events, fullReload) {
+        if (fullReload === undefined || fullReload === null) {
+            fullReload = false;
+        }
+        return new KimaiReloadPageWidget(events, fullReload);
+    }
+    
+    _showOverlay() {
+        this.widget.append(this.overlay);
+    }
+    
+    _hideOverlay() {
+        jQuery(this.overlay).remove();
+    }
+    
+    loadPage(url) {
+        const self = this;
+        
+        self._showOverlay();
+
+        jQuery.ajax({
+            url: url,
+            data: {},
+            success: function (response) {
+                jQuery('section.content').replaceWith(
+                    jQuery(response).find('section.content')
+                );
+                self._hideOverlay();
+            },
+            dataType: 'html',
+            error: function(jqXHR, textStatus, errorThrown) {
+                self._hideOverlay();
+                document.location = url;
+            }
+        });        
+    }
+
+}

assets/sass/content.scss

@@ -48,4 +48,9 @@ td {
 
 .label-gray {
     background-color: $gray-lte;
+}
+
+/* Delete link in action dropdowns */
+.dropdown-menu > li.delete > a {
+    color: #dd4b39;
 }

assets/sass/datatable-extensions.scss

@@ -23,10 +23,7 @@ span.label-customer {
 table.dataTable {
     /* action column */
     .actions {
-        width: 90px;
-        li.delete a {
-            color: #dd4b39;
-        }
+        width: 40px;
     }
     tr {
         /* summary row - provided in the users own timesheet table */

assets/sass/datatable.scss

@@ -279,5 +279,8 @@ table.dataTable.table > tbody > tr > td {
     .img-circle {
         max-width: 35px;
         margin-right: 10px;
+        &.teamlead {
+            box-shadow: 0 0 5px 3px $gray-lte;
+        }
     }
 }