Skip to content

Commit

Permalink
Tailwinds ResourceCreate.tsx (#5667)
Browse files Browse the repository at this point in the history 
* tailwinds #4992

* fixes #5692

* adds missing required
  • Loading branch information
@rithviknishad
rithviknishad committed Jun 21, 2023
1 parent 8ad28b8 commit cdd1df3
Showing 1 changed file with 110 additions and 118 deletions.
228 changes: 110 additions & 118 deletions src/Components/Resource/ResourceCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
RESOURCE_SUBCATEGORIES,
} from "../../Common/constants";
import { parsePhoneNumberFromString } from "libphonenumber-js";
import { Card, CardContent } from "@material-ui/core";
import { phonePreg } from "../../Common/validation";

import { createResource, getAnyFacility } from "../../Redux/actions";
Expand All @@ -24,8 +23,9 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
import RadioFormField from "../Form/FormFields/RadioFormField";
import { FieldLabel } from "../Form/FormFields/FormField";
import Card from "../../CAREUI/display/Card";
import Page from "../Common/components/Page";

const PageTitle = loadable(() => import("../Common/PageTitle"));
const Loading = loadable(() => import("../Common/Loading"));

interface resourceProps {
Expand Down Expand Up @@ -219,121 +219,113 @@ export default function ResourceCreate(props: resourceProps) {
}

return (
<div className="px-2 pb-2">
<PageTitle
title={t("create_resource_request")}
crumbsReplacements={{
[facilityId]: { name: facilityName },
resource: { style: "pointer-events-none" },
}}
backUrl={`/facility/${facilityId}`}
/>
<div className="mt-4">
<Card>
<CardContent>
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
<TextFormField
required
label={t("contact_person")}
name="refering_facility_contact_name"
value={state.form.refering_facility_contact_name}
onChange={handleChange}
error={state.errors.refering_facility_contact_name}
/>
<PhoneNumberFormField
label={t("contact_phone")}
name="refering_facility_contact_number"
required
disableCountry
value={state.form.refering_facility_contact_number}
onChange={handleFormFieldChange}
error={state.errors.refering_facility_contact_number}
/>

<div className="md:col-span-2">
<FieldLabel required>{t("approving_facility")}</FieldLabel>
<FacilitySelect
multiple={false}
facilityType={1500}
name="approving_facility"
selected={state.form.approving_facility}
setSelected={(value: any) =>
handleValueChange(value, "approving_facility")
}
errors={state.errors.approving_facility}
/>
</div>

<SelectFormField
label={t("category")}
name="category"
required
value={state.form.category}
options={RESOURCE_CATEGORY_CHOICES}
optionLabel={(option: string) => option}
optionValue={(option: string) => option}
onChange={({ value }) => handleValueChange(value, "category")}
/>
<SelectFormField
label={t("sub_category")}
name="sub_category"
required
value={state.form.sub_category}
options={RESOURCE_SUBCATEGORIES}
optionLabel={(option: OptionsType) => option.text}
optionValue={(option: OptionsType) => option.id}
onChange={({ value }) =>
handleValueChange(value, "sub_category")
}
/>

<TextFormField
label={t("request_title")}
name="title"
placeholder={t("request_title_placeholder")}
value={state.form.title}
onChange={handleChange}
error={state.errors.title}
/>

<TextFormField
label={t("required_quantity")}
name="requested_quantity"
value={state.form.required_quantity}
onChange={handleChange}
/>

<div className="md:col-span-2">
<TextAreaFormField
label={t("request_description")}
name="reason"
rows={5}
required
placeholder={t("request_description_placeholder")}
value={state.form.reason}
onChange={handleChange}
error={state.errors.reason}
/>
</div>

<RadioFormField
label={t("is_this_an_emergency")}
name="emergency"
options={[true, false]}
optionDisplay={(o) => (o ? t("yes") : t("no"))}
optionValue={(o) => String(o)}
value={state.form.emergency}
onChange={handleChange}
/>

<div className="md:col-span-2 flex flex-col md:flex-row gap-2 justify-between mt-4">
<Cancel onClick={() => goBack()} />
<Submit onClick={handleSubmit} />
</div>
</div>
</CardContent>
</Card>
</div>
</div>
<Page
title={t("create_resource_request")}
crumbsReplacements={{
[facilityId]: { name: facilityName },
resource: { style: "pointer-events-none" },
}}
backUrl={`/facility/${facilityId}`}
>
<Card className="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
<TextFormField
required
label={t("contact_person")}
name="refering_facility_contact_name"
value={state.form.refering_facility_contact_name}
onChange={handleChange}
error={state.errors.refering_facility_contact_name}
/>
<PhoneNumberFormField
label={t("contact_phone")}
name="refering_facility_contact_number"
required
disableCountry
value={state.form.refering_facility_contact_number}
onChange={handleFormFieldChange}
error={state.errors.refering_facility_contact_number}
/>

<div>
<FieldLabel required>{t("approving_facility")}</FieldLabel>
<FacilitySelect
multiple={false}
facilityType={1500}
name="approving_facility"
selected={state.form.approving_facility}
setSelected={(value: any) =>
handleValueChange(value, "approving_facility")
}
errors={state.errors.approving_facility}
/>
</div>

<RadioFormField
label={t("is_this_an_emergency")}
name="emergency"
options={[true, false]}
optionDisplay={(o) => (o ? t("yes") : t("no"))}
optionValue={(o) => String(o)}
value={state.form.emergency}
onChange={handleChange}
/>

<SelectFormField
label={t("category")}
name="category"
required
value={state.form.category}
options={RESOURCE_CATEGORY_CHOICES}
optionLabel={(option: string) => option}
optionValue={(option: string) => option}
onChange={({ value }) => handleValueChange(value, "category")}
/>
<SelectFormField
label={t("sub_category")}
name="sub_category"
required
value={state.form.sub_category}
options={RESOURCE_SUBCATEGORIES}
optionLabel={(option: OptionsType) => option.text}
optionValue={(option: OptionsType) => option.id}
onChange={({ value }) => handleValueChange(value, "sub_category")}
/>

<TextFormField
label={t("request_title")}
name="title"
placeholder={t("request_title_placeholder")}
value={state.form.title}
onChange={handleChange}
error={state.errors.title}
required
/>

<TextFormField
label={t("required_quantity")}
name="requested_quantity"
value={state.form.required_quantity}
onChange={handleChange}
/>

<div className="md:col-span-2">
<TextAreaFormField
label={t("request_description")}
name="reason"
rows={5}
required
placeholder={t("request_description_placeholder")}
value={state.form.reason}
onChange={handleChange}
error={state.errors.reason}
/>
</div>

<div className="md:col-span-2 flex flex-col md:flex-row gap-2 justify-end mt-4">
<Cancel onClick={() => goBack()} />
<Submit onClick={handleSubmit} />
</div>
</Card>
</Page>
);
}

0 comments on commit cdd1df3

Please sign in to comment.