Untitled
unknown
javascript
10 months ago
5.1 kB
7
Indexable
/* eslint-disable no-extra-boolean-cast */ import { InnovationCard as InnovationCardMyIde } from '@components/Cards/InnovationCard'; import NoData from '@components/NoData'; import color from '@constants/color'; import { MappedCategory } from '@hooks/useGetCategory'; import { MappedEntity } from '@hooks/useGetEntity'; import { useGetInnovations } from '@hooks/useGetInnovation'; import { MappedType } from '@hooks/useGetType'; import { Icon } from '@iconify/react/dist/iconify.js'; import { Loader, Select, Text, TextInput } from '@mantine/core'; import { getInnovationStatusSelectData } from '@utils/innovationStatus'; import { useState } from 'react'; export default function PanelMyIde() { const [search, setSearch] = useState(''); const [entityId, setEntityId] = useState(0); const [categoryId, setCategoryId] = useState(1); const [typeId, setTypeId] = useState(1); const [status, setStatus] = useState(0); const [year, setYear] = useState(2024); const { data, isFetching } = useGetInnovations({ typeId, categoryId, status, entityId, year: `${year}`, namaIde: search, }); const filteredDataList = data?.dataList?.filter((item) => item.status === 1) || []; const sortedDataList = filteredDataList?.sort( (a, b) => a.status - b.status ); console.log(data); return ( <div className="flex flex-col gap-5"> <section className="flex flex-col gap-4"> <TextInput leftSection={<Icon icon="ic:twotone-search" />} placeholder="Cari Ide Inovasi" size="md" className="w-full" onChange={(e) => { setSearch(e.target.value); }} /> <div className="flex justify-between gap-2"> <div className="mx-2 mt-2 flex content-center justify-between"> <Text size="sm" className="text-base-darkGray"> Menampilkan{' '} <span className="text-primary-main font-semibold"> {filteredDataList?.length} </span>{' '} Ide Inovasi </Text> </div> <div className="flex gap-x-4"> <div className="flex gap-2"> <Select placeholder="Entitas" data={MappedEntity()} clearable size="md" className="w-2/5" onChange={(e) => { setEntityId(Number(e)); }} /> <Select placeholder="Tipe" data={MappedType()} clearable size="md" className="w-2/5" onChange={(e) => { setTypeId(Number(e)); }} /> <Select placeholder="Kategori" data={MappedCategory()} clearable size="md" className="w-2/5" onChange={(e) => { setCategoryId(Number(e)); }} /> <Select placeholder="Status" data={getInnovationStatusSelectData(['submission'])} clearable size="md" className="w-2/5" onChange={(e) => { setStatus(Number(e)); }} /> </div> <div className="flex items-center justify-center"> <Icon icon="fluent:ios-arrow-24-filled" width={24} height={24} color={color.primary.main} className="cursor-pointer" onClick={() => setYear(year - 1)} /> <span className="text-lg font-bold text-primary-main"> {year} </span> <Icon icon="fluent:ios-arrow-24-filled" className="cursor-pointer" width={24} height={24} rotate={90} color={color.primary.main} onClick={() => setYear(year + 1)} /> </div> </div> </div> {isFetching && !data?.dataList?.length && ( <Loader className="mx-auto my-5" /> )} {sortedDataList?.length ? ( <div className="grid grid-cols-4 gap-4"> {sortedDataList.map((item) => ( <InnovationCardMyIde key={`comp-submission-${item.innovationId}`} name={item?.name} year={item?.year} entity={item?.entity} type={item?.type} category={item?.category} status={item?.status === 1 ? 'submission' : null} href={`/innovation-management-system/deliver/`} /> ))} </div> ) : ( <NoData label="Belum ada ide inovasi yang di submit oleh peserta" /> )} </section> </div> ); }
Editor is loading...
Leave a Comment