TodoBoard -> New Kanban

ui/src/views/list/TodoBoard.tsx

@@ -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">
+            <Dialog
-              <header className="mb-2 flex min-h-9 items-center gap-2 px-1">
+              isOpen={isAddingStatus}
-                <FaGripVertical className="text-gray-300 dark:text-gray-700" />
+              width={420}
-                <h3 className="font-semibold text-gray-500 dark:text-gray-400">
+              onClose={closeAddStatus}
-                  {translate('::App.ListFormTodoBoard.NewColumn')}
+              onRequestClose={closeAddStatus}
-                </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('')
-                  }}
             >
-                  <FaPlus />
+              <h5 className="mb-4">{translate('::App.ListFormTodoBoard.AddNewColumn')}</h5>
-                </button>
-              </header>
-              <div className="h-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700" />
-              <div className="mt-3">
-                {isAddingStatus ? (
               <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>
-                ) : (
+            </Dialog>
-                  <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>
           )}
         </div>
       </div>