1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
"use client";
import { Input, Select, SelectItem } from "@nextui-org/react"
import { Company } from "prisma/generated/client"
import { useEffect } from "react"
import { SelectOption } from "@/common/types/select"
import { useResultStore } from "@/common/stores/useResultStore";
import getClientCredential from "@/common/libs/getClientCredential";
import { SHOWING_SELECTIONS } from "@/common/constants/result";
const Filter = () => {
const { filter, updateFilter, companies, setCompanies } = useResultStore()
const credential = getClientCredential()
useEffect(() => {
if (credential && !filter.company)
updateFilter("company", credential.companyId.toString())
}, [credential, updateFilter, filter])
useEffect(() => {
loadCompany().then((data: SelectOption[]) => {
setCompanies(data)
})
}, [setCompanies])
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target
updateFilter(name, value)
}
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const { name, value } = e.target
updateFilter(name, value)
}
return (
<div className="flex flex-wrap md:flex-nowrap gap-3">
<div className="w-full md:w-10/12">
<Input
type="text"
label="Pencarian"
placeholder="Cari nama, sku, barcode, atau rak"
name="search"
onChange={handleInputChange}
value={filter.search}
/>
</div>
<div className="flex-1 md:w-2/12">
<Select
label="Perusahaan"
selectedKeys={filter.company}
name="company"
onChange={handleSelectChange}
isLoading={!filter.company}
>
{companies.map((company) => (
<SelectItem key={company.value}>{company.label}</SelectItem>
))}
</Select>
</div>
<div className="flex-1 md:w-2/12">
<Select
label="Tampilkan"
selectedKeys={filter.show}
name="show"
onChange={handleSelectChange}
>
{SHOWING_SELECTIONS.map((selection) => (
<SelectItem key={selection.key}>{selection.label}</SelectItem>
))}
</Select>
</div>
</div>
)
}
const loadCompany = async () => {
const response = await fetch(`/api/company`)
const data: Company[] = await response.json() || []
return data.map((company) => ({
value: company.id,
label: company.name
}))
}
export default Filter
|
