Adding dropdown in directory.
This commit is contained in:
parent
8f6d877548
commit
7df9d47f07
@ -19,6 +19,8 @@ import SelectMultiple from "../common/SelectMultiple";
|
||||
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
|
||||
import InputSuggestions from "../common/InputSuggestion";
|
||||
import Label from "../common/Label";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageContact = ({ contactId, closeModal }) => {
|
||||
// fetch master data
|
||||
@ -194,7 +196,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
Name
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -210,6 +212,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
value={watch("organization") || ""}
|
||||
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
|
||||
error={errors.organization?.message}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@ -222,7 +225,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
Designation
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("designation")}
|
||||
onChange={handleDesignationChange}
|
||||
/>
|
||||
@ -257,7 +260,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</div>
|
||||
|
||||
{/* Emails + Phones */}
|
||||
<div className="row mt-1">
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6">
|
||||
{emailFields.map((field, index) => (
|
||||
<div
|
||||
@ -265,22 +268,39 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
className="row d-flex align-items-center mb-1"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactEmails.${index}.label`)}
|
||||
>
|
||||
<option value="Work">Work</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
<AppFormController
|
||||
name={`contactEmails.${index}.label`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Label"
|
||||
options={[
|
||||
{ id: "Work", name: "Work" },
|
||||
{ id: "Personal", name: "Personal" },
|
||||
{ id: "Other", name: "Other" }
|
||||
]}
|
||||
placeholder="Choose a Label"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.contactEmails?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<div className="col-7 text-start mt-n3">
|
||||
<label className="form-label">Email</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register(`contactEmails.${index}.emailAddress`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
@ -308,27 +328,43 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
|
||||
<div className="col-md-6">
|
||||
{phoneFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-2"
|
||||
>
|
||||
<div key={field.id} className="row d-flex align-items-center mb-2">
|
||||
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactPhones.${index}.label`)}
|
||||
>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Business">Business</option>
|
||||
</select>
|
||||
<AppFormController
|
||||
name={`contactPhones.${index}.label`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Label"
|
||||
options={[
|
||||
{ id: "Office", name: "Office" },
|
||||
{ id: "Personal", name: "Personal" },
|
||||
{ id: "Business", name: "Business" }
|
||||
]}
|
||||
placeholder="Choose a Label"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.contactPhones?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactPhones[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
|
||||
<div className="col-7 text-start mt-n3">
|
||||
<label className="form-label">Phone</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
@ -350,17 +386,19 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Category + Projects */}
|
||||
<div className="row my-1">
|
||||
<div className="row">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
className="form-select "
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
@ -402,13 +440,14 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="col-12 text-start">
|
||||
<div className="col-12 text-start mt-3">
|
||||
<TagInput
|
||||
name="tags"
|
||||
label="Tags"
|
||||
options={contactTags}
|
||||
isRequired={true}
|
||||
placeholder="Enter Tag"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
@ -417,8 +456,8 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
|
||||
{/* Buckets */}
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Bucket</label>
|
||||
<div className="col-md-12 mt-3 text-start">
|
||||
<label className="form-label mb-2">Select Bucket</label>
|
||||
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
{buckets?.map((item) => (
|
||||
@ -454,15 +493,15 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
rows="2"
|
||||
{...register("address")}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<div className="col-12 text-start mt-3">
|
||||
<label className="form-label">Description</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
rows="2"
|
||||
{...register("description")}
|
||||
/>
|
||||
|
||||
@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Label from "./Label";
|
||||
|
||||
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
|
||||
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
|
||||
const { setValue, watch } = useFormContext();
|
||||
const tags = watch(name) || [];
|
||||
const [input, setInput] = useState("");
|
||||
@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
|
||||
</Label>
|
||||
|
||||
<div
|
||||
className="form-control form-control-sm p-1"
|
||||
className={`form-control form-control-sm-${size}`}
|
||||
style={{ minHeight: "33px", position: "relative" }}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center gap-1">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user