62 lines
2.8 KiB
TypeScript
62 lines
2.8 KiB
TypeScript
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
|
|
import { Button } from "@/components/ui/button"
|
|
import { OptionProps } from "@/lib/helper/type"
|
|
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
|
import { Ellipsis, PlusIcon } from "lucide-react"
|
|
import { observer } from "mobx-react-lite"
|
|
|
|
interface Props {
|
|
eventOptions: OptionProps[]
|
|
mainState: PricePlanDetailState
|
|
}
|
|
|
|
const UsageEvents = observer(({
|
|
eventOptions,
|
|
mainState
|
|
}:Props) => {
|
|
|
|
if (mainState.getFlow() < 1) return null
|
|
|
|
return (
|
|
<section className="col-span-3 border-r border-primary text-sm font-semibold">
|
|
<div className="flex justify-between p-2 border-b-2 border-primary">
|
|
<h4 className="text-center">Usage Event</h4>
|
|
<PlusIcon className="cursor-pointer" onClick={() => mainState.setUsageEventModalIsOpen(true)}/>
|
|
</div>
|
|
<ul className="py-2 space-y-2">
|
|
{eventOptions.filter(item => mainState.getUsageEventSelected().includes(item.value)).map((item, index) => (
|
|
<li
|
|
onClick={() => mainState.setEventSelected(item)}
|
|
key={index}
|
|
className={`list-none cursor-pointer px-6 ${item.value == mainState.getEventSelected()?.value ? "bg-blue-200" : ""}`}
|
|
>
|
|
<div className="flex justify-between gap-2 items-center">
|
|
<span>{item.name}</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6 p-0">
|
|
<Ellipsis className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
const updated = [...mainState.getUsageEventSelected()]
|
|
updated.splice(index, 1)
|
|
mainState.setUsageEventSelected(updated)
|
|
}}
|
|
className="text-red-500"
|
|
>
|
|
Remove
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
})
|
|
|
|
export default UsageEvents |