TodoBoard -> New Kanban
This commit is contained in:
Sedat ÖZTÜRK
parent
9e362f6671
commit
0d0834efaf
1 changed files with 66 additions and 85 deletions
|
|
@ -27,7 +27,7 @@ import {
|
|||
import { useListFormCustomDataSource } from './useListFormCustomDataSource'
|
||||
import { useListFormStateStoring } from './useListFormStateStoring'
|
||||
import { useListFormGridDto } from './shared/hooks'
|
||||
import { Avatar, Rate } from '@/components/ui'
|
||||
import { Avatar, Dialog, Rate } from '@/components/ui'
|
||||
import { getUsers } from '@/services/identity.service'
|
||||
import { getTenants } from '@/services/tenant.service'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
|
|
@ -432,6 +432,23 @@ const TodoBoardContent = ({
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
{canAdd && (
|
||||
<ToolbarItem
|
||||
location="after"
|
||||
widget="dxButton"
|
||||
locateInMenu="auto"
|
||||
showText="always"
|
||||
options={{
|
||||
icon: 'plus',
|
||||
text: translate('::App.ListFormTodoBoard.AddNewColumn'),
|
||||
hint: translate('::App.ListFormTodoBoard.AddNewColumn'),
|
||||
onClick: () => {
|
||||
setIsAddingStatus(true)
|
||||
setStatusError('')
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ToolbarItem
|
||||
location="after"
|
||||
widget="dxButton"
|
||||
|
|
@ -606,6 +623,12 @@ const TodoBoardContent = ({
|
|||
setColumnDropTarget(undefined)
|
||||
}
|
||||
|
||||
const closeAddStatus = () => {
|
||||
setIsAddingStatus(false)
|
||||
setNewStatusName('')
|
||||
setStatusError('')
|
||||
}
|
||||
|
||||
const addStatus = () => {
|
||||
if (!canAdd) return
|
||||
const nextName = newStatusName.trim()
|
||||
|
|
@ -1147,7 +1170,7 @@ const TodoBoardContent = ({
|
|||
<div className="pb-3">
|
||||
{renderToolbar()}
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex min-h-[420px] min-w-max gap-3">
|
||||
<div className="flex min-h-[420px] min-w-max">
|
||||
{statuses.map((status) => {
|
||||
const items = itemsForStatus(status)
|
||||
const isAdding = newTodoStatus === status
|
||||
|
|
@ -1554,32 +1577,14 @@ const TodoBoardContent = ({
|
|||
)
|
||||
})}
|
||||
{canAdd && (
|
||||
<section className="group w-[310px] shrink-0 rounded-xl border-2 border-transparent bg-gray-50 p-2 dark:bg-gray-900/60">
|
||||
<header className="mb-2 flex min-h-9 items-center gap-2 px-1">
|
||||
<FaGripVertical className="text-gray-300 dark:text-gray-700" />
|
||||
<h3 className="font-semibold text-gray-500 dark:text-gray-400">
|
||||
{translate('::App.ListFormTodoBoard.NewColumn')}
|
||||
</h3>
|
||||
<span className="ml-auto rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400">
|
||||
0
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-1 text-gray-400 hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-950"
|
||||
title={translate('::App.ListFormTodoBoard.AddNewColumn')}
|
||||
onClick={() => {
|
||||
setIsAddingStatus(true)
|
||||
setStatusError('')
|
||||
}}
|
||||
<Dialog
|
||||
isOpen={isAddingStatus}
|
||||
width={420}
|
||||
onClose={closeAddStatus}
|
||||
onRequestClose={closeAddStatus}
|
||||
>
|
||||
<FaPlus />
|
||||
</button>
|
||||
</header>
|
||||
<div className="h-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700" />
|
||||
<div className="mt-3">
|
||||
{isAddingStatus ? (
|
||||
<h5 className="mb-4">{translate('::App.ListFormTodoBoard.AddNewColumn')}</h5>
|
||||
<form
|
||||
className="rounded-lg border border-blue-300 bg-white p-3 shadow-sm dark:border-blue-800 dark:bg-gray-800"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
addStatus()
|
||||
|
|
@ -1599,16 +1604,16 @@ const TodoBoardContent = ({
|
|||
setNewStatusName(event.target.value)
|
||||
setStatusError('')
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Escape') {
|
||||
setIsAddingStatus(false)
|
||||
setNewStatusName('')
|
||||
setStatusError('')
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{statusError && <p className="mt-2 text-xs text-red-500">{statusError}</p>}
|
||||
<div className="mt-3 flex gap-2">
|
||||
<div className="mt-6 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg px-3 py-2 text-xs font-semibold text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
onClick={closeAddStatus}
|
||||
>
|
||||
{translate('::App.Platform.Cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-40"
|
||||
|
|
@ -1616,33 +1621,9 @@ const TodoBoardContent = ({
|
|||
>
|
||||
{translate('::App.ListFormTodoBoard.AddColumn')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg px-3 py-2 text-xs font-semibold text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
onClick={() => {
|
||||
setIsAddingStatus(false)
|
||||
setNewStatusName('')
|
||||
setStatusError('')
|
||||
}}
|
||||
>
|
||||
{translate('::App.Platform.Cancel')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="flex min-h-24 w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 px-4 text-sm font-medium text-gray-400 transition hover:border-blue-400 hover:bg-blue-50 hover:text-blue-600 dark:border-gray-700 dark:hover:bg-blue-950/20"
|
||||
onClick={() => {
|
||||
setIsAddingStatus(true)
|
||||
setStatusError('')
|
||||
}}
|
||||
>
|
||||
<FaPlus /> {translate('::App.ListFormTodoBoard.AddNewColumn')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue