feat(timesheet): ✨ added week navigation allowing the user to view pr…

…evious weeks (#11)

src/components/tj-jira-panel/tj-jira-panel.css

@@ -17,6 +17,7 @@
   font-size: 14px;
   box-sizing: border-box;
   --primary-color: #005273;
+  --accent-color: #2479aa;
 }
 
 #tj-panel {

src/components/tj-settings/pages/parent-tasks/tj-parent-tasks-page.css

@@ -11,5 +11,5 @@ button {
   text-align: left;
   padding: 0;
   margin: 0;
-  color: #2479aa;
+  color: var(--accent-color);
 }

src/components/tj-settings/tj-settings.css

@@ -23,7 +23,7 @@ p {
   text-align: left;
   padding: 0;
   margin: 0;
-  color: #2479aa;
+  color: var(--accent-color);
 }
 
 .server {

src/components/tj-task-page/components/tj-task-timesheet/tj-task-timesheet.css

@@ -55,7 +55,7 @@ th div {
   }
 
   &.currentDay {
-    color: #2479aa;
+    color: var(--accent-color);
     font-weight: 900;
   }
 
@@ -77,3 +77,21 @@ input {
 input[disabled] {
   cursor: not-allowed;
 }
+
+.week-navigation__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 10px 0;
+}
+
+.week-navigation__button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: right;
+  padding: 0;
+  margin: 4px 0 0 0;
+  color: var(--accent-color);
+}

src/components/tj-task-page/components/tj-task-timesheet/tj-task-timesheet.tsx

@@ -1,6 +1,6 @@
-import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { Task } from '@utils/tj';
+import { Task, User } from '@utils/tj';
 
 import type { Notification } from '../../../notifications-provider/types';
 
@@ -35,11 +35,8 @@ export class TJNewTaskForm {
    */
   @Prop() task!: Task;
 
-  days: Day[] = [];
-
-  componentWillLoad() {
-    this.days = this.getWeekDays(new Date());
-  }
+  @State() recordedHours = this.task.recordedHours;
+  @State() days: Day[] = this.getWeekDays(new Date());
 
   /**
    * Returns an array of Day objects representing the week days of the current week.
@@ -85,6 +82,22 @@ export class TJNewTaskForm {
     }
   }
 
+  onWeekChange = (e: Event) => {
+    const target = e.target as HTMLButtonElement;
+    const type = target.dataset.type;
+    const newDate = new Date(this.days[0].date.getTime());
+    const offset = type === 'next' ? 7 : -7;
+    newDate.setDate(newDate.getDate() + offset);
+    this.days = this.getWeekDays(newDate);
+  };
+
+  @Watch('days')
+  async getTimeSheet(newDays: Day[]) {
+    const day = newDays[0].date;
+    const task = await User.getTaskById(this.task.id, day);
+    this.recordedHours = task.recordedHours;
+  }
+
   render() {
     return (
       <Host>
@@ -117,7 +130,7 @@ export class TJNewTaskForm {
                     type="text"
                     aria-label={`Hours recorded on ${longWeekdayFormatter.format(day.date)}`}
                     disabled={(this.task?.startDate ?? new Date()) > day.date}
-                    value={this.task.recordedHours[day.iso]}
+                    value={this.recordedHours[day.iso]}
                     onFocus={(e: FocusEvent) => {
                       (e.target as HTMLInputElement).select();
                     }}
@@ -135,6 +148,19 @@ export class TJNewTaskForm {
             </tr>
           </tbody>
         </table>
+        <div class="week-navigation__container">
+          {this.days[0].date > this.task.startDate && (
+            <button data-type="previous" class="week-navigation__button" onClick={this.onWeekChange}>
+              &lt; Previous week
+            </button>
+          )}
+          <span class="week-navigation__spacer"></span>
+          {this.days[6].date < new Date() && (
+            <button data-type="next" class="week-navigation__button" onClick={this.onWeekChange}>
+              Next week &gt;
+            </button>
+          )}
+        </div>
       </Host>
     );
   }

src/utils/tj/User.ts

@@ -14,9 +14,7 @@ interface AuthObject {
 }
 
 export class User {
-  private static authObject: AuthObject = JSON.parse(
-    localStorage.getItem('tj_user') ?? '{}',
-  );
+  private static authObject: AuthObject = JSON.parse(localStorage.getItem('tj_user') ?? '{}');
 
   public static get username(): string {
     return User.authObject.username;
@@ -76,9 +74,9 @@ export class User {
     return dom.querySelector('sessionUuid')?.textContent === sessionUuid;
   }
 
-  public static async getTimesheet() {
-    const date = new Date().toISOString().split('T')[0];
-    const body = `<getTimesheet><forUser>${this.userId}</forUser><containingDay>${date}</containingDay></getTimesheet>`;
+  public static async getTimesheet(date = new Date()) {
+    const dateString = date.toISOString().split('T')[0];
+    const body = `<getTimesheet><forUser>${this.userId}</forUser><containingDay>${dateString}</containingDay></getTimesheet>`;
     const response = await fetch(Server.url, {
       method: 'POST',
       headers: {
@@ -130,8 +128,8 @@ export class User {
     return null;
   }
 
-  public static async getTaskById(id: string) {
-    const timesheet = await this.getTimesheet();
+  public static async getTaskById(id: string, timesheetDate?: Date) {
+    const timesheet = await this.getTimesheet(timesheetDate);
     const xpath = `//task[@id="${id}"]`;
     const task = timesheet.evaluate(xpath, timesheet).iterateNext();
     if (task) {