basics for DocumentByTypeCommander

ui2/src/features/nodes/components/Commander/DocumentsByTypeCommander/ActionButtons.tsx

@@ -0,0 +1,10 @@
+import {Group} from "@mantine/core"
+import ViewOptionsMenu from "../ViewOptionsMenu"
+
+export default function ActionButtons() {
+  return (
+    <Group>
+      <ViewOptionsMenu />
+    </Group>
+  )
+}

ui2/src/features/nodes/components/Commander/DocumentsByTypeCommander/DocumentTypeFilter.tsx

@@ -0,0 +1,11 @@
+import {Select} from "@mantine/core"
+
+export default function DocumentTypeFilter() {
+  return (
+    <Select
+      searchable
+      placeholder="Pick Document Type"
+      data={["React", "Angular", "Vue", "Svelte"]}
+    />
+  )
+}

ui2/src/features/nodes/components/Commander/DocumentsByTypeCommander/DocumentsByTypeCommander.tsx

@@ -0,0 +1,19 @@
+import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
+import {Box, Group, Stack} from "@mantine/core"
+import ActionButtons from "./ActionButtons"
+import DocumentTypeFilter from "./DocumentTypeFilter"
+
+export default function DocumentsByCategoryCommander() {
+  return (
+    <Box>
+      <Group justify="space-between">
+        <DocumentTypeFilter />
+        <Group>
+          <ActionButtons />
+          <ToggleSecondaryPanel />
+        </Group>
+      </Group>
+      <Stack>Empty</Stack>
+    </Box>
+  )
+}

ui2/src/features/nodes/components/Commander/DocumentsByTypeCommander/index.tsx

@@ -0,0 +1,3 @@
+import DocumentsByCategoryCommander from "./DocumentsByTypeCommander"
+
+export default DocumentsByCategoryCommander

ui2/src/features/nodes/components/Commander/ViewOptionsMenu.tsx

@@ -1,21 +1,25 @@
-import {useAppDispatch} from "@/app/hooks"
+import {useAppDispatch, useAppSelector} from "@/app/hooks"
 import PanelContext from "@/contexts/PanelContext"
