-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP start integrating column name management tool into apps table
- Loading branch information
1 parent
ad90cd5
commit 9ac034d
Showing
3 changed files
with
242 additions
and
10 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
162 changes: 162 additions & 0 deletions
162
client/src/app/pages/applications/applications-table/components/manage-columns-modal.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,162 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { | ||
| Button, | ||
| DataList, | ||
| DataListCell, | ||
| DataListCheck, | ||
| DataListControl, | ||
| DataListDragButton, | ||
| DataListItem, | ||
| DataListItemCells, | ||
| DataListItemRow, | ||
| DragDrop, | ||
| Draggable, | ||
| Droppable, | ||
| Modal, | ||
| Text, | ||
| TextContent, | ||
| TextVariants, | ||
| } from "@patternfly/react-core"; | ||
|
|
||
| export interface ManagedColumnsProps { | ||
| showModal: boolean; | ||
| onClose(): void; | ||
| onChange(columnNames: Record<string, string>): void; | ||
| columnNames: Record<string, string>; | ||
| setColumnNames(columnNames: Record<string, string>): void; | ||
| description?: string; | ||
| saveLabel?: string; | ||
| cancelLabel?: string; | ||
| reorderLabel?: string; | ||
| restoreLabel?: string; | ||
| title?: string; | ||
| } | ||
|
|
||
| export const ManageColumnsModal = ({ | ||
| showModal, | ||
| description = "Selected columns will be displayed in the table.", | ||
| onClose, | ||
| onChange, | ||
| columnNames, | ||
| saveLabel = "Save", | ||
| cancelLabel = "Cancel", | ||
| reorderLabel = "Reorder", | ||
| restoreLabel = "Restore default columns", | ||
| title = "Manage Columns", | ||
| }: ManagedColumnsProps) => { | ||
| const [editedColumns, setEditedColumns] = useState( | ||
| Object.entries(columnNames).map(([id, label]) => ({ | ||
| id, | ||
| label, | ||
| isVisible: true, // Initially set all columns as visible | ||
| })) | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| // Reset editedColumns when columnNames prop changes | ||
| setEditedColumns( | ||
| Object.entries(columnNames).map(([id, label]) => ({ | ||
| id, | ||
| label, | ||
| isVisible: true, | ||
| })) | ||
| ); | ||
| }, [columnNames]); | ||
|
|
||
| const restoreDefaults = () => { | ||
| // Assuming you want to reset to the initial state passed through props | ||
| setEditedColumns( | ||
| Object.entries(columnNames).map(([id, label]) => ({ | ||
| id, | ||
| label, | ||
| isVisible: true, | ||
| })) | ||
| ); | ||
| }; | ||
|
|
||
| const onDrop = (sourceIndex: any, destinationIndex: any) => { | ||
| const result = Array.from(editedColumns); | ||
| const [removed] = result.splice(sourceIndex, 1); | ||
| result.splice(destinationIndex, 0, removed); | ||
| setEditedColumns(result); | ||
| }; | ||
|
|
||
| const onSelect = (id: any, isVisible: any) => { | ||
| setEditedColumns( | ||
| editedColumns.map((col) => ({ | ||
| ...col, | ||
| isVisible: col.id === id ? isVisible : col.isVisible, | ||
| })) | ||
| ); | ||
| }; | ||
|
|
||
| const onSave = () => { | ||
| const newColumnNames = editedColumns.reduce<Record<string, string>>( | ||
| (acc, { id, label, isVisible }) => { | ||
| if (isVisible) { | ||
| acc[id] = label; | ||
| } | ||
| return acc; | ||
| }, | ||
| {} | ||
| ); | ||
| onChange(newColumnNames); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal | ||
| title={title} | ||
| isOpen={showModal} | ||
| variant="small" | ||
| description={ | ||
| <TextContent> | ||
| <Text component={TextVariants.p}>{description}</Text> | ||
| </TextContent> | ||
| } | ||
| onClose={onClose} | ||
| actions={[ | ||
| <Button key="save" variant="primary" onClick={onSave}> | ||
| {saveLabel} | ||
| </Button>, | ||
| <Button key="cancel" variant="secondary" onClick={onClose}> | ||
| {cancelLabel} | ||
| </Button>, | ||
| <Button key="restore" variant="link" onClick={restoreDefaults}> | ||
| {restoreLabel} | ||
| </Button>, | ||
| ]} | ||
| > | ||
| {/* <DragDrop onDrop={(source, dest) => onDrop(source.index, dest?.index)}> */} | ||
| <DragDrop> | ||
| <Droppable> | ||
| <DataList aria-label={title} id="table-column-management" isCompact> | ||
| {editedColumns.map(({ id, label, isVisible }, index) => ( | ||
| <Draggable key={id}> | ||
| <DataListItem aria-labelledby={`draggable-${id}`}> | ||
| <DataListItemRow> | ||
| <DataListControl> | ||
| <DataListDragButton aria-label={reorderLabel} /> | ||
| <DataListCheck | ||
| aria-labelledby={`check-${id}`} | ||
| checked={isVisible} | ||
| onChange={(checked) => onSelect(id, checked)} | ||
| /> | ||
| </DataListControl> | ||
| <DataListItemCells | ||
| dataListCells={[ | ||
| <DataListCell key="primary"> | ||
| <span id={`draggable-${id}`}>{label}</span> | ||
| </DataListCell>, | ||
| ]} | ||
| /> | ||
| </DataListItemRow> | ||
| </DataListItem> | ||
| </Draggable> | ||
| ))} | ||
| </DataList> | ||
| </Droppable> | ||
| </DragDrop> | ||
| </Modal> | ||
| ); | ||
| }; |
60 changes: 60 additions & 0 deletions
60
client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.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,60 @@ | ||
| import { | ||
| Button, | ||
| OverflowMenu, | ||
| OverflowMenuGroup, | ||
| OverflowMenuItem, | ||
| ToolbarItem, | ||
| } from "@patternfly/react-core"; | ||
| import React, { useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { ManageColumnsModal } from "./manage-columns-modal"; | ||
|
|
||
| export interface ManageColumnsToolbarProps { | ||
| /** Read only. The defaults used for initialization.*/ | ||
| columnNames: Record<string, string>; | ||
| /** Setter to modify state in the parent.*/ | ||
| setColumnNames(columnNames: Record<string, string>): void; | ||
| } | ||
|
|
||
| /** | ||
| * Toggles a modal dialog for managing resourceFields visibility and order. | ||
| */ | ||
| export const ManageColumnsToolbar = ({ | ||
| setColumnNames, | ||
| columnNames, | ||
| }: ManageColumnsToolbarProps) => { | ||
| const { t } = useTranslation(); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| return ( | ||
| <> | ||
| <ToolbarItem variant="overflow-menu"> | ||
| <OverflowMenu breakpoint="md"> | ||
| <OverflowMenuGroup groupType="button" isPersistent> | ||
| <OverflowMenuItem> | ||
| <Button variant="primary">Action</Button> | ||
| </OverflowMenuItem> | ||
| <OverflowMenuItem isPersistent> | ||
| <Button variant="link" onClick={() => setIsOpen(true)}> | ||
| Manage columns | ||
| </Button> | ||
| </OverflowMenuItem> | ||
| </OverflowMenuGroup> | ||
| </OverflowMenu> | ||
| </ToolbarItem> | ||
|
|
||
| <ManageColumnsModal | ||
| showModal={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| description={t("Selected columns will be displayed in the table.")} | ||
| onChange={setColumnNames} | ||
| setColumnNames={setColumnNames} | ||
| columnNames={columnNames} | ||
| saveLabel={t("Save")} | ||
| cancelLabel={t("Cancel")} | ||
| reorderLabel={t("Reorder")} | ||
| restoreLabel={t("Restore default columns")} | ||
| title={t("Manage Columns")} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |