-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(os): sorting + hash state (#98)
* feat(os): sorting * feat(os): sorting
- Loading branch information
1 parent
8f958e9
commit f7b5cab
Showing
28 changed files
with
995 additions
and
360 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
src/services/ui/src/components/Opensearch/Filtering/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import { | ||
Sheet, | ||
SheetContent, | ||
SheetHeader, | ||
SheetTrigger, | ||
} from "@/components/Sheet"; | ||
import { SearchForm } from "@/components"; | ||
import { FC } from "react"; | ||
import { Icon, Typography } from "@enterprise-cmcs/macpro-ux-lib"; | ||
import { useOsParams } from "../useOpensearch"; | ||
import { OsExportButton } from "@/components/ExportButton"; | ||
|
||
export const OsFiltering: FC<{ disabled?: boolean }> = (props) => { | ||
const params = useOsParams(); | ||
|
||
return ( | ||
<div className="flex flex-row gap-2 border-[1px] border-slate-200"> | ||
<SearchForm | ||
handleSearch={(search) => | ||
params.onSet((s) => ({ | ||
...s, | ||
pagination: { ...s.pagination, number: 0 }, | ||
search, | ||
})) | ||
} | ||
disabled={!!props.disabled} | ||
/> | ||
<OsExportButton /> | ||
<Sheet> | ||
<SheetTrigger> | ||
<div className="flex flex-row item-center border-slate-100 px-4"> | ||
<Icon name="filter_list" /> | ||
<Typography size="md">Filters</Typography> | ||
</div> | ||
</SheetTrigger> | ||
<SheetContent className="bg-white"> | ||
<SheetHeader> | ||
<Typography size="lg">Filters</Typography> | ||
</SheetHeader> | ||
</SheetContent> | ||
</Sheet> | ||
</div> | ||
); | ||
}; |
22 changes: 22 additions & 0 deletions
22
src/services/ui/src/components/Opensearch/Provider/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { ReactNode } from "react"; | ||
import { createContextProvider } from "@/utils"; | ||
import { ReactQueryApiError, SearchData } from "shared-types"; | ||
|
||
type ContextState = { | ||
data: SearchData | undefined; | ||
isLoading: boolean; | ||
error: ReactQueryApiError | null; | ||
}; | ||
|
||
export const [OsContextProvider, useOsContext] = | ||
createContextProvider<ContextState>({ | ||
name: "OsSearch Context", | ||
errorMessage: "forgot to wrap with OsProvider", | ||
}); | ||
|
||
export const OsProvider = (props: { | ||
children: ReactNode; | ||
value: ContextState; | ||
}) => { | ||
return <OsContextProvider {...props} />; | ||
}; |
64 changes: 64 additions & 0 deletions
64
src/services/ui/src/components/Opensearch/Settings/Visibility.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import { cn } from "@/lib/utils"; | ||
import { Icon, Typography } from "@enterprise-cmcs/macpro-ux-lib"; | ||
import * as UI from "@/components/Popover"; | ||
|
||
type Item = { label: string; field: string; hidden: boolean }; | ||
|
||
type Props<T extends Item> = { | ||
list: T[]; | ||
onItemClick: (field: string) => void; | ||
}; | ||
|
||
export const VisibilityPopover = <T extends Item>(props: Props<T>) => { | ||
return ( | ||
<UI.Popover> | ||
<UI.PopoverTrigger> | ||
<Icon name="visibility" /> | ||
</UI.PopoverTrigger> | ||
<UI.PopoverContent className="bg-white"> | ||
<div className="flex flex-col gap-2"> | ||
<VisibilityMenu {...props} /> | ||
</div> | ||
</UI.PopoverContent> | ||
</UI.Popover> | ||
); | ||
}; | ||
|
||
export const VisiblityItem = <T extends Item>( | ||
props: T & { onClick: () => void } | ||
) => { | ||
return ( | ||
<div | ||
className={cn("flex flex-row gap-2 cursor-pointer", { | ||
"text-gray-800": !props.hidden, | ||
"text-gray-400": props.hidden, | ||
})} | ||
onClick={props.onClick} | ||
> | ||
<Icon | ||
name={!props.hidden ? "visibility" : "visibility_off"} | ||
className={cn({ | ||
"text-gray-800": !props.hidden, | ||
"text-gray-400": props.hidden, | ||
})} | ||
/> | ||
<Typography size="md" className="mt-[-1px]"> | ||
{props.label} | ||
</Typography> | ||
</div> | ||
); | ||
}; | ||
|
||
export const VisibilityMenu = <T extends Item>(props: Props<T>) => { | ||
return ( | ||
<div className="flex flex-col gap-2"> | ||
{props.list.map((IT) => ( | ||
<VisiblityItem | ||
key={`vis-${IT.field}`} | ||
onClick={() => props.onItemClick(IT.field)} | ||
{...IT} | ||
/> | ||
))} | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./Visibility"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import * as UI from "@/components/Table"; | ||
import { FC, useState } from "react"; | ||
import { OsTableColumn } from "./types"; | ||
import { useOsContext } from "../Provider"; | ||
import { useOsParams } from "../useOpensearch"; | ||
import { VisibilityPopover } from "../Settings"; | ||
|
||
export const OsTable: FC<{ | ||
columns: OsTableColumn[]; | ||
}> = (props) => { | ||
const context = useOsContext(); | ||
const params = useOsParams(); | ||
const [osColumns, setOsColumns] = useState( | ||
props.columns.map((COL) => ({ ...COL, hidden: false })) | ||
); | ||
|
||
const onToggle = (field: string) => { | ||
setOsColumns((state) => { | ||
return state?.map((S) => { | ||
if (S.field !== field) return S; | ||
return { ...S, hidden: !S.hidden }; | ||
}); | ||
}); | ||
}; | ||
|
||
return ( | ||
<UI.Table className="flex-1 border-[1px]"> | ||
<UI.TableHeader className="sticky top-0 bg-white"> | ||
<UI.TableRow> | ||
{osColumns.map((TH) => { | ||
if (TH.hidden) return null; | ||
return ( | ||
<UI.TableHead | ||
{...(!!TH.props && TH.props)} | ||
key={`TH-${TH.field}`} | ||
isActive={params.state.sort.field === TH.field} | ||
desc={params.state.sort.order === "desc"} | ||
onClick={() => | ||
params.onSet((s) => ({ | ||
...s, | ||
sort: { | ||
field: TH.field, | ||
order: s.sort.order === "desc" ? "asc" : "desc", | ||
}, | ||
})) | ||
} | ||
> | ||
{TH.label} | ||
</UI.TableHead> | ||
); | ||
})} | ||
|
||
<UI.TableHead | ||
className="w-[10px]" | ||
icon={<VisibilityPopover list={osColumns} onItemClick={onToggle} />} | ||
/> | ||
</UI.TableRow> | ||
</UI.TableHeader> | ||
<UI.TableBody> | ||
{context.data?.hits.map((DAT) => ( | ||
<UI.TableRow key={DAT._source.id}> | ||
{osColumns.map((COL) => { | ||
if (COL.hidden) return null; | ||
return ( | ||
<UI.TableCell | ||
key={`${COL.field}-${DAT._source.id}`} | ||
className="font-medium" | ||
> | ||
{COL.cell(DAT._source)} | ||
</UI.TableCell> | ||
); | ||
})} | ||
</UI.TableRow> | ||
))} | ||
</UI.TableBody> | ||
</UI.Table> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import type { OsField, OsHit, OsMainSourceItem } from "shared-types"; | ||
import type { ReactNode } from "react"; | ||
|
||
export type OsTableColumn = { | ||
field: OsField; | ||
label: string; | ||
props?: any; | ||
cell: (data: OsHit<OsMainSourceItem>["_source"]) => ReactNode; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export * from "./useOpensearch"; | ||
export * from "./Table"; | ||
export * from "./Filtering"; | ||
export * from "./Provider"; |
Oops, something went wrong.