feat: add country, state, city job input with options
This commit is contained in:
mehedi-hasan
parent
64be0f87b1
commit
645f731a74
|
|
@ -31,7 +31,7 @@ import { cn } from "@/lib/utils";
|
|||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { AlertTriangleIcon, Trash, Trash2Icon } from "lucide-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
|
||||
|
||||
interface ProfileFormType {
|
||||
|
|
@ -60,6 +60,8 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
const delta = currentStep - previousStep;
|
||||
const [countryGeoId, setCountryGeoId] = 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 = {
|
||||
// state: "",
|
||||
|
|
@ -70,6 +72,7 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
startdate: "",
|
||||
enddate: "",
|
||||
jobcountry: "",
|
||||
jobstate: "",
|
||||
jobcity: "",
|
||||
},
|
||||
],
|
||||
|
|
@ -155,6 +158,7 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
`jobs.${index}.startdate`,
|
||||
`jobs.${index}.enddate`,
|
||||
`jobs.${index}.jobcountry`,
|
||||
`jobs.${index}.jobstate`,
|
||||
`jobs.${index}.jobcity`,
|
||||
// Add other field names as needed
|
||||
])
|
||||
|
|
@ -191,8 +195,6 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
const countries = [{ id: "1", name: "india" }];
|
||||
const cities = [{ id: "1", name: "kerala" }];
|
||||
|
||||
console.log(form.getValues());
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -520,31 +522,42 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Job country</FormLabel>
|
||||
<Select
|
||||
disabled={loading}
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
defaultValue={field.value}
|
||||
placeholder="Select your job country"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{countries.map((country) => (
|
||||
<SelectItem
|
||||
key={country.id}
|
||||
value={country.id}
|
||||
>
|
||||
{country.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Geolocation
|
||||
geoId={null}
|
||||
onChange={(country, geoId) => {
|
||||
setCountryGeoId2(geoId);
|
||||
field.onChange(country);
|
||||
}}
|
||||
isCountry
|
||||
placeholderText="Select job country"
|
||||
searchPlaceholder="Search country..."
|
||||
emptyPlaceholder="No country found"
|
||||
isDisabled={false}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`jobs.${index}.jobstate`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Job State</FormLabel>
|
||||
<Geolocation
|
||||
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 />
|
||||
</FormItem>
|
||||
)}
|
||||
|
|
@ -555,28 +568,16 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Job city</FormLabel>
|
||||
<Select
|
||||
disabled={loading}
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<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>
|
||||
<Geolocation
|
||||
geoId={stateGeoId2}
|
||||
onChange={(v) => field.onChange(v)}
|
||||
isCountry={false}
|
||||
placeholderText="Select job city"
|
||||
searchPlaceholder="Search city..."
|
||||
emptyPlaceholder="No city found"
|
||||
isDisabled={!stateGeoId2}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
|
|
@ -599,6 +600,7 @@ export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
|||
startdate: "",
|
||||
enddate: "",
|
||||
jobcountry: "",
|
||||
jobstate: "",
|
||||
jobcity: "",
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export const profileSchema = z.object({
|
|||
jobs: z.array(
|
||||
z.object({
|
||||
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" }),
|
||||
jobtitle: z.string(),
|
||||
// .min(3, { message: "First Name must be at least 3 characters" }),
|
||||
|
|
|
|||
Loading…
Reference in New Issue