refact: breakup sidebar
This commit is contained in:
Joshua Shoemaker
parent
49db0aff66
commit
c94d0ed78b
@ -1,6 +1,7 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import Sidebar from './Sidebar'
|
import Sidebar from './Sidebar/Sidebar'
|
||||||
|
import { SidebarProvider } from './Sidebar/provider'
|
||||||
import TopBar from './TopBar'
|
import TopBar from './TopBar'
|
||||||
|
|
||||||
function WorkspaceNavigation() {
|
function WorkspaceNavigation() {
|
||||||
@ -8,7 +9,9 @@ function WorkspaceNavigation() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TopBar />
|
<TopBar />
|
||||||
|
<SidebarProvider>
|
||||||
<Sidebar />
|
<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 => ({
|
const makeDefaultNavigation = (): NavigationContextType => ({
|
||||||
selectedWorkspace: workspaces.PROCESSOR,
|
selectedWorkspace: workspaces.PROCESSOR,
|
||||||
setSelectedWorkspace: (workspace) => {}
|
setSelectedWorkspace: (_) => {},
|
||||||
|
selectedMainPage: mainPages.EDITUSER,
|
||||||
|
setSelectedMainPage: (_) => {},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default makeDefaultNavigation
|
export default makeDefaultNavigation
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
|
import { createContext, ReactNode, useContext, useState } from 'react'
|
||||||
import makeDefaultNavigation from './makeDefaultNavigation'
|
import makeDefaultNavigation from './makeDefaultNavigation'
|
||||||
import { mainPages, NavigationContextType, NavigationProps, workspaces } from './types'
|
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