mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-15 08:09:01 +00:00
feat: added cancel button and delete button to thread form dialog
This commit is contained in:
parent
b85573eb1a
commit
9493979e4f
2 changed files with 75 additions and 20 deletions
|
@ -6,16 +6,25 @@ import ThreadList from "../ThreadList";
|
|||
import AddIcon from '@material-ui/icons/Add';
|
||||
import ThreadFormDialog from "../ThreadFormDialog";
|
||||
import Thread, {ThreadStatus} from "../../api/entities/Thread";
|
||||
import {TweetStatus} from "../../api/entities/Tweet";
|
||||
|
||||
export type AccountCardProps = {
|
||||
account: Account
|
||||
}
|
||||
|
||||
const emptyThread = () => ({
|
||||
const emptyThread = (): Thread => ({
|
||||
id: "",
|
||||
scheduled_for: new Date(),
|
||||
status: ThreadStatus.SCHEDULED,
|
||||
tweets: [],
|
||||
tweets: [
|
||||
{
|
||||
id: "",
|
||||
text: "",
|
||||
status: TweetStatus.SCHEDULED,
|
||||
tweet_id: null,
|
||||
error: null,
|
||||
}
|
||||
],
|
||||
error: null,
|
||||
})
|
||||
|
||||
|
@ -61,6 +70,10 @@ const AccountCard: FunctionComponent<AccountCardProps> = ({account}) => {
|
|||
|
||||
setEditThread(null)
|
||||
}}
|
||||
onCancel={() => {
|
||||
// TODO show confirmation
|
||||
setEditThread(null)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -9,22 +9,35 @@ import {
|
|||
IconButton,
|
||||
TextField
|
||||
} from "@material-ui/core";
|
||||
import DeleteIcon from '@material-ui/icons/Delete';
|
||||
import Account from "../../api/entities/Account";
|
||||
import Thread from "../../api/entities/Thread";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import {TweetStatus} from "../../api/entities/Tweet";
|
||||
import CustomDate from "../../utils/CustomDate";
|
||||
import {Alert} from "@material-ui/lab";
|
||||
|
||||
export type ThreadFormProps = {
|
||||
open: boolean
|
||||
account: Account
|
||||
initial: Thread
|
||||
onSubmit: (thread: Thread) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSubmit}) => {
|
||||
const Index: FunctionComponent<ThreadFormProps> = (
|
||||
{
|
||||
open,
|
||||
account,
|
||||
initial,
|
||||
onSubmit,
|
||||
onCancel
|
||||
}
|
||||
) => {
|
||||
const [thread, setThread] = useState<Thread>(initial)
|
||||
|
||||
const [error, setError] = useState<string|null>(null)
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle title={"Thread"}/>
|
||||
|
@ -51,23 +64,40 @@ const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSu
|
|||
</Grid>
|
||||
{
|
||||
thread.tweets.map((tweet, index) => (
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
label={"Tweet " + (index + 1)}
|
||||
multiline
|
||||
rows={3}
|
||||
value={tweet.text}
|
||||
onChange={event => {
|
||||
thread.tweets[index].text = event.target.value
|
||||
setThread({
|
||||
...thread
|
||||
})
|
||||
}}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<>
|
||||
<Grid item xs={11}>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
label={"Tweet " + (index + 1)}
|
||||
multiline
|
||||
rows={3}
|
||||
value={tweet.text}
|
||||
onChange={event => {
|
||||
thread.tweets[index].text = event.target.value
|
||||
setThread({
|
||||
...thread
|
||||
})
|
||||
}}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={1}>
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
color={"secondary"}
|
||||
disabled={thread.tweets.length <= 1}
|
||||
onClick={() => {
|
||||
thread.tweets.splice(index, 1)
|
||||
setThread({
|
||||
...thread
|
||||
})
|
||||
}}
|
||||
>
|
||||
<DeleteIcon fontSize="medium" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</>
|
||||
))
|
||||
}
|
||||
<Grid item xs={12}>
|
||||
|
@ -87,9 +117,21 @@ const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSu
|
|||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{ error && <Alert severity="error">{error}</Alert> }
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => {
|
||||
// TODO show confirmation dialog
|
||||
onCancel()
|
||||
}} color="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => {
|
||||
if (!thread.tweets.every(t => t.text.trim().length != 0)) {
|
||||
setError("Empty tweets are not allowed!")
|
||||
return
|
||||
}
|
||||
setError(null)
|
||||
onSubmit(thread)
|
||||
}} color="primary">
|
||||
Save changes
|
||||
|
|
Loading…
Reference in a new issue