add custom tags to edit page

hikka-io · Mar 6, 2024 · 994b407 · 994b407
1 parent 47ba8c5
commit 994b407
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 22 deletions.
diff --git a/app/(pages)/edit/[editId]/page.tsx b/app/(pages)/edit/[editId]/page.tsx
@@ -13,7 +13,7 @@ import getEdit from '@/services/api/edit/getEdit';
 import getQueryClient from '@/utils/getQueryClient';
 
 import EditView from '../_components/edit-view';
-import Content from '../_components/ui/content/content';
+import Content from '@/app/(pages)/edit/_components/content/content';
 import EditStatus from '../_components/ui/edit-status';
 import Actions from './_components/actions';
 import Author from './_components/author';

diff --git a/...onents/ui/content/_components/details.tsx → ...omponents/content/_components/details.tsx b/...onents/ui/content/_components/details.tsx → ...omponents/content/_components/details.tsx
diff --git a/...onents/ui/content/_components/general.tsx → ...omponents/content/_components/general.tsx b/...onents/ui/content/_components/general.tsx → ...omponents/content/_components/general.tsx
diff --git a/...)/edit/_components/ui/content/content.tsx → ...ges)/edit/_components/content/content.tsx b/...)/edit/_components/ui/content/content.tsx → ...ges)/edit/_components/content/content.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import General from '@/app/(pages)/edit/_components/ui/content/_components/general';
+import General from '@/app/(pages)/edit/_components/content/_components/general';
 import SubHeader from '@/components/sub-header';
 import { Button } from '@/components/ui/button';
 import { useSettingsContext } from '@/services/providers/settings-provider';
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const Component = ({ slug, content_type, content }: Props) => {
-    const [type, setType] = React.useState<'general' | 'details'>('general');
+    const [type, setType] = React.useState<'general' | 'details'>('details');
     const { titleLanguage } = useSettingsContext();
 
     if (!content) {
@@ -39,18 +39,18 @@ const Component = ({ slug, content_type, content }: Props) => {
         <div className="flex flex-col gap-8">
             <SubHeader title="Контент" variant="h4">
                 <Button
-                    variant={type === 'general' ? 'secondary' : 'outline'}
+                    variant={type === 'details' ? 'secondary' : 'outline'}
                     size="badge"
-                    onClick={() => setType('general')}
+                    onClick={() => setType('details')}
                 >
-                    Загальне
+                    Деталі
                 </Button>
                 <Button
-                    variant={type === 'details' ? 'secondary' : 'outline'}
+                    variant={type === 'general' ? 'secondary' : 'outline'}
                     size="badge"
-                    onClick={() => setType('details')}
+                    onClick={() => setType('general')}
                 >
-                    Деталі
+                    Загальне
                 </Button>
             </SubHeader>
             {type === 'general' && (

diff --git a/...ges)/edit/_components/ui/content/index.ts → ...(pages)/edit/_components/content/index.ts b/...ges)/edit/_components/ui/content/index.ts → ...(pages)/edit/_components/content/index.ts
diff --git a/app/(pages)/edit/_components/edit-description/_components/tags-modal.tsx b/app/(pages)/edit/_components/edit-description/_components/tags-modal.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import { UseFormSetValue } from 'react-hook-form/dist/types/form';
+import MaterialSymbolsAddRounded from '~icons/material-symbols/add-rounded';
+import MaterialSymbolsCheckSmallRounded from '~icons/material-symbols/check-small-rounded';
+import MaterialSymbolsDeleteForeverRounded from '~icons/material-symbols/delete-forever-rounded';
+
+
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useModalContext } from '@/services/providers/modal-provider';
+import { useSettingsContext } from '@/services/providers/settings-provider';
+
+
+interface Props {
+    setValue: UseFormSetValue<any>;
+}
+
+const Component = ({ setValue }: Props) => {
+    const { closeModal } = useModalContext();
+    const [newTag, setNewTag] = React.useState('');
+    const { setState: setSettingsState, editTags } = useSettingsContext();
+
+    const handleAddTag = () => {
+        setSettingsState!((prev) => ({
+            ...prev,
+            editTags: [...(prev?.editTags || []), newTag],
+        }));
+        setNewTag('');
+    };
+
+    const handleSetTag = (tag: string) => {
+        setValue('description', tag);
+        closeModal();
+    };
+
+    const handleRemoveTag = (tag: string) => {
+        setSettingsState!((prev) => ({
+            ...prev,
+            editTags: prev?.editTags?.filter((t) => t !== tag) || [],
+        }));
+    };
+
+    return (
+        <>
+            <div className="flex flex-col gap-4">
+                <div className="flex gap-2">
+                    <Input
+                        value={newTag}
+                        onChange={(e) => setNewTag(e.target.value)}
+                        className="flex-1 w-full"
+                    />
+                    <Button
+                        disabled={!newTag || newTag.trim().length === 0}
+                        variant="secondary"
+                        size="icon"
+                        onClick={handleAddTag}
+                    >
+                        <MaterialSymbolsAddRounded />
+                    </Button>
+                </div>
+            </div>
+
+            <hr className="h-[1px] w-auto -mx-6 bg-border" />
+
+            <div className="flex-1 overflow-y-scroll w-auto h-full -mx-6">
+                {editTags?.map((tag, index) => (
+                    <div
+                        key={tag + index}
+                        className="flex gap-2 items-center justify-between px-6 py-2"
+                    >
+                        <p className="text-sm line-clamp-2">{tag}</p>
+                        <div className="flex gap-2 items-center">
+                            <Button
+                                size="icon-md"
+                                variant="outline"
+                                onClick={() => handleRemoveTag(tag)}
+                            >
+                                <MaterialSymbolsDeleteForeverRounded className="text-lg" />
+                            </Button>
+                            <Button
+                                size="icon-md"
+                                variant="outline"
+                                onClick={() => handleSetTag(tag)}
+                            >
+                                <MaterialSymbolsCheckSmallRounded className="text-lg" />
+                            </Button>
+                        </div>
+                    </div>
+                ))}
+
+                {editTags?.length === 0 && (
+                    <div className="px-6">
+                        <p className="text-sm text-muted-foreground text-center">
+                            Не знайдено збережених тегів редагування
+                        </p>
+                    </div>
+                )}
+            </div>
+        </>
+    );
+};
+
+export default Component;
diff --git a/.../edit/_components/ui/edit-description.tsx → ...nts/edit-description/edit-description.tsx b/.../edit/_components/ui/edit-description.tsx → ...nts/edit-description/edit-description.tsx
@@ -1,25 +1,29 @@
-import * as React from 'react';
-import { Control, UseFormRegister, UseFormSetValue } from 'react-hook-form/dist/types/form';
-
+'use client';
 
+import * as React from 'react';
+import { Controller } from 'react-hook-form';
+import { Control, UseFormSetValue } from 'react-hook-form/dist/types/form';
 
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Textarea } from '@/components/ui/textarea';
-import { Controller } from 'react-hook-form';
-import { Input } from '@/components/ui/input';
+import { useModalContext } from '@/services/providers/modal-provider';
 
+import TagsModal from './_components/tags-modal';
+import { useSettingsContext } from '@/services/providers/settings-provider';
 
 interface Props {
     setValue?: UseFormSetValue<any>;
     control: Control<any>;
     disabled?: boolean;
 }
 
-const TAGS = ['Додано назву', 'Додано синоніми', 'Додано опис', 'Додано імʼя'];
 
 const Component = ({ setValue, control, disabled }: Props) => {
+    const { openModal } = useModalContext();
+    const { editTags } = useSettingsContext();
+
     return (
         <div className="flex flex-col gap-4 w-full">
             <Label className="flex justify-between">
@@ -29,16 +33,28 @@ const Component = ({ setValue, control, disabled }: Props) => {
             {setValue && (
                 <ScrollArea className="w-full whitespace-nowrap">
                     <div className="flex gap-2 w-full">
-                        {TAGS.map((tag) => (
+                        {editTags?.slice(0, 3).map((tag) => (
                             <Button
                                 size="badge"
                                 variant="outline"
                                 key={tag}
                                 onClick={() => setValue('description', tag)}
                             >
-                                {tag}
+                                {tag.slice(0, 20).trim().concat(tag.length > 20 ? '...' : '')}
                             </Button>
                         ))}
+                        <Button
+                            size="badge"
+                            variant="secondary"
+                            onClick={() =>
+                                openModal({
+                                    title: 'Теги редагування',
+                                    content: <TagsModal setValue={setValue} />,
+                                })
+                            }
+                        >
+                            Усі теги
+                        </Button>
                     </div>
                     <ScrollBar orientation="horizontal" />
                 </ScrollArea>
@@ -59,7 +75,6 @@ const Component = ({ setValue, control, disabled }: Props) => {
                     />
                 )}
             />
-
         </div>
     );
 };

diff --git a/app/(pages)/edit/_components/edit-description/index.ts b/app/(pages)/edit/_components/edit-description/index.ts
@@ -0,0 +1,3 @@
+import EditDescription from './edit-description';
+
+export default EditDescription;
diff --git a/app/(pages)/edit/_components/edit-form.tsx b/app/(pages)/edit/_components/edit-form.tsx
@@ -10,7 +10,7 @@ import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 
 import EditGroup from '@/app/(pages)/edit/_components/edit-group';
 import AutoButton from '@/app/(pages)/edit/_components/ui/auto-button';
-import EditDescription from '@/app/(pages)/edit/_components/ui/edit-description';
+import EditDescription from '@/app/(pages)/edit/_components/edit-description/edit-description';
 import { useContentData } from '@/app/(pages)/edit/page.hooks';
 import { Button } from '@/components/ui/button';
 import addEdit from '@/services/api/edit/addEdit';

diff --git a/app/(pages)/edit/_components/edit-view.tsx b/app/(pages)/edit/_components/edit-view.tsx
@@ -10,7 +10,7 @@ import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 
 import EditGroup from '@/app/(pages)/edit/_components/edit-group';
 import AutoButton from '@/app/(pages)/edit/_components/ui/auto-button';
-import EditDescription from '@/app/(pages)/edit/_components/ui/edit-description';
+import EditDescription from '@/app/(pages)/edit/_components/edit-description/edit-description';
 import { Button } from '@/components/ui/button';
 import updateEdit from '@/services/api/edit/updateEdit';
 import { useAuthContext } from '@/services/providers/auth-provider';

diff --git a/app/(pages)/edit/new/page.tsx b/app/(pages)/edit/new/page.tsx
@@ -10,7 +10,7 @@ import getAnimeInfo from '@/services/api/anime/getAnimeInfo';
 import getCharacterInfo from '@/services/api/characters/getCharacterInfo';
 import getQueryClient from '@/utils/getQueryClient';
 
-import Content from '../_components/ui/content/content';
+import Content from '@/app/(pages)/edit/_components/content/content';
 import EditForm from '../_components/edit-form';
 import RulesAlert from './_components/rules-alert';
 

diff --git a/services/providers/settings-provider.tsx b/services/providers/settings-provider.tsx
@@ -12,6 +12,7 @@ import {
 
 interface State {
     titleLanguage?: 'title_en' | 'title_ua' | 'title_ja';
+    editTags?: string[];
 }
 
 interface ContextProps extends State {
@@ -35,6 +36,7 @@ async function getInitialState(): Promise<State> {
 
     return {
         titleLanguage: 'title_ua',
+        editTags: ['Додано назву', 'Додано синоніми', 'Додано опис', 'Додано імʼя'],
     };
 }
 
@@ -65,4 +67,4 @@ export default function SettingsProvider({ children }: Props) {
             {children}
         </SettingsContext.Provider>
     );
-}
+}