V2 beta1 (#326)

* style: labels on added time

* style: remove mentions of PiP

* refactor: unify usage of ms for timers

* refactor: create events with 0 duration

* style: several small tweaks

* refactor: keep block when applying delays

* feat: blocks have titles

* style: improvements in time entry warnings

* style: override progress bar styles

* style: prevent overflow

* feat: show character count in editor

* refactor: provide initial payload

* refactor: lower test boundary

* refactor: get colour from swatches

* style: rename title block

* chore: version bump

apps/client/src/common/utils/__tests__/dateConfig.test.js

@@ -19,12 +19,12 @@ describe('test string from formatDisplay function', () => {
   });
 
   it('test with valid millis', () => {
-    const t = { val: 3600, result: '01:00:00' };
+    const t = { val: 3600000, result: '01:00:00' };
     expect(formatDisplay(t.val, false)).toBe(t.result);
   });
 
   it('test with negative millis', () => {
-    const t = { val: -3600, result: '01:00:00' };
+    const t = { val: -3600000, result: '01:00:00' };
     expect(formatDisplay(t.val, false)).toBe(t.result);
   });
 
@@ -39,17 +39,17 @@ describe('test string from formatDisplay function', () => {
   });
 
   it('test with 86400 (24 hours)', () => {
-    const t = { val: 86400, result: '00:00:00' };
+    const t = { val: 86400000, result: '00:00:00' };
     expect(formatDisplay(t.val, false)).toBe(t.result);
   });
 
   it('test with 86401 (24 hours and 1 second)', () => {
-    const t = { val: 86401, result: '00:00:01' };
+    const t = { val: 86401000, result: '00:00:01' };
     expect(formatDisplay(t.val, false)).toBe(t.result);
   });
 
   it('test with -86401 (-24 hours and 1 second)', () => {
-    const t = { val: -86401, result: '00:00:01' };
+    const t = { val: -86401000, result: '00:00:01' };
     expect(formatDisplay(t.val, false)).toBe(t.result);
   });
 });
@@ -61,12 +61,12 @@ describe('test string from formatDisplay function with hidezero', () => {
   });
 
   it('test with valid millis', () => {
-    const t = { val: 3600, result: '01:00:00' };
+    const t = { val: 3600000, result: '01:00:00' };
     expect(formatDisplay(t.val, true)).toBe(t.result);
   });
 
   it('test with negative millis', () => {
-    const t = { val: -3600, result: '01:00:00' };
+    const t = { val: -3600000, result: '01:00:00' };
     expect(formatDisplay(t.val, true)).toBe(t.result);
   });
 
@@ -81,17 +81,17 @@ describe('test string from formatDisplay function with hidezero', () => {
   });
 
   it('test with 86400 (24 hours)', () => {
-    const t = { val: 86400, result: '00:00' };
+    const t = { val: 86400000, result: '00:00' };
     expect(formatDisplay(t.val, true)).toBe(t.result);
   });
 
   it('test with 86401 (24 hours and 1 second)', () => {
-    const t = { val: 86401, result: '00:01' };
+    const t = { val: 86401000, result: '00:01' };
     expect(formatDisplay(t.val, true)).toBe(t.result);
   });
 
   it('test with -86401 (-24 hours and 1 second)', () => {
-    const t = { val: -86401, result: '00:01' };
+    const t = { val: -86401000, result: '00:01' };
     expect(formatDisplay(t.val, true)).toBe(t.result);
   });
 });

apps/client/src/common/utils/dateConfig.ts

@@ -6,19 +6,19 @@ export const timeFormatSeconds = 'HH:mm:ss';
 /**
  * another go at simpler string formatting (counters)
  * @description Converts seconds to string representing time
- * @param {number | null} seconds - time in seconds
+ * @param {number | null} milliseconds - time in seconds
  * @param {boolean} [hideZero] - whether to show hours in case its 00
  * @returns {string} String representing absolute time 00:12:02
  */
-export function formatDisplay(seconds: number | null, hideZero = false): string {
-  if (typeof seconds !== 'number') {
+export function formatDisplay(milliseconds: number | null, hideZero = false): string {
+  if (typeof milliseconds !== 'number') {
     return hideZero ? '00:00' : '00:00:00';
   }
 
   // add an extra 0 if necessary
   const format = (val: number) => `0${Math.floor(val)}`.slice(-2);
 
-  const s = Math.abs(seconds);
+  const s = Math.abs(millisToSeconds(milliseconds));
   const hours = Math.floor((s / 3600) % 24);
   const minutes = Math.floor((s % 3600) / 60);
 

apps/client/src/common/utils/timesManager.ts

@@ -1,4 +1,4 @@
-export type TimeEntryField = 'timeStart' |'timeEnd' | 'durationOverride';
+export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride';
 
 /**
  * @description Milliseconds in a day
@@ -14,7 +14,12 @@ export const calculateDuration = (start: number, end: number): number =>
 /**
  * @description Checks which field the value relates to
  */
-export const handleTimeEntry = (field: TimeEntryField, val: number, timeStart: number, timeEnd: number): {start: number, end: number, durationOverride: boolean} => {
+export const handleTimeEntry = (
+  field: TimeEntryField,
+  val: number,
+  timeStart: number,
+  timeEnd: number,
+): { start: number; end: number; durationOverride: boolean } => {
   let start = timeStart;
   let end = timeEnd;
   let durationOverride = false;
@@ -32,13 +37,18 @@ export const handleTimeEntry = (field: TimeEntryField, val: number, timeStart: n
 /**
  * @description Validates time entry
  */
-export const validateEntry = (field: TimeEntryField, value: number, timeStart: number, timeEnd: number): { value: boolean, catch: string } => {
-  const validate = { value: true, catch: '' };
+export const validateEntry = (
+  field: TimeEntryField,
+  value: number,
+  timeStart: number,
+  timeEnd: number,
+): { value: boolean; warnings: { start?: string; end?: string; duration?: string } } => {
+  const validate = { value: true, warnings: { start: '', end: '', duration: '' } };
 
   const { start, end } = handleTimeEntry(field, value, timeStart, timeEnd);
 
   if (end < start) {
-    validate.catch = 'Start time later than end time';
+    validate.warnings.start = 'Start time later than end time';
   }
 
   return validate;