🐛 further fixes for the weekl time tracking view (Day input in week v…

…iew - moves input by one day #204)
kromitgmbh · Feb 15, 2024 · 138bfb9 · 138bfb9
1 parent 59eb6c3
commit 138bfb9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 50 deletions.
diff --git a/imports/ui/pages/track/components/weektable.html b/imports/ui/pages/track/components/weektable.html
@@ -48,9 +48,6 @@
 
 <template name="weektablerow">
     <tr>
-      <!-- <td scope="row">
-        <a href="#" style="color:inherit; border-left-color: {{project.color}}; border-left-width:thick" class="text-decoration-none week-row js-collapse" data-bs-toggle="collapse" data-bs-target='[data-project-id="{{projectId}}"]' aria-expanded="false"><span class="d-inline-block text-truncate" style="width:170px;" data-bs-toggle="tooltip" data-bs-placement="top" title="{{projectName}}">{{projectName}}</span> <i class="fa fa-chevron-right d-inline-block"></i></a>
-      </td> -->
       <td scope="row" style="color:inherit; border-left-color: {{getColorForProject projectId}} !important; border-left-width:thick;">
         <a href="#" class="text-decoration-none week-row js-collapse" data-bs-toggle="collapse" data-bs-target='[data-project-id="{{projectId}}"]' aria-expanded="false"><span class="d-inline-block text-truncate" style="width:165px;" data-bs-toggle="tooltip" data-bs-placement="top" title="{{projectName}}">{{projectName}}</span> <i class="fa fa-chevron-right d-inline-block"></i></a>
       </td>
@@ -66,28 +63,28 @@
   <tbody data-project-id="{{projectId}}" class="collapse" >
     <tr class="js-new-line-placeholder"></tr>
     <tr><td colspan="9"><button type="button" class="btn btn-sm btn-primary js-newline"><i class="fa fa-plus"></i> {{t "navigation.newLine"}}</button></td></tr> 
-    {{#each task in tasks}}
-      <tr>
-        <td>
-          {{#if task._id}}
-            <div class="input-group-text bg-secondary text-start" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{task._id}}">
-              <span class="d-inline-block" style="overflow:hidden;text-overflow:ellipsis; max-width:10rem;">{{task._id}}</span> <a href="#" class="d-inline-block ms-auto js-delete-task" data-task="{{task._id}}" data-project-id="{{projectId}}"><i class="fa fa-trash"></i></a>
-            </div>
-          {{else}}
-            {{>tasksearch projectId=reactiveProjectId isComponent=true}}
-          {{/if}}
-        </td>
-        {{#let resolvedWeekDays=weekDays}}
-          {{#each weekday in resolvedWeekDays}}
-            <td>
-              <input aria-label="Weekday {{@index}}" type="number" value="{{getHoursForDay weekday task}}" data-task="{{task._id}}" data-project-id="{{projectId}}" data-week-day="{{@index}}" class="form-control js-hours" placeholder="0.00"/>
-            </td>
-          {{/each}}
-        {{/let}}
-        <td class="pt-2">{{getTotalForTask(task)}}</td>
-      </tr>
-    {{/each}}
-    <!-- <tr class="js-new-line-placeholder"></tr>
-    <tr><td colspan="9"><button type="button" class="btn btn-sm btn-primary js-newline"><i class="fa fa-plus"></i> {{t "navigation.newLine"}}</button></td></tr>  -->
+    {{#if tasks}}
+      {{#each task in tasks}}
+        <tr>
+          <td>
+            {{#if task._id}}
+              <div class="input-group-text bg-secondary text-start" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{task._id}}">
+                <span class="d-inline-block" style="overflow:hidden;text-overflow:ellipsis; max-width:10rem;">{{task._id}}</span> <a href="#" class="d-inline-block ms-auto js-delete-task" data-task="{{task._id}}" data-project-id="{{projectId}}"><i class="fa fa-trash"></i></a>
+              </div>
+            {{else}}
+              {{>tasksearch projectId=reactiveProjectId isComponent=true}}
+            {{/if}}
+          </td>
+          {{#let resolvedWeekDays=weekDays}}
+            {{#each weekday in resolvedWeekDays}}
+              <td>
+                <input aria-label="Weekday {{@index}}" type="number" value="{{getHoursForDay weekday task}}" data-task="{{task._id}}" data-project-id="{{projectId}}" data-week-day="{{@index}}" class="form-control js-hours" placeholder="0.00"/>
+              </td>
+            {{/each}}
+          {{/let}}
+          <td class="pt-2">{{getTotalForTask(task)}}</td>
+        </tr>
+      {{/each}}
+    {{/if}}
   </tbody>
 </template>
diff --git a/imports/ui/pages/track/components/weektable.js b/imports/ui/pages/track/components/weektable.js
@@ -3,7 +3,7 @@ import utc from 'dayjs/plugin/utc'
 import isoWeek from 'dayjs/plugin/isoWeek'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { FlowRouter } from 'meteor/ostrio:flow-router-extra'
-import { t } from '../../../../utils/i18n.js'
+import { i18nReady, t } from '../../../../utils/i18n.js'
 import './weektable.html'
 import './tasksearch'
 import Projects from '../../../../api/projects/projects'
@@ -28,8 +28,14 @@ Template.weektable.onCreated(function weekTableCreated() {
   getHolidays().then((holidays) => {
     this.holidays.set(holidays)
   })
-  this.startDate = new ReactiveVar(dayjs.utc().isoWeekday(getUserSetting('startOfWeek')))
-  this.endDate = new ReactiveVar(dayjs.utc().isoWeekday(getUserSetting('startOfWeek')).add(6, 'day'))
+  this.startDate = new ReactiveVar()
+  this.endDate = new ReactiveVar()
+  this.autorun(() => {
+    if (this.subscriptionsReady()) {
+      this.startDate.set(dayjs().isoWeekday(getUserSetting('startOfWeek')))
+      this.endDate.set(dayjs().isoWeekday(getUserSetting('startOfWeek')).add(6, 'day'))
+    }
+  })
   this.autorun(() => {
     if (FlowRouter.getQueryParam('date')) {
       this.startDate.set(dayjs.utc(FlowRouter.getQueryParam('date')).isoWeekday(getUserSetting('startOfWeek')), 'YYYY-MM-DD')
@@ -121,17 +127,14 @@ Template.weektable.events({
           return
         }
         let hours = Number(value)
-        // hours = hours.toString().replace(',', '.');
         if (getUserSetting('timeunit') === 'd') {
           hours *= (getUserSetting('hoursToDays'))
         }
         if (getUserSetting('timeunit') === 'm') {
           hours /= 60
         }
         const projectId = $(element).data('project-id')
-        console.log(startDate)
         const date = dayjs.utc(startDate.add(Number(templateInstance.$(element).data('week-day')), 'day').format('YYYY-MM-DD')).toDate()
-        console.log(date)
         const existingElement = weekArray
           .findIndex((arrayElement) => arrayElement.projectId === projectId
           && arrayElement.task === task && dayjs(arrayElement.date).isSame(dayjs(date)))
@@ -148,7 +151,6 @@ Template.weektable.events({
       }
     })
     if (weekArray.length > 0 && !inputError) {
-      console.log(weekArray)
       Meteor.call('upsertWeek', weekArray, (error) => {
         if (error) {
           console.error(error)
@@ -183,17 +185,22 @@ Template.weektable.events({
 })
 
 Template.weektablerow.onCreated(function weektablerowCreated() {
+  dayjs.extend(utc)
+  dayjs.extend(customParseFormat)
+  dayjs.extend(isoWeek)
   this.tempTimeEntries = new ReactiveVar([])
   this.reactiveProjectId = new ReactiveVar()
   this.autorun(() => {
-    this.subscribe(
-      'userTimeCardsForPeriodByProjectByTask',
-      {
-        projectId: Template.instance().data.projectId,
-        startDate: Template.instance().data.startDate.get().toDate(),
-        endDate: Template.instance().data.endDate.get().toDate(),
-      },
-    )
+    if (Template.instance().data.projectId && Template.instance().data.startDate.get() && Template.instance().data.endDate.get()) {
+      this.subscribe(
+        'userTimeCardsForPeriodByProjectByTask',
+        {
+          projectId: Template.instance().data.projectId,
+          startDate: Template.instance().data.startDate.get().toDate(),
+          endDate: Template.instance().data.endDate.get().toDate(),
+        },
+      )
+    }
   })
   this.autorun(() => {
     if (this.data.timeEntries) {
@@ -250,9 +257,9 @@ Template.weektablerow.helpers({
     ).fetch().map((entry) => ({ _id: entry._id.split('|')[1], entries: entry.entries })).concat(Template.instance().tempTimeEntries.get())
   },
   getHoursForDay(day, task) {
-    if (task.entries) {
+    if (task.entries && getGlobalSetting('weekviewDateFormat') && i18nReady.get()) {
       const entryForDay = task.entries
-        .filter((entry) => dayjs.utc(entry.date).format(getGlobalSetting('weekviewDateFormat')) === day)
+        .filter((entry) => dayjs.utc(entry.date).format(getGlobalSetting('weekviewDateFormat')) === dayjs.utc(day, getGlobalSetting('weekviewDateFormat')).format(getGlobalSetting('weekviewDateFormat')))
         .reduce(((total, element) => total + element.hours), 0)
       return entryForDay !== 0 ? timeInUserUnit(entryForDay) : ''
     }
@@ -283,7 +290,7 @@ Template.weektablerow.helpers({
         },
       ).fetch().concat(Template.instance().tempTimeEntries.get()).forEach((element) => {
         if (element.entries) {
-          total += element.entries.filter((entry) => dayjs.utc(entry.date).format(getGlobalSetting('weekviewDateFormat')) === day)
+          total += element.entries.filter((entry) => dayjs.utc(entry.date).format(getGlobalSetting('weekviewDateFormat')) === dayjs.utc(day, getGlobalSetting('weekviewDateFormat')).format(getGlobalSetting('weekviewDateFormat')))
             .reduce((tempTotal, current) => tempTotal + Number(current.hours), 0)
         }
       })

diff --git a/imports/utils/frontend_helpers.js b/imports/utils/frontend_helpers.js
@@ -31,11 +31,14 @@ function addToolTipToTableCell(value) {
 }
 
 async function getWeekDays(date) {
-  const dayjs = await import('dayjs')
-  const isoWeek = await import('dayjs/plugin/isoWeek')
-  dayjs.default.extend(isoWeek.default)
-  const calendar = date.clone().isoWeekday(getUserSetting('startOfWeek'))
-  return new Array(7).fill(0).map((value, index) => (calendar.add(index, 'day').format(getGlobalSetting('weekviewDateFormat'))))
+  if (date) {
+    const dayjs = await import('dayjs')
+    const isoWeek = await import('dayjs/plugin/isoWeek')
+    dayjs.default.extend(isoWeek.default)
+    const calendar = date.clone().isoWeekday(getUserSetting('startOfWeek'))
+    return new Array(7).fill(0).map((value, index) => (calendar.add(index, 'day').format(getGlobalSetting('weekviewDateFormat'))))
+  }
+  return false
 }
 
 function numberWithUserPrecision(number) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "titra",
-  "version": "0.96.5",
+  "version": "0.96.6",
   "private": true,
   "scripts": {
     "start": "meteor run"