feat: create filter #160
feat: create filter #160
Conversation
|
packages/react/src/react/views/collections/list/toolbar/search.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/react/views/collections/list/list.client.tsx
Outdated
Show resolved
Hide resolved
|
Any comments are welcome |
|
Do you have any screen record on this feature? Also, please change the head to #162 due to big refactoring |
|
screen record link is above image or here Screen.Recording.2568-08-26.at.21.55.47.mp4not sure why preview didnt show up |
| search: z.string().optional(), | ||
| sortBy: z.string().optional(), | ||
| sortOrder: z.enum(['asc', 'desc']).optional(), | ||
| filter: z.string().optional(), |
There was a problem hiding this comment.
We can accept object via query params as well. Try to checkout this library https://www.npmjs.com/package/qs
| export function parseFilterStringToKeyValueMap(filterString: string): Record<string, any> { | ||
| try { | ||
| const parsed = JSON.parse(filterString) | ||
| if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) { | ||
| return parsed as Record<string, any> | ||
| } | ||
| } catch { | ||
| // Bad input, not an object. Ignore all | ||
| } | ||
| return {} | ||
| } |
There was a problem hiding this comment.
This function can be removed if we integrated query with qs https://www.npmjs.com/package/qs
packages/react/src/react/views/collections/list/toolbar/filter.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/react/views/collections/list/toolbar/search.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/react/views/collections/list/toolbar/components/filter/filter-helper.ts
Outdated
Show resolved
Hide resolved
| return null | ||
| } | ||
|
|
||
| export const transformFilterToPrismaString = (filters: MinimalFilter[]) => { |
There was a problem hiding this comment.
This function should not be in this Frontend code.
Also, to constructing Prisma Payload in Frontend-side. Try to create yourown interface for filters
interface ClientFilters {
// some spec which might look complex
}
// in component
const [filters, setFilters] = useState<ClientFilters | null>(null)
// sending request to server
const response = await fetch("/options", {
body: {
search: search,
filters: filters
}
})
// in findMany handler
const filters = query.filters
const prismaWhere = transformClientFiltersToPrismaWhere(filters) // You need to write a unit test on this function as well.
const result = await prisma.something.findMany({
where: prismaWhere
})
}Disclaimer: The name of the interface is not well. Try to use another name.
packages/react/src/react/views/collections/list/toolbar/components/filter/filter-panel.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/react/views/collections/list/toolbar/components/filter/panel-content.tsx
Outdated
Show resolved
Hide resolved
| label: '', | ||
| }) | ||
|
|
||
| const [chosenFilter, setChosenFilter] = useState<MinimalFilter[]>([]) |
There was a problem hiding this comment.
Try to use useFieldArray or FormFieldArray
|
I also have a comment on UX. But I will discuss with you offline. |
|
Moved to #166 |
3 participants
Why did you create this PR
https://linear.app/metier/issue/TTC-187/genseki-filter
What did you do
single selectanddate rangetype )Screenshots / Recordings
https://github.com/user-attachments/assets/20b4a6fa-83e2-4d45-a860-98f984621604
Checklist