Browse Source

#101 オリジナルの作成日時(より前)の自動設定

pull/117/head
みてるぞ 3 weeks ago
parent
commit
c186318584
4 changed files with 67 additions and 40 deletions
  1. +6
    -18
      frontend/src/components/PostEditForm.tsx
  2. +49
    -0
      frontend/src/components/PostOriginalCreatedTimeField.tsx
  3. +6
    -4
      frontend/src/components/common/DateTimeField.tsx
  4. +6
    -18
      frontend/src/pages/posts/PostNewPage.tsx

+ 6
- 18
frontend/src/components/PostEditForm.tsx View File

@@ -3,7 +3,7 @@ import toCamel from 'camelcase-keys'
import { useState } from 'react'

import PostFormTagsArea from '@/components/PostFormTagsArea'
import DateTimeField from '@/components/common/DateTimeField'
import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
import Label from '@/components/common/Label'
import { Button } from '@/components/ui/button'
import { API_BASE_URL } from '@/config'
@@ -58,23 +58,11 @@ export default (({ post, onSave }: Props) => {
<PostFormTagsArea tags={tags} setTags={setTags}/>

{/* オリジナルの作成日時 */}
<div>
<Label>オリジナルの作成日時</Label>
<div className="my-1">
<DateTimeField
className="mr-2"
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}/>
以降
</div>
<div className="my-1">
<DateTimeField
className="mr-2"
value={originalCreatedBefore ?? undefined}
onChange={setOriginalCreatedBefore}/>
より前
</div>
</div>
<PostOriginalCreatedTimeField
originalCreatedFrom={originalCreatedFrom}
setOriginalCreatedFrom={setOriginalCreatedFrom}
originalCreatedBefore={originalCreatedBefore}
setOriginalCreatedBefore={setOriginalCreatedBefore}/>

{/* 送信 */}
<Button onClick={handleSubmit}


+ 49
- 0
frontend/src/components/PostOriginalCreatedTimeField.tsx View File

@@ -0,0 +1,49 @@
import DateTimeField from '@/components/common/DateTimeField'
import Label from '@/components/common/Label'

import type { FC } from 'react'

type Props = {
originalCreatedFrom: string | null
setOriginalCreatedFrom: (x: string | null) => void
originalCreatedBefore: string | null
setOriginalCreatedBefore: (x: string | null) => void }


export default (({ originalCreatedFrom,
setOriginalCreatedFrom,
originalCreatedBefore,
setOriginalCreatedBefore }: Props) => (
<div>
<Label>オリジナルの作成日時</Label>
<div className="my-1">
<DateTimeField
className="mr-2"
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}
onBlur={ev => {
const v = ev.target.value
if (!(v))
return
const d = new Date (v)
if (d.getSeconds () === 0)
{
if (d.getMinutes () === 0 && d.getHours () === 0)
d.setDate (d.getDate () + 1)
else
d.setMinutes (d.getMinutes () + 1)
}
else
d.setSeconds (d.getSeconds () + 1)
setOriginalCreatedBefore (d.toISOString ())
}}/>
以降
</div>
<div className="my-1">
<DateTimeField
className="mr-2"
value={originalCreatedBefore ?? undefined}
onChange={setOriginalCreatedBefore}/>
より前
</div>
</div>)) satisfies FC<Props>

+ 6
- 4
frontend/src/components/common/DateTimeField.tsx View File

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'

import { cn } from '@/lib/utils'

import type { FC } from 'react'
import type { FC, FocusEvent } from 'react'


const pad = (n: number) => n.toString ().padStart (2, '0')
@@ -22,10 +22,11 @@ const toDateTimeLocalValue = (d: Date) => {
type Props = {
value?: string
onChange?: (isoUTC: string | null) => void
className?: string }
className?: string
onBlur?: (ev: FocusEvent<HTMLInputElement>) => void }


export default (({ value, onChange, className }: Props) => {
export default (({ value, onChange, className, onBlur }: Props) => {
const [local, setLocal] = useState ('')

useEffect (() => {
@@ -42,5 +43,6 @@ export default (({ value, onChange, className }: Props) => {
const v = ev.target.value
setLocal (v)
onChange?.(v ? (new Date (v)).toISOString () : null)
}}/>)
}}
onBlur={onBlur}/>)
}) satisfies FC<Props>

+ 6
- 18
frontend/src/pages/posts/PostNewPage.tsx View File

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet-async'
import { useNavigate } from 'react-router-dom'

import PostFormTagsArea from '@/components/PostFormTagsArea'
import DateTimeField from '@/components/common/DateTimeField'
import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
import Form from '@/components/common/Form'
import Label from '@/components/common/Label'
import PageTitle from '@/components/common/PageTitle'
@@ -189,23 +189,11 @@ export default (({ user }: Props) => {
<PostFormTagsArea tags={tags} setTags={setTags}/>

{/* オリジナルの作成日時 */}
<div>
<Label>オリジナルの作成日時</Label>
<div className="my-1">
<DateTimeField
className="mr-2"
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}/>
以降
</div>
<div className="my-1">
<DateTimeField
className="mr-2"
value={originalCreatedBefore ?? undefined}
onChange={setOriginalCreatedBefore}/>
より前
</div>
</div>
<PostOriginalCreatedTimeField
originalCreatedFrom={originalCreatedFrom}
setOriginalCreatedFrom={setOriginalCreatedFrom}
originalCreatedBefore={originalCreatedBefore}
setOriginalCreatedBefore={setOriginalCreatedBefore}/>

{/* 送信 */}
<Button onClick={handleSubmit}


Loading…
Cancel
Save