91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
'use client'
|
|
|
|
import { useContext, useEffect } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import dayjs from 'dayjs'
|
|
import { GlobalDataContext } from '@/app/GlobalDataProvider'
|
|
// import { ManagementContext } from '@/app/management/ManagementProvider'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
export default function StuffHeader() {
|
|
const { getMessage } = useMessage()
|
|
|
|
const { swalFire } = useSwal()
|
|
const { managementState } = useContext(GlobalDataContext)
|
|
|
|
const copyObjectNo = async (objectNo) => {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
await navigator.clipboard
|
|
.writeText(objectNo)
|
|
.then(() => {
|
|
swalFire({
|
|
text: getMessage('stuff.detail.header.successCopy'),
|
|
type: 'alert',
|
|
})
|
|
})
|
|
.catch(() => {
|
|
alert(getMessage('stuff.detail.header.failCopy'))
|
|
})
|
|
} else {
|
|
// Use the 'out of viewport hidden text area' trick
|
|
const textArea = document.createElement('textArea')
|
|
textArea.value = objectNo
|
|
|
|
// Move textarea out of the viewport so it's not visible
|
|
textArea.style.position = 'absolute'
|
|
textArea.style.left = '-999999px'
|
|
|
|
document.body.prepend(textArea)
|
|
textArea.select()
|
|
|
|
try {
|
|
document.execCommand('copy')
|
|
swalFire({
|
|
text: getMessage('stuff.detail.header.successCopy'),
|
|
type: 'alert',
|
|
})
|
|
} catch (err) {
|
|
alert(getMessage('stuff.detail.header.failCopy'))
|
|
} finally {
|
|
textArea.remove()
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="infomation-box-wrap">
|
|
<div className="sub-table-box">
|
|
<div className="info-title">{getMessage('stuff.detail.header.objectNo')}</div>
|
|
<div className="info-inner">
|
|
{managementState?.objectNo}{' '}
|
|
<button
|
|
className="copy-ico"
|
|
onClick={() => {
|
|
copyObjectNo(managementState?.objectNo)
|
|
}}
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div className="sub-table-box">
|
|
<div className="info-title">{getMessage('stuff.detail.header.specificationConfirmDate')}</div>
|
|
<div className="info-inner">
|
|
{managementState?.specificationConfirmDate ? `${dayjs(managementState.specificationConfirmDate).format('YYYY.MM.DD')}` : ''}
|
|
</div>
|
|
</div>
|
|
<div className="sub-table-box">
|
|
<div className="info-title">{getMessage('stuff.detail.header.lastEditDatetime')}</div>
|
|
<div className="info-inner">
|
|
{managementState?.lastEditDatetime ? `${dayjs(managementState.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}` : ''}{' '}
|
|
{managementState?.lastEditUserName ? `(${managementState.lastEditUserName})` : null}
|
|
</div>
|
|
</div>
|
|
<div className="sub-table-box">
|
|
<div className="info-title">{getMessage('stuff.detail.header.createDatetime')}</div>
|
|
<div className="info-inner">
|
|
{managementState?.createDatetime ? `${dayjs(managementState.lastEditDatetime).format('YYYY.MM.DD')}` : ''}{' '}
|
|
{managementState?.createUserName ? `(${managementState.createUserName})` : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|