Alpha 5 (#1741)

* refactor: align header columns * refactor: improve scrollbar visibility * refactor: center align table elements * refactor: make param elements stateful * fix: issue with collapsed elements not loosing value * fix: prevent search params containing multiple alias references * fix: the issue where a file disappears if it is both migrated and recovered in the same load operation (#1744) * refactor: disable group action for elements in groups * refactor: move context menu items into the event element (#1747) * feat: sheet import new features for v4 (#1730) * import milestone * fixup! import milestone * test: milestone import * add entries to group stop on new group or on group-end type * fixup! add entries to group * cleanup * add event target duration * link start if undefined * add skip import type * extract some to the excel paresing functions * tweaks to presentation * move file --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * fix: notify runtimeStore of events bieng groupd * fix: improve authentication and stage detection in demo * chore: ship logo with project * fix: client is referenced by name * fix: prevent reflow in event editor * fix: stale render on selected event due to ref mismatch * Create/Load/Delete multiple rundowns (#1696) * refactor: restore last loaded rundown * refactor: initialise rundown in ProjectService * feat: allow switching rundowns ensure on coordination between the db object and the working object server provide list of rundowns implement switch in the UI implement delete implement new rundown button * fix: render order for floating button * refactor: appropriate names to service * refactor: rundown endpoints * refactor: save last loaded rundown ID * refactor: rundown management UI * refactor: emit refetch all on project load --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * feat: recover single event subscription * fixup! feat: sheet import new features for v4 (#1730) * fix: prevent dropping a group inside another * fixup! refactor: move context menu items into the event element (#1747) * fix: prevent stale references to custom fields * fix: propagate updates to all rundowns * refactor: client rundown metadata (#1728) * generate metadata in the hook * move test * ensure there is always a last element * use for-loop * update metadata in useEfect * fully extract metadata generation * use direct assignment * cleanup --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * refactor: small imporvement and tests for coerce functions (#1752) * refactor: small imporvement and tests for coerce functions add test `coerceString` add test `coerceBoolean` add test `coerceColour` * remove old todo * fix: consistent quick add behaviour * refactor: create flat rundown with metadata * fix: show add buttons on top * feat: allow editing milestones * refactor: style tweaks to rundown elements refactor: milestones are full width refactor: cuesheet header alignment fix: editor styling in cuesheet * refactor: virtualise table * refactor: improve overscan (#1758) * bump version to 4.0.0-alpha.5 --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>
2026-09-10 16:49:41 +00:00 · 2025-09-03 15:50:20 +02:00
parent 3c41b40c5f
commit ae15f3cdc5
102 changed files with 2950 additions and 2104 deletions
@@ -1,18 +1,59 @@
+import { useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
 import { useDisclosure } from '@mantine/hooks';

+import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Dialog from '../../../../common/components/dialog/Dialog';
-import { useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
+import Tag from '../../../../common/components/tag/Tag';
+import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';

+import { ManageRundownForm } from './ManageRundownForm';
+
 import style from './ManagePanel.module.scss';

 export default function ManageRundowns() {
  const { data } = useProjectRundowns();
-  const [deleteOpen, deleteHandlers] = useDisclosure();
-  const [loadOpen, loadHandlers] = useDisclosure();
+  const { remove, load } = useMutateProjectRundowns();
+  const [isOpenDelete, deleteHandlers] = useDisclosure();
+  const [isOpenLoad, loadHandlers] = useDisclosure();
+  const [isNewLoad, newHandlers] = useDisclosure();
+  const [targetRundown, setTargetRundown] = useState('');
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const openLoad = (id: string) => {
+    setActionError(null);
+    setTargetRundown(id);
+    loadHandlers.open();
+  };
+
+  const openDelete = (id: string) => {
+    setActionError(null);
+    setTargetRundown(id);
+    deleteHandlers.open();
+  };
+
+  const submitRundownLoad = async () => {
+    try {
+      await load(targetRundown);
+    } catch (error) {
+      setActionError(`Failed to load rundown. ${maybeAxiosError(error)}`);
+    } finally {
+      loadHandlers.close();
+    }
+  };
+
+  const submitRundownDelete = async () => {
+    try {
+      await remove(targetRundown);
+    } catch (error) {
+      setActionError(`Failed to delete rundown. ${maybeAxiosError(error)}`);
+    } finally {
+      deleteHandlers.close();
+    }
+  };

  return (
    <>
@@ -21,49 +62,60 @@ export default function ManageRundowns() {
          <Panel.SubHeader>
            Manage project rundowns
            <Panel.InlineElements>
-              <Button onClick={() => undefined} disabled>
+              <Button
+                onClick={() => {
+                  setActionError(null);
+                  newHandlers.open();
+                }}
+              >
                New <IoAdd />
              </Button>
            </Panel.InlineElements>
          </Panel.SubHeader>
          <Panel.Divider />
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th># Entries</th>
-                <th style={{ width: '100%' }}>Title</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {data.rundowns.map((rundown) => {
-                const isLoaded = data.loaded === rundown.id;
-                return (
-                  <tr key={rundown.id} className={cx([isLoaded && style.current])}>
-                    <td>{rundown.numEntries}</td>
-                    <td>{`${rundown.title}${isLoaded && ' (loaded)'}`}</td>
-                    <Panel.InlineElements as='td'>
-                      <Button size='small' onClick={() => loadHandlers.open()} disabled={isLoaded}>
-                        Load
-                      </Button>
-                      <Button
-                        size='small'
-                        variant='subtle-destructive'
-                        onClick={() => deleteHandlers.open()}
-                        disabled={isLoaded}
-                      >
-                        Delete
-                      </Button>
-                    </Panel.InlineElements>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </Panel.Table>
+          <Panel.Section>
+            {isNewLoad && <ManageRundownForm onClose={newHandlers.close} />}
+            {actionError && <Panel.Error>{actionError}</Panel.Error>}
+            <Panel.Table>
+              <thead>
+                <tr>
+                  <th># Entries</th>
+                  <th style={{ width: '100%' }}>Title</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {data?.rundowns?.map(({ id, numEntries, title }) => {
+                  const isLoaded = data.loaded === id;
+                  return (
+                    <tr key={id} className={cx([isLoaded && style.current])}>
+                      <td>{numEntries}</td>
+                      <td>
+                        {title} {isLoaded && <Tag>Loaded</Tag>}
+                      </td>
+                      <Panel.InlineElements as='td'>
+                        <Button size='small' onClick={() => openLoad(id)} disabled={isLoaded}>
+                          Load
+                        </Button>
+                        <Button
+                          size='small'
+                          variant='subtle-destructive'
+                          onClick={() => openDelete(id)}
+                          disabled={isLoaded}
+                        >
+                          Delete
+                        </Button>
+                      </Panel.InlineElements>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </Panel.Table>
+          </Panel.Section>
        </Panel.Card>
      </Panel.Section>
      <Dialog
-        isOpen={deleteOpen}
+        isOpen={isOpenDelete}
        onClose={deleteHandlers.close}
        title='Load rundown'
        showBackdrop
@@ -78,16 +130,16 @@ export default function ManageRundowns() {
            <Button size='large' onClick={deleteHandlers.close}>
              Cancel
            </Button>
-            <Button variant='destructive' size='large' onClick={() => undefined}>
+            <Button variant='destructive' size='large' onClick={submitRundownDelete}>
              Delete rundown
            </Button>
          </>
        }
      />
      <Dialog
-        isOpen={loadOpen}
+        isOpen={isOpenLoad}
        onClose={loadHandlers.close}
-        title='Delete rundown'
+        title='Load rundown'
        showBackdrop
        showCloseButton
        bodyElements={
@@ -100,7 +152,7 @@ export default function ManageRundowns() {
            <Button size='large' onClick={loadHandlers.close}>
              Cancel
            </Button>
-            <Button variant='primary' size='large' onClick={() => undefined}>
+            <Button variant='primary' size='large' onClick={submitRundownLoad}>
              Load rundown
            </Button>
          </>