💄 improved rendering of the overview page, especially on slow networks

🐛 fixed multiple bugs in the details view which could lead to undefined states
🐛 correctly export the new state column in Excel and CSV

.meteor/versions

@@ -93,7 +93,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-tunguska:reactive-aggregate@1.2.5
+tunguska:reactive-aggregate@1.3.0
 [email protected]
 [email protected]
 [email protected]

README.md

@@ -1,4 +1,4 @@
-![Docker Build Status](https://img.shields.io/docker/build/kromit/titra.svg) ![Docker Pulls](https://img.shields.io/docker/pulls/kromit/titra.svg)
+![Docker Build Status](https://img.shields.io/docker/build/kromit/titra.svg) ![Docker Pulls](https://img.shields.io/docker/pulls/kromit/titra.svg) ![Latest Release](https://img.shields.io/github/v/release/kromitgmbh/titra.svg)
 
 
 # ![titra logo](public/favicons/favicon-32x32.png) titra

imports/ui/components/allprojectschart.html

@@ -8,8 +8,12 @@
     <div class="d-none d-md-block col-md-3 text-center">
       {{#if topTasks}}
         <p>{{t "overview.top_tasks"}}</p>
+      {{else}}
+        <p>&nbsp;</p>
       {{/if}}
-      <div class="js-pie-chart-container"></div>
+      <div class="js-pie-chart-container">
+        <div style="margin:auto; width:122px; height:122px; border-radius:50%; background-color: rgba(0,0,0,0.1);"></div>
+      </div>
       <!-- <ol>
         {{#each topTasks}}
           <li><span class="d-block text-truncate" style="max-width:100%;" data-toggle="tooltip" data-placement="top" title="{{_id}}">{{_id}}</span></li>
@@ -20,6 +24,7 @@
     <div class="d-none d-md-block col-md-5 text-center">
       <p>{{t "overview.three_month_history"}}</p>
       <div class="js-chart-container">
+        <div style="margin:auto; width:428px; height:132px; background-color:rgba(0,0,0,0.1);"></div>
       </div>
     </div>
   </div>

imports/ui/components/dailytimetable.js

@@ -15,12 +15,13 @@ Template.dailytimetable.onCreated(function dailytimetablecreated() {
   dayjs.extend(utc)
   this.dailyTimecards = new ReactiveVar()
   this.totalEntries = new ReactiveVar()
-  Tracker.autorun(() => {
+  this.autorun(() => {
     if (this.data.project.get()
       && this.data.resource.get()
       && this.data.period.get()
       && this.data.limit.get()
       && this.data.customer.get()) {
+      this.projectUsersHandle = this.subscribe('projectUsers', { projectId: this.data.project.get() })
       const methodParameters = {
         projectId: this.data.project.get(),
         userId: this.data.resource.get(),
@@ -124,7 +125,7 @@ Template.dailytimetable.events({
       unit = getUserSetting('timeunit') === 'd' ? i18next.t('globals.day_plural') : i18next.t('globals.hour_plural')
     }
     const csvArray = [`\uFEFF${i18next.t('globals.date')},${i18next.t('globals.project')},${i18next.t('globals.resource')},${unit}\r\n`]
-    for (const timeEntry of templateInstance.dailyTimecards.get()) {
+    for (const timeEntry of templateInstance.dailyTimecards.get().map(dailyTimecardMapper)) {
       csvArray.push(`${dayjs(timeEntry.date).format(getGlobalSetting('dateformat'))},${timeEntry.projectId},${timeEntry.userId},${timeEntry.totalHours}\r\n`)
     }
     saveAs(new Blob(csvArray, { type: 'text/csv;charset=utf-8;header=present' }), `titra_daily_time_${templateInstance.data.period.get()}.csv`)
@@ -136,7 +137,7 @@ Template.dailytimetable.events({
       unit = getUserSetting('timeunit') === 'd' ? i18next.t('globals.day_plural') : i18next.t('globals.hour_plural')
     }
     const data = [[i18next.t('globals.date'), i18next.t('globals.project'), i18next.t('globals.resource'), unit]]
-    for (const timeEntry of templateInstance.dailyTimecards.get()) {
+    for (const timeEntry of templateInstance.dailyTimecards.get().map(dailyTimecardMapper)) {
       data.push([dayjs(timeEntry.date).format(getGlobalSetting('dateformat')), timeEntry.projectId, timeEntry.userId, timeEntry.totalHours])
     }
     saveAs(new NullXlsx('temp.xlsx', { frozen: 1, filter: 1 }).addSheetFromData(data, 'daily').createDownloadUrl(), `titra_daily_time_${templateInstance.data.period.get()}.xlsx`)

imports/ui/components/detailtimetable.html

@@ -4,8 +4,8 @@
             <div class="btn-group">
                 <button class="btn btn-secondary border js-track-time"> <i class="fa fa-plus"></i> <span class="d-none d-md-inline">{{t "navigation.track"}}</span></button>
                 {{#if detailTimeEntries}}
-                    <button class="btn btn-secondary border js-export-xlsx"><i class="fa fa-download"></i> <span class="d-none d-md-inline">Excel</span></button>
                     <button class="btn btn-secondary border js-export-csv"><i class="fa fa-download"></i> <span class="d-none d-md-inline">CSV</span></button>
+                    <button class="btn btn-secondary border js-export-xlsx"><i class="fa fa-download"></i> <span class="d-none d-md-inline">Excel</span></button>
                     <button class="btn btn-secondary border js-share"><i class="fa fa-link"></i> <span class="d-none d-md-inline">{{t "navigation.share"}}</span></button>
                     {{#if showInvoiceButton}}
                         <button class="btn btn-secondary border js-invoice"><i class="fa fa-upload"></i> <span class="d-none d-md-inline">{{t "navigation.invoice"}}</span></button>

imports/ui/components/detailtimetable.js

@@ -246,7 +246,7 @@ Template.detailtimetable.events({
     for (const timeEntry of Timecards.find(templateInstance.selector[0], templateInstance.selector[1])
       .fetch().map(detailedDataTableMapper)) {
       if (getGlobalSetting('useState')) {
-        csvArray.push(`${timeEntry[0]},${timeEntry[1]},${timeEntry[2]},${timeEntry[3]},${timeEntry[4]},${i18next.t(`details.${timeEntry[5]}`)}\r\n`)
+        csvArray.push(`${timeEntry[0]},${timeEntry[1]},${timeEntry[2]},${timeEntry[3]},${timeEntry[4]},${i18next.t(`details.${timeEntry[5] ? timeEntry[5] : 'new'}`)}\r\n`)
       } else {
         csvArray.push(`${timeEntry[0]},${timeEntry[1]},${timeEntry[2]},${timeEntry[3]},${timeEntry[4]}\r\n`)
       }
@@ -270,7 +270,7 @@ Template.detailtimetable.events({
     for (const timeEntry of Timecards.find(templateInstance.selector[0], templateInstance.selector[1]).fetch()
       .map(detailedDataTableMapper)) {
       if (getGlobalSetting('useState')) {
-        data.push([timeEntry[0], timeEntry[1], timeEntry[2], timeEntry[3], timeEntry[4], i18next.t(`details.${timeEntry[5]}`)])
+        data.push([timeEntry[0], timeEntry[1], timeEntry[2], timeEntry[3], timeEntry[4], i18next.t(`details.${timeEntry[5] ? timeEntry[5] : 'new'}`)])
       } else {
         data.push([timeEntry[0], timeEntry[1], timeEntry[2], timeEntry[3], timeEntry[4]])
       }

imports/ui/components/periodtimetable.js

@@ -15,12 +15,13 @@ Template.periodtimetable.onCreated(function periodtimetableCreated() {
   dayjs.extend(utc)
   this.periodTimecards = new ReactiveVar()
   this.totalPeriodTimeCards = new ReactiveVar()
-  Tracker.autorun(() => {
+  this.autorun(() => {
     if (this.data.project.get()
       && this.data.resource.get()
       && this.data.period.get()
       && this.data.limit.get()
       && this.data.customer.get()) {
+      this.projectUsersHandle = this.subscribe('projectUsers', { projectId: this.data.project.get() })
       const methodParameters = {
         projectId: this.data.project.get(),
         userId: this.data.resource.get(),
@@ -110,15 +111,15 @@ Template.periodtimetable.events({
   'click .js-export-csv': (event, templateInstance) => {
     event.preventDefault()
     const csvArray = [`\uFEFF${i18next.t('globals.project')},${i18next.t('globals.resource')},${Meteor.user() && getUserSetting('timeunit') === 'd' ? i18next.t('globals.day_plural') : i18next.t('globals.hour_plural')}\r\n`]
-    for (const timeEntry of templateInstance.periodTimecards.get()) {
+    for (const timeEntry of templateInstance.periodTimecards.get().map(totalHoursForPeriodMapper)) {
       csvArray.push(`${timeEntry.projectId},${timeEntry.userId},${timeEntry.totalHours}\r\n`)
     }
     saveAs(new Blob(csvArray, { type: 'text/csv;charset=utf-8;header=present' }), `titra_total_time_${templateInstance.data.period.get()}.csv`)
   },
   'click .js-export-xlsx': (event, templateInstance) => {
     event.preventDefault()
     const data = [[i18next.t('globals.project'), i18next.t('globals.resource'), Meteor.user() && getUserSetting('timeunit') === 'd' ? i18next.t('globals.day_plural') : i18next.t('globals.hour_plural')]]
-    for (const timeEntry of templateInstance.periodTimecards.get()) {
+    for (const timeEntry of templateInstance.periodTimecards.get().map(totalHoursForPeriodMapper)) {
       data.push([timeEntry.projectId, timeEntry.userId, timeEntry.totalHours])
     }
     saveAs(new NullXlsx('temp.xlsx', { frozen: 1, filter: 1 }).addSheetFromData(data, 'total time').createDownloadUrl(), `titra_total_time_${templateInstance.data.period.get()}.xlsx`)

imports/ui/components/projectchart.html

@@ -26,8 +26,12 @@
     <div class="d-none d-md-block col-md-3 text-center">
       {{#if topTasks}}
         <p>{{t "overview.top_tasks"}}</p>
+      {{else}}
+        <p>&nbsp;</p>
       {{/if}}
-      <div class="js-pie-chart-container"></div>
+      <div class="js-pie-chart-container">
+        <div style="margin:auto; width:122px; height:122px; border-radius:50%; background-color: rgba(0,0,0,0.1);"></div>
+      </div>
       <!-- <ol>
         {{#each topTasks}}
           <li><span class="d-block text-truncate" style="max-width:100%;" data-toggle="tooltip" data-placement="top" title="{{emojify (_id)}}">{{emojify (_id)}}</span></li>
@@ -38,6 +42,7 @@
     <div class="d-none d-md-block col-md-5 text-center">
       <p>{{t "overview.three_month_history"}}</p>
       <div class="js-chart-container p-3">
+        <div style="margin:auto; width:396px; height:122px; background-color:rgba(0,0,0,0.1);"></div>
       </div>
     </div>
   </div>

imports/ui/components/workingtimetable.js

@@ -20,11 +20,12 @@ Template.workingtimetable.onCreated(function workingtimetableCreated() {
   this.workingTimeEntries = new ReactiveVar()
   this.totalWorkingTimeEntries = new ReactiveVar()
 
-  Tracker.autorun(() => {
+  this.autorun(() => {
     if (this.data.project.get()
       && this.data.resource.get()
       && this.data.period.get()
       && this.data.limit.get()) {
+      this.projectUsersHandle = this.subscribe('projectUsers', { projectId: this.data.project.get() })
       const methodParameters = {
         projectId: this.data.project.get(),
         userId: this.data.resource.get(),