Add Quick Add Tag functionality and improve tag management in Edit and Publish pages

This commit is contained in:
2025-05-31 12:43:08 +08:00
parent 37a3d0e459
commit d597d62c1c
8 changed files with 221 additions and 8 deletions

View File

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
import { app } from "../app.ts";
import { ErrorAlert } from "../components/alert.tsx";
import Loading from "../components/loading.tsx";
import TagInput from "../components/tag_input.tsx";
import TagInput, {QuickAddTagDialog} from "../components/tag_input.tsx";
export default function EditResourcePage() {
const [title, setTitle] = useState<string>("")
@@ -178,9 +178,30 @@ export default function EditResourcePage() {
})
}
</p>
<TagInput onAdd={(tag) => {
setTags([...tags, tag])
}} />
<div className={"flex items-center"}>
<TagInput onAdd={(tag) => {
setTags((prev) => {
const existingTag = prev.find(t => t.id === tag.id);
if (existingTag) {
return prev; // If the tag already exists, do not add it again
}
return [...prev, tag];
})
}} />
<span className={"w-4"}/>
<QuickAddTagDialog onAdded={(tags) => {
setTags((prev) => {
const newTags = [...prev];
for (const tag of tags) {
const existingTag = newTags.find(t => t.id === tag.id);
if (!existingTag) {
newTags.push(tag);
}
}
return newTags;
})
}}/>
</div>
<div className={"h-4"}></div>
<p className={"my-1"}>{t("Description")}</p>
<textarea className="textarea w-full min-h-80 p-4" value={article} onChange={(e) => setArticle(e.target.value)} />

View File

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
import { app } from "../app.ts";
import { ErrorAlert } from "../components/alert.tsx";
import {useAppContext} from "../components/AppContext.tsx";
import TagInput from "../components/tag_input.tsx";
import TagInput, {QuickAddTagDialog} from "../components/tag_input.tsx";
export default function PublishPage() {
const [title, setTitle] = useState<string>("")
@@ -154,9 +154,30 @@ export default function PublishPage() {
})
}
</p>
<TagInput onAdd={(tag) => {
setTags([...tags, tag])
}} />
<div className={"flex items-center"}>
<TagInput onAdd={(tag) => {
setTags((prev) => {
const existingTag = prev.find(t => t.id === tag.id);
if (existingTag) {
return prev; // If the tag already exists, do not add it again
}
return [...prev, tag];
})
}} />
<span className={"w-4"}/>
<QuickAddTagDialog onAdded={(tags) => {
setTags((prev) => {
const newTags = [...prev];
for (const tag of tags) {
const existingTag = newTags.find(t => t.id === tag.id);
if (!existingTag) {
newTags.push(tag);
}
}
return newTags;
})
}}/>
</div>
<div className={"h-4"}></div>
<p className={"my-1"}>{t("Description")}</p>
<textarea className="textarea w-full min-h-80 p-4" value={article} onChange={(e) => setArticle(e.target.value)} />