style: cuesheet block (#355)

* style: cuesheet show block title

* style: cuesheet show full delay string

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

@@ -462,10 +462,10 @@ describe('millisToDelayString()', () => {
   });
   describe('converts values in seconds', () => {
     it(`shows a simple string with value in seconds`, () => {
-      expect(millisToDelayString(10000)).toBe('+10sec');
+      expect(millisToDelayString(10000)).toBe('+10 sec');
     });
     it(`... and its negative counterpart`, () => {
-      expect(millisToDelayString(-10000)).toBe('-10sec');
+      expect(millisToDelayString(-10000)).toBe('-10 sec');
     });
 
     const underAMinute = [1, 500, 1000, 6000, 55000, 59999];
@@ -479,10 +479,10 @@ describe('millisToDelayString()', () => {
 
   describe('converts values in minutes', () => {
     it(`shows a simple string with value in minutes`, () => {
-      expect(millisToDelayString(720000)).toBe('+12min');
+      expect(millisToDelayString(720000)).toBe('+12 min');
     });
     it(`... and its negative counterpart`, () => {
-      expect(millisToDelayString(-720000)).toBe('-12min');
+      expect(millisToDelayString(-720000)).toBe('-12 min');
     });
     it(`shows a simple string with value in minutes and seconds`, () => {
       expect(millisToDelayString(630000)).toBe('+00:10:30');

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

@@ -233,9 +233,9 @@ export function millisToDelayString(millis: number | null): undefined | string |
   const absMillis = Math.abs(millis);
 
   if (absMillis < mtm) {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')}sec`;
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')} sec`;
   } else if (absMillis < mth && absMillis % mtm === 0) {
-    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')}min`;
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')} min`;
   } else {
     return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
   }

apps/client/src/features/table/tableRows/BlockRow.jsx

@@ -6,7 +6,7 @@ export default function BlockRow(props) {
   const { row } = props;
   return (
     <tr {...row.getRowProps()}>
-      <td className={style.blockCell}>Delay Block</td>
+      <td className={style.blockCell}>{row.original?.title || 'Block'}</td>
     </tr>
   );
 }

apps/client/src/features/table/tableRows/DelayRow.jsx

@@ -1,18 +1,17 @@
 import PropTypes from 'prop-types';
 
-import { millisToMinutes } from '../../../common/utils/dateConfig';
+import { millisToDelayString } from '../../../common/utils/dateConfig';
 
 import style from '../Table.module.scss';
 
 export default function DelayRow(props) {
   const { row } = props;
   const delayVal = row.original.duration;
-  const minutesDelayed = Math.abs(millisToMinutes(delayVal));
-  const labelText = `${minutesDelayed} minutes ${delayVal >= 0 ? 'delayed' : 'ahead'}`;
+  const delayTime = delayVal !== 0 ? millisToDelayString(delayVal) : null;
 
   return (
     <tr {...row.getRowProps()}>
-      <td className={style.delayCell}>{labelText}</td>
+      <td className={style.delayCell}>{delayTime}</td>
     </tr>
   );
 }
@@ -20,4 +19,3 @@ export default function DelayRow(props) {
 DelayRow.propTypes = {
   row: PropTypes.object.isRequired,
 };
-

e2e/tests/002-upload-showfile.spec.ts

@@ -17,10 +17,10 @@ test('test', async ({ page }) => {
   await page.getByTestId('delay-input').click();
   await page
     .locator('div')
-    .filter({ hasText: /^SED\+10minNew start: 10:10:00$/ })
+    .filter({ hasText: /^SED\+10 minNew start: 10:10:00$/ })
     .getByPlaceholder('Start')
     .click();
-  await page.getByText('+10minNew start: 10:10:00').click();
+  await page.getByText('+10 minNew start: 10:10:00').click();
   await page.getByText('Second test event').click();
   await page.getByText('Lunch').click();
   await page.getByText('Third test event').click();