-
Notifications
You must be signed in to change notification settings - Fork 181
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1316 from Shelf-nu/1208-feature-request-bulk-tagging
feat: bulk add and remove tags from assets
- Loading branch information
Showing
13 changed files
with
386 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { useEffect } from "react"; | ||
| import { useFetcher } from "@remix-run/react"; | ||
| import { useZorm } from "react-zorm"; | ||
| import { z } from "zod"; | ||
| import { BulkUpdateDialogContent } from "../bulk-update-dialog/bulk-update-dialog"; | ||
| import { Button } from "../shared/button"; | ||
| import { TagsAutocomplete, type TagSuggestion } from "../tag/tags-autocomplete"; | ||
|
|
||
| export const BulkAssignTagsSchema = z.object({ | ||
| assetIds: z.array(z.string()).min(1), | ||
| tags: z.string(), | ||
| }); | ||
|
|
||
| export default function BulkAssignTagsDialog() { | ||
| const zo = useZorm("BulkAssignTags", BulkAssignTagsSchema); | ||
|
|
||
| const fetcher = useFetcher(); | ||
| // @ts-ignore | ||
| const suggestions = fetcher.data?.filters.map((tagResponse) => ({ | ||
| label: tagResponse.name, | ||
| value: tagResponse.id, | ||
| })) as TagSuggestion[]; | ||
|
|
||
| useEffect(() => { | ||
| fetcher.submit( | ||
| { | ||
| name: "tag", | ||
| queryKey: "name", | ||
| queryValue: "", | ||
| }, | ||
| { | ||
| method: "GET", | ||
| action: "/api/model-filters", | ||
| } | ||
| ); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return ( | ||
| <BulkUpdateDialogContent | ||
| ref={zo.ref} | ||
| type="tag-add" | ||
| title="Assign tags to assets" | ||
| description="Assign tags to selected assets. Assets that already have any of the selected tags, will be skipped." | ||
| actionUrl="/api/assets/bulk-assign-tags" | ||
| arrayFieldId="assetIds" | ||
| > | ||
| {({ disabled, handleCloseDialog, fetcherError }) => ( | ||
| <div className="modal-content-wrapper"> | ||
| <div className="relative z-50 mb-8"> | ||
| <TagsAutocomplete existingTags={[]} suggestions={suggestions} /> | ||
|
|
||
| {zo.errors.tags()?.message ? ( | ||
| <p className="text-sm text-error-500"> | ||
| {zo.errors.tags()?.message} | ||
| </p> | ||
| ) : null} | ||
| {fetcherError ? ( | ||
| <p className="text-sm text-error-500">{fetcherError}</p> | ||
| ) : null} | ||
| </div> | ||
|
|
||
| <div className="flex gap-3"> | ||
| <Button | ||
| variant="secondary" | ||
| width="full" | ||
| disabled={disabled} | ||
| onClick={handleCloseDialog} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button variant="primary" width="full" disabled={disabled}> | ||
| Confirm | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </BulkUpdateDialogContent> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { useEffect } from "react"; | ||
| import { useFetcher } from "@remix-run/react"; | ||
| import { useZorm } from "react-zorm"; | ||
| import { z } from "zod"; | ||
| import { BulkUpdateDialogContent } from "../bulk-update-dialog/bulk-update-dialog"; | ||
| import { Button } from "../shared/button"; | ||
| import { TagsAutocomplete, type TagSuggestion } from "../tag/tags-autocomplete"; | ||
|
|
||
| export const BulkRemoveTagsSchema = z.object({ | ||
| assetIds: z.array(z.string()).min(1), | ||
| tags: z.string(), | ||
| }); | ||
|
|
||
| export default function BulkRemoveTagsDialog() { | ||
| const zo = useZorm("BulkRemoveTags", BulkRemoveTagsSchema); | ||
|
|
||
| const fetcher = useFetcher(); | ||
| // @ts-ignore | ||
| const suggestions = fetcher.data?.filters.map((tagResponse) => ({ | ||
| label: tagResponse.name, | ||
| value: tagResponse.id, | ||
| })) as TagSuggestion[]; | ||
|
|
||
| useEffect(() => { | ||
| fetcher.submit( | ||
| { | ||
| name: "tag", | ||
| queryKey: "name", | ||
| queryValue: "", | ||
| }, | ||
| { | ||
| method: "GET", | ||
| action: "/api/model-filters", | ||
| } | ||
| ); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return ( | ||
| <BulkUpdateDialogContent | ||
| ref={zo.ref} | ||
| type="tag-remove" | ||
| title="Remove tags from assets" | ||
| description="Remove tags to selected assets. Assets that don't have any of the selected tags, will be skipped." | ||
| actionUrl="/api/assets/bulk-assign-tags?remove=true" | ||
| arrayFieldId="assetIds" | ||
| > | ||
| {({ disabled, handleCloseDialog, fetcherError }) => ( | ||
| <div className="modal-content-wrapper"> | ||
| <div className="relative z-50 mb-8"> | ||
| <TagsAutocomplete existingTags={[]} suggestions={suggestions} /> | ||
|
|
||
| {zo.errors.tags()?.message ? ( | ||
| <p className="text-sm text-error-500"> | ||
| {zo.errors.tags()?.message} | ||
| </p> | ||
| ) : null} | ||
| {fetcherError ? ( | ||
| <p className="text-sm text-error-500">{fetcherError}</p> | ||
| ) : null} | ||
| </div> | ||
|
|
||
| <div className="flex gap-3"> | ||
| <Button | ||
| variant="secondary" | ||
| width="full" | ||
| disabled={disabled} | ||
| onClick={handleCloseDialog} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button variant="primary" width="full" disabled={disabled}> | ||
| Confirm | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </BulkUpdateDialogContent> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.