Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-12 15:52:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

Dialogs that accept keywords, track pending inputs

Browse Source 
In every dialog component that allows the input of Keyword, instantiate
a pendingKeyword State to track if the BadgeIput element has a pending
input
This commit is contained in:
CorreyL
2024-01-18 19:42:24 -08:00
parent da23b06f71
commit 390f274d06
4 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
View File

@ -15,6 +15,7 @@ import {
RichInput,
} from "@reactive-resume/ui";
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -36,6 +37,8 @@ export const CustomSectionDialog = () => {
resolver: zodResolver(formSchema),
});
const [pendingKeyword, setPendingKeyword] = useState("");
if (!payload) return null;
return (
@ -43,6 +46,7 @@ export const CustomSectionDialog = () => {
form={form}
id={payload.id as DialogName}
defaultValues={defaultCustomSection}
pendingKeyword={pendingKeyword}
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<FormField
@ -144,7 +148,7 @@ export const CustomSectionDialog = () => {
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>
<BadgeInput {...field} />
<BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
</FormControl>
<FormDescription>
{t`You can add multiple keywords by separating them with a comma or pressing enter.`}

12
apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
View File

@ -14,6 +14,7 @@ import {
Input,
} from "@reactive-resume/ui";
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -29,8 +30,15 @@ export const InterestsDialog = () => {
resolver: zodResolver(formSchema),
});
const [pendingKeyword, setPendingKeyword] = useState("");
return (
<SectionDialog<FormValues> id="interests" form={form} defaultValues={defaultInterest}>
<SectionDialog<FormValues>
id="interests"
form={form}
defaultValues={defaultInterest}
pendingKeyword={pendingKeyword}
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<FormField
name="name"
@ -54,7 +62,7 @@ export const InterestsDialog = () => {
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>
<BadgeInput {...field} />
<BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
</FormControl>
<FormDescription>
{t`You can add multiple keywords by separating them with a comma or pressing enter.`}

12
apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
View File

@ -15,6 +15,7 @@ import {
RichInput,
} from "@reactive-resume/ui";
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -33,8 +34,15 @@ export const ProjectsDialog = () => {
resolver: zodResolver(formSchema),
});
const [pendingKeyword, setPendingKeyword] = useState("");
return (
<SectionDialog<FormValues> id="projects" form={form} defaultValues={defaultProject}>
<SectionDialog<FormValues>
id="projects"
form={form}
defaultValues={defaultProject}
pendingKeyword={pendingKeyword}
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<FormField
name="name"
@ -121,7 +129,7 @@ export const ProjectsDialog = () => {
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>
<BadgeInput {...field} />
<BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
</FormControl>
<FormDescription>
{t`You can add multiple keywords by separating them with a comma or pressing enter.`}

12
apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
View File

@ -15,6 +15,7 @@ import {
Slider,
} from "@reactive-resume/ui";
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -30,8 +31,15 @@ export const SkillsDialog = () => {
resolver: zodResolver(formSchema),
});
const [pendingKeyword, setPendingKeyword] = useState("");
return (
<SectionDialog<FormValues> id="skills" form={form} defaultValues={defaultSkill}>
<SectionDialog<FormValues>
id="skills"
form={form}
defaultValues={defaultSkill}
pendingKeyword={pendingKeyword}
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<FormField
name="name"
@ -98,7 +106,7 @@ export const SkillsDialog = () => {
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>
<BadgeInput {...field} />
<BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
</FormControl>
<FormDescription>
{t`You can add multiple keywords by separating them with a comma or pressing enter.`}