ui: fix dnd

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">