init project portal web
This commit is contained in:
Sweli Giri
66
lib/price-plan/view/combobox/index.tsx
Normal file
66
lib/price-plan/view/combobox/index.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { useState } from "react"
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
} from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type Props = {
|
||||
types: any[]
|
||||
value: string
|
||||
onChange: (val: string) => void
|
||||
}
|
||||
|
||||
export function ComboboxPricePlanType({ types, value, onChange }: Props) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const selected = types.find((item) => item.id === value)
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-full justify-between"
|
||||
>
|
||||
{selected ? selected.pricePlanTypeName : "Select priceplan type"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0 max-h-60 overflow-y-auto">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search priceplan type..." />
|
||||
<CommandEmpty>No type found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{types.map((item) => (
|
||||
<CommandItem
|
||||
key={item.id}
|
||||
value={item.pricePlanTypeName}
|
||||
onSelect={() => {
|
||||
onChange(item.id)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
item.id === value ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{item.pricePlanTypeName}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
87
lib/price-plan/view/data-table/index.tsx
Normal file
87
lib/price-plan/view/data-table/index.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
const DataTable = <TData, TValue>({
|
||||
data,
|
||||
columns,
|
||||
}: DataTableProps<TData, TValue>) => {
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="rounded-md mx-8 mt-4">
|
||||
<Table className="border-separate border-spacing-0">
|
||||
<TableHeader className="bg-primary rounded-lg">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === headerGroup.headers.length - 1;
|
||||
return (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className={`text-white ${isFirst ? "rounded-tl-md" : ""} ${isLast ? "rounded-tr-md" : ""}`}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id} className="border-b border-[#00879E]">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DataTable
|
||||
65
lib/price-plan/view/index.tsx
Normal file
65
lib/price-plan/view/index.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import ActionTable from "@/components/module/action-table"
|
||||
import DataTable from "@/components/module/data-table"
|
||||
import { usePricePlan } from "../view-model"
|
||||
import QueryWrapper from "@/components/module/query-wrapper"
|
||||
import React from "react"
|
||||
import PricePlanColumns from "../constant"
|
||||
import ModalCreatePriceplan from "./modal-create-priceplan"
|
||||
import pricePlanStore from "../store"
|
||||
import pricePlanFormStore from "../store/form-store"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
const Content = observer(() => {
|
||||
|
||||
const pricePlanVM = usePricePlan(pricePlanStore.getCurrentPage(), pricePlanStore.getSize(), pricePlanStore.getType(), pricePlanFormStore.resetForm)
|
||||
const data = pricePlanVM.data
|
||||
const extra = pricePlanVM.extra
|
||||
const ppTypes = pricePlanVM.ppTypes
|
||||
const serviceTypes = pricePlanVM.serviceTypes
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ActionTable onClickNew={() => pricePlanFormStore.setIsOpen(true)} />
|
||||
<DataTable
|
||||
data={data.getContent()}
|
||||
columns={PricePlanColumns({
|
||||
onClickDelete: (id: string) => {
|
||||
pricePlanStore.setIsAlertOpen(true)
|
||||
pricePlanStore.setPricePlanId(id)
|
||||
}
|
||||
})}
|
||||
pagination={{
|
||||
pageIndex: data.getCurrentPage(),
|
||||
pageSize: data.getPageSize(),
|
||||
pageCount: data.getTotalPages(),
|
||||
setPageIndex: pricePlanStore.setCurrentPage,
|
||||
setPageSize: pricePlanStore.setSize,
|
||||
}}
|
||||
alertDialog={{
|
||||
isOpen: pricePlanStore.getIsAlertOpen(),
|
||||
onCancel: () => pricePlanStore.setIsAlertOpen(false),
|
||||
onConfirm: () => extra.deletePricePlan(pricePlanStore.getPricePlanId()),
|
||||
setOpen: pricePlanStore.setIsAlertOpen
|
||||
}}
|
||||
/>
|
||||
<ModalCreatePriceplan
|
||||
ppTypes={ppTypes}
|
||||
serviceTypes={serviceTypes}
|
||||
onConfirm={extra.createPricePlan}
|
||||
onOpenChange={(val) => pricePlanFormStore.setIsOpen(val)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
const PricePlanList = () => {
|
||||
return (
|
||||
<QueryWrapper>
|
||||
<Content />
|
||||
</QueryWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default PricePlanList
|
||||
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
|
||||
92
lib/price-plan/view/sidebar/index.tsx
Normal file
92
lib/price-plan/view/sidebar/index.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
"use client"
|
||||
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
import { Sidebar, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
|
||||
import { ChevronDown, DollarSign, LayoutDashboard } from "lucide-react"
|
||||
import mainLogo from "@/images/Telkomcel.png"
|
||||
import Image from "next/image"
|
||||
import QueryWrapper from "@/components/module/query-wrapper"
|
||||
import Link from "next/link"
|
||||
import { useMenuPricePlan } from "../../view-model/sidebar-view-model"
|
||||
import { useEffect } from "react"
|
||||
import pricePlanStore from "../../store"
|
||||
|
||||
const Content = () => {
|
||||
const vm = useMenuPricePlan()
|
||||
|
||||
const resetState = pricePlanStore.reset
|
||||
|
||||
const onClickMenu = (id: string) => {
|
||||
pricePlanStore.setType(id)
|
||||
pricePlanStore.setCurrentPage(0)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
resetState()
|
||||
}
|
||||
}, [resetState])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Sidebar>
|
||||
<SidebarHeader className="mb-12">
|
||||
<div className="max-w-[80%] mt-4 ml-4">
|
||||
<Image src={mainLogo} alt="main-logo" />
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem className="px-2">
|
||||
<SidebarMenuButton>
|
||||
<Link href="/" className="flex items-center gap-2 w-full text-white/60">
|
||||
<LayoutDashboard size={14}/>
|
||||
<span className="text-lg font-light">Dashboard</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
{vm.getData().map((item, idx) => (
|
||||
<Collapsible defaultOpen className="group/collapsible" key={item.getParentName() + idx}>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel asChild onClick={() => onClickMenu("")}>
|
||||
<CollapsibleTrigger className="flex items-center gap-1 text-white">
|
||||
<DollarSign size={16} />
|
||||
<span className="text-lg font-light">
|
||||
{item.getParentName() === "S" ? "Subscribe" : item.getParentName()}
|
||||
</span>
|
||||
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
||||
</CollapsibleTrigger>
|
||||
</SidebarGroupLabel>
|
||||
</SidebarGroup>
|
||||
<CollapsibleContent className="px-6">
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{item.getPricePlanTypeDto().map((item) => (
|
||||
<SidebarMenuItem key={item.id}>
|
||||
<SidebarMenuButton asChild onClick={() => onClickMenu(item.id)}>
|
||||
<span className={`text-base hover:text-black-80 ${item.id == pricePlanStore.getType() ? "text-white" : "text-white/70"}`}>
|
||||
-
|
||||
<span>{item.pricePlanTypeName}</span>
|
||||
</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
))}
|
||||
</Sidebar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const PricePlanSidebar = () => {
|
||||
return (
|
||||
<QueryWrapper>
|
||||
<Content />
|
||||
</QueryWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default PricePlanSidebar
|
||||
Reference in New Issue
Block a user