-import type {ViewOptionColumn} from "@/types"
+import {
+  commanderViewOptionUpdated,
+  selectCommanderViewOption
+} from "@/features/ui/uiSlice"
+import type {ViewOption} from "@/types"
 import {ActionIcon, Menu} from "@mantine/core"
 import {IconCheck, IconListDetails} from "@tabler/icons-react"
 import {useContext} from "react"
 
 export default function ViewOptionsMenu() {
   const dispatch = useAppDispatch()
   const mode = useContext(PanelContext)
+  const viewOption = useAppSelector(s => selectCommanderViewOption(s, mode))
 
-  const onViewOptionsChanged = (column: ViewOptionColumn) => {
-    //dispatch(commanderSortMenuColumnUpdated({mode, column}))
-    console.log(column)
+  const onViewOptionsChanged = (value: ViewOption) => {
+    dispatch(commanderViewOptionUpdated({mode, viewOption: value}))
   }
 
   return (
-    <Menu shadow="md" width={150}>
+    <Menu shadow="md" width={180}>
       <Menu.Target>
         <ActionIcon size="lg" variant="default">
           <IconListDetails size={18} />
@@ -25,12 +29,20 @@ export default function ViewOptionsMenu() {
       <Menu.Dropdown>
         <Menu.Item
           onClick={() => onViewOptionsChanged("tile")}
-          rightSection={<IconCheck />}
+          rightSection={viewOption == "tile" && <IconCheck />}
         >
           Tiles
         </Menu.Item>
-        <Menu.Item onClick={() => onViewOptionsChanged("list")}>List</Menu.Item>
-        <Menu.Item onClick={() => onViewOptionsChanged("document-type")}>
+        <Menu.Item
+          onClick={() => onViewOptionsChanged("list")}
+          rightSection={viewOption == "list" && <IconCheck />}
+        >
+          List
+        </Menu.Item>
+        <Menu.Item
+          onClick={() => onViewOptionsChanged("document-type")}
+          rightSection={viewOption == "document-type" && <IconCheck />}
+        >
           Document Type
         </Menu.Item>
       </Menu.Dropdown>

ui2/src/features/nodes/components/Commander/index.tsx

@@ -1,5 +1,18 @@
+import {useAppSelector} from "@/app/hooks"
+import PanelContext from "@/contexts/PanelContext"
+import {selectCommanderViewOption} from "@/features/ui/uiSlice"
+import {useContext} from "react"
+
+import DocumentsByTypeCommander from "./DocumentsByTypeCommander"
 import NodesCommander from "./NodesCommander"
 
 export default function Commander() {
-  return <NodesCommander />
+  const mode = useContext(PanelContext)
+  const viewOption = useAppSelector(s => selectCommanderViewOption(s, mode))
+
+  if (viewOption == "list" || viewOption == "tile") {
+    return <NodesCommander />
+  }
+
+  return <DocumentsByTypeCommander />
 }

ui2/src/features/ui/uiSlice.ts

@@ -1,6 +1,12 @@
 import type {RootState} from "@/app/types"
 import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
-import type {BooleanString, CType, ClientPage, PanelMode} from "@/types"
+import type {
+  BooleanString,
+  CType,
+  ClientPage,
+  PanelMode,
+  ViewOption
+} from "@/types"
 import {PayloadAction, createSelector, createSlice} from "@reduxjs/toolkit"
 import Cookies from "js-cookie"
 
@@ -80,6 +86,11 @@ type SortMenuDirectionUpdatedArgs = {
   direction: SortMenuDirection
 }
 
+type ViewOptionArgs = {
+  mode: PanelMode
+  viewOption: ViewOption
+}
+
 export interface UploaderFileItemArgs {
   item: {
     source: NodeType | null
@@ -183,11 +194,13 @@ interface UIState {
   mainCommanderLastPageSize?: number
   mainCommanderSortMenuColumn?: SortMenuColumn
   mainCommanderSortMenuDir?: SortMenuDirection
+  mainCommanderViewOption?: ViewOption
   secondaryCommanderSelectedIDs?: Array<String>
   secondaryCommanderFilter?: string
   secondaryCommanderLastPageSize?: number
   secondaryCommanderSortMenuColumn?: SortMenuColumn
   secondaryCommanderSortMenuDir?: SortMenuDirection
+  secondaryCommanderViewOption?: ViewOption
   /* Which component should main panel display:
     commander, viewer or search results? */
   mainPanelComponent?: PanelComponent
@@ -507,6 +520,14 @@ const uiSlice = createSlice({
         state.secondaryCommanderSortMenuDir = direction
       }
     },
+    commanderViewOptionUpdated(state, action: PayloadAction<ViewOptionArgs>) {
+      const {mode, viewOption} = action.payload
+      if (mode == "main") {
+        state.mainCommanderViewOption = viewOption
+      } else {
+        state.secondaryCommanderViewOption = viewOption
+      }
+    },
     viewerThumbnailsPanelToggled(state, action: PayloadAction<PanelMode>) {
       const mode = action.payload
 
@@ -722,6 +743,7 @@ export const {
   commanderLastPageSizeUpdated,
   commanderSortMenuColumnUpdated,
   commanderSortMenuDirectionUpdated,
+  commanderViewOptionUpdated,
   viewerThumbnailsPanelToggled,
   viewerDocumentDetailsPanelToggled,
   zoomFactorIncremented,
@@ -909,6 +931,17 @@ export const selectCommanderSortMenuDir = (
   return state.ui.secondaryCommanderSortMenuDir || "az"
 }
 
+export const selectCommanderViewOption = (
+  state: RootState,
+  mode: PanelMode
+): ViewOption => {
+  if (mode == "main") {
+    return state.ui.mainCommanderViewOption || "tile"
+  }
+
+  return state.ui.secondaryCommanderViewOption || "tile"
+}
+
 export const selectZoomFactor = (state: RootState, mode: PanelMode) => {
   if (mode == "main") {
     return state.ui.mainViewerZoomFactor || ZOOM_FACTOR_INIT

ui2/src/types.ts

@@ -428,7 +428,7 @@ export interface ServerErrorType {
 
 export type SortMenuColumn = "title" | "ctype" | "created_at" | "updated_at"
 export type SortMenuDirection = "az" | "za"
-export type ViewOptionColumn = "tile" | "list" | "document-type"
+export type ViewOption = "tile" | "list" | "document-type"
 
 export interface CustomFieldValueType {
   custom_field_id: string