refact: breakup sidebar
This commit is contained in:
Joshua Shoemaker
parent
49db0aff66
commit
c94d0ed78b
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import Sidebar from './Sidebar'
|
||||
import Sidebar from './Sidebar/Sidebar'
|
||||
import { SidebarProvider } from './Sidebar/provider'
|
||||
import TopBar from './TopBar'
|
||||
|
||||
function WorkspaceNavigation() {
|
||||
@ -8,7 +9,9 @@ function WorkspaceNavigation() {
|
||||
return (
|
||||
<>
|
||||
<TopBar />
|
||||
<SidebarProvider>
|
||||
<Sidebar />
|
||||
</SidebarProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,492 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { PlusIcon, XMarkIcon, DocumentPlusIcon } from '@heroicons/react/20/solid'
|
||||
import { ipc } from '../../wailsjs/wailsjs/go/models'
|
||||
import { useProject } from '../../context/Project/provider'
|
||||
import classNames from '../../utils/classNames'
|
||||
|
||||
type GroupNavigationItem = {
|
||||
id: string,
|
||||
name: string,
|
||||
documents: {
|
||||
id: string,
|
||||
name: string,
|
||||
areas: { id: string, name: string, order: number }[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const getNavigationProps = (documents: ipc.Document[], groups: ipc.Group[]): GroupNavigationItem[] => {
|
||||
const groupsWithDocuments = groups.map(g => {
|
||||
const childrenDocuments = documents
|
||||
.filter(d => d.groupId === g.id)
|
||||
.map(d => ({
|
||||
id: d.id,
|
||||
name: d.name,
|
||||
areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
|
||||
}))
|
||||
|
||||
return {
|
||||
id: g.id,
|
||||
name: g.name,
|
||||
documents: childrenDocuments
|
||||
}
|
||||
})
|
||||
|
||||
const documentsWithoutGroup = documents
|
||||
.filter(d => !d.groupId || d.groupId === 'Uncategorized')
|
||||
.map(d => ({
|
||||
id: d.id,
|
||||
name: d.name,
|
||||
areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
|
||||
}))
|
||||
|
||||
return [
|
||||
...groupsWithDocuments,
|
||||
{
|
||||
id: '',
|
||||
name: 'Uncategorized',
|
||||
documents: documentsWithoutGroup
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function Sidebar() {
|
||||
const [selectedGroupId, setSelectedGroupId] = useState('')
|
||||
const [isAddNewDocumentInputShowing, setIsAddNewDocumentInputShowing] = useState(false)
|
||||
const [isEditDocumentNameInputShowing, setIsEditDocumentNameInputShowing] = useState(false)
|
||||
const [isAddNewGroupInputShowing, setIsAddNewGroupInputShowing] = useState(false)
|
||||
const [isEditAreaNameInputShowing, setIsEditAreaNameInputShowing] = useState(false)
|
||||
const [dragOverAreaId, setDragOverAreaId] = useState('')
|
||||
|
||||
const addDocumentTextInput = useRef<HTMLInputElement>(null)
|
||||
const addGroupTextInput = useRef<HTMLInputElement>(null)
|
||||
const editAreaNameTextInput = useRef<HTMLInputElement>(null)
|
||||
const editDocumentNameTextInput = useRef<HTMLInputElement>(null)
|
||||
|
||||
const {
|
||||
documents,
|
||||
groups,
|
||||
getSelectedDocument,
|
||||
getAreaById,
|
||||
requestUpdateArea,
|
||||
requestDeleteAreaById,
|
||||
requestAddDocument,
|
||||
requestAddDocumentGroup,
|
||||
selectedAreaId,
|
||||
setSelectedAreaId,
|
||||
selectedDocumentId,
|
||||
setSelectedDocumentId,
|
||||
currentSession,
|
||||
requestUpdateDocument,
|
||||
requestChangeAreaOrder,
|
||||
} = useProject()
|
||||
|
||||
const navigation = getNavigationProps(documents, groups)
|
||||
|
||||
const getGroupIdFromDocumentId = (itemId: string) => {
|
||||
let groupId = ''
|
||||
navigation.forEach(g => {
|
||||
const foundDocument = g.documents.find(d => d.id === itemId)
|
||||
if (foundDocument) groupId = g.id
|
||||
})
|
||||
return groupId
|
||||
}
|
||||
|
||||
const getDocumentIdFromAreaId = (areaId: string) => {
|
||||
let documentId = ''
|
||||
navigation.map(g => g.documents).flat().forEach(d => {
|
||||
const doesDocumentIncludeArea = d.areas.map(a => a.id).includes(areaId)
|
||||
if (doesDocumentIncludeArea) documentId = d.id
|
||||
})
|
||||
|
||||
return documentId
|
||||
}
|
||||
|
||||
const onAddNewDocumentLineItemClickHandler = (groupId: string) => {
|
||||
setSelectedGroupId(groupId)
|
||||
setIsAddNewDocumentInputShowing(true)
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
const onAddNewGroupLineItemClickHandler = () => {
|
||||
setIsAddNewGroupInputShowing(true)
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
}
|
||||
|
||||
const onAreaClick = (areaId: string) => {
|
||||
getDocumentIdFromAreaId(areaId)
|
||||
setSelectedDocumentId(getDocumentIdFromAreaId(areaId) || '')
|
||||
setSelectedAreaId(areaId)
|
||||
}
|
||||
|
||||
const onAreaDoubleClick = (areaId: string) => {
|
||||
setSelectedDocumentId(getDocumentIdFromAreaId(areaId) || '')
|
||||
setIsEditAreaNameInputShowing(true)
|
||||
}
|
||||
|
||||
const onAreaInputBlur = () => {
|
||||
setIsEditAreaNameInputShowing(false)
|
||||
}
|
||||
|
||||
const onAreaDragOver = (areaId: string) => {
|
||||
setDragOverAreaId(areaId)
|
||||
}
|
||||
|
||||
const onAreaDragStart = (areaId: string) => {
|
||||
setSelectedAreaId(areaId)
|
||||
}
|
||||
|
||||
const onAreaDropEnd = (areaId: string) => {
|
||||
const areaDroppedOn = navigation.map(n => n.documents).flat().map(d => d.areas).flat().find(a => a.id === dragOverAreaId)
|
||||
if (!areaDroppedOn) return
|
||||
requestChangeAreaOrder(areaId, areaDroppedOn.order)
|
||||
setDragOverAreaId('')
|
||||
}
|
||||
|
||||
const handleAreaDeleteButtonClick = (areaId: string) => {
|
||||
requestDeleteAreaById(areaId)
|
||||
}
|
||||
|
||||
const onDocumentClickHandler = (itemId: string) => {
|
||||
setSelectedDocumentId(itemId)
|
||||
setSelectedGroupId(getGroupIdFromDocumentId(itemId))
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
const onDocumentDoubleClickHandler = (docuemntId: string) => {
|
||||
setIsEditDocumentNameInputShowing(true)
|
||||
}
|
||||
|
||||
const onDocumentInputBlur = () => {
|
||||
setIsEditDocumentNameInputShowing(false)
|
||||
}
|
||||
|
||||
const onCancelAddGroupClickHandler = () => {
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
const onCancelAddItemClickHandler = () => {
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
}
|
||||
|
||||
const onConfirmAreaNameChangeHandler = async (areaDetails: { areaId: string, areaName: string }) => {
|
||||
const { areaId, areaName } = areaDetails
|
||||
|
||||
const areaToUpdate = getAreaById(areaId)
|
||||
if (areaToUpdate) {
|
||||
areaToUpdate.name = areaName
|
||||
requestUpdateArea(areaToUpdate)
|
||||
.then(response => console.log(response))
|
||||
.catch(console.error)
|
||||
}
|
||||
setIsEditAreaNameInputShowing(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)
|
||||
}
|
||||
|
||||
const onConfirmAddDocumentClickHandler = async (groupId: string) => {
|
||||
const documentName = addDocumentTextInput.current?.value
|
||||
if (!documentName) return
|
||||
|
||||
const response = await requestAddDocument(groupId, documentName)
|
||||
if (!response.id) return
|
||||
|
||||
setSelectedDocumentId(response.id)
|
||||
setSelectedGroupId(groupId)
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
}
|
||||
|
||||
const onConfirmAddGroupClickHandler = async (e: React.MouseEvent) => {
|
||||
const groupName = addGroupTextInput.current?.value
|
||||
if (!groupName) return
|
||||
|
||||
const response = await requestAddDocumentGroup(groupName)
|
||||
if (!response.id) return
|
||||
|
||||
setSelectedGroupId(response.id)
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
const onEnterHandler = (event: React.KeyboardEvent<HTMLInputElement>, callback: Function) => {
|
||||
if (event.key === 'Enter') callback()
|
||||
}
|
||||
|
||||
const renderAddGroupInput = () => {
|
||||
return isAddNewGroupInputShowing
|
||||
? <div className="mt-1 flex rounded-md shadow-sm">
|
||||
<div className="relative flex flex-grow items-stretch focus-within:z-10 text-lg">
|
||||
<input
|
||||
type="text"
|
||||
name="groupName"
|
||||
id="groupName"
|
||||
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="Add Group"
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
onConfirmAddGroupClickHandler)
|
||||
}}
|
||||
ref={addGroupTextInput}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancelAddGroupClickHandler}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirmAddGroupClickHandler}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<PlusIcon className="h-4 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
: <a
|
||||
role='button'
|
||||
className={classNames(
|
||||
'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
' group w-full flex items-center pr-2 py-2 text-left font-medium',
|
||||
'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2'
|
||||
)}
|
||||
onClick={onAddNewGroupLineItemClickHandler}
|
||||
>
|
||||
<PlusIcon className="h-5 w-4" aria-hidden="true" />
|
||||
Add Group
|
||||
</a>
|
||||
}
|
||||
|
||||
const renderAddNewDocument = (groupId: string) => {
|
||||
return isAddNewDocumentInputShowing && selectedGroupId === groupId
|
||||
? <div className="flex rounded-md shadow-sm">
|
||||
<div className="relative flex flex-grow items-stretch focus-within:z-10 text-lg">
|
||||
<input
|
||||
type="text"
|
||||
name="documentName"
|
||||
id="documentName"
|
||||
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="Add Document"
|
||||
autoFocus
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
() => onConfirmAddDocumentClickHandler(groupId))
|
||||
}}
|
||||
ref={addDocumentTextInput}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancelAddItemClickHandler}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onConfirmAddDocumentClickHandler(groupId)}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<PlusIcon className="h-7 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
: <a
|
||||
role='button'
|
||||
className={classNames(
|
||||
'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
' group w-full flex items-center pl-5 py-2 text-left font-medium',
|
||||
'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500'
|
||||
)}
|
||||
onClick={() => onAddNewDocumentLineItemClickHandler(groupId)}
|
||||
>
|
||||
<DocumentPlusIcon className="h-3.5 mr-1" aria-hidden="true" />
|
||||
Add Document
|
||||
</a>
|
||||
}
|
||||
|
||||
const renderNavigationItems = () => (
|
||||
<nav className="flex-1 space-y-1 px-2 py-4" aria-label='Sidebar'>
|
||||
|
||||
{renderAddGroupInput()}
|
||||
|
||||
{navigation.map((group) =>
|
||||
<details key={group.name} open={group.id === selectedGroupId}>
|
||||
<summary className={classNames(
|
||||
group.id === selectedGroupId
|
||||
? 'bg-gray-900 text-white'
|
||||
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
'group items-center px-2 py-2 text-base font-medium rounded-t-md'
|
||||
)}>
|
||||
<a role='button'>{group.name}</a>
|
||||
</summary>
|
||||
<ul>
|
||||
{group.documents.map((d, index) => (
|
||||
<li className='p-0 m-0' key={d.id}>
|
||||
{!d.areas.length
|
||||
?
|
||||
<div
|
||||
onClick={() => onDocumentClickHandler(d.id)}
|
||||
onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
|
||||
className={classNames(
|
||||
d.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',
|
||||
index !== 0 ? 'rounded-t-md' : '',
|
||||
)}>
|
||||
{selectedDocumentId === d.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={d.name}
|
||||
onBlur={onDocumentInputBlur}
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
() => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
|
||||
}}
|
||||
ref={editDocumentNameTextInput}
|
||||
/>
|
||||
: <a
|
||||
role='button'
|
||||
className={classNames(
|
||||
d.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 '
|
||||
)}
|
||||
>
|
||||
{d.name}
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
: <details>
|
||||
<summary
|
||||
onClick={() => onDocumentClickHandler(d.id)}
|
||||
onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
|
||||
className={classNames(
|
||||
d.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',
|
||||
index !== 0 ? 'rounded-t-md' : '',
|
||||
|
||||
)}>
|
||||
{selectedDocumentId === d.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={d.name}
|
||||
onBlur={onDocumentInputBlur}
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
() => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
|
||||
}}
|
||||
ref={editDocumentNameTextInput}
|
||||
/>
|
||||
: <a
|
||||
role='button'
|
||||
className={classNames(
|
||||
d.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 '
|
||||
)}
|
||||
>
|
||||
{d.name}
|
||||
</a>
|
||||
}
|
||||
</summary>
|
||||
<ul>
|
||||
{d.areas.map((a, index) => (
|
||||
<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>
|
||||
<XMarkIcon
|
||||
className='w-5 h-5 mr-2 text-white hover:bg-white hover:text-gray-700 rounded-full p-0.5'
|
||||
onClick={() => handleAreaDeleteButtonClick(a.id)} />
|
||||
</div>
|
||||
}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</details>
|
||||
}
|
||||
</li>
|
||||
))}
|
||||
|
||||
{renderAddNewDocument(group.id)}
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-gray-800 bg-opacity-25">
|
||||
<div className="flex h-16 flex-shrink-0 items-center bg-gray-900 px-4 bg-opacity-25">
|
||||
<img className="h-8 w-auto" src='/images/logo.svg' alt="Textualize" />
|
||||
<h1 className='text-gray-100 text-xl ml-2'>{currentSession?.project?.name}</h1>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col overflow-y-auto">
|
||||
{renderNavigationItems()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
89
frontend/components/workspace/Sidebar/AddGroupInput.tsx
Normal file
89
frontend/components/workspace/Sidebar/AddGroupInput.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
|
||||
import { PlusIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import React, { useRef } from 'react'
|
||||
import { useProject } from '../../../context/Project/provider'
|
||||
import classNames from '../../../utils/classNames'
|
||||
import onEnterHandler from '../../../utils/onEnterHandler'
|
||||
import { useSidebar } from './provider'
|
||||
|
||||
const AddGroupInput = () => {
|
||||
const { requestAddDocumentGroup } = useProject()
|
||||
const {
|
||||
isAddNewGroupInputShowing,
|
||||
setSelectedGroupId,
|
||||
setIsAddNewGroupInputShowing,
|
||||
setIsAddNewDocumentInputShowing
|
||||
} = useSidebar()
|
||||
|
||||
const addGroupTextInput = useRef<HTMLInputElement>(null)
|
||||
|
||||
|
||||
const onAddNewGroupLineItemClickHandler = () => {
|
||||
setIsAddNewGroupInputShowing(true)
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
}
|
||||
|
||||
const onConfirmAddGroupClickHandler = async (e: React.MouseEvent) => {
|
||||
const groupName = addGroupTextInput.current?.value
|
||||
if (!groupName) return
|
||||
|
||||
const response = await requestAddDocumentGroup(groupName)
|
||||
if (!response.id) return
|
||||
|
||||
setSelectedGroupId(response.id)
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
const onCancelAddGroupClickHandler = () => {
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
return isAddNewGroupInputShowing
|
||||
? <div className="mt-1 flex rounded-md shadow-sm">
|
||||
<div className="relative flex flex-grow items-stretch focus-within:z-10 text-lg">
|
||||
<input
|
||||
type="text"
|
||||
name="groupName"
|
||||
id="groupName"
|
||||
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="Add Group"
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
onConfirmAddGroupClickHandler)
|
||||
}}
|
||||
ref={addGroupTextInput}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancelAddGroupClickHandler}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirmAddGroupClickHandler}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<PlusIcon className="h-4 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
: <a
|
||||
role='button'
|
||||
className={classNames(
|
||||
'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
' group w-full flex items-center pr-2 py-2 text-left font-medium',
|
||||
'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2'
|
||||
)}
|
||||
onClick={onAddNewGroupLineItemClickHandler}
|
||||
>
|
||||
<PlusIcon className="h-5 w-4" aria-hidden="true" />
|
||||
Add Group
|
||||
</a>
|
||||
}
|
||||
|
||||
|
||||
export default AddGroupInput
|
||||
127
frontend/components/workspace/Sidebar/AreaLineItem.tsx
Normal file
127
frontend/components/workspace/Sidebar/AreaLineItem.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
'use client'
|
||||
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { XMarkIcon } from '@heroicons/react/20/solid'
|
||||
import { useProject } from '../../../context/Project/provider'
|
||||
import classNames from '../../../utils/classNames'
|
||||
import { ArrowPathIcon } from '@heroicons/react/24/outline'
|
||||
import { SidebarArea } from './types'
|
||||
import { useSidebar } from './provider'
|
||||
import onEnterHandler from '../../../utils/onEnterHandler'
|
||||
|
||||
|
||||
const AreaLineItem = (props: { area: SidebarArea, documentId: string, index: number }) => {
|
||||
const {
|
||||
getAreaById,
|
||||
requestUpdateArea,
|
||||
setSelectedDocumentId,
|
||||
setSelectedAreaId,
|
||||
requestChangeAreaOrder,
|
||||
requestDeleteAreaById,
|
||||
} = useProject()
|
||||
|
||||
const {
|
||||
selectedAreaId,
|
||||
isEditAreaNameInputShowing,
|
||||
setIsEditAreaNameInputShowing,
|
||||
} = useSidebar()
|
||||
|
||||
const editAreaNameTextInput = useRef<HTMLInputElement>(null)
|
||||
|
||||
const [dragOverAreaId, setDragOverAreaId] = useState('')
|
||||
|
||||
const onConfirmAreaNameChangeHandler = async (areaDetails: { areaId: string, areaName: string }) => {
|
||||
const { areaId, areaName } = areaDetails
|
||||
|
||||
const areaToUpdate = getAreaById(areaId)
|
||||
if (areaToUpdate) {
|
||||
areaToUpdate.name = areaName
|
||||
requestUpdateArea(areaToUpdate)
|
||||
.then(response => console.log(response))
|
||||
.catch(console.error)
|
||||
}
|
||||
setIsEditAreaNameInputShowing(false)
|
||||
}
|
||||
|
||||
const onAreaClick = (areaId: string) => {
|
||||
setSelectedDocumentId(props.documentId)
|
||||
setSelectedAreaId(areaId)
|
||||
}
|
||||
|
||||
const onAreaDoubleClick = (areaId: string) => {
|
||||
setSelectedDocumentId(props.documentId)
|
||||
setIsEditAreaNameInputShowing(true)
|
||||
}
|
||||
|
||||
const onAreaInputBlur = () => {
|
||||
setIsEditAreaNameInputShowing(false)
|
||||
}
|
||||
|
||||
const onAreaDragOver = (areaId: string) => {
|
||||
setDragOverAreaId(areaId)
|
||||
}
|
||||
|
||||
const onAreaDragStart = (areaId: string) => {
|
||||
setSelectedAreaId(areaId)
|
||||
}
|
||||
|
||||
const onAreaDropEnd = (areaId: string) => {
|
||||
const areaDroppedOn = getAreaById(areaId)
|
||||
if (!areaDroppedOn) return
|
||||
requestChangeAreaOrder(areaId, areaDroppedOn.order)
|
||||
setDragOverAreaId('')
|
||||
}
|
||||
|
||||
const handleAreaDeleteButtonClick = (areaId: string) => {
|
||||
requestDeleteAreaById(areaId)
|
||||
}
|
||||
|
||||
return <li>
|
||||
{selectedAreaId === props.area.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={props.area.name || `Area ${props.index}`}
|
||||
onBlur={onAreaInputBlur}
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
() => onConfirmAreaNameChangeHandler({ areaId: props.area.id, areaName: event.currentTarget.value }))
|
||||
}}
|
||||
ref={editAreaNameTextInput}
|
||||
/>
|
||||
: <div
|
||||
draggable
|
||||
onDragOver={() => onAreaDragOver(props.area.id)}
|
||||
onDragStart={() => onAreaDragStart(props.area.id)}
|
||||
onDragEnd={() => onAreaDropEnd(props.area.id)}
|
||||
className={classNames('flex justify-between items-center cursor-pointer',
|
||||
selectedAreaId === props.area.id ? 'bg-indigo-500 text-gray-200' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
dragOverAreaId === props.area.id ? 'bg-gray-300 text-gray-700' : '',
|
||||
selectedAreaId === props.area.id && dragOverAreaId === props.area.id ? 'bg-indigo-300' : '',
|
||||
)}>
|
||||
<a
|
||||
role='button'
|
||||
onClick={() => onAreaClick(props.area.id)}
|
||||
onDoubleClick={() => onAreaDoubleClick(props.area.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',
|
||||
)}>
|
||||
{props.area.name || `Area ${props.area.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(props.area.id)} />
|
||||
</div>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
|
||||
export default AreaLineItem
|
||||
194
frontend/components/workspace/Sidebar/DocumentLineItem.tsx
Normal file
194
frontend/components/workspace/Sidebar/DocumentLineItem.tsx
Normal file
@ -0,0 +1,194 @@
|
||||
'use client'
|
||||
|
||||
import React, { useRef } from 'react'
|
||||
import { useProject } from '../../../context/Project/provider'
|
||||
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
|
||||
} = 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}
|
||||
/>
|
||||
: <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>
|
||||
}
|
||||
</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>
|
||||
}
|
||||
</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
|
||||
254
frontend/components/workspace/Sidebar/GroupLineItem.tsx
Normal file
254
frontend/components/workspace/Sidebar/GroupLineItem.tsx
Normal file
@ -0,0 +1,254 @@
|
||||
'use client'
|
||||
|
||||
import { DocumentPlusIcon, PlusIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import React, { useRef } from 'react'
|
||||
import { useProject } from '../../../context/Project/provider'
|
||||
import classNames from '../../../utils/classNames'
|
||||
import onEnterHandler from '../../../utils/onEnterHandler'
|
||||
import AddGroupInput from './AddGroupInput'
|
||||
import DocumentLineItem from './DocumentLineItem'
|
||||
import { useSidebar } from './provider'
|
||||
import { SidebarGroup } from './types'
|
||||
|
||||
|
||||
|
||||
const GroupLineItem = (props: { group: SidebarGroup }) => {
|
||||
const {
|
||||
requestAddDocument
|
||||
} = useProject()
|
||||
|
||||
const {
|
||||
selectedGroupId,
|
||||
isAddNewDocumentInputShowing,
|
||||
setSelectedDocumentId,
|
||||
setSelectedGroupId,
|
||||
setIsAddNewDocumentInputShowing,
|
||||
setIsAddNewGroupInputShowing,
|
||||
} = useSidebar()
|
||||
|
||||
const addDocumentTextInput = useRef<HTMLInputElement>(null)
|
||||
|
||||
const onConfirmAddDocumentClickHandler = async (groupId: string) => {
|
||||
const documentName = addDocumentTextInput.current?.value
|
||||
if (!documentName) return
|
||||
|
||||
const response = await requestAddDocument(groupId, documentName)
|
||||
if (!response.id) return
|
||||
|
||||
setSelectedDocumentId(response.id)
|
||||
setSelectedGroupId(groupId)
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
}
|
||||
|
||||
const onCancelAddItemClickHandler = () => {
|
||||
setIsAddNewDocumentInputShowing(false)
|
||||
}
|
||||
|
||||
const onAddNewDocumentLineItemClickHandler = (groupId: string) => {
|
||||
setSelectedGroupId(groupId)
|
||||
setIsAddNewDocumentInputShowing(true)
|
||||
setIsAddNewGroupInputShowing(false)
|
||||
}
|
||||
|
||||
const renderAddNewDocument = (groupId: string) => {
|
||||
return isAddNewDocumentInputShowing && selectedGroupId === groupId
|
||||
? <div className="flex rounded-md shadow-sm">
|
||||
<div className="relative flex flex-grow items-stretch focus-within:z-10 text-lg">
|
||||
<input
|
||||
type="text"
|
||||
name="documentName"
|
||||
id="documentName"
|
||||
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="Add Document"
|
||||
autoFocus
|
||||
onKeyDown={(event) => {
|
||||
onEnterHandler(event,
|
||||
() => onConfirmAddDocumentClickHandler(groupId))
|
||||
}}
|
||||
ref={addDocumentTextInput}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancelAddItemClickHandler}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onConfirmAddDocumentClickHandler(groupId)}
|
||||
className="bg-gray-900 bg-opacity-5 relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-400 px-1 py-0 text-sm font-medium text-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<PlusIcon className="h-7 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
: <a
|
||||
role='button'
|
||||
className={classNames(
|
||||
'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
' group w-full flex items-center pl-5 py-2 text-left font-medium',
|
||||
'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500'
|
||||
)}
|
||||
onClick={() => onAddNewDocumentLineItemClickHandler(groupId)}
|
||||
>
|
||||
<DocumentPlusIcon className="h-3.5 mr-1" aria-hidden="true" />
|
||||
Add Document
|
||||
</a>
|
||||
}
|
||||
|
||||
return (<details key={props.group.name} open={props.group.id === selectedGroupId}>
|
||||
<summary className={classNames(
|
||||
props.group.id === selectedGroupId
|
||||
? 'bg-gray-900 text-white'
|
||||
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||
'group items-center px-2 py-2 text-base font-medium rounded-t-md'
|
||||
)}>
|
||||
<a role='button'>{props.group.name}</a>
|
||||
</summary>
|
||||
<ul>
|
||||
{props.group.documents.map((d, index) => (
|
||||
<DocumentLineItem key={d.id} document={d} index={index} groupId={props.group.id} />
|
||||
// <li className='p-0 m-0' key={d.id}>
|
||||
// {!d.areas.length
|
||||
// ?
|
||||
// <div
|
||||
// onClick={() => onDocumentClickHandler(d.id)}
|
||||
// onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
|
||||
// className={classNames(
|
||||
// d.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',
|
||||
// index !== 0 ? 'rounded-t-md' : '',
|
||||
// )}>
|
||||
// {selectedDocumentId === d.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={d.name}
|
||||
// onBlur={onDocumentInputBlur}
|
||||
// onKeyDown={(event) => {
|
||||
// onEnterHandler(event,
|
||||
// () => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
|
||||
// }}
|
||||
// ref={editDocumentNameTextInput}
|
||||
// />
|
||||
// : <a
|
||||
// role='button'
|
||||
// className={classNames(
|
||||
// d.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 '
|
||||
// )}
|
||||
// >
|
||||
// {d.name}
|
||||
// </a>
|
||||
// }
|
||||
// </div>
|
||||
// : <details>
|
||||
// <summary
|
||||
// onClick={() => onDocumentClickHandler(d.id)}
|
||||
// onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
|
||||
// className={classNames(
|
||||
// d.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',
|
||||
// index !== 0 ? 'rounded-t-md' : '',
|
||||
|
||||
// )}>
|
||||
// {selectedDocumentId === d.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={d.name}
|
||||
// onBlur={onDocumentInputBlur}
|
||||
// onKeyDown={(event) => {
|
||||
// onEnterHandler(event,
|
||||
// () => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
|
||||
// }}
|
||||
// ref={editDocumentNameTextInput}
|
||||
// />
|
||||
// : <a
|
||||
// role='button'
|
||||
// className={classNames(
|
||||
// d.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 '
|
||||
// )}
|
||||
// >
|
||||
// {d.name}
|
||||
// </a>
|
||||
// }
|
||||
// </summary>
|
||||
// <ul>
|
||||
// {d.areas.map((a, index) => (
|
||||
// <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>
|
||||
))}
|
||||
|
||||
{renderAddNewDocument(props.group.id)}
|
||||
</ul>
|
||||
</details>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupLineItem
|
||||
33
frontend/components/workspace/Sidebar/Sidebar.tsx
Normal file
33
frontend/components/workspace/Sidebar/Sidebar.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { useProject } from '../../../context/Project/provider'
|
||||
import AddGroupInput from './AddGroupInput'
|
||||
import GroupLineItem from './GroupLineItem'
|
||||
import { useSidebar } from './provider'
|
||||
|
||||
function Sidebar() {
|
||||
const { currentSession } = useProject()
|
||||
const { navigationProps } = useSidebar()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-gray-800 bg-opacity-25">
|
||||
<div className="flex h-16 flex-shrink-0 items-center bg-gray-900 px-4 bg-opacity-25">
|
||||
<img className="h-8 w-auto" src='/images/logo.svg' alt="Textualize" />
|
||||
<h1 className='text-gray-100 text-xl ml-2'>{currentSession?.project?.name}</h1>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col overflow-y-auto">
|
||||
<nav className="flex-1 space-y-1 px-2 py-4" aria-label='Sidebar'>
|
||||
{<AddGroupInput />}
|
||||
{navigationProps.map((group) => <GroupLineItem key={group.id} group={group} />)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
21
frontend/components/workspace/Sidebar/makeDefaultSidebar.ts
Normal file
21
frontend/components/workspace/Sidebar/makeDefaultSidebar.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { SidebarContextType } from './types'
|
||||
|
||||
const makeDefaultSidebar = (): SidebarContextType => ({
|
||||
navigationProps: [],
|
||||
selectedGroupId: '',
|
||||
setSelectedGroupId: (_: string) => {},
|
||||
selectedDocumentId: '',
|
||||
setSelectedDocumentId: (_: string) => {},
|
||||
selectedAreaId: '',
|
||||
setSelectedAreaId: (_: string) => {},
|
||||
isAddNewDocumentInputShowing: false,
|
||||
setIsAddNewDocumentInputShowing: (_: boolean) => {},
|
||||
isEditDocumentNameInputShowing: false,
|
||||
setIsEditDocumentNameInputShowing: (_: boolean) => {},
|
||||
isAddNewGroupInputShowing: false,
|
||||
setIsAddNewGroupInputShowing: (_: boolean) => {},
|
||||
isEditAreaNameInputShowing: false,
|
||||
setIsEditAreaNameInputShowing: (_: boolean) => {},
|
||||
})
|
||||
|
||||
export default makeDefaultSidebar
|
||||
39
frontend/components/workspace/Sidebar/navigationProps.ts
Normal file
39
frontend/components/workspace/Sidebar/navigationProps.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { ipc } from '../../../wailsjs/wailsjs/go/models'
|
||||
import { SidebarGroup } from './types'
|
||||
|
||||
const getNavigationProps = (documents: ipc.Document[], groups: ipc.Group[]) : SidebarGroup[] => {
|
||||
const groupsWithDocuments = groups.map(g => {
|
||||
const childrenDocuments = documents
|
||||
.filter(d => d.groupId === g.id)
|
||||
.map(d => ({
|
||||
id: d.id,
|
||||
name: d.name,
|
||||
areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
|
||||
}))
|
||||
|
||||
return {
|
||||
id: g.id,
|
||||
name: g.name,
|
||||
documents: childrenDocuments
|
||||
}
|
||||
})
|
||||
|
||||
const documentsWithoutGroup = documents
|
||||
.filter(d => !d.groupId || d.groupId === 'Uncategorized')
|
||||
.map(d => ({
|
||||
id: d.id,
|
||||
name: d.name,
|
||||
areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
|
||||
}))
|
||||
|
||||
return [
|
||||
...groupsWithDocuments,
|
||||
{
|
||||
id: '',
|
||||
name: 'Uncategorized',
|
||||
documents: documentsWithoutGroup
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export { getNavigationProps }
|
||||
53
frontend/components/workspace/Sidebar/provider.tsx
Normal file
53
frontend/components/workspace/Sidebar/provider.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
'use client'
|
||||
|
||||
import { createContext, useContext, useState, ReactNode, } from 'react'
|
||||
import { useProject } from '../../../context/Project/provider'
|
||||
import makeDefaultSidebar from './makeDefaultSidebar'
|
||||
import { getNavigationProps } from './navigationProps'
|
||||
import { SidebarContextType } from './types'
|
||||
|
||||
const SidebarContext = createContext<SidebarContextType>(makeDefaultSidebar())
|
||||
|
||||
export function useSidebar() {
|
||||
return useContext(SidebarContext)
|
||||
}
|
||||
|
||||
type Props = { children: ReactNode }
|
||||
export function SidebarProvider({ children }: Props) {
|
||||
const [selectedGroupId, setSelectedGroupId] = useState('')
|
||||
const [isAddNewDocumentInputShowing, setIsAddNewDocumentInputShowing] = useState(false)
|
||||
const [isEditDocumentNameInputShowing, setIsEditDocumentNameInputShowing] = useState(false)
|
||||
const [isAddNewGroupInputShowing, setIsAddNewGroupInputShowing] = useState(false)
|
||||
const [isEditAreaNameInputShowing, setIsEditAreaNameInputShowing] = useState(false)
|
||||
|
||||
const {
|
||||
selectedDocumentId, setSelectedDocumentId,
|
||||
selectedAreaId, setSelectedAreaId,
|
||||
documents,
|
||||
groups,
|
||||
} = useProject()
|
||||
|
||||
const navigationProps = getNavigationProps(documents, groups)
|
||||
|
||||
const value = {
|
||||
navigationProps,
|
||||
selectedGroupId,
|
||||
setSelectedGroupId,
|
||||
selectedDocumentId,
|
||||
setSelectedDocumentId,
|
||||
selectedAreaId,
|
||||
setSelectedAreaId,
|
||||
isAddNewDocumentInputShowing,
|
||||
setIsAddNewDocumentInputShowing,
|
||||
isEditDocumentNameInputShowing,
|
||||
setIsEditDocumentNameInputShowing,
|
||||
isAddNewGroupInputShowing,
|
||||
setIsAddNewGroupInputShowing,
|
||||
isEditAreaNameInputShowing,
|
||||
setIsEditAreaNameInputShowing
|
||||
}
|
||||
|
||||
return <SidebarContext.Provider value={value}>
|
||||
{ children }
|
||||
</SidebarContext.Provider>
|
||||
}
|
||||
35
frontend/components/workspace/Sidebar/types.ts
Normal file
35
frontend/components/workspace/Sidebar/types.ts
Normal file
@ -0,0 +1,35 @@
|
||||
export type SidebarContextType = {
|
||||
navigationProps: SidebarGroup[],
|
||||
selectedGroupId: string,
|
||||
setSelectedGroupId: (_: string) => void,
|
||||
selectedDocumentId: string,
|
||||
setSelectedDocumentId: (_: string) => void,
|
||||
selectedAreaId: string,
|
||||
setSelectedAreaId: (_: string) => void,
|
||||
isAddNewDocumentInputShowing: boolean,
|
||||
setIsAddNewDocumentInputShowing: (_: boolean) => void,
|
||||
isEditDocumentNameInputShowing: boolean,
|
||||
setIsEditDocumentNameInputShowing: (_: boolean) => void,
|
||||
isAddNewGroupInputShowing: boolean,
|
||||
setIsAddNewGroupInputShowing: (_: boolean) => void,
|
||||
isEditAreaNameInputShowing: boolean,
|
||||
setIsEditAreaNameInputShowing: (_: boolean) => void,
|
||||
}
|
||||
|
||||
export type SidebarArea = {
|
||||
id: string,
|
||||
name: string,
|
||||
order: number
|
||||
}
|
||||
|
||||
export type SidebarDocument = {
|
||||
id: string,
|
||||
name: string,
|
||||
areas: SidebarArea[]
|
||||
}
|
||||
|
||||
export type SidebarGroup = {
|
||||
id: string,
|
||||
name: string,
|
||||
documents: SidebarDocument[]
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
import { NavigationContextType, workspaces } from './types'
|
||||
import { mainPages, NavigationContextType, workspaces } from './types'
|
||||
|
||||
const makeDefaultNavigation = (): NavigationContextType => ({
|
||||
selectedWorkspace: workspaces.PROCESSOR,
|
||||
setSelectedWorkspace: (workspace) => {}
|
||||
setSelectedWorkspace: (_) => {},
|
||||
selectedMainPage: mainPages.EDITUSER,
|
||||
setSelectedMainPage: (_) => {},
|
||||
})
|
||||
|
||||
export default makeDefaultNavigation
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
|
||||
import { createContext, ReactNode, useContext, useState } from 'react'
|
||||
import makeDefaultNavigation from './makeDefaultNavigation'
|
||||
import { mainPages, NavigationContextType, NavigationProps, workspaces } from './types'
|
||||
|
||||
|
||||
5
frontend/utils/onEnterHandler.ts
Normal file
5
frontend/utils/onEnterHandler.ts
Normal file
@ -0,0 +1,5 @@
|
||||
const onEnterHandler = (event: React.KeyboardEvent<HTMLInputElement>, callback: Function) => {
|
||||
if (event.key === 'Enter') callback()
|
||||
}
|
||||
|
||||
export default onEnterHandler
|
||||
Loading…
x
Reference in New Issue
Block a user