diff --git a/src/components/shared/EditTableViewModal.tsx b/src/components/shared/EditTableViewModal.tsx index b6e6f23471..faab6c5fda 100644 --- a/src/components/shared/EditTableViewModal.tsx +++ b/src/components/shared/EditTableViewModal.tsx @@ -11,7 +11,16 @@ import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee import { availableHotkeys } from "../../configs/hotkeysConfig"; import { useHotkeys } from "react-hotkeys-hook"; import { useAppDispatch, useAppSelector } from "../../store"; -import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig"; +import { aclsTableConfig, TableColumn } from "../../configs/tableConfigs/aclsTableConfig"; +import { eventsTableConfig } from "../../configs/tableConfigs/eventsTableConfig"; +import { seriesTableConfig } from "../../configs/tableConfigs/seriesTableConfig"; +import { recordingsTableConfig } from "../../configs/tableConfigs/recordingsTableConfig"; +import { jobsTableConfig } from "../../configs/tableConfigs/jobsTableConfig"; +import { serversTableConfig } from "../../configs/tableConfigs/serversTableConfig"; +import { servicesTableConfig } from "../../configs/tableConfigs/servicesTableConfig"; +import { usersTableConfig } from "../../configs/tableConfigs/usersTableConfig"; +import { groupsTableConfig } from "../../configs/tableConfigs/groupsTableConfig"; +import { themesTableConfig } from "../../configs/tableConfigs/themesTableConfig"; /** * This component renders the modal for editing which columns are shown in the table @@ -84,6 +93,32 @@ const EditTableViewModal = ({ close(); }; + // Reset columns to how they were before the user made any changes ever + const resetToInitialConfig = () => { + const initialConfig = getConfigByResource(resource); + setActiveColumns(initialConfig?.columns.filter((column) => !column.deactivated) ?? []); + setDeactivatedColumns(initialConfig?.columns.filter((column) => column.deactivated) ?? []); + } + + const getConfigByResource = (resource: string) => { + switch (resource) { + case "events": return eventsTableConfig; + case "series": return seriesTableConfig; + case "recordings": return recordingsTableConfig; + case "jobs": return jobsTableConfig; + case "servers": return serversTableConfig; + case "services": return servicesTableConfig; + case "users": return usersTableConfig; + case "groups": return groupsTableConfig; + case "acls": return aclsTableConfig; + case "themes": return themesTableConfig; + default: { + console.warn("Resource of type " + resource + " is undefined for tableConfigs.") + return undefined; + } + } + } + // change column order based on where column was dragged and dropped const onDragEnd: OnDragEndResponder = (result) => { // dropped outside the list @@ -253,6 +288,9 @@ const EditTableViewModal = ({ + diff --git a/src/slices/tableSlice.ts b/src/slices/tableSlice.ts index ae6455574e..39675a6410 100644 --- a/src/slices/tableSlice.ts +++ b/src/slices/tableSlice.ts @@ -70,11 +70,13 @@ export function isSeries(row: Row | Event | Series | Recording | Server | Job | // TODO: Improve row typing. While this somewhat correctly reflects the current state of our code, it is rather annoying to work with. export type Row = { selected: boolean } & ( Event | Series | Recording | Server | Job | Service | UserResult | Group | AclResult | ThemeDetailsType ) +export type Resource = "events" | "series" | "recordings" | "jobs" | "servers" | "services" | "users" | "groups" | "acls" | "themes" + type TableState = { status: 'uninitialized' | 'loading' | 'succeeded' | 'failed', error: SerializedError | null, multiSelect: boolean, - resource: string, + resource: Resource, pages: Page[], columns: TableConfig["columns"], sortBy: string, @@ -90,7 +92,7 @@ const initialState: TableState = { status: 'uninitialized', error: null, multiSelect: false, - resource: "", + resource: "events", pages: [], columns: [], sortBy: "date", diff --git a/src/thunks/tableThunks.ts b/src/thunks/tableThunks.ts index 45b92c27b0..7bc38dac30 100644 --- a/src/thunks/tableThunks.ts +++ b/src/thunks/tableThunks.ts @@ -75,7 +75,7 @@ export const loadEventsIntoTable = (): AppThunk => async (dispatch, getState) => const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "events", + resource: "events" as const, rows: resource, columns: events.columns, multiSelect: table.multiSelect, @@ -124,7 +124,7 @@ export const loadSeriesIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "series", + resource: "series" as const, rows: resource, columns: series.columns, multiSelect: table.multiSelect, @@ -156,7 +156,7 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "recordings", + resource: "recordings" as const, columns: recordings.columns, multiSelect: table.multiSelect, pages: pages, @@ -191,7 +191,7 @@ export const loadJobsIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "jobs", + resource: "jobs" as const, rows: resource.map((obj) => { return { ...obj, selected: false } }), @@ -225,7 +225,7 @@ export const loadServersIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "servers", + resource: "servers" as const, rows: resource.map((obj) => { return { ...obj, selected: false } }), @@ -264,7 +264,7 @@ export const loadServicesIntoTable = (): AppThunk => (dispatch, getState) => { }), pages: pages, totalItems: total, - resource: "services", + resource: "services" as const, columns: services.columns, multiSelect: table.multiSelect, sortBy: table.sortBy, @@ -294,7 +294,7 @@ export const loadUsersIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "users", + resource: "users" as const, rows: resource.map((obj) => { return { ...obj, selected: false } }), @@ -328,7 +328,7 @@ export const loadGroupsIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "groups", + resource: "groups" as const, rows: resource.map((obj) => { return { ...obj, selected: false } }), @@ -362,7 +362,7 @@ export const loadAclsIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "acls", + resource: "acls" as const, rows: resource.map((obj) => { return { ...obj, selected: false } }), @@ -395,7 +395,7 @@ export const loadThemesIntoTable = (): AppThunk => (dispatch, getState) => { const pages = calculatePages(total / pagination.limit, pagination.offset); let tableData = { - resource: "themes", + resource: "themes" as const, rows: resource.map((obj) => { return { ...obj, selected: false } }),