mehedi
/
skilld-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add country, state, city job input with options

This commit is contained in:
mehedi-hasan 2024-05-01 17:19:41 +06:00
parent 64be0f87b1
commit 645f731a74
2 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/forms/user-profile-stepper/create-profile.tsx
View File

@ -31,7 +31,7 @@ import { cn } from "@/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangleIcon, Trash, Trash2Icon } from "lucide-react"; import { AlertTriangleIcon, Trash, Trash2Icon } from "lucide-react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useEffect, useState } from "react";
import { SubmitHandler, useFieldArray, useForm } from "react-hook-form"; import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
interface ProfileFormType { interface ProfileFormType {
@ -60,6 +60,8 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
const delta = currentStep - previousStep; const delta = currentStep - previousStep;
const [countryGeoId, setCountryGeoId] = useState<null | number>(null); const [countryGeoId, setCountryGeoId] = useState<null | number>(null);
const [stateGeoId, setStateGeoId] = useState<null | number>(null); const [stateGeoId, setStateGeoId] = useState<null | number>(null);
const [countryGeoId2, setCountryGeoId2] = useState<null | number>(null);
const [stateGeoId2, setStateGeoId2] = useState<null | number>(null);
const defaultValues = { const defaultValues = {
// state: "", // state: "",
@ -70,6 +72,7 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
startdate: "", startdate: "",
enddate: "", enddate: "",
jobcountry: "", jobcountry: "",
jobstate: "",
jobcity: "", jobcity: "",
}, },
], ],
@ -155,6 +158,7 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
`jobs.${index}.startdate`, `jobs.${index}.startdate`,
`jobs.${index}.enddate`, `jobs.${index}.enddate`,
`jobs.${index}.jobcountry`, `jobs.${index}.jobcountry`,
`jobs.${index}.jobstate`,
`jobs.${index}.jobcity`, `jobs.${index}.jobcity`,
// Add other field names as needed // Add other field names as needed
]) ])
@ -191,8 +195,6 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
const countries = [{ id: "1", name: "india" }]; const countries = [{ id: "1", name: "india" }];
const cities = [{ id: "1", name: "kerala" }]; const cities = [{ id: "1", name: "kerala" }];
console.log(form.getValues());
return ( return (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -520,31 +522,42 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Job country</FormLabel> <FormLabel>Job country</FormLabel>
<Select <Geolocation
disabled={loading} geoId={null}
onValueChange={field.onChange} onChange={(country, geoId) => {
value={field.value} setCountryGeoId2(geoId);
defaultValue={field.value} field.onChange(country);
> }}
<FormControl> isCountry
<SelectTrigger> placeholderText="Select job country"
<SelectValue searchPlaceholder="Search country..."
defaultValue={field.value} emptyPlaceholder="No country found"
placeholder="Select your job country" isDisabled={false}
/> />
</SelectTrigger>
</FormControl> <FormMessage />
<SelectContent> </FormItem>
{countries.map((country) => ( )}
<SelectItem />
key={country.id} <FormField
value={country.id} control={form.control}
> name={`jobs.${index}.jobstate`}
{country.name} render={({ field }) => (
</SelectItem> <FormItem>
))} <FormLabel>Job State</FormLabel>
</SelectContent> <Geolocation
</Select> geoId={countryGeoId2}
onChange={(state, geoId) => {
setStateGeoId2(geoId);
field.onChange(state);
}}
isCountry={false}
placeholderText="Select job state"
searchPlaceholder="Search state..."
emptyPlaceholder="No state found"
isDisabled={!countryGeoId2}
/>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -555,28 +568,16 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Job city</FormLabel> <FormLabel>Job city</FormLabel>
<Select <Geolocation
disabled={loading} geoId={stateGeoId2}
onValueChange={field.onChange} onChange={(v) => field.onChange(v)}
value={field.value} isCountry={false}
defaultValue={field.value} placeholderText="Select job city"
> searchPlaceholder="Search city..."
<FormControl> emptyPlaceholder="No city found"
<SelectTrigger> isDisabled={!stateGeoId2}
<SelectValue />
defaultValue={field.value}
placeholder="Select your job city"
/>
</SelectTrigger>
</FormControl>
<SelectContent>
{cities.map((city) => (
<SelectItem key={city.id} value={city.id}>
{city.name}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -599,6 +600,7 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
startdate: "", startdate: "",
enddate: "", enddate: "",
jobcountry: "", jobcountry: "",
jobstate: "",
jobcity: "", jobcity: "",
}) })
} }

1
src/lib/form-schema.ts
View File

@ -34,6 +34,7 @@ export const profileSchema = z.object({
jobs: z.array( jobs: z.array(
z.object({ z.object({
jobcountry: z.string().min(1, { message: "Please select a country" }), jobcountry: z.string().min(1, { message: "Please select a country" }),
jobstate: z.string().min(1, { message: "Please select a job state" }),
jobcity: z.string().min(1, { message: "Please select a city" }), jobcity: z.string().min(1, { message: "Please select a city" }),
jobtitle: z.string(), jobtitle: z.string(),
// .min(3, { message: "First Name must be at least 3 characters" }), // .min(3, { message: "First Name must be at least 3 characters" }),