feat: add flag property

This commit is contained in:
Carlos Valente
2025-07-13 12:43:33 +02:00
parent e9dda817e5
commit 637454f73d
22 changed files with 98 additions and 23 deletions
@@ -72,6 +72,13 @@
row-gap: 1rem;
}
.splitThree {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 1rem;
row-gap: 1rem;
}
.tooltipIcon {
color: $blue-500;
display: inline-block;
@@ -59,10 +59,10 @@ export default function EventEditor({ event }: EventEditorProps) {
key={`${event.id}-titles`}
eventId={event.id}
cue={event.cue}
flag={event.flag}
title={event.title}
note={event.note}
colour={event.colour}
handleSubmit={handleSubmit}
/>
<div className={style.column}>
<Editor.Title>
@@ -7,7 +7,7 @@ interface EventEditorImageProps {
export default function EventEditorImage({ src }: EventEditorImageProps) {
return (
<div className={style.imageContainer}>
<img loading='lazy' src={src} />
{Boolean(src) && <img loading='lazy' src={src} />}
<div className={style.imageOverlay} />
</div>
);
@@ -4,7 +4,8 @@ import { sanitiseCue } from 'ontime-utils';
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
import Input from '../../../../common/components/input/input/Input';
import { type EventEditorUpdateFields } from '../EventEditor';
import Switch from '../../../../common/components/switch/Switch';
import { useEntryActions } from '../../../../common/hooks/useEntryAction';
import EventTextArea from './EventTextArea';
import EntryEditorTextInput from './EventTextInput';
@@ -14,22 +15,32 @@ import style from '../EntryEditor.module.scss';
interface EventEditorTitlesProps {
eventId: string;
cue: string;
flag: boolean;
title: string;
note: string;
colour: string;
handleSubmit: (field: EventEditorUpdateFields, value: string) => void;
}
export default memo(EventEditorTitles);
function EventEditorTitles({ eventId, cue, title, note, colour, handleSubmit }: EventEditorTitlesProps) {
function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEditorTitlesProps) {
const { updateEntry } = useEntryActions();
const cueSubmitHandler = (_field: string, newValue: string) => {
handleSubmit('cue', sanitiseCue(newValue));
updateEntry({ id: eventId, cue: sanitiseCue(newValue) });
};
const flagSubmitHandler = (newValue: boolean) => {
updateEntry({ id: eventId, flag: newValue });
};
const textSubmitHandler = (field: string, newValue: string) => {
updateEntry({ id: eventId, [field]: newValue });
};
return (
<div className={style.column}>
<Editor.Title>Event Data</Editor.Title>
<div className={style.splitTwo}>
<div className={style.splitThree}>
<div>
<Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
<Input id='eventId' data-testid='input-textfield' value={eventId} readOnly fluid />
@@ -41,13 +52,20 @@ function EventEditorTitles({ eventId, cue, title, note, colour, handleSubmit }:
submitHandler={cueSubmitHandler}
maxLength={10}
/>
<div>
<Editor.Label htmlFor='flag'>Flag</Editor.Label>
<Editor.Label className={style.switchLabel}>
<Switch id='flag' checked={flag} onCheckedChange={flagSubmitHandler} />
{flag ? 'On' : 'Off'}
</Editor.Label>
</div>
</div>
<div>
<Editor.Label>Colour</Editor.Label>
<SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
<SwatchSelect name='colour' value={colour} handleChange={textSubmitHandler} />
</div>
<EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
<EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
<EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={textSubmitHandler} />
<EventTextArea field='note' label='Note' initialValue={note} submitHandler={textSubmitHandler} />
</div>
);
}