Mirrored-Projects/paperless-gpt
1
0
Fork 0
mirror of https://github.com/icereed/paperless-gpt.git synced 2025-03-13 13:18:02 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Redesign suggestion card

Browse source
This commit is contained in:
Dominik Schröter 2024-10-07 21:27:47 +02:00
parent aa67b2443a
commit ddcb245925
1 changed files with 68 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
web-app/src/components/SuggestionCard.tsx
View file

@ -1,5 +1,4 @@
import React from "react";
import { InformationCircleIcon } from "@heroicons/react/24/outline";
import { ReactTags } from "react-tag-autocomplete";
import { DocumentSuggestion, TagOption } from "../DocumentProcessor";
@ -17,41 +16,74 @@ const SuggestionCard: React.FC<SuggestionCardProps> = ({
onTitleChange,
onTagAddition,
onTagDeletion,
}) => (
<div className="bg-white shadow rounded-md p-4 relative group">
<div className="flex items-center">
<h3 className="text-lg font-semibold text-gray-800">
{suggestion.original_document.title}
</h3>
<InformationCircleIcon
className="h-6 w-6 text-gray-500 ml-2 cursor-pointer"
title={suggestion.original_document.content}
/>
}) => {
const document = suggestion.original_document;
return (
<div className="bg-white shadow shadow-blue-500/50 rounded-md p-4 relative flex flex-col justify-between h-full">
<div className="flex items-center group relative">
<div className="relative">
<h3 className="text-lg font-semibold text-gray-800">
{document.title}
</h3>
<p className="text-sm text-gray-600 mt-2 truncate">
{document.content.length > 40
? `${document.content.substring(0, 40)}...`
: document.content}
</p>
<div className="mt-4">
{document.tags.map((tag) => (
<span
key={tag}
className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
>
{tag}
</span>
))}
</div>
</div>
<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4 rounded-md">
<div className="text-sm text-white p-2 bg-gray-800 rounded-md w-full max-h-full overflow-y-auto">
<p className="mt-2 whitespace-pre-wrap">{document.content}</p>
</div>
</div>
</div>
<div className="mt-4">
<input
type="text"
value={suggestion.suggested_title || ""}
onChange={(e) => onTitleChange(suggestion.id, e.target.value)}
className="w-full border border-gray-300 rounded px-2 py-1 mt-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div className="mt-4">
<ReactTags
selected={
suggestion.suggested_tags?.map((tag, index) => ({
id: index.toString(),
name: tag,
label: tag,
value: index.toString(),
})) || []
}
suggestions={availableTags.map((tag) => ({
id: tag.id,
name: tag.name,
label: tag.name,
value: tag.id,
}))}
onAdd={(tag) =>
onTagAddition(suggestion.id, {
id: String(tag.label),
name: String(tag.value),
})
}
onDelete={(index) => onTagDeletion(suggestion.id, index)}
allowNew={true}
placeholderText="Add a tag"
/>
</div>
</div>
</div>
<input
type="text"
value={suggestion.suggested_title || ""}
onChange={(e) => onTitleChange(suggestion.id, e.target.value)}
className="w-full border border-gray-300 rounded px-2 py-1 mt-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div className="mt-4">
<ReactTags
selected={
suggestion.suggested_tags?.map((tag, index) => ({
id: index.toString(),
name: tag,
label: tag,
value: index.toString(),
})) || []
}
suggestions={availableTags.map(tag => ({ id: tag.id, name: tag.name, label: tag.name, value: tag.id }))}
onAdd={(tag) => onTagAddition(suggestion.id, { id: String(tag.label), name: String(tag.value) })}
onDelete={(index) => onTagDeletion(suggestion.id, index)}
allowNew={true}
placeholderText="Add a tag"
/>
</div>
</div>
);
);
};
export default SuggestionCard;