207 lines
8.8 KiB
TypeScript
207 lines
8.8 KiB
TypeScript
'use client'
|
|
|
|
import React, { useRef } from 'react'
|
|
import { useProject } from '../../../context/Project/provider'
|
|
import { XMarkIcon } from '@heroicons/react/24/outline'
|
|
import classNames from '../../../utils/classNames'
|
|
import onEnterHandler from '../../../utils/onEnterHandler'
|
|
import AreaLineItem from './AreaLineItem'
|
|
import { useSidebar } from './provider'
|
|
import { SidebarDocument } from './types'
|
|
|
|
const DocumentLineItem = (props: { document: SidebarDocument, groupId: string, index: number }) => {
|
|
const {
|
|
getSelectedDocument,
|
|
requestUpdateDocument,
|
|
requestDeleteDocumentById,
|
|
} = useProject()
|
|
|
|
const {
|
|
selectedDocumentId,
|
|
setSelectedDocumentId,
|
|
isEditDocumentNameInputShowing,
|
|
setIsAddNewDocumentInputShowing,
|
|
setSelectedGroupId,
|
|
setIsAddNewGroupInputShowing,
|
|
setIsEditDocumentNameInputShowing,
|
|
} = useSidebar()
|
|
|
|
const editDocumentNameTextInput = useRef<HTMLInputElement>(null)
|
|
|
|
const onDocumentClickHandler = (itemId: string) => {
|
|
setSelectedDocumentId(itemId)
|
|
setSelectedGroupId(props.groupId)
|
|
setIsAddNewDocumentInputShowing(false)
|
|
setIsAddNewGroupInputShowing(false)
|
|
}
|
|
|
|
const onDocumentDoubleClickHandler = (docuemntId: string) => {
|
|
setIsEditDocumentNameInputShowing(true)
|
|
}
|
|
|
|
const onDocumentInputBlur = () => {
|
|
setIsEditDocumentNameInputShowing(false)
|
|
}
|
|
|
|
const onConfirmDocumentNameChangeHandler = async (documentName: string) => {
|
|
const documentToUpdate = { ...getSelectedDocument() }
|
|
if (documentToUpdate) {
|
|
documentToUpdate.name = documentName
|
|
requestUpdateDocument(documentToUpdate)
|
|
.then(response => console.log('onConfirmDocumentNameChangeHandler response: ', response))
|
|
.catch(console.error)
|
|
}
|
|
setIsEditDocumentNameInputShowing(false)
|
|
}
|
|
|
|
return (
|
|
<li className='p-0 m-0' key={props.document.id}>
|
|
{!props.document.areas.length
|
|
?
|
|
<div
|
|
onClick={() => onDocumentClickHandler(props.document.id)}
|
|
onDoubleClick={() => onDocumentDoubleClickHandler(props.document.id)}
|
|
className={classNames(
|
|
props.document.id === selectedDocumentId
|
|
? 'bg-gray-900 text-white'
|
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
|
'group items-center py-2 text-base font-medium rounded-b-md pl-10',
|
|
props.index !== 0 ? 'rounded-t-md' : '',
|
|
)}>
|
|
{selectedDocumentId === props.document.id && isEditDocumentNameInputShowing
|
|
? <input
|
|
type="text"
|
|
name="documentName"
|
|
id="documentName"
|
|
autoFocus
|
|
className="h-8 w-[calc(100%-18px)] text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 inline-block rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
defaultValue={props.document.name}
|
|
onBlur={onDocumentInputBlur}
|
|
onKeyDown={(event) => {
|
|
onEnterHandler(event,
|
|
() => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
|
|
}}
|
|
ref={editDocumentNameTextInput}
|
|
/>
|
|
: <span className='flex justify-between items-center'>
|
|
<a
|
|
role='button'
|
|
className={classNames(
|
|
props.document.id === selectedDocumentId
|
|
? 'bg-gray-900 text-white'
|
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
|
'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
|
|
)}
|
|
>
|
|
{props.document.name}
|
|
</a>
|
|
|
|
<XMarkIcon
|
|
className='w-5 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
|
|
onClick={() => requestDeleteDocumentById(props.document.id)} />
|
|
</span>
|
|
}
|
|
</div>
|
|
: <details>
|
|
<summary
|
|
onClick={() => onDocumentClickHandler(props.document.id)}
|
|
onDoubleClick={() => onDocumentDoubleClickHandler(props.document.id)}
|
|
className={classNames(
|
|
props.document.id === selectedDocumentId
|
|
? 'bg-gray-900 text-white'
|
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
|
'group items-center py-2 text-base font-medium rounded-b-md pl-6',
|
|
props.index !== 0 ? 'rounded-t-md' : '',
|
|
|
|
)}>
|
|
{selectedDocumentId === props.document.id && isEditDocumentNameInputShowing
|
|
? <input
|
|
type="text"
|
|
name="documentName"
|
|
id="documentName"
|
|
autoFocus
|
|
className="h-8 w-[calc(100%-18px)] text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 inline-block rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
defaultValue={props.document.name}
|
|
onBlur={onDocumentInputBlur}
|
|
onKeyDown={(event) => {
|
|
onEnterHandler(event,
|
|
() => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
|
|
}}
|
|
ref={editDocumentNameTextInput}
|
|
/>
|
|
: <a
|
|
role='button'
|
|
className={classNames(
|
|
props.document.id === selectedDocumentId
|
|
? 'bg-gray-900 text-white'
|
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
|
'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
|
|
)}
|
|
>
|
|
{props.document.name}
|
|
</a>
|
|
}
|
|
|
|
<XMarkIcon
|
|
className='w-6 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
|
|
onClick={() => requestDeleteDocumentById(props.document.id)} />
|
|
</summary>
|
|
<ul>
|
|
{props.document.areas.map((a, index) => (
|
|
<AreaLineItem key={a.id} area={a} index={index} documentId={props.document.id} />
|
|
// <li key={a.id}>
|
|
// {selectedAreaId === a.id && isEditAreaNameInputShowing
|
|
// ? <input
|
|
// type="text"
|
|
// name="areaName"
|
|
// id="areaName"
|
|
// autoFocus
|
|
// className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
// placeholder={a.name || `Area ${index}`}
|
|
// onBlur={onAreaInputBlur}
|
|
// onKeyDown={(event) => {
|
|
// onEnterHandler(event,
|
|
// () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
|
|
// }}
|
|
// ref={editAreaNameTextInput}
|
|
// />
|
|
// : <div
|
|
// draggable
|
|
// onDragOver={() => onAreaDragOver(a.id)}
|
|
// onDragStart={() => onAreaDragStart(a.id)}
|
|
// onDragEnd={() => onAreaDropEnd(a.id)}
|
|
// className={classNames('flex justify-between items-center cursor-pointer',
|
|
// selectedAreaId === a.id ? 'bg-indigo-500 text-gray-200' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
|
// dragOverAreaId === a.id ? 'bg-gray-300 text-gray-700' : '',
|
|
// selectedAreaId === a.id && dragOverAreaId === a.id ? 'bg-indigo-300' : '',
|
|
// )}>
|
|
// <a
|
|
// role='button'
|
|
// onClick={() => onAreaClick(a.id)}
|
|
// onDoubleClick={() => onAreaDoubleClick(a.id)}
|
|
// className={classNames('group w-full pr-2 py-2 text-left font-medium pl-8 text-xs',
|
|
// 'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
|
|
// )}>
|
|
// {a.name || `Area ${a.order}`}
|
|
// </a>
|
|
// <ArrowPathIcon
|
|
// className='w-6 h-5 mr-2 text-white hover:bg-white hover:text-gray-700 rounded-full p-0.5'
|
|
// aria-hidden="true"
|
|
// onClick={() => console.log('refresh')}
|
|
// />
|
|
// <XMarkIcon
|
|
// className='w-6 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
|
|
// onClick={() => handleAreaDeleteButtonClick(a.id)} />
|
|
// </div>
|
|
// }
|
|
// </li>
|
|
))}
|
|
</ul>
|
|
</details>
|
|
}
|
|
</li>
|
|
)
|
|
}
|
|
|
|
export default DocumentLineItem
|