init project portal web
This commit is contained in:
Sweli Giri
196
lib/price-plan/view/modal-create-priceplan/index.tsx
Normal file
196
lib/price-plan/view/modal-create-priceplan/index.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { DatePicker } from "@/components/module/date-picker"
|
||||
import Backdrop from "@/components/module/backdrop"
|
||||
import { CreatePricePlanPayload } from "../../data/repository"
|
||||
import { format } from "date-fns"
|
||||
import pricePlanFormStore from "../../store/form-store"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface ModalCreatePriceplanProps {
|
||||
ppTypes: Array<{ [key: string]: string }>
|
||||
serviceTypes: Array<{ [key: string]: string }>
|
||||
onOpenChange: (open: boolean) => void
|
||||
onConfirm: (payload: CreatePricePlanPayload) => void
|
||||
}
|
||||
|
||||
const ModalCreatePriceplan = observer(({
|
||||
ppTypes,
|
||||
serviceTypes,
|
||||
onOpenChange,
|
||||
onConfirm
|
||||
}: ModalCreatePriceplanProps) => {
|
||||
|
||||
return (
|
||||
<Backdrop isOpen={pricePlanFormStore.getIsOpen()} onClose={() => onOpenChange(false)}>
|
||||
<Dialog open={pricePlanFormStore.getIsOpen()} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl" style={{ boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px" }}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Price Plan</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="mt-4">
|
||||
<section>
|
||||
<h3>Basic Information</h3>
|
||||
<div className="mt-4 px-4 grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label htmlFor="priceplan-type">Price Plan Type*</Label>
|
||||
<Select value={pricePlanFormStore.getOfferType()} onValueChange={(val) => pricePlanFormStore.setOfferType(val)}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue id="priceplan-type" placeholder="Select priceplan type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ppTypes.map((item) => (
|
||||
<SelectItem key={item.id} value={item.id}>
|
||||
{item.pricePlanTypeName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="priceplan-name">Price Plan Name*</Label>
|
||||
<Input
|
||||
id="priceplan-name"
|
||||
placeholder="Input name"
|
||||
value={pricePlanFormStore.getOfferName()}
|
||||
onChange={(event) => pricePlanFormStore.setOfferName(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="priceplan-code">Price Plan Code</Label>
|
||||
<Input
|
||||
id="priceplan-code"
|
||||
placeholder="Input code"
|
||||
value={pricePlanFormStore.getPricePlanCode()}
|
||||
onChange={(event) => pricePlanFormStore.setPricePlanCode(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="service-type">Service Type</Label>
|
||||
<Select
|
||||
value={pricePlanFormStore.getServiceType()}
|
||||
onValueChange={(val) => pricePlanFormStore.setServiceType(val)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue id="service-type" placeholder="Select service type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{serviceTypes.map((item: any) => (
|
||||
<SelectItem key={item.id} value={item.id.toString()}>
|
||||
{item.servTypeName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Valid Period*</Label>
|
||||
<div className="flex gap-2">
|
||||
<DatePicker
|
||||
placeholder="Start Date"
|
||||
value={pricePlanFormStore.getBaseValidPeriod()}
|
||||
onChange={(date) => pricePlanFormStore.setBaseValidPeriod(date)}
|
||||
/>
|
||||
<span>-</span>
|
||||
<DatePicker placeholder="End Date" value={undefined} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<Label>Remarks</Label>
|
||||
<Input
|
||||
placeholder="Input notes"
|
||||
value={pricePlanFormStore.getRemarks()}
|
||||
onChange={(event) => pricePlanFormStore.setRemarks(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-4">
|
||||
<h3>Version Information</h3>
|
||||
<div className="mt-4 px-4 grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label>Valid Period*</Label>
|
||||
<div className="flex gap-2">
|
||||
<DatePicker
|
||||
placeholder="Start Date"
|
||||
value={pricePlanFormStore.getVersionValidPeriod()}
|
||||
onChange={(date) => pricePlanFormStore.setVersionValidPeriod(date)}
|
||||
/>
|
||||
<span>-</span>
|
||||
<DatePicker placeholder="End Date" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="source-from">Source From</Label>
|
||||
<Select
|
||||
value={pricePlanFormStore.getSourceFrom()}
|
||||
onValueChange={(val) => pricePlanFormStore.setSourceFrom(val)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue id="source-from" placeholder="Select source from" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Share From</SelectItem>
|
||||
<SelectItem value="2">Copy From</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="copy-from">Copy From</Label>
|
||||
<Select
|
||||
value={pricePlanFormStore.getCopyFrom()}
|
||||
onValueChange={(val) => pricePlanFormStore.setCopyFrom(val)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue id="copy-from" placeholder="Select copy from" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Option 1</SelectItem>
|
||||
<SelectItem value="2">Option 2</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => {
|
||||
onOpenChange(false)
|
||||
pricePlanFormStore.resetForm
|
||||
}}>Cancel</Button>
|
||||
<Button
|
||||
disabled={!pricePlanFormStore.getOfferType() || !pricePlanFormStore.getOfferName() || !pricePlanFormStore.getBaseValidPeriod() || !pricePlanFormStore.getVersionValidPeriod()}
|
||||
onClick={() => onConfirm({
|
||||
offerName: pricePlanFormStore.getOfferName(),
|
||||
offerType: pricePlanFormStore.getOfferType(),
|
||||
pricePlanCode: pricePlanFormStore.getPricePlanCode(),
|
||||
serviceType: +pricePlanFormStore.getServiceType(),
|
||||
baseValidPeriod: format(pricePlanFormStore.getBaseValidPeriod()!, "yyyy-MM-dd"),
|
||||
remarks: pricePlanFormStore.getRemarks(),
|
||||
versionValidPeriod: format(pricePlanFormStore.getVersionValidPeriod()!, "yyyy-MM-dd")
|
||||
})}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Backdrop>
|
||||
)
|
||||
})
|
||||
|
||||
export default ModalCreatePriceplan
|
||||
Reference in New Issue
Block a user