91 lines
3.1 KiB
JavaScript

'use client'
import { useContext } from 'react'
import { useMessage } from '@/hooks/useMessage'
import dayjs from 'dayjs'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
// import { ManagementContext } from '@/app/management/ManagementProvider'
export default function StuffHeader() {
const { getMessage } = useMessage()
const { managementState } = useContext(GlobalDataContext)
//물건번호 복사
// const copyObjectNo = async (objectNo) => {
// await navigator.clipboard.writeText(objectNo)
// alert(getMessage('stuff.detail.header.successCopy'))
// try {
// } catch (error) {
// alert(getMessage('stuff.detail.header.failCopy'))
// }
// }
const copyObjectNo = async (objectNo) => {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard
.writeText(objectNo)
.then(() => {
alert(getMessage('stuff.detail.header.successCopy'))
})
.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')
alert(getMessage('stuff.detail.header.successCopy'))
} 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}</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>
)
}