cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-01 20:39:18 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

CRUD basics

Browse Source
This commit is contained in:
cv
2021-03-27 19:16:45 +01:00
parent 263e9e86b4
commit dd98867c7e
3 changed files with 139 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editors/list/EventList.jsx
+16 -3
View File
@@ -22,7 +22,7 @@ export default function EventList(props) {
// TODO: Replace this with global def somewhere // TODO: Replace this with global def somewhere
// TODO: handle random ids better // TODO: handle random ids better
let newEvent = { let newEvent = {
id: Math.floor(Math.random()*10000000), id: Math.floor(Math.random() * 10000000),
order: startPosition + 1, order: startPosition + 1,
title: '', title: '',
subtitle: '', subtitle: '',
@@ -47,7 +47,7 @@ export default function EventList(props) {
}; };
const deleteEvent = (position) => { const deleteEvent = (position) => {
// ?? SHould i reorder after? // ?? Should i reorder after?
// remove event from array // remove event from array
let filtered = events.filter((e) => e.id !== position); let filtered = events.filter((e) => e.id !== position);
@@ -56,6 +56,17 @@ export default function EventList(props) {
setEvents(filtered); setEvents(filtered);
}; };
const replaceAt = (array, index, value) => {
const ret = array.slice(0);
ret[index] = value;
return ret;
};
const updateData = (itemIndex, data) => {
const newEvents = replaceAt(events, itemIndex, data);
setEvents(newEvents);
};
return ( return (
<> <>
<div className={style.headerButtons}> <div className={style.headerButtons}>
@@ -73,13 +84,15 @@ export default function EventList(props) {
/> />
</div> </div>
<div className={style.eventContainer}> <div className={style.eventContainer}>
{sortByOrderVal(events).map((e) => ( {sortByOrderVal(events).map((e, index) => (
<EventListItem <EventListItem
key={e.id} key={e.id}
index={index}
data={e} data={e}
selected={e.id === selected} selected={e.id === selected}
createEvent={createEvent} createEvent={createEvent}
deleteEvent={deleteEvent} deleteEvent={deleteEvent}
updateData={updateData}
/> />
))} ))}
</div> </div>
src/features/editors/list/EventListItem.jsx
+120 -94
View File
@@ -12,7 +12,7 @@ import {
EditablePreview, EditablePreview,
EditableInput, EditableInput,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useState } from 'react'; import { useEffect, useState } from 'react';
import style from './List.module.css'; import style from './List.module.css';
export default function EventListItem(props) { export default function EventListItem(props) {
@@ -21,104 +21,130 @@ export default function EventListItem(props) {
const { data, selected, ...rest } = props; const { data, selected, ...rest } = props;
const updateValues = (field, value) => {
// validate field
if (field in data) {
// create object with new field
const newData = { ...data, [field]: value };
// request update in parent
props.updateData(props.index, newData);
} else {
console.log('field error', field);
}
};
return ( return (
<div className={selected ? style.eventRowActive : style.eventRow}> <form>
<div <div className={selected ? style.eventRowActive : style.eventRow}>
className={armed ? style.armActive : style.arm} <div
onClick={() => setArmed(!armed)} className={armed ? style.armActive : style.arm}
/> onClick={() => setArmed(!armed)}
<div className={style.time}> />
<Editable <div className={style.time}>
defaultValue={data.timerStart} <Editable
placeholder='--:--' onSubmit={(v) => updateValues('timerStart', v)}
style={{ textAlign: 'center' }} defaultValue={data.timerStart}
> placeholder='--:--'
<EditablePreview /> style={{ textAlign: 'center' }}
<EditableInput /> >
</Editable> <EditablePreview />
</div> <EditableInput type='time' min='00:00' max='23:59' />
<div className={style.time}> </Editable>
<Editable </div>
defaultValue={data.timerEnd} <div className={style.time}>
placeholder='--:--' <Editable
style={{ textAlign: 'center' }} onSubmit={(v) => updateValues('timerEnd', v)}
> defaultValue={data.timerEnd}
<EditablePreview /> placeholder='--:--'
<EditableInput /> style={{ textAlign: 'center' }}
</Editable> >
</div> <EditablePreview />
<div className={style.rowDetailed}> <EditableInput type='time' min='00:00' max='23:59' />
{more ? ( </Editable>
<div className={style.detailedContainer}> </div>
<div style={{ display: 'block' }}> <div className={style.rowDetailed}>
<span className={style.detailedTitleUnderlined}>Title</span> {more ? (
<Editable <div className={style.detailedContainer}>
defaultValue={data.title} <div style={{ display: 'block' }}>
placeholder='Add title' <span className={style.detailedTitleUnderlined}>Title</span>
style={{ display: 'inline' }} <Editable
> onSubmit={(v) => updateValues('title', v)}
<EditablePreview /> defaultValue={data.title}
<EditableInput style={{ width: '13em' }} /> placeholder='Add title'
</Editable> style={{ display: 'inline' }}
>
<EditablePreview />
<EditableInput style={{ width: '13em' }} />
</Editable>
</div>
<div style={{ display: 'block' }}>
<span className={style.detailedTitleUnderlined}>Subtitle</span>
<Editable
onSubmit={(v) => updateValues('subtitle', v)}
defaultValue={data.subtitle}
placeholder='Add subtitle'
style={{ display: 'inline' }}
>
<EditablePreview />
<EditableInput style={{ width: '13em', minWidth: '13em' }} />
</Editable>
</div>
<div style={{ display: 'block' }}>
<span className={style.detailedTitleUnderlined}>Presenter</span>
<Editable
onSubmit={(v) => updateValues('presenter', v)}
defaultValue={data.presenter}
placeholder='Add presenter name'
style={{ display: 'inline' }}
>
<EditablePreview style={{}} />
<EditableInput style={{ width: '13em' }} />
</Editable>
</div>
</div> </div>
<div style={{ display: 'block' }}> ) : (
<span className={style.detailedTitleUnderlined}>Subtitle</span> <div className={style.titleContainer}>
<Editable <div>
defaultValue={data.subtitle} <span className={style.detailedTitle}>Title</span>
placeholder='Add subtitle' <Editable
style={{ display: 'inline' }} onSubmit={(v) => updateValues('title', v)}
> defaultValue={data.title}
<EditablePreview /> placeholder='Add title'
<EditableInput style={{ width: '13em', minWidth: '13em' }} /> style={{ display: 'inline' }}
</Editable> id='title'
</div> >
<div style={{ display: 'block' }}> <EditablePreview />
<span className={style.detailedTitleUnderlined}>Presenter</span> <EditableInput style={{ width: '13em' }} />
<Editable </Editable>
defaultValue={data.presenter} </div>
placeholder='Add presenter name'
style={{ display: 'inline' }}
>
<EditablePreview style={{}} />
<EditableInput style={{ width: '13em' }} />
</Editable>
</div> </div>
)}
<div className={style.more} onClick={() => setMore(!more)}>
{more ? <ChevronUpIcon /> : <ChevronDownIcon />}
</div> </div>
) : ( </div>
<div className={style.titleContainer}> <div className={style.actionOverlay}>
<div> <IconButton
<span className={style.detailedTitle}>Title</span> size='xs'
<Editable icon={<MinusIcon />}
defaultValue={data.title} colorScheme='red'
placeholder='Add title' onClick={() => props.deleteEvent(data.id)}
style={{ display: 'inline' }} />
> <IconButton
<EditablePreview /> size='xs'
<EditableInput style={{ width: '13em' }} /> icon={<AddIcon />}
</Editable> colorScheme='blue'
</div> onClick={() => props.createEvent(data.order)}
</div> />
)} <IconButton size='xs' icon={<TimeIcon />} colorScheme='yellow' />
<div className={style.more} onClick={() => setMore(!more)}> <IconButton
{more ? <ChevronUpIcon /> : <ChevronDownIcon />} size='xs'
icon={<NotAllowedIcon />}
colorScheme='purple'
/>
</div> </div>
</div> </div>
<div className={style.actionOverlay}> </form>
<IconButton
size='xs'
icon={<MinusIcon />}
colorScheme='red'
onClick={() => props.deleteEvent(data.id)}
/>
<IconButton
size='xs'
icon={<AddIcon />}
colorScheme='blue'
onClick={() => props.createEvent(data.order)}
/>
<IconButton size='xs' icon={<TimeIcon />} colorScheme='yellow' />
<IconButton size='xs' icon={<NotAllowedIcon />} colorScheme='purple' />
</div>
</div>
); );
} }
src/features/editors/list/List.module.css
+3 -2
View File
@@ -24,8 +24,9 @@
gap: 0.5em; gap: 0.5em;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
align-items: center; align-items: baseline;
border-radius: 8px; border-radius: 8px;
font-size: 15px;
} }
.eventRow { .eventRow {
@@ -69,7 +70,7 @@
} }
.time { .time {
width: 4em; width: 5em;
height: fit-content; height: fit-content;
} }