ui: fix dnd

packages/ui-default/components/autocomplete/ProblemSelectAutoComplete.tsx

@@ -11,7 +11,7 @@ const Component = React.forwardRef<any, any>((props, ref) => {
     <ProblemSelectAutoCompleteFC
       ref={ref as any}
       height="34px"
-      selectedKeys={value.split(',').map((i) => i.trim())}
+      selectedKeys={value.split(',').map((i) => i.trim()).filter((i) => i)}
       onChange={(v) => {
         setValue(v);
         props.onChange(v);

packages/ui-default/components/autocomplete/UserSelectAutoComplete.tsx

@@ -11,7 +11,7 @@ const Component = React.forwardRef<any, any>((props, ref) => {
     <UserSelectAutoCompleteFC
       ref={ref as any}
       height="34px"
-      selectedKeys={value.split(',').map((i) => i.trim())}
+      selectedKeys={value.split(',').map((i) => i.trim()).filter((i) => i)}
       onChange={(v) => {
         setValue(v);
         props.onChange(v);

packages/ui-default/components/autocomplete/components/AutoComplete.tsx

@@ -58,16 +58,16 @@ function DraggableSelection({
   type, id, move, children, ...props
 }) {
   const ref = useRef<HTMLDivElement>(null);
-  const [isDragging, drag] = useDrag<string, any, boolean>(() => ({
+  const [isDragging, drag] = useDrag<{ id: string }, any, boolean>(() => ({
     type,
-    item: id,
+    item: { id },
     collect: (m) => m.isDragging(),
   }));
   const [, drop] = useDrop({
     accept: type,
-    hover: (item: string) => {
+    hover: (item: { id: string }) => {
       if (!ref.current) return;
-      move(item, id);
+      move(item.id, id);
     },
   });
   drag(drop(ref));

packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.tsx

@@ -10,8 +10,8 @@ const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, Aut
     cacheKey={`problem-${UiContext.domainId}`}
     queryItems={(query) => request.get(`/d/${UiContext.domainId}/problem/list`, { prefix: query })}
     // FIXME fetch items
-    fetchItems={() => []}
-    itemText={(pdoc) => `${pdoc.docId || pdoc}`}
+    fetchItems={(ids) => ids.map((id) => ({ docId: id, pid: id, title: id }) as any)}
+    itemText={(pdoc) => `${`${pdoc.docId} ${pdoc.title}`}`}
     itemKey={(pdoc) => `${pdoc.docId || pdoc}`}
     renderItem={(pdoc) => (
       <div className="media">

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.34.36",
+  "version": "4.34.37",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",