more
This commit is contained in:
Kenneth Jannette
@@ -22,6 +22,7 @@ import { createCaseAdditionalFields as fields } from "../../Constants/Fields/Cre
|
|||||||
import { objectMap } from "../../Utils/Object";
|
import { objectMap } from "../../Utils/Object";
|
||||||
import { Typeahead } from "react-bootstrap-typeahead";
|
import { Typeahead } from "react-bootstrap-typeahead";
|
||||||
import { caseTags } from "../../Constants/Tags/CaseTags";
|
import { caseTags } from "../../Constants/Tags/CaseTags";
|
||||||
|
import "../../styles/casetype-page.scss";
|
||||||
|
|
||||||
const CaseTypePage = ({ caseData }) => {
|
const CaseTypePage = ({ caseData }) => {
|
||||||
const { caseId } = useParams();
|
const { caseId } = useParams();
|
||||||
@@ -110,158 +111,194 @@ const CaseTypePage = ({ caseData }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="casetype-container">
|
<div className="casetype-container">
|
||||||
<div className="casetype-heading-container">
|
<Form className="casetype-form">
|
||||||
<div>Additional Case Details</div>
|
<Row>
|
||||||
<div></div>
|
<Col className="mb-3">
|
||||||
<Form>
|
{isEditing ? (
|
||||||
<Row className="modal-caption-row">
|
<div className="edit-modal-label">Case Type</div>
|
||||||
<Col>
|
) : (
|
||||||
<div className="foo-bar-row">
|
<></>
|
||||||
<div className="typeahead-box">
|
)}
|
||||||
<div className="edit-modal-label">Case type</div>
|
<Typeahead
|
||||||
<Typeahead
|
className="flex-grow-1 create-case-taginput"
|
||||||
className="flex-grow-1 create-case-taginput"
|
id="case-type-search"
|
||||||
id="case-type-search"
|
labelKey="tagName"
|
||||||
labelKey="tagName"
|
options={parsedTags}
|
||||||
options={parsedTags}
|
minLength={1}
|
||||||
minLength={1}
|
ref={typeaheadRef}
|
||||||
ref={typeaheadRef}
|
placeholder="Case Type - start typing"
|
||||||
placeholder="Case Type - start typing"
|
onChange={(selected) => {
|
||||||
onChange={(selected) => {
|
let item = null;
|
||||||
let item = null;
|
for (const currentItem of selected) {
|
||||||
for (const currentItem of selected) {
|
item = { ...currentItem };
|
||||||
item = { ...currentItem };
|
}
|
||||||
}
|
setSelectedTag(item);
|
||||||
setSelectedTag(item);
|
typeaheadRef.current.clear();
|
||||||
typeaheadRef.current.clear();
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
<div className="case-tag-container">
|
||||||
<div className="case-tag-container">
|
{selectedCaseTags.map((tag, i) => (
|
||||||
{selectedCaseTags.map((tag, i) => (
|
<div className="tag-container">
|
||||||
<div className="tag-container">
|
<div className="tag-box">
|
||||||
<div className="tag-box">
|
<div className="tag-ex-box">
|
||||||
<div className="tag-ex-box">
|
<div className="tag-ex"> x</div>
|
||||||
<div className="tag-ex"> x</div>
|
</div>
|
||||||
</div>
|
<div className="casetag-name">{tag}</div>
|
||||||
<div className="casetag-name">{tag}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col className="mb-3">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="edit-modal-label">Position</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col className="mb-3">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="edit-modal-label">Lead Attorney</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<TextInput
|
||||||
|
key={"leadAttorneys"}
|
||||||
|
name={"leadAttorneys"}
|
||||||
|
value={data.leadAttorneys.value}
|
||||||
|
error={data.leadAttorneys.error}
|
||||||
|
message={data.leadAttorneys.message}
|
||||||
|
disabled={isBusy}
|
||||||
|
onChange={(e) => handleChangeInput(e, "leadAttorneys")}
|
||||||
|
label={
|
||||||
|
data.leadAttorneys.value.length === 0
|
||||||
|
? isEditing
|
||||||
|
? caseData.leadAttorneys
|
||||||
|
: "Lead Attornery(s)"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col className="mb-3">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="edit-modal-label">Billing code</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<TextInput
|
||||||
|
key={"billingCode"}
|
||||||
|
name={"billingCode"}
|
||||||
|
value={data.billingCode.value}
|
||||||
|
error={data.billingCode.error}
|
||||||
|
message={data.billingCode.message}
|
||||||
|
disabled={isBusy}
|
||||||
|
onChange={(e) => handleChangeInput(e, "billingCode")}
|
||||||
|
label={
|
||||||
|
data.billingCode.value.length === 0
|
||||||
|
? isEditing
|
||||||
|
? caseData.billingCode
|
||||||
|
: "Billing Code"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col className="mb-3">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="edit-modal-label">Contact Name</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<TextInput
|
||||||
|
key={"contactName"}
|
||||||
|
name={"contactName"}
|
||||||
|
value={data.contactName.value}
|
||||||
|
error={data.contactName.error}
|
||||||
|
message={data.contactName.message}
|
||||||
|
disabled={isBusy}
|
||||||
|
onChange={(e) => handleChangeInput(e, "contactLastName")}
|
||||||
|
label={
|
||||||
|
data.contactName.value.length === 0
|
||||||
|
? isEditing
|
||||||
|
? caseData.contactName
|
||||||
|
: "Contact Name"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col className="mb-3">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="edit-modal-label">Contact email</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<TextInput
|
||||||
|
key={"contactEmail"}
|
||||||
|
name={"contactEmail"}
|
||||||
|
value={data.contactEmail.value}
|
||||||
|
error={data.contactEmail.error}
|
||||||
|
message={data.contactEmail.message}
|
||||||
|
disabled={isBusy}
|
||||||
|
onChange={(e) => handleChangeInput(e, "contactEmail")}
|
||||||
|
label={
|
||||||
|
data.contactEmail.value.length === 0
|
||||||
|
? isEditing
|
||||||
|
? caseData.contactEmail
|
||||||
|
: "Contact Email"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
<div className="radio-group-wrapper">
|
export default CaseTypePage;
|
||||||
<Radiogroup
|
|
||||||
|
/*
|
||||||
|
<Typeahead
|
||||||
|
className="flex-grow-1 create-case-taginput"
|
||||||
|
id="case-type-search"
|
||||||
|
labelKey="tagName"
|
||||||
|
options={parsedTags}
|
||||||
|
minLength={1}
|
||||||
|
ref={typeaheadRef}
|
||||||
|
placeholder="Case Type - start typing"
|
||||||
|
onChange={(selected) => {
|
||||||
|
let item = null;
|
||||||
|
for (const currentItem of selected) {
|
||||||
|
item = { ...currentItem };
|
||||||
|
}
|
||||||
|
setSelectedTag(item);
|
||||||
|
typeaheadRef.current.clear();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="case-tag-container">
|
||||||
|
{selectedCaseTags.map((tag, i) => (
|
||||||
|
<div className="tag-container">
|
||||||
|
<div className="tag-box">
|
||||||
|
<div className="tag-ex-box">
|
||||||
|
<div className="tag-ex"> x</div>
|
||||||
|
</div>
|
||||||
|
<div className="casetag-name">{tag}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Radiogroup
|
||||||
title="Client position"
|
title="Client position"
|
||||||
options={radioOptions}
|
options={radioOptions}
|
||||||
value={data.clientPosition.value}
|
value={data.clientPosition.value}
|
||||||
disabled={isBusy}
|
disabled={isBusy}
|
||||||
onClick={(e) => handleChangeInput(e, "clientPosition")}
|
onClick={(e) => handleChangeInput(e, "clientPosition")}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
*/
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col className="mb-3">
|
|
||||||
{isEditing ? (
|
|
||||||
<div className="edit-modal-label">Lead Attorney</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<TextInput
|
|
||||||
key={"leadAttorneys"}
|
|
||||||
name={"leadAttorneys"}
|
|
||||||
value={data.leadAttorneys.value}
|
|
||||||
error={data.leadAttorneys.error}
|
|
||||||
message={data.leadAttorneys.message}
|
|
||||||
disabled={isBusy}
|
|
||||||
onChange={(e) => handleChangeInput(e, "leadAttorneys")}
|
|
||||||
label={
|
|
||||||
data.leadAttorneys.value.length === 0
|
|
||||||
? isEditing
|
|
||||||
? caseData.leadAttorneys
|
|
||||||
: "Lead Attornery(s)"
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col className="mb-3">
|
|
||||||
{isEditing ? (
|
|
||||||
<div className="edit-modal-label">Billing code</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<TextInput
|
|
||||||
key={"billingCode"}
|
|
||||||
name={"billingCode"}
|
|
||||||
value={data.billingCode.value}
|
|
||||||
error={data.billingCode.error}
|
|
||||||
message={data.billingCode.message}
|
|
||||||
disabled={isBusy}
|
|
||||||
onChange={(e) => handleChangeInput(e, "billingCode")}
|
|
||||||
label={
|
|
||||||
data.billingCode.value.length === 0
|
|
||||||
? isEditing
|
|
||||||
? caseData.billingCode
|
|
||||||
: "Billing Code"
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col className="mb-3">
|
|
||||||
{isEditing ? (
|
|
||||||
<div className="edit-modal-label">Contact Name</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<TextInput
|
|
||||||
key={"contactName"}
|
|
||||||
name={"contactName"}
|
|
||||||
value={data.contactName.value}
|
|
||||||
error={data.contactName.error}
|
|
||||||
message={data.contactName.message}
|
|
||||||
disabled={isBusy}
|
|
||||||
onChange={(e) => handleChangeInput(e, "contactLastName")}
|
|
||||||
label={
|
|
||||||
data.contactName.value.length === 0
|
|
||||||
? isEditing
|
|
||||||
? caseData.contactName
|
|
||||||
: "Contact Name"
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col className="mb-3">
|
|
||||||
{isEditing ? (
|
|
||||||
<div className="edit-modal-label">Contact email</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<TextInput
|
|
||||||
key={"contactEmail"}
|
|
||||||
name={"contactEmail"}
|
|
||||||
value={data.contactEmail.value}
|
|
||||||
error={data.contactEmail.error}
|
|
||||||
message={data.contactEmail.message}
|
|
||||||
disabled={isBusy}
|
|
||||||
onChange={(e) => handleChangeInput(e, "contactEmail")}
|
|
||||||
label={
|
|
||||||
data.contactEmail.value.length === 0
|
|
||||||
? isEditing
|
|
||||||
? caseData.contactEmail
|
|
||||||
: "Contact Email"
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CaseTypePage;
|
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
.casetype-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
14
src/styles/casetype-page.scss
Normal file
14
src/styles/casetype-page.scss
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
.casetype-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.casetype-form {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.case-tag-container {
|
||||||
|
display: flex;
|
||||||
|
background-color: red;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user